feat: 24-hour time support

website/index.html

@@ -33,6 +33,13 @@ <h2>Settings</h2>
           <option value="dark">Dark</option>
         </select>
       </div>
+      <div class="time-format-setting">
+        <label for="timeFormatToggle">Time Format:</label>
+        <select id="timeFormatToggle">
+          <option value="12">12-hour</option>
+          <option value="24">24-hour</option>
+        </select>
+      </div>
     </div>
   </div>
   <script src="./js/app.js"></script>

website/js/app.js

@@ -7,14 +7,16 @@ document.addEventListener("DOMContentLoaded", () => {
       this.audioEnabled = false;
       this.audioToggle = document.getElementById("audioToggle");
       this.audioToggle.textContent = "🔇";
-      this.updateInterval = 15; // Default interval in minutes
+      this.updateInterval = 15;
       this.updateIntervalInput = document.getElementById("updateInterval");
       this.setIntervalButton = document.getElementById("setInterval");
       this.themeToggle = document.getElementById("themeToggle");
+      this.timeFormatToggle = document.getElementById("timeFormatToggle");
+      this.use24HourFormat = false;
 
       this.setupEventListeners();
       this.start();
-      this.loadSavedTheme();
+      this.loadSavedSettings();
     }
 
     setupEventListeners() {
@@ -25,6 +27,7 @@ document.addEventListener("DOMContentLoaded", () => {
       document.querySelector(".close").addEventListener("click", () => this.closeSettingsModal());
       window.addEventListener("click", (event) => this.closeModalOnOutsideClick(event));
       this.themeToggle.addEventListener("change", () => this.switchTheme());
+      this.timeFormatToggle.addEventListener("change", () => this.switchTimeFormat());
     }
 
     async loadTickSound() {
@@ -45,15 +48,23 @@ document.addEventListener("DOMContentLoaded", () => {
 
     update() {
       const now = new Date();
-      const hours = now.getHours().toString().padStart(2, "0");
+      let hours = now.getHours();
       const minutes = now.getMinutes().toString().padStart(2, "0");
       const seconds = now.getSeconds().toString().padStart(2, "0");
-
+
+      if (!this.use24HourFormat) {
+        hours = hours % 12 || 12;
+        // Remove leading zero for 12-hour format, except for 12 (noon/midnight)
+        hours = hours === 12 ? "12" : hours.toString().padStart(1, " ");
+      } else {
+        hours = hours.toString().padStart(2, "0");
+      }
+
       this.clockElement.textContent = `${hours}:${minutes}:${seconds}`;
-    
+
       const currentMinutes = now.getHours() * 60 + now.getMinutes();
       const currentSeconds = now.getSeconds();
-    
+
       if (currentSeconds === 0 && (currentMinutes % this.updateInterval === 0) && currentMinutes !== this.lastUpdate) {
         this.lastUpdate = currentMinutes;
         this.speakTime(hours, minutes);
@@ -78,20 +89,56 @@ document.addEventListener("DOMContentLoaded", () => {
         const timeString = this.formatTimeForSpeech(hours, minutes);
         console.debug("Speaking time:", timeString);
         const utterance = new SpeechSynthesisUtterance(timeString);
+        utterance.rate = 0.9;
+        utterance.pitch = 1.0;
+
+        const voices = speechSynthesis.getVoices();
+        const preferredVoices = [
+          "Google UK English Female",
+          "Microsoft Hazel Desktop - English (Great Britain)",
+          "Microsoft George - English (United Kingdom)",
+          "en-GB-Standard-A",
+          "en-GB-Standard-B"
+        ];
+
+        for (const voiceName of preferredVoices) {
+          const voice = voices.find((v) => v.name === voiceName);
+          if (voice) {
+            utterance.voice = voice;
+            break;
+          }
+        }
+
+        if (!utterance.voice) {
+          utterance.voice = voices.find((voice) => voice.lang === "en-GB") || voices[0];
+        }
+
         speechSynthesis.speak(utterance);
       }
     }
 
     formatTimeForSpeech(hours, minutes) {
       const h = parseInt(hours);
       const m = parseInt(minutes);
-      let timeString = `It's ${h === 0 ? 12 : h > 12 ? h - 12 : h}`;
+      let timeString = "It is ";
 
-      if (m !== 0) {
-        timeString += ` ${m}`;
+      if (this.use24HourFormat) {
+        timeString += `${h} ${this.formatMinutes(m)}`;
+      } else {
+        timeString += `${h === 0 ? 12 : h > 12 ? h - 12 : h} ${this.formatMinutes(m)} ${h >= 12 ? "PM" : "AM"}`;
       }
 
-      return timeString + (h >= 12 ? " PM" : " AM");
+      return timeString;
+    }
+
+    formatMinutes(minutes) {
+      if (minutes === 0) {
+        return "";
+      } else if (minutes < 10) {
+        return `oh ${minutes}`;
+      } else {
+        return minutes.toString();
+      }
     }
 
     toggleAudio() {
@@ -159,10 +206,20 @@ document.addEventListener("DOMContentLoaded", () => {
       localStorage.setItem("theme", theme);
     }
 
-    loadSavedTheme() {
+    switchTimeFormat() {
+      this.use24HourFormat = this.timeFormatToggle.value === "24";
+      localStorage.setItem("timeFormat", this.use24HourFormat ? "24" : "12");
+      this.update();
+    }
+
+    loadSavedSettings() {
       const savedTheme = localStorage.getItem("theme") || "white";
       this.themeToggle.value = savedTheme;
       this.switchTheme();
+
+      const savedTimeFormat = localStorage.getItem("timeFormat") || "12";
+      this.timeFormatToggle.value = savedTimeFormat;
+      this.switchTimeFormat();
     }
   }