Phase 1: Prayer times, Qibla, Quran, Hijri, Tasbih, 99 Names PWA

2026-08-06 11:25:13 +08:00
commit 4def05d0ef
13 changed files with 1035 additions and 0 deletions
@@ -0,0 +1,80 @@
+<script>
+  let hijriDate = $state(null);
+  let gregorian = $state('');
+  let loading = $state(true);
+
+  async function loadHijri() {
+    try {
+      const today = new Date();
+      const d = String(today.getDate()).padStart(2, '0');
+      const m = String(today.getMonth() + 1).padStart(2, '0');
+      const y = today.getFullYear();
+      gregorian = `${d}/${m}/${y}`;
+      const url = `https://api.aladhan.com/v1/gToH/${d}-${m}-${y}`;
+      const res = await fetch(url);
+      const data = await res.json();
+      if (data.code === 200) {
+        hijriDate = data.data.hijri;
+      }
+      loading = false;
+    } catch (e) {
+      loading = false;
+    }
+  }
+
+  $effect(() => { loadHijri(); });
+</script>
+
+<div class="card">
+  <h2>📅 Hijri Calendar</h2>
+
+  {#if loading}
+    <p style="color:#5b8c85">⏳ Loading…</p>
+  {:else if hijriDate}
+    <div class="date-display">
+      <div class="hijri-big">
+        <span class="hijri-day">{hijriDate.day}</span>
+        <span class="hijri-month">{hijriDate.month.en}</span>
+        <span class="hijri-year">{hijriDate.year} AH</span>
+      </div>
+      <div class="gregorian-row">
+        <span>Gregorian: {gregorian}</span>
+      </div>
+      <div class="hijri-info">
+        <div class="info-row"><span>Weekday</span><span>{hijriDate.weekday.en}</span></div>
+        <div class="info-row"><span>Month #</span><span>{hijriDate.month.number}</span></div>
+        <div class="info-row"><span>Days in month</span><span>{hijriDate.month.days}</span></div>
+        <div class="info-row"><span>Designation</span><span>{hijriDate.designation.expanded}</span></div>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .date-display { display: flex; flex-direction: column; align-items: center; gap: 12px; }
+  .hijri-big {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: linear-gradient(135deg, #0f766e, #0d9488);
+    color: white;
+    border-radius: 16px;
+    padding: 24px 32px;
+    width: 100%;
+    text-align: center;
+  }
+  .hijri-day { font-size: 2.8rem; font-weight: 700; line-height: 1; }
+  .hijri-month { font-size: 1.2rem; opacity: 0.9; margin-top: 4px; }
+  .hijri-year { font-size: 0.9rem; opacity: 0.75; margin-top: 2px; }
+  .gregorian-row { font-size: 0.85rem; color: #5b8c85; }
+  .hijri-info { width: 100%; display: flex; flex-direction: column; gap: 4px; }
+  .info-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background: #f0fdfa;
+    border-radius: 8px;
+    font-size: 0.85rem;
+    color: #134e4a;
+  }
+</style>