forked from sbaiti1/clock
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
151 lines (135 loc) · 8.93 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
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- favicon -->
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
<!-- Styles -->
<link rel="stylesheet" href="./css/tabs.css">
<link rel="stylesheet" href="./css/clocks.css">
<link rel="stylesheet" href="./css/timer.css">
<link rel="stylesheet" href="./css/stopwatch.css">
<link rel="stylesheet" href="./css/hint.css">
<link rel="stylesheet" href="./css/modal.css">
<!-- Scripts -->
<script src="./js/digital_clock.js"></script>
<title>CLOCK</title>
</head>
<body>
<div class="tabs">
<!-- Clock tab -->
<input type="radio" id="clock_tab" name="tabs" checked>
<label for="clock_tab">Clock</label>
<div class="tab">
<h2 class="phrase">Current time is </h2>
<div id="digital_clock" title="click to switch clock type">
<div id="time">
<div><span class="time_value">00</span><span>Hours</span></div>
<div><span class="time_value">00</span><span>Minutes</span></div>
<div><span class="time_value">00</span><span>Seconds</span></div>
</div>
</div>
<div id="analog_clock" title="click to switch clock type">
<div class="outer-clock-face">
<div class="marking marking-one"></div>
<div class="marking marking-two"></div>
<div class="marking marking-three"></div>
<div class="marking marking-four"></div>
<div class="inner-clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
</div>
<div class="dropdown">
<span class="help">?</span>
<div class="dropdown-content hint">
<p class="hint">Click on clock to change it's style</p>
</div>
</div>
</div>
<!-- Timer tab -->
<input type="radio" id="timer_tab" name="tabs">
<label for="timer_tab">Timer</label>
<div class="tab timer_tab">
<h2>Set Timer</h2>
<div id="timer_setter">
<button type="button" title="use buttons or up and down keys on your keyboard to change number">+</button>
<input type="number" min="0" max="24" value="0" maxlength="2" title="use buttons or up and down keys on your keyboard to change number">
<button type="button" title="use buttons or up and down keys on your keyboard to change number">−</button>
<button type="button" title="use buttons or up and down keys on your keyboard to change number">+</button>
<input type="number" min="0" max="60" value="0" title="use buttons or up and down keys on your keyboard to change number">
<button type="button" title="use buttons or up and down keys on your keyboard to change number">−</button>
<button type="button" title="use buttons or up and down keys on your keyboard to change number">+</button>
<input type="number" min="0" max="60" value="0" maxlength="2" title="use buttons or up and down keys on your keyboard to change number">
<button type="button" title="use buttons or up and down keys on your keyboard to change number">−</button>
</div>
<div id="timer_text">
<span id="hours" class="hours">00</span><span>H</span>
<span id="mins" class="minutes">00</span><span>M</span>
<span id="secs" class="seconds">00</span><span>S</span>
</div>
<div id="timer_control">
<button type="button" id="timer_start">START</button>
<button type="button" id="timer_reset">RESET</button>
</div>
<div id="custom_deadlines">
<button class="deadline">02H</button>
<button class="deadline">01H</button>
<button class="deadline">45M</button>
<button class="deadline">30M</button>
<button class="deadline">15M</button>
<button class="deadline">10M</button>
<button class="deadline">05M</button>
<button class="deadline">01M</button>
<button class="deadline">30S</button>
</div>
<audio>
<source src="../sound/alarm.mp3" type="audio/mpeg">
</audio>
<div id="modalBody">
<span id="closeModal">×</span>
<svg id="clockSvg" data-name="clockSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.82 271.45"><defs><style>.cls-1{fill:#ffffff20;}.cls-2{fill:#2094f3;}.cls-3{fill:#ff006a;}</style></defs><path class="cls-1" d="M205.79,276.34c-2.28-1.68-5.08-3-6.72-5.13-2.71-3.55-2.17-7.61.09-11.4l8-13.38c-38.76-37.2-53.19-81.67-36.7-132.93S224.7,34.92,277.63,27c0-3,0-6.36,0-9.69.05-6.72,4.39-11.44,10.51-11.46s10.55,4.68,10.61,11.37c0,3.32,0,6.65,0,9.82,6.41,1.14,12.58,2,18.65,3.36a117.43,117.43,0,0,1,42.61,19c21.25,15.05,37,34.62,45.71,59.24,12.53,35.21,9.84,69.5-7.54,102.59a10.5,10.5,0,1,1-18.75-9.44c5-9.77,9-19.87,10.95-30.68,4.63-25.42.57-49.38-12.45-71.7A103.32,103.32,0,0,0,273,49.42a103.7,103.7,0,0,0-85.14,79.18,101,101,0,0,0,6.77,66,103.47,103.47,0,0,0,106.67,59.82A102.19,102.19,0,0,0,349,235.82c3.33-2.37,7-3.93,10.84-2a16.46,16.46,0,0,1,6.11,5.46c4,6,7.17,12.54,11.24,18.47,4.56,6.65,4.33,15-5.49,18.63h-4.22c-4.25-1.31-6.76-4.45-8.8-8.18-1.76-3.22-3.73-6.32-5.64-9.52-.88.44-1.52.73-2.12,1.07a121.3,121.3,0,0,1-41.2,14.81c-4.33.71-8.69,1.22-13,1.82H280.8a25.15,25.15,0,0,0-2.56-.5,122.33,122.33,0,0,1-49.59-14.95c-1.35-.74-2.72-1.46-4.19-2.26-2,3.34-3.92,6.38-5.65,9.53-2,3.73-4.54,6.87-8.8,8.18Z" transform="translate(-163.18 -5.39)"/><path class="cls-2" d="M277.64,117.9c0-11.09-.06-22.18,0-33.27a10.53,10.53,0,0,1,17.52-7.9c2.72,2.34,3.6,5.47,3.59,9,0,19.63,0,39.26-.06,58.88a5.81,5.81,0,0,0,1.9,4.6c8.09,8,16.06,16.05,24.13,24,3.2,3.17,4.62,6.84,3.42,11.24A10.5,10.5,0,0,1,312,190.12a22,22,0,0,1-2.56-2.27c-9.16-9.14-18.27-18.33-27.48-27.41a13.75,13.75,0,0,1-4.36-10.59c.14-10.65,0-21.3,0-31.95Z" transform="translate(-163.18 -5.39)"/><path class="cls-3" d="M220.69,23.43A9.9,9.9,0,0,1,217,31.58c-9.56,8-19.11,16.08-28.78,24a10.5,10.5,0,0,1-13.55-16c9.49-8.11,19.12-16.08,28.75-24a10,10,0,0,1,11.38-1.35A10,10,0,0,1,220.69,23.43Z" transform="translate(-163.18 -5.39)"/><path class="cls-3" d="M367.46,12.48c2.32,1.1,5,1.8,6.9,3.37,9.44,7.63,18.73,15.44,28,23.27,4.86,4.11,5.5,10.51,1.73,15-3.91,4.69-10.25,5.24-15.27,1.12q-14.06-11.57-28-23.32c-3.91-3.29-5.1-7.81-3.44-12.08S362.74,13.13,367.46,12.48Z" transform="translate(-163.18 -5.39)"/></svg>
<div>TIME UP!!</div>
</div>
<div class="dropdown">
<span class="help">?</span>
<div class="dropdown-content hint">
<p class="hint">Use + and − buttons or <kbd>↑</kbd> and <kbd>↓</kbd> keys on your keyboard to change numbers</p>
</div>
</div>
</div>
<!-- Stopwatch tab -->
<input type="radio" id="stopwatch_tab" name="tabs">
<label for="stopwatch_tab">Stopwatch</label>
<div class="tab stopwatch_tab">
<div id="stopwatch_text">
<span id="sw_mins" class="minutes">00</span><span>M</span>
<span id="sw_secs" class="seconds">00</span><span>S</span>
<span id="sw_msecs" class="seconds">00</span><span>MS</span>
</div>
<div id="stopwatch_control">
<button type="button" id="sw_start">START</button>
<button type="button" id="sw_stop"> STOP </button>
<button type="button" id="sw_lap" disabled> LAP </button>
<button type="button" id="sw_reset">RESET</button>
</div>
<div id="laps">
</div>
<div class="dropdown">
<span class="help">?</span>
<div class="dropdown-content hint">
<p class="hint">The stopwatch will keep running even if you switch tabs</p>
</div>
</div>
</div>
</div>
</body>
<script src="./js/analog_clock.js"></script>
<script src="./js/clock_toggle.js"></script>
<script src="./js/timer_controller.js"></script>
<script src="./js/stopwatch_controller.js"></script>
</html>