176 lines
9.7 KiB
HTML
176 lines
9.7 KiB
HTML
<!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&type=content-script&dmn=contribution.usercontent.google.com&url=https%3A%2F%2Fcontribution.usercontent.google.com%2Fdownload%3Fc%3DCgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sX2ZhNzNlZjljYTQ5MjQxYzc5Y2QyZGMzNDg0ZDJhNTUwEgsSBxDjguyrxhUYAZIBIwoKcHJvamVjdF9pZBIVQhMxMzc1OTg2NjM0OTQyOTUwODA4%26filename%3D%26opi%3D89354086&app=com.google.Chrome&css=3&js=1&rel=1&rji=1&sbe=1"></script><script type="text/javascript" nonce="114b03e98e7c433dba2239ea142" src="//local.adguard.org?ts=1774798104100&name=AdGuard%20Extra&type=user-script"></script><script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"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> |