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

197
stitch/adzan_alert_state/code.html Normal file
View File

@@ -0,0 +1,197 @@
<!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 - Adzan Alert</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%3DCgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sX2VkZTY4Yjk4NjFmMTRmY2VhZWRkZTY1ZmQxYzA2YzU5EgsSBxDjguyrxhUYAZIBIwoKcHJvamVjdF9pZBIVQhMxMzc1OTg2NjM0OTQyOTUwODA4%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>
body {
background-color: #131313;
color: #e5e2e1;
overflow: hidden;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.text-glow-primary {
text-shadow: 0 0 30px rgba(136, 217, 130, 0.3);
}
.text-glow-secondary {
text-shadow: 0 0 40px rgba(233, 195, 73, 0.4);
}
.marquee {
white-space: nowrap;
overflow: hidden;
display: inline-block;
animation: marquee 30s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>
</head>
<body class="font-body selection:bg-primary selection:text-on-primary h-screen w-screen relative flex flex-col items-center justify-between">
<!-- Background Layer with Gradient and Image -->
<div class="absolute inset-0 z-0">
<div class="absolute inset-0 bg-gradient-to-t from-background via-background/80 to-transparent z-10"></div>
<img class="w-full h-full object-cover opacity-30 blur-sm" data-alt="Interior of a majestic modern mosque with soft warm lighting reflecting on marble floors and high arched ceilings in twilight atmosphere" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD2QYKtW9QUcp4k2MI0pprlxKtQ11kHpv3sdrC0JMWurUi9HK7DCnYvvmwHA1lhODp2dqMF7oOLyqHCRGAaqLPgf_pcxWeBEmE0nXjnUPxAQZK1R1ZMJrqkTISBsYkdMGYUkRrmhvocTmXooflCWVCTw35jxuzDbK-oBxHiAbIYVtj8pWOQykIIULC0cnDqNeYad0TlyuzaN4ghT00AmrrzbYHCPHsSk2QB7FzHSqw2lPn2U1agJp9rfM9UNcSVXxEa9Syo7TZwSgA"/>
</div>
<!-- Top Navigation Anchor (Content & Styling from JSON) -->
<header class="bg-[#131313] dark:bg-[#131313] docked full-width top-0 z-20 flex justify-between items-center w-full px-16 py-8">
<div class="flex flex-col">
<h1 class="font-['Plus_Jakarta_Sans'] text-[2rem] font-bold tracking-tight text-[#88d982]">Masjid Al-Mustafa</h1>
<p class="text-[#e9c349] font-medium tracking-tighter text-sm">Jl. Merdeka No. 45, Jakarta</p>
</div>
<div class="flex items-center gap-8">
<div class="flex flex-col items-end">
<span class="text-[#e5e2e1] opacity-70 font-['Plus_Jakarta_Sans'] text-xl">15 Sya'ban 1445 H</span>
<span class="text-[#88d982] font-bold text-lg">Kamis, 15 Juni 2024</span>
</div>
</div>
</header>
<!-- Main Content: Adzan Alert Central Canvas -->
<main class="relative z-20 flex flex-col items-center justify-center flex-grow w-full max-w-7xl px-12 text-center">
<!-- Alert Icon & Visual Pulse -->
<div class="mb-12 relative">
<div class="absolute inset-0 bg-secondary/10 rounded-full blur-[60px] animate-pulse"></div>
<span class="material-symbols-outlined text-[10rem] text-secondary leading-none relative z-10" style="font-variation-settings: 'FILL' 1;">
notifications_active
</span>
</div>
<!-- Call to Prayer Header -->
<div class="mb-6">
<h2 class="font-headline text-[5.5rem] font-extrabold text-secondary tracking-[-0.03em] leading-none uppercase text-glow-secondary">
WAKTU ADZAN ASHAR
</h2>
</div>
<!-- The Clock - Highest Contrast Element -->
<div class="mb-8">
<div class="inline-flex items-center bg-surface-container-highest/40 backdrop-blur-xl px-12 py-6 rounded-full border border-outline-variant/15 shadow-2xl">
<span class="font-headline text-[8rem] font-bold text-primary tracking-tighter leading-none text-glow-primary">
15:28
</span>
<div class="ml-6 flex flex-col items-start">
<span class="text-on-surface/50 font-bold text-4xl leading-tight">32</span>
<span class="text-primary text-xl font-medium tracking-widest uppercase">WIB</span>
</div>
</div>
</div>
<!-- Sub-message -->
<p class="font-body text-2xl text-on-surface/80 max-w-2xl leading-relaxed font-medium">
Telah masuk waktu shalat Ashar untuk wilayah DKI Jakarta dan sekitarnya.
<span class="text-secondary block mt-2">Segera persiapkan diri menuju masjid.</span>
</p>
</main>
<!-- Footer Area (Grid for Prayer Times & Marquee) -->
<footer class="relative z-20 w-full">
<!-- Prayer Times Strip -->
<div class="w-full bg-surface-container-low/80 backdrop-blur-md px-16 py-10 flex justify-between items-center">
<div class="flex flex-col opacity-40">
<span class="text-on-surface font-label text-sm uppercase tracking-widest mb-1">Subuh</span>
<span class="text-on-surface font-headline text-3xl font-semibold">04:42</span>
</div>
<div class="flex flex-col opacity-40">
<span class="text-on-surface font-label text-sm uppercase tracking-widest mb-1">Dzuhur</span>
<span class="text-on-surface font-headline text-3xl font-semibold">11:58</span>
</div>
<!-- Active Selection State -->
<div class="flex flex-col bg-primary/10 px-8 py-4 rounded-xl border-l-4 border-primary shadow-lg shadow-primary/5">
<span class="text-primary font-label text-sm uppercase tracking-[0.2em] font-bold mb-1">Ashar</span>
<span class="text-primary font-headline text-4xl font-bold">15:18</span>
</div>
<div class="flex flex-col opacity-40">
<span class="text-on-surface font-label text-sm uppercase tracking-widest mb-1">Maghrib</span>
<span class="text-on-surface font-headline text-3xl font-semibold">17:54</span>
</div>
<div class="flex flex-col opacity-40">
<span class="text-on-surface font-label text-sm uppercase tracking-widest mb-1">Isya</span>
<span class="text-on-surface font-headline text-3xl font-semibold">19:08</span>
</div>
<div class="flex flex-col opacity-40">
<span class="text-secondary font-label text-sm uppercase tracking-widest mb-1">Syuruq</span>
<span class="text-on-surface font-headline text-3xl font-semibold">05:58</span>
</div>
</div>
<!-- Marquee Text Shell (Content & Styling from JSON) -->
<div class="bg-[#131313]/90 backdrop-blur-md border-t border-[#353534]/10 w-full py-4 px-12 overflow-hidden flex items-center justify-center">
<div class="w-full overflow-hidden whitespace-nowrap">
<p class="marquee font-['Manrope'] text-lg font-medium tracking-[0.05em] text-[#e9c349]">
Pemberitahuan: Luruskan dan Rapatkan Saf • Infaq Masjid: Bank Syariah 12345678 • Jadwal Shalat Akurat - Kemenag RI • Mohon nonaktifkan suara handphone anda • Bersihkan diri sebelum menghadap Sang Pencipta.
</p>
</div>
</div>
</footer>
<!-- Side Decoration (Ghost Graphics) -->
<div class="absolute left-10 top-1/2 -translate-y-1/2 opacity-5 pointer-events-none select-none">
<span class="material-symbols-outlined text-[30rem]">mosque</span>
</div>
</body></html>

BIN
stitch/adzan_alert_state/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 688 KiB

218
stitch/friday_khutbah_information_screen/code.html Normal file
View File

@@ -0,0 +1,218 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Friday Khutbah Info - Al-Masjid Al-Haram</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%3DCgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzRjN2I3ZDU4ZjZkZjRiOGI4ODY0NDdjNGE0MzNlYjNkEgsSBxDjguyrxhUYAZIBIwoKcHJvamVjdF9pZBIVQhMxMzc1OTg2NjM0OTQyOTUwODA4%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: {
"on-primary": "#003909",
"on-tertiary-container": "#4b3e00",
"surface-tint": "#88d982",
"primary": "#88d982",
"secondary-container": "#af8d11",
"on-surface-variant": "#bfc9c4",
"on-secondary-fixed-variant": "#574500",
"surface-container-high": "#2a2a2a",
"surface-container-highest": "#353534",
"outline-variant": "#3f4945",
"tertiary-fixed": "#ffe16d",
"on-secondary": "#3c2f00",
"on-error-container": "#ffdad6",
"on-tertiary-fixed": "#221b00",
"secondary-fixed": "#ffe088",
"secondary": "#e9c349",
"surface": "#131313",
"on-primary-fixed": "#002204",
"inverse-on-surface": "#313030",
"background": "#131313",
"outline": "#89938f",
"on-surface": "#e5e2e1",
"surface-container-low": "#1c1b1b",
"surface-dim": "#131313",
"surface-bright": "#393939",
"on-secondary-container": "#342800",
"tertiary-fixed-dim": "#e9c400",
"surface-container-lowest": "#0e0e0e",
"error-container": "#93000a",
"secondary-fixed-dim": "#e9c349",
"on-primary-container": "#72c36e",
"on-error": "#690005",
"on-tertiary": "#3a3000",
"inverse-primary": "#1b6d24",
"on-tertiary-fixed-variant": "#544600",
"on-secondary-fixed": "#241a00",
"tertiary-container": "#c8a900",
"primary-fixed-dim": "#88d982",
"inverse-surface": "#e5e2e1",
"tertiary": "#e9c400",
"primary-fixed": "#a3f69c",
"primary-container": "#004f11",
"error": "#ffb4ab",
"surface-container": "#201f1f",
"on-primary-fixed-variant": "#005312",
"surface-variant": "#353534",
"on-background": "#e5e2e1"
},
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;
}
.celestial-bg {
background: radial-gradient(circle at 50% 50%, rgba(136, 217, 130, 0.05) 0%, rgba(19, 19, 19, 1) 70%);
}
.marquee-container {
overflow: hidden;
display: flex;
}
.marquee-content {
display: flex;
animation: marquee 30s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
</style>
</head>
<body class="bg-background text-on-surface font-body overflow-hidden h-screen celestial-bg">
<!-- Top Navigation Anchor -->
<header class="fixed top-0 left-0 w-full z-40 bg-[#131313]">
<div class="flex justify-between items-center w-full px-16 py-8">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-3xl text-primary" data-icon="mosque">mosque</span>
<h1 class="font-headline font-bold tracking-tight text-3xl text-primary uppercase">Al-Masjid Al-Haram</h1>
</div>
<div class="flex flex-col items-end">
<span class="font-body font-semibold tracking-wide text-on-surface/70 uppercase text-sm">123 Sacred Way, Holy City</span>
<span class="font-headline font-bold text-secondary">Jumu'ah Mubarak</span>
</div>
</div>
</header>
<!-- Main Content: The Sacred Horizon Canvas -->
<main class="relative h-full flex flex-col justify-center px-16">
<!-- Large Corner Digital Clock (Top Right) -->
<div class="absolute top-32 right-16 text-right">
<div class="font-headline font-bold text-[5rem] leading-none tracking-tighter text-on-surface">12:45</div>
<div class="font-label text-xl text-primary tracking-[0.2em] font-medium uppercase mt-2">Friday, 12 July 2024</div>
</div>
<!-- Central Khutbah Content: Asymmetric Editorial Layout -->
<div class="max-w-6xl w-full grid grid-cols-12 gap-12 items-center">
<div class="col-span-7 space-y-12">
<!-- Main Header -->
<div class="space-y-2">
<span class="font-label text-secondary font-bold tracking-[0.3em] uppercase text-sm">Special Service</span>
<h2 class="font-headline font-extrabold text-[7rem] leading-[0.9] tracking-tighter text-on-surface">KHUTBAH<br/><span class="text-primary">JUMAT</span></h2>
</div>
<!-- Officers Cards -->
<div class="grid grid-cols-2 gap-6">
<!-- Khatib Card -->
<div class="bg-surface-container-low p-8 rounded-xl border-l-4 border-primary transition-all hover:bg-surface-container-highest">
<span class="font-label text-xs font-bold tracking-widest text-on-surface/40 uppercase block mb-2">Khatib</span>
<h3 class="font-headline text-2xl font-bold text-on-surface">KH. Ahmad Dahlan</h3>
</div>
<!-- Imam Card -->
<div class="bg-surface-container-low p-8 rounded-xl border-l-4 border-secondary transition-all hover:bg-surface-container-highest">
<span class="font-label text-xs font-bold tracking-widest text-on-surface/40 uppercase block mb-2">Imam</span>
<h3 class="font-headline text-2xl font-bold text-on-surface">Ust. Mansur</h3>
</div>
</div>
<!-- Infaq Reminder -->
<div class="inline-flex items-center gap-6 bg-surface-container-highest/40 backdrop-blur-md p-6 rounded-xl border border-outline-variant/15">
<div class="w-12 h-12 bg-secondary/20 rounded-full flex items-center justify-center">
<span class="material-symbols-outlined text-secondary" data-icon="volunteer_activism" style="font-variation-settings: 'FILL' 1;">volunteer_activism</span>
</div>
<div>
<p class="font-headline text-lg font-bold text-on-surface">Siapkan Infaq Terbaik Anda</p>
<p class="font-body text-sm text-on-surface/60">Every contribution supports the house of Allah.</p>
</div>
</div>
</div>
<!-- Asymmetric Visual Element -->
<div class="col-span-5 relative">
<div class="aspect-[4/5] rounded-xl overflow-hidden shadow-[0_0_80px_rgba(136,217,130,0.05)] border border-outline-variant/10">
<img class="w-full h-full object-cover grayscale opacity-60" data-alt="atmospheric architectural shot of a grand mosque interior with soft morning light streaming through high windows onto prayer rugs" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB71ASY7l0rsyWxRwWv9gxQf8-wTKBdqdtfYm8pOwJ1vwJ-IDZu-CsmgCFRaUPB6APg2vzm-9IakDGdpt9aMkbgGhZfOSsWB677bzdy1-79R3LiLVs8FHprb62ecci7r5CzeY4JH8_TjO6mbz8Xd165T6nNmpjW5M27_pRSXuE_tjUcgzeBgIelLwZSvhX_0Ed3d02fwEwtcbH0PLMOtuEWONcTYXkYUe0LcOho6wKAPTriXWeZFV-vf4foh2DAd8PDv-S9qvMw4y8"/>
<div class="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent"></div>
<div class="absolute bottom-8 left-8 right-8 text-center bg-surface-variant/70 backdrop-blur-xl p-6 rounded-xl">
<span class="material-symbols-outlined text-secondary text-4xl mb-2" data-icon="timer">timer</span>
<p class="font-headline text-xl font-bold">Iqamah in 15:00</p>
</div>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation: Prayer Times Grid -->
<nav class="fixed bottom-12 left-0 w-full z-50 flex justify-around items-center px-12">
<div class="flex justify-around items-center w-full bg-[#1c1b1b] rounded-xl py-4 shadow-[0_0_40px_rgba(136,217,130,0.1)]">
<!-- Fajr -->
<div class="flex flex-col items-center justify-center text-[#e5e2e1]/60 px-8 py-4 transition-all hover:bg-[#353534]">
<span class="material-symbols-outlined mb-1" data-icon="brightness_low">brightness_low</span>
<span class="font-label font-medium text-lg">Fajr</span>
<span class="font-headline font-bold text-on-surface">04:42</span>
</div>
<!-- Sunrise -->
<div class="flex flex-col items-center justify-center text-[#e5e2e1]/60 px-8 py-4 transition-all hover:bg-[#353534]">
<span class="material-symbols-outlined mb-1" data-icon="wb_twilight">wb_twilight</span>
<span class="font-label font-medium text-lg">Sunrise</span>
<span class="font-headline font-bold text-on-surface">06:05</span>
</div>
<!-- Dhuhr (Active/Friday Link) -->
<div class="flex flex-col items-center justify-center bg-[#88d982]/20 text-[#88d982] rounded-xl px-10 py-4 border border-[#88d982]/30">
<span class="material-symbols-outlined mb-1" data-icon="wb_sunny">wb_sunny</span>
<span class="font-label font-medium text-lg">Dhuhr</span>
<span class="font-headline font-extrabold text-xl">12:38</span>
</div>
<!-- Asr -->
<div class="flex flex-col items-center justify-center text-[#e5e2e1]/60 px-8 py-4 transition-all hover:bg-[#353534]">
<span class="material-symbols-outlined mb-1" data-icon="sunny_snowing">sunny_snowing</span>
<span class="font-label font-medium text-lg">Asr</span>
<span class="font-headline font-bold text-on-surface">15:55</span>
</div>
<!-- Maghrib -->
<div class="flex flex-col items-center justify-center text-[#e5e2e1]/60 px-8 py-4 transition-all hover:bg-[#353534]">
<span class="material-symbols-outlined mb-1" data-icon="wb_cloudy">wb_cloudy</span>
<span class="font-label font-medium text-lg">Maghrib</span>
<span class="font-headline font-bold text-on-surface">18:42</span>
</div>
<!-- Isha -->
<div class="flex flex-col items-center justify-center text-[#e5e2e1]/60 px-8 py-4 transition-all hover:bg-[#353534]">
<span class="material-symbols-outlined mb-1" data-icon="bedtime">bedtime</span>
<span class="font-label font-medium text-lg">Isha</span>
<span class="font-headline font-bold text-on-surface">19:58</span>
</div>
</div>
</nav>
<!-- Footer Marquee -->
<footer class="fixed bottom-0 w-full overflow-hidden whitespace-nowrap flex items-center bg-black/40 backdrop-blur-md h-10 border-none">
<div class="marquee-container w-full">
<div class="marquee-content py-2">
<span class="font-label font-semibold tracking-wide uppercase text-sm text-[#e9c349] px-12">
Assalamu Alaikum: Please silence your mobile phones before prayer begins. Friday Khutbah starts at 1:00 PM.    •   
Assalamu Alaikum: Please silence your mobile phones before prayer begins. Friday Khutbah starts at 1:00 PM.    •   
</span>
<span class="font-label font-semibold tracking-wide uppercase text-sm text-[#e9c349] px-12">
Assalamu Alaikum: Please silence your mobile phones before prayer begins. Friday Khutbah starts at 1:00 PM.    •   
Assalamu Alaikum: Please silence your mobile phones before prayer begins. Friday Khutbah starts at 1:00 PM.    •   
</span>
</div>
</div>
</footer>
</body></html>

BIN
stitch/friday_khutbah_information_screen/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 692 KiB

413
stitch/full_admin_settings_panel/code.html Normal file
View File

@@ -0,0 +1,413 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>The Sacred Horizon | Admin Panel</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%3DCgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzIwMmJhNWYyNWE5MDQ1Mzc4MzE4N2M1NWMwNzY1NTE2EgsSBxDjguyrxhUYAZIBIwoKcHJvamVjdF9pZBIVQhMxMzc1OTg2NjM0OTQyOTUwODA4%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: {
"secondary-fixed": "#ffe088",
"inverse-surface": "#e5e2e1",
"on-tertiary-fixed": "#221b00",
"on-primary-fixed-variant": "#005312",
"on-surface": "#e5e2e1",
"on-tertiary": "#3a3000",
"surface-container-low": "#1c1b1b",
"on-secondary-fixed": "#241a00",
"error": "#ffb4ab",
"primary-container": "#004f11",
"surface-container": "#201f1f",
"inverse-on-surface": "#313030",
"tertiary-fixed-dim": "#e9c400",
"on-secondary": "#3c2f00",
"inverse-primary": "#1b6d24",
"secondary-container": "#af8d11",
"surface-dim": "#131313",
"error-container": "#93000a",
"surface-bright": "#393939",
"outline": "#89938f",
"tertiary": "#e9c400",
"surface": "#131313",
"on-error-container": "#ffdad6",
"on-tertiary-container": "#4b3e00",
"primary-fixed": "#a3f69c",
"outline-variant": "#3f4945",
"tertiary-container": "#c8a900",
"surface-tint": "#88d982",
"on-secondary-fixed-variant": "#574500",
"on-background": "#e5e2e1",
"primary": "#88d982",
"surface-container-high": "#2a2a2a",
"on-error": "#690005",
"on-secondary-container": "#342800",
"tertiary-fixed": "#ffe16d",
"secondary-fixed-dim": "#e9c349",
"primary-fixed-dim": "#88d982",
"secondary": "#e9c349",
"background": "#131313",
"surface-container-highest": "#353534",
"on-tertiary-fixed-variant": "#544600",
"on-primary-fixed": "#002204",
"on-primary-container": "#72c36e",
"surface-variant": "#353534",
"surface-container-lowest": "#0e0e0e",
"on-surface-variant": "#bfc9c4",
"on-primary": "#003909"
},
fontFamily: {
"headline": ["Plus Jakarta Sans"],
"body": ["Manrope"],
"label": ["Manrope"]
},
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
},
},
}
</script>
<style>
body {
background-color: #131313;
color: #e5e2e1;
font-family: 'Manrope', sans-serif;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #131313;
}
::-webkit-scrollbar-thumb {
background: #353534;
border-radius: 10px;
}
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
}
</style>
</head>
<body class="overflow-hidden">
<!-- Side Navigation Bar -->
<aside class="fixed left-0 top-0 h-full flex flex-col py-8 bg-[#1c1b1b] dark:bg-[#1c1b1b] w-64 z-50">
<div class="px-8 mb-10">
<h1 class="text-lg font-black text-[#e9c349] font-['Plus_Jakarta_Sans']">Admin Panel</h1>
<p class="text-[10px] uppercase tracking-widest text-[#e5e2e1]/40 mt-1">Celestial Anchor System</p>
</div>
<nav class="flex-1 space-y-1">
<a class="bg-[#353534] text-[#88d982] border-l-4 border-[#88d982] px-4 py-3 flex items-center gap-3 font-['Manrope'] text-sm font-medium hover:bg-[#353534] transition-all Active: translate-x-1 duration-200" href="#">
<span class="material-symbols-outlined" data-icon="fingerprint">fingerprint</span>
Identitas
</a>
<a class="text-[#e5e2e1]/70 px-4 py-3 flex items-center gap-3 font-['Manrope'] text-sm font-medium hover:bg-[#353534] hover:text-[#88d982] transition-all Active: translate-x-1 duration-200" href="#">
<span class="material-symbols-outlined" data-icon="location_on">location_on</span>
Lokasi
</a>
<a class="text-[#e5e2e1]/70 px-4 py-3 flex items-center gap-3 font-['Manrope'] text-sm font-medium hover:bg-[#353534] hover:text-[#88d982] transition-all Active: translate-x-1 duration-200" href="#">
<span class="material-symbols-outlined" data-icon="sync_alt">sync_alt</span>
Sinkronisasi
</a>
<a class="text-[#e5e2e1]/70 px-4 py-3 flex items-center gap-3 font-['Manrope'] text-sm font-medium hover:bg-[#353534] hover:text-[#88d982] transition-all Active: translate-x-1 duration-200" href="#">
<span class="material-symbols-outlined" data-icon="mosque">mosque</span>
Pengaturan Shalat
</a>
<a class="text-[#e5e2e1]/70 px-4 py-3 flex items-center gap-3 font-['Manrope'] text-sm font-medium hover:bg-[#353534] hover:text-[#88d982] transition-all Active: translate-x-1 duration-200" href="#">
<span class="material-symbols-outlined" data-icon="palette">palette</span>
Tampilan
</a>
<a class="text-[#e5e2e1]/70 px-4 py-3 flex items-center gap-3 font-['Manrope'] text-sm font-medium hover:bg-[#353534] hover:text-[#88d982] transition-all Active: translate-x-1 duration-200" href="#">
<span class="material-symbols-outlined" data-icon="update">update</span>
Auto-Update
</a>
</nav>
<div class="px-6 mt-auto">
<div class="flex items-center gap-3 p-3 bg-surface-container rounded-xl">
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center">
<span class="material-symbols-outlined text-primary" data-icon="person">person</span>
</div>
<div>
<p class="text-xs font-bold text-on-surface">Mosque Admin</p>
<p class="text-[10px] text-on-surface/50">Master Controller</p>
</div>
</div>
</div>
</aside>
<!-- Top App Bar -->
<header class="fixed top-0 right-0 left-64 flex justify-between items-center px-8 py-4 w-auto bg-[#131313] z-40">
<div class="flex items-center gap-4">
<span class="text-xl font-bold text-[#88d982] font-['Plus_Jakarta_Sans'] tracking-[-0.02em]">The Sacred Horizon</span>
<div class="h-4 w-[1px] bg-outline-variant"></div>
<span class="text-xs text-on-surface/60 font-medium tracking-wider uppercase">System Configuration</span>
</div>
<div class="flex items-center gap-6">
<div class="flex gap-2">
<button class="p-2 text-[#e5e2e1] hover:bg-[#353534] transition-colors rounded-lg Active: scale-95 duration-150">
<span class="material-symbols-outlined" data-icon="schedule">schedule</span>
</button>
<button class="p-2 text-[#e5e2e1] hover:bg-[#353534] transition-colors rounded-lg Active: scale-95 duration-150">
<span class="material-symbols-outlined" data-icon="calendar_month">calendar_month</span>
</button>
<button class="p-2 text-[#e5e2e1] hover:bg-[#353534] transition-colors rounded-lg Active: scale-95 duration-150">
<span class="material-symbols-outlined" data-icon="sync">sync</span>
</button>
</div>
<button class="bg-primary text-on-primary px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest hover:brightness-110 transition-all">
Save Changes
</button>
</div>
</header>
<!-- Main Content Canvas -->
<main class="ml-64 pt-24 pb-12 px-12 h-screen overflow-y-auto bg-background">
<!-- Bento Grid Layout -->
<div class="bento-grid max-w-7xl mx-auto">
<!-- Section: Identitas & Lokasi -->
<div class="col-span-8 space-y-6">
<div class="bg-surface-container-low p-8 rounded-xl relative overflow-hidden group">
<div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full -mr-16 -mt-16 blur-3xl group-hover:bg-primary/10 transition-all duration-700"></div>
<div class="flex items-center gap-3 mb-6">
<span class="material-symbols-outlined text-primary" data-icon="id_card">id_card</span>
<h2 class="text-lg font-bold font-headline">Identitas Masjid</h2>
</div>
<div class="grid grid-cols-2 gap-8">
<div class="space-y-2">
<label class="text-[10px] uppercase tracking-widest text-on-surface/40 font-bold">Nama Masjid</label>
<input class="w-full bg-surface-container-highest border-none rounded-lg p-4 text-on-surface focus:ring-2 focus:ring-primary font-body transition-all" type="text" value="Al-Mustafa"/>
</div>
<div class="space-y-2">
<label class="text-[10px] uppercase tracking-widest text-on-surface/40 font-bold">Alamat Utama</label>
<input class="w-full bg-surface-container-highest border-none rounded-lg p-4 text-on-surface focus:ring-2 focus:ring-primary font-body transition-all" type="text" value="Jl. Merdeka"/>
</div>
</div>
</div>
<div class="bg-surface-container-low p-8 rounded-xl">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-secondary" data-icon="distance">distance</span>
<h2 class="text-lg font-bold font-headline">Konfigurasi Lokasi</h2>
</div>
</div>
<div class="grid grid-cols-3 gap-6 mb-6">
<div class="p-4 bg-surface-container-highest rounded-xl border border-outline-variant/10">
<p class="text-[10px] uppercase text-on-surface/40 mb-1">City ID API</p>
<p class="text-xl font-bold text-secondary">1218</p>
<p class="text-xs text-on-surface/60">Yogyakarta, ID</p>
</div>
<div class="p-4 bg-surface-container-highest rounded-xl border border-outline-variant/10">
<p class="text-[10px] uppercase text-on-surface/40 mb-1">Timezone</p>
<p class="text-xl font-bold text-on-surface">WIB</p>
<p class="text-xs text-on-surface/60">Asia/Jakarta</p>
</div>
<div class="p-4 bg-surface-container-highest rounded-xl border border-outline-variant/10">
<p class="text-[10px] uppercase text-on-surface/40 mb-1">Coordinates</p>
<p class="text-xl font-bold text-on-surface">-7.7956° S</p>
<p class="text-xs text-on-surface/60">110.3695° E</p>
</div>
</div>
<div class="relative">
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-on-surface/40" data-icon="search">search</span>
<input class="w-full bg-surface-container-highest border-none rounded-full py-4 pl-12 pr-6 text-on-surface focus:ring-2 focus:ring-secondary transition-all text-sm" placeholder="Cari Kota (Search for City...)" type="text"/>
</div>
</div>
</div>
<!-- Section: Sync Status -->
<div class="col-span-4">
<div class="bg-primary-container/20 h-full p-8 rounded-xl flex flex-col justify-between border border-primary/10">
<div>
<div class="flex items-center gap-3 mb-8">
<span class="material-symbols-outlined text-primary" data-icon="cloud_sync" data-weight="fill">cloud_sync</span>
<h2 class="text-lg font-bold font-headline">Sinkronisasi Data</h2>
</div>
<div class="space-y-6">
<div class="flex justify-between items-end">
<div>
<p class="text-xs text-on-surface/60">Sync Period</p>
<p class="text-lg font-bold">Oct - Nov 2024</p>
</div>
<div class="text-right">
<p class="text-[10px] uppercase text-primary font-bold tracking-widest">Active</p>
<p class="text-xs text-on-surface/40 italic">2 days ago</p>
</div>
</div>
<div class="w-full bg-surface-container-highest h-1 rounded-full overflow-hidden">
<div class="bg-primary h-full w-2/3"></div>
</div>
<div class="bg-surface-container-highest p-4 rounded-xl">
<p class="text-xs text-on-surface/60 leading-relaxed mb-2">Automated monthly data updates ensure your prayer timings remain perfectly aligned with local astronomical data.</p>
</div>
</div>
</div>
<button class="w-full bg-primary py-4 rounded-xl text-on-primary font-bold flex items-center justify-center gap-2 hover:brightness-110 active:scale-95 transition-all">
<span class="material-symbols-outlined" data-icon="refresh">refresh</span>
Sync Data Bulanan
</button>
</div>
</div>
<!-- Section: Pengaturan Shalat (The Dense Part) -->
<div class="col-span-12">
<div class="bg-surface-container-low p-8 rounded-xl">
<div class="flex items-center gap-3 mb-8">
<span class="material-symbols-outlined text-primary" data-icon="timer">timer</span>
<h2 class="text-lg font-bold font-headline">Konfigurasi Waktu &amp; Jeda Shalat</h2>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="text-[10px] uppercase tracking-tighter text-on-surface/40 border-b border-outline-variant/10">
<th class="pb-4 font-bold">Nama Shalat</th>
<th class="pb-4 font-bold">Pre-Adzan Lead (min)</th>
<th class="pb-4 font-bold">Iqomah Duration</th>
<th class="pb-4 font-bold">Blank Screen (min)</th>
<th class="pb-4 font-bold">Status</th>
</tr>
</thead>
<tbody class="text-sm font-body">
<tr class="border-b border-outline-variant/5">
<td class="py-5 font-bold text-primary">Subuh</td>
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center focus:ring-1 focus:ring-primary" type="number" value="3"/></td>
<td class="py-5">
<div class="flex items-center gap-2">
<input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center focus:ring-1 focus:ring-primary" type="number" value="10"/>
<span class="text-[10px] text-on-surface/40 uppercase">Minutes</span>
</div>
</td>
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center focus:ring-1 focus:ring-primary" type="number" value="15"/></td>
<td class="py-5"><span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-[10px] font-bold">OPTIMIZED</span></td>
</tr>
<tr class="border-b border-outline-variant/5">
<td class="py-5 font-bold">Dzuhur</td>
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="2"/></td>
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="15"/></td>
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="10"/></td>
<td class="py-5"><span class="bg-on-surface/5 text-on-surface/60 px-3 py-1 rounded-full text-[10px]">STANDARD</span></td>
</tr>
<tr class="border-b border-outline-variant/5">
<td class="py-5 font-bold">Ashar</td>
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="2"/></td>
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="12"/></td>
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="10"/></td>
<td class="py-5"><span class="bg-on-surface/5 text-on-surface/60 px-3 py-1 rounded-full text-[10px]">STANDARD</span></td>
</tr>
<tr class="border-b border-outline-variant/5">
<td class="py-5 font-bold">Maghrib</td>
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="2"/></td>
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="7"/></td>
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="10"/></td>
<td class="py-5"><span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-[10px] font-bold">FAST-TRACK</span></td>
</tr>
<tr>
<td class="py-5 font-bold">Isya</td>
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="3"/></td>
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="10"/></td>
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="20"/></td>
<td class="py-5"><span class="bg-on-surface/5 text-on-surface/60 px-3 py-1 rounded-full text-[10px]">STANDARD</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Section: Tampilan & Updates -->
<div class="col-span-7">
<div class="bg-surface-container-low p-8 rounded-xl h-full">
<div class="flex items-center gap-3 mb-8">
<span class="material-symbols-outlined text-primary" data-icon="auto_awesome">auto_awesome</span>
<h2 class="text-lg font-bold font-headline">Konfigurasi Tampilan (Noor Green)</h2>
</div>
<div class="space-y-6">
<div class="grid grid-cols-2 gap-4">
<div class="space-y-2">
<label class="text-[10px] uppercase tracking-widest text-on-surface/40 font-bold">Slideshow Sequence</label>
<select class="w-full bg-surface-container-highest border-none rounded-lg p-3 text-sm focus:ring-2 focus:ring-primary">
<option>Hadith &amp; News (Balanced)</option>
<option>Visual Heavy (Nature)</option>
<option>Instructional Only</option>
</select>
</div>
<div class="space-y-2">
<label class="text-[10px] uppercase tracking-widest text-on-surface/40 font-bold">Transition Effect</label>
<select class="w-full bg-surface-container-highest border-none rounded-lg p-3 text-sm focus:ring-2 focus:ring-primary">
<option>Celestial Fade (Slow)</option>
<option>Slide Vertical</option>
<option>No Transition</option>
</select>
</div>
</div>
<div class="space-y-2">
<label class="text-[10px] uppercase tracking-widest text-on-surface/40 font-bold">Running Text (Marquee)</label>
<textarea class="w-full bg-surface-container-highest border-none rounded-xl p-4 text-sm focus:ring-2 focus:ring-primary resize-none" rows="3">Selamat Datang di Masjid Al-Mustafa. Mohon non-aktifkan alat komunikasi selama berada di dalam ruang shalat. Jazaakumullah Khairan.</textarea>
</div>
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-[#88d982] border-4 border-surface-container-highest shadow-lg"></div>
<div>
<p class="text-sm font-bold">Noor Green Accent</p>
<p class="text-xs text-on-surface/60">Primary theme color active across all displays.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-5">
<div class="bg-surface-container-high p-8 rounded-xl h-full border border-outline-variant/20 flex flex-col justify-between">
<div>
<div class="flex items-center gap-3 mb-8">
<span class="material-symbols-outlined text-secondary" data-icon="system_update_alt">system_update_alt</span>
<h2 class="text-lg font-bold font-headline">Auto-Update System</h2>
</div>
<div class="space-y-6">
<div class="flex items-center justify-between p-4 bg-surface-container rounded-xl">
<div>
<p class="text-sm font-bold">Auto Online Calibration</p>
<p class="text-xs text-on-surface/40">Keep time-drift within &lt;1ms</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input checked="" class="sr-only peer" type="checkbox"/>
<div class="w-11 h-6 bg-surface-container-highest peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
</label>
</div>
<div class="flex items-center justify-between p-4 bg-surface-container rounded-xl">
<div>
<p class="text-sm font-bold">Beta Features</p>
<p class="text-xs text-on-surface/40">Early access to new visuals</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only peer" type="checkbox"/>
<div class="w-11 h-6 bg-surface-container-highest peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
</label>
</div>
</div>
</div>
<div class="pt-6 border-t border-outline-variant/10">
<div class="flex items-center justify-between">
<div>
<p class="text-xs text-on-surface/40 font-bold uppercase tracking-widest">Version Status</p>
<p class="text-xl font-bold font-headline">v4.2.0-stable</p>
</div>
<span class="flex items-center gap-1 text-[10px] text-primary font-bold">
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
UP TO DATE
</span>
</div>
<button class="w-full mt-4 bg-surface-container-highest py-3 rounded-lg text-xs font-bold hover:bg-surface-variant transition-colors border border-outline-variant/10">
Check for Manual Updates
</button>
</div>
</div>
</div>
</div>
</main>
<!-- Floating Help Trigger (Conditional FAB) -->
<button class="fixed bottom-8 right-8 w-14 h-14 bg-secondary text-on-secondary rounded-full shadow-2xl flex items-center justify-center hover:scale-105 transition-all z-50">
<span class="material-symbols-outlined" data-icon="help_center">help_center</span>
</button>
</body></html>

BIN
stitch/full_admin_settings_panel/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 216 KiB

235
stitch/iqomah_countdown_screen/code.html Normal file
View File

@@ -0,0 +1,235 @@
<!DOCTYPE html>
<html class="dark" lang="id"><head>
<meta charset="utf-8"/>
<meta content="width=1920, height=1080, initial-scale=1.0" name="viewport"/>
<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%3DCgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzViNWZhMDVlZWM3YzRmOTRhMDc2ZmIwN2Q0MDlmNzFmEgsSBxDjguyrxhUYAZIBIwoKcHJvamVjdF9pZBIVQhMxMzc1OTg2NjM0OTQyOTUwODA4%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: {
"on-secondary-fixed": "#241a00",
"surface-dim": "#131313",
"tertiary-container": "#c8a900",
"surface-container-lowest": "#0e0e0e",
"on-background": "#e5e2e1",
"secondary-container": "#af8d11",
"surface-bright": "#393939",
"on-tertiary-fixed": "#221b00",
"outline": "#89938f",
"inverse-primary": "#1b6d24",
"surface-container": "#201f1f",
"surface-container-highest": "#353534",
"on-primary-fixed-variant": "#005312",
"surface-container-high": "#2a2a2a",
"on-tertiary-fixed-variant": "#544600",
"error-container": "#93000a",
"error": "#ffb4ab",
"surface": "#131313",
"primary": "#88d982",
"on-secondary-fixed-variant": "#574500",
"tertiary-fixed": "#ffe16d",
"inverse-on-surface": "#313030",
"primary-container": "#004f11",
"outline-variant": "#3f4945",
"on-primary-fixed": "#002204",
"on-primary": "#003909",
"on-tertiary": "#3a3000",
"tertiary-fixed-dim": "#e9c400",
"surface-tint": "#88d982",
"on-primary-container": "#72c36e",
"background": "#131313",
"secondary": "#e9c349",
"on-surface": "#e5e2e1",
"on-secondary": "#3c2f00",
"on-surface-variant": "#bfc9c4",
"surface-container-low": "#1c1b1b",
"secondary-fixed-dim": "#e9c349",
"secondary-fixed": "#ffe088",
"on-secondary-container": "#342800",
"on-error-container": "#ffdad6",
"primary-fixed-dim": "#88d982",
"on-error": "#690005",
"tertiary": "#e9c400",
"primary-fixed": "#a3f69c",
"surface-variant": "#353534",
"inverse-surface": "#e5e2e1",
"on-tertiary-container": "#4b3e00"
},
fontFamily: {
"headline": ["Plus Jakarta Sans"],
"body": ["Manrope"],
"label": ["Manrope"]
},
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
<style>
body {
background-color: #131313;
color: #e5e2e1;
overflow: hidden;
width: 1920px;
height: 1080px;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.bg-glow {
background: radial-gradient(circle at center, rgba(136, 217, 130, 0.08) 0%, rgba(19, 19, 19, 1) 70%);
}
.text-glow {
text-shadow: 0 0 40px rgba(136, 217, 130, 0.3);
}
.marquee {
white-space: nowrap;
overflow: hidden;
position: relative;
}
.marquee-content {
display: inline-block;
padding-left: 100%;
animation: marquee 30s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
</style>
</head>
<body class="font-body selection:bg-primary selection:text-on-primary">
<!-- Background Layer with Subtle Architectural Texture -->
<div class="fixed inset-0 z-0 bg-glow opacity-60"></div>
<div class="fixed inset-0 z-0 opacity-10 mix-blend-overlay" data-alt="Detailed close-up of intricate Islamic geometric patterns carved in dark stone with soft atmospheric shadows and depth" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA83XrCxmaH9kZkDAvbDOlUnA5lo6-kqw5ksaoFplbpbwiB4LSopfCAxW_C16bz6-dD1BI66AWltqoybAkp8COClU_jjr5BZP4szQGtqRhTRjE3UnNQSVJJ11iFIkANddprVJa18UkQtmwrxUTpQev7ss3EbvBvzNUgaNUn6OYrtAhpT12jsoKgJD0-3UYca7NvpUV3ewlKi_LrfS6WmK4-vaJck-QCg_B7pyJeUKlIesdF8NyzL7QPZ61Btb9BYfgVy2xyl5ret4g'); background-size: cover; background-position: center;">
</div>
<!-- Layout Container -->
<div class="relative z-10 flex flex-col h-full w-full px-16 py-12">
<!-- Header (TopAppBar Context) -->
<header class="flex justify-between items-start w-full">
<div class="flex flex-col gap-1">
<h1 class="text-4xl font-headline font-extrabold tracking-tighter text-primary">
MASJID AL-MUSTAFA
</h1>
<p class="text-on-surface/60 font-label tracking-widest uppercase text-sm">The Celestial Anchor</p>
</div>
<div class="flex gap-12 items-center text-right">
<div class="flex flex-col">
<span class="text-2xl font-headline font-bold text-on-surface">15:42</span>
<span class="text-sm font-label text-on-surface/60">Kamis, 24 Oktober 2024</span>
</div>
<div class="flex flex-col text-secondary">
<span class="text-2xl font-headline font-bold">21 Rabi'ul Akhir 1446 H</span>
<span class="text-sm font-label text-secondary/70">Waktu Indonesia Barat</span>
</div>
<div class="flex gap-4 ml-4">
<span class="material-symbols-outlined text-on-surface/40 text-3xl">volume_up</span>
<span class="material-symbols-outlined text-on-surface/40 text-3xl">settings</span>
</div>
</div>
</header>
<!-- Main Content: Focus Area -->
<main class="flex-grow flex flex-col items-center justify-center -mt-12">
<!-- Prayer Name Indicator -->
<div class="mb-8 flex flex-col items-center">
<span class="text-xl font-label tracking-[0.5em] text-on-surface/50 uppercase mb-2">Shalat Saat Ini</span>
<div class="bg-surface-container-highest px-12 py-4 rounded-full border border-primary/10">
<h2 class="text-6xl font-headline font-extrabold text-primary tracking-tight">ASHAR</h2>
</div>
</div>
<!-- Countdown Timer Container -->
<div class="relative flex flex-col items-center text-center">
<!-- Decorative Outer Ring (Faded) -->
<div class="absolute inset-0 -m-12 border-2 border-primary/5 rounded-full blur-sm"></div>
<h3 class="text-3xl font-headline font-bold text-secondary tracking-[0.3em] uppercase mb-6">
MENUJU IQOMAH
</h3>
<div class="flex items-center gap-4">
<div class="text-[18rem] leading-none font-headline font-extrabold text-on-surface text-glow tracking-tighter">
04:59
</div>
</div>
<!-- Status Pill -->
<div class="mt-4 inline-flex items-center gap-3 bg-secondary/10 px-8 py-3 rounded-full border border-secondary/20 animate-pulse">
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">notifications_active</span>
<span class="text-lg font-headline font-bold text-secondary tracking-widest">SIAPKAN DIRI ANDA</span>
</div>
</div>
<!-- Reminder Message -->
<div class="mt-20 max-w-4xl text-center">
<div class="bg-surface-container-low/50 backdrop-blur-xl p-10 rounded-xl border-l-4 border-secondary">
<p class="text-4xl font-headline font-medium text-on-surface leading-relaxed italic">
"Luruskan dan Rapatkan Shaf, Sesungguhnya lurusnya shaf termasuk kesempurnaan shalat."
</p>
</div>
</div>
</main>
<!-- Footer Area -->
<footer class="mt-auto pt-12">
<!-- Sidebar/SideNav Equivalent Content positioned horizontally for landscape view -->
<div class="grid grid-cols-4 gap-8 mb-12">
<div class="bg-surface-container-low p-6 rounded-xl flex items-center gap-6">
<div class="bg-primary/10 p-4 rounded-xl">
<span class="material-symbols-outlined text-primary text-4xl">schedule</span>
</div>
<div>
<p class="text-on-surface/50 text-xs font-label uppercase tracking-widest">Subuh</p>
<p class="text-2xl font-headline font-bold text-on-surface">04:12</p>
</div>
</div>
<div class="bg-surface-container-low p-6 rounded-xl flex items-center gap-6">
<div class="bg-primary/10 p-4 rounded-xl">
<span class="material-symbols-outlined text-primary text-4xl">light_mode</span>
</div>
<div>
<p class="text-on-surface/50 text-xs font-label uppercase tracking-widest">Dzuhur</p>
<p class="text-2xl font-headline font-bold text-on-surface">11:45</p>
</div>
</div>
<div class="bg-surface-container-highest p-6 rounded-xl border border-primary/30 flex items-center gap-6 shadow-[0_0_30px_rgba(136,217,130,0.1)]">
<div class="bg-primary p-4 rounded-xl">
<span class="material-symbols-outlined text-on-primary text-4xl" style="font-variation-settings: 'FILL' 1;">dark_mode</span>
</div>
<div>
<p class="text-primary text-xs font-label uppercase tracking-widest font-bold">Ashar (Sekarang)</p>
<p class="text-2xl font-headline font-bold text-on-surface">15:02</p>
</div>
</div>
<div class="bg-surface-container-low p-6 rounded-xl flex items-center gap-6">
<div class="bg-primary/10 p-4 rounded-xl">
<span class="material-symbols-outlined text-primary text-4xl">wb_twilight</span>
</div>
<div>
<p class="text-on-surface/50 text-xs font-label uppercase tracking-widest">Maghrib</p>
<p class="text-2xl font-headline font-bold text-on-surface">17:54</p>
</div>
</div>
</div>
<!-- Marquee Information -->
<div class="w-full bg-surface-container-highest/30 backdrop-blur-md py-4 rounded-xl overflow-hidden">
<div class="marquee flex items-center">
<div class="marquee-content flex gap-24 items-center">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-secondary">campaign</span>
<span class="text-xl font-headline font-medium text-on-surface">Kajian Rutin Ba'da Maghrib: Memahami Kitab Riyadhus Shalihin bersama Ust. Ahmad Fauzi</span>
</div>
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-secondary">mosque</span>
<span class="text-xl font-headline font-medium text-on-surface">Jadwal Petugas Jumu'ah: Khotib - KH. Hasan Basri, Imam - Ust. Rizky Ramadhan</span>
</div>
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-secondary">favorite</span>
<span class="text-xl font-headline font-medium text-on-surface">Infaq Pembangunan Tahap II: Silahkan salurkan melalui Rekening BSI (451) 7123456789</span>
</div>
</div>
</div>
</div>
</footer>
</div>
</body></html>

BIN
stitch/iqomah_countdown_screen/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 370 KiB

250
stitch/main_screen_friday_jumat_state/code.html Normal file
View File

@@ -0,0 +1,250 @@
<!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="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%3DCgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzE2ZWYxODg5YTAyMDQyOTU5ZjhlZjUzYjdlNGU2ZmEzEgsSBxDjguyrxhUYAZIBIwoKcHJvamVjdF9pZBIVQhMxMzc1OTg2NjM0OTQyOTUwODA4%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: {
"on-primary": "#003909",
"on-tertiary-container": "#4b3e00",
"surface-tint": "#88d982",
"primary": "#88d982",
"secondary-container": "#af8d11",
"on-surface-variant": "#bfc9c4",
"on-secondary-fixed-variant": "#574500",
"surface-container-high": "#2a2a2a",
"surface-container-highest": "#353534",
"outline-variant": "#3f4945",
"tertiary-fixed": "#ffe16d",
"on-secondary": "#3c2f00",
"on-error-container": "#ffdad6",
"on-tertiary-fixed": "#221b00",
"secondary-fixed": "#ffe088",
"secondary": "#e9c349",
"surface": "#131313",
"on-primary-fixed": "#002204",
"inverse-on-surface": "#313030",
"background": "#131313",
"outline": "#89938f",
"on-surface": "#e5e2e1",
"surface-container-low": "#1c1b1b",
"surface-dim": "#131313",
"surface-bright": "#393939",
"on-secondary-container": "#342800",
"tertiary-fixed-dim": "#e9c400",
"surface-container-lowest": "#0e0e0e",
"error-container": "#93000a",
"secondary-fixed-dim": "#e9c349",
"on-primary-container": "#72c36e",
"on-error": "#690005",
"on-tertiary": "#3a3000",
"inverse-primary": "#1b6d24",
"on-tertiary-fixed-variant": "#544600",
"on-secondary-fixed": "#241a00",
"tertiary-container": "#c8a900",
"primary-fixed-dim": "#88d982",
"inverse-surface": "#e5e2e1",
"tertiary": "#e9c400",
"primary-fixed": "#a3f69c",
"primary-container": "#004f11",
"error": "#ffb4ab",
"surface-container": "#201f1f",
"on-primary-fixed-variant": "#005312",
"surface-variant": "#353534",
"on-background": "#e5e2e1"
},
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;
}
.glass-panel {
background: rgba(53, 53, 52, 0.6);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: 2rem;
}
.marquee-content {
flex-shrink: 0;
display: flex;
justify-content: space-around;
min-width: 100%;
gap: 2rem;
animation: scroll 30s linear infinite;
}
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
</style>
</head>
<body class="bg-background text-on-surface font-body overflow-hidden h-screen flex flex-col">
<!-- Hero Background Layer -->
<div class="fixed inset-0 z-0 opacity-40">
<img class="w-full h-full object-cover" data-alt="atmospheric dark mosque interior with low golden lighting hitting geometric patterns and columns in a serene prayer hall" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCKcU754jFT7i34-9iC80pzw_PdiVwlpaSXdvacaBgOuffE81gVMz0p0wHuataYxnjL7TAYzdtW1iLKHzH1IDivkYk3_4BoF8utPUE-dEo43S3lfjxkcXlzlB2oI5qAEQeI2eTIWRv4ORFwo0wkqGIF0sEHlHM9aF3gK-sqvV_4NjyPiBBcir24sKljSJrKS8n4hkEaVoV4z-EA_hhF0_LFV9n2KNw-K7-EA3uedekWNO3TUuAgEOqSKpovDKU_ljizJlCkYuD4hPA"/>
<div class="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/60"></div>
</div>
<!-- Top Navigation Shell -->
<header class="z-10 bg-[#131313] font-['Plus_Jakarta_Sans'] font-bold tracking-tight text-on-surface flex justify-between items-center w-full px-16 py-8">
<div class="flex items-center gap-4">
<span class="text-3xl font-bold text-[#88d982]">Al-Masjid Al-Haram</span>
</div>
<div class="flex items-center gap-6">
<div class="flex items-center gap-2 text-on-surface-variant">
<span class="material-symbols-outlined text-[#88d982]" data-icon="mosque">mosque</span>
<span class="font-medium tracking-wide">123 Sacred Way, Holy City</span>
</div>
</div>
</header>
<!-- Main Content Canvas -->
<main class="relative z-10 flex-1 flex px-16 pb-36 pt-4 gap-12">
<!-- Left Column: Clock & Primary Focus -->
<div class="flex-1 flex flex-col justify-center">
<div class="space-y-2">
<div class="flex items-center gap-3 bg-secondary/10 border border-secondary/20 px-6 py-2 rounded-full w-fit">
<span class="relative flex h-3 w-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-widest text-sm uppercase">PERSIAPAN JUMAT</span>
</div>
<h1 class="font-headline font-extrabold text-[12rem] leading-none tracking-tighter text-primary">
11:42
</h1>
<div class="flex items-end gap-6 mt-4">
<div class="space-y-1">
<p class="font-headline text-4xl font-bold text-on-surface">Friday, 24 May 2024</p>
<p class="font-body text-2xl text-secondary opacity-90 font-medium">16 Dhu al-Qi'dah 1445 AH</p>
</div>
</div>
</div>
</div>
<!-- Right Column: Contextual Info & Khutbah Details -->
<div class="w-1/3 flex flex-col justify-center">
<div class="glass-panel p-10 rounded-xl space-y-8 border border-white/5">
<div class="space-y-4">
<div class="flex justify-between items-center">
<span class="font-label text-on-surface-variant uppercase tracking-widest font-semibold">Next Event</span>
<span class="material-symbols-outlined text-secondary" data-icon="auto_awesome">auto_awesome</span>
</div>
<h2 class="font-headline text-5xl font-bold text-on-surface leading-tight">MENUJU KHUTBAH</h2>
</div>
<div class="space-y-6">
<div class="flex items-start gap-5 bg-surface-container-high/40 p-6 rounded-xl">
<div class="bg-primary/20 p-3 rounded-lg text-primary">
<span class="material-symbols-outlined" data-icon="person_pin">person_pin</span>
</div>
<div>
<p class="text-on-surface-variant text-sm font-semibold uppercase tracking-wider mb-1">Khatib Today</p>
<p class="text-xl font-bold text-on-surface">Sheikh Abdur-Rahman Al-Sudais</p>
</div>
</div>
<div class="flex items-start gap-5 bg-surface-container-high/40 p-6 rounded-xl">
<div class="bg-secondary/20 p-3 rounded-lg text-secondary">
<span class="material-symbols-outlined" data-icon="timer">timer</span>
</div>
<div>
<p class="text-on-surface-variant text-sm font-semibold uppercase tracking-wider mb-1">Khutbah Starts In</p>
<p class="text-xl font-bold text-on-surface">~ 18 Minutes</p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation Shell (Prayer Times) -->
<nav class="fixed bottom-12 left-0 w-full z-50 flex justify-around items-center px-12 bg-[#1c1b1b] rounded-xl mx-12 shadow-[0_0_40px_rgba(136,217,130,0.1)] py-4">
<!-- Fajr -->
<div class="flex flex-col items-center justify-center text-[#e5e2e1]/60 px-8 py-4">
<span class="material-symbols-outlined mb-2" data-icon="brightness_low">brightness_low</span>
<span class="font-['Manrope'] font-medium text-lg">Fajr</span>
<span class="text-sm font-bold mt-1">04:32 AM</span>
</div>
<!-- Sunrise -->
<div class="flex flex-col items-center justify-center text-[#e5e2e1]/60 px-8 py-4">
<span class="material-symbols-outlined mb-2" data-icon="wb_twilight">wb_twilight</span>
<span class="font-['Manrope'] font-medium text-lg">Sunrise</span>
<span class="text-sm font-bold mt-1">05:48 AM</span>
</div>
<!-- Jumat (Active) -->
<div class="flex flex-col items-center justify-center bg-[#88d982]/20 text-[#88d982] rounded-xl px-12 py-4 border border-[#88d982]/30 scale-105">
<span class="material-symbols-outlined mb-2" data-icon="wb_sunny">wb_sunny</span>
<span class="font-['Manrope'] font-bold text-lg">JUMAT</span>
<span class="text-sm font-bold mt-1">12:00 PM</span>
</div>
<!-- Asr -->
<div class="flex flex-col items-center justify-center text-[#e5e2e1]/60 px-8 py-4">
<span class="material-symbols-outlined mb-2" data-icon="sunny_snowing">sunny_snowing</span>
<span class="font-['Manrope'] font-medium text-lg">Asr</span>
<span class="text-sm font-bold mt-1">03:22 PM</span>
</div>
<!-- Maghrib -->
<div class="flex flex-col items-center justify-center text-[#e5e2e1]/60 px-8 py-4">
<span class="material-symbols-outlined mb-2" data-icon="wb_cloudy">wb_cloudy</span>
<span class="font-['Manrope'] font-medium text-lg">Maghrib</span>
<span class="text-sm font-bold mt-1">06:12 PM</span>
</div>
<!-- Isha -->
<div class="flex flex-col items-center justify-center text-[#e5e2e1]/60 px-8 py-4">
<span class="material-symbols-outlined mb-2" data-icon="bedtime">bedtime</span>
<span class="font-['Manrope'] font-medium text-lg">Isha</span>
<span class="text-sm font-bold mt-1">07:42 PM</span>
</div>
</nav>
<!-- Footer Marquee Shell -->
<footer class="fixed bottom-0 w-full overflow-hidden whitespace-nowrap flex items-center bg-black/40 backdrop-blur-md h-10 border-none">
<div class="marquee w-full">
<div class="marquee-content py-2">
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
JUMAT MUBARAK: Luruskan dan rapatkan shaf. Harap non-aktifkan alat komunikasi.
</span>
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
Assalamu Alaikum: Please silence your mobile phones before prayer begins. Friday Khutbah starts at 1:00 PM.
</span>
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
JUMAT MUBARAK: Luruskan dan rapatkan shaf. Harap non-aktifkan alat komunikasi.
</span>
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
Assalamu Alaikum: Please silence your mobile phones before prayer begins. Friday Khutbah starts at 1:00 PM.
</span>
</div>
<!-- Duplicated for seamless loop -->
<div aria-hidden="true" class="marquee-content py-2">
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
JUMAT MUBARAK: Luruskan dan rapatkan shaf. Harap non-aktifkan alat komunikasi.
</span>
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
Assalamu Alaikum: Please silence your mobile phones before prayer begins. Friday Khutbah starts at 1:00 PM.
</span>
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
JUMAT MUBARAK: Luruskan dan rapatkan shaf. Harap non-aktifkan alat komunikasi.
</span>
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
Assalamu Alaikum: Please silence your mobile phones before prayer begins. Friday Khutbah starts at 1:00 PM.
</span>
</div>
</div>
</footer>
</body></html>

BIN
stitch/main_screen_friday_jumat_state/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 769 KiB

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>

BIN
stitch/main_screen_normal_view/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 599 KiB

88
stitch/noor_digital_horizon/DESIGN.md Normal file
View File

@@ -0,0 +1,88 @@
```markdown
# Design System Document: The Sacred Horizon
## 1. Overview & Creative North Star
**Creative North Star: "The Celestial Anchor"**
This design system moves away from the "utility-first" clutter of traditional digital clocks. Instead, it adopts a High-End Editorial approach that treats the 1920x1080 canvas as a grand architectural space. The goal is to create a sense of calm, reverence, and absolute clarity.
By leveraging **intentional asymmetry**, we avoid the rigid, "Excel-sheet" look of standard prayer displays. The layout utilizes "breathing room" (negative space) to draw the eye toward the most critical information—the current time and the upcoming prayer—while secondary data remains elegantly nested in the periphery. This is a system of depth, light, and silence.
---
## 2. Colors
The palette is rooted in the "Masjid Twilight"—a sophisticated blend of deep forest tones and luminous metallic accents.
### Color Tokens
- **Primary (The Living Green):** `#88d982` (Active state/Current prayer)
- **Secondary (The Sacred Gold):** `#e9c349` (Special alerts/Jumu'ah/Highlights)
- **Background (The Void):** `#131313` (The base canvas)
- **Surface Hierarchy:**
- `surface_container_low`: `#1c1b1b` (Section backgrounds)
- `surface_container_highest`: `#353534` (Elevated prayer cards)
### The "No-Line" Rule
Traditional 1px borders are strictly prohibited. Sectioning must be achieved through **background color shifts**. For example, a sidebar for "Upcoming Events" should be defined by a shift from `surface` to `surface_container_low`, rather than a stroke. This ensures the UI feels like a single, cohesive piece of carved stone rather than a digital assembly.
### The "Glass & Gradient" Rule
To add "soul" to the dark theme, use subtle radial gradients on the main clock background (transitioning from `surface` to `primary_container` at 5% opacity). For slideshow overlays, use `surface_variant` at 60% opacity with a `24px` backdrop blur to create a premium "frosted glass" effect.
---
## 3. Typography
We utilize a pairing of **Plus Jakarta Sans** for authority and **Manrope** for functional elegance.
- **The Clock (display-lg):** Plus Jakarta Sans, `3.5rem`. This is the heartbeat of the system. It must be bold and legible from 20 feet away.
- **Prayer Names (headline-lg):** Plus Jakarta Sans, `2rem`. Used for the "Current Prayer" title to command respect.
- **Timings (title-lg):** Manrope, `1.375rem`. Clean, rhythmic numerals that prioritize quick scanning.
- **Labels (label-md):** Manrope, `0.75rem`. Used for secondary metadata (e.g., "Iqamah," "Sunrise").
**Editorial Hint:** Use `letter-spacing: -0.02em` on Display styles to give the typography a custom, "tight" high-fashion feel.
---
## 4. Elevation & Depth
Depth is not communicated via shadows, but through **Tonal Layering**.
- **The Layering Principle:**
1. Base Layer: `surface` (The deep background).
2. Content Zones: `surface_container_low` (Large zones for prayer lists).
3. Interactive/Active Elements: `surface_container_highest` (The "active" prayer card).
- **The "Ghost Border" Fallback:** If high-sunlight environments require more definition, use the `outline_variant` token at **15% opacity**. Never use 100% opaque lines.
- **Ambient Glow:** Instead of a drop shadow, use a subtle outer glow for the active prayer card using the `primary` color at 10% opacity and a `40px` blur. This simulates the "Nur" (light) of the current time.
---
## 5. Components
### Prayer Time Cards
- **Structure:** Use `Roundedness Scale: xl (0.75rem)`.
- **Styling:** Inactive cards use `surface_container_low`. The active card transitions to `primary_container` with `on_primary_container` text.
- **Spacing:** Use `Spacing Scale: 6 (2rem)` for internal padding to ensure the text has room to breathe.
### Slideshow Overlays (Hadith/Announcements)
- **Styling:** Floating containers using Glassmorphism.
- **Backdrop:** `surface_variant` @ 70% opacity + `backdrop-filter: blur(12px)`.
- **Layout:** Positioned asymmetrically (e.g., bottom-left) to allow the background imagery to remain visible.
### Status Indicators (Adhan/Iqamah Countdown)
- **Styling:** Use a "Pill" shape (`Roundedness: full`).
- **Colors:** Pulsing `secondary` (Gold) for the 10-minute countdown to Iqamah. This creates urgency without using "Error" reds, which can feel aggressive in a prayer space.
### Lists & Tables
- **Rule:** Forbid divider lines.
- **Execution:** Use `Spacing Scale: 4 (1.4rem)` as a vertical gutter between list items. Use the `surface_container_lowest` for alternating "Zebra" stripes only if the list exceeds 7 items.
---
## 6. Do's and Don'ts
### Do:
- **Prioritize the Clock:** The current time should always be the highest contrast element on the screen.
- **Use "Golden" Accents:** Reserve the `secondary` (Gold) color for the most sacred or time-sensitive information (e.g., Jumu'ah time).
- **Embrace Wide Margins:** Treat the 1080p screen like a gallery wall. Keep a minimum margin of `Spacing: 12 (4rem)` from the screen edges.
### Don't:
- **Avoid Pure White:** Never use `#FFFFFF`. Use `on_surface` (`#e5e2e1`) for text to prevent "light bleed" and eye strain on large TV monitors.
- **No Sharp Corners:** Avoid the `none` or `sm` roundedness tokens. This system should feel organic and welcoming, not clinical.
- **No Center-Alignment Obsession:** Use left-aligned blocks for prayer times to create a sophisticated, asymmetric editorial grid.

127
stitch/shalat_black_screen_updated/code.html Normal file
View File

@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html class="dark" lang="id"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>The Sacred Horizon - Shalat State</title>
<!-- Material Symbols -->
<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%3DCgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzI2YmYxOThlNDM1OTQ0YmJiYjcyY2I1YzY5NTI2YTE3EgsSBxDjguyrxhUYAZIBIwoKcHJvamVjdF9pZBIVQhMxMzc1OTg2NjM0OTQyOTUwODA4%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><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&amp;family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&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"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Tailwind Config -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary-container": "#004f11",
"outline-variant": "#3f4945",
"on-secondary-fixed-variant": "#574500",
"surface-container-highest": "#353534",
"on-surface-variant": "#bfc9c4",
"surface-container-low": "#1c1b1b",
"error-container": "#93000a",
"on-surface": "#e5e2e1",
"on-tertiary-fixed": "#221b00",
"surface-container": "#201f1f",
"background": "#131313",
"primary-fixed": "#a3f69c",
"on-primary-container": "#72c36e",
"tertiary-fixed-dim": "#e9c400",
"surface-dim": "#131313",
"surface-tint": "#88d982",
"on-background": "#e5e2e1",
"secondary": "#e9c349",
"error": "#ffb4ab",
"on-primary-fixed-variant": "#005312",
"secondary-fixed-dim": "#e9c349",
"surface-container-lowest": "#0e0e0e",
"on-secondary": "#3c2f00",
"primary-fixed-dim": "#88d982",
"on-tertiary-container": "#4b3e00",
"inverse-surface": "#e5e2e1",
"on-primary": "#003909",
"on-tertiary-fixed-variant": "#544600",
"on-secondary-container": "#342800",
"surface-bright": "#393939",
"inverse-on-surface": "#313030",
"tertiary-fixed": "#ffe16d",
"on-secondary-fixed": "#241a00",
"secondary-container": "#af8d11",
"tertiary-container": "#c8a900",
"surface-container-high": "#2a2a2a",
"inverse-primary": "#1b6d24",
"primary": "#88d982",
"tertiary": "#e9c400",
"surface-variant": "#353534",
"secondary-fixed": "#ffe088",
"outline": "#89938f",
"on-error-container": "#ffdad6",
"on-primary-fixed": "#002204",
"surface": "#131313",
"on-tertiary": "#3a3000",
"on-error": "#690005"
},
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;
}
body {
background-color: #000000;
overflow: hidden;
}
</style>
</head>
<body class="bg-black text-on-surface flex flex-col items-center justify-center h-screen w-screen m-0 p-0 font-body">
<!-- Main Canvas: Shalat State -->
<!-- Navigation suppressed per "Semantic Shell Mandate" (Transactional/Focused Journey) -->
<main class="relative w-full h-full flex flex-col items-center justify-center overflow-hidden">
<!-- Central Message Area -->
<div class="flex flex-col items-center gap-12 select-none">
<!-- Prayer Indicator: Dimmed & Subtle -->
<div class="opacity-10 transition-opacity duration-1000">
<h2 class="font-headline font-light tracking-[0.5em] text-on-surface uppercase text-[6rem]">
ASHAR
</h2>
</div>
<!-- Main Status Message -->
<div class="text-center space-y-4 opacity-[0.12]">
<p class="font-headline text-[0.875rem] font-medium tracking-widest text-on-surface uppercase">
Shalat Sedang Berlangsung
</p>
</div>
</div>
<!-- Bottom Advisory: Barely visible at the periphery -->
<footer class="absolute bottom-16 w-full flex justify-center opacity-[0.08]">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-[1rem]" data-icon="phonelink_ring">phonelink_ring</span>
<span class="font-label text-[0.65rem] tracking-[0.15em] uppercase">
Mohon Nonaktifkan Alat Komunikasi
</span>
</div>
</footer>
<!-- Subtle Architectural Hint (The Celestial Anchor) -->
<!-- Extremely low opacity tonal shift to maintain the "carved stone" feel without distraction -->
<div class="absolute inset-0 pointer-events-none overflow-hidden">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-radial from-primary-container/5 via-transparent to-transparent opacity-10"></div>
</div>
</main>
<!-- Hidden Visual Context (For Designer Reference) -->
<!-- No images required for Shalat state to ensure absolute zero distraction. -->
</body></html>

BIN
stitch/shalat_black_screen_updated/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

176
stitch/slideshow_screen_rotation/code.html Normal file
View File

@@ -0,0 +1,176 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Masjid Al-Mustafa - Digital Signage</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%3DCgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sX2ZhNzNlZjljYTQ5MjQxYzc5Y2QyZGMzNDg0ZDJhNTUwEgsSBxDjguyrxhUYAZIBIwoKcHJvamVjdF9pZBIVQhMxMzc1OTg2NjM0OTQyOTUwODA4%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-content {
display: inline-block;
animation: marquee 30s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
body {
background-color: #131313;
overflow: hidden;
}
</style>
</head>
<body class="w-[1920px] h-[1080px] font-body text-on-surface relative">
<!-- Fullscreen Infographic Background -->
<div class="absolute inset-0 z-0">
<img alt="Islamic infographic" class="w-full h-full object-cover" data-alt="A high-end editorial infographic about Shadaqah featuring elegant Arabic calligraphy, warm golden light, and minimalist geometric Islamic patterns on dark textured paper" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCxZszNHCVMbS9Ez8WAamU8Wt3Qf7OKOjyOpAHps5g0K5T33k9yYhRKIYgTjNxdvj_R_X5pEKcdJhtmujV_Y1qbiUvEYvhjhiX-H3yA_kpcwHe9tIkCEq3zqhLPiWtdFiyInv2tsB_k5cA_bzkTkxfewNsQipdPGSCq2R-UOxBB6sJJp8IqcKB-JvmDd1fCgmb8EZpr3wpj-eRGibEKX1pZSvQDJGccUp_Ea9ii93DiywZ5sgJfnWkl0DA8IPt1WGrWf3sIC6TzFIQ"/>
<!-- Tonal Layering Overlay for legibility -->
<div class="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-background/40"></div>
</div>
<!-- Top Navigation Anchor (Shared Component) -->
<header class="fixed top-0 z-50 flex justify-between items-center w-full px-16 py-8 bg-[#131313]/40 backdrop-blur-sm">
<div class="flex flex-col">
<h1 class="font-['Plus_Jakarta_Sans'] text-[2rem] font-bold tracking-tight text-[#88d982]">Masjid Al-Mustafa</h1>
<p class="font-['Manrope'] text-sm tracking-wide text-[#e5e2e1]/60">Jl. Merdeka No. 45, Jakarta</p>
</div>
<!-- Floating Info Widget (Top Right) -->
<div class="bg-surface-variant/35 backdrop-blur-xl rounded-full p-6 flex items-center gap-8 border border-white/5 shadow-2xl">
<div class="flex flex-col items-end border-r border-outline-variant/30 pr-8">
<span class="font-headline text-[3.5rem] font-bold leading-none tracking-tighter text-on-surface">14:50</span>
<span class="font-label text-xs uppercase tracking-widest text-primary font-bold">WIB Jakarta</span>
</div>
<div class="flex flex-col">
<div class="flex items-center gap-2 mb-1">
<span class="material-symbols-outlined text-secondary text-sm">schedule</span>
<span class="font-headline text-2xl font-bold text-on-surface">Ashar</span>
</div>
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-secondary animate-pulse"></div>
<span class="font-label text-xl font-medium text-secondary">10:23</span>
</div>
</div>
</div>
</header>
<!-- Side Navigation (Suppressed per task - focused journey) -->
<!-- Main Content Area: Centered Poster Focus -->
<main class="relative z-10 w-full h-full flex items-center justify-center pointer-events-none">
<!-- The infographic itself is the background, so this space remains minimal -->
<div class="absolute bottom-32 left-16 max-w-2xl bg-surface-container-low/60 backdrop-blur-md p-10 rounded-xl border-l-4 border-secondary">
<h2 class="font-headline text-4xl font-extrabold text-on-surface mb-4 leading-tight">Keutamaan Sedekah</h2>
<p class="font-body text-xl text-on-surface-variant/90 leading-relaxed italic">
"Sedekah itu dapat menghapus dosa sebagaimana air memadamkan api."
</p>
<div class="mt-6 flex items-center gap-4">
<div class="bg-primary/20 p-3 rounded-full">
<span class="material-symbols-outlined text-primary" data-weight="fill">volunteer_activism</span>
</div>
<span class="font-label text-lg font-semibold text-primary">Infaq Hari Ini: Rp 4.500.000</span>
</div>
</div>
</main>
<!-- Bottom Marquee Shell (Shared Component: Footer) -->
<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="flex items-center gap-6 w-full max-w-[1800px]">
<!-- Fixed Label -->
<div class="flex items-center gap-3 bg-secondary/10 px-4 py-2 rounded-lg shrink-0">
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">campaign</span>
<span class="font-headline text-lg font-bold text-[#e9c349]">INFO</span>
</div>
<!-- Marquee Container -->
<div class="marquee-container flex-grow overflow-hidden">
<div class="marquee-content flex gap-24 items-center">
<span class="font-['Manrope'] text-lg font-medium tracking-[0.05em] text-[#e5e2e1]">Pemberitahuan: Luruskan dan Rapatkan Saf</span>
<span class="text-secondary opacity-50">•</span>
<span class="font-['Manrope'] text-lg font-medium tracking-[0.05em] text-[#e5e2e1]">Infaq Masjid: Bank Syariah 12345678</span>
<span class="text-secondary opacity-50">•</span>
<span class="font-['Manrope'] text-lg font-medium tracking-[0.05em] text-[#e5e2e1]">Kajian Rutin: Setiap Selasa Ba'da Maghrib</span>
<span class="text-secondary opacity-50">•</span>
<span class="font-['Manrope'] text-lg font-medium tracking-[0.05em] text-[#e5e2e1]">Jadwal Shalat Akurat - Kemenag RI</span>
<span class="text-secondary opacity-50">•</span>
<span class="font-['Manrope'] text-lg font-medium tracking-[0.05em] text-[#e5e2e1]">Mohon Matikan Ponsel Selama Di Dalam Masjid</span>
</div>
</div>
<!-- Digital Clock Branding (Small) -->
<div class="shrink-0 pl-6 border-l border-outline-variant/30 hidden lg:block">
<span class="font-label text-xs text-[#e5e2e1]/40 tracking-widest uppercase">Powered by</span>
<div class="font-headline text-lg font-bold text-primary">MustafaDigital</div>
</div>
</div>
</footer>
<!-- Subtle Ambient Glow for the Current Prayer Info -->
<div class="fixed top-0 right-0 w-[500px] h-[300px] bg-primary/5 blur-[120px] -z-10 rounded-full"></div>
</body></html>

BIN
stitch/slideshow_screen_rotation/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 848 KiB