dwindown/jamshalat-masjid-screen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial project import and stabilization baseline

Browse Source
This commit is contained in:
dwindown
2026-03-30 21:28:44 +07:00
commit ad33b01231
186 changed files with 20445 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
stitch/main_screen_friday_jumat_state/code.html Normal file
View File

@@ -0,0 +1,250 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script type="text/javascript" nonce="114b03e98e7c433dba2239ea142" src="//local.adguard.org?ts=1774798104100&amp;type=content-script&amp;dmn=contribution.usercontent.google.com&amp;url=https%3A%2F%2Fcontribution.usercontent.google.com%2Fdownload%3Fc%3DCgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzE2ZWYxODg5YTAyMDQyOTU5ZjhlZjUzYjdlNGU2ZmEzEgsSBxDjguyrxhUYAZIBIwoKcHJvamVjdF9pZBIVQhMxMzc1OTg2NjM0OTQyOTUwODA4%26filename%3D%26opi%3D89354086&amp;app=com.google.Chrome&amp;css=3&amp;js=1&amp;rel=1&amp;rji=1&amp;sbe=1"></script><script type="text/javascript" nonce="114b03e98e7c433dba2239ea142" src="//local.adguard.org?ts=1774798104100&amp;name=AdGuard%20Extra&amp;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&amp;family=Manrope:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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;
}
.glass-panel {
background: rgba(53, 53, 52, 0.6);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: 2rem;
}
.marquee-content {
flex-shrink: 0;
display: flex;
justify-content: space-around;
min-width: 100%;
gap: 2rem;
animation: scroll 30s linear infinite;
}
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
</style>
</head>
<body class="bg-background text-on-surface font-body overflow-hidden h-screen flex flex-col">
<!-- Hero Background Layer -->
<div class="fixed inset-0 z-0 opacity-40">
<img class="w-full h-full object-cover" data-alt="atmospheric dark mosque interior with low golden lighting hitting geometric patterns and columns in a serene prayer hall" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCKcU754jFT7i34-9iC80pzw_PdiVwlpaSXdvacaBgOuffE81gVMz0p0wHuataYxnjL7TAYzdtW1iLKHzH1IDivkYk3_4BoF8utPUE-dEo43S3lfjxkcXlzlB2oI5qAEQeI2eTIWRv4ORFwo0wkqGIF0sEHlHM9aF3gK-sqvV_4NjyPiBBcir24sKljSJrKS8n4hkEaVoV4z-EA_hhF0_LFV9n2KNw-K7-EA3uedekWNO3TUuAgEOqSKpovDKU_ljizJlCkYuD4hPA"/>
<div class="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/60"></div>
</div>
<!-- Top Navigation Shell -->
<header class="z-10 bg-[#131313] font-['Plus_Jakarta_Sans'] font-bold tracking-tight text-on-surface flex justify-between items-center w-full px-16 py-8">
<div class="flex items-center gap-4">
<span class="text-3xl font-bold text-[#88d982]">Al-Masjid Al-Haram</span>
</div>
<div class="flex items-center gap-6">
<div class="flex items-center gap-2 text-on-surface-variant">
<span class="material-symbols-outlined text-[#88d982]" data-icon="mosque">mosque</span>
<span class="font-medium tracking-wide">123 Sacred Way, Holy City</span>
</div>
</div>
</header>
<!-- Main Content Canvas -->
<main class="relative z-10 flex-1 flex px-16 pb-36 pt-4 gap-12">
<!-- Left Column: Clock & Primary Focus -->
<div class="flex-1 flex flex-col justify-center">
<div class="space-y-2">
<div class="flex items-center gap-3 bg-secondary/10 border border-secondary/20 px-6 py-2 rounded-full w-fit">
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-secondary opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-secondary"></span>
</span>
<span class="font-headline font-bold text-secondary tracking-widest text-sm uppercase">PERSIAPAN JUMAT</span>
</div>
<h1 class="font-headline font-extrabold text-[12rem] leading-none tracking-tighter text-primary">
11:42
</h1>
<div class="flex items-end gap-6 mt-4">
<div class="space-y-1">
<p class="font-headline text-4xl font-bold text-on-surface">Friday, 24 May 2024</p>
<p class="font-body text-2xl text-secondary opacity-90 font-medium">16 Dhu al-Qi'dah 1445 AH</p>
</div>
</div>
</div>
</div>
<!-- Right Column: Contextual Info & Khutbah Details -->
<div class="w-1/3 flex flex-col justify-center">
<div class="glass-panel p-10 rounded-xl space-y-8 border border-white/5">
<div class="space-y-4">
<div class="flex justify-between items-center">
<span class="font-label text-on-surface-variant uppercase tracking-widest font-semibold">Next Event</span>
<span class="material-symbols-outlined text-secondary" data-icon="auto_awesome">auto_awesome</span>
</div>
<h2 class="font-headline text-5xl font-bold text-on-surface leading-tight">MENUJU KHUTBAH</h2>
</div>
<div class="space-y-6">
<div class="flex items-start gap-5 bg-surface-container-high/40 p-6 rounded-xl">
<div class="bg-primary/20 p-3 rounded-lg text-primary">
<span class="material-symbols-outlined" data-icon="person_pin">person_pin</span>
</div>
<div>
<p class="text-on-surface-variant text-sm font-semibold uppercase tracking-wider mb-1">Khatib Today</p>
<p class="text-xl font-bold text-on-surface">Sheikh Abdur-Rahman Al-Sudais</p>
</div>
</div>
<div class="flex items-start gap-5 bg-surface-container-high/40 p-6 rounded-xl">
<div class="bg-secondary/20 p-3 rounded-lg text-secondary">
<span class="material-symbols-outlined" data-icon="timer">timer</span>
</div>
<div>
<p class="text-on-surface-variant text-sm font-semibold uppercase tracking-wider mb-1">Khutbah Starts In</p>
<p class="text-xl font-bold text-on-surface">~ 18 Minutes</p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation Shell (Prayer Times) -->
<nav class="fixed bottom-12 left-0 w-full z-50 flex justify-around items-center px-12 bg-[#1c1b1b] rounded-xl mx-12 shadow-[0_0_40px_rgba(136,217,130,0.1)] py-4">
<!-- Fajr -->
<div class="flex flex-col items-center justify-center text-[#e5e2e1]/60 px-8 py-4">
<span class="material-symbols-outlined mb-2" data-icon="brightness_low">brightness_low</span>
<span class="font-['Manrope'] font-medium text-lg">Fajr</span>
<span class="text-sm font-bold mt-1">04:32 AM</span>
</div>
<!-- Sunrise -->
<div class="flex flex-col items-center justify-center text-[#e5e2e1]/60 px-8 py-4">
<span class="material-symbols-outlined mb-2" data-icon="wb_twilight">wb_twilight</span>
<span class="font-['Manrope'] font-medium text-lg">Sunrise</span>
<span class="text-sm font-bold mt-1">05:48 AM</span>
</div>
<!-- Jumat (Active) -->
<div class="flex flex-col items-center justify-center bg-[#88d982]/20 text-[#88d982] rounded-xl px-12 py-4 border border-[#88d982]/30 scale-105">
<span class="material-symbols-outlined mb-2" data-icon="wb_sunny">wb_sunny</span>
<span class="font-['Manrope'] font-bold text-lg">JUMAT</span>
<span class="text-sm font-bold mt-1">12:00 PM</span>
</div>
<!-- Asr -->
<div class="flex flex-col items-center justify-center text-[#e5e2e1]/60 px-8 py-4">
<span class="material-symbols-outlined mb-2" data-icon="sunny_snowing">sunny_snowing</span>
<span class="font-['Manrope'] font-medium text-lg">Asr</span>
<span class="text-sm font-bold mt-1">03:22 PM</span>
</div>
<!-- Maghrib -->
<div class="flex flex-col items-center justify-center text-[#e5e2e1]/60 px-8 py-4">
<span class="material-symbols-outlined mb-2" data-icon="wb_cloudy">wb_cloudy</span>
<span class="font-['Manrope'] font-medium text-lg">Maghrib</span>
<span class="text-sm font-bold mt-1">06:12 PM</span>
</div>
<!-- Isha -->
<div class="flex flex-col items-center justify-center text-[#e5e2e1]/60 px-8 py-4">
<span class="material-symbols-outlined mb-2" data-icon="bedtime">bedtime</span>
<span class="font-['Manrope'] font-medium text-lg">Isha</span>
<span class="text-sm font-bold mt-1">07:42 PM</span>
</div>
</nav>
<!-- Footer Marquee Shell -->
<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 w-full">
<div class="marquee-content py-2">
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
JUMAT MUBARAK: Luruskan dan rapatkan shaf. Harap non-aktifkan alat komunikasi.
</span>
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
Assalamu Alaikum: Please silence your mobile phones before prayer begins. Friday Khutbah starts at 1:00 PM.
</span>
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
JUMAT MUBARAK: Luruskan dan rapatkan shaf. Harap non-aktifkan alat komunikasi.
</span>
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
Assalamu Alaikum: Please silence your mobile phones before prayer begins. Friday Khutbah starts at 1:00 PM.
</span>
</div>
<!-- Duplicated for seamless loop -->
<div aria-hidden="true" class="marquee-content py-2">
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
JUMAT MUBARAK: Luruskan dan rapatkan shaf. Harap non-aktifkan alat komunikasi.
</span>
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
Assalamu Alaikum: Please silence your mobile phones before prayer begins. Friday Khutbah starts at 1:00 PM.
</span>
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
JUMAT MUBARAK: Luruskan dan rapatkan shaf. Harap non-aktifkan alat komunikasi.
</span>
<span class="font-['Manrope'] font-semibold tracking-wide uppercase text-sm text-[#e9c349]">
Assalamu Alaikum: Please silence your mobile phones before prayer begins. Friday Khutbah starts at 1:00 PM.
</span>
</div>
</div>
</footer>
</body></html>