faadc1865d
- 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
122 lines
6.9 KiB
HTML
122 lines
6.9 KiB
HTML
<!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> |