blob: 9ed74cebb0fc8cd175a3c24b24c59f1ad4e7957f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<script lang="ts">
import { onMount } from 'svelte';
import type { Maintenance } from '$lib/types';
import '../app.css';
let { children } = $props();
let maintenance = $state<Maintenance | null>(null);
onMount(async () => {
try {
const res = await fetch('http://localhost:8080/api/active-maintenance');
if (res.ok) {
const data = await res.json();
maintenance = data.maintenance ?? null;
}
} catch { /* ignore */ }
});
</script>
<div class="min-h-screen">
{#if maintenance}
<div class="border-b border-[#facc15]/30 bg-[#facc15]/5 px-6 py-3">
<div class="mx-auto flex max-w-6xl items-center justify-center gap-2">
<svg class="h-4 w-4 shrink-0 text-[#facc15]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
</svg>
<p class="text-xs font-medium text-[#facc15]">{maintenance.title}</p>
</div>
</div>
{/if}
<header class="border-b border-[var(--border-color)] px-6 py-4">
<div class="mx-auto flex max-w-6xl items-center justify-between">
<div class="flex items-center gap-3">
<a href="/" class="text-lg font-bold tracking-tight text-white transition-colors hover:text-[var(--green)]">
<span class="text-[var(--green)]">●</span> YAUM
</a>
<span class="hidden text-xs text-[var(--text-muted)] sm:inline">Yet Another Uptime Monitor</span>
</div>
<nav class="flex items-center gap-4">
<a href="/" class="text-xs text-[var(--text-muted)] transition-colors hover:text-white">Dashboard</a>
<a href="/admin" class="text-xs text-[var(--text-muted)] transition-colors hover:text-white">Admin</a>
</nav>
</div>
</header>
<main class="mx-auto max-w-6xl px-4 py-8">
{@render children()}
</main>
</div>
|
