486 lines
24 KiB
HTML
486 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="nl"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>VacatureRadar - Bronnen & Source Health</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&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"/>
|
|
<!-- Tailwind Configuration -->
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-secondary-fixed-variant": "#005236",
|
|
"secondary-fixed": "#6ffbbe",
|
|
"on-error-container": "#ffdad6",
|
|
"surface": "#0b1326",
|
|
"surface-dim": "#0b1326",
|
|
"on-primary": "#003739",
|
|
"on-surface": "#dae2fd",
|
|
"inverse-surface": "#dae2fd",
|
|
"background": "#0b1326",
|
|
"tertiary-fixed": "#e1e0ff",
|
|
"surface-container": "#171f33",
|
|
"primary-container": "#00f5ff",
|
|
"surface-container-lowest": "#060e20",
|
|
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
"on-tertiary": "#1000a9",
|
|
"on-secondary": "#003824",
|
|
"surface-container-highest": "#2d3449",
|
|
"on-primary-fixed-variant": "#004f53",
|
|
"on-secondary-container": "#00311f",
|
|
"on-error": "#690005",
|
|
"tertiary": "#fcf8ff",
|
|
"on-secondary-fixed": "#002113",
|
|
"on-primary-fixed": "#002021",
|
|
"surface-variant": "#2d3449",
|
|
"inverse-primary": "#00696e",
|
|
"surface-bright": "#31394d",
|
|
"secondary": "#4edea3",
|
|
"primary-fixed": "#63f7ff",
|
|
"outline": "#849495",
|
|
"surface-container-high": "#222a3d",
|
|
"primary": "#e9feff",
|
|
"secondary-fixed-dim": "#4edea3",
|
|
"on-background": "#dae2fd",
|
|
"on-surface-variant": "#b9caca",
|
|
"error": "#ffb4ab",
|
|
"secondary-container": "#00a572",
|
|
"tertiary-fixed-dim": "#c0c1ff",
|
|
"on-tertiary-container": "#4c4ed9",
|
|
"surface-container-low": "#131b2e",
|
|
"outline-variant": "#3a494a",
|
|
"inverse-on-surface": "#283044",
|
|
"on-primary-container": "#006c71",
|
|
"primary-fixed-dim": "#00dce5",
|
|
"error-container": "#93000a",
|
|
"tertiary-container": "#dbdaff",
|
|
"surface-tint": "#00dce5",
|
|
"on-tertiary-fixed": "#07006c"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"stack-md": "16px",
|
|
"container-max": "1280px",
|
|
"gutter": "24px",
|
|
"stack-sm": "8px",
|
|
"margin-mobile": "16px",
|
|
"stack-lg": "32px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-lg": ["Geist"],
|
|
"headline-md": ["Geist"],
|
|
"body-md": ["Inter"],
|
|
"body-sm": ["Inter"],
|
|
"label-mono": ["JetBrains Mono"],
|
|
"metadata-caps": ["JetBrains Mono"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #0b1326;
|
|
color: #dae2fd;
|
|
}
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.signal-glow-primary {
|
|
box-shadow: 0 0 15px rgba(0, 245, 255, 0.1);
|
|
border: 1px solid rgba(0, 245, 255, 0.2);
|
|
}
|
|
.glass-card {
|
|
background: rgba(23, 31, 51, 0.6);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(58, 73, 74, 0.5);
|
|
}
|
|
.technical-log {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #3a494a #171f33;
|
|
}
|
|
@keyframes pulse-cyan {
|
|
0% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.5; transform: scale(1.2); }
|
|
100% { opacity: 1; transform: scale(1); }
|
|
}
|
|
.status-pulse {
|
|
animation: pulse-cyan 2s infinite ease-in-out;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-body-md text-body-md overflow-x-hidden">
|
|
<!-- Top Navigation Anchor (Desktop/Web Layout) -->
|
|
<header class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-xl border-b border-outline-variant/30 shadow-sm hidden md:block">
|
|
<div class="flex justify-between items-center px-gutter py-stack-sm w-full max-w-container-max mx-auto">
|
|
<div class="flex items-center gap-8">
|
|
<span class="font-headline-md text-headline-md font-bold tracking-tight text-primary">VacatureRadar</span>
|
|
<nav class="flex gap-6">
|
|
<a class="text-on-surface-variant hover:bg-surface-container-highest/50 px-3 py-1 rounded transition-colors font-medium" href="#">Overzicht</a>
|
|
<a class="text-primary font-bold px-3 py-1 rounded" href="#">Bronnen</a>
|
|
<a class="text-on-surface-variant hover:bg-surface-container-highest/50 px-3 py-1 rounded transition-colors font-medium" href="#">Instellingen</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors">notifications</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors">account_circle</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Side Navigation Anchor (Desktop Sidebar) -->
|
|
<aside class="h-screen w-64 fixed left-0 top-0 bg-surface-container border-r border-outline-variant/20 hidden md:flex flex-col py-stack-lg gap-stack-md z-40">
|
|
<div class="px-6 pb-6">
|
|
<h1 class="font-headline-md text-headline-md text-primary font-bold">VacatureRadar</h1>
|
|
<p class="font-label-mono text-label-mono text-on-surface-variant opacity-60">Intelligent Discovery</p>
|
|
</div>
|
|
<nav class="flex flex-col px-3">
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<span class="font-label-mono text-label-mono">Overview</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all" href="#">
|
|
<span class="material-symbols-outlined">radar</span>
|
|
<span class="font-label-mono text-label-mono">New matches</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded text-primary bg-primary-container/10 border-r-2 border-primary-container" href="#">
|
|
<span class="material-symbols-outlined">hub</span>
|
|
<span class="font-label-mono text-label-mono">Sources</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all" href="#">
|
|
<span class="material-symbols-outlined">precision_manufacturing</span>
|
|
<span class="font-label-mono text-label-mono">Automation</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<span class="font-label-mono text-label-mono">Settings</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto px-6">
|
|
<button class="w-full bg-primary-container/20 text-primary border border-primary-container/30 py-3 rounded-lg font-bold flex items-center justify-center gap-2 hover:bg-primary-container/30 transition-all active:scale-95">
|
|
<span class="material-symbols-outlined">add</span>
|
|
<span class="font-label-mono text-label-mono uppercase tracking-widest text-[10px]">New Search</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Canvas -->
|
|
<main class="md:ml-64 pt-6 md:pt-24 min-h-screen px-4 md:px-gutter max-w-container-max mx-auto mb-24 md:mb-12">
|
|
<!-- Header & Stats -->
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-stack-lg">
|
|
<div>
|
|
<h2 class="font-headline-lg text-headline-lg text-primary tracking-tight">Bronbeheer</h2>
|
|
<p class="text-on-surface-variant font-body-md mt-1">Beheer en monitor de actieve scan-endpoints van jouw radarprofiel.</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<div class="glass-card px-4 py-2 rounded-xl flex flex-col">
|
|
<span class="text-label-mono text-[10px] text-on-surface-variant uppercase tracking-tighter">Actieve Bronnen</span>
|
|
<span class="font-headline-md text-secondary">24</span>
|
|
</div>
|
|
<div class="glass-card px-4 py-2 rounded-xl flex flex-col">
|
|
<span class="text-label-mono text-[10px] text-on-surface-variant uppercase tracking-tighter">Systeemstatus</span>
|
|
<span class="font-headline-md text-primary flex items-center gap-2">
|
|
Gezond
|
|
<span class="w-2 h-2 rounded-full bg-secondary status-pulse"></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Sources Grid -->
|
|
<div class="grid grid-cols-1 gap-6">
|
|
<!-- Source Card 1: LinkedIn Alerts (Health: Gezond) -->
|
|
<section class="glass-card rounded-xl overflow-hidden signal-glow-primary">
|
|
<div class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center border border-outline-variant/30">
|
|
<span class="material-symbols-outlined text-primary">mail</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline-md text-primary">LinkedIn Alerts</h3>
|
|
<div class="flex items-center gap-3 mt-1">
|
|
<span class="font-label-mono text-label-mono text-on-surface-variant">Email Alert</span>
|
|
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
|
<span class="font-label-mono text-label-mono text-on-surface-variant">Laatste scan: 12 min geleden</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="text-right">
|
|
<span class="block text-[10px] font-label-mono text-on-surface-variant uppercase">Vacatures gevonden</span>
|
|
<span class="text-headline-md text-primary">142</span>
|
|
</div>
|
|
<div class="bg-secondary/10 border border-secondary/20 px-3 py-1 rounded-full flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
|
<span class="text-label-mono text-secondary font-medium">Gezond</span>
|
|
</div>
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors" onclick="toggleDetails('details-1')">
|
|
<span class="material-symbols-outlined" id="icon-details-1">expand_more</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Progressive Disclosure Section -->
|
|
<div class="hidden border-t border-outline-variant/20 bg-surface-container-low/50" id="details-1">
|
|
<div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div>
|
|
<h4 class="text-label-mono text-[11px] text-on-surface-variant uppercase mb-3">Technische Log</h4>
|
|
<div class="bg-surface-container-lowest p-4 rounded border border-outline-variant/30 font-label-mono text-xs leading-relaxed text-on-surface-variant/80 technical-log max-h-40 overflow-y-auto">
|
|
[2023-10-24 14:12:01] Connection established with imap.gmail.com<br/>
|
|
[2023-10-24 14:12:03] Searching for subject: "LinkedIn Job Alert"<br/>
|
|
[2023-10-24 14:12:05] Identified 3 new messages. Parsing bodies...<br/>
|
|
[2023-10-24 14:12:08] 12 job entities extracted successfully.<br/>
|
|
[2023-10-24 14:12:10] Session closed cleanly.
|
|
</div>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<h4 class="text-label-mono text-[11px] text-on-surface-variant uppercase mb-2">Parser Configuratie</h4>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-surface-container-highest px-2 py-1 rounded text-[10px] font-label-mono border border-outline-variant/30">REGEX_V2.4</span>
|
|
<span class="bg-surface-container-highest px-2 py-1 rounded text-[10px] font-label-mono border border-outline-variant/30">DEEP_LINK_CLEANER</span>
|
|
<span class="bg-surface-container-highest px-2 py-1 rounded text-[10px] font-label-mono border border-outline-variant/30">META_DATA_SCRAPER</span>
|
|
</div>
|
|
</div>
|
|
<button class="bg-primary px-4 py-2 rounded text-surface font-bold text-sm hover:bg-primary-fixed transition-colors">Herstart Scan</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Source Card 2: VDAB RSS (Health: Beperkt) -->
|
|
<section class="glass-card rounded-xl overflow-hidden border-orange-500/20">
|
|
<div class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center border border-outline-variant/30">
|
|
<span class="material-symbols-outlined text-orange-400">rss_feed</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline-md text-primary">VDAB RSS</h3>
|
|
<div class="flex items-center gap-3 mt-1">
|
|
<span class="font-label-mono text-label-mono text-on-surface-variant">RSS Feed</span>
|
|
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
|
<span class="font-label-mono text-label-mono text-on-surface-variant">Laatste scan: 4u geleden</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="text-right">
|
|
<span class="block text-[10px] font-label-mono text-on-surface-variant uppercase">Vacatures gevonden</span>
|
|
<span class="text-headline-md text-primary">89</span>
|
|
</div>
|
|
<div class="bg-orange-500/10 border border-orange-500/20 px-3 py-1 rounded-full flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-orange-500"></span>
|
|
<span class="text-label-mono text-orange-400 font-medium">Beperkt</span>
|
|
</div>
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors" onclick="toggleDetails('details-2')">
|
|
<span class="material-symbols-outlined" id="icon-details-2">expand_more</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="hidden border-t border-outline-variant/20 bg-surface-container-low/50" id="details-2">
|
|
<div class="p-6">
|
|
<div class="bg-orange-500/5 border border-orange-500/20 p-4 rounded-lg flex items-start gap-3 mb-6">
|
|
<span class="material-symbols-outlined text-orange-500">warning</span>
|
|
<p class="text-sm text-on-surface-variant leading-relaxed">De RSS feed van VDAB antwoordt traag (Latency > 5000ms). Sommige afbeeldingen konden niet worden gedownload. De tekstuele data is wel up-to-date.</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div class="bg-surface-container-lowest p-4 rounded border border-outline-variant/30 font-label-mono text-xs text-on-surface-variant/80 technical-log max-h-40 overflow-y-auto">
|
|
[2023-10-24 10:00:15] Fetching XML from vdab.be/feed...<br/>
|
|
[2023-10-24 10:05:15] Warning: Timeout reached while fetching images.<br/>
|
|
[2023-10-24 10:05:16] Partial success: 89 items processed.
|
|
</div>
|
|
<div class="flex items-end">
|
|
<button class="bg-orange-500/20 border border-orange-500/40 text-orange-400 px-4 py-2 rounded font-bold text-sm hover:bg-orange-500/30 transition-colors">Diagnose Uitvoeren</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Source Card 3: Ziekenhuis Hasselt (Health: Controle nodig) -->
|
|
<section class="glass-card rounded-xl overflow-hidden border-yellow-500/20">
|
|
<div class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center border border-outline-variant/30">
|
|
<span class="material-symbols-outlined text-yellow-400">web</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline-md text-primary">Ziekenhuis Hasselt Carrière</h3>
|
|
<div class="flex items-center gap-3 mt-1">
|
|
<span class="font-label-mono text-label-mono text-on-surface-variant">Direct Scrape</span>
|
|
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
|
<span class="font-label-mono text-label-mono text-on-surface-variant">Laatste scan: Gisteren</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="text-right opacity-50">
|
|
<span class="block text-[10px] font-label-mono text-on-surface-variant uppercase">Vacatures gevonden</span>
|
|
<span class="text-headline-md text-primary">--</span>
|
|
</div>
|
|
<div class="bg-yellow-500/10 border border-yellow-500/20 px-3 py-1 rounded-full flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-yellow-500"></span>
|
|
<span class="text-label-mono text-yellow-400 font-medium">Controle nodig</span>
|
|
</div>
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors" onclick="toggleDetails('details-3')">
|
|
<span class="material-symbols-outlined" id="icon-details-3">expand_more</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="hidden border-t border-outline-variant/20 bg-surface-container-low/50" id="details-3">
|
|
<div class="p-6">
|
|
<div class="bg-yellow-500/5 border border-yellow-500/20 p-4 rounded-lg mb-6">
|
|
<p class="text-sm text-on-surface-variant leading-relaxed">De website structuur lijkt gewijzigd. De huidige selector <code class="bg-surface-container px-1 py-0.5 rounded text-yellow-400">.vacancy-item</code> vindt geen resultaten meer. Update de parser configuratie.</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="bg-yellow-500 text-surface px-4 py-2 rounded font-bold text-sm hover:bg-yellow-400 transition-colors">Open Visual Debugger</button>
|
|
<button class="bg-surface-container-highest text-primary border border-outline-variant/30 px-4 py-2 rounded font-bold text-sm">Handleiding Updaten</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Source Card 4: Indeed Search (Health: Mislukt) -->
|
|
<section class="glass-card rounded-xl overflow-hidden border-error/30">
|
|
<div class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-12 h-12 rounded-lg bg-error-container/20 flex items-center justify-center border border-error/30">
|
|
<span class="material-symbols-outlined text-error">error</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline-md text-primary">Indeed Search Query</h3>
|
|
<div class="flex items-center gap-3 mt-1">
|
|
<span class="font-label-mono text-label-mono text-on-surface-variant">API Integration</span>
|
|
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
|
<span class="font-label-mono text-label-mono text-on-surface-variant">Laatste scan: mislukt</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="text-right opacity-50">
|
|
<span class="block text-[10px] font-label-mono text-on-surface-variant uppercase">Vacatures gevonden</span>
|
|
<span class="text-headline-md text-primary">0</span>
|
|
</div>
|
|
<div class="bg-error/10 border border-error/20 px-3 py-1 rounded-full flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-error"></span>
|
|
<span class="text-label-mono text-error font-medium">Mislukt</span>
|
|
</div>
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors" onclick="toggleDetails('details-4')">
|
|
<span class="material-symbols-outlined" id="icon-details-4">expand_more</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="hidden border-t border-outline-variant/20 bg-surface-container-low/50" id="details-4">
|
|
<div class="p-6">
|
|
<div class="flex flex-col gap-4">
|
|
<div class="bg-error-container/10 border border-error/30 p-4 rounded-lg flex items-start gap-3">
|
|
<span class="material-symbols-outlined text-error">lock</span>
|
|
<div>
|
|
<p class="text-sm font-bold text-error mb-1">Authenticatie Fout (HTTP 401)</p>
|
|
<p class="text-sm text-on-surface-variant">De API-key voor Indeed is verlopen of ingetrokken. Vernieuw je tokens in de integratie-instellingen.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="bg-error text-surface px-4 py-2 rounded font-bold text-sm hover:bg-error/80 transition-colors">Credentials Bijwerken</button>
|
|
<button class="bg-surface-container-highest text-primary border border-outline-variant/30 px-4 py-2 rounded font-bold text-sm">Documentatie</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- System Health Visualization Section -->
|
|
<section class="mt-12 mb-24 md:mb-12">
|
|
<h3 class="font-headline-md text-primary mb-6">Radar Systeem Integriteit</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="glass-card p-6 rounded-xl relative overflow-hidden h-64">
|
|
<h4 class="text-label-mono text-[11px] text-on-surface-variant uppercase mb-4">Traffic Signal Flow</h4>
|
|
|
|
<div class="relative z-10 flex flex-col justify-end h-full">
|
|
<span class="text-headline-md text-primary">98.2%</span>
|
|
<span class="text-xs text-secondary font-label-mono">Scan Success Rate</span>
|
|
</div>
|
|
</div>
|
|
<div class="glass-card p-6 rounded-xl relative overflow-hidden h-64">
|
|
<h4 class="text-label-mono text-[11px] text-on-surface-variant uppercase mb-4">Parser Latency</h4>
|
|
|
|
<div class="relative z-10 flex flex-col justify-end h-full">
|
|
<span class="text-headline-md text-primary">45ms</span>
|
|
<span class="text-xs text-on-surface-variant font-label-mono">Gemiddelde Reactietijd</span>
|
|
</div>
|
|
</div>
|
|
<div class="glass-card p-6 rounded-xl flex flex-col justify-between">
|
|
<div>
|
|
<h4 class="text-label-mono text-[11px] text-on-surface-variant uppercase mb-4">Systeem Logboek</h4>
|
|
<div class="space-y-4">
|
|
<div class="flex gap-3 items-start">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-secondary mt-1.5"></span>
|
|
<div class="text-xs">
|
|
<p class="text-primary font-medium">Backup Voltooid</p>
|
|
<p class="text-on-surface-variant/70">Database sync succesvol naar EU-WEST-1.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3 items-start">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-orange-500 mt-1.5"></span>
|
|
<div class="text-xs">
|
|
<p class="text-primary font-medium">Capaciteit Waarschuwing</p>
|
|
<p class="text-on-surface-variant/70">Scan queue is 80% vol. Vertraging mogelijk.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="w-full border border-outline-variant/30 py-2 rounded text-xs font-label-mono hover:bg-surface-container-highest transition-colors">Volledig Log Bekijken</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Bottom Navigation (Mobile Only) -->
|
|
<nav class="md:hidden fixed bottom-0 left-0 w-full bg-surface-container border-t border-outline-variant/10 py-3 px-6 flex justify-between items-center z-50">
|
|
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<span class="text-[10px] font-label-mono">Overzicht</span>
|
|
</button>
|
|
<button class="flex flex-col items-center gap-1 text-primary">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">hub</span>
|
|
<span class="text-[10px] font-label-mono">Bronnen</span>
|
|
</button>
|
|
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
<span class="material-symbols-outlined">radar</span>
|
|
<span class="text-[10px] font-label-mono">Radar</span>
|
|
</button>
|
|
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<span class="text-[10px] font-label-mono">Instellingen</span>
|
|
</button>
|
|
</nav>
|
|
<script>
|
|
function toggleDetails(id) {
|
|
const el = document.getElementById(id);
|
|
const icon = document.getElementById('icon-' + id);
|
|
const isHidden = el.classList.contains('hidden');
|
|
|
|
// Close all other open details
|
|
document.querySelectorAll('[id^="details-"]').forEach(item => {
|
|
if(item.id !== id) {
|
|
item.classList.add('hidden');
|
|
const otherIcon = document.getElementById('icon-' + item.id);
|
|
if(otherIcon) otherIcon.style.transform = 'rotate(0deg)';
|
|
}
|
|
});
|
|
|
|
if (isHidden) {
|
|
el.classList.remove('hidden');
|
|
icon.style.transform = 'rotate(180deg)';
|
|
icon.style.transition = 'transform 0.3s ease';
|
|
} else {
|
|
el.classList.add('hidden');
|
|
icon.style.transform = 'rotate(0deg)';
|
|
}
|
|
}
|
|
</script>
|
|
</body></html> |