diff --git a/templates/static/index.html b/templates/static/index.html index e07c1f4..db109fb 100644 --- a/templates/static/index.html +++ b/templates/static/index.html @@ -84,16 +84,21 @@ x-text='formatDate(userNow)'>

- - - -

+
+ +
+ +
+

+ +
+ + +
+
({ 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]; +} diff --git a/templates/static/style.css b/templates/static/style.css index b34893b..637be5d 100644 --- a/templates/static/style.css +++ b/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 {