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

200 lines
11 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%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzkyNGVhMDg1ZTliYzQyMTc4ZDgzNTVjMTg5YWFjNzU3EgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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;800&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",
"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>
Reference in New Issue View Git Blame Copy Permalink