-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (120 loc) · 6.56 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
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/images/tab-icon.png" type="image/png">
<title>Chess Clock App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="clock-section">
<button id="player2" class="btn btn-player2">
<div>
<p id="current-format2" class="absolute center-h current-format2">3/2</p>
</div>
<div>
<ul id="display2" class="display">
<li> <span id="hours2"></span><span id="hours2-separator">:</span></li>
<li> <span id="minutes2"></span>: </li>
<li> <span id="seconds2"></span> </li>
</ul>
</div>
<div class="moves absolute moves-p2">
<p id="player2-moves" class="moves-counter">Moves: <span id="p2-moveCount"></span></p>
</div>
</button>
<div class="settings-nav">
<img id="reset-icon" src="/images/reset.png" class="icon reset-icon" alt="reset clock">
<img id="start-icon" src="/images/start.png" class="icon startAndPause-icon" disabled="false" alt="start clock">
<img id="edit-icon" src="/images/edit-time.png" class="icon edit-icon" alt="edit time options">
<img id="volume-icon" src="/images/soundOn.png" class="icon volume-icon" alt="mute/unmute sounds">
<div id="reset-alert" class="reset-popup-container center-v hidden">
<p>This will reset both clocks. Proceed?</p>
<div class="button-group">
<button type="button" id="reset-yes" >Yes</button>
<button type="button" id="reset-no" >No</button>
</div>
</div>
<div id="edit-format-panel" class="edit-container center-v hidden">
<div id="time-options" class="edit-card">
<div class="close-box">
<a href="#" id="close">
<img class="icon close-icon" src="/images/close.png" alt="close panel">
</a>
</div>
<!-- bullet section -->
<div>
<div class="edit-titles">
<img class="icon format-icon" src="/images/bullet-icon.png" alt="bullet section icon">
<p class="edit-section-title">Bullet</p>
</div>
<div class="edit-options">
<button id="bullet1" class="format-options-btn">1 min</button>
<button id="bullet2" class="format-options-btn">1 | 1</button>
<button id="bullet3" class="format-options-btn">2 | 1</button>
</div>
</div>
<!-- Blitz section -->
<div>
<div class="edit-titles">
<img class="icon format-icon" src="/images/blitz-icon.png" alt="bullet section icon">
<p class="edit-section-title">Blitz</p>
</div>
<div class="edit-options">
<button id="blitz1" class="format-options-btn">3 min</button>
<button id="blitz2" class="format-options-btn">3 | 2</button>
<button id="blitz3" class="format-options-btn">5 min</button>
</div>
</div>
<!-- Rapid section -->
<div>
<div class="edit-titles">
<img class="icon format-icon" src="/images/rapid-icon.png" alt="bullet section icon">
<p class="edit-section-title">Rapid</p>
</div>
<div class="edit-options">
<button id="rapid1" class="format-options-btn">10 min</button>
<button id="rapid2" class="format-options-btn">15 | 10</button>
<button id="rapid3" class="format-options-btn">30 min</button>
</div>
</div>
<!-- Custom section -->
<div class="custom-section">
<div class="edit-titles">
<img class="icon format-icon" src="/images/custom-icon.png" alt="bullet section icon">
<p class="edit-section-title">Custom Time - (increment optional)</p>
</div>
<div class="edit-options">
<form id="custom-time-form" class="form-custom-time">
<input type="number" name="minutes" class="input" maxlength="3" min="0" step="1" autofocus placeholder="min" required>
<input type="number" name="seconds" class="input" maxlength="3" min="0" max="59" step="1" placeholder="sec">
<input type="number" name="inc" class="input increment" maxlength="2" min="0" step="1" placeholder="increment sec (optional)">
<button id="submit-time" type="submit" class="submit">
<img class="icon submit-img" src="/images/submit-icon.png" alt="submit">
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<button id="player1" class="btn btn-player1">
<div class="moves absolute moves-p1">
<p id="player1-moves" class="moves-counter">Moves: <span id="p1-moveCount"></span></p>
</div>
<div>
<ul id="display1" class="display">
<li> <span id="hours1"></span><span id="hours1-separator">:</span></li>
<li> <span id="minutes1"></span>: </li>
<li> <span id="seconds1"></span> </li>
</ul>
</div>
<div>
<p id="current-format1" class="absolute center-h current-format1">3/2</p>
</div>
</button>
</section>
<script src="index.js"></script>
</body>
</html>