dwindown/jamshalat-diary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
jamshalat-diary/stitch/checklist_dark_mode/code.html
dwindown faadc1865d feat: Murattal player enhancements & prayer schedule auto-scroll 
- Murattal: Spotify-style 5-button controls [Shuffle, Prev, Play, Next, Playlist]
- Murattal: Animated 7-bar equalizer visualization in player circle
- Murattal: Unsplash API background with frosted glass player overlay
- Murattal: Transparent AppBar with backdrop blur
- Murattal: Surah playlist bottom sheet with full 114 Surah list
- Murattal: Auto-play disabled on screen open, enabled on navigation
- Murattal: Shuffle mode for random Surah playback
- Murattal: Photographer attribution per Unsplash guidelines
- Dashboard: Auto-scroll prayer schedule to next active prayer
- Fix: setState lifecycle errors on Reading & Murattal screens
- Setup: flutter_dotenv, cached_network_image, url_launcher deps
2026-03-13 15:42:17 +07:00

150 lines
9.0 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script type="text/javascript" nonce="8f27cbf2996843058862961733f" src="//local.adguard.org?ts=1772749416438&amp;type=content-script&amp;dmn=contribution.usercontent.google.com&amp;url=https%3A%2F%2Fcontribution.usercontent.google.com%2Fdownload%3Fc%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzA0YjVhZDA4YTM5NTRmMTM4ZTI2YTU0OTM2NjYwODk1EgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%26filename%3D%26opi%3D89354086&amp;app=com.google.Chrome&amp;css=3&amp;js=1&amp;rel=1&amp;rji=1&amp;sbe=1"></script><script type="text/javascript" nonce="8f27cbf2996843058862961733f" src="//local.adguard.org?ts=1772749416438&amp;name=AdGuard%20Extra&amp;type=user-script"></script><script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#70df20",
"background-light": "#f7f8f6",
"background-dark": "#182111",
},
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>
Reference in New Issue View Git Blame Copy Permalink