471 lines
26 KiB
HTML
471 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 | Zoekprofiel</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;
|
|
vertical-align: middle;
|
|
}
|
|
.signal-glow {
|
|
box-shadow: 0 0 20px 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;
|
|
}
|
|
</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">
|
|
<!-- TopAppBar Shell -->
|
|
<header class="bg-surface/80 backdrop-blur-xl border-b border-outline-variant/30 fixed top-0 w-full z-50 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-stack-md">
|
|
<span class="font-headline-md text-headline-md font-bold tracking-tight text-primary">VacatureRadar</span>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="hidden md:flex items-center gap-stack-md text-on-surface-variant font-label-mono text-label-mono">
|
|
<span class="hover:text-primary transition-colors cursor-pointer">Dashboard</span>
|
|
<span class="text-primary font-bold transition-colors cursor-pointer">Zoekprofiel</span>
|
|
<span class="hover:text-primary transition-colors cursor-pointer">Vacatures</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:bg-surface-container-highest/50 p-2 rounded-full transition-colors" data-icon="notifications">notifications</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:bg-surface-container-highest/50 p-2 rounded-full transition-colors" data-icon="account_circle">account_circle</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Sidebar Navigation -->
|
|
<aside class="h-screen w-64 fixed left-0 top-0 bg-surface-container border-r border-outline-variant/20 hidden md:flex flex-col py-stack-lg gap-stack-md pt-24">
|
|
<div class="px-6 mb-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-primary-container/20 flex items-center justify-center border border-primary-container/30">
|
|
<span class="material-symbols-outlined text-primary" data-icon="radar">radar</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-on-surface font-headline-md text-[16px] font-bold">Mijn Radar</h3>
|
|
<p class="text-on-surface-variant text-[11px] font-label-mono">Laatste scan: 4m geleden</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 space-y-1">
|
|
<a class="flex items-center px-6 py-3 text-on-surface-variant font-label-mono text-label-mono hover:text-primary hover:bg-surface-container-high transition-all" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="dashboard">dashboard</span> Overview
|
|
</a>
|
|
<a class="flex items-center px-6 py-3 text-on-surface-variant font-label-mono text-label-mono hover:text-primary hover:bg-surface-container-high transition-all" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="radar">radar</span> New matches
|
|
</a>
|
|
<a class="flex items-center px-6 py-3 text-primary bg-primary-container/10 border-r-2 border-primary-container font-label-mono text-label-mono" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="person_search">person_search</span> Search profile
|
|
</a>
|
|
<a class="flex items-center px-6 py-3 text-on-surface-variant font-label-mono text-label-mono hover:text-primary hover:bg-surface-container-high transition-all" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="bookmark">bookmark</span> Saved
|
|
</a>
|
|
<a class="flex items-center px-6 py-3 text-on-surface-variant font-label-mono text-label-mono hover:text-primary hover:bg-surface-container-high transition-all" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="automation">precision_manufacturing</span> Automation
|
|
</a>
|
|
<a class="flex items-center px-6 py-3 text-on-surface-variant font-label-mono text-label-mono hover:text-primary hover:bg-surface-container-high transition-all" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="settings">settings</span> Settings
|
|
</a>
|
|
</nav>
|
|
<div class="px-6 mt-auto">
|
|
<button class="w-full bg-primary-container text-on-primary-container py-3 rounded-xl font-bold active:scale-95 transition-transform flex items-center justify-center gap-2">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="add">add</span>
|
|
Nieuwe Zoekopdracht
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Canvas -->
|
|
<main class="md:ml-64 pt-20 h-screen flex overflow-hidden">
|
|
<!-- Profile Editor Scroll Area -->
|
|
<div class="flex-1 overflow-y-auto px-gutter py-stack-lg space-y-12 pb-32">
|
|
<!-- Intro Section -->
|
|
<section class="max-w-3xl">
|
|
<h1 class="font-headline-lg text-headline-lg text-primary mb-2">Configureer je Radar</h1>
|
|
<p class="text-on-surface-variant text-body-md">Verfijn je zoekprofiel om alleen de meest relevante kansen in de gaten te houden. Ons systeem leert van je voorkeuren.</p>
|
|
</section>
|
|
<!-- 1. Gewenste Rollen Section -->
|
|
<section class="max-w-4xl">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<span class="material-symbols-outlined text-primary" data-icon="work">work</span>
|
|
<h2 class="font-headline-md text-headline-md">Gewenste Rollen</h2>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="p-4 bg-surface-container-low border border-outline-variant/30 rounded-xl flex items-center justify-between group hover:border-primary/50 transition-colors">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant" data-icon="engineering">engineering</span>
|
|
<span class="font-medium">Systeembeheerder</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-primary/10 px-2 py-1 rounded border border-primary/20">
|
|
<span class="text-[10px] font-label-mono text-primary-fixed uppercase tracking-wider">Sterke Voorkeur</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 bg-surface-container-low border border-outline-variant/30 rounded-xl flex items-center justify-between group hover:border-primary/50 transition-colors">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant" data-icon="cloud_done">cloud_done</span>
|
|
<span class="font-medium">Cloud Architect</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-surface-container-highest px-2 py-1 rounded border border-outline-variant/30">
|
|
<span class="text-[10px] font-label-mono text-on-surface-variant uppercase tracking-wider">Neutraal</span>
|
|
</div>
|
|
</div>
|
|
<button class="p-4 border-2 border-dashed border-outline-variant/30 rounded-xl flex items-center justify-center text-on-surface-variant hover:text-primary hover:border-primary/50 transition-all">
|
|
<span class="material-symbols-outlined mr-2" data-icon="add_circle">add_circle</span> Rol toevoegen
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<!-- 2. Technologieën (Score Matrix) -->
|
|
<section class="max-w-4xl">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<span class="material-symbols-outlined text-primary" data-icon="terminal">terminal</span>
|
|
<h2 class="font-headline-md text-headline-md">Technologieën & Stack</h2>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="bg-surface-container-low border border-outline-variant/30 rounded-xl overflow-hidden">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="border-b border-outline-variant/20 bg-surface-container-high/50">
|
|
<th class="p-4 font-label-mono text-label-mono text-on-surface-variant uppercase tracking-widest">Technologie</th>
|
|
<th class="p-4 font-label-mono text-label-mono text-on-surface-variant uppercase tracking-widest text-center">Harde Uitsluiting</th>
|
|
<th class="p-4 font-label-mono text-label-mono text-on-surface-variant uppercase tracking-widest text-center">Neutraal</th>
|
|
<th class="p-4 font-label-mono text-label-mono text-on-surface-variant uppercase tracking-widest text-center">Sterke Voorkeur</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-outline-variant/10">
|
|
<tr class="hover:bg-surface-container-highest/30 transition-colors">
|
|
<td class="p-4 font-medium">Microsoft 365 / Azure AD</td>
|
|
<td class="p-4 text-center"><input class="text-error focus:ring-error bg-surface border-outline-variant" name="tech1" type="radio"/></td>
|
|
<td class="p-4 text-center"><input class="text-on-surface-variant focus:ring-on-surface-variant bg-surface border-outline-variant" name="tech1" type="radio"/></td>
|
|
<td class="p-4 text-center"><input checked="" class="text-primary focus:ring-primary bg-surface border-outline-variant" name="tech1" type="radio"/></td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-container-highest/30 transition-colors">
|
|
<td class="p-4 font-medium">VMware vSphere</td>
|
|
<td class="p-4 text-center"><input class="text-error focus:ring-error bg-surface border-outline-variant" name="tech2" type="radio"/></td>
|
|
<td class="p-4 text-center"><input checked="" class="text-on-surface-variant focus:ring-on-surface-variant bg-surface border-outline-variant" name="tech2" type="radio"/></td>
|
|
<td class="p-4 text-center"><input class="text-primary focus:ring-primary bg-surface border-outline-variant" name="tech2" type="radio"/></td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-container-highest/30 transition-colors">
|
|
<td class="p-4 font-medium">Legacy Mainframe / COBOL</td>
|
|
<td class="p-4 text-center"><input checked="" class="text-error focus:ring-error bg-surface border-outline-variant" name="tech3" type="radio"/></td>
|
|
<td class="p-4 text-center"><input class="text-on-surface-variant focus:ring-on-surface-variant bg-surface border-outline-variant" name="tech3" type="radio"/></td>
|
|
<td class="p-4 text-center"><input class="text-primary focus:ring-primary bg-surface border-outline-variant" name="tech3" type="radio"/></td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-container-highest/30 transition-colors">
|
|
<td class="p-4 font-medium">Veeam Backup</td>
|
|
<td class="p-4 text-center"><input class="text-error focus:ring-error bg-surface border-outline-variant" name="tech4" type="radio"/></td>
|
|
<td class="p-4 text-center"><input checked="" class="text-on-surface-variant focus:ring-on-surface-variant bg-surface border-outline-variant" name="tech4" type="radio"/></td>
|
|
<td class="p-4 text-center"><input class="text-primary focus:ring-primary bg-surface border-outline-variant" name="tech4" type="radio"/></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<button class="text-primary font-label-mono text-label-mono flex items-center hover:underline">
|
|
<span class="material-symbols-outlined mr-1 text-[16px]" data-icon="add">add</span> Technologie toevoegen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- 3. Regio & Reistijd -->
|
|
<section class="max-w-4xl">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<span class="material-symbols-outlined text-primary" data-icon="map">map</span>
|
|
<h2 class="font-headline-md text-headline-md">Regio & Reistijd</h2>
|
|
</div>
|
|
<div class="bg-surface-container-low border border-outline-variant/30 rounded-xl p-6 grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div class="space-y-4">
|
|
<label class="block text-on-surface-variant font-label-mono text-label-mono uppercase">Centrale Locatie</label>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant" data-icon="location_on">location_on</span>
|
|
<input class="w-full bg-surface border-outline-variant/30 rounded-lg pl-10 focus:border-primary focus:ring-1 focus:ring-primary/20 text-on-surface py-3" type="text" value="Hasselt, België"/>
|
|
</div>
|
|
<div class="pt-4">
|
|
<label class="block text-on-surface-variant font-label-mono text-label-mono uppercase mb-4">Maximale Reistijd: <span class="text-primary font-bold">30 min</span></label>
|
|
<input class="w-full h-1.5 bg-surface-container-highest rounded-lg appearance-none cursor-pointer accent-primary" max="120" min="5" type="range" value="30"/>
|
|
<div class="flex justify-between text-[11px] text-on-surface-variant font-label-mono mt-2">
|
|
<span>5 MIN</span>
|
|
<span>120+ MIN</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative aspect-video rounded-lg overflow-hidden border border-outline-variant/30 bg-surface">
|
|
<!-- Simulated Map View -->
|
|
<div class="absolute inset-0 bg-gradient-to-br from-surface-container-highest to-surface opacity-50"></div>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="relative">
|
|
<div class="absolute inset-0 animate-ping rounded-full bg-primary/20 w-32 h-32 -ml-14 -mt-14"></div>
|
|
<div class="w-4 h-4 bg-primary rounded-full border-2 border-white relative z-10"></div>
|
|
<div class="absolute inset-0 border-2 border-primary/40 rounded-full w-48 h-48 -ml-22 -mt-22"></div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute bottom-3 right-3 bg-surface-container-highest/80 px-2 py-1 rounded text-[10px] font-label-mono backdrop-blur-sm">
|
|
Hasselt Straal (± 25km)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- 4. Werkgeverstype -->
|
|
<section class="max-w-4xl">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<span class="material-symbols-outlined text-primary" data-icon="domain">domain</span>
|
|
<h2 class="font-headline-md text-headline-md">Organisatie & Cultuur</h2>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="p-6 bg-surface-container-low border-2 border-primary/40 rounded-xl relative overflow-hidden group transition-all signal-glow">
|
|
<div class="absolute top-2 right-2">
|
|
<span class="material-symbols-outlined text-primary" data-icon="check_circle" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-primary text-3xl mb-4" data-icon="corporate_fare">corporate_fare</span>
|
|
<h4 class="font-bold mb-2">Private Sector</h4>
|
|
<p class="text-sm text-on-surface-variant">KMO's, Enterprises en Scale-ups.</p>
|
|
</div>
|
|
<div class="p-6 bg-surface-container-low border border-outline-variant/30 rounded-xl relative group hover:border-primary/50 transition-all">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary text-3xl mb-4" data-icon="account_balance">account_balance</span>
|
|
<h4 class="font-bold mb-2">Overheid / Public</h4>
|
|
<p class="text-sm text-on-surface-variant">Steden, onderwijs en semipublieke instellingen.</p>
|
|
</div>
|
|
<div class="p-6 bg-surface-container-low border border-outline-variant/30 rounded-xl relative group hover:border-primary/50 transition-all">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary text-3xl mb-4" data-icon="groups">groups</span>
|
|
<h4 class="font-bold mb-2">Non-profit</h4>
|
|
<p class="text-sm text-on-surface-variant">VZW's en maatschappelijke organisaties.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- 5. Harde Uitsluitingen -->
|
|
<section class="max-w-4xl">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<span class="material-symbols-outlined text-error" data-icon="block">block</span>
|
|
<h2 class="font-headline-md text-headline-md">Harde Uitsluitingsregels</h2>
|
|
</div>
|
|
<div class="p-6 bg-error-container/5 border border-error/20 rounded-xl space-y-4">
|
|
<div class="flex items-start gap-4 p-4 bg-surface-container-low rounded-lg border border-outline-variant/20">
|
|
<div class="pt-1">
|
|
<input checked="" class="rounded text-error focus:ring-error bg-surface border-outline-variant w-5 h-5" type="checkbox"/>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-on-surface">Sluit vacatures uit met 'On-call' diensten</h4>
|
|
<p class="text-sm text-on-surface-variant">Ik ben niet beschikbaar voor 24/7 bereikbaarheid.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4 p-4 bg-surface-container-low rounded-lg border border-outline-variant/20">
|
|
<div class="pt-1">
|
|
<input class="rounded text-error focus:ring-error bg-surface border-outline-variant w-5 h-5" type="checkbox"/>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-on-surface">Sluit vacatures uit zonder remote opties</h4>
|
|
<p class="text-sm text-on-surface-variant">Vereist minimaal 2 dagen home-office.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- Real-time Preview Sidebar -->
|
|
<aside class="w-80 h-full border-l border-outline-variant/30 bg-surface-container-low p-6 hidden lg:flex flex-col gap-6">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="font-headline-md text-[18px]">Radar Preview</h3>
|
|
<span class="bg-secondary/10 text-secondary-fixed text-[10px] font-label-mono px-2 py-0.5 rounded border border-secondary/20 uppercase animate-pulse">Live</span>
|
|
</div>
|
|
<p class="text-sm text-on-surface-variant mb-4">Hoe deze instellingen een typische vacature scoren:</p>
|
|
<!-- Preview Card -->
|
|
<div class="p-5 bg-surface rounded-xl border border-primary/30 signal-glow space-y-4">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h4 class="font-bold leading-tight">System Engineer (M365 & Azure)</h4>
|
|
<p class="text-xs text-on-surface-variant">Tech Solutions NV • Hasselt</p>
|
|
</div>
|
|
<div class="flex flex-col items-end">
|
|
<span class="text-2xl font-headline-lg text-primary leading-none">91%</span>
|
|
<span class="text-[9px] font-label-mono text-primary-fixed uppercase mt-1">Sterke Match</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3 pt-2">
|
|
<div class="flex items-center gap-2 text-xs">
|
|
<span class="material-symbols-outlined text-secondary text-[16px]" data-icon="check_circle">check_circle</span>
|
|
<span>M365 Expertise (Match +25%)</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-xs">
|
|
<span class="material-symbols-outlined text-secondary text-[16px]" data-icon="check_circle">check_circle</span>
|
|
<span>Locatie Hasselt (Match +20%)</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-xs">
|
|
<span class="material-symbols-outlined text-on-surface-variant text-[16px]" data-icon="radio_button_checked">radio_button_checked</span>
|
|
<span>VMware Neutraal (Match +0%)</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-xs text-on-surface-variant">
|
|
<span class="material-symbols-outlined text-[16px]" data-icon="info">info</span>
|
|
<span>Geen On-call vermeld (Veilig)</span>
|
|
</div>
|
|
</div>
|
|
<div class="h-1 bg-surface-container-highest rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary w-[91%] rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-auto bg-surface-container-highest/40 p-4 rounded-lg border border-outline-variant/20">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<span class="material-symbols-outlined text-primary text-[20px]" data-icon="insights">insights</span>
|
|
<span class="font-bold text-sm">Bereik-analyse</span>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-on-surface-variant">Verwachte matches/wk</span>
|
|
<span class="font-mono text-primary">12-18</span>
|
|
</div>
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-on-surface-variant">Filter precisie</span>
|
|
<span class="font-mono text-secondary">Hoog</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="w-full bg-primary text-on-primary py-4 rounded-xl font-bold hover:brightness-110 active:scale-95 transition-all shadow-lg shadow-primary/10">
|
|
Instellingen Opslaan
|
|
</button>
|
|
</aside>
|
|
</main>
|
|
<!-- Mobile Bottom Navigation -->
|
|
<nav class="md:hidden fixed bottom-0 left-0 w-full bg-surface-container/90 backdrop-blur-lg border-t border-outline-variant/30 flex justify-around py-3 px-4 z-50">
|
|
<div class="flex flex-col items-center text-on-surface-variant">
|
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
|
<span class="text-[10px] mt-1">Overzicht</span>
|
|
</div>
|
|
<div class="flex flex-col items-center text-on-surface-variant">
|
|
<span class="material-symbols-outlined" data-icon="radar">radar</span>
|
|
<span class="text-[10px] mt-1">Radar</span>
|
|
</div>
|
|
<div class="flex flex-col items-center text-primary">
|
|
<span class="material-symbols-outlined" data-icon="person_search" style="font-variation-settings: 'FILL' 1;">person_search</span>
|
|
<span class="text-[10px] mt-1">Profiel</span>
|
|
</div>
|
|
<div class="flex flex-col items-center text-on-surface-variant">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
<span class="text-[10px] mt-1">Alerts</span>
|
|
</div>
|
|
</nav>
|
|
<!-- Floating Atmosphere Elements -->
|
|
<div class="fixed top-24 right-1/4 w-96 h-96 bg-primary/5 rounded-full blur-[100px] -z-10 pointer-events-none"></div>
|
|
<div class="fixed bottom-24 left-1/4 w-64 h-64 bg-secondary/5 rounded-full blur-[80px] -z-10 pointer-events-none"></div>
|
|
<script>
|
|
// Micro-interactions
|
|
document.querySelectorAll('input[type="radio"]').forEach(radio => {
|
|
radio.addEventListener('change', () => {
|
|
const sidebar = document.querySelector('aside.lg\\:flex');
|
|
sidebar.classList.add('animate-pulse');
|
|
setTimeout(() => sidebar.classList.remove('animate-pulse'), 400);
|
|
});
|
|
});
|
|
|
|
// Range slider value update simulation
|
|
const range = document.querySelector('input[type="range"]');
|
|
const rangeLabel = range.previousElementSibling.querySelector('span');
|
|
range.addEventListener('input', (e) => {
|
|
rangeLabel.textContent = `${e.target.value} min`;
|
|
});
|
|
</script>
|
|
</body></html> |