feat: Update UI

templates/static/index.html

@@ -84,16 +84,21 @@
                       x-text='formatDate(userNow)'></time>
             </p>
             <p>
-            <span class='salath-name'
-                  lang='tr'
-                  x-text='todayTimes.currentSalath.name("tr")'></span>
-                <span class='salath-name'
-                      lang='de'
-                      x-text='todayTimes.currentSalath.name("de")'></span>
-                <span class='salath-name text--arabic'
-                      lang='ar'
-                      x-text='todayTimes.currentSalath.name("ar")'></span>
-            </p>
+            <div class='salath-name-group salath-name-group--center'>
+                <span class='salath-name salath-name--primary'
+                      :class="{'text--arabic': salathNameDisplay(todayTimes.currentSalath.salath).primary.lang === 'ar'}"
+                      :lang='salathNameDisplay(todayTimes.currentSalath.salath).primary.lang'
+                      x-text='salathNameDisplay(todayTimes.currentSalath.salath).primary.text'></span>
+                <div class="salath-name-alternatives">
+                    <template x-for='item in salathNameDisplay(todayTimes.currentSalath.salath).secondary'
+                              :key='item.lang'>
+                    <span class='salath-name salath-name--secondary'
+                          :class="{'text--arabic': item.lang === 'ar'}"
+                          :lang='item.lang'
+                          x-text='item.text'></span>
+                    </template>
+                </div>
+            </div>
             <p>
                 <time :datetime='todayTimes.nextSalath.startsAt'
                       class='text--numeric text--time'
@@ -110,12 +115,22 @@
                     <tr class='salath'
                         :class='{current: it.salath === todayTimes.currentSalath.salath}'>
                         <td class='cell-names'>
-                    <span class='salath-name'
-                          x-text='it.name("tr")'></span>
-                            <span class='salath-name'
-                                  x-text='it.name("de")'></span>
-                            <span class='salath-name text--arabic'
-                                  x-text='it.name("ar")'></span>
+                            <div class='salath-name-group'>
+                                <span class='salath-name salath-name--primary'
+                                      :class="{'text--arabic': salathNameDisplay(it.salath).primary.lang === 'ar'}"
+                                      :lang='salathNameDisplay(it.salath).primary.lang'
+                                      x-text='salathNameDisplay(it.salath).primary.text'></span>
+                                <div class="salath-name-alternatives">
+
+                                    <template x-for='item in salathNameDisplay(it.salath).secondary'
+                                              :key='item.lang'>
+                                    <span class='salath-name salath-name--secondary'
+                                          :class="{'text--arabic': item.lang === 'ar'}"
+                                          :lang='item.lang'
+                                          x-text='item.text'></span>
+                                    </template>
+                                </div>
+                            </div>
                         </td>
                         <td class='cell-times'>
                     <span class='salath-time text--time text--numeric'

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];
+}

templates/static/style.css

@@ -132,14 +132,37 @@ td {
 .salath-name {
 }
 
-.current {
-    color: tomato;
+.salath-name-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.1rem;
+}
+.salath-name-alternatives {
+    line-height: 1.1;
+}
+.salath-name-alternatives span + span:before {
+    content: " / ";
+    opacity: 0.5;
+}
+
+.salath-name-group--center {
+    align-items: center;
 }
 
-.salath-name + .salath-name:before {
-    content: '/';
-    opacity: 0.25;
-    margin: 0 0.5em;
+.salath-name--primary {
+    line-height: 1.05;
+}
+
+.salath-name--secondary {
+    font-size: 0.58em;
+    font-weight: 500;
+    opacity: 0.75;
+    line-height: 1.1;
+}
+
+.current {
+    color: tomato;
 }
 
 .salath-time {