Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes UI Changes in Digital Clock Projects #395

Merged
merged 2 commits into from
Jan 9, 2025
Merged

Fixes UI Changes in Digital Clock Projects #395

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b90814
Fixes UI Changes in Digital Clock Projects
rupeshv2121 Jan 8, 2025
bd05287
Fixes UI Changes in Digital Clock Projects
rupeshv2121 Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions public/digital_clock/digitalclock.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,17 @@ body {
}

.classic {
color: green;
color:white;
border-color: green;
}

.modern {
color: blue;
color: white;
border-color: blue;
}

.futuristic {
color: red;
color:white;
border-color: red;
}

Expand Down
103 changes: 75 additions & 28 deletions public/digital_clock/digitalclock.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Clock</title>
<link rel="stylesheet" href="digitalclock.css">
<script src="digitalclock.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-black flex flex-col items-center justify-center h-screen">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Digital Clock</title>
<link rel="stylesheet" href="digitalclock.css" />
<script src="digitalclock.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-black flex flex-col items-center justify-center h-screen">
<div class="text-center">
<div id="display" class="relative font-mono text-4xl md:text-5xl text-green-500 border-4 border-green-500 rounded-lg p-4 mb-4"></div>
<div id="clock" class="relative font-mono text-4xl md:text-5xl text-green-500 border-4 border-green-500 rounded-lg p-4"></div>
<div
id="display"
class="relative font-mono text-4xl md:text-5xl text-white border-4 border-green-500 rounded-lg p-4 mb-4"
></div>
<div
id="clock"
class="relative font-mono text-4xl md:text-5xl text-green-500 border-4 border-green-500 rounded-lg p-4"
></div>
</div>
<div class="mt-10 flex space-x-4">
<button class="clock-face-btn px-4 py-2 hover:bg-green-700 border-2 border-green-500 text-green-500 rounded-lg" onclick="setClockStyleAndFormat('classic', 'format1')">Classic</button>
<button class="clock-face-btn px-4 py-2 hover:bg-blue-700 border-2 border-blue-500 text-blue-500 rounded-lg" onclick="setClockStyleAndFormat('modern', 'format2')">Modern</button>
<button class="clock-face-btn px-4 py-2 hover:bg-red-700 border-2 border-red-500 text-red-500 rounded-lg" onclick="setClockStyleAndFormat('futuristic', 'format3')">Futuristic</button>
<button
class="clock-face-btn px-4 py-2 hover:bg-green-700 hover:text-white border-2 border-green-500 text-green-500 rounded-lg"
onclick="setClockStyleAndFormat('classic', 'format1')"
>
Classic
</button>
<button
class="clock-face-btn px-4 py-2 hover:bg-blue-700 border-2 border-blue-500 text-blue-500 rounded-lg hover:text-white"
onclick="setClockStyleAndFormat('modern', 'format2')"
>
Modern
</button>
<button
class="clock-face-btn px-4 py-2 hover:bg-red-700 border-2 border-red-500 text-red-500 rounded-lg hover:text-white"
onclick="setClockStyleAndFormat('futuristic', 'format3')"
>
Futuristic
</button>
</div>
<div class="mt-10">
<select id="timezone" class="px-4 py-2 border-2 border-green-500 text-green-500 rounded-lg" onchange="updateClock()">
<option value="local">Local Time</option>
<option value="UTC">UTC</option>
<option value="America/New_York">New York (USA)</option>
<option value="Europe/London">London (UK)</option>
<option value="Asia/Kolkata">Kolkata (India)</option>
</select>
<select
id="timezone"
class="px-3 hover:bg-green-700 hover:text-white py-2 border-2 border-green-500 text-green-500 rounded-lg"
onchange="updateClock()"
>
<option value="local">Local Time</option>
<option value="UTC">UTC</option>
<option value="America/New_York">New York (USA)</option>
<option value="Europe/London">London (UK)</option>
<option value="Asia/Kolkata">Kolkata (India)</option>
</select>
</div>
<div id="alarm-container" class="mt-10 flex flex-col items-center">
<button class="clock-face-btn px-4 py-2 hover:bg-yellow-700 border-2 border-yellow-500 text-yellow-500 rounded-lg" onclick="toggleAlarmMode()">Set Alarm</button>
<input type="time" id="alarm-time" class="hidden mt-4 px-4 py-2 border-2 border-yellow-500 text-yellow-500 rounded-lg">
<button class="clock-face-btn hidden mt-4 px-4 py-2 hover:bg-yellow-700 border-2 border-yellow-500 text-yellow-500 rounded-lg" onclick="setAlarm()">Confirm Alarm</button>
<button
class="hover:text-white clock-face-btn px-4 py-2 hover:bg-yellow-700 border-2 border-yellow-500 text-yellow-500 rounded-lg"
onclick="toggleAlarmMode()"
>
Set Alarm
</button>
<input
type="time"
id="alarm-time"
class="hidden mt-4 px-4 py-2 border-2 border-yellow-500 text-yellow-500 rounded-lg"
/>
<button
class="clock-face-btn hidden mt-4 px-4 py-2 hover:bg-yellow-700 border-2 border-yellow-500 text-yellow-500 rounded-lg"
onclick="setAlarm()"
>
Confirm Alarm
</button>
</div>
<div id="alarm-popup" class="hidden fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black text-yellow-500 border-4 border-yellow-500 rounded-lg p-4">
<p>Alarm is ringing!</p>
<button class="mt-4 px-4 py-2 hover:bg-yellow-700 border-2 border-yellow-500 text-yellow-500 rounded-lg" onclick="stopAlarm()">Stop Alarm</button>
<div
id="alarm-popup"
class="hidden fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black text-yellow-500 border-4 border-yellow-500 rounded-lg p-4"
>
<p>Alarm is ringing!</p>
<button
class="mt-4 px-4 py-2 hover:bg-yellow-700 border-2 border-yellow-500 text-yellow-500 rounded-lg"
onclick="stopAlarm()"
>
Stop Alarm
</button>
</div>
<audio id="alarm-sound" src="alarm.mp3" class="hidden"></audio>
</body>
</body>
</html>
Loading