486 lines
28 KiB
HTML
486 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"/>
|
|
<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&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 20px rgba(0, 245, 255, 0.15);
|
|
}
|
|
.signal-glow {
|
|
box-shadow: var(--signal-glow);
|
|
}
|
|
.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;
|
|
}
|
|
.radar-pulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: .5; }
|
|
}
|
|
</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-md text-body-md antialiased">
|
|
<!-- Side Navigation Shell -->
|
|
<aside class="h-screen w-64 fixed left-0 top-0 border-r border-outline-variant dark:border-outline-variant bg-surface-container-lowest dark:bg-surface-container-lowest flex flex-col py-stack-md z-50">
|
|
<div class="px-6 mb-10">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-primary-container rounded-lg flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-on-primary-container text-xl" style="font-variation-settings: 'FILL' 1;">radar</span>
|
|
</div>
|
|
<div>
|
|
<h1 class="font-headline-md text-headline-md font-semibold text-primary dark:text-primary-fixed-dim leading-none">VacatureRadar</h1>
|
|
<p class="font-label-mono text-label-mono opacity-60 tracking-tighter">Career Intelligence</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 space-y-1 px-4 overflow-y-auto">
|
|
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant dark:text-on-surface-variant opacity-70 hover:bg-surface-container-high dark:hover:bg-surface-container-high transition-colors duration-200 rounded-lg" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<span class="font-label-mono text-label-mono">Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-primary dark:text-primary-fixed-dim font-bold border-r-2 border-primary bg-surface-container-high transition-colors duration-200" href="#">
|
|
<span class="material-symbols-outlined">radar</span>
|
|
<span class="font-label-mono text-label-mono">Nieuwe matches</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant dark:text-on-surface-variant opacity-70 hover:bg-surface-container-high dark:hover:bg-surface-container-high transition-colors duration-200 rounded-lg" 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-4 py-2 text-on-surface-variant dark:text-on-surface-variant opacity-70 hover:bg-surface-container-high dark:hover:bg-surface-container-high transition-colors duration-200 rounded-lg" 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-4 py-2 text-on-surface-variant dark:text-on-surface-variant opacity-70 hover:bg-surface-container-high dark:hover:bg-surface-container-high transition-colors duration-200 rounded-lg" href="#">
|
|
<span class="material-symbols-outlined">send</span>
|
|
<span class="font-label-mono text-label-mono">Sollicitaties</span>
|
|
</a>
|
|
<div class="pt-4 pb-2 px-4 opacity-40">
|
|
<span class="font-label-mono text-[10px] uppercase tracking-widest">Systeem</span>
|
|
</div>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant dark:text-on-surface-variant opacity-70 hover:bg-surface-container-high dark:hover:bg-surface-container-high transition-colors duration-200 rounded-lg" 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-4 py-2 text-on-surface-variant dark:text-on-surface-variant opacity-70 hover:bg-surface-container-high dark:hover:bg-surface-container-high transition-colors duration-200 rounded-lg" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<span class="font-label-mono text-label-mono">Instellingen</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto px-6 pt-6 border-t border-outline-variant">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<div class="w-10 h-10 rounded-full border border-primary-container overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="A professional headshot of a Dutch software engineer in a high-tech office environment. The person is smiling confidently, wearing a navy blue blazer over a light grey shirt. The background shows blurred server racks and large glass windows with reflections of city lights at dusk. The lighting is cold and modern, emphasizing the dark-mode career intelligence aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA_4mD2FXGRhxDiE_tRpUcyzp2OmYBj2pQrRtufRgUxTVbvAZ-bKOh9rq9WYRdwESxlkpF1cU_bZyZWAMOgMe-LTDK8FVhtJvvgrcwRsze6z-XPXiW46QXwVQfT6bxX9gr-m4LMxrbexPaNuj432WSPGHOBU0hHZdkJVyu67L1DAEviZS3JI6hyVCOarS1DJa8PO2DA-Hv-kZv1ASKf0vt14YIFiekOxmpXvTrQbSKhIeqnKMZrKlX4ZIawd5R5HOrXobI2nHnDoT1m"/>
|
|
</div>
|
|
<div class="overflow-hidden">
|
|
<p class="font-label-mono text-label-mono font-bold truncate">Mark de Vries</p>
|
|
<p class="text-[10px] opacity-60 truncate">Senior Cloud Architect</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Top Navigation Shell -->
|
|
<header class="flex justify-between items-center h-16 px-gutter ml-64 w-[calc(100%-16rem)] fixed top-0 bg-surface/80 dark:bg-surface/80 backdrop-blur-xl border-b border-outline-variant z-40">
|
|
<div class="flex items-center gap-4 flex-1">
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">arrow_back</span>
|
|
</button>
|
|
<div class="h-8 w-px bg-outline-variant mx-2"></div>
|
|
<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-lg">search</span>
|
|
<input class="w-full bg-surface-container-low border border-outline-variant rounded-full pl-10 pr-4 py-1.5 font-label-mono text-label-mono focus:border-primary-container focus:ring-0 transition-all" placeholder="Zoek binnen deze match..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex items-center gap-2 px-3 py-1 bg-secondary-container/10 border border-secondary-container/20 rounded-full">
|
|
<span class="w-2 h-2 rounded-full bg-secondary radar-pulse"></span>
|
|
<span class="font-label-mono text-label-mono text-secondary-fixed-dim">Scanner actief</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors">notifications</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors">sensors</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors">account_circle</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Area -->
|
|
<main class="ml-64 pt-16 min-h-screen">
|
|
<div class="max-w-[1400px] mx-auto p-gutter grid grid-cols-12 gap-gutter">
|
|
<!-- Left Column: Vacature Details -->
|
|
<div class="col-span-12 lg:col-span-8 space-y-stack-lg">
|
|
<!-- Job Hero Section -->
|
|
<section class="bg-surface-container-low border border-outline-variant rounded-xl overflow-hidden signal-glow">
|
|
<div class="h-48 relative">
|
|
<div class="w-full h-full bg-cover bg-center" data-alt="A futuristic, high-tech corporate office building facade at night. The architecture is sharp and angular, made of glass and dark steel, reflecting vibrant cyan and indigo neon lights. The atmosphere is professional and innovative, suggesting a premium workspace in a modern tech hub. Cinematic lighting creates a sense of scale and ambition." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCysrEF7MZVPpZNjxEeTSLOasF3ss29d9xGhszqbeTJeCNvkoqDSUNfvIfaE_84_ZlZnyTOEgAESaKVQkm3CswJ7OHUMWXNNp7MqVfgPnHi9mEzBieo2MToWNRbDwACfWwx0H35PT3p_wy1KuIu--7TFJy1Mi70Fhg9mnnmUbPCbQ3UsNJZJMWyE_pKVa5gfKgXfK017yWDFS25Gq2gKxrdBGHwRXzZZRvw7U9eMs-hJQZbC1Fj69LbkJlv25IENUaxMNJcN1s60tdY')"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-low to-transparent"></div>
|
|
<div class="absolute bottom-6 left-6 flex items-end gap-6">
|
|
<div class="w-24 h-24 bg-surface-container-lowest border border-outline-variant rounded-lg p-2 shadow-xl">
|
|
<img class="w-full h-full object-contain" data-alt="Minimalist logo of a high-tech multinational cloud company. The logo is a stylized geometric cloud icon in a deep indigo and silver color scheme. It sits centered on a clean, dark background, representing stability and technical excellence. The style is professional and corporate-minimalist." src="https://lh3.googleusercontent.com/aida-public/AB6AXuALwymBPMostfebq8YetF6uNCQq5sRo6mVzMyj1KW8wAaJM33E86kAFvXFXs1i4aoC7oC2lJ7Z1w_XF1e-s9jSN888_eoQcOGCdmY8_wRHjtQH3_OBhzZ-2ApH_VByjTaydpSFV-SY__DC_ozbh2keOlcR6jvjac7q5XB8k1ShguZmDD8Ize86uokOAL8flVCCf3qJNMSpI374deFojdRD18DswDXRoZO4mjF4wpDFIPgD6uC6oil6RkEM0t5seTAc5d0Xxqml8vupa"/>
|
|
</div>
|
|
<div class="mb-2">
|
|
<span class="font-label-mono text-label-mono text-secondary-fixed-dim mb-1 block">ASML - Veldhoven</span>
|
|
<h2 class="font-headline-lg text-headline-lg text-primary">Senior Cloud Solutions Architect</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 flex flex-wrap items-center justify-between gap-4 border-t border-outline-variant/30">
|
|
<div class="flex gap-6">
|
|
<div class="flex flex-col">
|
|
<span class="font-label-mono text-[10px] uppercase opacity-50">Salaris</span>
|
|
<span class="font-label-mono text-label-mono">€6.500 - €8.200 p.m.</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-mono text-[10px] uppercase opacity-50">Uren</span>
|
|
<span class="font-label-mono text-label-mono">36 - 40 uur</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-mono text-[10px] uppercase opacity-50">Niveau</span>
|
|
<span class="font-label-mono text-label-mono">Senior / Lead</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button class="bg-primary-container text-on-primary font-label-mono text-label-mono px-6 py-2 rounded-lg font-bold hover:brightness-110 transition-all flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-sm">open_in_new</span>
|
|
Direct solliciteren
|
|
</button>
|
|
<button class="border border-outline-variant text-on-surface hover:bg-surface-container-high transition-all p-2 rounded-lg">
|
|
<span class="material-symbols-outlined">share</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Navigation Tabs (Internal) -->
|
|
<div class="flex border-b border-outline-variant gap-8 overflow-x-auto scrollbar-hide">
|
|
<button class="pb-4 border-b-2 border-primary-container text-primary font-bold whitespace-nowrap">Vacaturetekst</button>
|
|
<button class="pb-4 text-on-surface-variant hover:text-on-surface transition-colors whitespace-nowrap">Bedrijfsprofiel</button>
|
|
<button class="pb-4 text-on-surface-variant hover:text-on-surface transition-colors whitespace-nowrap">Team & Cultuur</button>
|
|
<button class="pb-4 text-on-surface-variant hover:text-on-surface transition-colors whitespace-nowrap">Voordelen</button>
|
|
</div>
|
|
<!-- Content Body -->
|
|
<div class="space-y-stack-md text-on-surface/90 leading-relaxed max-w-3xl">
|
|
<section>
|
|
<h3 class="font-headline-md text-headline-md mb-4 text-primary">Over de functie</h3>
|
|
<p class="mb-4">
|
|
Als Senior Cloud Solutions Architect bij ASML ben je de drijvende kracht achter onze hybride cloud-strategie. Je ontwerpt en implementeert schaalbare infrastructuren die cruciaal zijn voor onze wereldwijde engineering-operaties. Je werkt op het snijvlak van innovatie en betrouwbaarheid.
|
|
</p>
|
|
<p>
|
|
Je bent verantwoordelijk voor het vertalen van complexe business requirements naar robuuste technische architecturen. Hierbij werk je nauw samen met stakeholders uit verschillende disciplines, van security experts tot data scientists.
|
|
</p>
|
|
</section>
|
|
<section class="bg-surface-container-high/30 p-6 rounded-xl border border-outline-variant/30">
|
|
<h4 class="font-label-mono text-label-mono text-primary-container mb-4 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-sm">auto_awesome</span>
|
|
AI Samenvatting
|
|
</h4>
|
|
<ul class="space-y-2 list-disc list-inside text-body-sm">
|
|
<li>Focus op Azure Cloud Native migraties en Kubernetes orkestratie.</li>
|
|
<li>Sterke nadruk op Security-by-Design en compliance binnen een high-tech omgeving.</li>
|
|
<li>Leidende rol in een team van 12 gespecialiseerde cloud engineers.</li>
|
|
<li>Hybride werken: 3 dagen op kantoor in Veldhoven, 2 dagen flexibel.</li>
|
|
</ul>
|
|
</section>
|
|
<section>
|
|
<h3 class="font-headline-md text-headline-md mb-4 text-primary">Wat wij vragen</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="p-4 bg-surface-container-lowest border border-outline-variant rounded-lg">
|
|
<span class="material-symbols-outlined text-primary-container mb-2">code</span>
|
|
<p class="text-body-sm font-bold">Techniek</p>
|
|
<p class="text-body-sm opacity-70">10+ jaar ervaring met Cloud Architectuur, Azure (Expert), Terraform, en Go.</p>
|
|
</div>
|
|
<div class="p-4 bg-surface-container-lowest border border-outline-variant rounded-lg">
|
|
<span class="material-symbols-outlined text-primary-container mb-2">groups</span>
|
|
<p class="text-body-sm font-bold">Leiderschap</p>
|
|
<p class="text-body-sm opacity-70">Ervaring met het aansturen van technische teams en strategische besluitvorming.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- Floating Action Bar (Responsive Desktop Position) -->
|
|
<div class="fixed bottom-8 left-1/2 -translate-x-1/2 lg:left-[calc(50%+128px)] bg-surface-container-highest/90 glass-panel border border-primary-container/30 px-6 py-4 rounded-full flex items-center gap-4 shadow-2xl z-40 transition-all hover:scale-[1.02]">
|
|
<span class="text-xs font-label-mono opacity-50 mr-2 uppercase tracking-tighter hidden md:block">Acties:</span>
|
|
<button class="flex flex-col items-center gap-1 group">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary-container transition-colors">thumb_up</span>
|
|
<span class="text-[10px] font-label-mono opacity-60">Interessant</span>
|
|
</button>
|
|
<button class="flex flex-col items-center gap-1 group">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary-container transition-colors">bookmark</span>
|
|
<span class="text-[10px] font-label-mono opacity-60">Bewaren</span>
|
|
</button>
|
|
<button class="flex flex-col items-center gap-1 group">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-error transition-colors">visibility_off</span>
|
|
<span class="text-[10px] font-label-mono opacity-60">Verbergen</span>
|
|
</button>
|
|
<div class="h-8 w-px bg-outline-variant mx-2"></div>
|
|
<button class="bg-secondary-container text-on-secondary-container px-4 py-2 rounded-full font-label-mono text-xs font-bold hover:brightness-110 transition-all flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-xs">check_circle</span>
|
|
Gesolliciteerd
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column: Intelligence Sidebar -->
|
|
<aside class="col-span-12 lg:col-span-4 space-y-stack-md">
|
|
<!-- Match Score Card -->
|
|
<div class="bg-surface-container-high border border-primary-container/40 rounded-xl p-6 signal-glow relative overflow-hidden">
|
|
<div class="absolute -right-10 -top-10 opacity-5">
|
|
<span class="material-symbols-outlined text-[160px]" style="font-variation-settings: 'FILL' 1;">radar</span>
|
|
</div>
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div>
|
|
<h3 class="font-metadata-caps text-metadata-caps text-on-surface-variant uppercase mb-1">Radar Match-Score</h3>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="font-headline-lg text-5xl text-primary-container font-extrabold tracking-tighter">91%</span>
|
|
<span class="font-label-mono text-label-mono text-secondary-fixed-dim">[STERKE MATCH]</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="font-metadata-caps text-[10px] opacity-50 uppercase block">Confidence</span>
|
|
<span class="font-label-mono text-label-mono text-primary">Hoog (98%)</span>
|
|
</div>
|
|
</div>
|
|
<!-- Progress Bar -->
|
|
<div class="w-full h-1 bg-surface-container-lowest rounded-full mb-8">
|
|
<div class="h-full bg-primary-container rounded-full shadow-[0_0_8px_rgba(0,245,255,0.8)]" style="width: 91%"></div>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<p class="font-label-mono text-xs opacity-70">Analyse van 142 datapunten voltooid.</p>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<div class="bg-surface-container-lowest p-3 rounded-lg border border-outline-variant">
|
|
<span class="font-metadata-caps text-[10px] opacity-50 block">STATUS</span>
|
|
<span class="font-label-mono text-xs text-secondary-fixed-dim">Aanbevolen</span>
|
|
</div>
|
|
<div class="bg-surface-container-lowest p-3 rounded-lg border border-outline-variant">
|
|
<span class="font-metadata-caps text-[10px] opacity-50 block">URGENTIE</span>
|
|
<span class="font-label-mono text-xs text-on-surface">Gemiddeld</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Breakdown: Waarom deze match? -->
|
|
<div class="bg-surface-container-low border border-outline-variant rounded-xl p-6">
|
|
<h3 class="font-headline-md text-headline-md mb-6 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary-container">psychology</span>
|
|
Waarom deze match?
|
|
</h3>
|
|
<div class="space-y-4">
|
|
<!-- Positive Signals -->
|
|
<div class="space-y-3">
|
|
<div class="flex items-center justify-between p-3 bg-secondary/5 border-l-2 border-secondary rounded-r-lg group cursor-help transition-all hover:bg-secondary/10">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-secondary text-lg">location_on</span>
|
|
<span class="text-body-sm">Locatie (Veldhoven)</span>
|
|
</div>
|
|
<span class="font-label-mono text-secondary font-bold">+18</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-3 bg-secondary/5 border-l-2 border-secondary rounded-r-lg group cursor-help transition-all hover:bg-secondary/10">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-secondary text-lg">business</span>
|
|
<span class="text-body-sm">Directe werkgever</span>
|
|
</div>
|
|
<span class="font-label-mono text-secondary font-bold">+14</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-3 bg-secondary/5 border-l-2 border-secondary rounded-r-lg group cursor-help transition-all hover:bg-secondary/10">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-secondary text-lg">history</span>
|
|
<span class="text-body-sm">Ervaring Senioriteit</span>
|
|
</div>
|
|
<span class="font-label-mono text-secondary font-bold">+12</span>
|
|
</div>
|
|
</div>
|
|
<!-- Negative Signals -->
|
|
<div class="pt-4 border-t border-outline-variant">
|
|
<div class="flex items-center justify-between p-3 bg-error/5 border-l-2 border-error rounded-r-lg group cursor-help transition-all hover:bg-error/10">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-error text-lg">error</span>
|
|
<span class="text-body-sm">VMware ervaring</span>
|
|
</div>
|
|
<span class="font-label-mono text-error font-bold">-8</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8">
|
|
<button class="w-full py-2 border border-outline-variant text-on-surface-variant font-label-mono text-xs rounded-lg hover:bg-surface-container-high transition-colors">
|
|
Volledige analyse inzien
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Market Intelligence Card -->
|
|
<div class="bg-surface-container-low border border-outline-variant rounded-xl p-6 overflow-hidden relative">
|
|
<h3 class="font-headline-md text-headline-md mb-4">Markt Intelligence</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex-1">
|
|
<span class="text-body-sm opacity-70">Populariteit vacature</span>
|
|
<div class="w-full h-1 bg-surface-container-lowest mt-1">
|
|
<div class="h-full bg-amber-500" style="width: 75%"></div>
|
|
</div>
|
|
</div>
|
|
<span class="font-label-mono text-xs text-amber-500">Hoog</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex-1">
|
|
<span class="text-body-sm opacity-70">Salaris benchmark</span>
|
|
<div class="w-full h-1 bg-surface-container-lowest mt-1">
|
|
<div class="h-full bg-secondary" style="width: 85%"></div>
|
|
</div>
|
|
</div>
|
|
<span class="font-label-mono text-xs text-secondary">+12%</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 pt-6 border-t border-outline-variant">
|
|
<p class="text-body-sm italic opacity-60">"Dit salaris ligt aanzienlijk boven het marktgemiddelde voor jouw huidige profiel."</p>
|
|
</div>
|
|
</div>
|
|
<!-- System Stats Footer -->
|
|
<div class="px-6 py-4 flex items-center justify-between opacity-40">
|
|
<span class="font-label-mono text-[10px]">VERBINDING: BEVEILIGD</span>
|
|
<span class="font-label-mono text-[10px]">AI-V: 4.2.0-STABLE</span>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
// Micro-interactions and atmospheric logic
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Logic for match score animation on load
|
|
const scoreBar = document.querySelector('.bg-primary-container');
|
|
if (scoreBar) {
|
|
scoreBar.style.width = '0%';
|
|
setTimeout(() => {
|
|
scoreBar.style.transition = 'width 1.5s cubic-bezier(0.65, 0, 0.35, 1)';
|
|
scoreBar.style.width = '91%';
|
|
}, 300);
|
|
}
|
|
|
|
// Interactive hover for match breakdown items
|
|
const breakdownItems = document.querySelectorAll('.cursor-help');
|
|
breakdownItems.forEach(item => {
|
|
item.addEventListener('mouseenter', () => {
|
|
item.style.transform = 'translateX(4px)';
|
|
});
|
|
item.addEventListener('mouseleave', () => {
|
|
item.style.transform = 'translateX(0px)';
|
|
});
|
|
});
|
|
|
|
// Smooth tab switching (Visual only)
|
|
const tabs = document.querySelectorAll('button[class*="whitespace-nowrap"]');
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
tabs.forEach(t => {
|
|
t.classList.remove('border-b-2', 'border-primary-container', 'text-primary', 'font-bold');
|
|
t.classList.add('text-on-surface-variant');
|
|
});
|
|
tab.classList.add('border-b-2', 'border-primary-container', 'text-primary', 'font-bold');
|
|
tab.classList.remove('text-on-surface-variant');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |