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

Theme selection in digital clock #594

Open
wants to merge 1 commit into
base: Main
Choose a base branch
from
Open

Theme selection in digital clock #594

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
108 changes: 108 additions & 0 deletions theme selection
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!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">
<div class="text-center">
<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 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-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="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>
<audio id="alarm-sound" src="alarm.mp3" class="hidden"></audio>

<div class="mt-4">
<label for="theme-toggle" class="text-white">Choose Theme:</label>
<select id="theme-toggle" class="ml-2 px-4 py-2 border-2 border-green-500 text-green-500 rounded-lg">
<option value="light">Light</option>
<option value="dark" selected>Dark</option>
</select>
</div>

<script>
document.getElementById('theme-toggle').addEventListener('change', function () {
if (this.value === 'light') {
document.body.classList.remove('bg-black', 'text-white');
document.body.classList.add('bg-white', 'text-black');
} else {
document.body.classList.remove('bg-white', 'text-black');
document.body.classList.add('bg-black', 'text-white');
}
});
</script>
</body>
</html>
Loading