More accurate timing; styling fixes
[jschessclock.git] / 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 <h1>JSChessClock</h1>
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>