Skip to content

Commit 5c91972

Browse files
workwithDworkwithD
committed
changed theme
1 parent e2bcd28 commit 5c91972

File tree

4 files changed

+1753
-113
lines changed

4 files changed

+1753
-113
lines changed

‎50-Projects-In-50-Days---HTML-CSS-JavaScript

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Subproject commit e2bcd28bfbdd86dab1db4c4eaeb130a0f6e0b1b6

‎theme-clock/index.html

Lines changed: 267 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,272 @@
11
<!DOCTYPE html>
22
<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>
2430
</div>
2531

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+
26270
<script src="script.js"></script>
27-
</body>
28-
</html>
271+
</body>
272+
</html>

0 commit comments

Comments
 (0)