dwindown/jamshalat-masjid-screen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial project import and stabilization baseline

Browse Source
This commit is contained in:
dwindown
2026-03-30 21:28:44 +07:00
commit ad33b01231
186 changed files with 20445 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
stitch/main_screen_normal_view/code.html Normal file
View File

@@ -0,0 +1,243 @@
<!DOCTYPE html>
<html class="dark" lang="id"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Masjid Al-Mustafa - Digital Prayer Clock</title>
<script type="text/javascript" nonce="114b03e98e7c433dba2239ea142" src="//local.adguard.org?ts=1774798104100&amp;type=content-script&amp;dmn=contribution.usercontent.google.com&amp;url=https%3A%2F%2Fcontribution.usercontent.google.com%2Fdownload%3Fc%3DCgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sX2NlMjAwMjUxYjExMzQwODM4NzUwMjdkNTUxZTY4OWMxEgsSBxDjguyrxhUYAZIBIwoKcHJvamVjdF9pZBIVQhMxMzc1OTg2NjM0OTQyOTUwODA4%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="114b03e98e7c433dba2239ea142" src="//local.adguard.org?ts=1774798104100&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;family=Manrope: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: {
"surface-container": "#201f1f",
"on-secondary-fixed-variant": "#574500",
"surface-container-lowest": "#0e0e0e",
"on-tertiary-fixed-variant": "#544600",
"primary": "#88d982",
"outline-variant": "#3f4945",
"surface-tint": "#88d982",
"on-secondary-container": "#342800",
"primary-container": "#004f11",
"inverse-primary": "#1b6d24",
"surface-bright": "#393939",
"on-surface-variant": "#bfc9c4",
"surface-container-high": "#2a2a2a",
"on-primary-fixed": "#002204",
"outline": "#89938f",
"background": "#131313",
"surface-dim": "#131313",
"tertiary-fixed-dim": "#e9c400",
"inverse-surface": "#e5e2e1",
"surface": "#131313",
"on-secondary": "#3c2f00",
"on-error": "#690005",
"on-primary-container": "#72c36e",
"surface-variant": "#353534",
"on-tertiary-container": "#4b3e00",
"on-secondary-fixed": "#241a00",
"on-surface": "#e5e2e1",
"surface-container-low": "#1c1b1b",
"on-tertiary-fixed": "#221b00",
"on-primary-fixed-variant": "#005312",
"inverse-on-surface": "#313030",
"tertiary-fixed": "#ffe16d",
"error": "#ffb4ab",
"tertiary": "#e9c400",
"error-container": "#93000a",
"secondary-fixed-dim": "#e9c349",
"on-primary": "#003909",
"on-error-container": "#ffdad6",
"primary-fixed": "#a3f69c",
"surface-container-highest": "#353534",
"primary-fixed-dim": "#88d982",
"secondary": "#e9c349",
"secondary-container": "#af8d11",
"on-tertiary": "#3a3000",
"on-background": "#e5e2e1",
"tertiary-container": "#c8a900",
"secondary-fixed": "#ffe088"
},
fontFamily: {
"headline": ["Plus Jakarta Sans"],
"body": ["Manrope"],
"label": ["Manrope"]
},
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.marquee-container {
overflow: hidden;
white-space: nowrap;
}
.marquee-text {
display: inline-block;
padding-left: 100%;
animation: marquee 30s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
.glass-panel {
background: rgba(28, 27, 27, 0.7);
backdrop-filter: blur(16px);
}
.clock-glow {
text-shadow: 0 0 40px rgba(136, 217, 130, 0.2);
}
</style>
</head>
<body class="bg-background text-on-surface font-body w-[1920px] h-[1080px] overflow-hidden flex flex-col relative">
<!-- Background Layer -->
<div class="absolute inset-0 z-0">
<img class="w-full h-full object-cover opacity-30 grayscale-[0.5]" data-alt="cinematic interior of a grand modern mosque with high arched ceilings and soft atmospheric lighting reflecting on polished marble floors" src="https://lh3.googleusercontent.com/aida-public/AB6AXuABiWy8EjpJVShwTPI8W12BT2pNy1GwDLNXJ5hMIjMO97SB5YPwThWuRrauVqEpYaCXKaZnSYIQM82wMqS29vHATmOkZKcLaIkaTQzk_VAwJtTPnDLfwyHRH_lFHuPBNay8WC3XqfYqWGWNQNEh45t_UwH8Wf6XiqHHkUscN1uXA9tjm5_o4A4UVdyFwbPTWpPUmd8Qb5VfwUt53nmAn1sxrsa9GYwji_5-iq_417nwVh1x3ptFLwInxvXSS9-fp2j4kaPolQiR800"/>
<div class="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/80"></div>
</div>
<!-- Top Navigation Shell (TopAppBar) -->
<header class="z-50 flex justify-between items-center w-full px-16 py-8 bg-[#131313] docked full-width top-0">
<div class="flex flex-col">
<h1 class="font-['Plus_Jakarta_Sans'] text-[2rem] font-bold tracking-tight text-[#88d982]">Masjid Al-Mustafa</h1>
<div class="flex items-center gap-2 mt-1">
<span class="material-symbols-outlined text-[#e9c349] text-lg">location_on</span>
<span class="text-[#e5e2e1] opacity-70 font-medium tracking-wide">Jl. Merdeka No. 45, Jakarta</span>
</div>
</div>
<div class="flex items-center gap-8">
<div class="text-right">
<p class="font-headline text-xl font-bold text-on-surface">12 Ramadhan 1445 H</p>
<p class="font-body text-sm text-on-surface-variant tracking-widest uppercase">22 Maret 2024</p>
</div>
<div class="w-16 h-16 bg-surface-container-highest rounded-full flex items-center justify-center">
<span class="material-symbols-outlined text-secondary text-3xl" style="font-variation-settings: 'FILL' 1;">mosque</span>
</div>
</div>
</header>
<!-- Main Content Area: The Celestial Anchor -->
<main class="relative z-10 flex-1 flex flex-col items-center justify-center px-16">
<!-- Massive Clock & Countdown Section -->
<div class="text-center space-y-6">
<div class="inline-flex items-center px-6 py-2 rounded-full border border-primary/20 bg-primary/5 mb-4">
<span class="relative flex h-3 w-3 mr-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-secondary opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-secondary"></span>
</span>
<span class="font-headline font-bold text-secondary tracking-wider text-xl">Menuju Adzan Ashar: 15 menit 23 detik</span>
</div>
<div class="flex flex-col items-center">
<h2 class="font-headline text-[12rem] font-extrabold leading-none tracking-tighter text-on-surface clock-glow">
14:45<span class="text-primary text-[6rem] align-top ml-2">:28</span>
</h2>
<div class="h-1 w-64 bg-gradient-to-r from-transparent via-primary/40 to-transparent mt-4"></div>
</div>
<div class="flex gap-12 mt-8">
<div class="flex flex-col items-center">
<span class="text-on-surface-variant text-xs font-bold tracking-[0.3em] uppercase mb-2">Terbit</span>
<span class="font-headline text-3xl font-semibold">05:58</span>
</div>
<div class="w-px h-12 bg-outline-variant/30"></div>
<div class="flex flex-col items-center">
<span class="text-on-surface-variant text-xs font-bold tracking-[0.3em] uppercase mb-2">Imsak</span>
<span class="font-headline text-3xl font-semibold">04:32</span>
</div>
<div class="w-px h-12 bg-outline-variant/30"></div>
<div class="flex flex-col items-center">
<span class="text-on-surface-variant text-xs font-bold tracking-[0.3em] uppercase mb-2">Dhuha</span>
<span class="font-headline text-3xl font-semibold">06:24</span>
</div>
</div>
</div>
</main>
<!-- Footer Prayer Cards Section -->
<section class="relative z-10 px-16 pb-12">
<div class="grid grid-cols-6 gap-6 h-48">
<!-- Subuh -->
<div class="bg-surface-container-low p-6 rounded-xl flex flex-col justify-between hover:bg-surface-container-high transition-colors">
<span class="text-on-surface-variant font-bold text-sm tracking-widest uppercase">Subuh</span>
<div>
<span class="block font-headline text-4xl font-bold mb-1">04:42</span>
<span class="text-xs text-on-surface-variant">Iqamah 04:52</span>
</div>
</div>
<!-- Terbit (Decorative/Non-Prayer highlight) -->
<div class="bg-surface-container-low p-6 rounded-xl flex flex-col justify-between opacity-60">
<span class="text-on-surface-variant font-bold text-sm tracking-widest uppercase">Terbit</span>
<div>
<span class="block font-headline text-4xl font-bold mb-1">05:58</span>
<span class="text-xs text-on-surface-variant">-</span>
</div>
</div>
<!-- Dzuhur -->
<div class="bg-surface-container-low p-6 rounded-xl flex flex-col justify-between">
<span class="text-on-surface-variant font-bold text-sm tracking-widest uppercase">Dzuhur</span>
<div>
<span class="block font-headline text-4xl font-bold mb-1">12:04</span>
<span class="text-xs text-on-surface-variant">Iqamah 12:14</span>
</div>
</div>
<!-- Ashar (ACTIVE/NEXT) -->
<div class="bg-primary-container p-6 rounded-xl flex flex-col justify-between border-l-4 border-primary ring-1 ring-primary/20 shadow-[0_0_40px_rgba(136,217,130,0.1)]">
<div class="flex justify-between items-start">
<span class="text-on-primary-container font-bold text-sm tracking-widest uppercase">Ashar</span>
<span class="material-symbols-outlined text-on-primary-container" style="font-variation-settings: 'FILL' 1;">notifications_active</span>
</div>
<div>
<span class="block font-headline text-4xl font-bold mb-1 text-on-primary-container">15:18</span>
<span class="text-xs text-on-primary-container/80">Iqamah 15:28</span>
</div>
</div>
<!-- Maghrib -->
<div class="bg-surface-container-low p-6 rounded-xl flex flex-col justify-between">
<span class="text-on-surface-variant font-bold text-sm tracking-widest uppercase">Maghrib</span>
<div>
<span class="block font-headline text-4xl font-bold mb-1">18:08</span>
<span class="text-xs text-on-surface-variant">Iqamah 18:18</span>
</div>
</div>
<!-- Isya -->
<div class="bg-surface-container-low p-6 rounded-xl flex flex-col justify-between">
<span class="text-on-surface-variant font-bold text-sm tracking-widest uppercase">Isya</span>
<div>
<span class="block font-headline text-4xl font-bold mb-1">19:17</span>
<span class="text-xs text-on-surface-variant">Iqamah 19:27</span>
</div>
</div>
</div>
</section>
<!-- Scrolling Marquee Footer Shell -->
<footer class="fixed bottom-0 w-full z-50 py-4 px-12 flex justify-center items-center overflow-hidden bg-[#131313]/90 backdrop-blur-md border-t border-[#353534]/10">
<div class="marquee-container w-full">
<div class="marquee-text flex items-center gap-12 font-['Manrope'] text-lg font-medium tracking-[0.05em] text-[#e9c349]">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined">info</span>
<span>Pemberitahuan: Luruskan dan Rapatkan Saf Shalat Berjamaah</span>
</div>
<div class="flex items-center gap-4">
<span class="material-symbols-outlined">volunteer_activism</span>
<span>Infaq Masjid: Bank Syariah 12345678 a.n. Masjid Al-Mustafa</span>
</div>
<div class="flex items-center gap-4">
<span class="material-symbols-outlined">campaign</span>
<span>Jadwal Shalat Akurat - Kemenag RI</span>
</div>
<!-- Duplicate for seamless loop -->
<div class="flex items-center gap-4">
<span class="material-symbols-outlined">info</span>
<span>Pemberitahuan: Luruskan dan Rapatkan Saf Shalat Berjamaah</span>
</div>
</div>
</div>
</footer>
<!-- Subtle Vignette Overlay -->
<div class="pointer-events-none fixed inset-0 z-20 shadow-[inset_0_0_200px_rgba(0,0,0,0.5)]"></div>
</body></html>