stevenhaskell
8425f6e59e
Finalized the calculation script and reset script. Now it will calculate any weight with no issues. Updated the copy to make it easier to understand how the app works and how to access certain things. Updated options button to make it stand out and appear clickable.
198 lines
12 KiB
HTML
198 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>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>
|
|
|
|
<!-- <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> |