More and more developers are starting to think about building applications that have both on-line and off-line features using HTML5.

I’ve been giving this some thought and have decided to build one myself.

I thought for a while about what sort of application would make for a good showcase.

It’s one of the though things about building examples – no one tells you what your next application is supposed to do.

In any event, what I decided on is in interval training application for boxers. A “round timer”.

Since this is intended to be a learning application and there are some great designer types and jQuery developers that read my blog, I thought it would be cool to design and develop this application by committee.

Here are some of the features that I’m hoping will help make it a good showcase.

  • Lots of running logic implemented in JavaScript CSS and jQuery
  • Play audio videos for interval sounds.
  • Use Local Storage to save user specific profiles.

Once the basics are done I could expand the application with things like:

  • Server based back ups and workout suggestions.
  • Embedding Video Demonstrations for workouts.
  • Web Sockets for Peer to Peer – team workouts.

I want the user interface to be highly configurable. Here is a quick layout.

I’ll include the markup for the UI prototype for anyone that wants it but remember.

It’s JUST a UI prototype. It needs to be refactored for CSS, etc,

PLEASE post your suggestions about what form the application should take – both from a feature set perspective as well as from a technical one.

Click [ Read More ] to see markup …..


[sourcecode language="html"]
<!DOCTYPE HTML>
<html>
<head>
<meta content="en-us" http-equiv="Content-Language">
<title>Fight Timer</title>
<link rel="stylesheet" type="text/css" href="styles\main.css" />
<script type="text/javascript">
var RoundLength = 3;
var RestLength = 1;
</script>
<style type="text/css">

.align-center {
text-align: center;
}

.align-left {
text-align: left;
}

.align-right {
text-align: right;
}

.stopwatch-time {
text-align:center;
font-size:128px;
background-color: white;
color: black;
padding:5px
}

.stopwatch-rounds {
text-align:center;
font-size:128px;
background-color: white;
color: black;
padding:5px
}

.stopwatch-space {
text-align:center;
font-size:128px;
background-color: white;
color: black;
padding:5px
}

</style>
</head>
<body>
<div class="align-center">
<span id="TimerText" style="text-align:center; font-size:52px">STOP</span>
<br /><br />
<hr /><br />
<table style="border:0px;margin: auto;">
<tr>
<td>
<span id="StopWatchTime" class="stopwatch-time">00:00:00</span><br />
<input name="ButtonTimeStart" type="button" value="Start"
style="width: 120px; font-size:24px" />
&nbsp;
<input name="ButtonTimeReset" type="button" value="Reset"
style="width: 120px; font-size:24px" />
</td>
<td><span id="StopWatchSpace" class="stopwatch-space">&nbsp;</span> </td>
<td>
<span id="StopWatchRounds" class="stopwatch-rounds">0</span><br />
<input name="ButtonRoundsReset" type="button" value="Reset"
style="width: 120px; font-size:24px" />
</td>
</tr>
</table>
<br /><hr /><br />
<table style="border:0px;margin: auto;">
<tr>
<td class="align-right">Total Work Time&nbsp;:&nbsp;</td>
<td class="align-left">00:00:00</td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td class="align-right">Total Rest Time&nbsp;:&nbsp;</td>
<td class="align-left">00:00:00</td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td class="align-right">Total Elapsed Time&nbsp;:&nbsp;</td>
<td class="align-left">00:00:00</td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td class="align-right">Current time&nbsp;:&nbsp;</td>
<td class="align-left">00:00:00</td>
</tr>
</table>

<br /><hr />
<br /> <br />

<strong>Options</strong><br /><br />
<hr /><br />
<table style="border:0px;margin: auto;">
<tr>
<td class="align-right">Load Settings&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="LoadSettings">
<option value="boxing" selected="selected">Boxing</option>
</select>
</td>
<td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
<td class="align-right">Save Settings&nbsp;:&nbsp;</td>
<td class="align-left">
<input name="TextSaveSettingsName" type="text" style="width: 180px" />
&nbsp;
<input name="ButtonSaveSettings" type="button" value="Save" />
</td>
</tr>
</table>
<br /><br />
<hr />
<table style="border:0px;margin: auto;">
<tr>
<td style=" vertical-align:top;">
<table style="border:0px;margin: auto;">
<tr>
<td class="align-right">Round Length&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectRoundLength" style="width: 80px;">
<option value=".5">30 sec</option>
<option value="1">1 min</option>
<option value="1.5">1 &frac12; min</option>
<option value="2">2 min</option>
<option value="3" selected="selected">3 min</option>
<option value="3.5">3 &frac12; min</option>
<option value="4">4 min</option>
<option value="4.5">4 &frac12; min</option>
<option value="5">5 min</option>
<option value="5.5">5 &frac12; min</option>
<option value="6">6 min</option>
<option value="6.5">6 &frac12; min</option>
<option value="7">7 min</option>
<option value="7.5">7 &frac12; min</option>
<option value="8">8 min</option>
<option value="8.5">8 &frac12; min</option>
<option value="9">9 min</option>
<option value="9.5">9 &frac12; min</option>
<option value="10">10 min</option>
<option value="10.5">10 &frac12; min</option>
<option value="11">11 min</option>
<option value="11.5">11 &frac12; min</option>
<option value="12">12 min</option>
<option value="12.5">12 &frac12; min</option>
<option value="13">13 min</option>
<option value="13.5">13 &frac12; min</option>
<option value="14">14 min</option>
<option value="14.5">14 &frac12; min</option>
<option value="15">15 min</option>
<option value="15.5">15 &frac12; min</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Rest Length&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectRestLength" style="width: 80px;">
<option value=".5">30 sec</option>
<option value="1" selected="selected">1 min</option>
<option value="1.5">1 &frac12; min</option>
<option value="2">2 min</option>
<option value="3">3 min</option>
<option value="3.5">3 &frac12; min</option>
<option value="4">4 min</option>
<option value="4.5">4 &frac12; min</option>
<option value="5">5 min</option>
<option value="5.5">5 &frac12; min</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Start Delay&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectStartDelay" style="width: 80px;">
<option value="5">5 sec</option>
<option value="10" selected="selected">10 sec</option>
<option value="15">15 sec</option>
<option value="20">20 sec</option>
<option value="25">25 sec</option>
<option value="30">30 sec</option>
<option value="35">35 sec</option>
<option value="40">40 sec</option>
<option value="45">45 sec</option>
<option value="50">50 sec</option>
<option value="55">55 sec</option>
<option value="60">60 sec</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Work Warning&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectWorkWarn" style="width: 80px;">
<option value="5">5 sec</option>
<option value="10" selected="selected">10 sec</option>
<option value="15">15 sec</option>
<option value="20">20 sec</option>
<option value="25">25 sec</option>
<option value="30">30 sec</option>
<option value="35">35 sec</option>
<option value="40">40 sec</option>
<option value="45">45 sec</option>
<option value="50">50 sec</option>
<option value="55">55 sec</option>
<option value="60">60 sec</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Rest Warning&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectRestWarning" style="width: 80px;">
<option value="5">5 sec</option>
<option value="10" selected="selected">10 sec</option>
<option value="15">15 sec</option>
<option value="20">20 sec</option>
<option value="25">25 sec</option>
<option value="30">30 sec</option>
<option value="35">35 sec</option>
<option value="40">40 sec</option>
<option value="45">45 sec</option>
<option value="50">50 sec</option>
<option value="55">55 sec</option>
<option value="60">60 sec</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Text Font Size&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectTextFontSize" style="width: 80px;">
<option value="128" selected="selected">128 px</option>
</select>
</td>
</tr>

<tr>
<td class="align-right">Page Color&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectPageBGColor" style="width: 80px;">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="white" selected="selected">White</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="brown">Brown</option>
<option value="blue">Blue</option>
<option value="silver">Silver</option>
<option value="orange">Orange</option>
</select>
</td>
</tr>

</table>
</td>
<td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
<td style=" vertical-align:top;">
<table style="border:0px;margin: auto;">
<tr>
<td class="align-right">Time Text Size&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectTimeSize" style="width: 80px;">
<option value="128" selected="selected">128 px</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Time Text Color&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectTimeTextColor" style="width: 80px;">
<option value="black" selected="selected">Black</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="brown">Brown</option>
<option value="blue">Blue</option>
<option value="silver">Silver</option>
<option value="orange">Orange</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Time Warning Color&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectTimeWarningColor" style="width: 80px;">
<option value="black" selected="selected">Black</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="brown">Brown</option>
<option value="blue">Blue</option>
<option value="silver">Silver</option>
<option value="orange">Orange</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Time Back Color&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectTimeBGColor" style="width: 80px;">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="white" selected="selected">White</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="brown">Brown</option>
<option value="blue">Blue</option>
<option value="silver">Silver</option>
<option value="orange">Orange</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Round Text Size&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectRoundSize" style="width: 80px;">
<option value="128" selected="selected">128 px</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Round Text Color&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectRoundTextColor" style="width: 80px;">
<option value="black" selected="selected">Black</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="brown">Brown</option>
<option value="blue">Blue</option>
<option value="silver">Silver</option>
<option value="orange">Orange</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Round Back Color&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectRoundBGColor" style="width: 80px;">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="white" selected="selected">White</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="brown">Brown</option>
<option value="blue">Blue</option>
<option value="silver">Silver</option>
<option value="orange">Orange</option>
</select>
</td>
</tr>
</table>
</td>
<td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
<td>
<table style="border:0px;margin: auto;">
<tr>
<td class="align-right">Count Direction&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectCountDirection" style="width: 80px;">
<option value="up" selected="selected">UP</option>
<option value="down">DOWN</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Total Rounds&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectTimeTextColor" style="width: 80px;">
<option value="0" selected="selected">Infinate</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">12</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Round Begin Sound&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectRoundBeginSOund" style="width: 80px;">
<option value="bell" selected="selected">Bell</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Round End Sound&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectRoundEndSound" style="width: 80px;">
<option value="bell" selected="selected">Bell</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Warning Sound&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectWarningSound" style="width: 80px;">
<option value="bell" selected="selected">Bell</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Final Sound&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectFinalSound" style="width: 80px;">
<option value="bell" selected="selected">Bell</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Precision&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectRound BGColor" style="width: 80px;">
<option value="00" selected="selected">00</option>
</select>
</td>
</tr>
</table>
</td>
<td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
<td>
<table style="border:0px;margin: auto;">
<tr>
<td class="align-right">Intervals&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectCountDirection" style="width: 80px;">
<option value="none" selected="selected">None</option>
<option value="high">High</option>
<option value="low">Low</option>
<option value="both">Both</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">High Interval&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectTimeTextColor" style="width: 80px;">
<option value="5">5 sec</option>
<option value="10">10 sec</option>
<option value="15">15 sec</option>
<option value="20">20 sec</option>
<option value="25">25 sec</option>
<option value="30" selected="selected">30 sec</option>
<option value="35">35 sec</option>
<option value="40">40 sec</option>
<option value="45">45 sec</option>
<option value="50">50 sec</option>
<option value="55">55 sec</option>
<option value="60">1 min</option>
<option value="65">1 min 5 sec</option>
<option value="70">1 min 10 sec</option>
<option value="75">1 min 15 sec</option>
<option value="80">1 min 20 sec</option>
<option value="85">1 min 25 sec</option>
<option value="90">1 min 30 sec</option>
<option value="95">1 min 35 sec</option>
<option value="100">1 min 40 sec</option>
<option value="105">1 min 45 sec</option>
<option value="110">1 min 50 sec</option>
<option value="115">1 min 55 sec</option>
<option value="120">2 min</option>
<option value="125">2 min 5 sec</option>
<option value="130">2 min 10 sec</option>
<option value="135">2 min 15 sec</option>
<option value="140">2 min 20 sec</option>
<option value="145">2 min 25 sec</option>
<option value="150">2 min 30 sec</option>
<option value="155">2 min 35 sec</option>
<option value="160">2 min 40 sec</option>
<option value="165">2 min 45 sec</option>
<option value="170">2 min 50 sec</option>
<option value="175">2 min 55 sec</option>
<option value="180">3 min</option>
<option value="185">3 min 5 sec</option>
<option value="190">3 min 10 sec</option>
<option value="195">3 min 15 sec</option>
<option value="200">3 min 20 sec</option>
<option value="205">3 min 25 sec</option>
<option value="210">3 min 30 sec</option>
<option value="215">3 min 35 sec</option>
<option value="220">3 min 40 sec</option>
<option value="225">3 min 45 sec</option>
<option value="230">3 min 50 sec</option>
<option value="235">3 min 55 sec</option>
<option value="240">4 min</option>
<option value="245">4 min 5 sec</option>
<option value="250">4 min 10 sec</option>
<option value="255">4 min 15 sec</option>
<option value="260">4 min 20 sec</option>
<option value="265">4 min 25 sec</option>
<option value="270">4 min 30 sec</option>
<option value="275">4 min 35 sec</option>
<option value="280">4 min 40 sec</option>
<option value="285">4 min 45 sec</option>
<option value="290">4 min 50 sec</option>
<option value="295">4 min 55 sec</option>
<option value="300">5 min</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">High Interval Color&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectRoundBeginSOund" style="width: 80px;">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="white" selected="selected">White</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="brown">Brown</option>
<option value="blue">Blue</option>
<option value="silver">Silver</option>
<option value="orange">Orange</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">High Interval Sound&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectRoundEndSound" style="width: 80px;">
<option value="bell" selected="selected">Bell</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Low Interval&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectWarningSound" style="width: 80px;">
<option value="5">5 sec</option>
<option value="10">10 sec</option>
<option value="15">15 sec</option>
<option value="20">20 sec</option>
<option value="25">25 sec</option>
<option value="30" selected="selected">30 sec</option>
<option value="35">35 sec</option>
<option value="40">40 sec</option>
<option value="45">45 sec</option>
<option value="50">50 sec</option>
<option value="55">55 sec</option>
<option value="60">1 min</option>
<option value="65">1 min 5 sec</option>
<option value="70">1 min 10 sec</option>
<option value="75">1 min 15 sec</option>
<option value="80">1 min 20 sec</option>
<option value="85">1 min 25 sec</option>
<option value="90">1 min 30 sec</option>
<option value="95">1 min 35 sec</option>
<option value="100">1 min 40 sec</option>
<option value="105">1 min 45 sec</option>
<option value="110">1 min 50 sec</option>
<option value="115">1 min 55 sec</option>
<option value="120">2 min</option>
<option value="125">2 min 5 sec</option>
<option value="130">2 min 10 sec</option>
<option value="135">2 min 15 sec</option>
<option value="140">2 min 20 sec</option>
<option value="145">2 min 25 sec</option>
<option value="150">2 min 30 sec</option>
<option value="155">2 min 35 sec</option>
<option value="160">2 min 40 sec</option>
<option value="165">2 min 45 sec</option>
<option value="170">2 min 50 sec</option>
<option value="175">2 min 55 sec</option>
<option value="180">3 min</option>
<option value="185">3 min 5 sec</option>
<option value="190">3 min 10 sec</option>
<option value="195">3 min 15 sec</option>
<option value="200">3 min 20 sec</option>
<option value="205">3 min 25 sec</option>
<option value="210">3 min 30 sec</option>
<option value="215">3 min 35 sec</option>
<option value="220">3 min 40 sec</option>
<option value="225">3 min 45 sec</option>
<option value="230">3 min 50 sec</option>
<option value="235">3 min 55 sec</option>
<option value="240">4 min</option>
<option value="245">4 min 5 sec</option>
<option value="250">4 min 10 sec</option>
<option value="255">4 min 15 sec</option>
<option value="260">4 min 20 sec</option>
<option value="265">4 min 25 sec</option>
<option value="270">4 min 30 sec</option>
<option value="275">4 min 35 sec</option>
<option value="280">4 min 40 sec</option>
<option value="285">4 min 45 sec</option>
<option value="290">4 min 50 sec</option>
<option value="295">4 min 55 sec</option>
<option value="300">5 min</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Low Interval Color&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectLowIntervalColor" style="width: 80px;">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="white" selected="selected">White</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="brown">Brown</option>
<option value="blue">Blue</option>
<option value="silver">Silver</option>
<option value="orange">Orange</option>
</select>
</td>
</tr>
<tr>
<td class="align-right">Low Interval Sound&nbsp;:&nbsp;</td>
<td class="align-left">
<select name="SelectRound BGColor" style="width: 80px;">
<option value="bell" selected="selected">Bell</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>

[/sourcecode]