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

191 lines
12 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"/>
<title>Prayer Calendar - Imsakiyah</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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzI3MjRmMmZkODllMDQ0MzA4YjhlNjZlNjA3NTIyNjdlEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</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">
<div class="relative flex min-h-screen w-full flex-col max-w-md mx-auto bg-white dark:bg-background-dark shadow-xl">
<!-- Top Navigation Bar -->
<div class="flex items-center bg-white dark:bg-background-dark p-4 pb-2 justify-between sticky top-0 z-20 border-b border-slate-100 dark:border-slate-800">
<div class="text-slate-900 dark:text-slate-100 flex size-10 shrink-0 items-center justify-center rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 cursor-pointer">
<span class="material-symbols-outlined">arrow_back</span>
</div>
<h2 class="text-slate-900 dark:text-slate-100 text-lg font-bold leading-tight tracking-tight flex-1 text-center">Prayer Calendar</h2>
<div class="flex w-10 items-center justify-end">
<button class="flex items-center justify-center rounded-full size-10 bg-transparent text-slate-900 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800">
<span class="material-symbols-outlined">more_vert</span>
</button>
</div>
</div>
<!-- Month and Location Selectors -->
<div class="p-4 space-y-4">
<div class="flex gap-3 overflow-x-auto no-scrollbar py-2">
<button class="px-5 py-2 rounded-full bg-primary text-slate-900 font-semibold text-sm whitespace-nowrap">Ramadan 1445H</button>
<button class="px-5 py-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 font-medium text-sm whitespace-nowrap">Shawwal 1445H</button>
<button class="px-5 py-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 font-medium text-sm whitespace-nowrap">Dhul-Qi'dah</button>
</div>
<div class="flex items-center gap-3 bg-slate-50 dark:bg-slate-900 p-4 rounded-xl border border-slate-100 dark:border-slate-800">
<span class="material-symbols-outlined text-primary">location_on</span>
<div class="flex-1">
<p class="text-xs text-slate-500 dark:text-slate-400 font-medium">Your Location</p>
<p class="text-sm font-bold text-slate-900 dark:text-slate-100">Jakarta, Indonesia</p>
</div>
<span class="material-symbols-outlined text-slate-400 text-sm">expand_more</span>
</div>
</div>
<!-- Calendar Header -->
<div class="px-4 py-2 bg-primary/10 dark:bg-primary/5">
<div class="grid grid-cols-7 text-center text-[10px] font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">
<span>Day</span>
<span>Fajr</span>
<span>Sun</span>
<span>Dhuhr</span>
<span>Asr</span>
<span>Magh</span>
<span>Isha</span>
</div>
</div>
<!-- Prayer Times List -->
<div class="flex-1 overflow-y-auto px-4 py-2 space-y-2 no-scrollbar">
<!-- Day Item (Highlight Today) -->
<div class="grid grid-cols-7 items-center text-center p-3 rounded-xl bg-primary shadow-sm shadow-primary/20 ring-1 ring-primary">
<div class="flex flex-col items-center">
<span class="text-[10px] font-bold text-slate-800">MAR</span>
<span class="text-base font-extrabold text-slate-900 leading-tight">12</span>
</div>
<span class="text-xs font-bold text-slate-900">04:42</span>
<span class="text-xs font-medium text-slate-800">05:58</span>
<span class="text-xs font-bold text-slate-900">12:04</span>
<span class="text-xs font-medium text-slate-800">15:12</span>
<span class="text-xs font-bold text-slate-900">18:08</span>
<span class="text-xs font-medium text-slate-800">19:17</span>
</div>
<!-- Regular Day Item -->
<div class="grid grid-cols-7 items-center text-center p-3 rounded-xl bg-white dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800 hover:border-primary/50 transition-colors">
<div class="flex flex-col items-center">
<span class="text-[10px] font-bold text-slate-400">MAR</span>
<span class="text-base font-bold text-slate-900 dark:text-slate-100 leading-tight">13</span>
</div>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">04:42</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">05:58</span>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">12:04</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">15:11</span>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">18:07</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">19:16</span>
</div>
<div class="grid grid-cols-7 items-center text-center p-3 rounded-xl bg-white dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800">
<div class="flex flex-col items-center">
<span class="text-[10px] font-bold text-slate-400">MAR</span>
<span class="text-base font-bold text-slate-900 dark:text-slate-100 leading-tight">14</span>
</div>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">04:41</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">05:58</span>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">12:03</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">15:11</span>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">18:07</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">19:16</span>
</div>
<div class="grid grid-cols-7 items-center text-center p-3 rounded-xl bg-white dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800">
<div class="flex flex-col items-center">
<span class="text-[10px] font-bold text-slate-400">MAR</span>
<span class="text-base font-bold text-slate-900 dark:text-slate-100 leading-tight">15</span>
</div>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">04:41</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">05:58</span>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">12:03</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">15:10</span>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">18:06</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">19:15</span>
</div>
<div class="grid grid-cols-7 items-center text-center p-3 rounded-xl bg-white dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800">
<div class="flex flex-col items-center">
<span class="text-[10px] font-bold text-slate-400">MAR</span>
<span class="text-base font-bold text-slate-900 dark:text-slate-100 leading-tight">16</span>
</div>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">04:41</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">05:58</span>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">12:03</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">15:09</span>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">18:06</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">19:15</span>
</div>
<div class="grid grid-cols-7 items-center text-center p-3 rounded-xl bg-white dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800">
<div class="flex flex-col items-center">
<span class="text-[10px] font-bold text-slate-400">MAR</span>
<span class="text-base font-bold text-slate-900 dark:text-slate-100 leading-tight">17</span>
</div>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">04:41</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">05:57</span>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">12:02</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">15:08</span>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">18:05</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">19:14</span>
</div>
<div class="grid grid-cols-7 items-center text-center p-3 rounded-xl bg-white dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800">
<div class="flex flex-col items-center">
<span class="text-[10px] font-bold text-slate-400">MAR</span>
<span class="text-base font-bold text-slate-900 dark:text-slate-100 leading-tight">18</span>
</div>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">04:41</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">05:57</span>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">12:02</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">15:08</span>
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">18:05</span>
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">19:14</span>
</div>
</div>
<!-- Bottom Navigation Bar -->
<div class="flex gap-2 border-t border-slate-100 dark:border-slate-800 bg-white dark:bg-background-dark px-4 pb-6 pt-2 sticky bottom-0">
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-400 dark:text-slate-500" href="#">
<span class="material-symbols-outlined text-2xl">home</span>
<p class="text-[10px] font-medium leading-normal tracking-wide">Home</p>
</a>
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-primary" href="#">
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1">calendar_today</span>
<p class="text-[10px] font-bold leading-normal tracking-wide">Calendar</p>
</a>
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-400 dark:text-slate-500" href="#">
<span class="material-symbols-outlined text-2xl">explore</span>
<p class="text-[10px] font-medium leading-normal tracking-wide">Qibla</p>
</a>
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-400 dark:text-slate-500" href="#">
<span class="material-symbols-outlined text-2xl">person</span>
<p class="text-[10px] font-medium leading-normal tracking-wide">Profile</p>
</a>
</div>
</div>
</body></html>
Reference in New Issue View Git Blame Copy Permalink