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 …..


<!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>