A simple jQuery Mobile page for organizing weekly workouts

dumbbellMy weekly fitness regimen is pretty simple. I do a little bit of resistance training every day with a couple days of high intensity interval training (HIIT) thrown in.

To complement my training, I fast (Leangains-style) five days a week from 9 pm to 1 pm the next day and I fast (Eat-Stop-Eat-style) from 9 pm to 9 pm on the other two. I’m a huge fan of intermittent fasting for both its health benefits and for long-term weight management.

Although mine is a dead simple program, I still need reminders of which exercise to do, with which weights and on which days. I always have my iPhone with me, so I chose to use the excellent jQuery Mobile framework to create a simple touch-enabled mobile page to act as my personal fitness reference.

My jQuery Mobile site (Try it, it works)

My jQuery Mobile HTML code

<!DOCTYPE html>
<html>
<head>
<title>Daily Exercises</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="favicon.png"/>
<link rel="apple-touch-icon" href="icon.jpg"/>
<link rel="stylesheet" href="site.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<style>
.content {margin-top:-20px;}
.main {font-weight:bold; font-size:14px; color:#444; font-family:"Trebuchet MS"; margin-left:0px;}
.small {font-weight:normal; font-size:11px; color:#666; font-family:"Courier New";}

.day {display:inline-block; width:85px;}
.exercise {display:inline-block; width:145px;}
.reps {display:inline-block; width:110px; text-align:right;}
.part {display:inline-block; width:40px; text-align:right;}
.divide {display:inline-block; width:100%; text-align:center;}

.test {border:1px red solid;}
</style>
</head>
<body>

<!-- START PAGE -->
<div id="main" data-role="page">
<div data-role="header">
<h1>Daily Exercise</h1>
</div><!-- /header -->
<div data-role="content" class="content">
<ul data-role="listview" data-inset="true" data-filter="false">
<li><a href="#hiit-legs" data-transition="slide"><span class="main day">Monday</span><span class="small">(HIIT & Legs)</span></a></li>
<li><a href="#chest-triceps" data-transition="slide"><span class="main day">Tuesday</span><span class="small">(Chest & Triceps)</span></a></li>
<li><a href="#back-biceps" data-transition="slide"><span class="main day">Wednesday</span><span class="small">(Back & Biceps)</span></a></li>
<li><a href="#hiit-legs-2" data-transition="slide"><span class="main day">Thursday</span><span class="small">(HIIT & Legs)</span></a></li>
<li><a href="#chest-back-core" data-transition="slide"><span class="main day">Friday</span><span class="small">(Chest, Back & Core)</span></a></li>
<li><a href="#shoulders-biceps" data-transition="slide"><span class="main day">Saturday</span><span class="small">(Shoulders & Biceps)</span></a></li>
<li><a href="#chest-back-core" data-transition="slide"><span class="main day">Sunday</span><span class="small">(Chest, Back & Core)</span></a></li>
</ul>
</div><!-- /content -->
<div data-role="content" class="content">
<ul data-role="listview" data-inset="true" data-filter="false">
<li><a href="#rules-goals" data-transition="slide"><span class="main day">Rules & Goals</span></a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

<!-- HIIT & LEGS -->
<div id="hiit-legs" data-role="page">
<div data-role="header">
<h1>HIIT & Legs</h1>
<a href="#main" data-theme="a" data-icon="arrow-l" data-rel="back" data-inline="true">Back</a>
</div><!-- /header -->
<div data-role="content" class="content">
<ul data-role="listview" data-inset="true" data-divider-theme="d">
<li data-role="list-divider">HIIT</li>
<li><a href="#hiit-treadmill" data-transition="slide"><span class="main exercise">Treadmill</span></a></li>
<li><a href="#hiit-outside" data-transition="slide"><span class="main exercise">Outside</span></a></li>
<li data-role="list-divider">Legs</li>
<li><span class="main exercise">100 Squats</span><span class="small reps">(100x - Body)</span></li>
<li><span class="small divide">-or-</span></li>
<li><span class="main exercise">Split Squats</span><span class="small reps">(25x - 5 lbs)</span></li>
<li><span class="main exercise">Switch Squats</span><span class="small reps">(25x - Body)</span></li>
<li><span class="main exercise">Deadlift Squats</span><span class="small reps">(25x - Body)</span></li>
<li><span class="main exercise">Wall Squats</span><span class="small reps">(60s - 5 lbs)</span></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

<!-- CHEST & TRICEPS -->
<div id="chest-triceps" data-role="page">
<div data-role="header">
<h1>Chest & Triceps</h1>
<a href="#main" data-theme="a" data-icon="arrow-l" data-rel="back" data-inline="true">Back</a>
</div><!-- /header -->
<div data-role="content" class="content">
<ul data-role="listview" data-inset="true" data-divider-theme="d">
<li data-role="list-divider">Set 1</li>
<li><span class="main exercise">Decline Push-Ups</span><span class="small reps">(20x, Body)</span></li>
<li><span class="main exercise">Table Dips</span><span class="small reps">(20x, Body)</span></li>
<li data-role="list-divider">Set 2</li>
<li><span class="main exercise">Military Push-Ups</span><span class="small reps">(20x, Body)</span></li>
<li><span class="main exercise">Tricep Extend</span><span class="small reps">(15x, Burg)</span></li>
<li data-role="list-divider">Set 3</li>
<li><span class="main exercise">Alt Push-Ups</span><span class="small reps">(20x, Body)</span></li>
<li><span class="main exercise">Stool Dips</span><span class="small reps">(15x, Body)</span></li>
<li data-role="list-divider">Set 4</li>
<li><span class="main exercise">Wide Push-Ups</span><span class="small reps">(20x, Body)</span></li>
<li><span class="main exercise">Sphinx Push-Ups</span><span class="small reps">(15x, Burg)</span></li>
<li data-role="list-divider">Set 5</li>
<li><span class="main exercise">Push-Ups</span><span class="small reps">(Max, Body)</span></li>
<li><span class="main exercise">Kick Backs</span><span class="small reps">(25x, Burg)</span></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

<!-- BACK & BICEPS -->
<div id="back-biceps" data-role="page">
<div data-role="header">
<h1>Back & Biceps</h1>
<a href="#main" data-theme="a" data-icon="arrow-l" data-rel="back" data-inline="true">Back</a>
</div><!-- /header -->
<div data-role="content" class="content">
<ul data-role="listview" data-inset="true" data-divider-theme="d">
<li data-role="list-divider">Set 1</li>
<li><span class="main exercise">Narrow Pull-Ups</span><span class="small reps">(10x, Body)</span></li>
<li><span class="main exercise">Out Curls</span><span class="small reps">(15x, 25 lbs)</span></li>
<li data-role="list-divider">Set 2</li>
<li><span class="main exercise">Heavy Pants</span><span class="small reps">(15x, 3-Band)</span></li>
<li><span class="main exercise">7-7-7 Curls</span><span class="small reps">(15x, 25 lbs)</span></li>
<li data-role="list-divider">Set 3</li>
<li><span class="main exercise">Wide Pull-Ups</span><span class="small reps">(10x, Body)</span></li>
<li><span class="main exercise">Static Curls</span><span class="small reps">(8x, 25 lbs)</span></li>
<li data-role="list-divider">Set 4</li>
<li><span class="main exercise">Lawnmowers</span><span class="small reps">(15x, 3-Band)</span></li>
<li><span class="main exercise">Normal Curls</span><span class="small reps">(15x, 25 lbs)</span></li>
<li data-role="list-divider">Set 5</li>
<li><span class="main exercise">Chin-Ups</span><span class="small reps">(Max, Body)</span></li>
<li><span class="main exercise">Hammer Curls</span><span class="small reps">(15x, 25 lbs)</span></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

<!-- HIIT & LEGS 2 -->
<div id="hiit-legs-2" data-role="page">
<div data-role="header">
<h1>HIIT & Legs</h1>
<a href="#main" data-theme="a" data-icon="arrow-l" data-rel="back" data-inline="true">Back</a>
</div><!-- /header -->
<div data-role="content" class="content">
<ul data-role="listview" data-inset="true" data-divider-theme="d">
<li data-role="list-divider">HIIT</li>
<li><a href="#hiit-treadmill" data-transition="slide"><span class="main exercise">Treadmill</span></a></li>
<li><a href="#hiit-outside" data-transition="slide"><span class="main exercise">Outside</span></a></li>
<li data-role="list-divider">Legs</li>
<li><span class="main exercise">100 Squats</span><span class="small reps">(100x - Body)</span></li>
<li><span class="small divide">-or-</span></li>
<li><span class="main exercise">80/20 Speed Squats</span><span class="small reps">(25x - Body)</span></li>
<li><span class="main exercise">Step-Back Lunges</span><span class="small reps">(25x - 5 lbs)</span></li>
<li><span class="main exercise">Deadlift Squats</span><span class="small reps">(25x - Body)</span></li>
<li><span class="main exercise">Wall Squats</span><span class="small reps">(60s - 5 lbs)</span></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

<!-- CHEST, BACK & CORE -->
<div id="chest-back-core" data-role="page">
<div data-role="header">
<h1>Chest, Back & Core</h1>
<a href="#main" data-theme="a" data-icon="arrow-l" data-rel="back" data-inline="true">Back</a>
</div><!-- /header -->
<div data-role="content" class="content">
<ul data-role="listview" data-inset="true" data-divider-theme="d">
<li data-role="list-divider">Chest</li>
<li><span class="main exercise">Max Push-Ups</span><span class="small reps">(max x 2)</span></li>
<li data-role="list-divider">Back</li>
<li><span class="main exercise">Max Pull-Ups</span><span class="small reps">(max x 2)</span></li>
<li data-role="list-divider">Core</li>
<li><a href="#ab-ripper" data-transition="slide"><span class="main exercise">Ab Ripper</span></a></li>
<li><span class="main exercise">Superman</span><span class="small reps">(10s x 5)</span></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

<!-- SHOULDERS & BICEPS -->
<div id="shoulders-biceps" data-role="page">
<div data-role="header">
<h1>Shoulder & Biceps</h1>
<a href="#main" data-theme="a" data-icon="arrow-l" data-rel="back" data-inline="true">Back</a>
</div><!-- /header -->
<div data-role="content" class="content">
<ul data-role="listview" data-inset="true" data-divider-theme="d">
<li data-role="list-divider">Set 1</li>
<li><span class="main exercise">Military Press</span><span class="small reps">(15x, Burg)</span></li>
<li><span class="main exercise">Out Curls</span><span class="small reps">(15x, 25 lbs)</span></li>
<li data-role="list-divider">Set 2</li>
<li><span class="main exercise">Scarecrow + Y</span><span class="small reps">(15x, Red)</span></li>
<li><span class="main exercise">7-7-7 Curls</span><span class="small reps">(15x, 25 lbs)</span></li>
<li data-role="list-divider">Set 3</li>
<li><span class="main exercise">Pike Press</span><span class="small reps">(20x, Body)</span></li>
<li><span class="main exercise">Static Curls</span><span class="small reps">(8x, 25 lbs)</span></li>
<li data-role="list-divider">Set 4</li>
<li><span class="main exercise">In & Out</span><span class="small reps">(15x, Red)</span></li>
<li><span class="main exercise">Normal Curls</span><span class="small reps">(15x, 25 lbs)</span></li>
<li data-role="list-divider">Set 5</li>
<li><span class="main exercise">Row + Y</span><span class="small reps">(15x, Red)</span></li>
<li><span class="main exercise">Hammer Curls</span><span class="small reps">(15x, 25 lbs)</span></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

<!-- HIIT-TREADMILL -->
<div id="hiit-treadmill" data-role="page">
<div data-role="header">
<h1>HIIT Treadmill</h1>
<a href="#main" data-theme="a" data-icon="arrow-l" data-rel="back" data-inline="true">Back</a>
</div><!-- /header -->
<div data-role="content" class="content">
<ul data-role="listview" data-inset="true" data-filter="false" data-divider-theme="d">
<li data-role="list-divider">Warmup</li>
<li><span class="main exercise">Fast Walk</span><span class="small">3 mph - 8%</span></li>
<li><span class="main exercise">Fast Walk</span><span class="small">3 mph - 12%</span></li>
<li data-role="list-divider">Intervals (x6)</li>
<li><span class="main exercise">Sprint</span><span class="small">8 mph - 12%</span></li>
<li><span class="main exercise">Fast Walk</span><span class="small">3 mph - 12%</span></li>
<li><span class="main exercise">Fast Walk</span><span class="small">3 mph - 12%</span></li>
<li data-role="list-divider">Cooldown</li>
<li><span class="main exercise">Fast Walk</span><span class="small">3 mph - 12%</span></li>
<li><span class="main exercise">Fast Walk</span><span class="small">3 mph - 8%</span></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

<!-- HIIT-OUTSIDE -->
<div id="hiit-outside" data-role="page">
<div data-role="header">
<h1>HIIT - Outside</h1>
<a href="#main" data-theme="a" data-icon="arrow-l" data-rel="back" data-inline="true">Back</a>
</div><!-- /header -->
<div data-role="content" class="content">
<ul data-role="listview" data-inset="true" data-filter="false" data-divider-theme="d">
<li data-role="list-divider">Warmup</li>
<li><span class="main exercise">Light Jog</span><span class="small">5 min</span></li>
<li><span class="main exercise">Light Run</span><span class="small">2 min</span></li>
<li data-role="list-divider">Intervals (x6)</li>
<li><span class="main exercise">Sprint</span><span class="small">30 sec</span></li>
<li><span class="main exercise">Walk</span><span class="small">60 sec</span></li>
<li data-role="list-divider">Cooldown</li>
<li><span class="main exercise">Walk Home</span><span class="small">? min</span></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

<!-- RULES & GOALS -->
<div id="rules-goals" data-role="page">
<div data-role="header">
<h1>RULES & GOALS</h1>
<a href="#main" data-theme="a" data-icon="arrow-l" data-rel="back" data-inline="true">Back</a>
</div><!-- /header -->
<div data-role="content" class="content">
<ul data-role="listview" data-inset="true" data-filter="false" data-divider-theme="d">
<li data-role="list-divider">Rules</li>
<li><span class="main exercise">5 x Fast 16/8</span><span class="small reps">9pm-1pm, 1,800</span></li>
<li><span class="main exercise">2 x Fast 24/0</span><span class="small reps">9pm-9pm, 500</span></li>
<li><span class="main exercise">Train Fasted</span><span class="small reps">12pm or 8pm</span></li>
<li><span class="main exercise">During: BCAAs</span><span class="small reps">10g</span></li>
<li><span class="main exercise">During: Creatine</span><span class="small reps">5g</span></li>
<li><span class="main exercise">After: High Protein</span><span class="small reps">120g/day</span></li>
<li><span class="main exercise">After: Largest Meal</span><span class="small reps">750 cals</span></li>
<li data-role="list-divider">Goals</li>
<li><span class="main exercise">150 lbs Lean</span><span class="small">170 lbs total</span></li>
<li><span class="main exercise">Food Discipline</span><span class="small"></span></li>
<li><span class="main exercise">Weight Maintained</span><span class="small"></span></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

<!-- AB RIPPER -->
<div id="ab-ripper" data-role="page">
<div data-role="header">
<h1>Ab Ripper</h1>
<a href="#main" data-theme="a" data-icon="arrow-l" data-rel="back" data-inline="true">Back</a>
</div><!-- /header -->
<div data-role="content" class="content">
<ul data-role="listview" data-inset="true" data-filter="false" data-divider-theme="d">
<li><span class="main exercise">Crunches</span><span class="small reps">(x20)</span></li>
<li><span class="main exercise">Leg Lifts</span><span class="small reps">(x20)</span></li>
<li><span class="main exercise">Bicycles</span><span class="small reps">(x20)</span></li>
<li><span class="main exercise">In & Out (V)</span><span class="small reps">(x20)</span></li>
<li><span class="main exercise">L/R Crunches</span><span class="small reps">(2x20)</span></li>
<li><span class="main exercise">Hip Rock & Raise</span><span class="small reps">(x20)</span></li>
<li><span class="main exercise">V-Up Roll-Up</span><span class="small reps">(x20)</span></li>
<li><span class="main exercise">L/R Oblique V-Up</span><span class="small reps">(2x20)</span></li>
<li><span class="main exercise">Crunchy Frog</span><span class="small reps">(x20)</span></li>
<li><span class="main exercise">Mason Twist</span><span class="small reps">(x50)</span></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

</body>
</html>

Right now the entire site is a single, static HTML page. In the future, I will split it up into separate pages and make them dynamic, probably powered by my favorite framework, Django. Please feel free to copy and modify this code for your own use.