stevenhaskell
32210e00b7
Added styling to weight inputs and button to match invision protoype. Looks like removing the skeleton css breaks the layout. Will need to fix after all styling is completed.
171 lines
9.3 KiB
HTML
171 lines
9.3 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">
|
|
|
|
<link rel="manifest" href="site.webmanifest">
|
|
<link rel="apple-touch-icon" href="icon.png">
|
|
<!-- Place favicon.ico in the root directory -->
|
|
|
|
<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="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">
|
|
<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__barbell">
|
|
<img src="https://qph.fs.quoracdn.net/main-qimg-377c39d784e8860d4ce6142fba0e09e0-c" style="width: 50%">
|
|
</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__input">
|
|
<label for="Weight">WEIGHT</label>
|
|
<input type="text" 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"><h2 class="b-infoentry__heading">Options</h2></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Options Section -->
|
|
|
|
<a name="options"></a><div class="b-options">
|
|
<p class="b-options__overline">BAR WEIGHT</p>
|
|
<input type="text" class="b-options__input input-element input-bar" name="Bar" value="45" id="Bar"> LBS
|
|
<p>PERCENT OF WEIGHT</p>
|
|
<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>
|
|
<p class="b-options__subheading subheading">Plates Available</p>
|
|
<ul class="b-options__input">
|
|
<li>45 LBS
|
|
<ul>
|
|
<input type="number" data-weight="45" class="input-element input-weightsavailable input-available45" name="A45" min="0" step="1" value="20" id="avail45">
|
|
</ul>
|
|
</li>
|
|
<li>35 LBS
|
|
<ul>
|
|
<input type="number" data-weight="35" name="A35" class="input-element input-weightsavailable input-available35" min="0" step="1" value="2" id="avail35">
|
|
</ul>
|
|
</li>
|
|
<li>25 LBS
|
|
<ul>
|
|
<input type="number" data-weight="25" name="A25" class="input-element input-weightsavailable input-available25" min="0" step="1" value="2" id="avail25">
|
|
</ul>
|
|
</li>
|
|
<li>10 LBS
|
|
<ul>
|
|
<input type="number" data-weight="10" name="A10" class="input-element input-weightsavailable input-available10" min="0" step="1" value="2" id="avail10">
|
|
</ul>
|
|
</li>
|
|
<li>5 LBS
|
|
<ul>
|
|
<input type="number" data-weight="5" name="A5" class="input-element input-weightsavailable input-available5" min="0" step="1" value="2" id="avail5">
|
|
</ul>
|
|
</li>
|
|
<li>2.5 LBS
|
|
<ul>
|
|
<input type="number" data-weight="2.5" name="A2half" class="input-element input-weightsavailable input-available2" min="0" step="1" value="2" id="avail2">
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</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 src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></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> |