149 lines
3.4 KiB
Svelte
149 lines
3.4 KiB
Svelte
<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>
|