Replace the user interface of this web app with one that matches a native iOS app

<!DOCTYPE html>
<!-- LICENSE: https://github.com/wernjie/digital-scale-plus/blob/master/LICENSE -->
<html lang="en">
    <head>
    	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-57211579-1"></script>
    	<script>
	        window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
	        gtag('js', new Date());

	        gtag('config', 'UA-57211579-1');
	    </script>

        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    	<meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="apple-touch-icon" href="Digital-Scale-Icon-2.png">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">

        <title>Digital Scale+</title>
        <style>
        * {
            font-family: sans-serif, Helvetica, Arial;
            -webkit-user-select: none;
            -webkit-text-size-adjust: 100%;
        }
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        #view {
            background: #FFF;
            height: 100%;
            width: 100%;
        }
        #navigationBar {
            width: 100%;
            height: 56px;
            margin: 0 auto;
            position: absolute;
            background: #3876ED;
        }  
        #title {
            width: 100%;
            height: 25px;
            top: calc(50% - 25px/2);
            text-align: center;
            font-size: 20px;
            color: white;
            position: relative;
        }
        #setting{
            position: absolute;
            font-size: 15px;
            top: 12px;
            right: 8px;
            text-align: center;
        }
        #weightLabel {
            width: 100%;
            height: 72px;
            position: absolute;
            text-align: center;
            font-size: 40px;
            line-height: 75px;
            padding-bottom: 8px;
            bottom: 0px;
            color: white;
            font-family: 'Menlo', sans-serif, Helvetica;
            background: #3876ED;
        }
        
        #weightMeasurementArea {
            position: absolute;
            top: calc(16px + 56px);
            left: 16px;
            right: 16px;
            bottom: calc(16px + 80px);
            margin: auto;
            background: #fdfdfd;
            border-radius: 20px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
        }
        #message, #orientationWarning {
            width: 100%;
            height: auto;
            text-align: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            position: absolute;
            font-size: 12px;
            color: #777;
        }
        #orientationWarning {
            transform: translate(-50%, -60%);
            display: none;
        }
        #footer {
            width: 100%;
            text-align: center;
            position:absolute;
            bottom: calc(80px + 24px);
            font-size: 12px;
            color: #777;
        }
        #footer a {
            color: #07F;
        }
        #controls {
            width: 100%;
            height: 80px;
            position: absolute;
            background: #4B8CF3;
            bottom: 0px;
            display: none;
        }
        select {
            bottom: 10px;
            width: 40%;
            height: 28px;
            margin-top:    8px;
            margin-bottom: 8px;
            margin-left:  5%;
            margin-right: 5%;
            position: absolute;
            text-align: center;
            border: none;
            border-radius: 14px;
            outline: none;
            font-weight: bold;
            font-size: 15px;
            -webkit-appearance: none;
            background-color: white;
        }
        .settingLabel {
            position: absolute;
            font-size: 12px;
            font-weight: bold;
            width: 37%;
            text-align: center;
            top: 8px;
            color: white;
        }
        a, a:hover, a:active, a:visited {
            color: white;
        }
        @media screen and (prefers-color-scheme: dark) {
            html, body {
                background: black;
            }
            #view {
                background: #000;
            }
            #navigationBar {
                background: #000;
            }
            #weightMeasurementArea {
                background: #222;
            }
            #message, #orientationWarning {
                color: #BBB;
            }
            #weightLabel {
                background: #000;
            }
            #controls {
                background: #000;
            }
            #footer a {
                color: #09F;
            }
        }
        @media screen and (orientation: landscape) and (max-height: 512px) {
            html, body {
                background: black; /* hack to hide display cutout on iPhone X, XS when in landscape mode */
            }
            #message {
                display: none;
            }
            #orientationWarning {
                display: block;
            }
        }
        </style>
    </head>
    <body> 
        <div id="view">
            <div id="navigationBar">
                <div id="title"><b>Digital Scale+</b></div>
                <div id="setting"><img src="white-gear-icon.png" height='32px' width='32px'></img>
                </div>
            </div>
            
            <div id="weightMeasurementArea">
                <div id="message">
                    This app uses 3D touch to function.
                    <br><br>
                    Place something conductive on the center<br>
                    of the screen to measure its weight.
                    <br><br>
                    If it is not conductive, place a spoon, set<br>
                    spoon as the tare weight, then place the<br>
                    object on the spoon to measure its weight.
                    <br><br>
                    Touch the weight below to set the <br> current weight as the tare weight.
                    <br><br>
                    If you have changed your device's 3D Touch<br>
                    Sensitivity, set it in this app's settings.
                </div>
                <div id="orientationWarning">
                    Place something conductive on the center<br>
                    of the screen to measure its weight.
                    <br><br>
                    Please rotate your phone to portrait<br>
                    to view detailed instructions.
                </div>
            </div>

            <div id="footer"><a href="https://www.wernjie.com/digital-scale-3d-touch/">Need help or more info?</a></div>
            
            <b><div id="weightLabel">Loading...</div></b>
            
            <div id="controls">
                
                <select id="WeightUnitSelector" style="left: 0;">
                    <option value="0" selected>Grams</option>
                    <option value="1">Ounces</option>
                    <option value="2">Pounds</option>
                    <option value="3">Newtons</option>
                </select>
                <select id="Sensitivity3dSelector" style="right: 0;">
                    <option value="0">Light</option>
                    <option value="1" selected>Medium</option>
                    <option value="2">Firm</option>
                </select>
                <div class="settingLabel" style="left: 7%;">
                    Weight Unit
                </div>
                <div class="settingLabel" style="right: 7%;">
                    3D Touch Sensitivity
                </div>
            </div>
            
        </div></div>
        <link rel="stylesheet" type="text/css" href="addtohomescreen.css">
        <script src="addtohomescreen.js"></script>
        <script>
        var weightLabel = document.getElementById('weightLabel');
        
        var tareForce = 0;
        function tareWeight() {
            tareForce = getCurrent3DTForce();
            updateForce();
        }
        
        weightLabel.onclick = tareWeight;
        
        var forceConversionRatios = [320, 400, 480];
        var selected3DTSettingIndex = getStoredSensitivity();
        
        
        var weightUnitIndex = getStoredWeightUnitIndex();
        var weightUnitNames = ['g','oz','lb','N']
        var weightConvertGramsRatios/*Unit*/ = [1.0, 0.03527396, 0.00220462, 0.00980665]
        
        var touch;
        var touches;
        var touchCount = 0;
        function onTouchStart(e) {
            touch = e.touches[0];
            touches = e.touches;
            touchCount = e.touches.length;
            settingPressed(true); //Force close settings if open
            updateForce();
        }
        function onTouchMove(e) {
            e.preventDefault();
            touches = e.touches;
            touch = e.touches[0];
            touchCount = e.touches.length;
            updateForce();
        }
        function onTouchForceChange(e) {
            e.preventDefault();
            touch = e.touches[0];
            touches = e.touches;
            touchCount = e.touches.length;
            updateForce();
        }
        function onTouchEnded(e) {
            e.preventDefault();
            touch = undefined;
            touches = e.touches;
            touchCount = e.touches.length;
            updateForce();
        }
        
        var confirmNoErrors = false; 
        function updateForce() {
            var raw3dtForce = getCurrent3DTForce()
            var current3dtForce = raw3dtForce - tareForce;
            var isMaxForce = current3dtForce == touchCount - tareForce && touchCount != 0;
            var currentGramsForce = getForceInGrams(current3dtForce);
            var displayedWeight = getDisplayedWeight(currentGramsForce);

            if ((raw3dtForce == 0 || isNaN(raw3dtForce)) && touchCount != 0 && !confirmNoErrors) {
                weightLabel.innerText = "No 3D Touch?";
            } else {
                if (touchCount != 0) {
                    confirmNoErrors = true;
                }
                weightLabel.innerText = (isMaxForce ? "≥" : "") + displayedWeight;
            }
            
            var alpha = 0.2*(1-current3dtForce);
            weightMeasurementArea.style.boxShadow = "0 4px 8px 0 rgba(0, 0, 0, " + alpha + "), 0 6px 20px 0 rgba(0, 0, 0, " + alpha + ");"
        }
        
        function getCurrent3DTForce() {
            var totalforce = 0;
            for (var i = 0; i < touchCount; i++) {
                totalforce += touches[i].force;
            }
            return totalforce;//(typeof touch !== 'undefined') ? touch.force : 0;
        }
        
        function getForceInGrams(scale) {
            return scale * forceConversionRatios[selected3DTSettingIndex];
            //Returns scale from 0-1 multiplied by the force conversion
        }
        function getDisplayedWeight(grams) {
            var conversionRatio = weightConvertGramsRatios[weightUnitIndex]
            
            var finalWeight = grams * conversionRatio;
            
            var inaccuracyRatio = Math.round(Math.min(Math.pow(2, Math.round(Math.floor(Math.abs(grams)/100))), 4));
            
            var decimalPointPrecision = 2;

            if (weightUnitNames[weightUnitIndex] == 'g') {
                finalWeight = Math.round(finalWeight/5.0/inaccuracyRatio)*5.0*inaccuracyRatio;
                decimalPointPrecision = 0;
            } else if (weightUnitNames[weightUnitIndex] == 'oz') {
                finalWeight = Math.round(finalWeight*5.0/inaccuracyRatio)/5.0*inaccuracyRatio;
                decimalPointPrecision = Math.max(0, 2 - inaccuracyRatio);
            } else if (weightUnitNames[weightUnitIndex] == 'N') {
                finalWeight = Math.round(finalWeight*20.0/inaccuracyRatio)/20*inaccuracyRatio;
                decimalPointPrecision = Math.max(1, 3 - inaccuracyRatio);
            } else if (weightUnitNames[weightUnitIndex] == 'lb') {
                finalWeight = Math.round(finalWeight*100.0/inaccuracyRatio)/100*inaccuracyRatio;
                decimalPointPrecision = 2;
            }           

            return finalWeight.toFixed(decimalPointPrecision) + weightUnitNames[weightUnitIndex];
        }
        
        function settingPressed(forceClose) {
            if (document.getElementById('controls').style.display == "inline" || forceClose) {
                document.getElementById('controls').style.display = "none";
            } else {
                document.getElementById('controls').style.display = "inline";
            }
        }
        
        //Cookie management
        function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays*24*60*60*1000));
            var expires = "expires="+d.toUTCString();
            document.cookie = cname + "=" + cvalue + "; " + expires;
        }
        
        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i = 0; i <ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length,c.length);
                }
            }
            return "";
        }
        
        //Storage and retrieval
        function getStoredWeightUnitIndex() {
            var data = getCookie("SelectedWeightUnitIndex");
            if (data != "") {
                return Number(data);
            } else {
                return 0;
            }
        }
        
        function getStoredSensitivity() {
            var data = getCookie("Selected3DTSensitivity");
            if (data != "") {
                return Number(data);
            } else {
                return 1;
            }
        }
        
        var Sensitivity3dSelector = document.getElementById('Sensitivity3dSelector');
        Sensitivity3dSelector.onchange = function(e) {
            selected3DTSettingIndex = this.selectedIndex;
            setCookie("Selected3DTSensitivity", selected3DTSettingIndex, 365);
            updateForce();
        }
        
        var WeightUnitSelector = document.getElementById('WeightUnitSelector');
        WeightUnitSelector.onchange = function(e) {
            weightUnitIndex = this.selectedIndex;
            setCookie("SelectedWeightUnitIndex", weightUnitIndex, 365);
            updateForce();
        }

        function isPortrait() {
            return window.innerHeight > window.innerWidth;
        }
        
        //Update selected setting on load
        window.onload = function() {
            Sensitivity3dSelector.selectedIndex = selected3DTSettingIndex;
            WeightUnitSelector.selectedIndex = weightUnitIndex;
        }
        
        
        //Update touch recognizers on load
        var weightMeasurementArea = document.getElementById('weightMeasurementArea')
        window.onload = function() {
            
            var iOS = ['iPad', 'iPhone', 'iPod', 'iPhone Simulator'].indexOf(navigator.platform) >= 0;
            if (!iOS) {
                window.alert("Sorry, but this application requires iOS.");
		        weightLabel.innerText = "iOS Only";	
            } else {
                function iOSversion() {
                    if (/iP(hone|od|ad)/.test(navigator.platform)) {
                        var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
                        return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
                    }
                }


                if (iOSversion()[0] >= 12.0) {
                    //document.getElementsByTagName("head").innerHTML += '<meta name="apple-mobile-web-app-capable" content="yes">'
                    addToHomescreen();
                } else {
                    window.alert("Note: This web app works best on iOS 12 and later. You are using iOS " + iOSversion()[0] + ". Please update your device for the best performance and to avoid any issues.");
                }
            }

            Sensitivity3dSelector.selectedIndex = selected3DTSettingIndex;
            WeightUnitSelector.selectedIndex = weightUnitIndex;
            
            weightMeasurementArea.addEventListener('touchstart', onTouchStart, false)
            weightMeasurementArea.addEventListener('touchmove', onTouchMove, false)
            weightMeasurementArea.addEventListener('touchforcechange', onTouchForceChange, false)
            weightMeasurementArea.addEventListener('touchend', onTouchEnded, false)
            weightLabel.addEventListener('touchstart', tareWeight, false)

            document.getElementById('setting').onclick = function() {
                settingPressed();
            }

            if (iOS) updateForce();
        }
        
            </script>
    </body>
</html>


Remove Google Analytics and make settings a tab