dwindown/jamshalat-diary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
jamshalat-diary/stitch/settings_with_dark_mode_option/code.html
dwindown faadc1865d feat: Murattal player enhancements & prayer schedule auto-scroll 
- Murattal: Spotify-style 5-button controls [Shuffle, Prev, Play, Next, Playlist]
- Murattal: Animated 7-bar equalizer visualization in player circle
- Murattal: Unsplash API background with frosted glass player overlay
- Murattal: Transparent AppBar with backdrop blur
- Murattal: Surah playlist bottom sheet with full 114 Surah list
- Murattal: Auto-play disabled on screen open, enabled on navigation
- Murattal: Shuffle mode for random Surah playback
- Murattal: Photographer attribution per Unsplash guidelines
- Dashboard: Auto-scroll prayer schedule to next active prayer
- Fix: setState lifecycle errors on Reading & Murattal screens
- Setup: flutter_dotenv, cached_network_image, url_launcher deps
2026-03-13 15:42:17 +07:00

229 lines
11 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script type="text/javascript" nonce="8f27cbf2996843058862961733f" src="//local.adguard.org?ts=1772749416438&amp;type=content-script&amp;dmn=contribution.usercontent.google.com&amp;url=https%3A%2F%2Fcontribution.usercontent.google.com%2Fdownload%3Fc%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzc1NzczOTk0M2NjMTQ1Y2I4MTBjMDNhM2E3YWM3YzRkEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%26filename%3D%26opi%3D89354086&amp;app=com.google.Chrome&amp;css=3&amp;js=1&amp;rel=1&amp;rji=1&amp;sbe=1"></script><script type="text/javascript" nonce="8f27cbf2996843058862961733f" src="//local.adguard.org?ts=1772749416438&amp;name=AdGuard%20Extra&amp;type=user-script"></script><script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#70df20",
"sage": "#728764",
"cream": "#f2f4f0",
"background-light": "#f7f8f6",
"background-dark": "#182111",
},
fontFamily: {
"display": ["Plus Jakarta Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "0.5rem", "lg": "1rem", "xl": "1.5rem", "full": "9999px"},
},
},
}
</script>
<title>Settings - Deen App</title>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 min-h-screen">
<!-- Header -->
<header class="sticky top-0 z-50 bg-background-light/80 backdrop-blur-md border-b border-cream dark:border-sage/20 px-4 py-4">
<div class="max-w-md mx-auto flex items-center gap-4">
<button class="flex items-center justify-center size-10 rounded-full hover:bg-cream transition-colors">
<span class="material-symbols-outlined">arrow_back</span>
</button>
<h1 class="text-xl font-bold tracking-tight">Settings</h1>
</div>
</header>
<main class="max-w-md mx-auto pb-32">
<!-- Section: Notifications -->
<section class="mt-6">
<h2 class="px-6 mb-2 text-xs font-bold uppercase tracking-wider text-sage">Notifications</h2>
<div class="bg-white dark:bg-slate-900/50 mx-4 rounded-xl overflow-hidden shadow-sm border border-cream dark:border-sage/10">
<!-- Adhan Times -->
<div class="divide-y divide-cream dark:divide-sage/10">
<div class="flex items-center justify-between p-4">
<div>
<p class="font-medium">Fajr Adhan</p>
<p class="text-sm text-sage">Notification for dawn prayer</p>
</div>
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
<input checked="" class="invisible absolute" type="checkbox"/>
</label>
</div>
<div class="flex items-center justify-between p-4">
<div>
<p class="font-medium">Dhuhr Adhan</p>
<p class="text-sm text-sage">Notification for noon prayer</p>
</div>
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
<input checked="" class="invisible absolute" type="checkbox"/>
</label>
</div>
<div class="flex items-center justify-between p-4">
<div>
<p class="font-medium">Asr Adhan</p>
<p class="text-sm text-sage">Notification for afternoon prayer</p>
</div>
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
<input checked="" class="invisible absolute" type="checkbox"/>
</label>
</div>
<div class="flex items-center justify-between p-4">
<div>
<p class="font-medium">Maghrib &amp; Isha</p>
<p class="text-sm text-sage">Evening and Night prayer alerts</p>
</div>
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
<input checked="" class="invisible absolute" type="checkbox"/>
</label>
</div>
<!-- Additional Reminders -->
<div class="flex items-center justify-between p-4">
<div>
<p class="font-medium">Iqamah Countdown</p>
<p class="text-sm text-sage">Time remaining until congregational prayer</p>
</div>
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
<input class="invisible absolute" type="checkbox"/>
</label>
</div>
</div>
</div>
</section>
<!-- Section: Display Settings -->
<section class="mt-8">
<h2 class="px-6 mb-2 text-xs font-bold uppercase tracking-wider text-sage">Display Settings</h2>
<div class="bg-white dark:bg-slate-900/50 mx-4 rounded-xl overflow-hidden shadow-sm border border-cream dark:border-sage/10">
<div class="divide-y divide-cream dark:divide-sage/10">
<div class="flex items-center justify-between p-4">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-sage">play_circle</span>
<p class="font-medium">Murattal Player</p>
</div>
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
<input checked="" class="invisible absolute" type="checkbox"/>
</label>
</div>
<div class="flex items-center justify-between p-4">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-sage">translate</span>
<p class="font-medium">Show Translation</p>
</div>
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
<input checked="" class="invisible absolute" type="checkbox"/>
</label>
</div>
<div class="flex flex-col p-4 gap-3">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-sage">format_size</span>
<p class="font-medium">Arabic Font Size</p>
</div>
<input class="w-full h-2 bg-cream rounded-lg appearance-none cursor-pointer accent-primary" max="42" min="16" type="range" value="24"/>
<div class="flex justify-between text-xs text-sage">
<span>Small</span>
<span>Medium</span>
<span>Large</span>
</div>
</div>
<div class="flex items-center justify-between p-4">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-sage">dark_mode</span>
<p class="font-medium">Dark Mode</p>
</div>
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
<input class="invisible absolute" type="checkbox"/>
</label>
</div><button class="w-full flex items-center justify-between p-4 text-left hover:bg-cream/30 transition-colors">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-sage">language</span>
<p class="font-medium">App Language</p>
</div>
<div class="flex items-center gap-2">
<p class="text-sm text-sage">Bahasa Indonesia</p>
<span class="material-symbols-outlined text-sage text-lg">chevron_right</span>
</div>
</button></div>
</div>
</section>
<!-- Section: Daily Checklist -->
<section class="mt-8">
<h2 class="px-6 mb-2 text-xs font-bold uppercase tracking-wider text-sage">Daily Checklist</h2>
<div class="bg-white dark:bg-slate-900/50 mx-4 rounded-xl overflow-hidden shadow-sm border border-cream dark:border-sage/10">
<div class="divide-y divide-cream dark:divide-sage/10">
<button class="w-full flex items-center justify-between p-4 text-left hover:bg-cream/30 transition-colors">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-sage">edit_calendar</span>
<p class="font-medium">Customize Tasks</p>
</div>
<span class="material-symbols-outlined text-sage">chevron_right</span>
</button>
<button class="w-full flex items-center justify-between p-4 text-left hover:bg-cream/30 transition-colors text-red-500">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined">restart_alt</span>
<p class="font-medium">Reset Checklist Progress</p>
</div>
</button>
</div>
</div>
</section>
<!-- Section: App Info -->
<section class="mt-8">
<h2 class="px-6 mb-2 text-xs font-bold uppercase tracking-wider text-sage">App Info</h2>
<div class="bg-white dark:bg-slate-900/50 mx-4 rounded-xl overflow-hidden shadow-sm border border-cream dark:border-sage/10">
<div class="divide-y divide-cream dark:divide-sage/10">
<button class="w-full flex items-center justify-between p-4 text-left hover:bg-cream/30 transition-colors">
<p class="font-medium">About Deen App</p>
<span class="material-symbols-outlined text-sage">chevron_right</span>
</button>
<div class="flex items-center justify-between p-4">
<p class="font-medium">Version</p>
<p class="text-sm text-sage">2.4.0 (Build 102)</p>
</div>
<button class="w-full flex items-center justify-between p-4 text-left hover:bg-cream/30 transition-colors">
<p class="font-medium">Privacy Policy</p>
<span class="material-symbols-outlined text-sage">open_in_new</span>
</button>
</div>
</div>
</section>
</main>
<!-- Bottom Navigation Bar -->
<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-cream px-4 pb-6 pt-2 z-50">
<div class="max-w-md mx-auto flex justify-between items-center">
<a class="flex flex-col items-center gap-1 text-sage opacity-60" href="#">
<span class="material-symbols-outlined">home</span>
<p class="text-[10px] font-medium uppercase tracking-tighter">Home</p>
</a>
<a class="flex flex-col items-center gap-1 text-sage opacity-60" href="#">
<span class="material-symbols-outlined">menu_book</span>
<p class="text-[10px] font-medium uppercase tracking-tighter">Quran</p>
</a>
<a class="flex flex-col items-center gap-1 text-sage opacity-60" href="#">
<span class="material-symbols-outlined">folded_hands</span>
<p class="text-[10px] font-medium uppercase tracking-tighter">Dua</p>
</a>
<a class="flex flex-col items-center gap-1 text-primary" href="#">
<span class="material-symbols-outlined font-bold" style="font-variation-settings: 'FILL' 1">settings</span>
<p class="text-[10px] font-bold uppercase tracking-tighter">Settings</p>
</a>
</div>
</nav>
</body></html>
Reference in New Issue View Git Blame Copy Permalink