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
162
stitch/imsakiyah_dark_mode/code.html
Normal file
162
stitch/imsakiyah_dark_mode/code.html
Normal file
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" 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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzVmNjE2NTE3NzIyMjQ2YWRiOGM4YWNjNTQ4NDU2NDY4EgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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 {
|
||||
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 class="sticky top-0 z-10 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-primary/10 px-4 py-4">
|
||||
<div class="flex items-center justify-between max-w-md mx-auto">
|
||||
<button class="p-2 rounded-full hover:bg-primary/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-slate-900 dark:text-slate-100">arrow_back</span>
|
||||
</button>
|
||||
<div class="text-center">
|
||||
<h2 class="text-lg font-bold leading-tight">Imsakiyah 1445 H</h2>
|
||||
<p class="text-xs font-medium text-primary uppercase tracking-wider">Jakarta, Indonesia</p>
|
||||
</div>
|
||||
<button class="p-2 rounded-full hover:bg-primary/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-slate-900 dark:text-slate-100">share</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-1 w-full max-w-md mx-auto px-4 py-6">
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-2xl font-bold mb-1">Tuesday, March 12</h1>
|
||||
<p class="text-slate-500 dark:text-slate-400">1 Ramadan 1445 H</p>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between p-4 rounded-xl bg-white dark:bg-white/5 border border-primary/5 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined">wb_twilight</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Imsak</p>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400">Preparation for fasting</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-lg font-bold text-primary">04:32</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4 rounded-xl bg-white dark:bg-white/5 border border-primary/5 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined">wb_sunny</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Subuh</p>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400">Morning prayer</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-lg font-bold">04:42</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4 rounded-xl bg-white dark:bg-white/5 border border-primary/5 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded-lg bg-primary/10 flex items-center justify-center text-slate-400">
|
||||
<span class="material-symbols-outlined">light_mode</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Dzuhur</p>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400">Noon prayer</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-lg font-bold">12:05</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4 rounded-xl bg-white dark:bg-white/5 border border-primary/5 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded-lg bg-primary/10 flex items-center justify-center text-slate-400">
|
||||
<span class="material-symbols-outlined">partly_cloudy_day</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Ashar</p>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400">Afternoon prayer</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-lg font-bold">15:12</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4 rounded-xl bg-primary/10 border border-primary/30 shadow-md">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded-lg bg-primary flex items-center justify-center text-background-dark">
|
||||
<span class="material-symbols-outlined">wb_twilight</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Maghrib</p>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-300">Breaking of fast</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-lg font-bold text-primary">18:10</p>
|
||||
<span class="text-[10px] font-bold px-2 py-0.5 bg-primary text-background-dark rounded-full">NEXT</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4 rounded-xl bg-white dark:bg-white/5 border border-primary/5 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded-lg bg-primary/10 flex items-center justify-center text-slate-400">
|
||||
<span class="material-symbols-outlined">dark_mode</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Isya</p>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400">Night prayer</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-lg font-bold">19:19</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 p-4 rounded-2xl bg-gradient-to-br from-primary/20 to-transparent border border-primary/20">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<span class="material-symbols-outlined text-primary">info</span>
|
||||
<p class="text-sm font-bold">Fasting Tip</p>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Stay hydrated during Suhoor and Iftar by drinking plenty of water and eating water-rich fruits like watermelon.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<nav class="sticky bottom-0 bg-background-light dark:bg-background-dark border-t border-primary/10 pb-6 pt-2 px-4">
|
||||
<div class="flex items-center justify-around max-w-md mx-auto">
|
||||
<a class="flex flex-col items-center gap-1 text-slate-400 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<span class="text-[10px] font-medium">Home</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-primary relative" href="#">
|
||||
<div class="absolute -top-1 size-1 bg-primary rounded-full"></div>
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1">calendar_month</span>
|
||||
<span class="text-[10px] font-bold">Calendar</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-400 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">explore</span>
|
||||
<span class="text-[10px] font-medium">Qibla</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-400 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="text-[10px] font-medium">Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user