127 lines
6.1 KiB
HTML
127 lines
6.1 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>The Sacred Horizon - Shalat State</title>
|
|
<!-- Material Symbols -->
|
|
<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%3DCgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzI2YmYxOThlNDM1OTQ0YmJiYjcyY2I1YzY5NTI2YTE3EgsSBxDjguyrxhUYAZIBIwoKcHJvamVjdF9pZBIVQhMxMzc1OTg2NjM0OTQyOTUwODA4%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><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&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"/>
|
|
<!-- 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> |