235 lines
11 KiB
HTML
235 lines
11 KiB
HTML
<!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&type=content-script&dmn=contribution.usercontent.google.com&url=https%3A%2F%2Fcontribution.usercontent.google.com%2Fdownload%3Fc%3DCgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzViNWZhMDVlZWM3YzRmOTRhMDc2ZmIwN2Q0MDlmNzFmEgsSBxDjguyrxhUYAZIBIwoKcHJvamVjdF9pZBIVQhMxMzc1OTg2NjM0OTQyOTUwODA4%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: {
|
|
"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> |