-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (130 loc) · 5.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>OpenChessClock Web</title>
<meta
name="description"
content="An open-source online chess clock, connectable to physical OpenChessClock clocks"
/>
<meta name="keywords" content="chess, chess clock, clock, webserial, usb" />
<meta name="author" content="zabackary" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="header">
<a id="home-button" class="button icon-button" title="Home" href="">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 -960 960 960"
width="24"
>
<path
d="M240-200h120v-200q0-17 11.5-28.5T400-440h160q17 0 28.5 11.5T600-400v200h120v-360L480-740 240-560v360Zm-80 0v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H560q-17 0-28.5-11.5T520-160v-200h-80v200q0 17-11.5 28.5T400-120H240q-33 0-56.5-23.5T160-200Zm320-270Z"
fill="currentcolor"
/>
</svg>
</a>
<h1>
OpenChessClock Web
<span class="status"></span>
</h1>
<div id="hint"></div>
<div id="controls" class="hidden">
<button id="pause-button" class="text-button">Pause</button>
<button id="restart-button" class="icon-button" title="Restart">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 -960 960 960"
width="24"
>
<path
d="M393-132q-103-29-168-113.5T160-440q0-57 19-108.5t54-94.5q11-12 27-12.5t29 12.5q11 11 11.5 27T290-586q-24 31-37 68t-13 78q0 81 47.5 144.5T410-209q13 4 21.5 15t8.5 24q0 20-14 31.5t-33 6.5Zm174 0q-19 5-33-7t-14-32q0-12 8.5-23t21.5-15q75-24 122.5-87T720-440q0-100-70-170t-170-70h-3l16 16q11 11 11 28t-11 28q-11 11-28 11t-28-11l-84-84q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l84-84q11-11 28-11t28 11q11 11 11 28t-11 28l-16 16h3q134 0 227 93t93 227q0 109-65 194T567-132Z"
fill="currentcolor"
/>
</svg>
</button>
</div>
</div>
<div class="counter-container show-picker">
<button class="p1 counter">
<div class="time">
<span class="minutes">0</span>:<span class="seconds">00</span>
</div>
</button>
<button class="p2 counter">
<div class="time">
<span class="minutes">0</span>:<span class="seconds">00</span>
</div>
</button>
<div class="popup connecting-container">Connecting...</div>
<div class="popup winner-container">
<p><span id="winner"></span> won by time.</p>
<a class="button" href="">New game</a>
</div>
<div class="popup picker-container">
<div class="connect-container">
<button id="connect-button" class="text-button">
Connect to physical clock over USB
</button>
<details class="whats-this">
<summary><span class="link">What's this?</span></summary>
<p class="whats-this-popup">
Connect over your computer or mobile device's USB port to an
implementor of the OpenChessClock protocol over W3 Web Serial and
show the clock time on a larger screen. Learn more about the
details on our
<a
href="https://github.com/zabackary/open-chess-clock"
target="_blank"
class="link"
>GitHub repository</a
>. Plug in the chess clock and click the button to get started.
</p>
</details>
</div>
<p class="or">- or -</p>
<div>
<button class="text-button preset" data-time="60000">
Bullet (1 min)
</button>
<button class="text-button preset" data-time="180000">
Blitz (3 min)
</button>
<button class="text-button preset" data-time="600000">
Rapid (10 min)
</button>
<button class="text-button custom">Custom</button>
</div>
</div>
</div>
<div class="custom-dialog">
<h2>Custom timing</h2>
<p class="time-select p1">
P1:
<input type="number" placeholder="0" max="99" min="0" />
<span class="label">min</span>
<input type="number" placeholder="00" max="59" min="0" />
<span class="label">sec</span>
</p>
<p class="time-select p2">
P2:
<input type="number" placeholder="0" max="99" min="0" />
<span class="label">min</span>
<input type="number" placeholder="00" max="59" min="0" />
<span class="label">sec</span>
</p>
<div class="actions">
<button class="text-button" id="custom-cancel-button">Cancel</button>
<div style="flex-grow: 1"></div>
<button class="text-button outlined" id="custom-start-button">
Start
</button>
</div>
</div>
<div class="scrim"></div>
<script type="module" src="./src/main.ts"></script>
</body>
</html>