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
This commit is contained in:
dwindown
182
stitch/laporan_active_nav/code.html
Normal file
182
stitch/laporan_active_nav/code.html
Normal file
@@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" 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&type=content-script&dmn=contribution.usercontent.google.com&url=https%3A%2F%2Fcontribution.usercontent.google.com%2Fdownload%3Fc%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sX2MxNWZiOWYwMzkwODQzODdhNGE3YjBlYjNkYTdjNmZjEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%26filename%3D%26opi%3D89354086&app=com.google.Chrome&css=3&js=1&rel=1&rji=1&sbe=1"></script><script type="text/javascript" nonce="8f27cbf2996843058862961733f" src="//local.adguard.org?ts=1772749416438&name=AdGuard%20Extra&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&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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; }
|
||||
</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 bg-white dark:bg-zinc-900 min-h-screen flex flex-col shadow-xl">
|
||||
<!-- Header -->
|
||||
<header class="flex items-center p-4 justify-between sticky top-0 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-md z-10">
|
||||
<button class="size-10 flex items-center justify-center rounded-full hover:bg-slate-100 dark:hover:bg-zinc-800 transition-colors">
|
||||
<span class="material-symbols-outlined text-slate-700 dark:text-slate-300">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="text-lg font-bold leading-tight tracking-tight flex-1 text-center">Worship Quality Report</h1>
|
||||
<button class="size-10 flex items-center justify-center rounded-full hover:bg-slate-100 dark:hover:bg-zinc-800 transition-colors">
|
||||
<span class="material-symbols-outlined text-slate-700 dark:text-slate-300">share</span>
|
||||
</button>
|
||||
</header>
|
||||
<!-- Tabs -->
|
||||
<nav class="flex border-b border-slate-100 dark:border-zinc-800 px-4 gap-8">
|
||||
<a class="flex flex-col items-center justify-center border-b-2 border-primary text-slate-900 dark:text-slate-100 pb-3 pt-4" href="#">
|
||||
<span class="text-sm font-bold">Weekly</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center border-b-2 border-transparent text-slate-400 dark:text-zinc-500 pb-3 pt-4 hover:text-slate-600" href="#">
|
||||
<span class="text-sm font-bold">Monthly</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center border-b-2 border-transparent text-slate-400 dark:text-zinc-500 pb-3 pt-4 hover:text-slate-600" href="#">
|
||||
<span class="text-sm font-bold">Yearly</span>
|
||||
</a>
|
||||
</nav>
|
||||
<main class="flex-1 overflow-y-auto p-4 space-y-6">
|
||||
<!-- Summary Chart Card -->
|
||||
<section class="bg-slate-50 dark:bg-zinc-800/50 rounded-xl p-5 border border-slate-100 dark:border-zinc-800">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<p class="text-slate-500 dark:text-zinc-400 text-sm font-medium">Daily Completion</p>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<h2 class="text-3xl font-bold">85%</h2>
|
||||
<span class="text-emerald-500 text-sm font-bold flex items-center">
|
||||
<span class="material-symbols-outlined text-sm">trending_up</span> 5%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-primary/10 text-primary p-2 rounded-lg">
|
||||
<span class="material-symbols-outlined">analytics</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-end justify-between h-40 gap-2 mb-2">
|
||||
<div class="flex-1 flex flex-col items-center gap-2 group">
|
||||
<div class="w-full bg-primary/20 dark:bg-primary/10 rounded-t-full relative" style="height: 70%;">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-t-full" style="height: 100%;"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-slate-400 uppercase">Mon</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2 group">
|
||||
<div class="w-full bg-primary/20 dark:bg-primary/10 rounded-t-full relative" style="height: 85%;">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-t-full" style="height: 100%;"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-slate-400 uppercase">Tue</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2 group">
|
||||
<div class="w-full bg-primary/20 dark:bg-primary/10 rounded-t-full relative" style="height: 95%;">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-t-full" style="height: 100%;"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-slate-400 uppercase">Wed</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2 group">
|
||||
<div class="w-full bg-primary/20 dark:bg-primary/10 rounded-t-full relative" style="height: 60%;">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-t-full" style="height: 100%;"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-slate-400 uppercase">Thu</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2 group">
|
||||
<div class="w-full bg-primary/20 dark:bg-primary/10 rounded-t-full relative" style="height: 90%;">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-t-full" style="height: 100%;"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-slate-400 uppercase">Fri</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2 group">
|
||||
<div class="w-full bg-primary/20 dark:bg-primary/10 rounded-t-full relative" style="height: 75%;">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-t-full" style="height: 100%;"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-slate-400 uppercase">Sat</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2 group">
|
||||
<div class="w-full bg-primary/20 dark:bg-primary/10 rounded-t-full relative" style="height: 80%;">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-t-full" style="height: 100%;"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-slate-400 uppercase">Sun</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Insights Section -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-lg font-bold">Insights</h3>
|
||||
<div class="grid grid-cols-1 gap-3">
|
||||
<!-- Highlight Card 1 -->
|
||||
<div class="flex items-center p-4 bg-white dark:bg-zinc-800 rounded-xl border border-slate-100 dark:border-zinc-700 shadow-sm">
|
||||
<div class="bg-primary/20 text-primary p-3 rounded-xl mr-4">
|
||||
<span class="material-symbols-outlined">stars</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-xs text-slate-500 dark:text-zinc-400 font-medium uppercase tracking-wider">Paling Rajin</p>
|
||||
<h4 class="font-bold text-slate-900 dark:text-slate-100">Shalat Dhuha</h4>
|
||||
</div>
|
||||
<span class="text-primary font-bold">100%</span>
|
||||
</div>
|
||||
<!-- Highlight Card 2 -->
|
||||
<div class="flex items-center p-4 bg-white dark:bg-zinc-800 rounded-xl border border-slate-100 dark:border-zinc-700 shadow-sm">
|
||||
<div class="bg-amber-100 dark:bg-amber-900/30 text-amber-600 p-3 rounded-xl mr-4">
|
||||
<span class="material-symbols-outlined">trending_down</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-xs text-slate-500 dark:text-zinc-400 font-medium uppercase tracking-wider">Perlu Ditingkatkan</p>
|
||||
<h4 class="font-bold text-slate-900 dark:text-slate-100">Sedekah</h4>
|
||||
</div>
|
||||
<span class="text-amber-600 font-bold">45%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Inspirational Quote -->
|
||||
<section class="mt-8 p-6 relative overflow-hidden rounded-xl bg-gradient-to-br from-primary/10 to-transparent border border-primary/20">
|
||||
<span class="material-symbols-outlined text-4xl text-primary/30 absolute -top-1 -left-1">format_quote</span>
|
||||
<div class="relative z-10">
|
||||
<p class="text-slate-700 dark:text-zinc-300 italic text-sm leading-relaxed mb-4">
|
||||
"The most beloved of deeds to Allah are those that are most consistent, even if they are small."
|
||||
</p>
|
||||
<p class="text-xs font-bold text-slate-900 dark:text-slate-100 tracking-tight">— Sahih Bukhari</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<nav class="flex border-t border-slate-100 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-4 pb-6 pt-3 shrink-0">
|
||||
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-400 dark:text-zinc-500 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<p class="text-[10px] font-medium">Home</p>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-primary" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1">bar_chart</span>
|
||||
<p class="text-[10px] font-medium">Report</p>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-400 dark:text-zinc-500 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">checklist</span>
|
||||
<p class="text-[10px] font-medium">Plan</p>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-400 dark:text-zinc-500 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<p class="text-[10px] font-medium">Profile</p>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
stitch/laporan_active_nav/screen.png
Normal file
BIN
stitch/laporan_active_nav/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
Reference in New Issue
Block a user