496 lines
28 KiB
HTML
496 lines
28 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 | New Matches Explorer</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.15);
|
|
}
|
|
.glass-panel {
|
|
backdrop-filter: blur(12px);
|
|
background: rgba(11, 19, 38, 0.8);
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #060e20;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #2d3449;
|
|
border-radius: 10px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #3a494a;
|
|
}
|
|
</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="bg-background text-on-surface font-body-sm text-body-sm min-h-screen">
|
|
<!-- Side Navigation Shell -->
|
|
<nav 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">
|
|
<h1 class="font-headline-md text-headline-md font-semibold text-primary">VacatureRadar</h1>
|
|
<p class="font-label-mono text-label-mono text-on-surface-variant opacity-70">Career Intelligence</p>
|
|
</div>
|
|
<div class="flex-1 space-y-1 px-3">
|
|
<!-- Nav Item: Dashboard -->
|
|
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200 scale-95 transition-transform" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<span class="font-label-mono text-label-mono">Dashboard</span>
|
|
</a>
|
|
<!-- Nav Item: Nieuwe matches (Active) -->
|
|
<a class="flex items-center gap-3 px-3 py-2 text-primary font-bold border-r-2 border-primary bg-surface-container-high transition-colors duration-200 scale-95 transition-transform" href="#">
|
|
<span class="material-symbols-outlined">radar</span>
|
|
<span class="font-label-mono text-label-mono">Nieuwe matches</span>
|
|
</a>
|
|
<!-- Nav Item: Alle vacatures -->
|
|
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200 scale-95 transition-transform" href="#">
|
|
<span class="material-symbols-outlined">view_list</span>
|
|
<span class="font-label-mono text-label-mono">Alle vacatures</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200 scale-95 transition-transform" href="#">
|
|
<span class="material-symbols-outlined">bookmark</span>
|
|
<span class="font-label-mono text-label-mono">Opgeslagen</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200 scale-95 transition-transform" href="#">
|
|
<span class="material-symbols-outlined">send</span>
|
|
<span class="font-label-mono text-label-mono">Sollicitaties</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200 scale-95 transition-transform" href="#">
|
|
<span class="material-symbols-outlined">business</span>
|
|
<span class="font-label-mono text-label-mono">Werkgevers</span>
|
|
</a>
|
|
<div class="pt-4 pb-2 px-3">
|
|
<p class="text-[10px] uppercase tracking-widest text-outline">Systeem</p>
|
|
</div>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200 scale-95 transition-transform" href="#">
|
|
<span class="material-symbols-outlined">robot_2</span>
|
|
<span class="font-label-mono text-label-mono">Automatisering</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200 scale-95 transition-transform" href="#">
|
|
<span class="material-symbols-outlined">psychology</span>
|
|
<span class="font-label-mono text-label-mono">Zoekprofiel</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200 scale-95 transition-transform" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<span class="font-label-mono text-label-mono">Instellingen</span>
|
|
</a>
|
|
</div>
|
|
<div class="mt-auto px-6 py-4 border-t border-outline-variant">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-surface-variant overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="A professional headshot of a young male tech professional in a dark studio setting, illuminated by a subtle cyan rim light that matches the radar interface colors. He is looking at the camera with a confident expression. The background is a soft, dark indigo blur that suggests a modern office environment with digital displays." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAqaHUGDyVYomUfBt2v9ejyU1WakXEPSyGIANWy_K4RFgWzSzLTPGXFQBLgrXcOJoaR47ph6mFUj_XXriJLdCJkjKGs5nMggcSIKxMVZNmoSMAIqxpANwIx2RkhpWys6ebxIJMZfoSB-dbDm2PzVIdPbLwqY1D5_quEr5uzNVPfZn7k-lO2EDZOBthIoXOfu2NAsxsb06MTEJ0buHbNpvFRsOVXnRXWdsbMC5JMaLfyF3_xOn7c3JztQkv8E3z4mwYazZspdgJI0xUP"/>
|
|
</div>
|
|
<div>
|
|
<p class="font-label-mono text-[12px] text-on-surface">Mark Janssens</p>
|
|
<p class="text-[10px] text-on-surface-variant">Pro Plan</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Main Content Shell -->
|
|
<main class="ml-64 min-h-screen flex flex-col">
|
|
<!-- Top Bar -->
|
|
<header class="h-16 flex justify-between items-center px-gutter border-b border-outline-variant bg-surface/80 backdrop-blur-xl sticky top-0 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 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:outline-none focus:border-primary-container transition-all" placeholder="Zoek binnen matches..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex items-center gap-2">
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-secondary opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-secondary"></span>
|
|
</span>
|
|
<span class="font-label-mono text-label-mono text-secondary">Scanner Actief</span>
|
|
</div>
|
|
<div class="flex items-center gap-4 text-on-surface-variant">
|
|
<span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors">notifications</span>
|
|
<span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors">sensors</span>
|
|
<div class="h-8 w-[1px] bg-outline-variant"></div>
|
|
<div class="flex items-center gap-1 cursor-pointer group">
|
|
<span class="font-label-mono text-label-mono group-hover:text-primary transition-colors">LIST VIEW</span>
|
|
<span class="material-symbols-outlined text-[18px]">view_list</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Filter Bar -->
|
|
<section class="p-6 bg-surface-container-low border-b border-outline-variant">
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
<!-- Location -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-mono text-[10px] text-outline uppercase tracking-wider">Locatie</label>
|
|
<div class="flex items-center gap-2 px-3 py-1.5 bg-surface-container rounded border border-outline-variant hover:border-outline transition-colors cursor-pointer">
|
|
<span class="material-symbols-outlined text-sm">location_on</span>
|
|
<span class="text-sm">Regio Hasselt</span>
|
|
<span class="material-symbols-outlined text-xs">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<!-- Travel Time -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-mono text-[10px] text-outline uppercase tracking-wider">Max Reistijd</label>
|
|
<div class="flex items-center gap-2 px-3 py-1.5 bg-surface-container rounded border border-outline-variant">
|
|
<span class="material-symbols-outlined text-sm">schedule</span>
|
|
<span class="text-sm">30 min</span>
|
|
<span class="material-symbols-outlined text-xs">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<!-- Work Type -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-mono text-[10px] text-outline uppercase tracking-wider">Hybride/Remote</label>
|
|
<div class="flex items-center gap-1">
|
|
<button class="px-3 py-1.5 bg-primary-container text-on-primary-container rounded-lg text-sm font-medium">Alle</button>
|
|
<button class="px-3 py-1.5 bg-surface-container border border-outline-variant text-on-surface-variant rounded-lg text-sm hover:border-outline">Hybride</button>
|
|
<button class="px-3 py-1.5 bg-surface-container border border-outline-variant text-on-surface-variant rounded-lg text-sm hover:border-outline">Remote</button>
|
|
</div>
|
|
</div>
|
|
<!-- Employer Type -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-mono text-[10px] text-outline uppercase tracking-wider">Werkgever</label>
|
|
<div class="flex items-center gap-2 px-3 py-1.5 bg-surface-container rounded border border-outline-variant">
|
|
<span class="text-sm">Direct / Publiek</span>
|
|
<span class="material-symbols-outlined text-xs">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<!-- Match Score -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-mono text-[10px] text-outline uppercase tracking-wider">Match Score</label>
|
|
<div class="flex items-center gap-2 px-3 py-1.5 bg-surface-container rounded border border-outline-variant border-primary-container/30">
|
|
<span class="text-sm font-semibold text-primary-container">> 70%</span>
|
|
<span class="material-symbols-outlined text-xs">tune</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-auto self-end pb-0.5">
|
|
<button class="flex items-center gap-2 px-4 py-2 bg-primary-container text-on-primary-container font-semibold rounded hover:brightness-110 transition-all">
|
|
<span class="material-symbols-outlined text-sm">filter_alt</span>
|
|
Filters Toepassen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Main Workspace Grid -->
|
|
<div class="flex-1 grid grid-cols-12 gap-0 overflow-hidden h-[calc(100vh-144px)]">
|
|
<!-- Vacancy List Column -->
|
|
<div class="col-span-5 border-r border-outline-variant overflow-y-auto bg-surface-container-lowest">
|
|
<div class="p-4 border-b border-outline-variant flex justify-between items-center bg-surface/40">
|
|
<span class="font-label-mono text-label-mono text-on-surface-variant">3 RESULTATEN GEVONDEN</span>
|
|
<div class="flex gap-2">
|
|
<button class="p-1 text-on-surface hover:text-primary"><span class="material-symbols-outlined text-[20px]">sort</span></button>
|
|
</div>
|
|
</div>
|
|
<!-- Match 1: IT Field Engineer -->
|
|
<article class="p-5 border-b border-outline-variant bg-surface-container-high/40 hover:bg-surface-container-high cursor-pointer transition-all border-l-4 border-l-primary-container group relative">
|
|
<div class="flex justify-between items-start mb-3">
|
|
<div>
|
|
<h3 class="font-headline-md text-headline-md text-primary mb-0.5">IT Field Engineer</h3>
|
|
<div class="flex items-center gap-2 text-on-surface-variant text-sm">
|
|
<span class="material-symbols-outlined text-[16px]">business</span>
|
|
<span>Zorgregio Hasselt</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="font-headline-md text-headline-md text-primary-container font-bold">92%</div>
|
|
<div class="font-label-mono text-[10px] text-primary-container font-medium tracking-tighter">[STERKE MATCH]</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
<span class="px-2 py-0.5 bg-secondary-container/20 text-secondary-fixed-dim text-[11px] rounded border border-secondary-container/30">Publieke sector</span>
|
|
<span class="px-2 py-0.5 bg-surface-variant text-on-surface-variant text-[11px] rounded">Directe werkgever</span>
|
|
<span class="px-2 py-0.5 bg-surface-variant text-on-surface-variant text-[11px] rounded">Hasselt (5km)</span>
|
|
</div>
|
|
<p class="text-xs text-on-surface-variant line-clamp-2 italic opacity-80">"Ideale match voor jouw profiel: focus op on-site support binnen een maatschappelijk relevante omgeving in de directe regio."</p>
|
|
<div class="mt-4 flex items-center justify-between opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<span class="text-[11px] text-outline">Gevonden: 2u geleden</span>
|
|
<span class="material-symbols-outlined text-primary-container">arrow_forward</span>
|
|
</div>
|
|
</article>
|
|
<!-- Match 2: System Administrator -->
|
|
<article class="p-5 border-b border-outline-variant hover:bg-surface-container-high cursor-pointer transition-all group">
|
|
<div class="flex justify-between items-start mb-3">
|
|
<div>
|
|
<h3 class="font-headline-md text-headline-md text-on-surface mb-0.5 group-hover:text-primary">System Administrator</h3>
|
|
<div class="flex items-center gap-2 text-on-surface-variant text-sm">
|
|
<span class="material-symbols-outlined text-[16px]">business</span>
|
|
<span>Stad Genk</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="font-headline-md text-headline-md text-secondary font-bold">88%</div>
|
|
<div class="font-label-mono text-[10px] text-secondary font-medium tracking-tighter">MATCH</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
<span class="px-2 py-0.5 bg-surface-variant text-on-surface-variant text-[11px] rounded">M365 Specialist</span>
|
|
<span class="px-2 py-0.5 bg-surface-variant text-on-surface-variant text-[11px] rounded">Genk (12km)</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex -space-x-2">
|
|
<div class="w-5 h-5 rounded-full bg-primary-container/20 border border-background flex items-center justify-center"><span class="material-symbols-outlined text-[10px]">cloud</span></div>
|
|
<div class="w-5 h-5 rounded-full bg-secondary-container/20 border border-background flex items-center justify-center"><span class="material-symbols-outlined text-[10px]">security</span></div>
|
|
</div>
|
|
<span class="text-[11px] text-on-surface-variant">Skills match: Infrastructuur, Microsoft 365</span>
|
|
</div>
|
|
</article>
|
|
<!-- Match 3: Infrastructure Engineer (Deduplicated) -->
|
|
<article class="p-5 border-b border-outline-variant hover:bg-surface-container-high cursor-pointer transition-all opacity-70 group">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h3 class="font-headline-md text-headline-md">Infrastructure Engineer</h3>
|
|
<span class="px-2 py-0.5 bg-error-container/20 text-error text-[10px] font-label-mono rounded border border-error-container/30 uppercase">Deduplicated</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-on-surface-variant text-sm mb-3">
|
|
<span class="material-symbols-outlined text-[16px]">person_search</span>
|
|
<span>Recruiter Copy (Anonymous)</span>
|
|
</div>
|
|
<div class="p-2 bg-surface-container-lowest rounded border border-outline-variant text-[11px] text-outline">
|
|
Radar heeft 4 identieke plaatsingen gedetecteerd. Alleen de meest relevante bron wordt getoond.
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<!-- Detailed Vacancy Detail Column -->
|
|
<div class="col-span-7 overflow-y-auto bg-surface-container-lowest relative">
|
|
<!-- Decorative background shader element -->
|
|
<div class="absolute inset-0 pointer-events-none opacity-5">
|
|
|
|
</div>
|
|
<div class="relative z-10 p-10">
|
|
<div class="flex justify-between items-start mb-10">
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="px-3 py-1 bg-primary-container text-on-primary-container font-label-mono text-[11px] rounded-full font-bold">ACTUEEL</span>
|
|
<span class="text-on-surface-variant font-label-mono text-[11px] uppercase tracking-widest">Gepubliceerd op 12 Okt 2023</span>
|
|
</div>
|
|
<h2 class="font-headline-lg text-headline-lg text-primary leading-tight mb-2">IT Field Engineer</h2>
|
|
<p class="font-headline-md text-headline-md text-on-surface-variant flex items-center gap-2">
|
|
Zorgregio Hasselt
|
|
<span class="w-1 h-1 bg-outline rounded-full"></span>
|
|
Hasselt, Limburg
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col items-end gap-4">
|
|
<div class="w-24 h-24 rounded-xl border border-outline-variant flex items-center justify-center p-2 bg-white">
|
|
<img class="max-w-full max-h-full object-contain" data-alt="A minimalist logo for a high-end healthcare organization called Zorgregio Hasselt. The logo should be clean and professional, featuring a stylized blue cross and a soft green leaf icon representing health and regional care. It is centered on a pure white background with ample white space for a premium corporate look." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAE82_UNZaiIVA68NvM-iFp24yy7ppbP3qylgAvbHo6ANS1iUhfjU_etZX6lZkHSLQRzDk5mxt881kkArv0BQ7dJa_qeENhtsuLpDoBZZqkzb2S21IsQ6PNH1I95Z1EQMMvCkcrgD7mHxns-OwrQ3ZCY4xWv6eTnjvPMM_ecHgO43E532DkMikcvzcob54g3M7U4FFvj-PC_WgrhW0qY1l635hluFox9zZ7kaTSPrDBwvsvwEcJdTxsqTKx3KRqca09hRQLMst2roOo"/>
|
|
</div>
|
|
<button class="w-full flex items-center justify-center gap-2 px-6 py-3 bg-primary-container text-on-primary-container font-bold rounded shadow-lg signal-glow">
|
|
<span class="material-symbols-outlined">send</span>
|
|
Direct Solliciteren
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Analysis Grid -->
|
|
<div class="grid grid-cols-3 gap-4 mb-10">
|
|
<div class="p-4 rounded-lg bg-surface-container border border-outline-variant flex flex-col gap-2">
|
|
<span class="font-label-mono text-[10px] text-outline uppercase">Match Kwaliteit</span>
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-headline-md text-headline-md text-primary-container font-bold">92%</span>
|
|
<div class="h-1.5 flex-1 bg-surface-variant rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary-container" style="width: 92%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 rounded-lg bg-surface-container border border-outline-variant flex flex-col gap-2">
|
|
<span class="font-label-mono text-[10px] text-outline uppercase">Reistijd (Auto)</span>
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-secondary">commute</span>
|
|
<span class="font-headline-md text-headline-md text-on-surface font-medium">25 min</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 rounded-lg bg-surface-container border border-outline-variant flex flex-col gap-2">
|
|
<span class="font-label-mono text-[10px] text-outline uppercase">Salarisindicatie</span>
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-outline">payments</span>
|
|
<span class="font-headline-md text-headline-md text-on-surface font-medium">€3.4k - €4.8k</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Detailed Content -->
|
|
<div class="grid grid-cols-2 gap-10">
|
|
<div class="space-y-8">
|
|
<section>
|
|
<h4 class="font-label-mono text-label-mono text-primary uppercase border-b border-outline-variant pb-2 mb-4 tracking-widest">Waarom deze match?</h4>
|
|
<ul class="space-y-4">
|
|
<li class="flex gap-3">
|
|
<span class="material-symbols-outlined text-primary-container" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
<p class="text-on-surface"><span class="font-bold">Locatie:</span> Binnen jouw opgegeven reistijd van 30 minuten vanuit regio Bilzen.</p>
|
|
</li>
|
|
<li class="flex gap-3">
|
|
<span class="material-symbols-outlined text-primary-container" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
<p class="text-on-surface"><span class="font-bold">Werkgever:</span> Directe aanstelling bij een publieke organisatie, wat overeenkomt met jouw voorkeur voor stabiliteit.</p>
|
|
</li>
|
|
<li class="flex gap-3">
|
|
<span class="material-symbols-outlined text-primary-container" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
<p class="text-on-surface"><span class="font-bold">Tech Stack:</span> Sterke overlap op Azure AD en Windows 11 deployment projecten.</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section>
|
|
<h4 class="font-label-mono text-label-mono text-primary uppercase border-b border-outline-variant pb-2 mb-4 tracking-widest">Over de functie</h4>
|
|
<p class="text-on-surface-variant leading-relaxed">
|
|
Als IT Field Engineer ben je verantwoordelijk voor het vlekkeloos functioneren van de hardware en software infrastructuur op diverse locaties binnen Zorgregio Hasselt. Je werkt nauw samen met het centrale systeembeheer team om nieuwe werkplekken in te richten en complexe incidenten on-site op te lossen.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
<div class="space-y-8">
|
|
<section class="p-6 rounded-xl bg-surface-container-low border border-outline-variant">
|
|
<h4 class="font-label-mono text-label-mono text-on-surface uppercase mb-4 text-center">Functie Details</h4>
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between py-2 border-b border-outline-variant/30">
|
|
<span class="text-on-surface-variant">Contract</span>
|
|
<span class="font-medium">Vast contract</span>
|
|
</div>
|
|
<div class="flex justify-between py-2 border-b border-outline-variant/30">
|
|
<span class="text-on-surface-variant">Uren</span>
|
|
<span class="font-medium">36 - 40 uur</span>
|
|
</div>
|
|
<div class="flex justify-between py-2 border-b border-outline-variant/30">
|
|
<span class="text-on-surface-variant">Opleidingsbudget</span>
|
|
<span class="font-medium">€2.500 / jr</span>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-on-surface-variant">Vakantiedagen</span>
|
|
<span class="font-medium">28 + 4 extra</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h4 class="font-label-mono text-label-mono text-primary uppercase border-b border-outline-variant pb-2 mb-4 tracking-widest">Locatie</h4>
|
|
<div class="rounded-lg overflow-hidden border border-outline-variant h-48 relative">
|
|
<div class="w-full h-full bg-surface-container-high" data-alt="A highly detailed satellite-style map view of Hasselt, Belgium, rendered with a custom dark UI theme. The map shows city streets in dark grey lines and green areas in deep forest green. A glowing cyan pinpoint is centered over a modern healthcare facility building, surrounded by soft glowing pulses that suggest radar activity. The aesthetic is professional and technical." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDNWeimW3J_bTS6F1Y5Qdi_kyAcxqG28PUlNMbITqJ-UJ1J2Jr2W2hetSIbfXP9EOZavnOA37wCyB34X203-rblL4dv7L4X-MRysHsKTxwzwwOA_fXRtioA5s7kKDVI4KllbwMC0yfMVgq3-OWO2YlXUdb9E-tyr0rj6xN4HYEDe0CtrEAfso0f7vrT0z5w4MmZqC4XmBRsWOEnMqYZtqYjS0TeakFd9hOAcxprwQVpLnhRO9-yr12DPtWV7bIvFlz2MUpsHgfh70FQ')"></div>
|
|
<div class="absolute bottom-2 left-2 px-2 py-1 bg-surface/90 backdrop-blur rounded text-[10px] font-label-mono">Hasselt, Campus Salvador</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Sticky Interaction Floating Button -->
|
|
<div class="fixed bottom-8 right-8 flex gap-4 z-50">
|
|
<button class="h-14 w-14 rounded-full bg-surface-container-highest text-on-surface shadow-2xl flex items-center justify-center hover:bg-surface-bright transition-all border border-outline-variant">
|
|
<span class="material-symbols-outlined">bookmark</span>
|
|
</button>
|
|
<button class="h-14 px-8 rounded-full bg-primary-container text-on-primary-container font-bold shadow-2xl flex items-center gap-2 hover:scale-105 active:scale-95 transition-all signal-glow">
|
|
<span class="material-symbols-outlined">bolt</span>
|
|
QUICK APPLY
|
|
</button>
|
|
</div>
|
|
</main>
|
|
<!-- Visual Overlays -->
|
|
<div class="fixed inset-0 pointer-events-none border-[20px] border-surface-container-lowest/10 z-[60]"></div>
|
|
<script>
|
|
// Micro-interactions
|
|
document.querySelectorAll('article').forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
// Remove active classes from others
|
|
document.querySelectorAll('article').forEach(c => {
|
|
c.classList.remove('bg-surface-container-high/40', 'border-l-4', 'border-l-primary-container');
|
|
c.classList.add('hover:bg-surface-container-high');
|
|
});
|
|
// Add to current
|
|
card.classList.add('bg-surface-container-high/40', 'border-l-4', 'border-l-primary-container');
|
|
card.classList.remove('hover:bg-surface-container-high');
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |