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;
background-color:#fff;
box-shadow:0px 0px 5px #555;
position: relative;
}
.content h1 {
margin-top:0;
margin:0 auto;
color:#fff;
background-color:#87161a;
text-align:center;
@ -126,23 +127,22 @@ body {
.content p {
margin:10px;
display:block;
overflow: hidden;
}
.content-section {
padding:5px 0;
margin:0;
display:block;
width:100%;
position:relative;
float:left;
width:33%;
height:auto;
background-color:transparent;
}
.content-box {
display:inline-block;
margin:5px 0;
padding:5px 0;
width:49%;
width:100%;
height:auto;
}
@ -150,11 +150,55 @@ body {
text-align: center;
}
fieldset {
background-color:white;
margin:20px;
.fs-div {
background-color:rgba(255, 255, 255, 0.9) !important;
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) {
#nav {
float:none;
@ -183,7 +227,12 @@ fieldset {
padding:0;
}
.content-box {
.content-section {
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('content')
<div class="content">
<div class="content" style="padding-bottom:0;">
<h1>Workout Generator</h1>
<form method="post">
<fieldset>
<legend>Background Info:</legend>
<label>What is your primary goal?:</label>
<br />
<br />
<select name='goal'>
<option value="strength">Gain Strength</option>
<option value="endurance">Gain Endurance</option>
<option value="definition">Gain Definition</option>
</select>
<br />
<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 />
<input type="checkbox" id="free-weights" value="free-weights" onClick="control()">Free Weights
<br />
<input type="checkbox" id="dumbbells" value="dumbbells" disabled><span class="dtext">Dumbbells</span>
<br />
<input type="checkbox" id="barbells" value="barbells" disabled><span class="dtext">Barbells</span>
<br />
<input type="checkbox" value="selectorized">Selectorized Equipment
<br />
<input type="checkbox" value="cables">Cable Equipment
<br />
<input type="checkbox" value="calisthenics">Calisthenics
<br />
<br />
<br />
<label>How long have you consistently followed an exercise routine?</label>
<br />
<br />
<select>
<option>0 years</option>
<option>1 year</option>
<option>2+ years</option>
</select>
<select>
<?php
for ($i = 0; $i <= 11; $i++) {
echo '<option>' . $i . ' months</option>';
}
?>
</select>
<br />
<br />
<br />
<label>How many days would you like to workout this week?</label>
<br />
<br />
<select>
<?php
for ($i = 1; $i <= 6; $i++) {
echo '<option>' . $i . '</option>';
}
?>
</select>
<br />
<br />
<button name="">Generate My Workout!</button>
</fieldset>
</form>
<br />
<div class="generator">
<div class="fs-div">
<form method="post">
<fieldset>
<legend>Background Info:</legend>
<label>What is your primary goal?:</label>
<br />
<br />
<select name='goal'>
<option value="strength">Gain Strength</option>
<option value="endurance">Gain Endurance</option>
<option value="definition">Gain Definition</option>
</select>
<br />
<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 />
<input type="checkbox" id="free-weights" value="free-weights" onClick="control()">Free Weights
<br />
<input type="checkbox" id="dumbbells" value="dumbbells" disabled><span class="dtext">Dumbbells</span>
<br />
<input type="checkbox" id="barbells" value="barbells" disabled><span class="dtext">Barbells</span>
<br />
<input type="checkbox" value="selectorized">Selectorized Equipment
<br />
<input type="checkbox" value="cables">Cable Equipment
<br />
<input type="checkbox" value="calisthenics">Calisthenics
<br />
<br />
<br />
<label>How long have you consistently followed an exercise routine?</label>
<br />
<br />
<select>
<option>0 years</option>
<option>1 year</option>
<option>2+ years</option>
</select>
<select>
<?php
for ($i = 0; $i <= 11; $i++) {
echo '<option>' . $i . ' months</option>';
}
?>
</select>
<br />
<br />
<br />
<label>How many days would you like to workout this week?</label>
<br />
<br />
<select>
<?php
for ($i = 1; $i <= 6; $i++) {
echo '<option>' . $i . '</option>';
}
?>
</select>
<br />
<br />
<button name="" class="home-button">Generate My Workout!</button>
</fieldset>
</form>
</div>
</div>
</div>
<script>
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>
</div>
</div>
<br style="clear:both;"/>
<div class="content-section">
<div class="content-box" style="float:right;">
<div class="content-box">
<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,
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>
</div>
</div>
<br style="clear:both;"/>
<div class="content-section">
<div class="content-box">
<h2>Still not convinced?</h2>
<p>Don't take our word for it, sign up and try it out today!<br /></p>
</div>
<div class="content-box">
<p>Don't take our word for it, sign up and try it out today!</p>
<p><a href='/generate'><button class="home-button">Get Started</button></a></p>
</div>
</div>
<br style="clear:both;" />
</div>
@endsection