Nūr Phase 1: Prayer, Qibla, Quran, Hijri, Tasbih, 99 Names — Svelte PWA

2026-08-06 12:00:09 +08:00
commit 05991c893f
17 changed files with 6902 additions and 0 deletions
@@ -0,0 +1,106 @@
+<script>
+  let count = $state(0);
+  let total = $state(0);
+  let target = $state(33);
+  let vibrate = $state(true);
+
+  function increment() {
+    count = (count + 1) % target;
+    total++;
+    if (vibrate && navigator.vibrate) navigator.vibrate(15);
+  }
+
+  function reset() {
+    count = 0;
+    total = 0;
+  }
+
+  $effect(() => {
+    function handleSpace(e) {
+      if (e.code === 'Space' && e.target === document.body) {
+        e.preventDefault();
+        increment();
+      }
+    }
+    window.addEventListener('keydown', handleSpace);
+    return () => window.removeEventListener('keydown', handleSpace);
+  });
+</script>
+
+<div class="card">
+  <h2>📿 Tasbih Counter</h2>
+
+  <div class="tasbih-display">
+    <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+    <div class="counter-ring" onclick={increment} role="button" tabindex="0" onkeydown={(e) => e.key === 'Enter' && increment()}>
+      <svg viewBox="0 0 120 120" width="160" height="160">
+        <circle cx="60" cy="60" r="52" fill="none" stroke="#e6f5f0" stroke-width="8" />
+        <circle
+          cx="60" cy="60" r="52"
+          fill="none" stroke="#0f766e" stroke-width="8"
+          stroke-dasharray={2 * Math.PI * 52}
+          stroke-dashoffset={2 * Math.PI * 52 * (1 - count / target)}
+          stroke-linecap="round"
+          transform="rotate(-90 60 60)"
+        />
+        <text x="60" y="56" text-anchor="middle" fill="#0f766e" font-size="22" font-weight="700">{count}</text>
+        <text x="60" y="76" text-anchor="middle" fill="#5b8c85" font-size="10">/ {target}</text>
+      </svg>
+    </div>
+
+    <div class="total-line">
+      <span>Total today:</span>
+      <strong>{total}</strong>
+    </div>
+
+    <div class="controls">
+      <div class="target-select">
+        <label for="bead-select">Beads:</label>
+        <select id="bead-select" bind:value={target} onchange={() => { count = 0; }}>
+          <option value={33}>33</option>
+          <option value={99}>99</option>
+          <option value={100}>100</option>
+          <option value={500}>500</option>
+        </select>
+      </div>
+      <button class="primary" onclick={reset}>Reset</button>
+    </div>
+
+    <p class="hint">👆 Tap the circle or press Space to count</p>
+  </div>
+</div>
+
+<style>
+  .tasbih-display {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 14px;
+  }
+  .counter-ring {
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+  }
+  .counter-ring:active { transform: scale(0.97); transition: transform 0.1s; }
+  .total-line { font-size: 0.9rem; color: #5b8c85; }
+  .controls {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+  .target-select {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    font-size: 0.8rem;
+    color: #5b8c85;
+  }
+  .target-select select {
+    border: 1px solid #99d6c9;
+    border-radius: 6px;
+    padding: 4px 8px;
+    color: #0f766e;
+  }
+  .hint { font-size: 0.7rem; color: #94a3a8; }
+</style>