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
commit faadc1865d
189 changed files with 23834 additions and 0 deletions
--- a/stitch/kiblat_dark_mode/code.html
+++ b/stitch/kiblat_dark_mode/code.html
@@ -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&amp;type=content-script&amp;dmn=contribution.usercontent.google.com&amp;url=https%3A%2F%2Fcontribution.usercontent.google.com%2Fdownload%3Fc%3DCgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzc5NGNiZTkyMGM0YzRjYjg4NWU3ZWIyNTIxMGYwYjgxEgsSBxDjguyrxhUYAZIBJAoKcHJvamVjdF9pZBIWQhQxNzc5MjQ5MDUzODQ5MjE2NTk2MQ%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><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 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>
--- a/stitch/kiblat_dark_mode/screen.png
+++ b/stitch/kiblat_dark_mode/screen.png