531 lines
29 KiB
HTML
531 lines
29 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 | Werkgevers Intelligence</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;800&family=JetBrains+Mono:wght@400;500&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"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:wght@100..900&family=JetBrains+Mono:wght@100..900&display=swap" rel="stylesheet"/>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.signal-glow {
|
|
box-shadow: 0 0 15px rgba(0, 245, 255, 0.1);
|
|
}
|
|
.glass-panel {
|
|
backdrop-filter: blur(12px);
|
|
background: rgba(23, 31, 51, 0.7);
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #0b1326;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #2d3449;
|
|
border-radius: 10px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #3a494a;
|
|
}
|
|
@keyframes pulse-cyan {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
.animate-pulse-cyan {
|
|
animation: pulse-cyan 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
</style>
|
|
<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"],
|
|
"body-md": ["Inter"],
|
|
"metadata-caps": ["JetBrains Mono"],
|
|
"label-mono": ["JetBrains Mono"],
|
|
"headline-md": ["Geist"],
|
|
"body-sm": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"headline-lg": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
|
"metadata-caps": ["12px", {"lineHeight": "1.0", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
|
"label-mono": ["13px", {"lineHeight": "1.0", "fontWeight": "400"}],
|
|
"headline-md": ["20px", {"lineHeight": "1.4", "fontWeight": "500"}],
|
|
"body-sm": ["14px", {"lineHeight": "1.5", "fontWeight": "400"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-surface text-on-surface font-body-md overflow-hidden">
|
|
<!-- Top Navigation Bar -->
|
|
<header class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-xl border-b border-outline-variant/30 shadow-sm">
|
|
<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-6">
|
|
<span class="font-headline-md text-headline-md font-bold tracking-tight text-primary">VacatureRadar</span>
|
|
<div class="hidden md:flex items-center bg-surface-container rounded-lg px-4 py-1.5 border border-outline-variant/20">
|
|
<span class="material-symbols-outlined text-on-surface-variant mr-2" style="font-size: 18px;">search</span>
|
|
<input class="bg-transparent border-none focus:ring-0 text-sm w-64 placeholder:text-on-surface-variant" placeholder="Zoek werkgevers..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="cursor-pointer active:scale-95 transition-transform p-2 rounded-full hover:bg-surface-container-highest/50">
|
|
<span class="material-symbols-outlined text-on-surface-variant">notifications</span>
|
|
</button>
|
|
<button class="cursor-pointer active:scale-95 transition-transform p-2 rounded-full hover:bg-surface-container-highest/50">
|
|
<span class="material-symbols-outlined text-on-surface-variant">account_circle</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="flex h-screen pt-[60px]">
|
|
<!-- Side Navigation Bar -->
|
|
<aside class="hidden md:flex flex-col h-full w-64 py-stack-lg gap-stack-md bg-surface-container border-r border-outline-variant/20 relative z-40">
|
|
<nav class="flex-1 px-3 space-y-1 overflow-y-auto">
|
|
<div class="px-3 mb-6">
|
|
<button class="w-full bg-primary-container text-on-primary-container py-3 px-4 rounded-xl font-medium flex items-center justify-center gap-2 active:scale-[0.98] transition-transform">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">add</span>
|
|
Nieuwe Zoekopdracht
|
|
</button>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
Overview
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
|
<span class="material-symbols-outlined">radar</span>
|
|
New matches
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
|
<span class="material-symbols-outlined">work</span>
|
|
All vacancies
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
|
<span class="material-symbols-outlined">bookmark</span>
|
|
Saved
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
|
<span class="material-symbols-outlined">assignment</span>
|
|
Applications
|
|
</a>
|
|
<!-- Active State for 'Employers' -->
|
|
<a class="flex items-center gap-3 px-4 py-2.5 text-primary bg-primary-container/10 border-r-2 border-primary-container transition-all rounded-r-none active:translate-x-1 font-label-mono text-label-mono" href="#">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">domain</span>
|
|
Employers
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
|
<span class="material-symbols-outlined">hub</span>
|
|
Sources
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
|
<span class="material-symbols-outlined">precision_manufacturing</span>
|
|
Automation
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
|
<span class="material-symbols-outlined">person_search</span>
|
|
Search profile
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
|
<span class="material-symbols-outlined">history</span>
|
|
Activity
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
Settings
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<div class="px-6 pt-4 border-t border-outline-variant/10">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-tr from-primary-container to-secondary overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="A professional studio portrait of a modern recruiter in a dark tech-oriented office environment. The lighting is moody with cyan rim lights, matching the corporate minimalist aesthetic of the tool. The style is clean, sharp, and corporate, emphasizing intelligence and trustworthiness." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCky4z2aP9d2avHJjSx6_QzO3aUqX2sOanRdD6Br83O9pTkTm-GjDZm4wnsD4Ci2IfRKNXePe2bzhGEkUYa62ggWibmu6zqpHgXdPNsfpB2epGbh0h36OfhBRuG3JB1JPuawzrVkU-II7ezUlyXmOkT6w3vD5ds3eyr5nzcDaNwlfJNLIqH3EP5PoZt3xOqkHxrIx_py5fvNOcKmJLAy8EK7rTeCzFZ9of0HP9ID14LcDb72WdcOx66R2JKfhtoYH-hC4eOzqkwUaMb"/>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-medium text-on-surface">Alex Radar</span>
|
|
<span class="text-[10px] text-on-surface-variant font-label-mono">PRO ACCOUNT</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 relative overflow-y-auto bg-surface p-gutter">
|
|
<div class="max-w-6xl mx-auto space-y-stack-lg">
|
|
<!-- Header & Stats -->
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
|
<div>
|
|
<span class="font-metadata-caps text-metadata-caps text-on-surface-variant mb-2 block tracking-widest uppercase">Intelligent Tracking</span>
|
|
<h1 class="font-headline-lg text-headline-lg text-primary tracking-tight">Werkgevers Radar</h1>
|
|
</div>
|
|
<div class="flex gap-stack-md">
|
|
<div class="px-4 py-2 bg-surface-container rounded-lg border border-outline-variant/30">
|
|
<span class="text-[10px] block text-on-surface-variant font-label-mono">Gemonitord</span>
|
|
<span class="text-xl font-bold font-headline-md">142</span>
|
|
</div>
|
|
<div class="px-4 py-2 bg-surface-container rounded-lg border border-outline-variant/30">
|
|
<span class="text-[10px] block text-on-surface-variant font-label-mono">Actieve Vacatures</span>
|
|
<span class="text-xl font-bold font-headline-md text-secondary">318</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bento Grid Section: Top Insights -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-stack-md">
|
|
<div class="md:col-span-2 p-6 bg-surface-container border border-outline-variant/30 rounded-xl relative overflow-hidden group">
|
|
<div class="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
|
|
<span class="material-symbols-outlined text-[120px]">radar</span>
|
|
</div>
|
|
<h3 class="font-headline-md text-headline-md mb-4 text-primary">Systeem Status</h3>
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex items-center gap-2 bg-secondary/10 px-3 py-1.5 rounded-full">
|
|
<div class="w-2 h-2 rounded-full bg-secondary animate-pulse-cyan"></div>
|
|
<span class="text-secondary text-sm font-medium">Scanning 142 bronnen</span>
|
|
</div>
|
|
<span class="text-on-surface-variant text-sm">Laatste update: 4 minuten geleden</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="p-4 bg-surface-container-low border border-outline-variant/10 rounded-lg">
|
|
<p class="text-on-surface-variant text-xs font-label-mono mb-1">STRONGEST MATCH TREND</p>
|
|
<p class="text-lg font-bold text-primary">ASML Eindhoven</p>
|
|
<p class="text-[11px] text-on-surface-variant">8 nieuwe matches gevonden vandaag</p>
|
|
</div>
|
|
<div class="p-4 bg-surface-container-low border border-outline-variant/10 rounded-lg">
|
|
<p class="text-on-surface-variant text-xs font-label-mono mb-1">BRON GEZONDHEID</p>
|
|
<p class="text-lg font-bold text-secondary">98.4% Optimal</p>
|
|
<p class="text-[11px] text-on-surface-variant">Geen kritieke foutmeldingen</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 bg-surface-container border border-primary-container/30 rounded-xl signal-glow flex flex-col justify-between">
|
|
<div>
|
|
<h3 class="font-headline-md text-headline-md mb-1 text-primary">Radar Intelligence</h3>
|
|
<p class="text-sm text-on-surface-variant">AI Analyse van wervingsgedrag</p>
|
|
</div>
|
|
<div class="space-y-3 mt-4">
|
|
<div class="flex justify-between items-center text-sm">
|
|
<span class="text-on-surface-variant">Directe kanalen</span>
|
|
<span class="font-label-mono text-secondary">82%</span>
|
|
</div>
|
|
<div class="w-full bg-surface-container-highest h-1 rounded-full overflow-hidden">
|
|
<div class="bg-secondary h-full w-[82%]"></div>
|
|
</div>
|
|
<div class="flex justify-between items-center text-sm">
|
|
<span class="text-on-surface-variant">Recruitment bureaus</span>
|
|
<span class="font-label-mono text-primary-container">18%</span>
|
|
</div>
|
|
<div class="w-full bg-surface-container-highest h-1 rounded-full overflow-hidden">
|
|
<div class="bg-primary-container h-full w-[18%]"></div>
|
|
</div>
|
|
</div>
|
|
<button class="mt-6 text-primary-container text-sm font-medium flex items-center gap-1 hover:underline">
|
|
Bekijk trendrapportages
|
|
<span class="material-symbols-outlined text-sm">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Employers Table -->
|
|
<div class="bg-surface-container-low border border-outline-variant/20 rounded-xl overflow-hidden">
|
|
<div class="p-4 border-b border-outline-variant/10 flex justify-between items-center">
|
|
<h2 class="font-headline-md text-primary">Gevolgde Werkgevers</h2>
|
|
<div class="flex gap-2">
|
|
<button class="p-2 hover:bg-surface-container-highest rounded-lg transition-colors">
|
|
<span class="material-symbols-outlined text-on-surface-variant">filter_list</span>
|
|
</button>
|
|
<button class="p-2 hover:bg-surface-container-highest rounded-lg transition-colors">
|
|
<span class="material-symbols-outlined text-on-surface-variant">sort</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="border-b border-outline-variant/10 bg-surface-container-lowest/50">
|
|
<th class="p-4 font-label-mono text-[11px] text-on-surface-variant uppercase tracking-wider">Werkgever</th>
|
|
<th class="p-4 font-label-mono text-[11px] text-on-surface-variant uppercase tracking-wider">Type</th>
|
|
<th class="p-4 font-label-mono text-[11px] text-on-surface-variant uppercase tracking-wider">Locatie</th>
|
|
<th class="p-4 font-label-mono text-[11px] text-on-surface-variant uppercase tracking-wider">Vacatures</th>
|
|
<th class="p-4 font-label-mono text-[11px] text-on-surface-variant uppercase tracking-wider">Check</th>
|
|
<th class="p-4 font-label-mono text-[11px] text-on-surface-variant uppercase tracking-wider">Gezondheid</th>
|
|
<th class="p-4 font-label-mono text-[11px] text-on-surface-variant uppercase tracking-wider">Status</th>
|
|
<th class="p-4"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-outline-variant/10">
|
|
<!-- Row 1: ASML -->
|
|
<tr class="hover:bg-surface-container-highest/30 transition-colors cursor-pointer group" onclick="toggleDrawer('ASML')">
|
|
<td class="p-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-white flex items-center justify-center p-1">
|
|
<img class="w-full h-full object-contain" data-alt="A minimalist tech company logo for ASML, featuring geometric lines in blue and white. High contrast, professional corporate branding style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCSxhmVexEg6i44EP4zrCuKIX_NyaSorLw2EGD5cngr8hSPRJtH6ZyZ_LFW82HFD8EnCmGhkducVpspLA0fqL6fAU3eqEy_CiHn_WrqHmn8UEpzYZza-Om0D2s7mw6iJSjjoouMT9kDUsb4no7okQwOI0mrhZ1Oi2Bu9DuN_MT3P12g7QuzoADpD2AVlSwf6RKd-2-TrzodEZ_Aa8zPyY3ULMQbJH2zc9gI7DE6TIKHH1b1RZIXY18Xw9YH3_Gv3HKSFTqnCj9Eo8zV"/>
|
|
</div>
|
|
<span class="font-medium text-primary">ASML</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4"><span class="px-2 py-0.5 rounded border border-outline-variant/30 text-[10px] font-label-mono text-on-surface-variant">DIRECT</span></td>
|
|
<td class="p-4 text-sm text-on-surface-variant">Veldhoven, NL</td>
|
|
<td class="p-4">
|
|
<span class="text-sm font-bold text-secondary">42</span>
|
|
<span class="text-[10px] text-on-secondary-fixed/50 ml-1">+3</span>
|
|
</td>
|
|
<td class="p-4 text-[11px] font-label-mono text-on-surface-variant">4m geleden</td>
|
|
<td class="p-4">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span>
|
|
<span class="text-[11px] text-secondary font-medium">HEALTHY</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4">
|
|
<span class="text-[10px] bg-primary-container/20 text-primary-container px-2 py-1 rounded border border-primary-container/30">PRIORITY</span>
|
|
</td>
|
|
<td class="p-4 text-right">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">insights</span>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2: Zorgregio Hasselt -->
|
|
<tr class="hover:bg-surface-container-highest/30 transition-colors cursor-pointer group" onclick="toggleDrawer('Zorgregio Hasselt')">
|
|
<td class="p-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-surface-container-high flex items-center justify-center text-primary-container border border-outline-variant/30">
|
|
<span class="material-symbols-outlined" style="font-size: 18px;">medical_services</span>
|
|
</div>
|
|
<span class="font-medium text-primary">Zorgregio Hasselt</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4"><span class="px-2 py-0.5 rounded border border-outline-variant/30 text-[10px] font-label-mono text-on-surface-variant">OVERHEID</span></td>
|
|
<td class="p-4 text-sm text-on-surface-variant">Hasselt, BE</td>
|
|
<td class="p-4"><span class="text-sm font-bold text-on-surface">12</span></td>
|
|
<td class="p-4 text-[11px] font-label-mono text-on-surface-variant">1u geleden</td>
|
|
<td class="p-4">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span>
|
|
<span class="text-[11px] text-secondary font-medium">HEALTHY</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4">
|
|
<span class="text-[10px] bg-surface-container-highest text-on-surface-variant px-2 py-1 rounded">STANDARD</span>
|
|
</td>
|
|
<td class="p-4 text-right">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">insights</span>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 3: Gemeente Genk -->
|
|
<tr class="hover:bg-surface-container-highest/30 transition-colors cursor-pointer group" onclick="toggleDrawer('Gemeente Genk')">
|
|
<td class="p-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-surface-container-high flex items-center justify-center text-primary-container border border-outline-variant/30">
|
|
<span class="material-symbols-outlined" style="font-size: 18px;">account_balance</span>
|
|
</div>
|
|
<span class="font-medium text-primary">Gemeente Genk</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4"><span class="px-2 py-0.5 rounded border border-outline-variant/30 text-[10px] font-label-mono text-on-surface-variant">DIRECT</span></td>
|
|
<td class="p-4 text-sm text-on-surface-variant">Genk, BE</td>
|
|
<td class="p-4"><span class="text-sm font-bold text-on-surface">5</span></td>
|
|
<td class="p-4 text-[11px] font-label-mono text-on-surface-variant">3u geleden</td>
|
|
<td class="p-4">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-error"></span>
|
|
<span class="text-[11px] text-error font-medium">FAILED</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4">
|
|
<span class="text-[10px] bg-surface-container-highest text-on-surface-variant px-2 py-1 rounded">IGNORED</span>
|
|
</td>
|
|
<td class="p-4 text-right">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">insights</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<!-- Employer Intelligence Drawer -->
|
|
<div class="fixed top-0 right-0 h-full w-full md:w-[480px] glass-panel border-l border-outline-variant/40 transform translate-x-full transition-transform duration-300 z-[60] shadow-2xl" id="intelligence-drawer">
|
|
<div class="flex flex-col h-full">
|
|
<div class="p-6 border-b border-outline-variant/20 flex items-center justify-between">
|
|
<div>
|
|
<span class="text-[10px] font-label-mono text-secondary mb-1 block">INTEL REPORT #8421</span>
|
|
<h2 class="font-headline-lg text-headline-lg text-primary" id="drawer-title">ASML Intelligence</h2>
|
|
</div>
|
|
<button class="p-2 hover:bg-surface-container-highest rounded-full transition-colors" onclick="toggleDrawer()">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto p-6 space-y-stack-lg">
|
|
<!-- Visual Data Section -->
|
|
<div class="space-y-4">
|
|
<h3 class="font-label-mono text-xs text-on-surface-variant uppercase tracking-widest">Match Patroon Historie</h3>
|
|
<div class="h-40 w-full bg-surface-container-lowest rounded-lg border border-outline-variant/10 p-4 relative overflow-hidden">
|
|
<!-- Abstract "Graph" Visualization -->
|
|
<div class="absolute bottom-4 left-4 right-4 flex items-end gap-1 h-24">
|
|
<div class="bg-primary-container/20 w-full h-[40%] rounded-t-sm border-t border-primary-container"></div>
|
|
<div class="bg-primary-container/20 w-full h-[60%] rounded-t-sm border-t border-primary-container"></div>
|
|
<div class="bg-primary-container/40 w-full h-[55%] rounded-t-sm border-t border-primary-container"></div>
|
|
<div class="bg-primary-container/20 w-full h-[85%] rounded-t-sm border-t border-primary-container animate-pulse-cyan"></div>
|
|
<div class="bg-primary-container/20 w-full h-[30%] rounded-t-sm border-t border-primary-container"></div>
|
|
<div class="bg-primary-container/50 w-full h-[70%] rounded-t-sm border-t border-primary-container shadow-[0_0_10px_rgba(0,245,255,0.3)]"></div>
|
|
<div class="bg-primary-container/20 w-full h-[45%] rounded-t-sm border-t border-primary-container"></div>
|
|
</div>
|
|
<div class="flex justify-between text-[10px] text-on-surface-variant font-label-mono mt-2 absolute bottom-0 left-4 right-4 h-4">
|
|
<span>MAA</span><span>DIN</span><span>WOE</span><span>DON</span><span>VRI</span><span>ZAT</span><span>ZON</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Stats Grid -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="p-4 bg-surface-container-high rounded-lg">
|
|
<span class="text-[10px] text-on-surface-variant font-label-mono">Gem. Match Score</span>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-2xl font-bold text-secondary">88%</span>
|
|
<span class="text-[10px] bg-secondary/10 text-secondary px-1.5 rounded">HIGH</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 bg-surface-container-high rounded-lg">
|
|
<span class="text-[10px] text-on-surface-variant font-label-mono">Wervings-snelheid</span>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-2xl font-bold text-primary-container">14d</span>
|
|
<span class="text-[10px] bg-primary-container/10 text-primary-container px-1.5 rounded">FAST</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Recent Vacancies -->
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center">
|
|
<h3 class="font-label-mono text-xs text-on-surface-variant uppercase tracking-widest">Historische Vacatures</h3>
|
|
<span class="text-[10px] text-primary-container font-medium cursor-pointer hover:underline">Toon alles</span>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="p-3 bg-surface-container rounded-lg border border-outline-variant/10 hover:border-primary-container/30 transition-all cursor-pointer">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<span class="text-sm font-medium text-primary">Senior Data Systems Engineer</span>
|
|
<span class="font-label-mono text-[11px] text-secondary">94% MATCH</span>
|
|
</div>
|
|
<div class="flex justify-between text-[10px] text-on-surface-variant">
|
|
<span>Gepost: 2 dagen geleden</span>
|
|
<span class="flex items-center gap-1"><span class="w-1.5 h-1.5 bg-secondary rounded-full"></span> Actief</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-3 bg-surface-container rounded-lg border border-outline-variant/10 hover:border-primary-container/30 transition-all cursor-pointer opacity-70">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<span class="text-sm font-medium text-primary">Technical Project Manager</span>
|
|
<span class="font-label-mono text-[11px] text-on-surface-variant">62% MATCH</span>
|
|
</div>
|
|
<div class="flex justify-between text-[10px] text-on-surface-variant">
|
|
<span>Gepost: 12 dagen geleden</span>
|
|
<span class="flex items-center gap-1">Ingevuld</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Action Button -->
|
|
<div class="pt-4">
|
|
<button class="w-full bg-surface-bright hover:bg-surface-container-highest border border-outline-variant/30 text-on-surface py-3 rounded-xl font-medium transition-all active:scale-[0.98]">
|
|
Contactpersoon Finder (AI)
|
|
</button>
|
|
<p class="text-[11px] text-center text-on-surface-variant mt-3 italic">"ASML zoekt vaak op maandagochtend rond 09:00 naar nieuwe talenten."</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Script for interactions -->
|
|
<script>
|
|
function toggleDrawer(title) {
|
|
const drawer = document.getElementById('intelligence-drawer');
|
|
const drawerTitle = document.getElementById('drawer-title');
|
|
|
|
if (title) {
|
|
drawerTitle.innerText = title + ' Intelligence';
|
|
drawer.classList.remove('translate-x-full');
|
|
} else {
|
|
drawer.classList.add('translate-x-full');
|
|
}
|
|
}
|
|
|
|
// Navigation state handling (visual only)
|
|
const navLinks = document.querySelectorAll('aside nav a');
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
navLinks.forEach(l => {
|
|
l.classList.remove('text-primary', 'bg-primary-container/10', 'border-r-2', 'border-primary-container');
|
|
l.classList.add('text-on-surface-variant');
|
|
});
|
|
link.classList.add('text-primary', 'bg-primary-container/10', 'border-r-2', 'border-primary-container');
|
|
link.classList.remove('text-on-surface-variant');
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |