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

157 lines
8.5 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Settings - Dark Mode</title>
<script type="text/javascript" nonce="8f27cbf2996843058862961733f" src="//local.adguard.org?ts=1772749416438&amp;type=content-script&amp;dmn=contribution.usercontent.google.com&amp;url=https%3A%2F%2Fcontribution.usercontent.google.com%2Fdownload%3Fc%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzkxMjcyM2VmYWFjMjQyZWI4MzU2ZDc2NGUyYWYwNGUyEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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,FILL@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;
}
.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 &amp; 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>
Reference in New Issue View Git Blame Copy Permalink