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

223 lines
11 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"/>
<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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzk4Zjg2MzFhZTk1MDRhY2E4Mjc3NTkyODg4YzllZDk2EgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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;800&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"/>
<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>
<title>Islamic Diary 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 flex flex-col">
<!-- Header Section -->
<header class="flex items-center justify-between px-6 py-4 bg-background-light dark:bg-background-dark sticky top-0 z-10">
<div class="flex items-center gap-3">
<div class="size-10 rounded-full overflow-hidden bg-primary/20 flex items-center justify-center border-2 border-primary">
<img class="w-full h-full object-cover" data-alt="Profile photo of Akhmad wearing a peci" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAykpLfEr0zwaMoF8rqbZB7EdppdMxnLkjcS6hYpOYXq12zcZ9St-R15-R98xRikYniJwWEeIHD-K3n_Mp5kNPtUS9HR2qFgH9mkx2ykGbIWHNrCfnmXGcZ4psVlTETXtoni3OzkK-5cOTJCubiPM7qmLXPlG8cnIr8snpC8SRQr6ePNmjoHyMKES9alZbF9T4-Cr_YK6VViC62PB4Vpkb8b-JRo9QGP2cjgskP6G61zeLPZCisvANh-6k_Vj-nkZnV3q4OJ9sQ-c6x"/>
</div>
<div>
<p class="text-xs font-medium text-slate-500 dark:text-slate-400">Welcome back,</p>
<h1 class="text-lg font-bold leading-tight">Assalamu'alaikum, Akhmad</h1>
</div>
</div>
<button class="size-10 flex items-center justify-center rounded-full bg-white dark:bg-slate-800 shadow-sm text-slate-600 dark:text-slate-300">
<span class="material-symbols-outlined">notifications</span>
</button>
</header>
<main class="flex-1 overflow-y-auto pb-24">
<!-- Main Countdown Card -->
<div class="px-6 py-4">
<div class="relative overflow-hidden rounded-xl bg-primary p-6 text-slate-900 shadow-lg shadow-primary/20">
<div class="absolute -right-8 -top-8 size-32 bg-white/20 rounded-full blur-2xl"></div>
<div class="absolute -left-4 -bottom-4 size-24 bg-black/5 rounded-full blur-xl"></div>
<div class="relative z-10">
<div class="flex items-center gap-2 mb-2">
<span class="material-symbols-outlined text-black/60">schedule</span>
<p class="font-semibold text-black/70 uppercase tracking-wider text-xs">Next Prayer</p>
</div>
<h2 class="text-3xl font-extrabold mb-1">Maghrib at 17:55</h2>
<p class="text-lg font-medium opacity-80 mb-6">Countdown: 01:42:10</p>
<div class="flex gap-2">
<button class="flex-1 bg-black text-white font-bold py-3 rounded-lg flex items-center justify-center gap-2 text-sm">
<span class="material-symbols-outlined text-sm">explore</span>
View Qibla
</button>
<button class="bg-white/30 backdrop-blur-md p-3 rounded-lg flex items-center justify-center">
<span class="material-symbols-outlined">volume_up</span>
</button>
</div>
</div>
</div>
</div>
<!-- Horizontal Prayer Scroll -->
<div class="py-2">
<div class="flex items-center justify-between px-6 mb-3">
<h3 class="font-bold text-lg">Daily Prayer Times</h3>
<span class="text-primary text-xs font-bold uppercase tracking-widest">Today</span>
</div>
<div class="flex overflow-x-auto gap-4 px-6 no-scrollbar pb-2">
<!-- Fajr -->
<div class="flex-shrink-0 w-28 bg-white dark:bg-slate-800 p-4 rounded-xl border border-primary/10 shadow-sm flex flex-col items-center gap-2">
<span class="material-symbols-outlined text-primary">wb_twilight</span>
<p class="text-sm font-bold">Fajr</p>
<p class="text-xs font-medium text-slate-500">04:32</p>
</div>
<!-- Dhuhr -->
<div class="flex-shrink-0 w-28 bg-white dark:bg-slate-800 p-4 rounded-xl border border-primary/10 shadow-sm flex flex-col items-center gap-2">
<span class="material-symbols-outlined text-primary">wb_sunny</span>
<p class="text-sm font-bold">Dhuhr</p>
<p class="text-xs font-medium text-slate-500">12:05</p>
</div>
<!-- Asr -->
<div class="flex-shrink-0 w-28 bg-white dark:bg-slate-800 p-4 rounded-xl border border-primary/10 shadow-sm flex flex-col items-center gap-2">
<span class="material-symbols-outlined text-primary">filter_drama</span>
<p class="text-sm font-bold">Asr</p>
<p class="text-xs font-medium text-slate-500">15:20</p>
</div>
<!-- Maghrib (Active) -->
<div class="flex-shrink-0 w-28 bg-primary/10 dark:bg-primary/20 p-4 rounded-xl border-2 border-primary shadow-sm flex flex-col items-center gap-2">
<span class="material-symbols-outlined text-primary">wb_twilight</span>
<p class="text-sm font-bold text-primary">Maghrib</p>
<p class="text-xs font-bold text-primary">17:55</p>
</div>
<!-- Isha -->
<div class="flex-shrink-0 w-28 bg-white dark:bg-slate-800 p-4 rounded-xl border border-primary/10 shadow-sm flex flex-col items-center gap-2">
<span class="material-symbols-outlined text-primary">dark_mode</span>
<p class="text-sm font-bold">Isha</p>
<p class="text-xs font-medium text-slate-500">19:10</p>
</div>
</div>
</div>
<!-- Today's Checklist Summary -->
<div class="px-6 py-4">
<div class="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm border border-primary/5">
<div class="flex items-center justify-between mb-6">
<div>
<h3 class="font-bold text-lg">Today's Checklist</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">7 dari 10 Ibadah selesai</p>
</div>
<div class="size-12 rounded-full border-4 border-slate-100 dark:border-slate-700 flex items-center justify-center relative">
<svg class="absolute inset-0 w-full h-full -rotate-90">
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125" stroke-dashoffset="37.5" stroke-width="4"></circle>
</svg>
<span class="text-xs font-bold">70%</span>
</div>
</div>
<div class="space-y-3">
<div class="flex items-center gap-3 p-3 rounded-lg bg-background-light dark:bg-background-dark/50">
<span class="material-symbols-outlined text-primary fill-1">check_circle</span>
<div class="flex-1">
<p class="text-sm font-bold">Sholat Fardhu</p>
<p class="text-xs text-slate-500">4 of 5 complete</p>
</div>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-background-light dark:bg-background-dark/50">
<span class="material-symbols-outlined text-primary fill-1">check_circle</span>
<div class="flex-1">
<p class="text-sm font-bold">Tilawah Quran</p>
<p class="text-xs text-slate-500">1 Juz targeted</p>
</div>
</div>
<button class="w-full py-3 text-primary font-bold text-sm bg-primary/10 rounded-lg">View Full Checklist</button>
</div>
</div>
</div>
<!-- Weekly Activity Mini Chart -->
<div class="px-6 py-2">
<h3 class="font-bold text-lg mb-3">Weekly Progress</h3>
<div class="bg-white dark:bg-slate-800 rounded-xl p-4 flex justify-between items-end h-24 gap-2 border border-primary/5">
<div class="flex flex-col items-center gap-2 w-full">
<div class="w-full bg-primary/20 rounded-full h-8 relative">
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[60%]"></div>
</div>
<span class="text-[10px] font-bold opacity-50">Mon</span>
</div>
<div class="flex flex-col items-center gap-2 w-full">
<div class="w-full bg-primary/20 rounded-full h-12 relative">
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[80%]"></div>
</div>
<span class="text-[10px] font-bold opacity-50">Tue</span>
</div>
<div class="flex flex-col items-center gap-2 w-full">
<div class="w-full bg-primary/20 rounded-full h-16 relative">
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[100%]"></div>
</div>
<span class="text-[10px] font-bold opacity-50">Wed</span>
</div>
<div class="flex flex-col items-center gap-2 w-full">
<div class="w-full bg-primary/20 rounded-full h-10 relative">
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[40%]"></div>
</div>
<span class="text-[10px] font-bold opacity-50">Thu</span>
</div>
<div class="flex flex-col items-center gap-2 w-full">
<div class="w-full bg-primary/20 rounded-full h-14 relative">
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[70%]"></div>
</div>
<span class="text-[10px] font-bold opacity-50">Fri</span>
</div>
<div class="flex flex-col items-center gap-2 w-full">
<div class="w-full bg-primary/20 rounded-full h-8 relative">
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[30%]"></div>
</div>
<span class="text-[10px] font-bold opacity-50">Sat</span>
</div>
<div class="flex flex-col items-center gap-2 w-full">
<div class="w-full bg-primary/20 rounded-full h-6 relative">
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[20%]"></div>
</div>
<span class="text-[10px] font-bold opacity-50">Sun</span>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation Bar -->
<nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-900 border-t border-slate-100 dark:border-slate-800 px-2 pb-6 pt-2">
<div class="flex justify-around items-center max-w-md mx-auto">
<a class="flex flex-col items-center gap-1 p-2 text-primary" href="#">
<span class="material-symbols-outlined fill-1">home</span>
<span class="text-[10px] font-bold">Home</span>
</a>
<a class="flex flex-col items-center gap-1 p-2 text-slate-400 dark:text-slate-500" href="#">
<span class="material-symbols-outlined">calendar_today</span>
<span class="text-[10px] font-medium">Calendar</span>
</a>
<a class="flex flex-col items-center gap-1 p-2 text-slate-400 dark:text-slate-500" href="#">
<span class="material-symbols-outlined">rule</span>
<span class="text-[10px] font-medium">Checklist</span>
</a>
<a class="flex flex-col items-center gap-1 p-2 text-slate-400 dark:text-slate-500" href="#">
<span class="material-symbols-outlined">bar_chart</span>
<span class="text-[10px] font-medium">Reports</span>
</a>
<a class="flex flex-col items-center gap-1 p-2 text-slate-400 dark:text-slate-500" href="#">
<span class="material-symbols-outlined">auto_fix_high</span>
<span class="text-[10px] font-medium">Tools</span>
</a>
</div>
</nav>
</body></html>
Reference in New Issue View Git Blame Copy Permalink