index.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>JSChessClock</title>
   6     <script src="script.js"></script>
   7     <link rel="stylesheet" type="text/css" href="style.css" id="style" />
   8   </head>
   9   <body onload="init()" onresize="fitscreen()">
  10     <div class="clock-container">
  11       <svg version="1.1" width="650" height="500"
  12            xmlns="http://www.w3.org/2000/svg">
  13         <path id="left-button-top" class="button-long" fill="#c0c0c0"
  14               d="M 210 70 A 140 140 0 0 0 30 70 Z" stroke="#c0c0c0"
  15               onclick="toggle()" cursor="pointer" />
  16         <rect id="left-button-body" class="button-long" x="60" y="70"
  17               width="120" height="80" stroke="#c0c0c0" fill="#c0c0c0"
  18               onclick="toggle()" cursor="pointer" />
  19         <path id="right-button-top" class="button-short" stroke="#c0c0c0"
  20               d="M 620 120 A 140 140 0 0 0 440 120 Z" fill="#c0c0c0" />
  21         <rect id="right-button-body" class="button-short" x="470" y="120"
  22               width="120" height="30" stroke="#c0c0c0" fill="#c0c0c0" />
  23         <rect x="0" y="150" width="650" height="350" rx="25" ry="25"
  24               fill="#bc5454" />
  25         <rect x="40" y="245" width="235" height="90" rx="10" ry="10"
  26               fill="white" />
  27         <rect x="375" y="245" width="235" height="90" rx="10" ry="10"
  28               fill="white" />
  29         <line x1="0" y1="420" x2="650" y2="420" stroke="black"
  30               stroke-width="1" />
  31       </svg>
  32       <div class="flags">
  33         <div id="flag-left">&#x2690;</div>
  34         <div id="flag-right">&#x2691;</div>
  35       </div>
  36       <div class="timers">
  37         <div class="timer" id="timer-left">15:00</div>
  38         <div class="indicators">
  39           <div id="pause">⏸</div>
  40           <div id="play">⏴</div>
  41         </div>
  42         <div class="timer" id="timer-right">15:00</div>
  43       </div>
  44       <div class="increments">
  45         <div class="increment" id="increment-left">+0</div>
  46         <div class="increment" id="increment-right">+0</div>
  47       </div>
  48       <h1>JSChessClock</h1>
  49       <div class="commands">
  50         <div class="cmd" onclick="setTime();">[S]et time</div>
  51         <div class="cmd" onclick="reset();">[R]eset to previous</div>
  52         <div class="cmd" onclick="pauseResume();">[P]ause / resume</div>
  53         <div class="cmd" onclick="toggle();">[space] Toggle</div>
  54       </div>
  55     </div>
  56   </body>
  57 </html>