Added timezone selector, manual time adjustment, and customizable clock face

Animated_Clock/watch.css

@@ -193,3 +193,93 @@
     transform: rotate(360deg);
   }
 }
+
+/* New Timezone selector */
+.timezone-selector {
+  text-align: center;
+  margin-top: 20px;
+  font-size: 16px;
+  color: #dbe7fd;
+}
+
+.timezone-selector select {
+  padding: 5px 10px;
+  font-size: 16px;
+  background: #1e213a;
+  color: #dbe7fd;
+  border: 1px solid #cccccc;
+  border-radius: 5px;
+}
+
+/* Manual Time Adjustment */
+.manual-time {
+  text-align: center;
+  margin: 20px 0;
+  font-size: 16px;
+  color: #dbe7fd;
+}
+
+.manual-time label {
+  margin: 0 5px;
+}
+
+.manual-time input {
+  width: 50px;
+  padding: 5px;
+  font-size: 16px;
+  margin: 0 5px;
+  background: #1e213a;
+  color: #dbe7fd;
+  border: 1px solid #cccccc;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.manual-time button {
+  padding: 5px 15px;
+  font-size: 16px;
+  background: #07f3dfb4;
+  color: #25283D;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.manual-time button:hover {
+  background: #05c1b2;
+}
+
+/* Customizable Clock Face */
+/* Clock Face Options */
+.clock-face-options {
+  text-align: center;
+  margin: 20px 0;
+  font-size: 16px;
+  color: #dbe7fd;
+}
+
+.clock-face-options label {
+  margin: 0 10px;
+  cursor: pointer;
+}
+
+/* Clock Themes */
+.original #clock {
+  border-color: #1e213a;
+  box-shadow: inset 0 5px 25px #00000080,
+              0 5px 25px #00000080,
+              0 5px 30px #00000080;
+}
+
+.neon #clock {
+  border-color: #07f3dfb4;
+  box-shadow: inset 0 5px 15px #07f3df80,
+              0 5px 20px #07f3df80;
+}
+
+.negative #clock {
+  border-color: #c7d8f8;
+  box-shadow: none;
+  background: #ffffff;
+}
+

Animated_Clock/watch.html

@@ -29,5 +29,44 @@
             <li id="second"></li>
         </ul>
     </div>
+    <!-- Adding ability to change timezone -->
+    <div class="timezone-selector">
+        <label for="timezoneSelector">Select Timezone:</label>
+        <select id="timezoneSelector">
+            <option value="UTC">UTC</option>
+            <option value="America/New_York">New York (EST)</option>
+            <option value="Europe/London">London (GMT)</option>
+            <option value="Asia/Tokyo">Tokyo (JST)</option>
+            <option value="Australia/Sydney">Sydney (AEST)</option>
+        </select>
+    </div>
+    <!-- Adding ability to manually change time -->
+    <div class="manual-time">
+        <label for="hoursInput">Hours:</label>
+        <input type="number" id="hoursInput" min="1" max="12" placeholder="HH">
+
+        <label for="minutesInput">Minutes:</label>
+        <input type="number" id="minutesInput" min="0" max="59" placeholder="MM">
+
+        <label for="secondsInput">Seconds:</label>
+        <input type="number" id="secondsInput" min="0" max="59" placeholder="SS">
+
+        <button id="setTimeButton">Set Time</button>
+    </div>
+    <!-- Adding ability to customize clockface -->
+    <div class="clock-face-options">
+        <label>
+            <input type="radio" name="clockFace" value="original" checked> Original
+        </label>
+        <label>
+            <input type="radio" name="clockFace" value="neon"> Neon
+        </label>
+        <label>
+            <input type="radio" name="clockFace" value="negative"> Negative
+        </label>
+    </div>
+
+    <!-- Adding JS to implement new contributions --> 
+    <script src="watch.js"></script>   
 </body>
 </html>

Animated_Clock/watch.js

@@ -0,0 +1,133 @@
+// Timezone Selector
+const timezoneSelector = document.getElementById("timezoneSelector");
+const clock = document.getElementById("clock");
+
+// Track if the time is manually set
+let isManualUpdate = true;
+let manualTime = null; // Store manually set time
+
+function updateClock() {
+    if (isManualUpdate && manualTime) {
+        // Use manual time if manual update is active
+        const { hours, minutes, seconds } = manualTime;
+        updateClockHands(hours, minutes, seconds);
+        return;
+    }
+
+    // Timezone-based updates
+    const timezone = timezoneSelector.value;
+    const now = new Date();
+    const options = {
+        timeZone: timezone,
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false,
+    };
+
+    // Format the time for the selected timezone
+    const timeString = new Intl.DateTimeFormat("en-US", options).format(now);
+    const [hours, minutes, seconds] = timeString.split(":");
+
+    // Update the clock hands
+    updateClockHands(parseInt(hours), parseInt(minutes), parseInt(seconds));
+}
+
+function updateClockHands(hours, minutes, seconds) {
+    const hourHand = document.getElementById("hour");
+    const minuteHand = document.getElementById("minute");
+    const secondHand = document.getElementById("second");
+
+    const hourRotation = (hours % 12) * 30 + minutes * 0.5; // 360/12 = 30 degrees per hour
+    const minuteRotation = minutes * 6; // 360/60 = 6 degrees per minute
+    const secondRotation = seconds * 6; // 360/60 = 6 degrees per second
+
+    hourHand.style.transform = `rotate(${hourRotation}deg)`;
+    minuteHand.style.transform = `rotate(${minuteRotation}deg)`;
+    secondHand.style.transform = `rotate(${secondRotation}deg)`;
+}
+
+// Event listener for timezone changes
+timezoneSelector.addEventListener("change", () => {
+    isManualUpdate = false; // Switch to timezone mode
+    manualTime = null; // Clear manual time
+    updateClock(); // Immediately update the clock to the new timezone
+});
+
+// Initialize the clock
+setInterval(updateClock, 1000);
+
+// Manual Time Adjustment
+const hoursInput = document.getElementById("hoursInput");
+const minutesInput = document.getElementById("minutesInput");
+const secondsInput = document.getElementById("secondsInput");
+const setTimeButton = document.getElementById("setTimeButton");
+
+function setManualTime() {
+    const timezone = timezoneSelector.value;
+
+    // Get the manual time inputs
+    const hours = parseInt(hoursInput.value) || 0;
+    const minutes = parseInt(minutesInput.value) || 0;
+    const seconds = parseInt(secondsInput.value) || 0;
+
+    // Create a date object for the manual time
+    const manualDate = new Date();
+    manualDate.setHours(hours);
+    manualDate.setMinutes(minutes);
+    manualDate.setSeconds(seconds);
+
+    // Convert manual time to UTC based on the selected timezone
+    const options = { timeZone: timezone, hour12: false };
+    const formatter = new Intl.DateTimeFormat("en-US", options);
+    const formattedTime = formatter.format(manualDate);
+    const [adjustedHours, adjustedMinutes, adjustedSeconds] = formattedTime.split(":").map(Number);
+
+    // Store the adjusted manual time
+    manualTime = {
+        hours: adjustedHours,
+        minutes: adjustedMinutes,
+        seconds: adjustedSeconds,
+    };
+
+    // Update the clock hands
+    updateClockHands(manualTime.hours, manualTime.minutes, manualTime.seconds);
+
+    // Set the manual update flag
+    isManualUpdate = true;
+
+    // Clear the inputs
+    hoursInput.value = '';
+    minutesInput.value = '';
+    secondsInput.value = '';
+}
+
+// Event listener for manual time adjustment
+setTimeButton.addEventListener("click", setManualTime);
+
+// Customizable Clock Face
+const clockFaceOptions = document.querySelectorAll('input[name="clockFace"]');
+const wrapper = document.querySelector('.wrapper');
+
+// Function to apply the selected clock face
+function applyClockFace() {
+    const selectedFace = document.querySelector('input[name="clockFace"]:checked').value.toLowerCase();
+
+    // Remove existing theme classes
+    wrapper.classList.remove('original', 'neon', 'negative');
+
+    // Add the selected theme class
+    wrapper.classList.add(selectedFace);
+}
+
+// Event listeners for clock face changes
+clockFaceOptions.forEach(option => {
+    option.addEventListener('change', applyClockFace);
+});
+
+// Apply the default clock face on load
+applyClockFace();
+
+
+
+

ball game/index.html

@@ -2,14 +2,16 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Fall game</title>
+    <title>Fall Game</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <div id="game">
     <div id="character"></div>
 </div>
-
+<div id="level-display">Level: 1</div> <!-- Added Level Display -->
+<div id="level-message"></div> <!-- Added for displaying level-up messages -->
+<div id="score-display">Score: 0</div> <!-- Added Score Display -->
 </body>
 <script src="script.js"></script>
-</html>
+</html>