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,148 @@
+<script>
+  import PrayerTimes from './lib/PrayerTimes.svelte';
+  import Qibla from './lib/Qibla.svelte';
+  import Quran from './lib/Quran.svelte';
+  import Hijri from './lib/Hijri.svelte';
+  import Tasbih from './lib/Tasbih.svelte';
+  import Names99 from './lib/Names99.svelte';
+
+  const tabs = ['Prayer', 'Qibla', 'Quran', 'Hijri', 'Tasbih', '99 Names'];
+  const icons = ['🕌', '🧭', '📖', '📅', '📿', '💚'];
+  let activeTab = $state(0);
+
+  function handleKeydown(e) {
+    if (e.key === 'ArrowRight') activeTab = (activeTab + 1) % tabs.length;
+    if (e.key === 'ArrowLeft') activeTab = (activeTab - 1 + tabs.length) % tabs.length;
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="app">
+  <header>
+    <h1>Nūr</h1>
+    <span class="subtitle">Muslim Companion</span>
+  </header>
+
+  <nav>
+    {#each tabs as tab, i}
+      <button
+        class="tab"
+        class:active={activeTab === i}
+        onclick={() => activeTab = i}
+        aria-label={tab}
+      >
+        <span class="tab-icon">{icons[i]}</span>
+        <span class="tab-label">{tab}</span>
+      </button>
+    {/each}
+  </nav>
+
+  <main>
+    {#if activeTab === 0}
+      <PrayerTimes />
+    {:else if activeTab === 1}
+      <Qibla />
+    {:else if activeTab === 2}
+      <Quran />
+    {:else if activeTab === 3}
+      <Hijri />
+    {:else if activeTab === 4}
+      <Tasbih />
+    {:else if activeTab === 5}
+      <Names99 />
+    {/if}
+  </main>
+</div>
+
+<style>
+  :global(*) { box-sizing: border-box; margin: 0; padding: 0; }
+  :global(body) {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: #f0fdfa;
+    color: #134e4a;
+    min-height: 100dvh;
+    overflow-x: hidden;
+  }
+  .app {
+    max-width: 480px;
+    margin: 0 auto;
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 80px;
+  }
+  header {
+    text-align: center;
+    padding: 20px 16px 8px;
+    background: linear-gradient(135deg, #0f766e, #0d9488);
+    color: white;
+    border-radius: 0 0 24px 24px;
+  }
+  header h1 { font-size: 1.8rem; font-weight: 700; }
+  .subtitle { font-size: 0.8rem; opacity: 0.85; }
+
+  nav {
+    display: flex;
+    gap: 4px;
+    padding: 12px 8px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  .tab {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    padding: 8px 10px;
+    border: none;
+    background: transparent;
+    border-radius: 12px;
+    cursor: pointer;
+    font-size: 0.7rem;
+    color: #5b8c85;
+    transition: all 0.2s;
+    min-width: 56px;
+  }
+  .tab.active {
+    background: #ccfbf1;
+    color: #0f766e;
+    font-weight: 600;
+  }
+  .tab-icon { font-size: 1.3rem; }
+  .tab-label { white-space: nowrap; }
+
+  main {
+    flex: 1;
+    padding: 0 12px 16px;
+  }
+
+  :global(.card) {
+    background: white;
+    border-radius: 16px;
+    padding: 20px;
+    margin-bottom: 12px;
+    box-shadow: 0 1px 3px rgba(15, 118, 110, 0.08);
+  }
+  :global(.card h2) {
+    font-size: 1rem;
+    color: #0f766e;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  :global(button.primary) {
+    background: linear-gradient(135deg, #0f766e, #0d9488);
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 10px;
+    font-weight: 600;
+    cursor: pointer;
+    font-size: 0.9rem;
+  }
+  :global(button.primary:active) { opacity: 0.85; }
+</style>