197 lines
10 KiB
HTML
197 lines
10 KiB
HTML
<!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&type=content-script&dmn=contribution.usercontent.google.com&url=https%3A%2F%2Fcontribution.usercontent.google.com%2Fdownload%3Fc%3DCgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sX2VkZTY4Yjk4NjFmMTRmY2VhZWRkZTY1ZmQxYzA2YzU5EgsSBxDjguyrxhUYAZIBIwoKcHJvamVjdF9pZBIVQhMxMzc1OTg2NjM0OTQyOTUwODA4%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>
|
|
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> |