413 lines
22 KiB
HTML
413 lines
22 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>The Sacred Horizon | Admin Panel</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%3DCgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzIwMmJhNWYyNWE5MDQ1Mzc4MzE4N2M1NWMwNzY1NTE2EgsSBxDjguyrxhUYAZIBIwoKcHJvamVjdF9pZBIVQhMxMzc1OTg2NjM0OTQyOTUwODA4%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: {
|
|
"secondary-fixed": "#ffe088",
|
|
"inverse-surface": "#e5e2e1",
|
|
"on-tertiary-fixed": "#221b00",
|
|
"on-primary-fixed-variant": "#005312",
|
|
"on-surface": "#e5e2e1",
|
|
"on-tertiary": "#3a3000",
|
|
"surface-container-low": "#1c1b1b",
|
|
"on-secondary-fixed": "#241a00",
|
|
"error": "#ffb4ab",
|
|
"primary-container": "#004f11",
|
|
"surface-container": "#201f1f",
|
|
"inverse-on-surface": "#313030",
|
|
"tertiary-fixed-dim": "#e9c400",
|
|
"on-secondary": "#3c2f00",
|
|
"inverse-primary": "#1b6d24",
|
|
"secondary-container": "#af8d11",
|
|
"surface-dim": "#131313",
|
|
"error-container": "#93000a",
|
|
"surface-bright": "#393939",
|
|
"outline": "#89938f",
|
|
"tertiary": "#e9c400",
|
|
"surface": "#131313",
|
|
"on-error-container": "#ffdad6",
|
|
"on-tertiary-container": "#4b3e00",
|
|
"primary-fixed": "#a3f69c",
|
|
"outline-variant": "#3f4945",
|
|
"tertiary-container": "#c8a900",
|
|
"surface-tint": "#88d982",
|
|
"on-secondary-fixed-variant": "#574500",
|
|
"on-background": "#e5e2e1",
|
|
"primary": "#88d982",
|
|
"surface-container-high": "#2a2a2a",
|
|
"on-error": "#690005",
|
|
"on-secondary-container": "#342800",
|
|
"tertiary-fixed": "#ffe16d",
|
|
"secondary-fixed-dim": "#e9c349",
|
|
"primary-fixed-dim": "#88d982",
|
|
"secondary": "#e9c349",
|
|
"background": "#131313",
|
|
"surface-container-highest": "#353534",
|
|
"on-tertiary-fixed-variant": "#544600",
|
|
"on-primary-fixed": "#002204",
|
|
"on-primary-container": "#72c36e",
|
|
"surface-variant": "#353534",
|
|
"surface-container-lowest": "#0e0e0e",
|
|
"on-surface-variant": "#bfc9c4",
|
|
"on-primary": "#003909"
|
|
},
|
|
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;
|
|
font-family: 'Manrope', sans-serif;
|
|
}
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #131313;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #353534;
|
|
border-radius: 10px;
|
|
}
|
|
.bento-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="overflow-hidden">
|
|
<!-- Side Navigation Bar -->
|
|
<aside class="fixed left-0 top-0 h-full flex flex-col py-8 bg-[#1c1b1b] dark:bg-[#1c1b1b] w-64 z-50">
|
|
<div class="px-8 mb-10">
|
|
<h1 class="text-lg font-black text-[#e9c349] font-['Plus_Jakarta_Sans']">Admin Panel</h1>
|
|
<p class="text-[10px] uppercase tracking-widest text-[#e5e2e1]/40 mt-1">Celestial Anchor System</p>
|
|
</div>
|
|
<nav class="flex-1 space-y-1">
|
|
<a class="bg-[#353534] text-[#88d982] border-l-4 border-[#88d982] px-4 py-3 flex items-center gap-3 font-['Manrope'] text-sm font-medium hover:bg-[#353534] transition-all Active: translate-x-1 duration-200" href="#">
|
|
<span class="material-symbols-outlined" data-icon="fingerprint">fingerprint</span>
|
|
Identitas
|
|
</a>
|
|
<a class="text-[#e5e2e1]/70 px-4 py-3 flex items-center gap-3 font-['Manrope'] text-sm font-medium hover:bg-[#353534] hover:text-[#88d982] transition-all Active: translate-x-1 duration-200" href="#">
|
|
<span class="material-symbols-outlined" data-icon="location_on">location_on</span>
|
|
Lokasi
|
|
</a>
|
|
<a class="text-[#e5e2e1]/70 px-4 py-3 flex items-center gap-3 font-['Manrope'] text-sm font-medium hover:bg-[#353534] hover:text-[#88d982] transition-all Active: translate-x-1 duration-200" href="#">
|
|
<span class="material-symbols-outlined" data-icon="sync_alt">sync_alt</span>
|
|
Sinkronisasi
|
|
</a>
|
|
<a class="text-[#e5e2e1]/70 px-4 py-3 flex items-center gap-3 font-['Manrope'] text-sm font-medium hover:bg-[#353534] hover:text-[#88d982] transition-all Active: translate-x-1 duration-200" href="#">
|
|
<span class="material-symbols-outlined" data-icon="mosque">mosque</span>
|
|
Pengaturan Shalat
|
|
</a>
|
|
<a class="text-[#e5e2e1]/70 px-4 py-3 flex items-center gap-3 font-['Manrope'] text-sm font-medium hover:bg-[#353534] hover:text-[#88d982] transition-all Active: translate-x-1 duration-200" href="#">
|
|
<span class="material-symbols-outlined" data-icon="palette">palette</span>
|
|
Tampilan
|
|
</a>
|
|
<a class="text-[#e5e2e1]/70 px-4 py-3 flex items-center gap-3 font-['Manrope'] text-sm font-medium hover:bg-[#353534] hover:text-[#88d982] transition-all Active: translate-x-1 duration-200" href="#">
|
|
<span class="material-symbols-outlined" data-icon="update">update</span>
|
|
Auto-Update
|
|
</a>
|
|
</nav>
|
|
<div class="px-6 mt-auto">
|
|
<div class="flex items-center gap-3 p-3 bg-surface-container rounded-xl">
|
|
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-primary" data-icon="person">person</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-on-surface">Mosque Admin</p>
|
|
<p class="text-[10px] text-on-surface/50">Master Controller</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Top App Bar -->
|
|
<header class="fixed top-0 right-0 left-64 flex justify-between items-center px-8 py-4 w-auto bg-[#131313] z-40">
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-xl font-bold text-[#88d982] font-['Plus_Jakarta_Sans'] tracking-[-0.02em]">The Sacred Horizon</span>
|
|
<div class="h-4 w-[1px] bg-outline-variant"></div>
|
|
<span class="text-xs text-on-surface/60 font-medium tracking-wider uppercase">System Configuration</span>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex gap-2">
|
|
<button class="p-2 text-[#e5e2e1] hover:bg-[#353534] transition-colors rounded-lg Active: scale-95 duration-150">
|
|
<span class="material-symbols-outlined" data-icon="schedule">schedule</span>
|
|
</button>
|
|
<button class="p-2 text-[#e5e2e1] hover:bg-[#353534] transition-colors rounded-lg Active: scale-95 duration-150">
|
|
<span class="material-symbols-outlined" data-icon="calendar_month">calendar_month</span>
|
|
</button>
|
|
<button class="p-2 text-[#e5e2e1] hover:bg-[#353534] transition-colors rounded-lg Active: scale-95 duration-150">
|
|
<span class="material-symbols-outlined" data-icon="sync">sync</span>
|
|
</button>
|
|
</div>
|
|
<button class="bg-primary text-on-primary px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest hover:brightness-110 transition-all">
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Canvas -->
|
|
<main class="ml-64 pt-24 pb-12 px-12 h-screen overflow-y-auto bg-background">
|
|
<!-- Bento Grid Layout -->
|
|
<div class="bento-grid max-w-7xl mx-auto">
|
|
<!-- Section: Identitas & Lokasi -->
|
|
<div class="col-span-8 space-y-6">
|
|
<div class="bg-surface-container-low p-8 rounded-xl relative overflow-hidden group">
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full -mr-16 -mt-16 blur-3xl group-hover:bg-primary/10 transition-all duration-700"></div>
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<span class="material-symbols-outlined text-primary" data-icon="id_card">id_card</span>
|
|
<h2 class="text-lg font-bold font-headline">Identitas Masjid</h2>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-8">
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] uppercase tracking-widest text-on-surface/40 font-bold">Nama Masjid</label>
|
|
<input class="w-full bg-surface-container-highest border-none rounded-lg p-4 text-on-surface focus:ring-2 focus:ring-primary font-body transition-all" type="text" value="Al-Mustafa"/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] uppercase tracking-widest text-on-surface/40 font-bold">Alamat Utama</label>
|
|
<input class="w-full bg-surface-container-highest border-none rounded-lg p-4 text-on-surface focus:ring-2 focus:ring-primary font-body transition-all" type="text" value="Jl. Merdeka"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-low p-8 rounded-xl">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-secondary" data-icon="distance">distance</span>
|
|
<h2 class="text-lg font-bold font-headline">Konfigurasi Lokasi</h2>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-6 mb-6">
|
|
<div class="p-4 bg-surface-container-highest rounded-xl border border-outline-variant/10">
|
|
<p class="text-[10px] uppercase text-on-surface/40 mb-1">City ID API</p>
|
|
<p class="text-xl font-bold text-secondary">1218</p>
|
|
<p class="text-xs text-on-surface/60">Yogyakarta, ID</p>
|
|
</div>
|
|
<div class="p-4 bg-surface-container-highest rounded-xl border border-outline-variant/10">
|
|
<p class="text-[10px] uppercase text-on-surface/40 mb-1">Timezone</p>
|
|
<p class="text-xl font-bold text-on-surface">WIB</p>
|
|
<p class="text-xs text-on-surface/60">Asia/Jakarta</p>
|
|
</div>
|
|
<div class="p-4 bg-surface-container-highest rounded-xl border border-outline-variant/10">
|
|
<p class="text-[10px] uppercase text-on-surface/40 mb-1">Coordinates</p>
|
|
<p class="text-xl font-bold text-on-surface">-7.7956° S</p>
|
|
<p class="text-xs text-on-surface/60">110.3695° E</p>
|
|
</div>
|
|
</div>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-on-surface/40" data-icon="search">search</span>
|
|
<input class="w-full bg-surface-container-highest border-none rounded-full py-4 pl-12 pr-6 text-on-surface focus:ring-2 focus:ring-secondary transition-all text-sm" placeholder="Cari Kota (Search for City...)" type="text"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Section: Sync Status -->
|
|
<div class="col-span-4">
|
|
<div class="bg-primary-container/20 h-full p-8 rounded-xl flex flex-col justify-between border border-primary/10">
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<span class="material-symbols-outlined text-primary" data-icon="cloud_sync" data-weight="fill">cloud_sync</span>
|
|
<h2 class="text-lg font-bold font-headline">Sinkronisasi Data</h2>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<div class="flex justify-between items-end">
|
|
<div>
|
|
<p class="text-xs text-on-surface/60">Sync Period</p>
|
|
<p class="text-lg font-bold">Oct - Nov 2024</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-[10px] uppercase text-primary font-bold tracking-widest">Active</p>
|
|
<p class="text-xs text-on-surface/40 italic">2 days ago</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-full bg-surface-container-highest h-1 rounded-full overflow-hidden">
|
|
<div class="bg-primary h-full w-2/3"></div>
|
|
</div>
|
|
<div class="bg-surface-container-highest p-4 rounded-xl">
|
|
<p class="text-xs text-on-surface/60 leading-relaxed mb-2">Automated monthly data updates ensure your prayer timings remain perfectly aligned with local astronomical data.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="w-full bg-primary py-4 rounded-xl text-on-primary font-bold flex items-center justify-center gap-2 hover:brightness-110 active:scale-95 transition-all">
|
|
<span class="material-symbols-outlined" data-icon="refresh">refresh</span>
|
|
Sync Data Bulanan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Section: Pengaturan Shalat (The Dense Part) -->
|
|
<div class="col-span-12">
|
|
<div class="bg-surface-container-low p-8 rounded-xl">
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<span class="material-symbols-outlined text-primary" data-icon="timer">timer</span>
|
|
<h2 class="text-lg font-bold font-headline">Konfigurasi Waktu & Jeda Shalat</h2>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="text-[10px] uppercase tracking-tighter text-on-surface/40 border-b border-outline-variant/10">
|
|
<th class="pb-4 font-bold">Nama Shalat</th>
|
|
<th class="pb-4 font-bold">Pre-Adzan Lead (min)</th>
|
|
<th class="pb-4 font-bold">Iqomah Duration</th>
|
|
<th class="pb-4 font-bold">Blank Screen (min)</th>
|
|
<th class="pb-4 font-bold">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-sm font-body">
|
|
<tr class="border-b border-outline-variant/5">
|
|
<td class="py-5 font-bold text-primary">Subuh</td>
|
|
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center focus:ring-1 focus:ring-primary" type="number" value="3"/></td>
|
|
<td class="py-5">
|
|
<div class="flex items-center gap-2">
|
|
<input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center focus:ring-1 focus:ring-primary" type="number" value="10"/>
|
|
<span class="text-[10px] text-on-surface/40 uppercase">Minutes</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center focus:ring-1 focus:ring-primary" type="number" value="15"/></td>
|
|
<td class="py-5"><span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-[10px] font-bold">OPTIMIZED</span></td>
|
|
</tr>
|
|
<tr class="border-b border-outline-variant/5">
|
|
<td class="py-5 font-bold">Dzuhur</td>
|
|
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="2"/></td>
|
|
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="15"/></td>
|
|
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="10"/></td>
|
|
<td class="py-5"><span class="bg-on-surface/5 text-on-surface/60 px-3 py-1 rounded-full text-[10px]">STANDARD</span></td>
|
|
</tr>
|
|
<tr class="border-b border-outline-variant/5">
|
|
<td class="py-5 font-bold">Ashar</td>
|
|
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="2"/></td>
|
|
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="12"/></td>
|
|
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="10"/></td>
|
|
<td class="py-5"><span class="bg-on-surface/5 text-on-surface/60 px-3 py-1 rounded-full text-[10px]">STANDARD</span></td>
|
|
</tr>
|
|
<tr class="border-b border-outline-variant/5">
|
|
<td class="py-5 font-bold">Maghrib</td>
|
|
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="2"/></td>
|
|
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="7"/></td>
|
|
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="10"/></td>
|
|
<td class="py-5"><span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-[10px] font-bold">FAST-TRACK</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-5 font-bold">Isya</td>
|
|
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="3"/></td>
|
|
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="10"/></td>
|
|
<td class="py-5"><input class="bg-surface-container-highest border-none rounded p-2 w-16 text-center" type="number" value="20"/></td>
|
|
<td class="py-5"><span class="bg-on-surface/5 text-on-surface/60 px-3 py-1 rounded-full text-[10px]">STANDARD</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Section: Tampilan & Updates -->
|
|
<div class="col-span-7">
|
|
<div class="bg-surface-container-low p-8 rounded-xl h-full">
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<span class="material-symbols-outlined text-primary" data-icon="auto_awesome">auto_awesome</span>
|
|
<h2 class="text-lg font-bold font-headline">Konfigurasi Tampilan (Noor Green)</h2>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] uppercase tracking-widest text-on-surface/40 font-bold">Slideshow Sequence</label>
|
|
<select class="w-full bg-surface-container-highest border-none rounded-lg p-3 text-sm focus:ring-2 focus:ring-primary">
|
|
<option>Hadith & News (Balanced)</option>
|
|
<option>Visual Heavy (Nature)</option>
|
|
<option>Instructional Only</option>
|
|
</select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] uppercase tracking-widest text-on-surface/40 font-bold">Transition Effect</label>
|
|
<select class="w-full bg-surface-container-highest border-none rounded-lg p-3 text-sm focus:ring-2 focus:ring-primary">
|
|
<option>Celestial Fade (Slow)</option>
|
|
<option>Slide Vertical</option>
|
|
<option>No Transition</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] uppercase tracking-widest text-on-surface/40 font-bold">Running Text (Marquee)</label>
|
|
<textarea class="w-full bg-surface-container-highest border-none rounded-xl p-4 text-sm focus:ring-2 focus:ring-primary resize-none" rows="3">Selamat Datang di Masjid Al-Mustafa. Mohon non-aktifkan alat komunikasi selama berada di dalam ruang shalat. Jazaakumullah Khairan.</textarea>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 rounded-full bg-[#88d982] border-4 border-surface-container-highest shadow-lg"></div>
|
|
<div>
|
|
<p class="text-sm font-bold">Noor Green Accent</p>
|
|
<p class="text-xs text-on-surface/60">Primary theme color active across all displays.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-5">
|
|
<div class="bg-surface-container-high p-8 rounded-xl h-full border border-outline-variant/20 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<span class="material-symbols-outlined text-secondary" data-icon="system_update_alt">system_update_alt</span>
|
|
<h2 class="text-lg font-bold font-headline">Auto-Update System</h2>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<div class="flex items-center justify-between p-4 bg-surface-container rounded-xl">
|
|
<div>
|
|
<p class="text-sm font-bold">Auto Online Calibration</p>
|
|
<p class="text-xs text-on-surface/40">Keep time-drift within <1ms</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-surface-container-highest peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center justify-between p-4 bg-surface-container rounded-xl">
|
|
<div>
|
|
<p class="text-sm font-bold">Beta Features</p>
|
|
<p class="text-xs text-on-surface/40">Early access to new visuals</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only peer" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-surface-container-highest peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pt-6 border-t border-outline-variant/10">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-xs text-on-surface/40 font-bold uppercase tracking-widest">Version Status</p>
|
|
<p class="text-xl font-bold font-headline">v4.2.0-stable</p>
|
|
</div>
|
|
<span class="flex items-center gap-1 text-[10px] text-primary font-bold">
|
|
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
|
|
UP TO DATE
|
|
</span>
|
|
</div>
|
|
<button class="w-full mt-4 bg-surface-container-highest py-3 rounded-lg text-xs font-bold hover:bg-surface-variant transition-colors border border-outline-variant/10">
|
|
Check for Manual Updates
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Floating Help Trigger (Conditional FAB) -->
|
|
<button class="fixed bottom-8 right-8 w-14 h-14 bg-secondary text-on-secondary rounded-full shadow-2xl flex items-center justify-center hover:scale-105 transition-all z-50">
|
|
<span class="material-symbols-outlined" data-icon="help_center">help_center</span>
|
|
</button>
|
|
</body></html> |