stevenhaskell
c16e2f763d
Added a service worker script to cache assets on local storage. In testing on desktop it worked. Need to test further on mobile.
212 lines
13 KiB
HTML
212 lines
13 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>Lift It 💪</title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="application-name" content="Lift It 💪">
|
|
|
|
<link rel="manifest" href="site.webmanifest">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
|
|
<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#5bbad5">
|
|
<meta name="msapplication-TileColor" content="#cdff00">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/appstyling-v2.css">
|
|
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab:500,500i" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script src="js/Weight Calculation Script-Edited-Jquery-V4.js"> </script>
|
|
</head>
|
|
<body>
|
|
<!--[if lte IE 9]>
|
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
|
<![endif]-->
|
|
|
|
<div class="b-container" id="header">
|
|
<a name="header"></a><div class="b-header">
|
|
<div class="b-header__container">
|
|
<h1 class="b-header__heading">What are you lifting?</h1>
|
|
<p class="b-header__subheading subheading">Enter your weight at the bottom and calculate your plates. Change your bar weight and plates in options.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plate Visuals -->
|
|
<div class="b-platevisual">
|
|
<div class="b-platevisual__container">
|
|
<div class="b-platevisual__weightfinalcontainer">
|
|
<p class="b-platevisual__weightfinal"><span class="input-element input-final">45</span> LBS</p>
|
|
</div>
|
|
<div class="b-platevisual__weight">
|
|
<img src="images/BarBell.svg" class="b-platevisual__barbell">
|
|
<div class="b-platevisual__plates b-platevisual__plates--left">
|
|
</div>
|
|
<div class="b-platevisual__plates b-platevisual__plates--right">
|
|
</div>
|
|
</div>
|
|
<div class="b-platevisual__weightdifferencecontainer">
|
|
<p class="b-platevisual__weightdifference subheading">Offset: <span class="input-difference">0</span> LBS</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="b-calulatorinputs">
|
|
<!-- Plate Requirements -->
|
|
<div class="b-calulatorinputs__platerequirements">
|
|
<div class="b-calulatorinputs__platerequirementscontainer">
|
|
<p class="b-calulatorinputs__subheading subheading">Plates Needed on Each Side</p>
|
|
<div class="b-calulatorinputs__inputcontainer">
|
|
<div class="b-calulatorinputs__input">
|
|
<label for="req45">45 LBS</label>
|
|
<input type="number" name="N45" class="input-element input-weightsneeded input-needed45" min="0" step="1" placeholder="0" readonly="readonly" id="req45">
|
|
</div>
|
|
<div class="b-calulatorinputs__input">
|
|
<label for="req35">35 LBS</label>
|
|
<input type="number" name="N35" class="input-element input-weightsneeded input-needed35" min="0" step="1" placeholder="0" readonly="readonly" id="req35">
|
|
</div>
|
|
<div class="b-calulatorinputs__input">
|
|
<label for="req25">25 LBS</label>
|
|
<input type="number" name="N25" class="input-element input-weightsneeded input-needed25" min="0" step="1" placeholder="0" readonly="readonly" id="req25">
|
|
</div>
|
|
<div class="b-calulatorinputs__input">
|
|
<label for="req10">10 LBS</label>
|
|
<input type="number" name="N10" class="input-element input-weightsneeded input-needed10" min="0" step="1" placeholder="0" readonly="readonly" id="req10">
|
|
</div>
|
|
<div class="b-calulatorinputs__input">
|
|
<label for="req5">5 LBS</label>
|
|
<input type="number"name="N5" class="input-element input-weightsneeded input-needed5" min="0" step="1" placeholder="0" readonly="readonly" id="req5">
|
|
</div>
|
|
<div class="b-calulatorinputs__input">
|
|
<label for="req2">2.5 LBS</label>
|
|
<input type="number" name="N2half" class="input-element input-weightsneeded input-needed2" min="0" step="1" placeholder="0" readonly="readonly" id="req2">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Weight Entry -->
|
|
<div class="b-calulatorinputs__infoentry">
|
|
<div class="b-calulatorinputs__inputcontainer--weight">
|
|
<div class="b-calulatorinputs__weightinput">
|
|
<div class="b-calulatorinputs__weightinputcontainer">
|
|
<label for="Weight">WEIGHT (LBS)</label>
|
|
<input type="number" inputmode="numeric" pattern="[0-9]*" class="b-infoentry__input input-element input-weight" name="Weight" placeholder="Enter your weight (LBS)" id="Weight">
|
|
<input type="button" name="reset" value="Reset" class="b-infoentry__reset">
|
|
</div>
|
|
<input type="button" class="b-infoentry__button submit-element input-calculate" name="Calculate" value="LIFT" onclick="startcalc()">
|
|
</div>
|
|
<a href="#options">
|
|
<div class="b-infoentry__dividerheading">
|
|
<h2 class="b-infoentry__heading">Options</h2>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Options Section -->
|
|
|
|
<a name="options"></a>
|
|
<div class="b-options" id="options">
|
|
<div class="b-options__weightmanipulators">
|
|
<div class="b-options__inputcontainer">
|
|
<div class="b-options__optionsinput">
|
|
<label for="Bar">BAR WEIGHT (LBS)</label>
|
|
<input type="number" inputmode="numeric" pattern="[0-9]*" class="b-options__input input-element input-bar" name="Bar" value="45" id="Bar">
|
|
</div>
|
|
<div class="b-options__optionsinput">
|
|
<label for="Percentage">PERCENT OF WEIGHT</label>
|
|
<select name="Percentage" class="b-options__percent input-element input-percentage" id="Percentage">
|
|
<option value="1" selected="">100% </option>
|
|
<option value="0.95">95% </option>
|
|
<option value="0.90">90% </option>
|
|
<option value="0.85">85% </option>
|
|
<option value="0.80">80% </option>
|
|
<option value="0.75">75% </option>
|
|
<option value="0.70">70% </option>
|
|
<option value="0.65">65% </option>
|
|
<option value="0.60">60% </option>
|
|
<option value="0.55">55% </option>
|
|
<option value="0.50">50% </option>
|
|
<option value="0.45">45% </option>
|
|
<option value="0.40">40% </option>
|
|
<option value="0.35">35% </option>
|
|
<option value="0.30">30% </option>
|
|
<option value="0.25">25% </option>
|
|
<option value="0.20">20% </option>
|
|
<option value="0.15">15% </option>
|
|
<option value="0.10">10% </option>
|
|
<option value="0.05">5% </option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="b-options__platesavailable">
|
|
<p class="b-options__subheading subheading">Plates Available</p>
|
|
<div class="b-options__inputcontainer">
|
|
<div class="b-calulatorinputs__input">
|
|
<label for="avail45">45 LBS</label>
|
|
<input type="number" inputmode="numeric" pattern="[0-9]*" data-weight="45" class="input-element input-weightsavailable input-available45" name="A45" min="0" step="1" value="20" placeholder="20" id="avail45">
|
|
</div>
|
|
<div class="b-calulatorinputs__input">
|
|
<label for="avail35">35 LBS</label>
|
|
<input type="number" inputmode="numeric" pattern="[0-9]*" data-weight="35" name="A35" class="input-element input-weightsavailable input-available35" min="0" step="1" value="4" placeholder="4" id="avail35">
|
|
</div>
|
|
<div class="b-calulatorinputs__input">
|
|
<label for="avail25">25 LBS</label>
|
|
<input type="number" inputmode="numeric" pattern="[0-9]*" data-weight="25" name="A25" class="input-element input-weightsavailable input-available25" min="0" step="1" value="4" placeholder="4" id="avail25">
|
|
</div>
|
|
<div class="b-calulatorinputs__input">
|
|
<label for="avail10">10 LBS</label>
|
|
<input type="number" inputmode="numeric" pattern="[0-9]*" data-weight="10" name="A10" class="input-element input-weightsavailable input-available10" min="0" step="1" value="4" placeholder="4" id="avail10">
|
|
</div>
|
|
<div class="b-calulatorinputs__input">
|
|
<label for="avail5">5 LBS</label>
|
|
<input type="number" inputmode="numeric" pattern="[0-9]*" data-weight="5" name="A5" class="input-element input-weightsavailable input-available5" min="0" step="1" value="4" placeholder="4" id="avail5">
|
|
</div>
|
|
<div class="b-calulatorinputs__input">
|
|
<label for="avail2">2.5 LBS</label>
|
|
<input type="number" inputmode="numeric" pattern="[0-9]*" data-weight="2.5" name="A2half" class="input-element input-weightsavailable input-available2" min="0" step="1" value="4" placeholder="4" id="avail2">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Back to top Button -->
|
|
|
|
<div class="b-returntop">
|
|
<a href="#header"> <h2 class="b-returnTop_heading">Back to Top</h2> </a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Checks is there is a service worker and adds or updates -->
|
|
<script>
|
|
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker.register('sw.js')
|
|
.then(swReg => {
|
|
console.log('Service Worker is registered', swReg);
|
|
})
|
|
.catch(err => {
|
|
console.error('Service Worker Error', err);
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
<!-- <script src="js/vendor/modernizr-3.5.0.min.js"></script> -->
|
|
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
|
|
|
|
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
|
|
<script>
|
|
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
|
|
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
|
|
</script>
|
|
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
|
|
</body>
|
|
</html> |