feat: Update UI

templates/static/main.js

@@ -8,6 +8,7 @@ const app = () => ({
     searchLoading: false,
     searchError: "",
     searchDebounceTimer: null,
+    supportedSalathLangs: ["tr", "de", "en", "ar"],
     userMinutes: 0,
     now: new Date(),
     debug: location.hash === "#debug",
@@ -131,18 +132,73 @@ const app = () => ({
             return null;
         }
         return new PrayerTimes(this.futureTimes[0], () => this.userNow);
+    },
+
+    get preferredSalathLangs() {
+        const browserLanguages = (navigator.languages && navigator.languages.length > 0)
+            ? navigator.languages
+            : [navigator.language];
+
+        const preferred = browserLanguages
+            .filter(Boolean)
+            .map((tag) => normalizeLanguageTag(tag))
+            .filter((lang) => this.supportedSalathLangs.includes(lang));
+
+        return Array.from(new Set([...preferred, ...this.supportedSalathLangs]));
+    },
+
+    salathNameDisplay(salath) {
+        const names = this.preferredSalathLangs.map((lang) => ({
+            lang,
+            text: PrayerTimes.translations[salath]?.[lang] ?? salath
+        }));
+
+        return {
+            primary: names[0],
+            secondary: names.slice(1)
+        };
     }
 });
 
 class PrayerTimes {
     static salaths = ["fajr", "sunrise", "dhuhr", "asr", "maghrib", "isha"];
     static translations = {
-        fajr: {tr: "İmsak", de: "Fruehgebet", ar: "صلاة الفجر"},
-        sunrise: {tr: "Günes", de: "Sonnenaufgang", ar: "الشروق"},
-        dhuhr: {tr: "Öğle", de: "Mittagsgebet", ar: "صلاة الظهر"},
-        asr: {tr: "İkindi", de: "Nachmittagsgebet", ar: "صلاة العصر"},
-        maghrib: {tr: "Aksam", de: "Abendgebet", ar: "صلاة المغرب"},
-        isha: {tr: "Yatsı", de: "Nachtgebet", ar: "صلاة العشاء"}
+        fajr: {
+            tr: "İmsak",
+            en: "Fajr",
+            de: "Fruehgebet",
+            ar: "صلاة الفجر"
+        },
+        sunrise: {
+            tr: "Güneş",
+            en: "Sunrise",
+            de: "Sonnenaufgang",
+            ar: "الشروق"
+        },
+        dhuhr: {
+            tr: "Öğle",
+            en: "Dhuhr",
+            de: "Mittagsgebet",
+            ar: "صلاة الظهر"
+        },
+        asr: {
+            tr: "İkindi",
+            en: "Asr",
+            de: "Nachmittagsgebet",
+            ar: "صلاة العصر"
+        },
+        maghrib: {
+            tr: "Akşam",
+            en: "Maghrib",
+            de: "Abendgebet",
+            ar: "صلاة المغرب"
+        },
+        isha: {
+            tr: "Yatsı",
+            en: "Isha",
+            de: "Nachtgebet",
+            ar: "صلاة العشاء"
+        }
     };
 
     constructor({date, ...rest}, clock = () => new Date()) {
@@ -199,8 +255,12 @@ class PrayerTimes {
 }
 
 function formatDuration(seconds) {
-    const d = new Date(0, 0, 0, 0, 0, seconds);
-    return formatTime(d);
+    const totalSeconds = Math.max(0, Math.floor(seconds));
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const secs = totalSeconds % 60;
+
+    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
 }
 
 function formatTime(then) {
@@ -244,3 +304,7 @@ function getUserLocation() {
         );
     });
 }
+
+function normalizeLanguageTag(tag) {
+    return String(tag).toLowerCase().split("-")[0];
+}