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
133 lines
6.9 KiB
HTML
133 lines
6.9 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"/>
|
|
<title>Dzikir Counter - Dark Mode</title>
|
|
<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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sX2VjNTZhY2UxZDRmMDQ0Y2Q4YjI4YTg3MzExZGQ3M2I4EgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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,FILL@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;
|
|
}
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.filled-icon {
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</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 -->
|
|
<header class="flex items-center bg-background-light dark:bg-background-dark p-4 justify-between sticky top-0 z-10 border-b border-primary/10">
|
|
<div class="text-slate-900 dark:text-slate-100 flex size-12 shrink-0 items-center justify-start cursor-pointer">
|
|
<span class="material-symbols-outlined text-2xl">arrow_back</span>
|
|
</div>
|
|
<div class="flex flex-col items-center">
|
|
<h2 class="text-slate-900 dark:text-slate-100 text-lg font-bold leading-tight tracking-tight">Morning Adhkar</h2>
|
|
<p class="text-primary text-xs font-medium uppercase tracking-widest">Dzikir Al-Ma'thurat</p>
|
|
</div>
|
|
<div class="flex w-12 items-center justify-end">
|
|
<button class="flex size-10 items-center justify-center rounded-full bg-primary/10 text-primary">
|
|
<span class="material-symbols-outlined text-2xl">info</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content -->
|
|
<main class="flex-1 flex flex-col px-6 py-8">
|
|
<!-- Progress Bar Section -->
|
|
<div class="flex flex-col gap-3 mb-12">
|
|
<div class="flex justify-between items-end">
|
|
<div>
|
|
<p class="text-slate-400 dark:text-slate-500 text-sm font-medium uppercase tracking-wider">Current Progress</p>
|
|
<p class="text-slate-900 dark:text-slate-100 text-2xl font-bold">15 <span class="text-slate-400 dark:text-slate-600 font-medium text-lg">/ 33</span></p>
|
|
</div>
|
|
<div class="px-3 py-1 bg-primary/20 text-primary rounded-full text-xs font-bold">
|
|
45% Complete
|
|
</div>
|
|
</div>
|
|
<div class="h-3 w-full rounded-full bg-primary/10 overflow-hidden">
|
|
<div class="h-full bg-primary rounded-full" style="width: 45%;"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Arabic Text Section -->
|
|
<div class="flex-1 flex flex-col justify-center items-center gap-8 text-center">
|
|
<div class="p-8 rounded-xl bg-primary/5 border border-primary/10 w-full">
|
|
<h1 class="text-slate-900 dark:text-slate-100 text-4xl font-bold leading-relaxed mb-6" dir="rtl">
|
|
سُبْحَانَ اللهِ وَبِحَمْدِهِ
|
|
</h1>
|
|
<p class="text-slate-600 dark:text-slate-300 text-lg italic leading-relaxed">
|
|
"Glory be to Allah and His is the praise."
|
|
</p>
|
|
<p class="text-primary text-sm mt-4 font-medium">
|
|
Recite 100 times in the morning and evening
|
|
</p>
|
|
</div>
|
|
<!-- Large Counter Button -->
|
|
<button class="group relative flex flex-col items-center justify-center size-64 rounded-full bg-primary shadow-[0_0_50px_rgba(112,223,32,0.3)] active:scale-95 transition-transform duration-75">
|
|
<div class="absolute inset-2 border-4 border-background-dark/20 rounded-full border-dashed"></div>
|
|
<span class="text-background-dark text-6xl font-black">15</span>
|
|
<span class="text-background-dark/60 text-sm font-bold uppercase tracking-widest mt-2">Tap to Count</span>
|
|
</button>
|
|
<button class="flex items-center gap-2 text-slate-400 dark:text-slate-500 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">restart_alt</span>
|
|
<span class="text-sm font-bold uppercase tracking-wider">Reset Counter</span>
|
|
</button>
|
|
</div>
|
|
</main>
|
|
<!-- Bottom Navigation Bar -->
|
|
<nav class="sticky bottom-0 border-t border-primary/10 bg-background-light dark:bg-background-dark px-4 pb-6 pt-3">
|
|
<div class="flex gap-2 max-w-md mx-auto">
|
|
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-400 dark:text-slate-500" href="#">
|
|
<div class="flex h-8 items-center justify-center">
|
|
<span class="material-symbols-outlined">home</span>
|
|
</div>
|
|
<p class="text-[10px] font-bold uppercase tracking-tighter">Home</p>
|
|
</a>
|
|
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-primary" href="#">
|
|
<div class="flex h-10 w-16 bg-primary/20 rounded-full items-center justify-center">
|
|
<span class="material-symbols-outlined filled-icon">front_hand</span>
|
|
</div>
|
|
<p class="text-[10px] font-bold uppercase tracking-tighter">Dua</p>
|
|
</a>
|
|
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-400 dark:text-slate-500" href="#">
|
|
<div class="flex h-8 items-center justify-center">
|
|
<span class="material-symbols-outlined">nature</span>
|
|
</div>
|
|
<p class="text-[10px] font-bold uppercase tracking-tighter">Dzikir</p>
|
|
</a>
|
|
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-400 dark:text-slate-500" href="#">
|
|
<div class="flex h-8 items-center justify-center">
|
|
<span class="material-symbols-outlined">person</span>
|
|
</div>
|
|
<p class="text-[10px] font-bold uppercase tracking-tighter">Profile</p>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</body></html> |