Steven Haskell
40f0c47972
Tried to add the return scroll for when the focus left on mobile. Still need to figure it out. Added favicons.
190 lines
12 KiB
HTML
190 lines
12 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>What are you lifting?</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">
|
|
|
|
<link rel="manifest" href="site.webmanifest">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<link rel="mask-icon" href="/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]-->
|
|
|
|
<!-- Add your site or application content here -->
|
|
<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">Type in your weight below and it will calculate the plates needed.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plate Visuals -->
|
|
<div class="b-platevisual">
|
|
<div class="b-platevisual__container">
|
|
<p class="b-platevisual__weightfinal"><span class="input-element input-final">0</span> LBS</p>
|
|
<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>
|
|
<p class="subheading">Offset: <span class="input-difference">0</span> LBS</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="b-calulatorinputs">
|
|
<!-- Plate Requirements -->
|
|
<div class="b-calulatorinputs__platerequirements">
|
|
<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>
|
|
|
|
<!-- Weight Entry -->
|
|
<div class="b-calulatorinputs__infoentry">
|
|
<div class="b-calulatorinputs__inputcontainer">
|
|
<div class="b-calulatorinputs__weightinput">
|
|
<label for="Weight">WEIGHT (LBS)</label>
|
|
<input type="number" onfocus="saveScroll()" onblur="restoreScroll()" inputmode="numeric" pattern="[0-9]*" class="b-infoentry__input input-element input-weight" name="Weight" placeholder="What are you lifting? (LBS)" id="Weight">
|
|
<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>
|
|
|
|
<!-- <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> |