571 lines
31 KiB
HTML
571 lines
31 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 | Career Intelligence Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:wght@100..900&family=JetBrains+Mono:wght@100..800&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"/>
|
|
<style>
|
|
:root {
|
|
--signal-glow: 0 0 15px rgba(0, 245, 255, 0.15);
|
|
}
|
|
body {
|
|
background-color: #0b1326;
|
|
color: #dae2fd;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.signal-border {
|
|
border: 1px solid #334155;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.signal-border:hover {
|
|
border-color: #00dce5;
|
|
box-shadow: var(--signal-glow);
|
|
}
|
|
.match-glow {
|
|
border-color: #00dce5;
|
|
box-shadow: var(--signal-glow);
|
|
background: linear-gradient(145deg, rgba(0, 220, 229, 0.05) 0%, rgba(11, 19, 38, 0) 100%);
|
|
}
|
|
.radar-pulse {
|
|
position: relative;
|
|
}
|
|
.radar-pulse::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #00dce5;
|
|
border-radius: 50%;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0% { transform: translateY(-50%) scale(1); opacity: 1; }
|
|
100% { transform: translateY(-50%) scale(3); opacity: 0; }
|
|
}
|
|
.glass-panel {
|
|
backdrop-filter: blur(12px);
|
|
background: rgba(19, 27, 46, 0.8);
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: #060e20;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: #2d3449;
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
<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>
|
|
</head>
|
|
<body class="font-body-md text-body-md selection:bg-primary-container selection:text-on-primary-container overflow-hidden">
|
|
<!-- Desktop Sidebar Navigation -->
|
|
<aside class="h-screen w-64 fixed left-0 top-0 border-r border-outline-variant bg-surface-container-lowest flex flex-col py-stack-md z-50">
|
|
<div class="px-6 mb-8">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-primary-container rounded flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-on-primary-container" style="font-variation-settings: 'FILL' 1;">radar</span>
|
|
</div>
|
|
<div>
|
|
<h1 class="font-headline-md text-headline-md font-semibold text-primary">VacatureRadar</h1>
|
|
<p class="font-label-mono text-[10px] tracking-widest text-on-surface-variant uppercase">Career Intelligence</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 px-4 space-y-1 custom-scrollbar overflow-y-auto">
|
|
<!-- Active Tab: Dashboard -->
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-primary font-bold border-r-2 border-primary bg-surface-container-high transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
|
<span class="font-label-mono text-label-mono">Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant opacity-70 hover:bg-surface-container-high hover:opacity-100 transition-colors" href="#">
|
|
<span class="material-symbols-outlined" data-icon="radar">radar</span>
|
|
<span class="font-label-mono text-label-mono">Nieuwe matches</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant opacity-70 hover:bg-surface-container-high hover:opacity-100 transition-colors" href="#">
|
|
<span class="material-symbols-outlined" data-icon="view_list">view_list</span>
|
|
<span class="font-label-mono text-label-mono">Alle vacatures</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant opacity-70 hover:bg-surface-container-high hover:opacity-100 transition-colors" href="#">
|
|
<span class="material-symbols-outlined" data-icon="bookmark">bookmark</span>
|
|
<span class="font-label-mono text-label-mono">Opgeslagen</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant opacity-70 hover:bg-surface-container-high hover:opacity-100 transition-colors" href="#">
|
|
<span class="material-symbols-outlined" data-icon="send">send</span>
|
|
<span class="font-label-mono text-label-mono">Sollicitaties</span>
|
|
</a>
|
|
<div class="pt-6 pb-2 px-4">
|
|
<p class="font-label-mono text-[10px] uppercase text-outline">Beheer</p>
|
|
</div>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant opacity-70 hover:bg-surface-container-high hover:opacity-100 transition-colors" href="#">
|
|
<span class="material-symbols-outlined" data-icon="business">business</span>
|
|
<span class="font-label-mono text-label-mono">Werkgevers</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant opacity-70 hover:bg-surface-container-high hover:opacity-100 transition-colors" href="#">
|
|
<span class="material-symbols-outlined" data-icon="robot_2">robot_2</span>
|
|
<span class="font-label-mono text-label-mono">Automatisering</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant opacity-70 hover:bg-surface-container-high hover:opacity-100 transition-colors" href="#">
|
|
<span class="material-symbols-outlined" data-icon="psychology">psychology</span>
|
|
<span class="font-label-mono text-label-mono">Zoekprofiel</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant opacity-70 hover:bg-surface-container-high hover:opacity-100 transition-colors" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span class="font-label-mono text-label-mono">Instellingen</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto px-4 py-4 border-t border-outline-variant">
|
|
<div class="flex items-center gap-3 p-2 rounded-lg bg-surface-container">
|
|
<div class="w-10 h-10 rounded-full overflow-hidden bg-surface-container-highest">
|
|
<img class="w-full h-full object-cover" data-alt="Close up portrait of a professional male in his 30s with short hair, wearing a clean dark navy sweater, set against a blurred high-tech office background with subtle blue lights. The lighting is crisp and modern, matching a career intelligence dashboard aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDi-n7T3zCH7pws03VaokAcojKtHkPrWsk3MxC_hm9lGLhHrp-SsugKN5u9MKJin0mlj0AzbyIiCz7vZ62hk7YZKm5tDSQ3HrzNjT6uQKBPytAvlPMEduxDYqbLREppGZjagJBiEJN2wwmIXZMjBixpUcxHrrIFj0IKdC43U85iljieJn9LVZdI5dMQ1JWo4ATofgIHiDUMcBckIYv9UHGVYYKgowSDnS-_NFYOBEoGhMQ2ffsfzO1f3PpDUmFUfJxOZ9yQB-wwwE2t"/>
|
|
</div>
|
|
<div class="overflow-hidden">
|
|
<p class="font-body-sm text-on-surface font-semibold truncate">Jens van den Berg</p>
|
|
<p class="font-label-mono text-[10px] text-on-surface-variant truncate">Premium Account</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="ml-64 min-h-screen flex flex-col bg-surface overflow-y-auto custom-scrollbar">
|
|
<!-- Top Navigation Bar -->
|
|
<header class="h-16 px-gutter flex justify-between items-center bg-surface/80 backdrop-blur-xl sticky top-0 z-40 border-b border-outline-variant">
|
|
<div class="flex items-center gap-4 flex-1">
|
|
<div class="relative w-96 group">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-sm">search</span>
|
|
<input class="w-full bg-surface-container-low border border-outline-variant rounded-lg py-2 pl-10 pr-4 text-sm focus:ring-1 focus:ring-primary-container focus:border-primary-container outline-none transition-all" placeholder="Zoek door vacatures..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-high text-on-surface-variant transition-colors relative">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
<span class="absolute top-2 right-2 w-2 h-2 bg-secondary rounded-full border-2 border-surface"></span>
|
|
</button>
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-high text-on-surface-variant transition-colors">
|
|
<span class="material-symbols-outlined">sensors</span>
|
|
</button>
|
|
<button class="px-4 py-2 bg-primary-container text-on-primary-container font-semibold rounded-lg flex items-center gap-2 text-sm hover:opacity-90 active:scale-95 transition-all">
|
|
<span class="material-symbols-outlined text-sm">add</span>
|
|
Nieuwe Zoekopdracht
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<!-- Dashboard Content -->
|
|
<section class="p-8 max-w-container-max mx-auto w-full space-y-stack-lg">
|
|
<!-- Welcome Header -->
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
|
<div class="space-y-1">
|
|
<h2 class="font-headline-lg text-headline-lg text-on-surface">Goedemorgen Jens.</h2>
|
|
<p class="text-on-surface-variant text-lg">Er zijn <span class="text-primary-container font-bold">3 nieuwe vacatures</span> die je aandacht verdienen.</p>
|
|
</div>
|
|
<div class="flex items-center gap-3 bg-surface-container-low border border-outline-variant px-4 py-2 rounded-full">
|
|
<div class="w-2 h-2 bg-secondary rounded-full animate-pulse"></div>
|
|
<p class="font-label-mono text-xs text-on-surface-variant">Systeem actief • Laatste scan 14 min geleden • Volgende om 06:00</p>
|
|
</div>
|
|
</div>
|
|
<!-- Stats Grid -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-gutter">
|
|
<div class="bg-surface-container-low border border-outline-variant p-6 rounded-xl hover:border-primary/30 transition-all group">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="p-2 bg-surface-container-highest rounded-lg text-primary-container">
|
|
<span class="material-symbols-outlined">language</span>
|
|
</div>
|
|
<span class="font-label-mono text-[10px] text-secondary">+2 nieuwe</span>
|
|
</div>
|
|
<p class="text-4xl font-headline-lg text-on-surface">42</p>
|
|
<p class="font-label-mono text-xs text-on-surface-variant uppercase mt-1">Bronnen gecontroleerd</p>
|
|
</div>
|
|
<div class="bg-surface-container-low border border-outline-variant p-6 rounded-xl hover:border-primary/30 transition-all">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="p-2 bg-surface-container-highest rounded-lg text-secondary">
|
|
<span class="material-symbols-outlined">fact_check</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-4xl font-headline-lg text-on-surface">18</p>
|
|
<p class="font-label-mono text-xs text-on-surface-variant uppercase mt-1">Vacatures beoordeeld</p>
|
|
</div>
|
|
<div class="bg-surface-container-low border border-primary-container/20 p-6 rounded-xl match-glow">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="p-2 bg-primary-container/10 rounded-lg text-primary-container">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">stars</span>
|
|
</div>
|
|
<span class="px-2 py-0.5 bg-primary-container text-on-primary-container rounded text-[10px] font-bold uppercase">Hot</span>
|
|
</div>
|
|
<p class="text-4xl font-headline-lg text-on-surface">3</p>
|
|
<p class="font-label-mono text-xs text-on-surface-variant uppercase mt-1">Sterke matches</p>
|
|
</div>
|
|
<div class="bg-surface-container-low border border-outline-variant p-6 rounded-xl hover:border-primary/30 transition-all">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="p-2 bg-surface-container-highest rounded-lg text-tertiary-fixed-dim">
|
|
<span class="material-symbols-outlined">mail</span>
|
|
</div>
|
|
<span class="w-2 h-2 bg-error rounded-full"></span>
|
|
</div>
|
|
<p class="text-4xl font-headline-lg text-on-surface">1</p>
|
|
<p class="font-label-mono text-xs text-on-surface-variant uppercase mt-1">Sollicitatie opvolging</p>
|
|
</div>
|
|
</div>
|
|
<!-- Dashboard Layout: Main & Side -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter items-start">
|
|
<!-- Left: Best New Matches -->
|
|
<div class="lg:col-span-8 space-y-6">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="font-headline-md text-headline-md text-on-surface flex items-center gap-3">
|
|
Beste nieuwe matches
|
|
<span class="px-3 py-1 bg-surface-container-highest border border-outline-variant rounded-full text-xs text-on-surface-variant font-normal">Radar Feed</span>
|
|
</h3>
|
|
<a class="text-primary-container text-sm font-semibold hover:underline" href="#">Bekijk alles</a>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<!-- Card 1: Strong Match -->
|
|
<div class="match-glow border p-6 rounded-xl relative group overflow-hidden">
|
|
<div class="flex flex-col md:flex-row gap-6">
|
|
<div class="w-16 h-16 bg-white rounded-xl flex items-center justify-center p-2 flex-shrink-0">
|
|
<img class="w-full h-full object-contain" data-alt="A minimalist logo for a healthcare organization featuring a stylized blue cross and a green leaf, set on a clean white background. Modern, corporate, and professional style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD6-45UtftVP2CrtODH_z_iABa_rEC-mAHEkWSY_bs8--2q2M6MbL0S8mLK43SBeitgLHEp5VZFeQJbmji3s3gpvlUlOjG4ofUB2YGlgCYboiQfuV8eHpgvNVy_g67_cVvNacrLD0RuSKMQPfsYhcUXBM5wU1HIPJpiOrvFs7kfIHLqamQMx7u3raTFxSEN4pZws_Erxxa_dyfX7clnCZtQtiO4PSBpnbJdQHErtYHDGCMCtg8Gw3Tyv3sSwvEf2PuWfkVFS0AEt933"/>
|
|
</div>
|
|
<div class="flex-1 space-y-2">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<h4 class="text-xl font-headline-md text-on-surface">IT Field Engineer</h4>
|
|
<span class="font-label-mono text-[10px] px-2 py-1 bg-primary-container text-on-primary-container rounded">94% STERKE MATCH</span>
|
|
</div>
|
|
<p class="text-on-surface-variant">ZorgGroep Nederland • Utrecht (Hybrid)</p>
|
|
<p class="text-sm text-on-surface/80 line-clamp-2">Als Field Engineer ben je verantwoordelijk voor de continuïteit van onze zorgsystemen op locatie. Je werkt nauw samen met het centrale IT-team om innovatieve zorgoplossingen te implementeren.</p>
|
|
<div class="flex gap-2 pt-2">
|
|
<span class="px-2 py-1 bg-surface-container-highest border border-outline-variant text-[11px] text-on-surface-variant rounded">Fulltime</span>
|
|
<span class="px-2 py-1 bg-surface-container-highest border border-outline-variant text-[11px] text-on-surface-variant rounded">€3.500 - €4.800</span>
|
|
<span class="px-2 py-1 bg-surface-container-highest border border-outline-variant text-[11px] text-on-surface-variant rounded">Zorg & Welzijn</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row md:flex-col gap-2 justify-end">
|
|
<button class="p-2 border border-outline-variant rounded-lg hover:border-primary-container transition-all">
|
|
<span class="material-symbols-outlined text-on-surface-variant">bookmark</span>
|
|
</button>
|
|
<button class="px-4 py-2 bg-primary-container text-on-primary-container font-bold rounded-lg text-sm hover:brightness-110">
|
|
Bekijk
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2 -->
|
|
<div class="bg-surface-container-low signal-border p-6 rounded-xl relative group">
|
|
<div class="flex flex-col md:flex-row gap-6">
|
|
<div class="w-16 h-16 bg-white rounded-xl flex items-center justify-center p-2 flex-shrink-0">
|
|
<img class="w-full h-full object-contain" data-alt="A clean, minimalist crest logo for a Dutch governmental agency, featuring the Dutch Lion in subtle silver and navy blue. Vector style, official and trustworthy appearance." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBEoTh0szLej55avd_mEl7CuvHjoUSAtbLx5iaE0iozhHWMYHM7p5SVxB4zJB6Olbrgl-GZVp0TufI-pMRxEC5Y8n6SKxBTtDBTU2kGP9UhKReBGSOJYOqWhcqua1fSOLm-9I5nht-TcT237_ZIsQWoVJGY-y7WAW4xN3w3f7LKaQnkLmdzKr2KygBAmxHxD7NLvL1AXbdGEbKhh8M-X5K0056xL1TUhGi4-lW3KqnbqYMGtIOM4UcWYUD_Fs8BUtdQf2ztOWQe571X"/>
|
|
</div>
|
|
<div class="flex-1 space-y-2">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<h4 class="text-xl font-headline-md text-on-surface">System Administrator (Public Sector)</h4>
|
|
<span class="font-label-mono text-[10px] px-2 py-1 bg-surface-variant text-on-surface-variant rounded">82% MATCH</span>
|
|
</div>
|
|
<p class="text-on-surface-variant">Gemeente Amsterdam • Amsterdam</p>
|
|
<p class="text-sm text-on-surface/80 line-clamp-2">Beheer complexe serveromgevingen en draag bij aan de digitale transformatie van onze publieke diensten. Ervaring met Azure en on-premise infra vereist.</p>
|
|
<div class="flex gap-2 pt-2">
|
|
<span class="px-2 py-1 bg-surface-container-highest border border-outline-variant text-[11px] text-on-surface-variant rounded">32-36 uur</span>
|
|
<span class="px-2 py-1 bg-surface-container-highest border border-outline-variant text-[11px] text-on-surface-variant rounded">Overheid</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row md:flex-col gap-2 justify-end">
|
|
<button class="p-2 border border-outline-variant rounded-lg hover:border-primary-container transition-all">
|
|
<span class="material-symbols-outlined text-on-surface-variant">bookmark</span>
|
|
</button>
|
|
<button class="px-4 py-2 bg-primary text-on-primary font-bold rounded-lg text-sm hover:bg-primary-container transition-colors">
|
|
Bekijk
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 3 -->
|
|
<div class="bg-surface-container-low signal-border p-6 rounded-xl relative group">
|
|
<div class="flex flex-col md:flex-row gap-6">
|
|
<div class="w-16 h-16 bg-white rounded-xl flex items-center justify-center p-2 flex-shrink-0">
|
|
<img class="w-full h-full object-contain" data-alt="A bold, high-tech company logo featuring geometric shapes in shades of charcoal and neon blue, representing a data-driven enterprise. Modern tech startup aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCx8yb5gizHrw5uWbGqp6vFGPgaXp6wxmsE1S7T73NqnuE5y0NWsYHUosm3ybLKkZxO9kHdyKScWbZT-mqf9SdUhXkLpaQQjFyIBMwa2_shByb2w1YKiLjbx9zxKWeIEeXuXkQkJprLP_0J-xEpO_VAeTXuGCSGwN5wcY1aeQJGuiNd9Oox1IfUxt7ZqUl-zjDYbjv5VzVHvDLkoXwQzkENfQ_tQnPxwIUPxp6KIOH3-mpUVCBlCycZ7Zy9w94ssSoC74SlOK0GPXNM"/>
|
|
</div>
|
|
<div class="flex-1 space-y-2">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<h4 class="text-xl font-headline-md text-on-surface">Network Specialist</h4>
|
|
<span class="font-label-mono text-[10px] px-2 py-1 bg-surface-variant text-on-surface-variant rounded">79% MATCH</span>
|
|
</div>
|
|
<p class="text-on-surface-variant">DataDynamics • Rotterdam (Remote option)</p>
|
|
<p class="text-sm text-on-surface/80 line-clamp-2">Versterk ons netwerkteam en werk aan grootschalige SD-WAN projecten voor internationale klanten. Focus op security en performance optimalisatie.</p>
|
|
<div class="flex gap-2 pt-2">
|
|
<span class="px-2 py-1 bg-surface-container-highest border border-outline-variant text-[11px] text-on-surface-variant rounded">Fulltime</span>
|
|
<span class="px-2 py-1 bg-surface-container-highest border border-outline-variant text-[11px] text-on-surface-variant rounded">Technologie</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row md:flex-col gap-2 justify-end">
|
|
<button class="p-2 border border-outline-variant rounded-lg hover:border-primary-container transition-all">
|
|
<span class="material-symbols-outlined text-on-surface-variant">bookmark</span>
|
|
</button>
|
|
<button class="px-4 py-2 bg-primary text-on-primary font-bold rounded-lg text-sm hover:bg-primary-container transition-colors">
|
|
Bekijk
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Side: Action Items & Activity -->
|
|
<div class="lg:col-span-4 space-y-gutter">
|
|
<!-- Applications Action Box -->
|
|
<div class="bg-surface-container-high border border-outline-variant rounded-xl overflow-hidden">
|
|
<div class="p-4 border-b border-outline-variant bg-surface-container-highest/50">
|
|
<h3 class="font-label-mono text-xs uppercase tracking-wider text-on-surface-variant flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-error text-sm">priority_high</span>
|
|
Actie vereist
|
|
</h3>
|
|
</div>
|
|
<div class="p-4 space-y-4">
|
|
<div class="flex gap-3 p-3 bg-surface/50 border border-outline-variant rounded-lg">
|
|
<div class="w-10 h-10 rounded bg-surface-container flex items-center justify-center flex-shrink-0">
|
|
<span class="material-symbols-outlined text-primary-container">mail</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-semibold text-on-surface">Uitnodiging gesprek</p>
|
|
<p class="text-xs text-on-surface-variant mb-2">Cloud Architect @ NexaGen</p>
|
|
<button class="text-xs text-primary-container font-bold hover:underline">Reageer nu →</button>
|
|
</div>
|
|
</div>
|
|
<div class="text-center py-2">
|
|
<button class="text-xs text-on-surface-variant hover:text-on-surface">Alle 4 openstaande taken bekijken</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Recent Activity Timeline -->
|
|
<div class="bg-surface-container-low border border-outline-variant rounded-xl p-6">
|
|
<h3 class="font-headline-md text-headline-md text-on-surface mb-6">Recente activiteit</h3>
|
|
<div class="space-y-6 relative before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[1px] before:bg-outline-variant">
|
|
<!-- Timeline Item 1 -->
|
|
<div class="relative pl-8">
|
|
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-surface-container-highest border border-outline-variant flex items-center justify-center z-10">
|
|
<span class="material-symbols-outlined text-[12px] text-secondary">check</span>
|
|
</div>
|
|
<p class="text-xs font-label-mono text-on-surface-variant mb-1">VANDAAG 10:15</p>
|
|
<p class="text-sm font-medium text-on-surface">Nieuwe bron gescand: <span class="text-primary-container">LinkedIn Engineering</span></p>
|
|
<p class="text-xs text-on-surface-variant">5 nieuwe vacatures gevonden, 0 matches.</p>
|
|
</div>
|
|
<!-- Timeline Item 2 -->
|
|
<div class="relative pl-8">
|
|
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-surface-container-highest border border-outline-variant flex items-center justify-center z-10">
|
|
<span class="material-symbols-outlined text-[12px] text-primary-container">psychology</span>
|
|
</div>
|
|
<p class="text-xs font-label-mono text-on-surface-variant mb-1">GISTEREN 16:45</p>
|
|
<p class="text-sm font-medium text-on-surface">Zoekprofiel geoptimaliseerd</p>
|
|
<p class="text-xs text-on-surface-variant">Match-threshold aangepast naar >75%.</p>
|
|
</div>
|
|
<!-- Timeline Item 3 -->
|
|
<div class="relative pl-8">
|
|
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-surface-container-highest border border-outline-variant flex items-center justify-center z-10">
|
|
<span class="material-symbols-outlined text-[12px] text-on-surface-variant">history</span>
|
|
</div>
|
|
<p class="text-xs font-label-mono text-on-surface-variant mb-1">GISTEREN 09:00</p>
|
|
<p class="text-sm font-medium text-on-surface">Wekelijks rapport gegenereerd</p>
|
|
<p class="text-xs text-on-surface-variant">128 vacatures verwerkt in de afgelopen 7 dagen.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Automation Widget -->
|
|
<div class="bg-gradient-to-br from-surface-container-high to-surface-container-lowest border border-outline-variant rounded-xl p-6 relative overflow-hidden group">
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-primary-container/5 rounded-full -translate-y-1/2 translate-x-1/2 blur-2xl group-hover:bg-primary-container/10 transition-all"></div>
|
|
<div class="relative z-10">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<div class="w-8 h-8 rounded bg-surface-container flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-primary-container">robot_2</span>
|
|
</div>
|
|
<h4 class="font-headline-md text-headline-md text-on-surface">Radar AI</h4>
|
|
</div>
|
|
<p class="text-sm text-on-surface-variant mb-4">Mijn algoritme leert van jouw "Bewaar" acties om betere matches te vinden.</p>
|
|
<div class="w-full bg-surface-container-highest h-1 rounded-full overflow-hidden">
|
|
<div class="bg-primary-container h-full w-[65%]" id="learning-progress"></div>
|
|
</div>
|
|
<p class="font-label-mono text-[10px] text-on-surface-variant mt-2">LEERPROCES: 65% VOLTOOID</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Bottom Spacing -->
|
|
<div class="h-16"></div>
|
|
</main>
|
|
<!-- Mobile Navigation Overlay (Visible on mobile only) -->
|
|
<div class="md:hidden fixed bottom-0 left-0 right-0 h-16 bg-surface/90 backdrop-blur-md border-t border-outline-variant flex justify-around items-center px-4 z-50">
|
|
<button class="flex flex-col items-center gap-1 text-primary">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<span class="text-[10px] font-label-mono">Home</span>
|
|
</button>
|
|
<button class="flex flex-col items-center gap-1 text-on-surface-variant opacity-60">
|
|
<span class="material-symbols-outlined">radar</span>
|
|
<span class="text-[10px] font-label-mono">Matches</span>
|
|
</button>
|
|
<div class="relative -top-6">
|
|
<button class="w-12 h-12 bg-primary-container text-on-primary-container rounded-full shadow-lg flex items-center justify-center">
|
|
<span class="material-symbols-outlined">add</span>
|
|
</button>
|
|
</div>
|
|
<button class="flex flex-col items-center gap-1 text-on-surface-variant opacity-60">
|
|
<span class="material-symbols-outlined">bookmark</span>
|
|
<span class="text-[10px] font-label-mono">Bewaard</span>
|
|
</button>
|
|
<button class="flex flex-col items-center gap-1 text-on-surface-variant opacity-60">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<span class="text-[10px] font-label-mono">Profiel</span>
|
|
</button>
|
|
</div>
|
|
<script>
|
|
// Simple micro-interaction for the search bar
|
|
const searchInput = document.querySelector('input[type="text"]');
|
|
searchInput.addEventListener('focus', () => {
|
|
searchInput.parentElement.classList.add('ring-1', 'ring-primary-container');
|
|
});
|
|
searchInput.addEventListener('blur', () => {
|
|
searchInput.parentElement.classList.remove('ring-1', 'ring-primary-container');
|
|
});
|
|
|
|
// Animation for the progress bar
|
|
const progressBar = document.getElementById('learning-progress');
|
|
let width = 65;
|
|
setInterval(() => {
|
|
if(width < 100) {
|
|
width += 0.05;
|
|
progressBar.style.width = width + '%';
|
|
}
|
|
}, 3000);
|
|
|
|
// Radar sweep effect in background (subtle)
|
|
const canvas = document.createElement('canvas');
|
|
canvas.style.position = 'fixed';
|
|
canvas.style.top = '0';
|
|
canvas.style.left = '0';
|
|
canvas.style.width = '100vw';
|
|
canvas.style.height = '100vh';
|
|
canvas.style.zIndex = '-1';
|
|
canvas.style.opacity = '0.05';
|
|
canvas.style.pointerEvents = 'none';
|
|
document.body.appendChild(canvas);
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
let angle = 0;
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
window.addEventListener('resize', resize);
|
|
resize();
|
|
|
|
function draw() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
const centerX = canvas.width / 2;
|
|
const centerY = canvas.height / 2;
|
|
const radius = Math.max(canvas.width, canvas.height);
|
|
|
|
const gradient = ctx.createConicGradient(angle, centerX, centerY);
|
|
gradient.addColorStop(0, 'rgba(0, 220, 229, 0.5)');
|
|
gradient.addColorStop(0.1, 'rgba(0, 220, 229, 0)');
|
|
gradient.addColorStop(1, 'rgba(0, 220, 229, 0)');
|
|
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
angle += 0.005;
|
|
requestAnimationFrame(draw);
|
|
}
|
|
draw();
|
|
</script>
|
|
</body></html> |