From 1b90814409a978ff035d6cf7e1f665b52b4bf282 Mon Sep 17 00:00:00 2001
From: Rupesh Varshney <146447594+rupeshv2121@users.noreply.github.com>
Date: Wed, 8 Jan 2025 15:35:34 +0530
Subject: [PATCH] Fixes UI Changes in Digital Clock Projects

---
 public/digital_clock/digitalclock.css  |   6 +-
 public/digital_clock/digitalclock.html | 103 ++++++++++++++++++-------
 2 files changed, 78 insertions(+), 31 deletions(-)
diff --git a/public/digital_clock/digitalclock.css b/public/digital_clock/digitalclock.css
index d7b51f00..42e00f8f 100644
--- a/public/digital_clock/digitalclock.css
+++ b/public/digital_clock/digitalclock.css
@@ -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;
 }
 
diff --git a/public/digital_clock/digitalclock.html b/public/digital_clock/digitalclock.html
index 0ed3c9dc..339c923f 100644
--- a/public/digital_clock/digitalclock.html
+++ b/public/digital_clock/digitalclock.html
@@ -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>
