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
188
stitch/checklist_active_nav/code.html
Normal file
188
stitch/checklist_active_nav/code.html
Normal file
@@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Daily Worship Checklist</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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sX2ZjMzMyOWVjMjg1MjRkMDlhZTViYzQ0ZDg0NDE3ZDMzEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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;
|
||||
}
|
||||
.custom-checkbox:checked {
|
||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
||||
}
|
||||
</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 min-h-screen flex flex-col bg-white dark:bg-zinc-900 shadow-xl overflow-hidden">
|
||||
<!-- Header -->
|
||||
<header class="pt-8 px-6 pb-4">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight">Daily Worship</h1>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm">Tuesday, 24 Oct</p>
|
||||
</div>
|
||||
<div class="size-10 rounded-full bg-primary/20 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined">calendar_today</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Progress Card -->
|
||||
<div class="bg-slate-900 dark:bg-zinc-800 rounded-xl p-5 text-white shadow-lg relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 p-4 opacity-10">
|
||||
<span class="material-symbols-outlined text-6xl">auto_awesome</span>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex justify-between items-end mb-4">
|
||||
<div>
|
||||
<p class="text-slate-400 text-xs uppercase tracking-wider font-semibold mb-1">Today's Goal</p>
|
||||
<h2 class="text-3xl font-bold">66% <span class="text-sm font-normal text-slate-400">Complete</span></h2>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-primary font-bold text-sm">4 / 6 Tasks</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full bg-white/10 h-3 rounded-full overflow-hidden">
|
||||
<div class="bg-primary h-full rounded-full" style="width: 66%"></div>
|
||||
</div>
|
||||
<p class="mt-4 text-xs text-slate-300">Almost there! Two more tasks to finish your daily routine.</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Checklist Section -->
|
||||
<main class="flex-1 px-6 py-4 space-y-4 overflow-y-auto">
|
||||
<h3 class="text-sm font-bold text-slate-400 uppercase tracking-widest px-1">Religious Tasks</h3>
|
||||
<!-- Task Item 1: Checked -->
|
||||
<div class="flex items-center gap-4 bg-slate-50 dark:bg-zinc-800/50 p-4 rounded-xl border border-slate-100 dark:border-zinc-800 transition-all hover:border-primary/50">
|
||||
<div class="size-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined">mosque</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h4 class="font-semibold text-slate-800 dark:text-slate-100 truncate">Shalat 5 Waktu</h4>
|
||||
<p class="text-xs text-slate-500">Compulsory prayers</p>
|
||||
</div>
|
||||
<div class="shrink-0">
|
||||
<input checked="" class="custom-checkbox size-6 rounded-md border-slate-300 text-primary focus:ring-primary focus:ring-offset-0 bg-white" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Task Item 2: Checked -->
|
||||
<div class="flex items-center gap-4 bg-slate-50 dark:bg-zinc-800/50 p-4 rounded-xl border border-slate-100 dark:border-zinc-800 transition-all hover:border-primary/50">
|
||||
<div class="size-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined">menu_book</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h4 class="font-semibold text-slate-800 dark:text-slate-100 truncate">Baca Al-Quran</h4>
|
||||
<p class="text-xs text-slate-500">Min. 2 pages per day</p>
|
||||
</div>
|
||||
<div class="shrink-0">
|
||||
<input checked="" class="custom-checkbox size-6 rounded-md border-slate-300 text-primary focus:ring-primary focus:ring-offset-0 bg-white" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Task Item 3: Unchecked -->
|
||||
<div class="flex items-center gap-4 bg-white dark:bg-zinc-900 p-4 rounded-xl border border-slate-100 dark:border-zinc-800 transition-all hover:border-primary/50">
|
||||
<div class="size-12 rounded-lg bg-slate-100 dark:bg-zinc-800 text-slate-500 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined">nights_stay</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h4 class="font-semibold text-slate-800 dark:text-slate-100 truncate">Tahajjud</h4>
|
||||
<p class="text-xs text-slate-500">Night prayer</p>
|
||||
</div>
|
||||
<div class="shrink-0">
|
||||
<input class="custom-checkbox size-6 rounded-md border-slate-300 text-primary focus:ring-primary focus:ring-offset-0 bg-white" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Task Item 4: Checked -->
|
||||
<div class="flex items-center gap-4 bg-slate-50 dark:bg-zinc-800/50 p-4 rounded-xl border border-slate-100 dark:border-zinc-800 transition-all hover:border-primary/50">
|
||||
<div class="size-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined">wb_sunny</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h4 class="font-semibold text-slate-800 dark:text-slate-100 truncate">Dhuha</h4>
|
||||
<p class="text-xs text-slate-500">Morning prayer</p>
|
||||
</div>
|
||||
<div class="shrink-0">
|
||||
<input checked="" class="custom-checkbox size-6 rounded-md border-slate-300 text-primary focus:ring-primary focus:ring-offset-0 bg-white" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Task Item 5: Checked -->
|
||||
<div class="flex items-center gap-4 bg-slate-50 dark:bg-zinc-800/50 p-4 rounded-xl border border-slate-100 dark:border-zinc-800 transition-all hover:border-primary/50">
|
||||
<div class="size-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined">volunteer_activism</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h4 class="font-semibold text-slate-800 dark:text-slate-100 truncate">Sedekah</h4>
|
||||
<p class="text-xs text-slate-500">Daily charity</p>
|
||||
</div>
|
||||
<div class="shrink-0">
|
||||
<input checked="" class="custom-checkbox size-6 rounded-md border-slate-300 text-primary focus:ring-primary focus:ring-offset-0 bg-white" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Task Item 6: Unchecked -->
|
||||
<div class="flex items-center gap-4 bg-white dark:bg-zinc-900 p-4 rounded-xl border border-slate-100 dark:border-zinc-800 transition-all hover:border-primary/50">
|
||||
<div class="size-12 rounded-lg bg-slate-100 dark:bg-zinc-800 text-slate-500 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined">reorder</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h4 class="font-semibold text-slate-800 dark:text-slate-100 truncate">Rawatib</h4>
|
||||
<p class="text-xs text-slate-500">Sunnah prayers</p>
|
||||
</div>
|
||||
<div class="shrink-0">
|
||||
<input class="custom-checkbox size-6 rounded-md border-slate-300 text-primary focus:ring-primary focus:ring-offset-0 bg-white" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<nav class="flex gap-2 border-t border-slate-100 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-4 pb-6 pt-2">
|
||||
<a class="flex flex-1 flex-col items-center justify-end gap-1 text-slate-400 dark:text-slate-500 hover:text-primary transition-colors" href="#">
|
||||
<div class="flex h-8 items-center justify-center">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
</div>
|
||||
<p class="text-[10px] font-medium leading-normal tracking-wider">HOME</p>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center justify-end gap-1 text-primary" href="#">
|
||||
<div class="flex h-8 items-center justify-center">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1">check_circle</span>
|
||||
</div>
|
||||
<p class="text-[10px] font-bold leading-normal tracking-wider">WORSHIP</p>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center justify-end gap-1 text-slate-400 dark:text-slate-500 hover:text-primary transition-colors" href="#">
|
||||
<div class="flex h-8 items-center justify-center">
|
||||
<span class="material-symbols-outlined">group</span>
|
||||
</div>
|
||||
<p class="text-[10px] font-medium leading-normal tracking-wider">COMMUNITY</p>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center justify-end gap-1 text-slate-400 dark:text-slate-500 hover:text-primary transition-colors" href="#">
|
||||
<div class="flex h-8 items-center justify-center">
|
||||
<span class="material-symbols-outlined">account_circle</span>
|
||||
</div>
|
||||
<p class="text-[10px] font-medium leading-normal tracking-wider">PROFILE</p>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
stitch/checklist_active_nav/screen.png
Normal file
BIN
stitch/checklist_active_nav/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
150
stitch/checklist_dark_mode/code.html
Normal file
150
stitch/checklist_dark_mode/code.html
Normal file
@@ -0,0 +1,150 @@
|
||||
<!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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzA0YjVhZDA4YTM5NTRmMTM4ZTI2YTU0OTM2NjYwODk1EgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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;
|
||||
}
|
||||
.custom-checkbox:checked {
|
||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
||||
}
|
||||
</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="sticky top-0 z-10 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-primary/10">
|
||||
<div class="flex items-center p-4 justify-between max-w-md mx-auto w-full">
|
||||
<div class="text-slate-900 dark:text-slate-100 flex size-10 shrink-0 items-center justify-center rounded-full hover:bg-primary/10 transition-colors">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</div>
|
||||
<h1 class="text-slate-900 dark:text-slate-100 text-lg font-bold leading-tight tracking-tight flex-1 text-center">Checklist</h1>
|
||||
<div class="flex size-10 items-center justify-end">
|
||||
<button class="flex items-center justify-center rounded-full size-10 hover:bg-primary/10 transition-colors text-slate-900 dark:text-slate-100">
|
||||
<span class="material-symbols-outlined">more_horiz</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 max-w-md mx-auto w-full px-4 pb-24">
|
||||
<!-- Progress Card -->
|
||||
<div class="mt-6 p-5 rounded-xl bg-primary/10 border border-primary/20 mb-8">
|
||||
<div class="flex justify-between items-end mb-2">
|
||||
<div>
|
||||
<p class="text-primary text-sm font-semibold uppercase tracking-wider">Today's Progress</p>
|
||||
<h2 class="text-2xl font-bold mt-1">68% Completed</h2>
|
||||
</div>
|
||||
<p class="text-slate-400 text-xs font-medium">12 of 18 tasks</p>
|
||||
</div>
|
||||
<div class="w-full bg-slate-200 dark:bg-slate-800 h-2 rounded-full overflow-hidden">
|
||||
<div class="bg-primary h-full w-[68%] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Today's Tasks Section -->
|
||||
<section>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-slate-900 dark:text-slate-100 text-lg font-bold">Today's Tasks</h3>
|
||||
<span class="text-xs font-medium px-2 py-1 bg-primary/20 text-primary rounded text-center">5 Pending</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<label class="flex items-center gap-4 p-4 rounded-lg bg-white dark:bg-primary/5 border border-slate-200 dark:border-primary/10 transition-all active:scale-[0.98]">
|
||||
<input checked="" class="custom-checkbox h-6 w-6 rounded border-primary/30 border-2 bg-transparent text-primary checked:bg-primary checked:border-primary focus:ring-0 focus:ring-offset-0 focus:outline-none transition-all" type="checkbox"/>
|
||||
<div class="flex flex-col">
|
||||
<p class="text-slate-900 dark:text-slate-100 text-base font-semibold line-through opacity-50">Review dark mode assets</p>
|
||||
<span class="text-xs text-slate-500">Completed at 9:30 AM</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex items-center gap-4 p-4 rounded-lg bg-white dark:bg-primary/5 border border-slate-200 dark:border-primary/10 transition-all active:scale-[0.98]">
|
||||
<input class="custom-checkbox h-6 w-6 rounded border-primary/30 border-2 bg-transparent text-primary checked:bg-primary checked:border-primary focus:ring-0 focus:ring-offset-0 focus:outline-none transition-all" type="checkbox"/>
|
||||
<div class="flex flex-col">
|
||||
<p class="text-slate-900 dark:text-slate-100 text-base font-semibold">Finalize typography scales</p>
|
||||
<span class="text-xs text-primary">Due in 2 hours</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex items-center gap-4 p-4 rounded-lg bg-white dark:bg-primary/5 border border-slate-200 dark:border-primary/10 transition-all active:scale-[0.98]">
|
||||
<input class="custom-checkbox h-6 w-6 rounded border-primary/30 border-2 bg-transparent text-primary checked:bg-primary checked:border-primary focus:ring-0 focus:ring-offset-0 focus:outline-none transition-all" type="checkbox"/>
|
||||
<div class="flex flex-col">
|
||||
<p class="text-slate-900 dark:text-slate-100 text-base font-semibold">Update component library</p>
|
||||
<span class="text-xs text-slate-500">Design System • Low priority</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex items-center gap-4 p-4 rounded-lg bg-white dark:bg-primary/5 border border-slate-200 dark:border-primary/10 transition-all active:scale-[0.98]">
|
||||
<input class="custom-checkbox h-6 w-6 rounded border-primary/30 border-2 bg-transparent text-primary checked:bg-primary checked:border-primary focus:ring-0 focus:ring-offset-0 focus:outline-none transition-all" type="checkbox"/>
|
||||
<div class="flex flex-col">
|
||||
<p class="text-slate-900 dark:text-slate-100 text-base font-semibold">Team sync at 2 PM</p>
|
||||
<span class="text-xs text-slate-500">Meeting • Calendar</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Upcoming Section -->
|
||||
<section class="mt-8">
|
||||
<h3 class="text-slate-900 dark:text-slate-100 text-lg font-bold mb-4">Upcoming</h3>
|
||||
<div class="space-y-3 opacity-60">
|
||||
<div class="flex items-center gap-4 p-4 rounded-lg bg-slate-100 dark:bg-slate-900/50 border border-transparent">
|
||||
<span class="material-symbols-outlined text-slate-400">calendar_today</span>
|
||||
<p class="text-slate-900 dark:text-slate-100 text-base font-medium">Prepare design handover</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 p-4 rounded-lg bg-slate-100 dark:bg-slate-900/50 border border-transparent">
|
||||
<span class="material-symbols-outlined text-slate-400">calendar_today</span>
|
||||
<p class="text-slate-900 dark:text-slate-100 text-base font-medium">Monthly review meeting</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Add Task Floating Button -->
|
||||
<button class="fixed bottom-24 right-6 size-14 rounded-full bg-primary text-black flex items-center justify-center shadow-lg shadow-primary/20 hover:scale-110 active:scale-95 transition-transform z-20">
|
||||
<span class="material-symbols-outlined text-3xl font-bold">add</span>
|
||||
</button>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<nav class="fixed bottom-0 left-0 right-0 z-30 bg-background-light dark:bg-background-dark border-t border-primary/10">
|
||||
<div class="max-w-md mx-auto flex items-center justify-around px-4 pb-6 pt-3">
|
||||
<a class="flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<p class="text-[10px] font-bold uppercase tracking-wider">Home</p>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-primary" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1">format_list_bulleted</span>
|
||||
<p class="text-[10px] font-bold uppercase tracking-wider">Checklist</p>
|
||||
<div class="w-1 h-1 bg-primary rounded-full mt-0.5"></div>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">bar_chart</span>
|
||||
<p class="text-[10px] font-bold uppercase tracking-wider">Stats</p>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<p class="text-[10px] font-bold uppercase tracking-wider">Profile</p>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
BIN
stitch/checklist_dark_mode/screen.png
Normal file
BIN
stitch/checklist_dark_mode/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
223
stitch/dashboard_active_nav/code.html
Normal file
223
stitch/dashboard_active_nav/code.html
Normal file
@@ -0,0 +1,223 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html 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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzk4Zjg2MzFhZTk1MDRhY2E4Mjc3NTkyODg4YzllZDk2EgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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;800&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>
|
||||
<title>Islamic Diary App</title>
|
||||
<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 Section -->
|
||||
<header class="flex items-center justify-between px-6 py-4 bg-background-light dark:bg-background-dark sticky top-0 z-10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-full overflow-hidden bg-primary/20 flex items-center justify-center border-2 border-primary">
|
||||
<img class="w-full h-full object-cover" data-alt="Profile photo of Akhmad wearing a peci" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAykpLfEr0zwaMoF8rqbZB7EdppdMxnLkjcS6hYpOYXq12zcZ9St-R15-R98xRikYniJwWEeIHD-K3n_Mp5kNPtUS9HR2qFgH9mkx2ykGbIWHNrCfnmXGcZ4psVlTETXtoni3OzkK-5cOTJCubiPM7qmLXPlG8cnIr8snpC8SRQr6ePNmjoHyMKES9alZbF9T4-Cr_YK6VViC62PB4Vpkb8b-JRo9QGP2cjgskP6G61zeLPZCisvANh-6k_Vj-nkZnV3q4OJ9sQ-c6x"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-medium text-slate-500 dark:text-slate-400">Welcome back,</p>
|
||||
<h1 class="text-lg font-bold leading-tight">Assalamu'alaikum, Akhmad</h1>
|
||||
</div>
|
||||
</div>
|
||||
<button class="size-10 flex items-center justify-center rounded-full bg-white dark:bg-slate-800 shadow-sm text-slate-600 dark:text-slate-300">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="flex-1 overflow-y-auto pb-24">
|
||||
<!-- Main Countdown Card -->
|
||||
<div class="px-6 py-4">
|
||||
<div class="relative overflow-hidden rounded-xl bg-primary p-6 text-slate-900 shadow-lg shadow-primary/20">
|
||||
<div class="absolute -right-8 -top-8 size-32 bg-white/20 rounded-full blur-2xl"></div>
|
||||
<div class="absolute -left-4 -bottom-4 size-24 bg-black/5 rounded-full blur-xl"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="material-symbols-outlined text-black/60">schedule</span>
|
||||
<p class="font-semibold text-black/70 uppercase tracking-wider text-xs">Next Prayer</p>
|
||||
</div>
|
||||
<h2 class="text-3xl font-extrabold mb-1">Maghrib at 17:55</h2>
|
||||
<p class="text-lg font-medium opacity-80 mb-6">Countdown: 01:42:10</p>
|
||||
<div class="flex gap-2">
|
||||
<button class="flex-1 bg-black text-white font-bold py-3 rounded-lg flex items-center justify-center gap-2 text-sm">
|
||||
<span class="material-symbols-outlined text-sm">explore</span>
|
||||
View Qibla
|
||||
</button>
|
||||
<button class="bg-white/30 backdrop-blur-md p-3 rounded-lg flex items-center justify-center">
|
||||
<span class="material-symbols-outlined">volume_up</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Horizontal Prayer Scroll -->
|
||||
<div class="py-2">
|
||||
<div class="flex items-center justify-between px-6 mb-3">
|
||||
<h3 class="font-bold text-lg">Daily Prayer Times</h3>
|
||||
<span class="text-primary text-xs font-bold uppercase tracking-widest">Today</span>
|
||||
</div>
|
||||
<div class="flex overflow-x-auto gap-4 px-6 no-scrollbar pb-2">
|
||||
<!-- Fajr -->
|
||||
<div class="flex-shrink-0 w-28 bg-white dark:bg-slate-800 p-4 rounded-xl border border-primary/10 shadow-sm flex flex-col items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">wb_twilight</span>
|
||||
<p class="text-sm font-bold">Fajr</p>
|
||||
<p class="text-xs font-medium text-slate-500">04:32</p>
|
||||
</div>
|
||||
<!-- Dhuhr -->
|
||||
<div class="flex-shrink-0 w-28 bg-white dark:bg-slate-800 p-4 rounded-xl border border-primary/10 shadow-sm flex flex-col items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">wb_sunny</span>
|
||||
<p class="text-sm font-bold">Dhuhr</p>
|
||||
<p class="text-xs font-medium text-slate-500">12:05</p>
|
||||
</div>
|
||||
<!-- Asr -->
|
||||
<div class="flex-shrink-0 w-28 bg-white dark:bg-slate-800 p-4 rounded-xl border border-primary/10 shadow-sm flex flex-col items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">filter_drama</span>
|
||||
<p class="text-sm font-bold">Asr</p>
|
||||
<p class="text-xs font-medium text-slate-500">15:20</p>
|
||||
</div>
|
||||
<!-- Maghrib (Active) -->
|
||||
<div class="flex-shrink-0 w-28 bg-primary/10 dark:bg-primary/20 p-4 rounded-xl border-2 border-primary shadow-sm flex flex-col items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">wb_twilight</span>
|
||||
<p class="text-sm font-bold text-primary">Maghrib</p>
|
||||
<p class="text-xs font-bold text-primary">17:55</p>
|
||||
</div>
|
||||
<!-- Isha -->
|
||||
<div class="flex-shrink-0 w-28 bg-white dark:bg-slate-800 p-4 rounded-xl border border-primary/10 shadow-sm flex flex-col items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">dark_mode</span>
|
||||
<p class="text-sm font-bold">Isha</p>
|
||||
<p class="text-xs font-medium text-slate-500">19:10</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Today's Checklist Summary -->
|
||||
<div class="px-6 py-4">
|
||||
<div class="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm border border-primary/5">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 class="font-bold text-lg">Today's Checklist</h3>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400">7 dari 10 Ibadah selesai</p>
|
||||
</div>
|
||||
<div class="size-12 rounded-full border-4 border-slate-100 dark:border-slate-700 flex items-center justify-center relative">
|
||||
<svg class="absolute inset-0 w-full h-full -rotate-90">
|
||||
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125" stroke-dashoffset="37.5" stroke-width="4"></circle>
|
||||
</svg>
|
||||
<span class="text-xs font-bold">70%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-background-light dark:bg-background-dark/50">
|
||||
<span class="material-symbols-outlined text-primary fill-1">check_circle</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-bold">Sholat Fardhu</p>
|
||||
<p class="text-xs text-slate-500">4 of 5 complete</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-background-light dark:bg-background-dark/50">
|
||||
<span class="material-symbols-outlined text-primary fill-1">check_circle</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-bold">Tilawah Quran</p>
|
||||
<p class="text-xs text-slate-500">1 Juz targeted</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full py-3 text-primary font-bold text-sm bg-primary/10 rounded-lg">View Full Checklist</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Weekly Activity Mini Chart -->
|
||||
<div class="px-6 py-2">
|
||||
<h3 class="font-bold text-lg mb-3">Weekly Progress</h3>
|
||||
<div class="bg-white dark:bg-slate-800 rounded-xl p-4 flex justify-between items-end h-24 gap-2 border border-primary/5">
|
||||
<div class="flex flex-col items-center gap-2 w-full">
|
||||
<div class="w-full bg-primary/20 rounded-full h-8 relative">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[60%]"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold opacity-50">Mon</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 w-full">
|
||||
<div class="w-full bg-primary/20 rounded-full h-12 relative">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[80%]"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold opacity-50">Tue</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 w-full">
|
||||
<div class="w-full bg-primary/20 rounded-full h-16 relative">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[100%]"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold opacity-50">Wed</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 w-full">
|
||||
<div class="w-full bg-primary/20 rounded-full h-10 relative">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[40%]"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold opacity-50">Thu</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 w-full">
|
||||
<div class="w-full bg-primary/20 rounded-full h-14 relative">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[70%]"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold opacity-50">Fri</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 w-full">
|
||||
<div class="w-full bg-primary/20 rounded-full h-8 relative">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[30%]"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold opacity-50">Sat</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 w-full">
|
||||
<div class="w-full bg-primary/20 rounded-full h-6 relative">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[20%]"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold opacity-50">Sun</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-900 border-t border-slate-100 dark:border-slate-800 px-2 pb-6 pt-2">
|
||||
<div class="flex justify-around items-center max-w-md mx-auto">
|
||||
<a class="flex flex-col items-center gap-1 p-2 text-primary" href="#">
|
||||
<span class="material-symbols-outlined fill-1">home</span>
|
||||
<span class="text-[10px] font-bold">Home</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 p-2 text-slate-400 dark:text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">calendar_today</span>
|
||||
<span class="text-[10px] font-medium">Calendar</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 p-2 text-slate-400 dark:text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">rule</span>
|
||||
<span class="text-[10px] font-medium">Checklist</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 p-2 text-slate-400 dark:text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">bar_chart</span>
|
||||
<span class="text-[10px] font-medium">Reports</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 p-2 text-slate-400 dark:text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">auto_fix_high</span>
|
||||
<span class="text-[10px] font-medium">Tools</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
BIN
stitch/dashboard_active_nav/screen.png
Normal file
BIN
stitch/dashboard_active_nav/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
179
stitch/dashboard_dark_mode/code.html
Normal file
179
stitch/dashboard_dark_mode/code.html
Normal file
@@ -0,0 +1,179 @@
|
||||
<!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&type=content-script&dmn=contribution.usercontent.google.com&url=https%3A%2F%2Fcontribution.usercontent.google.com%2Fdownload%3Fc%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzUxZTJlYWE5ZDk3YTRkZjhhMTI4ZTc5YzMzMTQ4OTY5EgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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",
|
||||
"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>
|
||||
BIN
stitch/dashboard_dark_mode/screen.png
Normal file
BIN
stitch/dashboard_dark_mode/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 343 KiB |
225
stitch/dashboard_with_adhan_iqamah_logic/code.html
Normal file
225
stitch/dashboard_with_adhan_iqamah_logic/code.html
Normal file
@@ -0,0 +1,225 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html 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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sX2YyYzkzMmJiOWRjZjQ2MzdhMzkzZmE0MTI2Zjg0YmNiEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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;800&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>
|
||||
<title>Islamic Diary App</title>
|
||||
<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 Section -->
|
||||
<header class="flex items-center justify-between px-6 py-4 bg-background-light dark:bg-background-dark sticky top-0 z-10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-full overflow-hidden bg-primary/20 flex items-center justify-center border-2 border-primary">
|
||||
<img class="w-full h-full object-cover" data-alt="Profile photo of Akhmad wearing a peci" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAykpLfEr0zwaMoF8rqbZB7EdppdMxnLkjcS6hYpOYXq12zcZ9St-R15-R98xRikYniJwWEeIHD-K3n_Mp5kNPtUS9HR2qFgH9mkx2ykGbIWHNrCfnmXGcZ4psVlTETXtoni3OzkK-5cOTJCubiPM7qmLXPlG8cnIr8snpC8SRQr6ePNmjoHyMKES9alZbF9T4-Cr_YK6VViC62PB4Vpkb8b-JRo9QGP2cjgskP6G61zeLPZCisvANh-6k_Vj-nkZnV3q4OJ9sQ-c6x"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-medium text-slate-500 dark:text-slate-400">Welcome back,</p>
|
||||
<h1 class="text-lg font-bold leading-tight">Assalamu'alaikum, Akhmad</h1>
|
||||
</div>
|
||||
</div>
|
||||
<button class="size-10 flex items-center justify-center rounded-full bg-white dark:bg-slate-800 shadow-sm text-slate-600 dark:text-slate-300">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="flex-1 overflow-y-auto pb-24">
|
||||
<!-- Main Countdown Card -->
|
||||
<div class="px-6 py-4">
|
||||
<div class="relative overflow-hidden rounded-xl bg-primary p-6 text-slate-900 shadow-lg shadow-primary/20">
|
||||
<div class="absolute -right-8 -top-8 size-32 bg-white/20 rounded-full blur-2xl"></div>
|
||||
<div class="absolute -left-4 -bottom-4 size-24 bg-black/5 rounded-full blur-xl"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="material-symbols-outlined text-black/60">schedule</span>
|
||||
<p class="font-semibold text-black/70 uppercase tracking-wider text-xs">Next Prayer</p>
|
||||
</div>
|
||||
<h2 class="text-3xl font-extrabold mb-1">Maghrib at 17:55</h2>
|
||||
<p class="text-lg font-medium opacity-80 mb-6">Countdown: 01:42:10</p>
|
||||
<div class="flex gap-2">
|
||||
<button class="flex-1 bg-black text-white font-bold py-3 rounded-lg flex items-center justify-center gap-2 text-sm">
|
||||
<span class="material-symbols-outlined text-sm">explore</span>
|
||||
View Qibla
|
||||
</button>
|
||||
<button class="bg-white/30 backdrop-blur-md p-3 rounded-lg flex items-center justify-center">
|
||||
<span class="material-symbols-outlined">volume_up</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Horizontal Prayer Scroll -->
|
||||
<div class="py-2">
|
||||
<div class="flex items-center justify-between px-6 mb-3">
|
||||
<h3 class="font-bold text-lg">Daily Prayer Times</h3>
|
||||
<span class="text-primary text-xs font-bold uppercase tracking-widest">Today</span>
|
||||
</div>
|
||||
<div class="flex overflow-x-auto gap-4 px-6 no-scrollbar pb-2">
|
||||
<!-- Fajr -->
|
||||
<div class="flex-shrink-0 w-28 bg-white dark:bg-slate-800 p-4 rounded-xl border border-primary/10 shadow-sm flex flex-col items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">wb_twilight</span>
|
||||
<p class="text-sm font-bold">Fajr</p>
|
||||
<p class="text-xs font-medium text-slate-500">04:32</p>
|
||||
</div>
|
||||
<!-- Dhuhr -->
|
||||
<div class="flex-shrink-0 w-28 bg-white dark:bg-slate-800 p-4 rounded-xl border border-primary/10 shadow-sm flex flex-col items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">wb_sunny</span>
|
||||
<p class="text-sm font-bold">Dhuhr</p>
|
||||
<p class="text-xs font-medium text-slate-500">12:05</p>
|
||||
</div>
|
||||
<!-- Asr -->
|
||||
<div class="flex-shrink-0 w-28 bg-white dark:bg-slate-800 p-4 rounded-xl border border-primary/10 shadow-sm flex flex-col items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">filter_drama</span>
|
||||
<p class="text-sm font-bold">Asr</p>
|
||||
<p class="text-xs font-medium text-slate-500">15:20</p>
|
||||
</div>
|
||||
<!-- Maghrib (Active) -->
|
||||
<div class="flex-shrink-0 w-28 bg-primary/10 dark:bg-primary/20 p-4 rounded-xl border-2 border-primary shadow-sm flex flex-col items-center gap-2 relative">
|
||||
<span class="material-symbols-outlined text-primary">wb_twilight</span>
|
||||
<p class="text-sm font-bold text-primary">Maghrib</p>
|
||||
<p class="text-xs font-bold text-primary">17:55</p>
|
||||
<div class="absolute -top-1 -right-1 bg-white rounded-full p-0.5 shadow-sm border border-primary/20">
|
||||
<span class="material-symbols-outlined text-[14px] text-primary">notifications</span>
|
||||
</div></div>
|
||||
<!-- Isha -->
|
||||
<div class="flex-shrink-0 w-28 bg-white dark:bg-slate-800 p-4 rounded-xl border border-primary/10 shadow-sm flex flex-col items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">dark_mode</span>
|
||||
<p class="text-sm font-bold">Isha</p>
|
||||
<p class="text-xs font-medium text-slate-500">19:10</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Today's Checklist Summary -->
|
||||
<div class="px-6 py-4">
|
||||
<div class="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm border border-primary/5">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 class="font-bold text-lg">Today's Checklist</h3>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400">7 dari 10 Ibadah selesai</p>
|
||||
</div>
|
||||
<div class="size-12 rounded-full border-4 border-slate-100 dark:border-slate-700 flex items-center justify-center relative">
|
||||
<svg class="absolute inset-0 w-full h-full -rotate-90">
|
||||
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125" stroke-dashoffset="37.5" stroke-width="4"></circle>
|
||||
</svg>
|
||||
<span class="text-xs font-bold">70%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-background-light dark:bg-background-dark/50">
|
||||
<span class="material-symbols-outlined text-primary fill-1">check_circle</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-bold">Sholat Fardhu</p>
|
||||
<p class="text-xs text-slate-500">4 of 5 complete</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-background-light dark:bg-background-dark/50">
|
||||
<span class="material-symbols-outlined text-primary fill-1">check_circle</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-bold">Tilawah Quran</p>
|
||||
<p class="text-xs text-slate-500">1 Juz targeted</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full py-3 text-primary font-bold text-sm bg-primary/10 rounded-lg">View Full Checklist</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Weekly Activity Mini Chart -->
|
||||
<div class="px-6 py-2">
|
||||
<h3 class="font-bold text-lg mb-3">Weekly Progress</h3>
|
||||
<div class="bg-white dark:bg-slate-800 rounded-xl p-4 flex justify-between items-end h-24 gap-2 border border-primary/5">
|
||||
<div class="flex flex-col items-center gap-2 w-full">
|
||||
<div class="w-full bg-primary/20 rounded-full h-8 relative">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[60%]"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold opacity-50">Mon</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 w-full">
|
||||
<div class="w-full bg-primary/20 rounded-full h-12 relative">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[80%]"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold opacity-50">Tue</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 w-full">
|
||||
<div class="w-full bg-primary/20 rounded-full h-16 relative">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[100%]"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold opacity-50">Wed</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 w-full">
|
||||
<div class="w-full bg-primary/20 rounded-full h-10 relative">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[40%]"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold opacity-50">Thu</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 w-full">
|
||||
<div class="w-full bg-primary/20 rounded-full h-14 relative">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[70%]"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold opacity-50">Fri</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 w-full">
|
||||
<div class="w-full bg-primary/20 rounded-full h-8 relative">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[30%]"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold opacity-50">Sat</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 w-full">
|
||||
<div class="w-full bg-primary/20 rounded-full h-6 relative">
|
||||
<div class="absolute bottom-0 w-full bg-primary rounded-full h-[20%]"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold opacity-50">Sun</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-900 border-t border-slate-100 dark:border-slate-800 px-2 pb-6 pt-2">
|
||||
<div class="flex justify-around items-center max-w-md mx-auto">
|
||||
<a class="flex flex-col items-center gap-1 p-2 text-primary" href="#">
|
||||
<span class="material-symbols-outlined fill-1">home</span>
|
||||
<span class="text-[10px] font-bold">Home</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 p-2 text-slate-400 dark:text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">calendar_today</span>
|
||||
<span class="text-[10px] font-medium">Calendar</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 p-2 text-slate-400 dark:text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">rule</span>
|
||||
<span class="text-[10px] font-medium">Checklist</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 p-2 text-slate-400 dark:text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">bar_chart</span>
|
||||
<span class="text-[10px] font-medium">Reports</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 p-2 text-slate-400 dark:text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">auto_fix_high</span>
|
||||
<span class="text-[10px] font-medium">Tools</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
BIN
stitch/dashboard_with_adhan_iqamah_logic/screen.png
Normal file
BIN
stitch/dashboard_with_adhan_iqamah_logic/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
177
stitch/dzikir_active_nav/code.html
Normal file
177
stitch/dzikir_active_nav/code.html
Normal file
@@ -0,0 +1,177 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzdjNmI0YmVmY2Y5NjRmMzY5ODdmNmY4ZTQ5OGRiMTQwEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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@300;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>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');
|
||||
.arabic-text {
|
||||
font-family: 'Amiri', serif;
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
<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 antialiased">
|
||||
<!-- Main Container -->
|
||||
<div class="max-w-md mx-auto min-h-screen flex flex-col bg-white dark:bg-slate-900 shadow-xl relative overflow-hidden">
|
||||
<!-- Header -->
|
||||
<header class="sticky top-0 z-10 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-primary/10">
|
||||
<div class="flex items-center p-4 justify-between">
|
||||
<div class="text-slate-900 dark:text-slate-100 flex size-10 items-center justify-center rounded-full hover:bg-primary/10 transition-colors">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold leading-tight tracking-tight flex-1 text-center">Dzikir Pagi & Petang</h2>
|
||||
<div class="flex w-10 items-center justify-end">
|
||||
<button class="flex size-10 items-center justify-center rounded-full hover:bg-primary/10 transition-colors">
|
||||
<span class="material-symbols-outlined">info</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tabbed Interface -->
|
||||
<div class="px-4">
|
||||
<div class="flex border-b border-primary/5">
|
||||
<a class="flex flex-col items-center justify-center border-b-2 border-primary text-primary pb-3 pt-4 flex-1" href="#">
|
||||
<p class="text-sm font-bold tracking-wide">Pagi</p>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center border-b-2 border-transparent text-slate-400 dark:text-slate-500 pb-3 pt-4 flex-1" href="#">
|
||||
<p class="text-sm font-bold tracking-wide">Petang</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 overflow-y-auto pb-24">
|
||||
<!-- Hero Title -->
|
||||
<div class="text-center py-8 px-6 bg-gradient-to-b from-primary/5 to-transparent">
|
||||
<h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-2">Dzikir Pagi</h3>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed max-w-[280px] mx-auto">
|
||||
Dibaca setelah shalat Shubuh hingga terbit matahari
|
||||
</p>
|
||||
</div>
|
||||
<!-- Dhikr List -->
|
||||
<div class="px-4 space-y-6">
|
||||
<!-- Card 1 -->
|
||||
<div class="bg-background-light dark:bg-slate-800/50 rounded-xl p-6 border border-primary/5 shadow-sm">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="bg-primary/20 text-primary text-[10px] font-bold uppercase tracking-widest px-2 py-1 rounded">1 Kali</span>
|
||||
<span class="text-slate-300 dark:text-slate-600 font-bold">01</span>
|
||||
</div>
|
||||
<div class="arabic-text text-3xl leading-[1.8] text-right mb-6 text-slate-800 dark:text-slate-100">
|
||||
أَعُوذُ بِاللَّهِ مِنَ الشَّيْطَانِ الرَّجِيمِ. بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ. اللّهُ لاَ إِلَهَ إِلاَّ هُوَ الْحَيُّ الْقَيُّومُ
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<p class="text-xs italic text-primary font-medium leading-relaxed">
|
||||
Allahu laa ilaha illa huwal hayyul qayyum...
|
||||
</p>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
"Allah, tidak ada Tuhan (yang berhak disembah) melainkan Dia Yang Hidup kekal lagi terus menerus mengurus (makhluk-Nya)..."
|
||||
</p>
|
||||
</div>
|
||||
<!-- Counter Button -->
|
||||
<button class="w-full mt-6 py-4 bg-primary text-slate-900 font-bold rounded-xl flex items-center justify-center gap-2 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
<span>0 / 1</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Card 2 -->
|
||||
<div class="bg-background-light dark:bg-slate-800/50 rounded-xl p-6 border border-primary/5 shadow-sm">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="bg-primary/20 text-primary text-[10px] font-bold uppercase tracking-widest px-2 py-1 rounded">3 Kali</span>
|
||||
<span class="text-slate-300 dark:text-slate-600 font-bold">02</span>
|
||||
</div>
|
||||
<div class="arabic-text text-3xl leading-[1.8] text-right mb-6 text-slate-800 dark:text-slate-100">
|
||||
بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ. قُلْ هُوَ اللَّهُ أَحَدٌ. اللَّهُ الصَّمَدُ
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<p class="text-xs italic text-primary font-medium leading-relaxed">
|
||||
Bismillahir rahmanir rahim. Qul huwallahu ahad...
|
||||
</p>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
"Katakanlah: 'Dialah Allah, Yang Maha Esa. Allah adalah Tuhan yang bergantung kepada-Nya segala sesuatu'."
|
||||
</p>
|
||||
</div>
|
||||
<!-- Counter Button -->
|
||||
<button class="w-full mt-6 py-4 bg-primary/10 text-primary font-bold rounded-xl flex items-center justify-center gap-2 border-2 border-primary/20 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined">touch_app</span>
|
||||
<span>1 / 3</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div class="bg-background-light dark:bg-slate-800/50 rounded-xl p-6 border border-primary/5 shadow-sm">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="bg-primary/20 text-primary text-[10px] font-bold uppercase tracking-widest px-2 py-1 rounded">100 Kali</span>
|
||||
<span class="text-slate-300 dark:text-slate-600 font-bold">03</span>
|
||||
</div>
|
||||
<div class="arabic-text text-3xl leading-[1.8] text-right mb-6 text-slate-800 dark:text-slate-100">
|
||||
سُبْحَانَ اللهِ وَبِحَمْدِهِ
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<p class="text-xs italic text-primary font-medium leading-relaxed">
|
||||
Subhanallahi wa bihamdihi
|
||||
</p>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
"Maha Suci Allah dan segala puji bagi-Nya."
|
||||
</p>
|
||||
</div>
|
||||
<!-- Counter Button -->
|
||||
<button class="w-full mt-6 py-4 bg-primary/10 text-primary font-bold rounded-xl flex items-center justify-center gap-2 border-2 border-primary/20 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined">touch_app</span>
|
||||
<span>42 / 100</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<nav class="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-md bg-white dark:bg-slate-900 border-t border-primary/10 pb-6 pt-2 px-4 flex justify-around">
|
||||
<a class="flex flex-col items-center gap-1 text-slate-400 dark:text-slate-500 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<p class="text-[10px] font-bold uppercase tracking-tighter">Home</p>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-primary" href="#">
|
||||
<span class="material-symbols-outlined fill-1">brightness_medium</span>
|
||||
<p class="text-[10px] font-bold uppercase tracking-tighter">Dzikir</p>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-400 dark:text-slate-500 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">menu_book</span>
|
||||
<p class="text-[10px] font-bold uppercase tracking-tighter">Quran</p>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-400 dark:text-slate-500 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<p class="text-[10px] font-bold uppercase tracking-tighter">Setting</p>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- Floating Action for Completion (Example) -->
|
||||
<div class="fixed bottom-24 right-4 md:right-[calc(50%-200px)]">
|
||||
<button class="size-14 bg-primary text-slate-900 rounded-full shadow-lg shadow-primary/20 flex items-center justify-center active:scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined">check_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
stitch/dzikir_active_nav/screen.png
Normal file
BIN
stitch/dzikir_active_nav/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
133
stitch/dzikir_dark_mode/code.html
Normal file
133
stitch/dzikir_dark_mode/code.html
Normal file
@@ -0,0 +1,133 @@
|
||||
<!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>
|
||||
BIN
stitch/dzikir_dark_mode/screen.png
Normal file
BIN
stitch/dzikir_dark_mode/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
191
stitch/imsakiyah_active_nav/code.html
Normal file
191
stitch/imsakiyah_active_nav/code.html
Normal file
@@ -0,0 +1,191 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Prayer Calendar - Imsakiyah</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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzI3MjRmMmZkODllMDQ0MzA4YjhlNjZlNjA3NTIyNjdlEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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; }
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
</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">
|
||||
<div class="relative flex min-h-screen w-full flex-col max-w-md mx-auto bg-white dark:bg-background-dark shadow-xl">
|
||||
<!-- Top Navigation Bar -->
|
||||
<div class="flex items-center bg-white dark:bg-background-dark p-4 pb-2 justify-between sticky top-0 z-20 border-b border-slate-100 dark:border-slate-800">
|
||||
<div class="text-slate-900 dark:text-slate-100 flex size-10 shrink-0 items-center justify-center rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 cursor-pointer">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</div>
|
||||
<h2 class="text-slate-900 dark:text-slate-100 text-lg font-bold leading-tight tracking-tight flex-1 text-center">Prayer Calendar</h2>
|
||||
<div class="flex w-10 items-center justify-end">
|
||||
<button class="flex items-center justify-center rounded-full size-10 bg-transparent text-slate-900 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Month and Location Selectors -->
|
||||
<div class="p-4 space-y-4">
|
||||
<div class="flex gap-3 overflow-x-auto no-scrollbar py-2">
|
||||
<button class="px-5 py-2 rounded-full bg-primary text-slate-900 font-semibold text-sm whitespace-nowrap">Ramadan 1445H</button>
|
||||
<button class="px-5 py-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 font-medium text-sm whitespace-nowrap">Shawwal 1445H</button>
|
||||
<button class="px-5 py-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 font-medium text-sm whitespace-nowrap">Dhul-Qi'dah</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 bg-slate-50 dark:bg-slate-900 p-4 rounded-xl border border-slate-100 dark:border-slate-800">
|
||||
<span class="material-symbols-outlined text-primary">location_on</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400 font-medium">Your Location</p>
|
||||
<p class="text-sm font-bold text-slate-900 dark:text-slate-100">Jakarta, Indonesia</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-400 text-sm">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Calendar Header -->
|
||||
<div class="px-4 py-2 bg-primary/10 dark:bg-primary/5">
|
||||
<div class="grid grid-cols-7 text-center text-[10px] font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">
|
||||
<span>Day</span>
|
||||
<span>Fajr</span>
|
||||
<span>Sun</span>
|
||||
<span>Dhuhr</span>
|
||||
<span>Asr</span>
|
||||
<span>Magh</span>
|
||||
<span>Isha</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Prayer Times List -->
|
||||
<div class="flex-1 overflow-y-auto px-4 py-2 space-y-2 no-scrollbar">
|
||||
<!-- Day Item (Highlight Today) -->
|
||||
<div class="grid grid-cols-7 items-center text-center p-3 rounded-xl bg-primary shadow-sm shadow-primary/20 ring-1 ring-primary">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[10px] font-bold text-slate-800">MAR</span>
|
||||
<span class="text-base font-extrabold text-slate-900 leading-tight">12</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-slate-900">04:42</span>
|
||||
<span class="text-xs font-medium text-slate-800">05:58</span>
|
||||
<span class="text-xs font-bold text-slate-900">12:04</span>
|
||||
<span class="text-xs font-medium text-slate-800">15:12</span>
|
||||
<span class="text-xs font-bold text-slate-900">18:08</span>
|
||||
<span class="text-xs font-medium text-slate-800">19:17</span>
|
||||
</div>
|
||||
<!-- Regular Day Item -->
|
||||
<div class="grid grid-cols-7 items-center text-center p-3 rounded-xl bg-white dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800 hover:border-primary/50 transition-colors">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[10px] font-bold text-slate-400">MAR</span>
|
||||
<span class="text-base font-bold text-slate-900 dark:text-slate-100 leading-tight">13</span>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">04:42</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">05:58</span>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">12:04</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">15:11</span>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">18:07</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">19:16</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 items-center text-center p-3 rounded-xl bg-white dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[10px] font-bold text-slate-400">MAR</span>
|
||||
<span class="text-base font-bold text-slate-900 dark:text-slate-100 leading-tight">14</span>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">04:41</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">05:58</span>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">12:03</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">15:11</span>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">18:07</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">19:16</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 items-center text-center p-3 rounded-xl bg-white dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[10px] font-bold text-slate-400">MAR</span>
|
||||
<span class="text-base font-bold text-slate-900 dark:text-slate-100 leading-tight">15</span>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">04:41</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">05:58</span>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">12:03</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">15:10</span>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">18:06</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">19:15</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 items-center text-center p-3 rounded-xl bg-white dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[10px] font-bold text-slate-400">MAR</span>
|
||||
<span class="text-base font-bold text-slate-900 dark:text-slate-100 leading-tight">16</span>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">04:41</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">05:58</span>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">12:03</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">15:09</span>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">18:06</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">19:15</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 items-center text-center p-3 rounded-xl bg-white dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[10px] font-bold text-slate-400">MAR</span>
|
||||
<span class="text-base font-bold text-slate-900 dark:text-slate-100 leading-tight">17</span>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">04:41</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">05:57</span>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">12:02</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">15:08</span>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">18:05</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">19:14</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 items-center text-center p-3 rounded-xl bg-white dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[10px] font-bold text-slate-400">MAR</span>
|
||||
<span class="text-base font-bold text-slate-900 dark:text-slate-100 leading-tight">18</span>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">04:41</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">05:57</span>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">12:02</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">15:08</span>
|
||||
<span class="text-xs font-medium text-slate-700 dark:text-slate-300">18:05</span>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-500">19:14</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<div class="flex gap-2 border-t border-slate-100 dark:border-slate-800 bg-white dark:bg-background-dark px-4 pb-6 pt-2 sticky bottom-0">
|
||||
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-400 dark:text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined text-2xl">home</span>
|
||||
<p class="text-[10px] font-medium leading-normal tracking-wide">Home</p>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-primary" href="#">
|
||||
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1">calendar_today</span>
|
||||
<p class="text-[10px] font-bold leading-normal tracking-wide">Calendar</p>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-400 dark:text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined text-2xl">explore</span>
|
||||
<p class="text-[10px] font-medium leading-normal tracking-wide">Qibla</p>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-400 dark:text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined text-2xl">person</span>
|
||||
<p class="text-[10px] font-medium leading-normal tracking-wide">Profile</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
stitch/imsakiyah_active_nav/screen.png
Normal file
BIN
stitch/imsakiyah_active_nav/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
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>
|
||||
BIN
stitch/imsakiyah_dark_mode/screen.png
Normal file
BIN
stitch/imsakiyah_dark_mode/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
117
stitch/kiblat_dark_mode/code.html
Normal file
117
stitch/kiblat_dark_mode/code.html
Normal file
@@ -0,0 +1,117 @@
|
||||
<!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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzc5NGNiZTkyMGM0YzRjYjg4NWU3ZWIyNTIxMGYwYjgxEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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><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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#70df20",
|
||||
"background-light": "#f7f8f6",
|
||||
"background-dark": "#0d120a",
|
||||
"surface-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 Navigation -->
|
||||
<header class="flex items-center p-4 justify-between bg-background-light dark:bg-background-dark sticky top-0 z-10">
|
||||
<button class="flex size-10 shrink-0 items-center justify-center rounded-full hover:bg-slate-200 dark:hover:bg-surface-dark transition-colors">
|
||||
<span class="material-symbols-outlined text-slate-900 dark:text-slate-100">arrow_back</span>
|
||||
</button>
|
||||
<h2 class="text-lg font-bold leading-tight tracking-tight flex-1 text-center">Qibla Direction</h2>
|
||||
<div class="flex w-10 items-center justify-end">
|
||||
<button class="flex size-10 items-center justify-center rounded-full hover:bg-slate-200 dark:hover:bg-surface-dark transition-colors">
|
||||
<span class="material-symbols-outlined text-slate-900 dark:text-slate-100">info</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 flex flex-col items-center justify-center px-6 pb-20">
|
||||
<!-- Degree Display -->
|
||||
<div class="text-center mb-10">
|
||||
<h1 class="text-5xl font-bold tracking-tight text-primary mb-2">128° SE</h1>
|
||||
<div class="flex items-center justify-center gap-2 text-slate-500 dark:text-slate-400">
|
||||
<span class="material-symbols-outlined text-sm">location_on</span>
|
||||
<p class="text-sm font-medium">Makkah, Saudi Arabia</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Minimalist Compass Container -->
|
||||
<div class="relative w-full max-w-[320px] aspect-square flex items-center justify-center">
|
||||
<!-- Outer Ring -->
|
||||
<div class="absolute inset-0 rounded-full border-2 border-slate-200 dark:border-surface-dark opacity-50"></div>
|
||||
<!-- Degree Markers (Decorative) -->
|
||||
<div class="absolute inset-4 rounded-full border border-dashed border-slate-300 dark:border-primary/20"></div>
|
||||
<!-- Compass Background Image / SVG -->
|
||||
<div class="relative w-full h-full flex items-center justify-center">
|
||||
<div class="w-full h-full rounded-full bg-gradient-to-br from-surface-dark to-background-dark border border-primary/10 flex items-center justify-center shadow-2xl">
|
||||
<!-- The Needle -->
|
||||
<div class="relative w-1 h-4/5 flex flex-col items-center rotate-[128deg]">
|
||||
<div class="w-4 h-4 bg-primary rounded-full shadow-[0_0_15px_rgba(112,223,32,0.5)] z-10"></div>
|
||||
<div class="absolute top-0 w-2 h-1/2 bg-primary rounded-t-full"></div>
|
||||
<div class="absolute bottom-0 w-2 h-1/2 bg-slate-700 dark:bg-slate-600 rounded-b-full opacity-40"></div>
|
||||
</div>
|
||||
<!-- Cardinal Points -->
|
||||
<span class="absolute top-6 font-bold text-slate-400">N</span>
|
||||
<span class="absolute bottom-6 font-bold text-slate-400">S</span>
|
||||
<span class="absolute left-6 font-bold text-slate-400">W</span>
|
||||
<span class="absolute right-6 font-bold text-slate-400">E</span>
|
||||
<!-- Kaaba Icon Indicator -->
|
||||
<div class="absolute top-[20%] right-[20%] rotate-[128deg]">
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">mosque</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accuracy Indicator -->
|
||||
<div class="mt-12 flex items-center gap-3 px-6 py-3 rounded-full bg-primary/10 border border-primary/20">
|
||||
<div class="size-2 rounded-full bg-primary animate-pulse"></div>
|
||||
<p class="text-xs font-semibold text-primary uppercase tracking-widest">High Accuracy</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<nav class="fixed bottom-0 w-full border-t border-slate-200 dark:border-surface-dark bg-background-light dark:bg-background-dark px-4 pb-6 pt-3">
|
||||
<div class="flex justify-between items-center max-w-md mx-auto">
|
||||
<a class="flex flex-1 flex-col items-center gap-1 text-slate-400 dark:text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<span class="text-[10px] font-bold uppercase tracking-wider">Home</span>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center gap-1 text-slate-400 dark:text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">schedule</span>
|
||||
<span class="text-[10px] font-bold uppercase tracking-wider">Prayer</span>
|
||||
</a>
|
||||
<!-- Active State: Tools -->
|
||||
<a class="flex flex-1 flex-col items-center gap-1 text-primary" href="#">
|
||||
<div class="bg-primary/10 p-2 rounded-xl mb-[-4px]">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1">explore</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold uppercase tracking-wider">Tools</span>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center gap-1 text-slate-400 dark:text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<span class="text-[10px] font-bold uppercase tracking-wider">Profile</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
BIN
stitch/kiblat_dark_mode/screen.png
Normal file
BIN
stitch/kiblat_dark_mode/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
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 |
200
stitch/laporan_dark_mode/code.html
Normal file
200
stitch/laporan_dark_mode/code.html
Normal file
@@ -0,0 +1,200 @@
|
||||
<!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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzkyNGVhMDg1ZTliYzQyMTc4ZDgzNTVjMTg5YWFjNzU3EgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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;800&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",
|
||||
"sage": {
|
||||
"50": "#f4f7f2",
|
||||
"100": "#e6ede2",
|
||||
"200": "#cedbc7",
|
||||
"300": "#a9c09f",
|
||||
"400": "#81a274",
|
||||
"500": "#638456",
|
||||
"600": "#4d6943",
|
||||
"700": "#3f5437",
|
||||
"800": "#34442f",
|
||||
"900": "#2d3a28",
|
||||
"950": "#171f14",
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
.chart-bar {
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
</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 font-display">
|
||||
<div class="relative flex h-auto min-h-screen w-full flex-col bg-background-light dark:bg-background-dark overflow-x-hidden">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center bg-background-light dark:bg-background-dark p-4 pb-2 justify-between sticky top-0 z-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">arrow_back</span>
|
||||
</div>
|
||||
<h2 class="text-slate-900 dark:text-slate-100 text-lg font-bold leading-tight tracking-tight flex-1 text-center">Reports</h2>
|
||||
<div class="flex w-12 items-center justify-end">
|
||||
<button class="flex items-center justify-center rounded-xl h-12 bg-transparent text-slate-900 dark:text-slate-100 p-0">
|
||||
<span class="material-symbols-outlined">share</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tabs -->
|
||||
<div class="pb-3 sticky top-[64px] bg-background-light dark:bg-background-dark z-10">
|
||||
<div class="flex border-b border-sage-200 dark:border-sage-800 px-4 gap-8">
|
||||
<a class="flex flex-col items-center justify-center border-b-[3px] border-transparent text-slate-500 dark:text-slate-400 pb-[13px] pt-4" href="#">
|
||||
<p class="text-sm font-bold leading-normal">Daily</p>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center border-b-[3px] border-primary text-slate-900 dark:text-slate-100 pb-[13px] pt-4" href="#">
|
||||
<p class="text-sm font-bold leading-normal">Weekly</p>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center border-b-[3px] border-transparent text-slate-500 dark:text-slate-400 pb-[13px] pt-4" href="#">
|
||||
<p class="text-sm font-bold leading-normal">Monthly</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Area -->
|
||||
<main class="flex-1 overflow-y-auto pb-24">
|
||||
<h3 class="text-slate-900 dark:text-slate-100 tracking-tight text-2xl font-bold leading-tight px-4 text-left pb-2 pt-5">Activity Overview</h3>
|
||||
<!-- Summary Card -->
|
||||
<div class="flex flex-wrap gap-4 px-4 py-6">
|
||||
<div class="flex min-w-72 flex-1 flex-col gap-4 bg-sage-100/50 dark:bg-sage-900/30 p-6 rounded-xl border border-sage-200 dark:border-sage-800">
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-slate-500 dark:text-sage-300 text-base font-medium leading-normal">Steps Count</p>
|
||||
<p class="text-slate-900 dark:text-white tracking-tight text-[32px] font-bold leading-tight truncate">54,230</p>
|
||||
<div class="flex items-center gap-1">
|
||||
<p class="text-slate-500 dark:text-sage-400 text-sm font-normal leading-normal">Last 7 days</p>
|
||||
<span class="flex items-center text-primary text-sm font-medium">
|
||||
<span class="material-symbols-outlined text-sm">trending_up</span>
|
||||
+12.5%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chart Section -->
|
||||
<div class="grid min-h-[180px] grid-flow-col gap-3 grid-rows-[1fr_auto] items-end justify-items-center pt-4">
|
||||
<div class="bg-primary/40 dark:bg-primary/20 hover:bg-primary transition-colors w-full rounded-t-sm chart-bar" style="height: 100%;"></div>
|
||||
<p class="text-slate-500 dark:text-sage-400 text-[11px] font-bold mt-2">Mon</p>
|
||||
<div class="bg-primary/40 dark:bg-primary/20 hover:bg-primary transition-colors w-full rounded-t-sm chart-bar" style="height: 30%;"></div>
|
||||
<p class="text-slate-500 dark:text-sage-400 text-[11px] font-bold mt-2">Tue</p>
|
||||
<div class="bg-primary/40 dark:bg-primary/20 hover:bg-primary transition-colors w-full rounded-t-sm chart-bar" style="height: 70%;"></div>
|
||||
<p class="text-slate-500 dark:text-sage-400 text-[11px] font-bold mt-2">Wed</p>
|
||||
<div class="bg-primary/40 dark:bg-primary/20 hover:bg-primary transition-colors w-full rounded-t-sm chart-bar" style="height: 85%;"></div>
|
||||
<p class="text-slate-500 dark:text-sage-400 text-[11px] font-bold mt-2">Thu</p>
|
||||
<div class="bg-primary/40 dark:bg-primary/20 hover:bg-primary transition-colors w-full rounded-t-sm chart-bar" style="height: 20%;"></div>
|
||||
<p class="text-slate-500 dark:text-sage-400 text-[11px] font-bold mt-2">Fri</p>
|
||||
<div class="bg-primary/40 dark:bg-primary/20 hover:bg-primary transition-colors w-full rounded-t-sm chart-bar" style="height: 90%;"></div>
|
||||
<p class="text-slate-500 dark:text-sage-400 text-[11px] font-bold mt-2">Sat</p>
|
||||
<div class="bg-primary/40 dark:bg-primary/20 hover:bg-primary transition-colors w-full rounded-t-sm chart-bar" style="height: 50%;"></div>
|
||||
<p class="text-slate-500 dark:text-sage-400 text-[11px] font-bold mt-2">Sun</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Health Metrics -->
|
||||
<div class="px-4 pb-6 grid grid-cols-2 gap-4">
|
||||
<div class="bg-sage-100/50 dark:bg-sage-900/30 p-4 rounded-xl border border-sage-200 dark:border-sage-800">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="material-symbols-outlined text-primary">favorite</span>
|
||||
<p class="text-slate-500 dark:text-sage-300 text-sm font-medium">Avg Heart Rate</p>
|
||||
</div>
|
||||
<p class="text-2xl font-bold dark:text-white">72 <span class="text-xs font-normal text-slate-400">bpm</span></p>
|
||||
<div class="w-full bg-sage-200 dark:bg-sage-800 h-1.5 rounded-full mt-3 overflow-hidden">
|
||||
<div class="bg-primary h-full w-[65%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-sage-100/50 dark:bg-sage-900/30 p-4 rounded-xl border border-sage-200 dark:border-sage-800">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="material-symbols-outlined text-primary">local_fire_department</span>
|
||||
<p class="text-slate-500 dark:text-sage-300 text-sm font-medium">Calories Burned</p>
|
||||
</div>
|
||||
<p class="text-2xl font-bold dark:text-white">1,450 <span class="text-xs font-normal text-slate-400">kcal</span></p>
|
||||
<div class="w-full bg-sage-200 dark:bg-sage-800 h-1.5 rounded-full mt-3 overflow-hidden">
|
||||
<div class="bg-primary h-full w-[80%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sleep Pattern Card -->
|
||||
<div class="px-4 pb-6">
|
||||
<div class="bg-sage-100/50 dark:bg-sage-900/30 p-6 rounded-xl border border-sage-200 dark:border-sage-800">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<p class="text-slate-500 dark:text-sage-300 text-base font-medium">Sleep Quality</p>
|
||||
<p class="text-2xl font-bold dark:text-white">7h 45m</p>
|
||||
</div>
|
||||
<div class="bg-primary/20 text-primary px-3 py-1 rounded-full text-xs font-bold">Optimal</div>
|
||||
</div>
|
||||
<div class="flex items-end gap-1 h-24">
|
||||
<div class="flex-1 bg-sage-700/40 rounded-t-sm h-[40%]" title="Deep Sleep"></div>
|
||||
<div class="flex-1 bg-primary/60 rounded-t-sm h-[70%]" title="REM"></div>
|
||||
<div class="flex-1 bg-sage-700/40 rounded-t-sm h-[30%]" title="Light Sleep"></div>
|
||||
<div class="flex-1 bg-primary/60 rounded-t-sm h-[80%]" title="REM"></div>
|
||||
<div class="flex-1 bg-sage-700/40 rounded-t-sm h-[50%]" title="Deep Sleep"></div>
|
||||
<div class="flex-1 bg-primary/60 rounded-t-sm h-[60%]" title="REM"></div>
|
||||
<div class="flex-1 bg-sage-700/40 rounded-t-sm h-[20%]" title="Light Sleep"></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-2 text-[10px] text-slate-500 dark:text-sage-400 font-bold uppercase tracking-wider">
|
||||
<span>11 PM</span>
|
||||
<span>2 AM</span>
|
||||
<span>5 AM</span>
|
||||
<span>7 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation -->
|
||||
<div class="fixed bottom-0 left-0 right-0 border-t border-sage-200 dark:border-sage-900 bg-background-light dark:bg-background-dark px-4 pb-6 pt-2 z-20">
|
||||
<div class="flex gap-2">
|
||||
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-400 dark:text-sage-500 transition-colors hover:text-primary" href="#">
|
||||
<div class="flex h-8 items-center justify-center">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
</div>
|
||||
<p class="text-xs font-medium leading-normal">Home</p>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-400 dark:text-sage-500 transition-colors hover:text-primary" href="#">
|
||||
<div class="flex h-8 items-center justify-center">
|
||||
<span class="material-symbols-outlined">fitness_center</span>
|
||||
</div>
|
||||
<p class="text-xs font-medium leading-normal">Workouts</p>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-primary" href="#">
|
||||
<div class="flex h-8 items-center justify-center">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1">bar_chart</span>
|
||||
</div>
|
||||
<p class="text-xs font-bold leading-normal">Reports</p>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center justify-center gap-1 text-slate-400 dark:text-sage-500 transition-colors hover:text-primary" href="#">
|
||||
<div class="flex h-8 items-center justify-center">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
</div>
|
||||
<p class="text-xs font-medium leading-normal">Profile</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
stitch/laporan_dark_mode/screen.png
Normal file
BIN
stitch/laporan_dark_mode/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
122
stitch/qibla_active_nav/code.html
Normal file
122
stitch/qibla_active_nav/code.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html 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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sX2JlNmIxZWZjZjU0OTRjODc5MjQ4ZTAwODQzNGI2MDcxEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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", "sans-serif"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.5rem", "lg": "1rem", "xl": "1.5rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
}
|
||||
.mosque-silhouette {
|
||||
mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
|
||||
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
|
||||
}
|
||||
</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 font-display">
|
||||
<div class="relative flex min-h-screen w-full flex-col overflow-x-hidden">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center px-6 pt-8 pb-4 justify-between">
|
||||
<button class="flex size-10 items-center justify-center rounded-full bg-white dark:bg-slate-800 shadow-sm">
|
||||
<span class="material-symbols-outlined text-slate-900 dark:text-slate-100">arrow_back</span>
|
||||
</button>
|
||||
<h2 class="text-lg font-bold tracking-tight flex-1 text-center">Qibla Finder</h2>
|
||||
<button class="flex size-10 items-center justify-center rounded-full bg-white dark:bg-slate-800 shadow-sm">
|
||||
<span class="material-symbols-outlined text-slate-900 dark:text-slate-100">my_location</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Main Content -->
|
||||
<div class="flex flex-1 flex-col items-center justify-center px-6 pb-20">
|
||||
<!-- Location & Degree Info -->
|
||||
<div class="text-center mb-10">
|
||||
<div class="flex items-center justify-center gap-2 mb-2">
|
||||
<span class="material-symbols-outlined text-primary text-sm">location_on</span>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm font-medium">Mecca, Saudi Arabia</p>
|
||||
</div>
|
||||
<h1 class="text-5xl font-bold tracking-tight text-slate-900 dark:text-slate-100">292° <span class="text-primary">NW</span></h1>
|
||||
</div>
|
||||
<!-- Compass Visual -->
|
||||
<div class="relative w-full max-w-[320px] aspect-square flex items-center justify-center">
|
||||
<!-- Outer Ring -->
|
||||
<div class="absolute inset-0 rounded-full border-2 border-primary/20 flex items-center justify-center">
|
||||
<div class="absolute inset-2 rounded-full border border-dashed border-primary/30"></div>
|
||||
</div>
|
||||
<!-- Degree Markers -->
|
||||
<div class="absolute inset-0 flex items-center justify-center opacity-30">
|
||||
<div class="h-full w-px bg-slate-300 dark:bg-slate-700"></div>
|
||||
<div class="absolute h-full w-px bg-slate-300 dark:bg-slate-700 rotate-90"></div>
|
||||
<div class="absolute h-full w-px bg-slate-300 dark:bg-slate-700 rotate-45"></div>
|
||||
<div class="absolute h-full w-px bg-slate-300 dark:bg-slate-700 -rotate-45"></div>
|
||||
</div>
|
||||
<!-- Compass Needle / Interactive Element -->
|
||||
<div class="relative z-10 w-full h-full flex items-center justify-center rotate-[292deg]">
|
||||
<!-- The Kaaba Icon at the destination -->
|
||||
<div class="absolute -top-4 bg-primary text-slate-900 rounded-lg p-2 shadow-lg shadow-primary/40">
|
||||
<span class="material-symbols-outlined text-2xl font-bold">mosque</span>
|
||||
</div>
|
||||
<!-- Needle -->
|
||||
<div class="w-1.5 h-[45%] bg-gradient-to-t from-transparent via-primary to-primary rounded-full mb-[45%] shadow-[0_0_15px_rgba(112,223,32,0.5)]"></div>
|
||||
</div>
|
||||
<!-- Center Point -->
|
||||
<div class="absolute z-20 size-6 bg-white dark:bg-slate-800 rounded-full border-4 border-primary shadow-md"></div>
|
||||
</div>
|
||||
<!-- Calibration Message -->
|
||||
<div class="mt-12 bg-primary/10 px-4 py-2 rounded-full border border-primary/20">
|
||||
<p class="text-xs font-semibold text-primary uppercase tracking-widest">Compass Calibrated</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative Background Element (Mosque Silhouette) -->
|
||||
<div class="fixed bottom-16 left-0 right-0 h-32 opacity-10 pointer-events-none flex items-end justify-center">
|
||||
<div class="w-full h-full bg-primary mosque-silhouette" data-alt="Minimalist silhouette of a mosque dome and minarets"></div>
|
||||
</div>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<div class="mt-auto border-t border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md px-6 pb-8 pt-4">
|
||||
<div class="flex justify-between items-center max-w-md mx-auto"><a class="flex flex-col items-center gap-1 group" href="#">
|
||||
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">schedule</span>
|
||||
<span class="text-[10px] font-bold uppercase tracking-wider text-slate-400 group-hover:text-primary transition-colors">Prayer</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-primary" href="#">
|
||||
<div class="relative flex flex-col items-center">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1">explore</span>
|
||||
<div class="absolute -bottom-1 size-1 bg-primary rounded-full"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold uppercase tracking-wider">Qibla</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 group" href="#">
|
||||
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">menu_book</span>
|
||||
<span class="text-[10px] font-bold uppercase tracking-wider text-slate-400 group-hover:text-primary transition-colors">Quran</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 group" href="#">
|
||||
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">settings</span>
|
||||
<span class="text-[10px] font-bold uppercase tracking-wider text-slate-400 group-hover:text-primary transition-colors">Settings</span>
|
||||
</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
stitch/qibla_active_nav/screen.png
Normal file
BIN
stitch/qibla_active_nav/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
185
stitch/quran_dark_mode/code.html
Normal file
185
stitch/quran_dark_mode/code.html
Normal file
@@ -0,0 +1,185 @@
|
||||
<!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>
|
||||
BIN
stitch/quran_dark_mode/screen.png
Normal file
BIN
stitch/quran_dark_mode/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
219
stitch/quran_murattal_active_nav/code.html
Normal file
219
stitch/quran_murattal_active_nav/code.html
Normal file
@@ -0,0 +1,219 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzQwM2UzN2ZmMWQxZjQ5NjE4ODNkMDM5MmEyNmQzNDA2EgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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",
|
||||
"sage": {
|
||||
"50": "#f4f7f1",
|
||||
"100": "#e6ede1",
|
||||
"200": "#d1dec8",
|
||||
"300": "#b1c5a3",
|
||||
"400": "#8ea87b",
|
||||
"500": "#728d5e",
|
||||
"600": "#5a7149",
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Plus Jakarta Sans"],
|
||||
"arabic": ["Amiri", "serif"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.5rem", "lg": "1rem", "xl": "1.5rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');
|
||||
.arabic-text {
|
||||
font-family: 'Amiri', serif;
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
<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 antialiased">
|
||||
<!-- Main Container -->
|
||||
<div class="relative flex h-screen flex-col overflow-hidden max-w-md mx-auto bg-white dark:bg-background-dark shadow-2xl">
|
||||
<!-- Sticky Header -->
|
||||
<header class="flex items-center justify-between px-4 py-4 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-sage-100 dark:border-sage-900 sticky top-0 z-10">
|
||||
<button class="flex size-10 items-center justify-center rounded-full hover:bg-sage-50 dark:hover:bg-sage-900 transition-colors">
|
||||
<span class="material-symbols-outlined text-slate-700 dark:text-slate-300">arrow_back</span>
|
||||
</button>
|
||||
<div class="flex flex-col items-center">
|
||||
<h2 class="text-lg font-bold leading-tight">Al-Fatihah</h2>
|
||||
<p class="text-[10px] font-medium text-sage-500 uppercase tracking-widest">7 Ayat • Mekkah</p>
|
||||
</div>
|
||||
<button class="flex size-10 items-center justify-center rounded-full hover:bg-sage-50 dark:hover:bg-sage-900 transition-colors">
|
||||
<span class="material-symbols-outlined text-slate-700 dark:text-slate-300">settings</span>
|
||||
</button>
|
||||
</header>
|
||||
<!-- Surah Progress & Navigation -->
|
||||
<div class="bg-white dark:bg-background-dark px-4 py-4 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-semibold text-primary">Ayat 1</span>
|
||||
<span class="text-xs text-slate-400 dark:text-slate-500">dari 7</span>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button class="p-1 rounded-lg bg-sage-50 dark:bg-sage-900 text-sage-600 dark:text-sage-400">
|
||||
<span class="material-symbols-outlined text-lg">chevron_left</span>
|
||||
</button>
|
||||
<button class="p-1 rounded-lg bg-primary/10 text-primary">
|
||||
<span class="material-symbols-outlined text-lg">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-sage-100 dark:bg-sage-900 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary rounded-full transition-all duration-500" style="width: 14.2%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Area -->
|
||||
<main class="flex-1 overflow-y-auto px-4 py-6 space-y-10 custom-scrollbar">
|
||||
<!-- Bismillah Section -->
|
||||
<div class="text-center py-4">
|
||||
<h1 class="arabic-text text-3xl font-bold mb-4 text-slate-800 dark:text-slate-100">بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ</h1>
|
||||
<p class="text-sm italic text-sage-500 dark:text-sage-400">"Dengan nama Allah Yang Maha Pengasih, Maha Penyayang."</p>
|
||||
</div>
|
||||
<!-- Ayat Card 1 -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex justify-between items-start gap-4">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="size-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold text-xs border border-primary/30">
|
||||
1
|
||||
</div>
|
||||
<button class="text-sage-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-xl">play_circle</span>
|
||||
</button>
|
||||
<button class="text-sage-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-xl">bookmark</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 text-right">
|
||||
<p class="arabic-text text-4xl leading-[1.8] text-slate-800 dark:text-slate-100">ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَـٰلَمِينَ</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-12">
|
||||
<p class="text-base text-slate-700 dark:text-slate-300 leading-relaxed">Segala puji bagi Allah, Tuhan semesta alam.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Separator -->
|
||||
<div class="flex justify-center py-2 opacity-20">
|
||||
<div class="h-px w-24 bg-sage-300"></div>
|
||||
<div class="mx-4 text-sage-400">✦</div>
|
||||
<div class="h-px w-24 bg-sage-300"></div>
|
||||
</div>
|
||||
<!-- Ayat Card 2 -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex justify-between items-start gap-4">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="size-8 rounded-full bg-sage-100 dark:bg-sage-900 flex items-center justify-center text-sage-600 dark:text-sage-400 font-bold text-xs">
|
||||
2
|
||||
</div>
|
||||
<button class="text-sage-400">
|
||||
<span class="material-symbols-outlined text-xl">play_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 text-right">
|
||||
<p class="arabic-text text-4xl leading-[1.8] text-slate-800 dark:text-slate-100">ٱلرَّحْمَـٰنِ ٱلرَّحِيمِ</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-12">
|
||||
<p class="text-base text-slate-700 dark:text-slate-300 leading-relaxed">Maha Pengasih, Maha Penyayang.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Ayat Card 3 -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex justify-between items-start gap-4">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="size-8 rounded-full bg-sage-100 dark:bg-sage-900 flex items-center justify-center text-sage-600 dark:text-sage-400 font-bold text-xs">
|
||||
3
|
||||
</div>
|
||||
<button class="text-sage-400">
|
||||
<span class="material-symbols-outlined text-xl">play_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 text-right">
|
||||
<p class="arabic-text text-4xl leading-[1.8] text-slate-800 dark:text-slate-100">مَـٰلِكِ يَوْمِ ٱلدِّينِ</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-12">
|
||||
<p class="text-base text-slate-700 dark:text-slate-300 leading-relaxed">Pemilik hari pembalasan.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Padding for bottom nav -->
|
||||
<div class="h-24"></div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<nav class="absolute bottom-0 left-0 right-0 bg-white/95 dark:bg-background-dark/95 backdrop-blur-lg border-t border-sage-100 dark:border-sage-900 px-6 pb-6 pt-3 flex justify-between items-center z-20"><a class="flex flex-col items-center gap-1 text-sage-400 dark:text-sage-500 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<span class="text-[10px] font-semibold">Home</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-primary transition-colors" href="#">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1">book_2</span>
|
||||
<div class="absolute -top-1 -right-1 size-2 bg-primary rounded-full border-2 border-white dark:border-background-dark"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold">Quran</span>
|
||||
</a>
|
||||
<div class="relative -top-8">
|
||||
<button class="size-14 rounded-full bg-primary text-white shadow-lg shadow-primary/30 flex items-center justify-center border-4 border-white dark:border-background-dark hover:scale-105 transition-transform">
|
||||
<span class="material-symbols-outlined text-3xl">add</span>
|
||||
</button>
|
||||
</div>
|
||||
<a class="flex flex-col items-center gap-1 text-sage-400 dark:text-sage-500 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">description</span>
|
||||
<span class="text-[10px] font-semibold">Diary</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-sage-400 dark:text-sage-500 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<span class="text-[10px] font-semibold">Profile</span>
|
||||
</a></nav>
|
||||
<!-- Audio Player Overlay (Subtle) -->
|
||||
<div class="absolute bottom-24 left-4 right-4 bg-sage-600 dark:bg-sage-700/90 backdrop-blur-md rounded-2xl p-3 flex items-center gap-4 text-white shadow-2xl shadow-primary/20 border border-white/10">
|
||||
<div class="relative flex-shrink-0">
|
||||
<div class="size-12 rounded-xl bg-primary/20 flex items-center justify-center border border-white/20">
|
||||
<span class="material-symbols-outlined text-primary text-2xl">bar_chart</span>
|
||||
</div>
|
||||
<div class="absolute -bottom-1 -right-1 size-4 bg-primary rounded-full border-2 border-sage-600 flex items-center justify-center">
|
||||
<div class="size-1.5 bg-white rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h4 class="text-xs font-bold truncate leading-none mb-1">Mishary Rashid Alafasy</h4>
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="text-[10px] text-sage-100/80 truncate font-medium">Playing Al-Fatihah</p>
|
||||
<span class="text-[10px] opacity-40">•</span>
|
||||
<span class="text-[10px] text-primary font-bold">1:24</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="size-8 flex items-center justify-center hover:bg-white/10 rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined text-xl">skip_previous</span>
|
||||
</button>
|
||||
<button class="size-10 flex items-center justify-center bg-white text-sage-600 rounded-full shadow-lg hover:scale-105 transition-transform">
|
||||
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1">pause</span>
|
||||
</button>
|
||||
<button class="size-8 flex items-center justify-center hover:bg-white/10 rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined text-xl">skip_next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
stitch/quran_murattal_active_nav/screen.png
Normal file
BIN
stitch/quran_murattal_active_nav/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
212
stitch/quran_reading_active_nav/code.html
Normal file
212
stitch/quran_reading_active_nav/code.html
Normal file
@@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sX2Q1OWU3OTg4ZDgwZDRjZWY4MzlhYmU3NmIxYTA5NWRlEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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",
|
||||
"sage": {
|
||||
"50": "#f4f7f1",
|
||||
"100": "#e6ede1",
|
||||
"200": "#d1dec8",
|
||||
"300": "#b1c5a3",
|
||||
"400": "#8ea87b",
|
||||
"500": "#728d5e",
|
||||
"600": "#5a7149",
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Plus Jakarta Sans"],
|
||||
"arabic": ["Amiri", "serif"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.5rem", "lg": "1rem", "xl": "1.5rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');
|
||||
.arabic-text {
|
||||
font-family: 'Amiri', serif;
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
<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 antialiased">
|
||||
<!-- Main Container -->
|
||||
<div class="relative flex h-screen flex-col overflow-hidden max-w-md mx-auto bg-white dark:bg-background-dark shadow-2xl">
|
||||
<!-- Sticky Header -->
|
||||
<header class="flex items-center justify-between px-4 py-4 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-sage-100 dark:border-sage-900 sticky top-0 z-10">
|
||||
<button class="flex size-10 items-center justify-center rounded-full hover:bg-sage-50 dark:hover:bg-sage-900 transition-colors">
|
||||
<span class="material-symbols-outlined text-slate-700 dark:text-slate-300">arrow_back</span>
|
||||
</button>
|
||||
<div class="flex flex-col items-center">
|
||||
<h2 class="text-lg font-bold leading-tight">Al-Fatihah</h2>
|
||||
<p class="text-[10px] font-medium text-sage-500 uppercase tracking-widest">7 Ayat • Mekkah</p>
|
||||
</div>
|
||||
<button class="flex size-10 items-center justify-center rounded-full hover:bg-sage-50 dark:hover:bg-sage-900 transition-colors">
|
||||
<span class="material-symbols-outlined text-slate-700 dark:text-slate-300">settings</span>
|
||||
</button>
|
||||
</header>
|
||||
<!-- Surah Progress & Navigation -->
|
||||
<div class="bg-white dark:bg-background-dark px-4 py-4 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-semibold text-primary">Ayat 1</span>
|
||||
<span class="text-xs text-slate-400 dark:text-slate-500">dari 7</span>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button class="p-1 rounded-lg bg-sage-50 dark:bg-sage-900 text-sage-600 dark:text-sage-400">
|
||||
<span class="material-symbols-outlined text-lg">chevron_left</span>
|
||||
</button>
|
||||
<button class="p-1 rounded-lg bg-primary/10 text-primary">
|
||||
<span class="material-symbols-outlined text-lg">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-sage-100 dark:bg-sage-900 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary rounded-full transition-all duration-500" style="width: 14.2%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Area -->
|
||||
<main class="flex-1 overflow-y-auto px-4 py-6 space-y-10 custom-scrollbar">
|
||||
<!-- Bismillah Section -->
|
||||
<div class="text-center py-4">
|
||||
<h1 class="arabic-text text-3xl font-bold mb-4 text-slate-800 dark:text-slate-100">بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ</h1>
|
||||
<p class="text-sm italic text-sage-500 dark:text-sage-400">"Dengan nama Allah Yang Maha Pengasih, Maha Penyayang."</p>
|
||||
</div>
|
||||
<!-- Ayat Card 1 -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex justify-between items-start gap-4">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="size-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold text-xs border border-primary/30">
|
||||
1
|
||||
</div>
|
||||
<button class="text-sage-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-xl">play_circle</span>
|
||||
</button>
|
||||
<button class="text-sage-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-xl">bookmark</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 text-right">
|
||||
<p class="arabic-text text-4xl leading-[1.8] text-slate-800 dark:text-slate-100">ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَـٰلَمِينَ</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-12">
|
||||
<p class="text-base text-slate-700 dark:text-slate-300 leading-relaxed">Segala puji bagi Allah, Tuhan semesta alam.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Separator -->
|
||||
<div class="flex justify-center py-2 opacity-20">
|
||||
<div class="h-px w-24 bg-sage-300"></div>
|
||||
<div class="mx-4 text-sage-400">✦</div>
|
||||
<div class="h-px w-24 bg-sage-300"></div>
|
||||
</div>
|
||||
<!-- Ayat Card 2 -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex justify-between items-start gap-4">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="size-8 rounded-full bg-sage-100 dark:bg-sage-900 flex items-center justify-center text-sage-600 dark:text-sage-400 font-bold text-xs">
|
||||
2
|
||||
</div>
|
||||
<button class="text-sage-400">
|
||||
<span class="material-symbols-outlined text-xl">play_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 text-right">
|
||||
<p class="arabic-text text-4xl leading-[1.8] text-slate-800 dark:text-slate-100">ٱلرَّحْمَـٰنِ ٱلرَّحِيمِ</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-12">
|
||||
<p class="text-base text-slate-700 dark:text-slate-300 leading-relaxed">Maha Pengasih, Maha Penyayang.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Ayat Card 3 -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex justify-between items-start gap-4">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="size-8 rounded-full bg-sage-100 dark:bg-sage-900 flex items-center justify-center text-sage-600 dark:text-sage-400 font-bold text-xs">
|
||||
3
|
||||
</div>
|
||||
<button class="text-sage-400">
|
||||
<span class="material-symbols-outlined text-xl">play_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 text-right">
|
||||
<p class="arabic-text text-4xl leading-[1.8] text-slate-800 dark:text-slate-100">مَـٰلِكِ يَوْمِ ٱلدِّينِ</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-12">
|
||||
<p class="text-base text-slate-700 dark:text-slate-300 leading-relaxed">Pemilik hari pembalasan.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Padding for bottom nav -->
|
||||
<div class="h-24"></div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<nav class="absolute bottom-0 left-0 right-0 bg-white/95 dark:bg-background-dark/95 backdrop-blur-lg border-t border-sage-100 dark:border-sage-900 px-6 pb-6 pt-3 flex justify-between items-center z-20">
|
||||
<a class="flex flex-col items-center gap-1 text-sage-400 dark:text-sage-500 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[24px]">home</span>
|
||||
<span class="text-[10px] font-semibold uppercase tracking-wider">Home</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-primary transition-colors" href="#">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined text-[24px]" style="font-variation-settings: 'FILL' 1">book_2</span>
|
||||
<div class="absolute -top-0.5 -right-0.5 size-1.5 bg-primary rounded-full ring-2 ring-white dark:ring-background-dark"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold uppercase tracking-wider">Quran</span>
|
||||
</a>
|
||||
<div class="relative -top-8">
|
||||
<button class="size-14 rounded-full bg-primary text-white shadow-lg shadow-primary/30 flex items-center justify-center border-4 border-white dark:border-background-dark active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-3xl">add</span>
|
||||
</button>
|
||||
</div>
|
||||
<a class="flex flex-col items-center gap-1 text-sage-400 dark:text-sage-500 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[24px]">description</span>
|
||||
<span class="text-[10px] font-semibold uppercase tracking-wider">Diary</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-sage-400 dark:text-sage-500 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[24px]">person</span>
|
||||
<span class="text-[10px] font-semibold uppercase tracking-wider">Profile</span>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- Audio Player Overlay (Subtle) -->
|
||||
<div class="absolute bottom-24 left-4 right-4 bg-sage-600 dark:bg-sage-500 rounded-xl p-3 flex items-center gap-3 text-white shadow-xl">
|
||||
<div class="size-10 rounded-lg bg-white/20 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined">equalizer</span>
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<p class="text-xs font-bold truncate">Mishary Rashid Alafasy</p>
|
||||
<p class="text-[10px] opacity-80 truncate">Playing Al-Fatihah</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="size-8 flex items-center justify-center hover:bg-white/10 rounded-full">
|
||||
<span class="material-symbols-outlined">skip_previous</span>
|
||||
</button>
|
||||
<button class="size-8 flex items-center justify-center bg-white text-sage-600 rounded-full">
|
||||
<span class="material-symbols-outlined">pause</span>
|
||||
</button>
|
||||
<button class="size-8 flex items-center justify-center hover:bg-white/10 rounded-full">
|
||||
<span class="material-symbols-outlined">skip_next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
stitch/quran_reading_active_nav/screen.png
Normal file
BIN
stitch/quran_reading_active_nav/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
157
stitch/settings_dark_mode/code.html
Normal file
157
stitch/settings_dark_mode/code.html
Normal file
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Settings - 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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzkxMjcyM2VmYWFjMjQyZWI4MzU2ZDc2NGUyYWYwNGUyEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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;
|
||||
}
|
||||
.material-symbols-outlined.fill {
|
||||
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="sticky top-0 z-10 bg-background-light dark:bg-background-dark border-b border-primary/10">
|
||||
<div class="flex items-center p-4 justify-between">
|
||||
<button class="text-slate-900 dark:text-slate-100 flex size-12 shrink-0 items-center justify-start focus:outline-none">
|
||||
<span class="material-symbols-outlined text-2xl">arrow_back</span>
|
||||
</button>
|
||||
<h2 class="text-slate-900 dark:text-slate-100 text-lg font-bold leading-tight tracking-[-0.015em] flex-1">Settings</h2>
|
||||
<div class="size-12"></div> <!-- Spacer for centering -->
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content -->
|
||||
<main class="flex-1 overflow-y-auto pb-24">
|
||||
<!-- Profile Section -->
|
||||
<section class="p-4 flex items-center gap-4 border-b border-primary/5">
|
||||
<div class="size-16 rounded-full bg-primary/20 flex items-center justify-center border-2 border-primary overflow-hidden">
|
||||
<img alt="Profile" class="w-full h-full object-cover" data-alt="Professional headshot of a smiling man" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAffOpFkl3o5FUB0KF6wBfRyhbVfF4MDSHWwQ7bY5epiE6RUKBTiW58LYXUe7A1hUJZIKFRU-9SaoePlwjA_0S2kW95jB6f4cIdgz5-XBAF9Ak3IHgGeefX2sqrj8FZVT34mJDfuf1-65pIReDR1J-U5BEPJJEDUVFeqN1bXjhkRC7jbVIMHhGUN6nc_vUAgvwQLe94PhGEeG9GuYGAp1xosQ9tUT-v5KgYuByljNUwsjWnDaUTu7FfI1ZikkYosw2mAWCjQNhJbPij"/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-lg text-slate-900 dark:text-slate-100">Alex Rivers</h3>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400">alex.rivers@example.com</p>
|
||||
</div>
|
||||
<button class="ml-auto text-primary">
|
||||
<span class="material-symbols-outlined">edit</span>
|
||||
</button>
|
||||
</section>
|
||||
<!-- Preferences Group -->
|
||||
<h3 class="text-slate-900 dark:text-slate-100 text-sm font-bold uppercase tracking-wider px-4 pb-2 pt-6 opacity-60">Preferences</h3>
|
||||
<!-- Dark Mode Toggle (ON) -->
|
||||
<div class="flex items-center gap-4 bg-white dark:bg-primary/5 mx-4 my-1 p-4 rounded-xl justify-between transition-colors">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-primary flex items-center justify-center rounded-lg bg-primary/10 shrink-0 size-10">
|
||||
<span class="material-symbols-outlined fill">dark_mode</span>
|
||||
</div>
|
||||
<p class="text-slate-900 dark:text-slate-100 text-base font-medium flex-1 truncate">Dark Mode</p>
|
||||
</div>
|
||||
<div class="shrink-0">
|
||||
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-slate-200 dark:bg-slate-700 p-0.5 justify-end bg-primary">
|
||||
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
|
||||
<input checked="" class="invisible absolute" type="checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Notifications Toggle -->
|
||||
<div class="flex items-center gap-4 bg-white dark:bg-primary/5 mx-4 my-1 p-4 rounded-xl justify-between transition-colors">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-primary flex items-center justify-center rounded-lg bg-primary/10 shrink-0 size-10">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</div>
|
||||
<p class="text-slate-900 dark:text-slate-100 text-base font-medium flex-1 truncate">Notifications</p>
|
||||
</div>
|
||||
<div class="shrink-0">
|
||||
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-slate-200 dark:bg-slate-700 p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary">
|
||||
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
|
||||
<input checked="" class="invisible absolute" type="checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Privacy & Security -->
|
||||
<h3 class="text-slate-900 dark:text-slate-100 text-sm font-bold uppercase tracking-wider px-4 pb-2 pt-6 opacity-60">Account</h3>
|
||||
<div class="flex flex-col gap-1 mx-4">
|
||||
<a class="flex items-center gap-4 bg-white dark:bg-primary/5 p-4 rounded-xl transition-colors" href="#">
|
||||
<div class="text-primary flex items-center justify-center rounded-lg bg-primary/10 shrink-0 size-10">
|
||||
<span class="material-symbols-outlined">lock</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-slate-900 dark:text-slate-100 text-base font-medium">Privacy & Security</p>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400">Manage your data and visibility</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-400">chevron_right</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-4 bg-white dark:bg-primary/5 p-4 rounded-xl transition-colors" href="#">
|
||||
<div class="text-primary flex items-center justify-center rounded-lg bg-primary/10 shrink-0 size-10">
|
||||
<span class="material-symbols-outlined">payments</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-slate-900 dark:text-slate-100 text-base font-medium">Billing Details</p>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400">Update payment methods</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-400">chevron_right</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Logout -->
|
||||
<div class="mt-8 px-4">
|
||||
<button class="w-full flex items-center justify-center gap-2 p-4 rounded-xl bg-red-500/10 text-red-500 font-bold border border-red-500/20">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation -->
|
||||
<nav class="fixed bottom-0 left-0 right-0 bg-background-light dark:bg-background-dark border-t border-primary/10 px-4 pb-6 pt-2 z-20">
|
||||
<div class="flex gap-2 max-w-md mx-auto">
|
||||
<a class="flex flex-1 flex-col items-center justify-end gap-1 text-slate-400 dark:text-slate-500 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<p class="text-[10px] font-medium leading-normal tracking-tight">Home</p>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center justify-end gap-1 text-slate-400 dark:text-slate-500 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">search</span>
|
||||
<p class="text-[10px] font-medium leading-normal tracking-tight">Search</p>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center justify-end gap-1 text-slate-400 dark:text-slate-500 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<p class="text-[10px] font-medium leading-normal tracking-tight">Profile</p>
|
||||
</a>
|
||||
<a class="flex flex-1 flex-col items-center justify-end gap-1 text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined fill">settings</span>
|
||||
<p class="text-[10px] font-bold leading-normal tracking-tight">Settings</p>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
BIN
stitch/settings_dark_mode/screen.png
Normal file
BIN
stitch/settings_dark_mode/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
229
stitch/settings_with_dark_mode_option/code.html
Normal file
229
stitch/settings_with_dark_mode_option/code.html
Normal file
@@ -0,0 +1,229 @@
|
||||
<!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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzc1NzczOTk0M2NjMTQ1Y2I4MTBjMDNhM2E3YWM3YzRkEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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",
|
||||
"sage": "#728764",
|
||||
"cream": "#f2f4f0",
|
||||
"background-light": "#f7f8f6",
|
||||
"background-dark": "#182111",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Plus Jakarta Sans", "sans-serif"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.5rem", "lg": "1rem", "xl": "1.5rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<title>Settings - Deen App</title>
|
||||
<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">
|
||||
<!-- Header -->
|
||||
<header class="sticky top-0 z-50 bg-background-light/80 backdrop-blur-md border-b border-cream dark:border-sage/20 px-4 py-4">
|
||||
<div class="max-w-md mx-auto flex items-center gap-4">
|
||||
<button class="flex items-center justify-center size-10 rounded-full hover:bg-cream transition-colors">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="text-xl font-bold tracking-tight">Settings</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-md mx-auto pb-32">
|
||||
<!-- Section: Notifications -->
|
||||
<section class="mt-6">
|
||||
<h2 class="px-6 mb-2 text-xs font-bold uppercase tracking-wider text-sage">Notifications</h2>
|
||||
<div class="bg-white dark:bg-slate-900/50 mx-4 rounded-xl overflow-hidden shadow-sm border border-cream dark:border-sage/10">
|
||||
<!-- Adhan Times -->
|
||||
<div class="divide-y divide-cream dark:divide-sage/10">
|
||||
<div class="flex items-center justify-between p-4">
|
||||
<div>
|
||||
<p class="font-medium">Fajr Adhan</p>
|
||||
<p class="text-sm text-sage">Notification for dawn prayer</p>
|
||||
</div>
|
||||
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
|
||||
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
|
||||
<input checked="" class="invisible absolute" type="checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4">
|
||||
<div>
|
||||
<p class="font-medium">Dhuhr Adhan</p>
|
||||
<p class="text-sm text-sage">Notification for noon prayer</p>
|
||||
</div>
|
||||
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
|
||||
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
|
||||
<input checked="" class="invisible absolute" type="checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4">
|
||||
<div>
|
||||
<p class="font-medium">Asr Adhan</p>
|
||||
<p class="text-sm text-sage">Notification for afternoon prayer</p>
|
||||
</div>
|
||||
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
|
||||
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
|
||||
<input checked="" class="invisible absolute" type="checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4">
|
||||
<div>
|
||||
<p class="font-medium">Maghrib & Isha</p>
|
||||
<p class="text-sm text-sage">Evening and Night prayer alerts</p>
|
||||
</div>
|
||||
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
|
||||
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
|
||||
<input checked="" class="invisible absolute" type="checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
<!-- Additional Reminders -->
|
||||
<div class="flex items-center justify-between p-4">
|
||||
<div>
|
||||
<p class="font-medium">Iqamah Countdown</p>
|
||||
<p class="text-sm text-sage">Time remaining until congregational prayer</p>
|
||||
</div>
|
||||
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
|
||||
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
|
||||
<input class="invisible absolute" type="checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section: Display Settings -->
|
||||
<section class="mt-8">
|
||||
<h2 class="px-6 mb-2 text-xs font-bold uppercase tracking-wider text-sage">Display Settings</h2>
|
||||
<div class="bg-white dark:bg-slate-900/50 mx-4 rounded-xl overflow-hidden shadow-sm border border-cream dark:border-sage/10">
|
||||
<div class="divide-y divide-cream dark:divide-sage/10">
|
||||
<div class="flex items-center justify-between p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-sage">play_circle</span>
|
||||
<p class="font-medium">Murattal Player</p>
|
||||
</div>
|
||||
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
|
||||
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
|
||||
<input checked="" class="invisible absolute" type="checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-sage">translate</span>
|
||||
<p class="font-medium">Show Translation</p>
|
||||
</div>
|
||||
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
|
||||
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
|
||||
<input checked="" class="invisible absolute" type="checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-col p-4 gap-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-sage">format_size</span>
|
||||
<p class="font-medium">Arabic Font Size</p>
|
||||
</div>
|
||||
<input class="w-full h-2 bg-cream rounded-lg appearance-none cursor-pointer accent-primary" max="42" min="16" type="range" value="24"/>
|
||||
<div class="flex justify-between text-xs text-sage">
|
||||
<span>Small</span>
|
||||
<span>Medium</span>
|
||||
<span>Large</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-sage">dark_mode</span>
|
||||
<p class="font-medium">Dark Mode</p>
|
||||
</div>
|
||||
<label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full border-none bg-cream p-0.5 has-[:checked]:justify-end has-[:checked]:bg-primary transition-all">
|
||||
<div class="h-full w-[27px] rounded-full bg-white shadow-md"></div>
|
||||
<input class="invisible absolute" type="checkbox"/>
|
||||
</label>
|
||||
</div><button class="w-full flex items-center justify-between p-4 text-left hover:bg-cream/30 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-sage">language</span>
|
||||
<p class="font-medium">App Language</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="text-sm text-sage">Bahasa Indonesia</p>
|
||||
<span class="material-symbols-outlined text-sage text-lg">chevron_right</span>
|
||||
</div>
|
||||
</button></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section: Daily Checklist -->
|
||||
<section class="mt-8">
|
||||
<h2 class="px-6 mb-2 text-xs font-bold uppercase tracking-wider text-sage">Daily Checklist</h2>
|
||||
<div class="bg-white dark:bg-slate-900/50 mx-4 rounded-xl overflow-hidden shadow-sm border border-cream dark:border-sage/10">
|
||||
<div class="divide-y divide-cream dark:divide-sage/10">
|
||||
<button class="w-full flex items-center justify-between p-4 text-left hover:bg-cream/30 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-sage">edit_calendar</span>
|
||||
<p class="font-medium">Customize Tasks</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-sage">chevron_right</span>
|
||||
</button>
|
||||
<button class="w-full flex items-center justify-between p-4 text-left hover:bg-cream/30 transition-colors text-red-500">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined">restart_alt</span>
|
||||
<p class="font-medium">Reset Checklist Progress</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section: App Info -->
|
||||
<section class="mt-8">
|
||||
<h2 class="px-6 mb-2 text-xs font-bold uppercase tracking-wider text-sage">App Info</h2>
|
||||
<div class="bg-white dark:bg-slate-900/50 mx-4 rounded-xl overflow-hidden shadow-sm border border-cream dark:border-sage/10">
|
||||
<div class="divide-y divide-cream dark:divide-sage/10">
|
||||
<button class="w-full flex items-center justify-between p-4 text-left hover:bg-cream/30 transition-colors">
|
||||
<p class="font-medium">About Deen App</p>
|
||||
<span class="material-symbols-outlined text-sage">chevron_right</span>
|
||||
</button>
|
||||
<div class="flex items-center justify-between p-4">
|
||||
<p class="font-medium">Version</p>
|
||||
<p class="text-sm text-sage">2.4.0 (Build 102)</p>
|
||||
</div>
|
||||
<button class="w-full flex items-center justify-between p-4 text-left hover:bg-cream/30 transition-colors">
|
||||
<p class="font-medium">Privacy Policy</p>
|
||||
<span class="material-symbols-outlined text-sage">open_in_new</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-cream px-4 pb-6 pt-2 z-50">
|
||||
<div class="max-w-md mx-auto flex justify-between items-center">
|
||||
<a class="flex flex-col items-center gap-1 text-sage opacity-60" href="#">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<p class="text-[10px] font-medium uppercase tracking-tighter">Home</p>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-sage opacity-60" href="#">
|
||||
<span class="material-symbols-outlined">menu_book</span>
|
||||
<p class="text-[10px] font-medium uppercase tracking-tighter">Quran</p>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-sage opacity-60" href="#">
|
||||
<span class="material-symbols-outlined">folded_hands</span>
|
||||
<p class="text-[10px] font-medium uppercase tracking-tighter">Dua</p>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-primary" href="#">
|
||||
<span class="material-symbols-outlined font-bold" style="font-variation-settings: 'FILL' 1">settings</span>
|
||||
<p class="text-[10px] font-bold uppercase tracking-tighter">Settings</p>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
BIN
stitch/settings_with_dark_mode_option/screen.png
Normal file
BIN
stitch/settings_with_dark_mode_option/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
Reference in New Issue
Block a user