| 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">⚐</div> |
| 34 | <div id="flag-right">⚑</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> |