218 lines
12 KiB
HTML
218 lines
12 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>Friday Khutbah Info - Al-Masjid Al-Haram</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%3DCgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzRjN2I3ZDU4ZjZkZjRiOGI4ODY0NDdjNGE0MzNlYjNkEgsSBxDjguyrxhUYAZIBIwoKcHJvamVjdF9pZBIVQhMxMzc1OTg2NjM0OTQyOTUwODA4%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-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> |