stevenhaskell
0436d2beb4
Added alt tags, language, and defered loading to assets that are not needed immediately.
212 lines
13 KiB
HTML
212 lines
13 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
<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" defer> </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" alt="Barbell" 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> |