faadc1865d
- 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
185 lines
8.8 KiB
HTML
185 lines
8.8 KiB
HTML
<!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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sX2VjZGMxMWJlNWI1YzQ5MDliNWQ4N2FkY2VkYWJjMTBmEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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": "#0a0f07", // Deep dark background derived from primary hue
|
|
},
|
|
fontFamily: {
|
|
"display": ["Plus Jakarta Sans"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.5rem", "lg": "1rem", "xl": "1.5rem", "full": "9999px"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
@font-face {
|
|
font-family: 'Amiri';
|
|
src: url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');
|
|
}
|
|
.arabic-text {
|
|
font-family: 'Amiri', serif;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-dark font-display text-slate-100 antialiased">
|
|
<!-- Header -->
|
|
<header class="sticky top-0 z-50 bg-background-dark/80 backdrop-blur-md border-b border-white/10">
|
|
<div class="flex items-center p-4 justify-between">
|
|
<button class="text-slate-100 flex size-10 items-center justify-center rounded-full hover:bg-white/5 transition-colors">
|
|
<span class="material-symbols-outlined">arrow_back</span>
|
|
</button>
|
|
<div class="flex-1 text-center">
|
|
<h2 class="text-slate-100 text-lg font-bold leading-tight">Al-Fatihah</h2>
|
|
<p class="text-primary text-xs font-medium uppercase tracking-widest">The Opening</p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="text-slate-100 flex size-10 items-center justify-center rounded-full hover:bg-white/5 transition-colors">
|
|
<span class="material-symbols-outlined">search</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Tabs -->
|
|
<div class="flex border-b border-white/5 px-4 gap-8">
|
|
<button class="flex flex-col items-center justify-center border-b-2 border-primary text-primary pb-3 pt-2">
|
|
<span class="text-sm font-bold tracking-wide">Surah</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center border-b-2 border-transparent text-slate-400 pb-3 pt-2 hover:text-slate-200">
|
|
<span class="text-sm font-bold tracking-wide">Juz</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content -->
|
|
<main class="pb-40 pt-4">
|
|
<!-- Verse 1 -->
|
|
<div class="flex flex-col gap-4 bg-white/5 mx-4 my-2 p-5 rounded-xl border border-white/5">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center justify-center rounded-lg bg-primary/20 text-primary font-bold size-10">
|
|
1
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<button class="text-slate-400 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">share</span>
|
|
</button>
|
|
<button class="text-primary">
|
|
<span class="material-symbols-outlined">bookmark</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-4 text-right">
|
|
<p class="arabic-text text-3xl font-medium leading-[1.8] text-slate-100" dir="rtl">بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ</p>
|
|
</div>
|
|
<div class="flex flex-col gap-1 border-t border-white/5 pt-4">
|
|
<p class="text-primary text-xs font-semibold">1:1</p>
|
|
<p class="text-slate-300 text-sm leading-relaxed">In the name of Allah, the Entirely Merciful, the Especially Merciful.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Verse 2 -->
|
|
<div class="flex flex-col gap-4 bg-transparent mx-4 my-2 p-5 rounded-xl border border-transparent">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center justify-center rounded-lg bg-white/5 text-slate-400 font-bold size-10">
|
|
2
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<button class="text-slate-400 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">share</span>
|
|
</button>
|
|
<button class="text-slate-400 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">bookmark</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-4 text-right">
|
|
<p class="arabic-text text-3xl font-medium leading-[1.8] text-slate-100" dir="rtl">الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ</p>
|
|
</div>
|
|
<div class="flex flex-col gap-1 border-t border-white/5 pt-4">
|
|
<p class="text-primary text-xs font-semibold">1:2</p>
|
|
<p class="text-slate-300 text-sm leading-relaxed">[All] praise is [due] to Allah, Lord of the worlds -</p>
|
|
</div>
|
|
</div>
|
|
<!-- Verse 3 -->
|
|
<div class="flex flex-col gap-4 bg-transparent mx-4 my-2 p-5 rounded-xl border border-transparent">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center justify-center rounded-lg bg-white/5 text-slate-400 font-bold size-10">
|
|
3
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<button class="text-slate-400 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">share</span>
|
|
</button>
|
|
<button class="text-slate-400 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">bookmark</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-4 text-right">
|
|
<p class="arabic-text text-3xl font-medium leading-[1.8] text-slate-100" dir="rtl">الرَّحْمَٰنِ الرَّحِيمِ</p>
|
|
</div>
|
|
<div class="flex flex-col gap-1 border-t border-white/5 pt-4">
|
|
<p class="text-primary text-xs font-semibold">1:3</p>
|
|
<p class="text-slate-300 text-sm leading-relaxed">The Entirely Merciful, the Especially Merciful,</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Player & Nav Container -->
|
|
<div class="fixed bottom-0 left-0 right-0 z-50">
|
|
<!-- Murattal Player -->
|
|
<div class="bg-primary mx-4 mb-4 rounded-xl p-3 shadow-2xl flex items-center gap-4">
|
|
<div class="bg-black/20 rounded-lg p-2 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-white">music_note</span>
|
|
</div>
|
|
<div class="flex-1 overflow-hidden">
|
|
<p class="text-black font-bold text-sm truncate">Mishary Rashid Alafasy</p>
|
|
<p class="text-black/70 text-xs truncate italic">Playing: Surah Al-Fatihah</p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="bg-black/10 rounded-full p-2 text-black hover:bg-black/20">
|
|
<span class="material-symbols-outlined">skip_previous</span>
|
|
</button>
|
|
<button class="bg-white rounded-full p-2 text-primary shadow-lg">
|
|
<span class="material-symbols-outlined">pause</span>
|
|
</button>
|
|
<button class="bg-black/10 rounded-full p-2 text-black hover:bg-black/20">
|
|
<span class="material-symbols-outlined">skip_next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom Navigation -->
|
|
<nav class="flex gap-2 border-t border-white/10 bg-background-dark/95 backdrop-blur-xl px-4 pb-6 pt-3">
|
|
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-500 hover:text-slate-300" href="#">
|
|
<span class="material-symbols-outlined">home</span>
|
|
<p class="text-[10px] font-medium uppercase tracking-widest">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">menu_book</span>
|
|
<p class="text-[10px] font-bold uppercase tracking-widest">Quran</p>
|
|
</a>
|
|
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-500 hover:text-slate-300" href="#">
|
|
<span class="material-symbols-outlined">schedule</span>
|
|
<p class="text-[10px] font-medium uppercase tracking-widest">Prayer</p>
|
|
</a>
|
|
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-500 hover:text-slate-300" href="#">
|
|
<span class="material-symbols-outlined">person</span>
|
|
<p class="text-[10px] font-medium uppercase tracking-widest">Profile</p>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</body></html> |