dwindown/jamshalat-diary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
jamshalat-diary/stitch/checklist_active_nav/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

188 lines
9.9 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Daily Worship Checklist</title>
<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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sX2ZjMzMyOWVjMjg1MjRkMDlhZTViYzQ0ZDg0NDE3ZDMzEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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",
"background-light": "#f7f8f6",
"background-dark": "#182111",
},
fontFamily: {
"display": ["Plus Jakarta Sans"]
},
borderRadius: {"DEFAULT": "0.5rem", "lg": "1rem", "xl": "1.5rem", "full": "9999px"},
},
},
}
</script>
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
.custom-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen">
<div class="max-w-md mx-auto min-h-screen flex flex-col bg-white dark:bg-zinc-900 shadow-xl overflow-hidden">
<!-- Header -->
<header class="pt-8 px-6 pb-4">
<div class="flex justify-between items-center mb-6">
<div>
<h1 class="text-2xl font-bold tracking-tight">Daily Worship</h1>
<p class="text-slate-500 dark:text-slate-400 text-sm">Tuesday, 24 Oct</p>
</div>
<div class="size-10 rounded-full bg-primary/20 flex items-center justify-center text-primary">
<span class="material-symbols-outlined">calendar_today</span>
</div>
</div>
<!-- Progress Card -->
<div class="bg-slate-900 dark:bg-zinc-800 rounded-xl p-5 text-white shadow-lg relative overflow-hidden">
<div class="absolute top-0 right-0 p-4 opacity-10">
<span class="material-symbols-outlined text-6xl">auto_awesome</span>
</div>
<div class="relative z-10">
<div class="flex justify-between items-end mb-4">
<div>
<p class="text-slate-400 text-xs uppercase tracking-wider font-semibold mb-1">Today's Goal</p>
<h2 class="text-3xl font-bold">66% <span class="text-sm font-normal text-slate-400">Complete</span></h2>
</div>
<div class="text-right">
<p class="text-primary font-bold text-sm">4 / 6 Tasks</p>
</div>
</div>
<div class="w-full bg-white/10 h-3 rounded-full overflow-hidden">
<div class="bg-primary h-full rounded-full" style="width: 66%"></div>
</div>
<p class="mt-4 text-xs text-slate-300">Almost there! Two more tasks to finish your daily routine.</p>
</div>
</div>
</header>
<!-- Checklist Section -->
<main class="flex-1 px-6 py-4 space-y-4 overflow-y-auto">
<h3 class="text-sm font-bold text-slate-400 uppercase tracking-widest px-1">Religious Tasks</h3>
<!-- Task Item 1: Checked -->
<div class="flex items-center gap-4 bg-slate-50 dark:bg-zinc-800/50 p-4 rounded-xl border border-slate-100 dark:border-zinc-800 transition-all hover:border-primary/50">
<div class="size-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center shrink-0">
<span class="material-symbols-outlined">mosque</span>
</div>
<div class="flex-1 min-w-0">
<h4 class="font-semibold text-slate-800 dark:text-slate-100 truncate">Shalat 5 Waktu</h4>
<p class="text-xs text-slate-500">Compulsory prayers</p>
</div>
<div class="shrink-0">
<input checked="" class="custom-checkbox size-6 rounded-md border-slate-300 text-primary focus:ring-primary focus:ring-offset-0 bg-white" type="checkbox"/>
</div>
</div>
<!-- Task Item 2: Checked -->
<div class="flex items-center gap-4 bg-slate-50 dark:bg-zinc-800/50 p-4 rounded-xl border border-slate-100 dark:border-zinc-800 transition-all hover:border-primary/50">
<div class="size-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center shrink-0">
<span class="material-symbols-outlined">menu_book</span>
</div>
<div class="flex-1 min-w-0">
<h4 class="font-semibold text-slate-800 dark:text-slate-100 truncate">Baca Al-Quran</h4>
<p class="text-xs text-slate-500">Min. 2 pages per day</p>
</div>
<div class="shrink-0">
<input checked="" class="custom-checkbox size-6 rounded-md border-slate-300 text-primary focus:ring-primary focus:ring-offset-0 bg-white" type="checkbox"/>
</div>
</div>
<!-- Task Item 3: Unchecked -->
<div class="flex items-center gap-4 bg-white dark:bg-zinc-900 p-4 rounded-xl border border-slate-100 dark:border-zinc-800 transition-all hover:border-primary/50">
<div class="size-12 rounded-lg bg-slate-100 dark:bg-zinc-800 text-slate-500 flex items-center justify-center shrink-0">
<span class="material-symbols-outlined">nights_stay</span>
</div>
<div class="flex-1 min-w-0">
<h4 class="font-semibold text-slate-800 dark:text-slate-100 truncate">Tahajjud</h4>
<p class="text-xs text-slate-500">Night prayer</p>
</div>
<div class="shrink-0">
<input class="custom-checkbox size-6 rounded-md border-slate-300 text-primary focus:ring-primary focus:ring-offset-0 bg-white" type="checkbox"/>
</div>
</div>
<!-- Task Item 4: Checked -->
<div class="flex items-center gap-4 bg-slate-50 dark:bg-zinc-800/50 p-4 rounded-xl border border-slate-100 dark:border-zinc-800 transition-all hover:border-primary/50">
<div class="size-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center shrink-0">
<span class="material-symbols-outlined">wb_sunny</span>
</div>
<div class="flex-1 min-w-0">
<h4 class="font-semibold text-slate-800 dark:text-slate-100 truncate">Dhuha</h4>
<p class="text-xs text-slate-500">Morning prayer</p>
</div>
<div class="shrink-0">
<input checked="" class="custom-checkbox size-6 rounded-md border-slate-300 text-primary focus:ring-primary focus:ring-offset-0 bg-white" type="checkbox"/>
</div>
</div>
<!-- Task Item 5: Checked -->
<div class="flex items-center gap-4 bg-slate-50 dark:bg-zinc-800/50 p-4 rounded-xl border border-slate-100 dark:border-zinc-800 transition-all hover:border-primary/50">
<div class="size-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center shrink-0">
<span class="material-symbols-outlined">volunteer_activism</span>
</div>
<div class="flex-1 min-w-0">
<h4 class="font-semibold text-slate-800 dark:text-slate-100 truncate">Sedekah</h4>
<p class="text-xs text-slate-500">Daily charity</p>
</div>
<div class="shrink-0">
<input checked="" class="custom-checkbox size-6 rounded-md border-slate-300 text-primary focus:ring-primary focus:ring-offset-0 bg-white" type="checkbox"/>
</div>
</div>
<!-- Task Item 6: Unchecked -->
<div class="flex items-center gap-4 bg-white dark:bg-zinc-900 p-4 rounded-xl border border-slate-100 dark:border-zinc-800 transition-all hover:border-primary/50">
<div class="size-12 rounded-lg bg-slate-100 dark:bg-zinc-800 text-slate-500 flex items-center justify-center shrink-0">
<span class="material-symbols-outlined">reorder</span>
</div>
<div class="flex-1 min-w-0">
<h4 class="font-semibold text-slate-800 dark:text-slate-100 truncate">Rawatib</h4>
<p class="text-xs text-slate-500">Sunnah prayers</p>
</div>
<div class="shrink-0">
<input class="custom-checkbox size-6 rounded-md border-slate-300 text-primary focus:ring-primary focus:ring-offset-0 bg-white" type="checkbox"/>
</div>
</div>
</main>
<!-- Bottom Navigation Bar -->
<nav class="flex gap-2 border-t border-slate-100 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-4 pb-6 pt-2">
<a class="flex flex-1 flex-col items-center justify-end gap-1 text-slate-400 dark:text-slate-500 hover:text-primary transition-colors" href="#">
<div class="flex h-8 items-center justify-center">
<span class="material-symbols-outlined">home</span>
</div>
<p class="text-[10px] font-medium leading-normal tracking-wider">HOME</p>
</a>
<a class="flex flex-1 flex-col items-center justify-end gap-1 text-primary" href="#">
<div class="flex h-8 items-center justify-center">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1">check_circle</span>
</div>
<p class="text-[10px] font-bold leading-normal tracking-wider">WORSHIP</p>
</a>
<a class="flex flex-1 flex-col items-center justify-end gap-1 text-slate-400 dark:text-slate-500 hover:text-primary transition-colors" href="#">
<div class="flex h-8 items-center justify-center">
<span class="material-symbols-outlined">group</span>
</div>
<p class="text-[10px] font-medium leading-normal tracking-wider">COMMUNITY</p>
</a>
<a class="flex flex-1 flex-col items-center justify-end gap-1 text-slate-400 dark:text-slate-500 hover:text-primary transition-colors" href="#">
<div class="flex h-8 items-center justify-center">
<span class="material-symbols-outlined">account_circle</span>
</div>
<p class="text-[10px] font-medium leading-normal tracking-wider">PROFILE</p>
</a>
</nav>
</div>
</body></html>
Reference in New Issue View Git Blame Copy Permalink