72b294bb |
1 | <!DOCTYPE html> |
2 | <html> |
3 | <head> |
4 | <meta charset="utf-8"> |
5 | <title>JSChessClock</title> |
6 | <script src="script.js"></script> |
6f474901 |
7 | <link rel="stylesheet" type="text/css" href="style.css" id="style" /> |
72b294bb |
8 | </head> |
9 | <body onload="init()" onresize="fitscreen()"> |
72b294bb |
10 | <div class="clock-container"> |
11 | <svg version="1.1" width="650" height="500" |
12 | xmlns="http://www.w3.org/2000/svg"> |
6f474901 |
13 | <path id="left-button-top" class="button-long" fill="#c0c0c0" |
72b294bb |
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> |
6f474901 |
44 | <h1>JSChessClock</h1> |
72b294bb |
45 | <div class="commands"> |
46 | <div class="cmd" onclick="setTime();">[S]et time</div> |
47 | <div class="cmd" onclick="reset();">[R]eset to previous</div> |
48 | <div class="cmd" onclick="pauseResume();">[P]ause / resume</div> |
49 | <div class="cmd" onclick="toggle();">[space] Toggle</div> |
50 | </div> |
51 | </div> |
52 | </body> |
53 | </html> |