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

219 lines
11 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="id"><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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzQwM2UzN2ZmMWQxZjQ5NjE4ODNkMDM5MmEyNmQzNDA2EgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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,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",
"sage": {
"50": "#f4f7f1",
"100": "#e6ede1",
"200": "#d1dec8",
"300": "#b1c5a3",
"400": "#8ea87b",
"500": "#728d5e",
"600": "#5a7149",
}
},
fontFamily: {
"display": ["Plus Jakarta Sans"],
"arabic": ["Amiri", "serif"]
},
borderRadius: {"DEFAULT": "0.5rem", "lg": "1rem", "xl": "1.5rem", "full": "9999px"},
},
},
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');
.arabic-text {
font-family: 'Amiri', serif;
direction: rtl;
}
</style>
<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 antialiased">
<!-- Main Container -->
<div class="relative flex h-screen flex-col overflow-hidden max-w-md mx-auto bg-white dark:bg-background-dark shadow-2xl">
<!-- Sticky Header -->
<header class="flex items-center justify-between px-4 py-4 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-sage-100 dark:border-sage-900 sticky top-0 z-10">
<button class="flex size-10 items-center justify-center rounded-full hover:bg-sage-50 dark:hover:bg-sage-900 transition-colors">
<span class="material-symbols-outlined text-slate-700 dark:text-slate-300">arrow_back</span>
</button>
<div class="flex flex-col items-center">
<h2 class="text-lg font-bold leading-tight">Al-Fatihah</h2>
<p class="text-[10px] font-medium text-sage-500 uppercase tracking-widest">7 Ayat • Mekkah</p>
</div>
<button class="flex size-10 items-center justify-center rounded-full hover:bg-sage-50 dark:hover:bg-sage-900 transition-colors">
<span class="material-symbols-outlined text-slate-700 dark:text-slate-300">settings</span>
</button>
</header>
<!-- Surah Progress & Navigation -->
<div class="bg-white dark:bg-background-dark px-4 py-4 space-y-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-sm font-semibold text-primary">Ayat 1</span>
<span class="text-xs text-slate-400 dark:text-slate-500">dari 7</span>
</div>
<div class="flex gap-1">
<button class="p-1 rounded-lg bg-sage-50 dark:bg-sage-900 text-sage-600 dark:text-sage-400">
<span class="material-symbols-outlined text-lg">chevron_left</span>
</button>
<button class="p-1 rounded-lg bg-primary/10 text-primary">
<span class="material-symbols-outlined text-lg">chevron_right</span>
</button>
</div>
</div>
<div class="h-1.5 w-full bg-sage-100 dark:bg-sage-900 rounded-full overflow-hidden">
<div class="h-full bg-primary rounded-full transition-all duration-500" style="width: 14.2%"></div>
</div>
</div>
<!-- Content Area -->
<main class="flex-1 overflow-y-auto px-4 py-6 space-y-10 custom-scrollbar">
<!-- Bismillah Section -->
<div class="text-center py-4">
<h1 class="arabic-text text-3xl font-bold mb-4 text-slate-800 dark:text-slate-100">بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ</h1>
<p class="text-sm italic text-sage-500 dark:text-sage-400">"Dengan nama Allah Yang Maha Pengasih, Maha Penyayang."</p>
</div>
<!-- Ayat Card 1 -->
<div class="space-y-6">
<div class="flex justify-between items-start gap-4">
<div class="flex flex-col items-center gap-2">
<div class="size-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold text-xs border border-primary/30">
1
</div>
<button class="text-sage-400 hover:text-primary transition-colors">
<span class="material-symbols-outlined text-xl">play_circle</span>
</button>
<button class="text-sage-400 hover:text-primary transition-colors">
<span class="material-symbols-outlined text-xl">bookmark</span>
</button>
</div>
<div class="flex-1 text-right">
<p class="arabic-text text-4xl leading-[1.8] text-slate-800 dark:text-slate-100">ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَـٰلَمِينَ</p>
</div>
</div>
<div class="pl-12">
<p class="text-base text-slate-700 dark:text-slate-300 leading-relaxed">Segala puji bagi Allah, Tuhan semesta alam.</p>
</div>
</div>
<!-- Separator -->
<div class="flex justify-center py-2 opacity-20">
<div class="h-px w-24 bg-sage-300"></div>
<div class="mx-4 text-sage-400">✦</div>
<div class="h-px w-24 bg-sage-300"></div>
</div>
<!-- Ayat Card 2 -->
<div class="space-y-6">
<div class="flex justify-between items-start gap-4">
<div class="flex flex-col items-center gap-2">
<div class="size-8 rounded-full bg-sage-100 dark:bg-sage-900 flex items-center justify-center text-sage-600 dark:text-sage-400 font-bold text-xs">
2
</div>
<button class="text-sage-400">
<span class="material-symbols-outlined text-xl">play_circle</span>
</button>
</div>
<div class="flex-1 text-right">
<p class="arabic-text text-4xl leading-[1.8] text-slate-800 dark:text-slate-100">ٱلرَّحْمَـٰنِ ٱلرَّحِيمِ</p>
</div>
</div>
<div class="pl-12">
<p class="text-base text-slate-700 dark:text-slate-300 leading-relaxed">Maha Pengasih, Maha Penyayang.</p>
</div>
</div>
<!-- Ayat Card 3 -->
<div class="space-y-6">
<div class="flex justify-between items-start gap-4">
<div class="flex flex-col items-center gap-2">
<div class="size-8 rounded-full bg-sage-100 dark:bg-sage-900 flex items-center justify-center text-sage-600 dark:text-sage-400 font-bold text-xs">
3
</div>
<button class="text-sage-400">
<span class="material-symbols-outlined text-xl">play_circle</span>
</button>
</div>
<div class="flex-1 text-right">
<p class="arabic-text text-4xl leading-[1.8] text-slate-800 dark:text-slate-100">مَـٰلِكِ يَوْمِ ٱلدِّينِ</p>
</div>
</div>
<div class="pl-12">
<p class="text-base text-slate-700 dark:text-slate-300 leading-relaxed">Pemilik hari pembalasan.</p>
</div>
</div>
<!-- Padding for bottom nav -->
<div class="h-24"></div>
</main>
<!-- Bottom Navigation Bar -->
<nav class="absolute bottom-0 left-0 right-0 bg-white/95 dark:bg-background-dark/95 backdrop-blur-lg border-t border-sage-100 dark:border-sage-900 px-6 pb-6 pt-3 flex justify-between items-center z-20"><a class="flex flex-col items-center gap-1 text-sage-400 dark:text-sage-500 hover:text-primary transition-colors" href="#">
<span class="material-symbols-outlined">home</span>
<span class="text-[10px] font-semibold">Home</span>
</a>
<a class="flex flex-col items-center gap-1 text-primary transition-colors" href="#">
<div class="relative">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1">book_2</span>
<div class="absolute -top-1 -right-1 size-2 bg-primary rounded-full border-2 border-white dark:border-background-dark"></div>
</div>
<span class="text-[10px] font-bold">Quran</span>
</a>
<div class="relative -top-8">
<button class="size-14 rounded-full bg-primary text-white shadow-lg shadow-primary/30 flex items-center justify-center border-4 border-white dark:border-background-dark hover:scale-105 transition-transform">
<span class="material-symbols-outlined text-3xl">add</span>
</button>
</div>
<a class="flex flex-col items-center gap-1 text-sage-400 dark:text-sage-500 hover:text-primary transition-colors" href="#">
<span class="material-symbols-outlined">description</span>
<span class="text-[10px] font-semibold">Diary</span>
</a>
<a class="flex flex-col items-center gap-1 text-sage-400 dark:text-sage-500 hover:text-primary transition-colors" href="#">
<span class="material-symbols-outlined">person</span>
<span class="text-[10px] font-semibold">Profile</span>
</a></nav>
<!-- Audio Player Overlay (Subtle) -->
<div class="absolute bottom-24 left-4 right-4 bg-sage-600 dark:bg-sage-700/90 backdrop-blur-md rounded-2xl p-3 flex items-center gap-4 text-white shadow-2xl shadow-primary/20 border border-white/10">
<div class="relative flex-shrink-0">
<div class="size-12 rounded-xl bg-primary/20 flex items-center justify-center border border-white/20">
<span class="material-symbols-outlined text-primary text-2xl">bar_chart</span>
</div>
<div class="absolute -bottom-1 -right-1 size-4 bg-primary rounded-full border-2 border-sage-600 flex items-center justify-center">
<div class="size-1.5 bg-white rounded-full animate-pulse"></div>
</div>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-xs font-bold truncate leading-none mb-1">Mishary Rashid Alafasy</h4>
<div class="flex items-center gap-2">
<p class="text-[10px] text-sage-100/80 truncate font-medium">Playing Al-Fatihah</p>
<span class="text-[10px] opacity-40">•</span>
<span class="text-[10px] text-primary font-bold">1:24</span>
</div>
</div>
<div class="flex items-center gap-1">
<button class="size-8 flex items-center justify-center hover:bg-white/10 rounded-full transition-colors">
<span class="material-symbols-outlined text-xl">skip_previous</span>
</button>
<button class="size-10 flex items-center justify-center bg-white text-sage-600 rounded-full shadow-lg hover:scale-105 transition-transform">
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1">pause</span>
</button>
<button class="size-8 flex items-center justify-center hover:bg-white/10 rounded-full transition-colors">
<span class="material-symbols-outlined text-xl">skip_next</span>
</button>
</div>
</div>
</div>
</body></html>
Reference in New Issue View Git Blame Copy Permalink