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

179 lines
9.1 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Islamic Dashboard - Dark Mode</title>
<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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzUxZTJlYWE5ZDk3YTRkZjhhMTI4ZTc5YzMzMTQ4OTY5EgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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@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": "#728764",
},
fontFamily: {
"display": ["Plus Jakarta Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "0.5rem", "lg": "1rem", "xl": "1.5rem", "full": "9999px"},
},
},
}
</script>
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.active-nav .material-symbols-outlined {
font-variation-settings: 'FILL' 1;
}
</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 flex flex-col">
<header class="sticky top-0 z-10 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md px-4 py-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center border border-primary/30">
<span class="material-symbols-outlined text-primary">person</span>
</div>
<div>
<p class="text-xs text-slate-500 dark:text-slate-400 font-medium">Assalamu Alaikum,</p>
<p class="text-sm font-bold">Ahmed Hassan</p>
</div>
</div>
<div class="flex gap-2">
<button class="p-2 rounded-full bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="p-2 rounded-full bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300">
<span class="material-symbols-outlined">search</span>
</button>
</div>
</header>
<main class="flex-1 px-4 pb-24 overflow-y-auto">
<section class="mt-4 mb-8">
<div class="relative w-full aspect-[21/9] rounded-xl overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-r from-background-dark/80 to-transparent z-10"></div>
<img alt="Islamic Art Header" class="absolute inset-0 w-full h-full object-cover" data-alt="Beautiful sunset over a peaceful landscape" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA1RmfJLmqfR29upKD1wjsvXun8P1uSsl0nU2mj-kwkrzy_tVDcHQbYrEzTmC6e8bIDiacTRvXHX4cWozn1pkU3yDNTLiFZAdhEBW7XwJnwSLbr8lXYXeG8lmVu3EEiPnQC-iOR0gXXm6kt0LV5m_1CgXFAj0cBGgeJMd4sZ0ZJqdNVMutu9Dpnh3Pag_pMCXPHK7P_Pfn5QQb0FyiE9CJnC6GH5d5O2zp9WneolSKY109BHmoxp74FAWX8FT725mvAEBNv8F-QE0S7"/>
<div class="absolute inset-0 z-20 p-6 flex flex-col justify-center">
<p class="text-primary font-semibold text-sm">Next Prayer</p>
<h1 class="text-3xl font-bold mt-1">Dhuhr</h1>
<div class="flex items-center gap-2 mt-2 opacity-90">
<span class="material-symbols-outlined text-sm">schedule</span>
<span class="text-lg">12:45 PM</span>
</div>
<p class="text-xs mt-1 text-slate-300">-02:45:12 remaining</p>
</div>
</div>
</section>
<section class="mb-8">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-bold">Daily Prayers</h2>
<button class="text-primary text-sm font-semibold">View Monthly</button>
</div>
<div class="space-y-3">
<div class="bg-slate-100 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-800 rounded-xl p-4 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="p-2 bg-sage/20 rounded-lg">
<span class="material-symbols-outlined text-sage">wb_twilight</span>
</div>
<div>
<p class="font-bold">Fajr</p>
<p class="text-xs text-slate-500 dark:text-slate-400">05:22 AM</p>
</div>
</div>
<span class="material-symbols-outlined text-slate-400">notifications_off</span>
</div>
<div class="bg-primary/10 border-2 border-primary/30 rounded-xl p-4 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="p-2 bg-primary rounded-lg">
<span class="material-symbols-outlined text-background-dark">wb_sunny</span>
</div>
<div>
<p class="font-bold">Dhuhr</p>
<p class="text-xs text-primary font-medium">12:45 PM</p>
</div>
</div>
<span class="material-symbols-outlined text-primary">notifications_active</span>
</div>
<div class="bg-slate-100 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-800 rounded-xl p-4 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="p-2 bg-sage/20 rounded-lg">
<span class="material-symbols-outlined text-sage">sunny</span>
</div>
<div>
<p class="font-bold">Asr</p>
<p class="text-xs text-slate-500 dark:text-slate-400">04:15 PM</p>
</div>
</div>
<span class="material-symbols-outlined text-slate-400">notifications</span>
</div>
</div>
</section>
<section class="mb-8">
<h2 class="text-lg font-bold mb-4">Quick Actions</h2>
<div class="grid grid-cols-2 gap-4">
<button class="flex flex-col items-center justify-center gap-3 p-6 bg-slate-100 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-800 rounded-xl transition-all hover:border-primary/50 group">
<div class="w-12 h-12 rounded-full bg-sage/20 flex items-center justify-center text-sage group-hover:bg-primary/20 group-hover:text-primary">
<span class="material-symbols-outlined text-3xl">explore</span>
</div>
<span class="font-semibold text-sm">Qibla Finder</span>
</button>
<button class="flex flex-col items-center justify-center gap-3 p-6 bg-slate-100 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-800 rounded-xl transition-all hover:border-primary/50 group">
<div class="w-12 h-12 rounded-full bg-sage/20 flex items-center justify-center text-sage group-hover:bg-primary/20 group-hover:text-primary">
<span class="material-symbols-outlined text-3xl">menu_book</span>
</div>
<span class="font-semibold text-sm">Read Quran</span>
</button>
</div>
</section>
<section class="mb-8">
<div class="bg-gradient-to-br from-sage/20 to-primary/10 border border-sage/30 rounded-xl p-5">
<div class="flex items-start justify-between mb-3">
<h3 class="font-bold text-sage">Verse of the Day</h3>
<span class="material-symbols-outlined text-sage text-sm">share</span>
</div>
<p class="text-sm italic leading-relaxed text-slate-800 dark:text-slate-200">
"So remember Me; I will remember you. And be grateful to Me and do not deny Me."
</p>
<p class="text-xs mt-3 font-bold text-sage">Surah Al-Baqarah 2:152</p>
</div>
</section>
</main>
<nav class="fixed bottom-0 left-0 right-0 bg-background-light dark:bg-background-dark border-t border-slate-200 dark:border-slate-800 px-6 py-3 pb-6 flex justify-between items-center z-50">
<a class="flex flex-col items-center gap-1 active-nav text-primary" href="#">
<span class="material-symbols-outlined">house</span>
<span class="text-[10px] font-bold">Home</span>
</a>
<a class="flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400" href="#">
<span class="material-symbols-outlined">mosque</span>
<span class="text-[10px] font-medium">Prayers</span>
</a>
<a class="flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400" href="#">
<span class="material-symbols-outlined">auto_stories</span>
<span class="text-[10px] font-medium">Quran</span>
</a>
<a class="flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400" href="#">
<span class="material-symbols-outlined">groups</span>
<span class="text-[10px] font-medium">Community</span>
</a>
<a class="flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400" href="#">
<span class="material-symbols-outlined">settings</span>
<span class="text-[10px] font-medium">Settings</span>
</a>
</nav>
</body></html>
Reference in New Issue View Git Blame Copy Permalink