wbrawner/workoutgenerator-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New layout for generator page.

Browse source
This commit is contained in:
William Brawner 2015-09-03 22:38:15 -07:00
parent ccce6eece5
commit 374d797a71
5 changed files with 132 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
public/assets/css/styles.css vendored
View file

@ -107,10 +107,11 @@ body {
border:1px solid black; border:1px solid black;
background-color:#fff; background-color:#fff;
box-shadow:0px 0px 5px #555; box-shadow:0px 0px 5px #555;
position: relative;
} }
.content h1 { .content h1 {
margin-top:0; margin:0 auto;
color:#fff; color:#fff;
background-color:#87161a; background-color:#87161a;
text-align:center; text-align:center;
@ -126,23 +127,22 @@ body {
.content p { .content p {
margin:10px; margin:10px;
display:block;
overflow: hidden;
} }
.content-section { .content-section {
padding:5px 0; padding:5px 0;
margin:0; margin:0;
display:block; float:left;
width:100%; width:33%;
position:relative;
height:auto; height:auto;
background-color:transparent;
} }
.content-box { .content-box {
display:inline-block;
margin:5px 0; margin:5px 0;
padding:5px 0; padding:5px 0;
width:49%; width:100%;
height:auto; height:auto;
} }
@ -150,11 +150,55 @@ body {
text-align: center; text-align: center;
} }
fieldset { .fs-div {
background-color:white; background-color:rgba(255, 255, 255, 0.9) !important;
margin:20px; width:50%;
padding:5px;
} }
.generator {
background-image:url('/assets/images/generator-bg.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
background-position: right top;
background-color: #0a0a0a;
padding:10px;
border:1px solid black;
}
.generator select {
-webkit-appearance:none;
text-align: center;
font-size: 20px;
color: #fff;
background-color:#87161a;
text-shadow:0px 0px 5px #000;
border:1px solid #000;
padding:5px;
}
.generator input[type='checkbox'] {
-webkit-appearance:none;
color: #fff;
background-color:#87161a;
border:1px solid #000;
padding:5px;
margin:0 5px 0 0;
}
.generator input[type='checkbox']:disabled {
background-color:#B77376;
}
.generator input[type='checkbox']:checked {
background-image: url('/assets/images/check.png')
}
@media (max-width: 1024px) {
.generator {
background-position: right bottom;
}
}
@media (max-width:685px) { @media (max-width:685px) {
#nav { #nav {
float:none; float:none;
@ -183,7 +227,12 @@ fieldset {
padding:0; padding:0;
} }
.content-box { .content-section {
width:100%; width:100%;
} }
.fs-div {
width:97.5%;
margin:0;
}
} }

BIN
public/assets/images/check.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 308 B

BIN
public/assets/images/generator-bg.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 227 KiB

135
resources/views/generate.blade.php
View file

@ -5,73 +5,76 @@
@section('header') @section('header')
@section('content') @section('content')
<div class="content"> <div class="content" style="padding-bottom:0;">
<h1>Workout Generator</h1> <h1>Workout Generator</h1>
<form method="post"> <div class="generator">
<fieldset> <div class="fs-div">
<legend>Background Info:</legend> <form method="post">
<label>What is your primary goal?:</label> <fieldset>
<br /> <legend>Background Info:</legend>
<br /> <label>What is your primary goal?:</label>
<select name='goal'> <br />
<option value="strength">Gain Strength</option> <br />
<option value="endurance">Gain Endurance</option> <select name='goal'>
<option value="definition">Gain Definition</option> <option value="strength">Gain Strength</option>
</select> <option value="endurance">Gain Endurance</option>
<br /> <option value="definition">Gain Definition</option>
<br /> </select>
<br /> <br />
<label>Which of the following equipment/exercise styles do you have access to and enjoy doing? Check all that apply:</label> <br />
<br /> <br />
<br /> <label>Which of the following equipment/exercise styles do you have access to and enjoy doing? Check all that apply:</label>
<input type="checkbox" id="free-weights" value="free-weights" onClick="control()">Free Weights <br />
<br /> <br />
<input type="checkbox" id="dumbbells" value="dumbbells" disabled><span class="dtext">Dumbbells</span> <input type="checkbox" id="free-weights" value="free-weights" onClick="control()">Free Weights
<br /> <br />
<input type="checkbox" id="barbells" value="barbells" disabled><span class="dtext">Barbells</span> <input type="checkbox" id="dumbbells" value="dumbbells" disabled><span class="dtext">Dumbbells</span>
<br /> <br />
<input type="checkbox" value="selectorized">Selectorized Equipment <input type="checkbox" id="barbells" value="barbells" disabled><span class="dtext">Barbells</span>
<br /> <br />
<input type="checkbox" value="cables">Cable Equipment <input type="checkbox" value="selectorized">Selectorized Equipment
<br /> <br />
<input type="checkbox" value="calisthenics">Calisthenics <input type="checkbox" value="cables">Cable Equipment
<br /> <br />
<br /> <input type="checkbox" value="calisthenics">Calisthenics
<br /> <br />
<label>How long have you consistently followed an exercise routine?</label> <br />
<br /> <br />
<br /> <label>How long have you consistently followed an exercise routine?</label>
<select> <br />
<option>0 years</option> <br />
<option>1 year</option> <select>
<option>2+ years</option> <option>0 years</option>
</select> <option>1 year</option>
<select> <option>2+ years</option>
<?php </select>
for ($i = 0; $i <= 11; $i++) { <select>
echo '<option>' . $i . ' months</option>'; <?php
} for ($i = 0; $i <= 11; $i++) {
?> echo '<option>' . $i . ' months</option>';
</select> }
<br /> ?>
<br /> </select>
<br /> <br />
<label>How many days would you like to workout this week?</label> <br />
<br /> <br />
<br /> <label>How many days would you like to workout this week?</label>
<select> <br />
<?php <br />
for ($i = 1; $i <= 6; $i++) { <select>
echo '<option>' . $i . '</option>'; <?php
} for ($i = 1; $i <= 6; $i++) {
?> echo '<option>' . $i . '</option>';
</select> }
<br /> ?>
<br /> </select>
<button name="">Generate My Workout!</button> <br />
</fieldset> <br />
</form> <button name="" class="home-button">Generate My Workout!</button>
<br /> </fieldset>
</form>
</div>
</div>
</div> </div>
<script> <script>
var fw = document.getElementById("free-weights"); var fw = document.getElementById("free-weights");

9
resources/views/home.blade.php
View file

@ -21,9 +21,8 @@
custom exercises to make your experience even more personalized.</p> custom exercises to make your experience even more personalized.</p>
</div> </div>
</div> </div>
<br style="clear:both;"/>
<div class="content-section"> <div class="content-section">
<div class="content-box" style="float:right;"> <div class="content-box">
<h2>Why random generation?</h2> <h2>Why random generation?</h2>
<p>One of the primary pillars of fitness is <b>periodization</b>. Studies have shown that after about 2-3 weeks, <p>One of the primary pillars of fitness is <b>periodization</b>. Studies have shown that after about 2-3 weeks,
your body begins to adapt to the challenges you give it, which means you'll still be putting in the work your body begins to adapt to the challenges you give it, which means you'll still be putting in the work
@ -31,15 +30,13 @@
routine to prevent you from adapting to it. Say goodbye to plateaus!</p> routine to prevent you from adapting to it. Say goodbye to plateaus!</p>
</div> </div>
</div> </div>
<br style="clear:both;"/>
<div class="content-section"> <div class="content-section">
<div class="content-box"> <div class="content-box">
<h2>Still not convinced?</h2> <h2>Still not convinced?</h2>
<p>Don't take our word for it, sign up and try it out today!<br /></p> <p>Don't take our word for it, sign up and try it out today!</p>
</div>
<div class="content-box">
<p><a href='/generate'><button class="home-button">Get Started</button></a></p> <p><a href='/generate'><button class="home-button">Get Started</button></a></p>
</div> </div>
</div> </div>
<br style="clear:both;" />
</div> </div>
@endsection @endsection