490 lines
26 KiB
HTML
490 lines
26 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 | Automation Center</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<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=Inter:wght@400;500&family=Geist:wght@500;600&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"/>
|
|
<!-- Tailwind Configuration -->
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"inverse-on-surface": "#283044",
|
|
"surface": "#0b1326",
|
|
"on-surface-variant": "#b9caca",
|
|
"on-secondary-fixed": "#002113",
|
|
"tertiary": "#fcf8ff",
|
|
"on-secondary-container": "#00311f",
|
|
"on-primary-fixed-variant": "#004f53",
|
|
"tertiary-fixed-dim": "#c0c1ff",
|
|
"surface-tint": "#00dce5",
|
|
"surface-container-high": "#222a3d",
|
|
"on-tertiary-fixed": "#07006c",
|
|
"background": "#0b1326",
|
|
"inverse-primary": "#00696e",
|
|
"surface-container-low": "#131b2e",
|
|
"on-primary-container": "#006c71",
|
|
"on-background": "#dae2fd",
|
|
"on-primary": "#003739",
|
|
"on-error": "#690005",
|
|
"surface-dim": "#0b1326",
|
|
"on-surface": "#dae2fd",
|
|
"on-tertiary": "#1000a9",
|
|
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
"on-secondary-fixed-variant": "#005236",
|
|
"inverse-surface": "#dae2fd",
|
|
"on-error-container": "#ffdad6",
|
|
"on-secondary": "#003824",
|
|
"surface-container-lowest": "#060e20",
|
|
"primary-fixed": "#63f7ff",
|
|
"tertiary-fixed": "#e1e0ff",
|
|
"surface-variant": "#2d3449",
|
|
"primary-fixed-dim": "#00dce5",
|
|
"secondary-container": "#00a572",
|
|
"on-primary-fixed": "#002021",
|
|
"outline": "#849495",
|
|
"tertiary-container": "#dbdaff",
|
|
"surface-container": "#171f33",
|
|
"secondary-fixed-dim": "#4edea3",
|
|
"primary": "#e9feff",
|
|
"primary-container": "#00f5ff",
|
|
"on-tertiary-container": "#4c4ed9",
|
|
"surface-bright": "#31394d",
|
|
"outline-variant": "#3a494a",
|
|
"error": "#ffb4ab",
|
|
"secondary": "#4edea3",
|
|
"error-container": "#93000a",
|
|
"secondary-fixed": "#6ffbbe",
|
|
"surface-container-highest": "#2d3449"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"margin-mobile": "16px",
|
|
"stack-lg": "32px",
|
|
"gutter": "24px",
|
|
"container-max": "1280px",
|
|
"stack-sm": "8px",
|
|
"stack-md": "16px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-lg-mobile": ["Geist"],
|
|
"body-md": ["Inter"],
|
|
"headline-md": ["Geist"],
|
|
"metadata-caps": ["JetBrains Mono"],
|
|
"headline-lg": ["Geist"],
|
|
"label-mono": ["JetBrains Mono"],
|
|
"body-sm": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"headline-lg-mobile": ["24px", {"lineHeight": "1.2", "fontWeight": "600"}],
|
|
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
|
"headline-md": ["20px", {"lineHeight": "1.4", "fontWeight": "500"}],
|
|
"metadata-caps": ["12px", {"lineHeight": "1.0", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
|
"headline-lg": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
"label-mono": ["13px", {"lineHeight": "1.0", "fontWeight": "400"}],
|
|
"body-sm": ["14px", {"lineHeight": "1.5", "fontWeight": "400"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.signal-glow {
|
|
box-shadow: 0 0 15px rgba(0, 245, 255, 0.1);
|
|
}
|
|
.pipeline-line {
|
|
background: linear-gradient(90deg, rgba(0,245,255,0.2) 0%, rgba(0,245,255,0) 100%);
|
|
}
|
|
.glass-panel {
|
|
backdrop-filter: blur(12px);
|
|
background: rgba(19, 27, 46, 0.7);
|
|
}
|
|
@keyframes pulse-cyan {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.5; transform: scale(1.1); }
|
|
}
|
|
.animate-pulse-cyan {
|
|
animation: pulse-cyan 2s infinite ease-in-out;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body-md selection:bg-primary-container selection:text-on-primary">
|
|
<!-- Sidebar Navigation Shell -->
|
|
<aside class="h-screen w-64 fixed left-0 top-0 border-r border-outline-variant dark:border-outline-variant bg-surface-container-lowest flex flex-col py-stack-md z-50">
|
|
<div class="px-6 mb-8">
|
|
<h1 class="font-headline-md text-headline-md font-semibold text-primary">VacatureRadar</h1>
|
|
<p class="font-label-mono text-label-mono opacity-50 uppercase tracking-widest">Career Intelligence</p>
|
|
</div>
|
|
<nav class="flex-1 space-y-1">
|
|
<a class="flex items-center px-6 py-3 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200" href="#">
|
|
<span class="material-symbols-outlined mr-3">dashboard</span>
|
|
<span class="font-body-sm text-body-sm">Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center px-6 py-3 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200" href="#">
|
|
<span class="material-symbols-outlined mr-3">radar</span>
|
|
<span class="font-body-sm text-body-sm">Nieuwe matches</span>
|
|
</a>
|
|
<a class="flex items-center px-6 py-3 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200" href="#">
|
|
<span class="material-symbols-outlined mr-3">view_list</span>
|
|
<span class="font-body-sm text-body-sm">Alle vacatures</span>
|
|
</a>
|
|
<!-- Active Item -->
|
|
<a class="flex items-center px-6 py-3 text-primary font-bold border-r-2 border-primary bg-surface-container-high transition-colors duration-200" href="#">
|
|
<span class="material-symbols-outlined mr-3" style="font-variation-settings: 'FILL' 1;">robot_2</span>
|
|
<span class="font-body-sm text-body-sm">Automatisering</span>
|
|
</a>
|
|
<a class="flex items-center px-6 py-3 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200" href="#">
|
|
<span class="material-symbols-outlined mr-3">psychology</span>
|
|
<span class="font-body-sm text-body-sm">Zoekprofiel</span>
|
|
</a>
|
|
<a class="flex items-center px-6 py-3 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200" href="#">
|
|
<span class="material-symbols-outlined mr-3">settings</span>
|
|
<span class="font-body-sm text-body-sm">Instellingen</span>
|
|
</a>
|
|
</nav>
|
|
<div class="px-6 py-4 mt-auto border-t border-outline-variant/30">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center border border-outline-variant">
|
|
<span class="material-symbols-outlined text-sm">account_circle</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-body-sm text-body-sm font-medium">Marc Janssen</p>
|
|
<p class="text-[10px] font-label-mono text-on-surface-variant">PREMIUM ACCOUNT</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Top Navigation Bar -->
|
|
<header class="fixed top-0 right-0 h-16 flex justify-between items-center px-gutter bg-surface/80 backdrop-blur-xl border-b border-outline-variant ml-64 w-[calc(100%-16rem)] z-40">
|
|
<div class="flex items-center gap-4 flex-1">
|
|
<div class="relative w-full max-w-md">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
|
<input class="w-full bg-surface-container border-outline-variant focus:border-primary-container rounded-lg py-2 pl-10 text-body-sm text-on-surface" placeholder="Zoek in logs of bronnen..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<button class="relative text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
<span class="absolute -top-1 -right-1 w-2 h-2 bg-primary-container rounded-full"></span>
|
|
</button>
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">sensors</span>
|
|
</button>
|
|
<div class="w-px h-6 bg-outline-variant"></div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-label-mono text-label-mono text-secondary">SYSTEM LIVE</span>
|
|
<div class="w-2 h-2 bg-secondary rounded-full animate-pulse-cyan"></div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Canvas -->
|
|
<main class="ml-64 pt-24 px-gutter pb-stack-lg min-h-screen">
|
|
<!-- Dashboard Header -->
|
|
<div class="flex justify-between items-end mb-stack-lg">
|
|
<div>
|
|
<h2 class="font-headline-lg text-headline-lg text-primary mb-1">Automation Center</h2>
|
|
<p class="text-on-surface-variant font-body-sm">Real-time status van uw AI-gedreven job radar.</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="bg-surface-container-high border border-outline-variant px-4 py-2 rounded text-body-sm flex items-center gap-2 hover:bg-surface-bright transition-colors">
|
|
<span class="material-symbols-outlined text-sm">refresh</span> Logboek exporteren
|
|
</button>
|
|
<button class="bg-primary-container text-on-primary-container px-6 py-2 rounded font-medium text-body-sm flex items-center gap-2 signal-glow transition-transform active:scale-95">
|
|
<span class="material-symbols-outlined text-sm">play_arrow</span> Forceer Scan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Global Status Bar -->
|
|
<div class="mb-stack-lg bg-surface-container-low border border-outline-variant p-6 rounded-xl flex items-center justify-between">
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex flex-col">
|
|
<span class="font-label-mono text-label-mono text-on-surface-variant mb-1 uppercase opacity-60">Status</span>
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-3 h-3 bg-secondary rounded-full"></span>
|
|
<span class="font-headline-md text-headline-md text-secondary">Systeem operationeel</span>
|
|
</div>
|
|
</div>
|
|
<div class="h-10 w-px bg-outline-variant"></div>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-mono text-label-mono text-on-surface-variant mb-1 uppercase opacity-60">Uptime</span>
|
|
<span class="font-headline-md text-headline-md text-primary">99.98%</span>
|
|
</div>
|
|
<div class="h-10 w-px bg-outline-variant"></div>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-mono text-label-mono text-on-surface-variant mb-1 uppercase opacity-60">Latentie</span>
|
|
<span class="font-headline-md text-headline-md text-primary">124ms</span>
|
|
</div>
|
|
</div>
|
|
<div class="w-48 h-12">
|
|
<!-- Abstract signal visual -->
|
|
|
|
</div>
|
|
</div>
|
|
<!-- Visual Pipeline representation -->
|
|
<section class="mb-stack-lg">
|
|
<h3 class="font-label-mono text-label-mono text-on-surface-variant uppercase mb-4 tracking-widest flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-sm">route</span> Verwerkingspipeline
|
|
</h3>
|
|
<div class="grid grid-cols-8 gap-1 bg-surface-container-lowest p-2 border border-outline-variant rounded-xl overflow-hidden">
|
|
<!-- Step 1: Ontdekken -->
|
|
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-primary-container transition-all hover:bg-surface-bright">
|
|
<span class="material-symbols-outlined text-primary-container mb-2 block" style="font-variation-settings: 'FILL' 1;">explore</span>
|
|
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Ontdekken</span>
|
|
</div>
|
|
<!-- Step 2: Ophalen -->
|
|
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-primary-container transition-all hover:bg-surface-bright">
|
|
<span class="material-symbols-outlined text-primary-container mb-2 block" style="font-variation-settings: 'FILL' 1;">cloud_download</span>
|
|
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Ophalen</span>
|
|
</div>
|
|
<!-- Step 3: Extraheren -->
|
|
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-primary-container transition-all hover:bg-surface-bright">
|
|
<span class="material-symbols-outlined text-primary-container mb-2 block" style="font-variation-settings: 'FILL' 1;">data_exploration</span>
|
|
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Extraheren</span>
|
|
</div>
|
|
<!-- Step 4: Normaliseren -->
|
|
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-primary-container transition-all hover:bg-surface-bright">
|
|
<span class="material-symbols-outlined text-primary-container mb-2 block" style="font-variation-settings: 'FILL' 1;">schema</span>
|
|
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Normaliseren</span>
|
|
</div>
|
|
<!-- Step 5: Dedupliceren -->
|
|
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-primary-container transition-all hover:bg-surface-bright">
|
|
<span class="material-symbols-outlined text-primary-container mb-2 block" style="font-variation-settings: 'FILL' 1;">difference</span>
|
|
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Dedupliceren</span>
|
|
</div>
|
|
<!-- Step 6: Filteren -->
|
|
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-secondary transition-all hover:bg-surface-bright">
|
|
<span class="material-symbols-outlined text-secondary mb-2 block" style="font-variation-settings: 'FILL' 1;">filter_alt</span>
|
|
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Filteren</span>
|
|
</div>
|
|
<!-- Step 7: Analyseren -->
|
|
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-secondary transition-all hover:bg-surface-bright">
|
|
<span class="material-symbols-outlined text-secondary mb-2 block" style="font-variation-settings: 'FILL' 1;">psychology_alt</span>
|
|
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Analyseren</span>
|
|
</div>
|
|
<!-- Step 8: Rangschikken -->
|
|
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-primary transition-all hover:bg-surface-bright">
|
|
<span class="material-symbols-outlined text-primary mb-2 block" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Rangschikken</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Stats Bento Grid -->
|
|
<div class="grid grid-cols-4 gap-gutter mb-stack-lg">
|
|
<div class="bg-surface-container-low border border-outline-variant p-6 rounded-xl">
|
|
<span class="material-symbols-outlined text-primary opacity-50 mb-4">language</span>
|
|
<h4 class="font-headline-lg text-headline-lg">156</h4>
|
|
<p class="text-on-surface-variant font-body-sm">Bronnen gescand (24u)</p>
|
|
</div>
|
|
<div class="bg-surface-container-low border border-outline-variant p-6 rounded-xl">
|
|
<span class="material-symbols-outlined text-primary opacity-50 mb-4">search</span>
|
|
<h4 class="font-headline-lg text-headline-lg">412</h4>
|
|
<p class="text-on-surface-variant font-body-sm">Vacatures gevonden</p>
|
|
</div>
|
|
<div class="bg-surface-container-low border border-outline-variant p-6 rounded-xl">
|
|
<span class="material-symbols-outlined text-error opacity-50 mb-4">filter_list_off</span>
|
|
<h4 class="font-headline-lg text-headline-lg">389</h4>
|
|
<p class="text-on-surface-variant font-body-sm">Gefilterd (geen match)</p>
|
|
</div>
|
|
<div class="bg-surface-container-low border border-outline-variant p-6 rounded-xl relative overflow-hidden group">
|
|
<div class="absolute inset-0 bg-primary-container/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
|
<span class="material-symbols-outlined text-secondary mb-4">verified</span>
|
|
<h4 class="font-headline-lg text-headline-lg text-secondary">23</h4>
|
|
<p class="text-on-surface-variant font-body-sm">Ter review beschikbaar</p>
|
|
</div>
|
|
</div>
|
|
<!-- Main Content Area: Health & Logs -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-gutter">
|
|
<!-- Source Health Table -->
|
|
<div class="lg:col-span-2 bg-surface-container-lowest border border-outline-variant rounded-xl flex flex-col">
|
|
<div class="p-6 border-b border-outline-variant flex justify-between items-center">
|
|
<h3 class="font-headline-md text-headline-md">Bron Gezondheid</h3>
|
|
<div class="flex gap-2">
|
|
<span class="px-2 py-1 bg-secondary/10 text-secondary text-[10px] font-label-mono rounded">152 OK</span>
|
|
<span class="px-2 py-1 bg-error/10 text-error text-[10px] font-label-mono rounded">4 FAILED</span>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left font-body-sm">
|
|
<thead class="bg-surface-container text-on-surface-variant uppercase text-[11px] font-label-mono">
|
|
<tr>
|
|
<th class="px-6 py-3">Bron Naam</th>
|
|
<th class="px-6 py-3">Status</th>
|
|
<th class="px-6 py-3">Laatste Scan</th>
|
|
<th class="px-6 py-3 text-right">Succesrate</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-outline-variant/30">
|
|
<tr class="hover:bg-surface-container-high transition-colors">
|
|
<td class="px-6 py-4 flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant text-lg">link</span>
|
|
LinkedIn Alerts
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="flex items-center gap-2 text-secondary">
|
|
<span class="w-1.5 h-1.5 bg-secondary rounded-full"></span> Healthy
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-on-surface-variant font-label-mono">14:23:05</td>
|
|
<td class="px-6 py-4 text-right">99.2%</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-container-high transition-colors">
|
|
<td class="px-6 py-4 flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant text-lg">rss_feed</span>
|
|
VDAB RSS
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="flex items-center gap-2 text-secondary">
|
|
<span class="w-1.5 h-1.5 bg-secondary rounded-full"></span> Healthy
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-on-surface-variant font-label-mono">14:15:12</td>
|
|
<td class="px-6 py-4 text-right">100%</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-container-high transition-colors">
|
|
<td class="px-6 py-4 flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant text-lg">apartment</span>
|
|
Ziekenhuis Hasselt Carrière
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="flex items-center gap-2 text-error">
|
|
<span class="w-1.5 h-1.5 bg-error rounded-full"></span> Failed
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-on-surface-variant font-label-mono">13:58:44</td>
|
|
<td class="px-6 py-4 text-right text-error">0.0%</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-container-high transition-colors">
|
|
<td class="px-6 py-4 flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant text-lg">public</span>
|
|
Indeed Search API
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="flex items-center gap-2 text-secondary">
|
|
<span class="w-1.5 h-1.5 bg-secondary rounded-full"></span> Healthy
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-on-surface-variant font-label-mono">14:02:11</td>
|
|
<td class="px-6 py-4 text-right">98.5%</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-container-high transition-colors">
|
|
<td class="px-6 py-4 flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant text-lg">link</span>
|
|
Monsterboard Traineeships
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="flex items-center gap-2 text-secondary">
|
|
<span class="w-1.5 h-1.5 bg-secondary rounded-full"></span> Healthy
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-on-surface-variant font-label-mono">13:45:00</td>
|
|
<td class="px-6 py-4 text-right">100%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="p-4 border-t border-outline-variant text-center">
|
|
<button class="text-primary text-body-sm hover:underline">Alle 156 bronnen weergeven</button>
|
|
</div>
|
|
</div>
|
|
<!-- Technical Logs (Progressive Disclosure) -->
|
|
<div class="bg-surface-container-low border border-outline-variant rounded-xl flex flex-col h-full overflow-hidden">
|
|
<div class="p-6 border-b border-outline-variant bg-surface-container-lowest">
|
|
<h3 class="font-headline-md text-headline-md flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary-container">terminal</span> Technische Logs
|
|
</h3>
|
|
</div>
|
|
<div class="flex-1 p-4 font-label-mono text-[12px] space-y-4 overflow-y-auto max-h-[500px]">
|
|
<div class="log-entry border-l-2 border-secondary pl-3">
|
|
<p class="text-on-surface-variant">[14:30:12] <span class="text-secondary">INFO</span> Pipeline gestart voor 'LinkedIn'</p>
|
|
</div>
|
|
<div class="log-entry border-l-2 border-primary-container pl-3">
|
|
<p class="text-on-surface-variant">[14:30:15] <span class="text-primary-container">DATA</span> 12 nieuwe URL's ontdekt</p>
|
|
</div>
|
|
<div class="log-entry border-l-2 border-secondary pl-3">
|
|
<p class="text-on-surface-variant">[14:30:22] <span class="text-secondary">INFO</span> Extractie voltooid. 11/12 entiteiten herkend.</p>
|
|
</div>
|
|
<details class="group">
|
|
<summary class="cursor-pointer list-none flex items-center gap-2 py-2 text-primary hover:text-primary-container">
|
|
<span class="material-symbols-outlined text-sm group-open:rotate-180 transition-transform">expand_more</span>
|
|
Toon normalisatie details (3)
|
|
</summary>
|
|
<div class="mt-2 space-y-2 pl-4 text-[11px] opacity-70 border-l border-outline-variant">
|
|
<p>[14:30:23] Mapped 'Senior Dev' to internal ID: JOB_042</p>
|
|
<p>[14:30:24] Location 'Brussel' matched to GEOS_BE_BRU</p>
|
|
<p>[14:30:25] Salary extracted: 4500-5200 EUR</p>
|
|
</div>
|
|
</details>
|
|
<div class="log-entry border-l-2 border-error pl-3">
|
|
<p class="text-on-surface-variant">[14:28:01] <span class="text-error">ERROR</span> Verbinding verbroken: 'Hasselt API'</p>
|
|
<p class="text-[10px] text-error opacity-70">Reason: Timeout (5000ms)</p>
|
|
</div>
|
|
<div class="log-entry border-l-2 border-secondary pl-3">
|
|
<p class="text-on-surface-variant">[14:25:55] <span class="text-secondary">INFO</span> Deduplicatie voltooid. 4 dubbelingen verwijderd.</p>
|
|
</div>
|
|
<div class="log-entry border-l-2 border-primary pl-3">
|
|
<p class="text-on-surface-variant">[14:20:00] <span class="text-primary">SYSTEM</span> Dagelijkse backup succesvol afgerond.</p>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 bg-surface-container-lowest border-t border-outline-variant flex gap-2">
|
|
<button class="flex-1 py-1.5 bg-surface-container-high rounded text-[11px] font-label-mono hover:bg-surface-bright">CLEAR LOGS</button>
|
|
<button class="flex-1 py-1.5 bg-surface-container-high rounded text-[11px] font-label-mono hover:bg-surface-bright">DOWNLOAD .JSON</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Footer Meta-data -->
|
|
<footer class="ml-64 px-gutter py-stack-md flex justify-between items-center text-on-surface-variant font-label-mono text-[11px]">
|
|
<div class="flex gap-6">
|
|
<span>© 2024 VacatureRadar AI</span>
|
|
<a class="hover:text-primary" href="#">Service Status</a>
|
|
<a class="hover:text-primary" href="#">Privacy Policy</a>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-sm">memory</span> CPU: 12%
|
|
</span>
|
|
<span class="flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-sm">database</span> RAM: 4.2GB / 16GB
|
|
</span>
|
|
<span class="flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-sm">update</span> V2.4.0-stable
|
|
</span>
|
|
</div>
|
|
</footer>
|
|
<!-- Interactive Layer: Notification Toast (Optional script demonstration) -->
|
|
<script>
|
|
document.querySelector('button.bg-primary-container').addEventListener('click', () => {
|
|
const btn = document.querySelector('button.bg-primary-container');
|
|
const originalContent = btn.innerHTML;
|
|
btn.innerHTML = '<span class="material-symbols-outlined text-sm animate-spin">sync</span> Bezig met scannen...';
|
|
btn.disabled = true;
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<span class="material-symbols-outlined text-sm">check</span> Scan Voltooid';
|
|
btn.classList.replace('bg-primary-container', 'bg-secondary');
|
|
btn.classList.replace('text-on-primary-container', 'text-on-secondary');
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = originalContent;
|
|
btn.classList.replace('bg-secondary', 'bg-primary-container');
|
|
btn.classList.replace('text-on-secondary', 'text-on-primary-container');
|
|
btn.disabled = false;
|
|
}, 2000);
|
|
}, 1500);
|
|
});
|
|
</script>
|
|
</body></html> |