1
1
<!DOCTYPE html>
2
2
< html lang ="en ">
3
- < head >
4
- < meta charset ="UTF-8 " />
5
- < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
6
- < link rel ="stylesheet " href ="style.css " />
7
- < title > Theme Clock</ title >
8
- </ head >
9
- < body >
10
- <!-- Inspired by this dribbble shot https://dribbble.com/shots/5958443-Alarm-clock -->
11
-
12
- < button class ="toggle "> Dark mode</ button >
13
-
14
- < div class ="clock-container ">
15
- < div class ="clock ">
16
- < div class ="needle hour "> </ div >
17
- < div class ="needle minute "> </ div >
18
- < div class ="needle second "> </ div >
19
- < div class ="center-point "> </ div >
20
- </ div >
21
-
22
- < div class ="time "> </ div >
23
- < div class ="date "> </ div >
3
+ < head >
4
+ < meta charset ="UTF-8 ">
5
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6
+ < link rel ="stylesheet " href ="style.css ">
7
+ < title > Enhanced Theme Clock</ title >
8
+ <!-- Font Awesome for icons -->
9
+ < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css ">
10
+ </ head >
11
+ < body >
12
+ <!-- Control Panel -->
13
+ < div class ="control-panel ">
14
+ < button class ="toggle-theme " id ="toggleTheme ">
15
+ < i class ="fas fa-moon "> </ i >
16
+ < span > Dark Mode</ span >
17
+ </ button >
18
+
19
+ < button class ="fullscreen-btn " id ="fullscreenBtn ">
20
+ < i class ="fas fa-expand "> </ i >
21
+ </ button >
22
+
23
+ < button class ="sound-toggle " id ="soundToggle ">
24
+ < i class ="fas fa-volume-up "> </ i >
25
+ </ button >
26
+
27
+ < button class ="settings-btn " id ="settingsBtn ">
28
+ < i class ="fas fa-cog "> </ i >
29
+ </ button >
24
30
</ div >
25
31
32
+ <!-- Settings Panel -->
33
+ < div class ="settings-panel " id ="settingsPanel ">
34
+ < div class ="settings-content ">
35
+ < h3 > Settings</ h3 >
36
+
37
+ < div class ="setting-group ">
38
+ < label > Timezone:</ label >
39
+ < select id ="timezoneSelect ">
40
+ < option value ="local "> Local Time</ option >
41
+ < option value ="UTC "> UTC</ option >
42
+ < option value ="America/New_York "> New York</ option >
43
+ < option value ="America/Los_Angeles "> Los Angeles</ option >
44
+ < option value ="Europe/London "> London</ option >
45
+ < option value ="Europe/Paris "> Paris</ option >
46
+ < option value ="Asia/Tokyo "> Tokyo</ option >
47
+ < option value ="Asia/Shanghai "> Shanghai</ option >
48
+ < option value ="Asia/Kolkata "> Mumbai</ option >
49
+ < option value ="Australia/Sydney "> Sydney</ option >
50
+ </ select >
51
+ </ div >
52
+
53
+ < div class ="setting-group ">
54
+ < label > Clock Theme:</ label >
55
+ < select id ="clockTheme ">
56
+ < option value ="modern "> Modern</ option >
57
+ < option value ="classic "> Classic</ option >
58
+ < option value ="minimal "> Minimal</ option >
59
+ < option value ="neon "> Neon</ option >
60
+ </ select >
61
+ </ div >
62
+
63
+ < div class ="setting-group ">
64
+ < label > Animation Speed:</ label >
65
+ < input type ="range " id ="animationSpeed " min ="0.1 " max ="2 " step ="0.1 " value ="1 ">
66
+ < span id ="speedValue "> 1x</ span >
67
+ </ div >
68
+
69
+ < button class ="close-settings " id ="closeSettings "> Close</ button >
70
+ </ div >
71
+ </ div >
72
+
73
+ <!-- Main Container -->
74
+ < div class ="main-container ">
75
+ <!-- Tab Navigation -->
76
+ < div class ="tab-nav ">
77
+ < button class ="tab-btn active " data-tab ="clock ">
78
+ < i class ="fas fa-clock "> </ i >
79
+ Clock
80
+ </ button >
81
+ < button class ="tab-btn " data-tab ="stopwatch ">
82
+ < i class ="fas fa-stopwatch "> </ i >
83
+ Stopwatch
84
+ </ button >
85
+ < button class ="tab-btn " data-tab ="timer ">
86
+ < i class ="fas fa-hourglass-half "> </ i >
87
+ Timer
88
+ </ button >
89
+ < button class ="tab-btn " data-tab ="alarm ">
90
+ < i class ="fas fa-bell "> </ i >
91
+ Alarm
92
+ </ button >
93
+ </ div >
94
+
95
+ <!-- Clock Tab -->
96
+ < div class ="tab-content active " id ="clock-tab ">
97
+ < div class ="clock-container ">
98
+ < div class ="clock " id ="analogClock ">
99
+ <!-- Hour markers -->
100
+ < div class ="hour-markers ">
101
+ < div class ="marker hour-12 "> 12</ div >
102
+ < div class ="marker hour-3 "> 3</ div >
103
+ < div class ="marker hour-6 "> 6</ div >
104
+ < div class ="marker hour-9 "> 9</ div >
105
+ <!-- Minute markers -->
106
+ < div class ="minute-markers ">
107
+ <!-- These will be generated by JavaScript -->
108
+ </ div >
109
+ </ div >
110
+
111
+ < div class ="needle hour " id ="hourHand "> </ div >
112
+ < div class ="needle minute " id ="minuteHand "> </ div >
113
+ < div class ="needle second " id ="secondHand "> </ div >
114
+ < div class ="center-point "> </ div >
115
+ </ div >
116
+
117
+ < div class ="digital-display ">
118
+ < div class ="time " id ="digitalTime "> </ div >
119
+ < div class ="date " id ="digitalDate "> </ div >
120
+ < div class ="timezone-info " id ="timezoneInfo "> Local Time</ div >
121
+ </ div >
122
+ </ div >
123
+ </ div >
124
+
125
+ <!-- Stopwatch Tab -->
126
+ < div class ="tab-content " id ="stopwatch-tab ">
127
+ < div class ="stopwatch-container ">
128
+ < div class ="stopwatch-display ">
129
+ < div class ="stopwatch-time " id ="stopwatchTime "> 00:00:00</ div >
130
+ < div class ="stopwatch-ms " id ="stopwatchMs "> 000</ div >
131
+ </ div >
132
+ < div class ="stopwatch-controls ">
133
+ < button class ="control-btn start " id ="stopwatchStart ">
134
+ < i class ="fas fa-play "> </ i >
135
+ Start
136
+ </ button >
137
+ < button class ="control-btn pause " id ="stopwatchPause ">
138
+ < i class ="fas fa-pause "> </ i >
139
+ Pause
140
+ </ button >
141
+ < button class ="control-btn reset " id ="stopwatchReset ">
142
+ < i class ="fas fa-redo "> </ i >
143
+ Reset
144
+ </ button >
145
+ < button class ="control-btn lap " id ="stopwatchLap ">
146
+ < i class ="fas fa-flag "> </ i >
147
+ Lap
148
+ </ button >
149
+ </ div >
150
+ < div class ="lap-times " id ="lapTimes "> </ div >
151
+ </ div >
152
+ </ div >
153
+
154
+ <!-- Timer Tab -->
155
+ < div class ="tab-content " id ="timer-tab ">
156
+ < div class ="timer-container ">
157
+ < div class ="timer-setup " id ="timerSetup ">
158
+ < div class ="time-inputs ">
159
+ < div class ="input-group ">
160
+ < label > Hours</ label >
161
+ < input type ="number " id ="timerHours " min ="0 " max ="23 " value ="0 ">
162
+ </ div >
163
+ < div class ="input-group ">
164
+ < label > Minutes</ label >
165
+ < input type ="number " id ="timerMinutes " min ="0 " max ="59 " value ="5 ">
166
+ </ div >
167
+ < div class ="input-group ">
168
+ < label > Seconds</ label >
169
+ < input type ="number " id ="timerSeconds " min ="0 " max ="59 " value ="0 ">
170
+ </ div >
171
+ </ div >
172
+ < button class ="control-btn start " id ="timerStart ">
173
+ < i class ="fas fa-play "> </ i >
174
+ Start Timer
175
+ </ button >
176
+ </ div >
177
+
178
+ < div class ="timer-display hidden " id ="timerDisplay ">
179
+ < div class ="timer-circle ">
180
+ < svg class ="progress-ring " width ="200 " height ="200 ">
181
+ < circle class ="progress-ring-circle " cx ="100 " cy ="100 " r ="90 "/>
182
+ </ svg >
183
+ < div class ="timer-time " id ="timerTime "> 05:00</ div >
184
+ </ div >
185
+ < div class ="timer-controls ">
186
+ < button class ="control-btn pause " id ="timerPause ">
187
+ < i class ="fas fa-pause "> </ i >
188
+ Pause
189
+ </ button >
190
+ < button class ="control-btn stop " id ="timerStop ">
191
+ < i class ="fas fa-stop "> </ i >
192
+ Stop
193
+ </ button >
194
+ </ div >
195
+ </ div >
196
+ </ div >
197
+ </ div >
198
+
199
+ <!-- Alarm Tab -->
200
+ < div class ="tab-content " id ="alarm-tab ">
201
+ < div class ="alarm-container ">
202
+ < div class ="alarm-setup ">
203
+ < div class ="time-inputs ">
204
+ < div class ="input-group ">
205
+ < label > Hour</ label >
206
+ < input type ="number " id ="alarmHour " min ="1 " max ="12 " value ="7 ">
207
+ </ div >
208
+ < div class ="input-group ">
209
+ < label > Minute</ label >
210
+ < input type ="number " id ="alarmMinute " min ="0 " max ="59 " value ="0 ">
211
+ </ div >
212
+ < div class ="input-group ">
213
+ < label > AM/PM</ label >
214
+ < select id ="alarmAmPm ">
215
+ < option value ="AM "> AM</ option >
216
+ < option value ="PM "> PM</ option >
217
+ </ select >
218
+ </ div >
219
+ </ div >
220
+ < div class ="alarm-days ">
221
+ < label > Repeat:</ label >
222
+ < div class ="day-buttons ">
223
+ < button class ="day-btn " data-day ="0 "> Sun</ button >
224
+ < button class ="day-btn " data-day ="1 "> Mon</ button >
225
+ < button class ="day-btn " data-day ="2 "> Tue</ button >
226
+ < button class ="day-btn " data-day ="3 "> Wed</ button >
227
+ < button class ="day-btn " data-day ="4 "> Thu</ button >
228
+ < button class ="day-btn " data-day ="5 "> Fri</ button >
229
+ < button class ="day-btn " data-day ="6 "> Sat</ button >
230
+ </ div >
231
+ </ div >
232
+ < button class ="control-btn start " id ="alarmSet ">
233
+ < i class ="fas fa-bell "> </ i >
234
+ Set Alarm
235
+ </ button >
236
+ </ div >
237
+
238
+ < div class ="active-alarms " id ="activeAlarms ">
239
+ < h3 > Active Alarms</ h3 >
240
+ < div class ="alarm-list " id ="alarmList "> </ div >
241
+ </ div >
242
+ </ div >
243
+ </ div >
244
+ </ div >
245
+
246
+ <!-- Alarm Modal -->
247
+ < div class ="alarm-modal hidden " id ="alarmModal ">
248
+ < div class ="modal-content ">
249
+ < div class ="alarm-icon ">
250
+ < i class ="fas fa-bell fa-3x "> </ i >
251
+ </ div >
252
+ < h2 > Alarm!</ h2 >
253
+ < div class ="alarm-time " id ="alarmModalTime "> </ div >
254
+ < button class ="control-btn stop " id ="dismissAlarm ">
255
+ < i class ="fas fa-times "> </ i >
256
+ Dismiss
257
+ </ button >
258
+ </ div >
259
+ </ div >
260
+
261
+ <!-- Audio elements for sounds -->
262
+ < audio id ="alarmSound " loop >
263
+ < source src ="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsF " type ="audio/wav ">
264
+ </ audio >
265
+
266
+ < audio id ="tickSound ">
267
+ < source src ="data:audio/wav;base64,UklGRuACAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YdwCAAC4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA " type ="audio/wav ">
268
+ </ audio >
269
+
26
270
< script src ="script.js "> </ script >
27
- </ body >
28
- </ html >
271
+ </ body >
272
+ </ html >
0 commit comments