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

177 lines
9.6 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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzdjNmI0YmVmY2Y5NjRmMzY5ODdmNmY4ZTQ5OGRiMTQwEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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@300;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>
@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="max-w-md mx-auto min-h-screen flex flex-col bg-white dark:bg-slate-900 shadow-xl relative overflow-hidden">
<!-- Header -->
<header class="sticky top-0 z-10 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-primary/10">
<div class="flex items-center p-4 justify-between">
<div class="text-slate-900 dark:text-slate-100 flex size-10 items-center justify-center rounded-full hover:bg-primary/10 transition-colors">
<span class="material-symbols-outlined">arrow_back</span>
</div>
<h2 class="text-lg font-bold leading-tight tracking-tight flex-1 text-center">Dzikir Pagi &amp; Petang</h2>
<div class="flex w-10 items-center justify-end">
<button class="flex size-10 items-center justify-center rounded-full hover:bg-primary/10 transition-colors">
<span class="material-symbols-outlined">info</span>
</button>
</div>
</div>
<!-- Tabbed Interface -->
<div class="px-4">
<div class="flex border-b border-primary/5">
<a class="flex flex-col items-center justify-center border-b-2 border-primary text-primary pb-3 pt-4 flex-1" href="#">
<p class="text-sm font-bold tracking-wide">Pagi</p>
</a>
<a class="flex flex-col items-center justify-center border-b-2 border-transparent text-slate-400 dark:text-slate-500 pb-3 pt-4 flex-1" href="#">
<p class="text-sm font-bold tracking-wide">Petang</p>
</a>
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto pb-24">
<!-- Hero Title -->
<div class="text-center py-8 px-6 bg-gradient-to-b from-primary/5 to-transparent">
<h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-2">Dzikir Pagi</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed max-w-[280px] mx-auto">
Dibaca setelah shalat Shubuh hingga terbit matahari
</p>
</div>
<!-- Dhikr List -->
<div class="px-4 space-y-6">
<!-- Card 1 -->
<div class="bg-background-light dark:bg-slate-800/50 rounded-xl p-6 border border-primary/5 shadow-sm">
<div class="flex justify-between items-start mb-4">
<span class="bg-primary/20 text-primary text-[10px] font-bold uppercase tracking-widest px-2 py-1 rounded">1 Kali</span>
<span class="text-slate-300 dark:text-slate-600 font-bold">01</span>
</div>
<div class="arabic-text text-3xl leading-[1.8] text-right mb-6 text-slate-800 dark:text-slate-100">
أَعُوذُ بِاللَّهِ مِنَ الشَّيْطَانِ الرَّجِيمِ. بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ. اللّهُ لاَ إِلَهَ إِلاَّ هُوَ الْحَيُّ الْقَيُّومُ
</div>
<div class="space-y-3">
<p class="text-xs italic text-primary font-medium leading-relaxed">
Allahu laa ilaha illa huwal hayyul qayyum...
</p>
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
"Allah, tidak ada Tuhan (yang berhak disembah) melainkan Dia Yang Hidup kekal lagi terus menerus mengurus (makhluk-Nya)..."
</p>
</div>
<!-- Counter Button -->
<button class="w-full mt-6 py-4 bg-primary text-slate-900 font-bold rounded-xl flex items-center justify-center gap-2 active:scale-95 transition-transform">
<span class="material-symbols-outlined">add</span>
<span>0 / 1</span>
</button>
</div>
<!-- Card 2 -->
<div class="bg-background-light dark:bg-slate-800/50 rounded-xl p-6 border border-primary/5 shadow-sm">
<div class="flex justify-between items-start mb-4">
<span class="bg-primary/20 text-primary text-[10px] font-bold uppercase tracking-widest px-2 py-1 rounded">3 Kali</span>
<span class="text-slate-300 dark:text-slate-600 font-bold">02</span>
</div>
<div class="arabic-text text-3xl leading-[1.8] text-right mb-6 text-slate-800 dark:text-slate-100">
بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ. قُلْ هُوَ اللَّهُ أَحَدٌ. اللَّهُ الصَّمَدُ
</div>
<div class="space-y-3">
<p class="text-xs italic text-primary font-medium leading-relaxed">
Bismillahir rahmanir rahim. Qul huwallahu ahad...
</p>
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
"Katakanlah: 'Dialah Allah, Yang Maha Esa. Allah adalah Tuhan yang bergantung kepada-Nya segala sesuatu'."
</p>
</div>
<!-- Counter Button -->
<button class="w-full mt-6 py-4 bg-primary/10 text-primary font-bold rounded-xl flex items-center justify-center gap-2 border-2 border-primary/20 active:scale-95 transition-transform">
<span class="material-symbols-outlined">touch_app</span>
<span>1 / 3</span>
</button>
</div>
<!-- Card 3 -->
<div class="bg-background-light dark:bg-slate-800/50 rounded-xl p-6 border border-primary/5 shadow-sm">
<div class="flex justify-between items-start mb-4">
<span class="bg-primary/20 text-primary text-[10px] font-bold uppercase tracking-widest px-2 py-1 rounded">100 Kali</span>
<span class="text-slate-300 dark:text-slate-600 font-bold">03</span>
</div>
<div class="arabic-text text-3xl leading-[1.8] text-right mb-6 text-slate-800 dark:text-slate-100">
سُبْحَانَ اللهِ وَبِحَمْدِهِ
</div>
<div class="space-y-3">
<p class="text-xs italic text-primary font-medium leading-relaxed">
Subhanallahi wa bihamdihi
</p>
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
"Maha Suci Allah dan segala puji bagi-Nya."
</p>
</div>
<!-- Counter Button -->
<button class="w-full mt-6 py-4 bg-primary/10 text-primary font-bold rounded-xl flex items-center justify-center gap-2 border-2 border-primary/20 active:scale-95 transition-transform">
<span class="material-symbols-outlined">touch_app</span>
<span>42 / 100</span>
</button>
</div>
</div>
</main>
<!-- Bottom Navigation Bar -->
<nav class="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-md bg-white dark:bg-slate-900 border-t border-primary/10 pb-6 pt-2 px-4 flex justify-around">
<a class="flex flex-col items-center gap-1 text-slate-400 dark:text-slate-500 hover:text-primary transition-colors" href="#">
<span class="material-symbols-outlined">home</span>
<p class="text-[10px] font-bold uppercase tracking-tighter">Home</p>
</a>
<a class="flex flex-col items-center gap-1 text-primary" href="#">
<span class="material-symbols-outlined fill-1">brightness_medium</span>
<p class="text-[10px] font-bold uppercase tracking-tighter">Dzikir</p>
</a>
<a class="flex flex-col items-center gap-1 text-slate-400 dark:text-slate-500 hover:text-primary transition-colors" href="#">
<span class="material-symbols-outlined">menu_book</span>
<p class="text-[10px] font-bold uppercase tracking-tighter">Quran</p>
</a>
<a class="flex flex-col items-center gap-1 text-slate-400 dark:text-slate-500 hover:text-primary transition-colors" href="#">
<span class="material-symbols-outlined">settings</span>
<p class="text-[10px] font-bold uppercase tracking-tighter">Setting</p>
</a>
</nav>
<!-- Floating Action for Completion (Example) -->
<div class="fixed bottom-24 right-4 md:right-[calc(50%-200px)]">
<button class="size-14 bg-primary text-slate-900 rounded-full shadow-lg shadow-primary/20 flex items-center justify-center active:scale-90 transition-transform">
<span class="material-symbols-outlined">check_circle</span>
</button>
</div>
</div>
</body></html>
Reference in New Issue View Git Blame Copy Permalink