=docs-stitch-integration-baseline
This commit is contained in:
Jens
@@ -0,0 +1,55 @@
|
||||
# Stitch-integratieplan
|
||||
|
||||
## Doel en bronhiërarchie
|
||||
|
||||
Deze integratie vertaalt het Stitch-project **VacatureRadar Intelligence Cockpit** naar de bestaande Django-applicatie. De functionele repository blijft leidend voor routes, data, beveiliging, gebruikersscope en acties. Stitch levert de visuele taal en compositie, niet de domeinwaarheid.
|
||||
|
||||
De volledige ontvangen referentie staat in `docs/design/stitch-reference/`. Deze map en de validatiescreenshots zijn uitgesloten van de productiecontainer via `.dockerignore`; er worden geen externe Tailwind-, font-, icoon-, afbeelding- of JavaScript-CDN's aan de applicatie toegevoegd.
|
||||
|
||||
## Visuele richting
|
||||
|
||||
- Donkere cockpit als standaard: diep marineblauw, tonale panelen, fijne slate-randen, signaalcyaan voor primaire interactie, emerald voor aantoonbaar gezonde status en koraal/amber voor fouten of aandacht.
|
||||
- Een volwaardige lichte variant met dezelfde semantische tokens en contrastverhoudingen.
|
||||
- Systeemfonts als lokale, snelle fallback voor Geist/Inter; monospace systeemfonts voor metadata. Geen netwerkfonts.
|
||||
- Een vaste desktopzijbalk en compacte utilitybar, op mobiel een toegankelijke uitschuifnavigatie met overlay en focusbehoud.
|
||||
- Dichte informatieweergave met een consistente 8px-ritmiek, zonder decoratieve data die niet uit het domeinmodel komt.
|
||||
|
||||
## Schermmapping
|
||||
|
||||
| Stitch-scherm | Django-route/template | Integratie | Bewuste aanpassing |
|
||||
| --- | --- | --- | --- |
|
||||
| Dashboard Overzicht | `/`, `dashboard/today.html` | KPI-strip, sterke-matchkaarten, bronstatus en snelle route-acties | Geen verzonnen trendgrafiek, notificaties of scannerstatus; alleen actuele databasecijfers. |
|
||||
| Nieuwe Matches | `/jobs/`, `jobs/list.html` | Filterwerkbalk en responsive vacature-intelligentielijst | Geen client-side master/detail-SPA; detail blijft een eigen, deelbare route. |
|
||||
| Vacature Intelligentie Detail | `/jobs/<uuid>/`, `jobs/detail.html` | Scorehero, componentanalyse, bronhistorie en sticky acties | Geen quick/direct apply, logo of kaart zonder betrouwbare brondata. Externe vacature opent alleen expliciet in een nieuw tabblad. |
|
||||
| Sollicitatie Pipeline | `/jobs/applications/`, `applications/list.html` | Statuskolommen op breed scherm, lineaire kaarten op smal scherm | Alleen bestaande dossierstatussen en gebruikersgescopeerde data. Geen drag-and-drop zonder backendcontract. |
|
||||
| Zoekprofiel Editor | `/profiles/` en `/profiles/<id>/` | Profielsummary, gegroepeerde editor, hulp- en risicotekst | Geen live scorepreview die servervalidatie kan tegenspreken. JSON-velden blijven functioneel maar krijgen duidelijke uitleg. |
|
||||
| Bronnenbeheer & Gezondheid | `/sources/`, `sources/list.html` | KPI's, importpaneel, bronkaarten, uitklapbare runinformatie en bulkacties | Bestaande policy-, SSRF-, rate-limit- en CSRF-flows blijven intact. Geen algemene “gezond”-claim zonder readinessdata. |
|
||||
| Automatisering Centrum | `/system/`, `system/status.html` | Readiness, echte bron-/vacaturestatus en veilige beheeropdrachten | Geen gefingeerde worker uptime, latency, cronprogressie of logregels. |
|
||||
| Activiteitenlogboek | geen zelfstandige route | Recente, betrouwbare gebruikersactiviteit wordt op dashboard/dossiers getoond waar het model die al bezit | Geen samengestelde auditfeed: de huidige modellen hebben geen uniform, volledig gebruikersgescopeerd eventcontract. Dit wordt niet geforceerd. |
|
||||
| Werkgevers Intelligentie | geen zelfstandige route | Werkgever blijft context op vacature- en sollicitatiekaarten | Geen “intelligence”-pagina zolang contact-, reputatie- en aggregatievelden niet betrouwbaar bestaan; dit voorkomt fictieve inzichten. |
|
||||
|
||||
## Componenten en templatestructuur
|
||||
|
||||
- `base.html`: skiplink, merkblok, utilitybar, desktop/mobile navigatie, gebruikerspaneel, meldingen en themawisselaar.
|
||||
- `templates/components/`: herbruikbare SVG-iconen, paginakop, lege toestand, statuschip en vacaturekaart waar template-includes de duplicatie daadwerkelijk verlagen.
|
||||
- `static/css/app.css`: uitsluitend semantische tokens en componentklassen; dark/light via `data-theme`, met systeemvoorkeur als fallback.
|
||||
- `static/js/app.js`: alleen navigatie, details-disclosures en themaopslag. Alle kernacties blijven normale links of formulieren.
|
||||
|
||||
## Functionele en veiligheidsgrenzen
|
||||
|
||||
- Alle mutaties blijven POST + CSRF en gebruiken de bestaande services/views.
|
||||
- Sanitized vacature-HTML blijft het enige HTML-fragment dat met `safe` wordt gerenderd.
|
||||
- Externe URL's behouden `noopener noreferrer nofollow` en worden nooit automatisch geopend.
|
||||
- Bronimport, retry en bulkreview veranderen inhoudelijk niet.
|
||||
- Er worden geen secrets, persoonsgegevens, nepstatistieken, externe assets of nieuwe productieafhankelijkheden toegevoegd.
|
||||
|
||||
## Responsive en toegankelijkheid
|
||||
|
||||
- Validatiebreedtes: 1440×900, 1280×800, 1024×768, 768×1024, 390×844 en 360×800.
|
||||
- Eén `h1` per pagina, semantische landmarks, zichtbare focus, toetsenbordbediening, 44px touchdoelen waar praktisch, tekstlabels naast statuskleur en een robuuste skiplink.
|
||||
- Tabellen schakelen op smalle schermen naar kaartachtige rijen of blijven gecontroleerd horizontaal scrolbaar wanneer kolomvergelijking essentieel is.
|
||||
- Animatie is subtiel en volledig uitgeschakeld bij `prefers-reduced-motion`.
|
||||
|
||||
## Verificatie
|
||||
|
||||
Na elke implementatiefase worden formattering, Ruff en relevante tests uitgevoerd. De afronding vereist `scripts/codex_verify.sh`, responsieve browserflows, console-/netwerkcontrole en screenshots per hoofdroute in beide thema's waar dat het ontwerp valideert.
|
||||
@@ -0,0 +1,370 @@
|
||||
<!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 | Activiteit</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Geist:wght@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>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.signal-glow {
|
||||
box-shadow: 0 0 15px rgba(0, 245, 255, 0.1);
|
||||
}
|
||||
.glass-panel {
|
||||
backdrop-filter: blur(12px);
|
||||
background: rgba(23, 31, 51, 0.7);
|
||||
}
|
||||
@keyframes pulse-signal {
|
||||
0% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(1.2); }
|
||||
100% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
.animate-pulse-signal {
|
||||
animation: pulse-signal 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-secondary-fixed-variant": "#005236",
|
||||
"secondary-fixed": "#6ffbbe",
|
||||
"on-error-container": "#ffdad6",
|
||||
"surface": "#0b1326",
|
||||
"surface-dim": "#0b1326",
|
||||
"on-primary": "#003739",
|
||||
"on-surface": "#dae2fd",
|
||||
"inverse-surface": "#dae2fd",
|
||||
"background": "#0b1326",
|
||||
"tertiary-fixed": "#e1e0ff",
|
||||
"surface-container": "#171f33",
|
||||
"primary-container": "#00f5ff",
|
||||
"surface-container-lowest": "#060e20",
|
||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
||||
"on-tertiary": "#1000a9",
|
||||
"on-secondary": "#003824",
|
||||
"surface-container-highest": "#2d3449",
|
||||
"on-primary-fixed-variant": "#004f53",
|
||||
"on-secondary-container": "#00311f",
|
||||
"on-error": "#690005",
|
||||
"tertiary": "#fcf8ff",
|
||||
"on-secondary-fixed": "#002113",
|
||||
"on-primary-fixed": "#002021",
|
||||
"surface-variant": "#2d3449",
|
||||
"inverse-primary": "#00696e",
|
||||
"surface-bright": "#31394d",
|
||||
"secondary": "#4edea3",
|
||||
"primary-fixed": "#63f7ff",
|
||||
"outline": "#849495",
|
||||
"surface-container-high": "#222a3d",
|
||||
"primary": "#e9feff",
|
||||
"secondary-fixed-dim": "#4edea3",
|
||||
"on-background": "#dae2fd",
|
||||
"on-surface-variant": "#b9caca",
|
||||
"error": "#ffb4ab",
|
||||
"secondary-container": "#00a572",
|
||||
"tertiary-fixed-dim": "#c0c1ff",
|
||||
"on-tertiary-container": "#4c4ed9",
|
||||
"surface-container-low": "#131b2e",
|
||||
"outline-variant": "#3a494a",
|
||||
"inverse-on-surface": "#283044",
|
||||
"on-primary-container": "#006c71",
|
||||
"primary-fixed-dim": "#00dce5",
|
||||
"error-container": "#93000a",
|
||||
"tertiary-container": "#dbdaff",
|
||||
"surface-tint": "#00dce5",
|
||||
"on-tertiary-fixed": "#07006c"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"container-max": "1280px",
|
||||
"gutter": "24px",
|
||||
"stack-sm": "8px",
|
||||
"margin-mobile": "16px",
|
||||
"stack-lg": "32px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Geist"],
|
||||
"body-md": ["Inter"],
|
||||
"metadata-caps": ["JetBrains Mono"],
|
||||
"label-mono": ["JetBrains Mono"],
|
||||
"headline-md": ["Geist"],
|
||||
"body-sm": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
||||
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"metadata-caps": ["12px", {"lineHeight": "1.0", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"label-mono": ["13px", {"lineHeight": "1.0", "fontWeight": "400"}],
|
||||
"headline-md": ["20px", {"lineHeight": "1.4", "fontWeight": "500"}],
|
||||
"body-sm": ["14px", {"lineHeight": "1.5", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body-md overflow-x-hidden">
|
||||
<!-- Sidebar Navigation -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-surface-container border-r border-outline-variant/20 flex flex-col h-full py-stack-lg gap-stack-md z-40 hidden md:flex">
|
||||
<div class="px-gutter mb-stack-lg">
|
||||
<h1 class="font-headline-md text-headline-md text-primary font-bold tracking-tight">VacatureRadar</h1>
|
||||
<p class="font-label-mono text-label-mono text-on-surface-variant/60 uppercase tracking-widest mt-1">Intelligent Discovery</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center px-gutter py-3 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all group" href="#">
|
||||
<span class="material-symbols-outlined mr-3">dashboard</span>
|
||||
<span class="font-label-mono text-label-mono">Overview</span>
|
||||
</a>
|
||||
<a class="flex items-center px-gutter py-3 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all group" href="#">
|
||||
<span class="material-symbols-outlined mr-3">radar</span>
|
||||
<span class="font-label-mono text-label-mono">New matches</span>
|
||||
</a>
|
||||
<a class="flex items-center px-gutter py-3 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all group" href="#">
|
||||
<span class="material-symbols-outlined mr-3">work</span>
|
||||
<span class="font-label-mono text-label-mono">All vacancies</span>
|
||||
</a>
|
||||
<a class="flex items-center px-gutter py-3 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all group" href="#">
|
||||
<span class="material-symbols-outlined mr-3">bookmark</span>
|
||||
<span class="font-label-mono text-label-mono">Saved</span>
|
||||
</a>
|
||||
<a class="flex items-center px-gutter py-3 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all group" href="#">
|
||||
<span class="material-symbols-outlined mr-3">assignment</span>
|
||||
<span class="font-label-mono text-label-mono">Applications</span>
|
||||
</a>
|
||||
<a class="flex items-center px-gutter py-3 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all group" href="#">
|
||||
<span class="material-symbols-outlined mr-3">domain</span>
|
||||
<span class="font-label-mono text-label-mono">Employers</span>
|
||||
</a>
|
||||
<a class="flex items-center px-gutter py-3 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all group" href="#">
|
||||
<span class="material-symbols-outlined mr-3">hub</span>
|
||||
<span class="font-label-mono text-label-mono">Sources</span>
|
||||
</a>
|
||||
<a class="flex items-center px-gutter py-3 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all group" href="#">
|
||||
<span class="material-symbols-outlined mr-3">precision_manufacturing</span>
|
||||
<span class="font-label-mono text-label-mono">Automation</span>
|
||||
</a>
|
||||
<a class="flex items-center px-gutter py-3 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all group" href="#">
|
||||
<span class="material-symbols-outlined mr-3">person_search</span>
|
||||
<span class="font-label-mono text-label-mono">Search profile</span>
|
||||
</a>
|
||||
<!-- Active State -->
|
||||
<a class="flex items-center px-gutter py-3 text-primary bg-primary-container/10 border-r-2 border-primary-container transition-all group" href="#">
|
||||
<span class="material-symbols-outlined mr-3">history</span>
|
||||
<span class="font-label-mono text-label-mono">Activity</span>
|
||||
</a>
|
||||
<a class="flex items-center px-gutter py-3 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all group" href="#">
|
||||
<span class="material-symbols-outlined mr-3">settings</span>
|
||||
<span class="font-label-mono text-label-mono">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-gutter mt-auto pt-stack-lg">
|
||||
<button class="w-full py-3 bg-primary-container text-on-primary-container font-headline-md text-[14px] rounded-lg active:scale-95 transition-transform flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">add</span>
|
||||
<span>New Search</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="md:ml-64 min-h-screen relative">
|
||||
<!-- Top App Bar -->
|
||||
<header class="fixed top-0 right-0 left-0 md:left-64 z-30 bg-surface/80 backdrop-blur-xl border-b border-outline-variant/30 shadow-sm flex justify-between items-center px-gutter py-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="md:hidden material-symbols-outlined text-primary cursor-pointer">menu</span>
|
||||
<h2 class="font-headline-md text-headline-md text-primary font-bold">Activiteit</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-stack-md">
|
||||
<div class="hidden lg:flex items-center bg-surface-container px-3 py-1.5 rounded border border-outline-variant/20 gap-2">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-[20px]">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-sm w-48 text-on-surface placeholder:text-on-surface-variant/40 p-0" placeholder="Zoek in logs..." type="text"/>
|
||||
</div>
|
||||
<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">account_circle</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Page Content -->
|
||||
<div class="pt-24 px-gutter pb-stack-lg max-w-container-max mx-auto">
|
||||
<!-- Filter Bar -->
|
||||
<section class="mb-stack-lg flex flex-wrap items-center gap-stack-md">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-label-mono text-metadata-caps text-on-surface-variant/60 uppercase">Filter Op</span>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button class="px-4 py-2 bg-surface-container-high border border-outline-variant/30 rounded text-sm text-on-surface hover:border-primary-container transition-colors flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">work</span>
|
||||
Vacature
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-surface-container-high border border-outline-variant/30 rounded text-sm text-on-surface hover:border-primary-container transition-colors flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">domain</span>
|
||||
Werkgever
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-surface-container-high border border-outline-variant/30 rounded text-sm text-on-surface hover:border-primary-container transition-colors flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">category</span>
|
||||
Type Actie
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-primary-container/10 border border-primary-container/40 rounded text-sm text-primary flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">filter_alt</span>
|
||||
Alle Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-auto flex items-center gap-2 self-end">
|
||||
<span class="w-2 h-2 rounded-full bg-secondary animate-pulse-signal"></span>
|
||||
<span class="font-label-mono text-label-mono text-secondary">Live Radar Monitoring</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Activity Timeline -->
|
||||
<div class="relative">
|
||||
<!-- Timeline Line -->
|
||||
<div class="absolute left-[23px] top-4 bottom-4 w-px bg-outline-variant/20"></div>
|
||||
<div class="space-y-stack-lg relative">
|
||||
<!-- Activity Item 1: Discovery -->
|
||||
<div class="flex gap-stack-md group">
|
||||
<div class="relative z-10 flex items-center justify-center w-12 h-12 rounded bg-surface-container border border-outline-variant/40 text-primary-container signal-glow">
|
||||
<span class="material-symbols-outlined">radar</span>
|
||||
</div>
|
||||
<div class="flex-1 bg-surface-container-low border border-outline-variant/20 p-stack-md rounded-xl hover:border-primary-container/40 transition-all">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-headline-md text-[18px] text-primary">18 vacatures ontdekt</h3>
|
||||
<span class="font-label-mono text-metadata-caps text-on-surface-variant/40">10:42 • VANDAAG</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-sm mb-4">De radar heeft nieuwe matches geïdentificeerd op basis van je "Senior Developer" profiel bij diverse bronnen (LinkedIn, Indeed, StackOverflow).</p>
|
||||
<!-- Explainability Tooltip/Card -->
|
||||
<div class="bg-surface-container-highest/30 rounded border-l-2 border-primary p-3">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="material-symbols-outlined text-[16px] text-primary">info</span>
|
||||
<span class="font-label-mono text-metadata-caps text-primary uppercase">Besluitvorming</span>
|
||||
</div>
|
||||
<p class="text-[13px] text-on-surface/80 leading-relaxed">Geïndexeerd vanuit 12 bronnen. 85% overlap met je huidige tech-stack en salarisindicatie. Verwerkt in 1.2ms.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Activity Item 2: Exclusion -->
|
||||
<div class="flex gap-stack-md group">
|
||||
<div class="relative z-10 flex items-center justify-center w-12 h-12 rounded bg-surface-container border border-outline-variant/40 text-error/80">
|
||||
<span class="material-symbols-outlined">location_off</span>
|
||||
</div>
|
||||
<div class="flex-1 bg-surface-container-low border border-outline-variant/20 p-stack-md rounded-xl hover:border-error/30 transition-all">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-headline-md text-[18px] text-on-surface">7 uitgesloten wegens reistijd</h3>
|
||||
<span class="font-label-mono text-metadata-caps text-on-surface-variant/40">09:15 • VANDAAG</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-sm mb-4">Potentiële matches in Utrecht en Amersfoort zijn automatisch gefilterd om je focus te behouden.</p>
|
||||
<div class="bg-surface-container-highest/30 rounded border-l-2 border-error p-3">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="material-symbols-outlined text-[16px] text-error">gavel</span>
|
||||
<span class="font-label-mono text-metadata-caps text-error uppercase">Logica</span>
|
||||
</div>
|
||||
<p class="text-[13px] text-on-surface/80 leading-relaxed">Je profiel staat ingesteld op max. 45 min reistijd. De geschatte reistijd voor deze posities is 65+ min (OV) of 55+ min (auto in de spits).</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Activity Item 3: Deduplication -->
|
||||
<div class="flex gap-stack-md group">
|
||||
<div class="relative z-10 flex items-center justify-center w-12 h-12 rounded bg-surface-container border border-outline-variant/40 text-secondary">
|
||||
<span class="material-symbols-outlined">content_copy</span>
|
||||
</div>
|
||||
<div class="flex-1 bg-surface-container-low border border-outline-variant/20 p-stack-md rounded-xl hover:border-secondary/30 transition-all">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-headline-md text-[18px] text-on-surface">3 recruiter-kopieën samengevoegd</h3>
|
||||
<span class="font-label-mono text-metadata-caps text-on-surface-variant/40">GISTEREN • 18:30</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-sm mb-4">De vacature voor "Lead Engineer" bij Booking.com werd door 3 bureaus geplaatst. We hebben deze geconsolideerd naar de bron.</p>
|
||||
<div class="bg-surface-container-highest/30 rounded border-l-2 border-secondary p-3">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="material-symbols-outlined text-[16px] text-secondary">analytics</span>
|
||||
<span class="font-label-mono text-metadata-caps text-secondary uppercase">Analyse</span>
|
||||
</div>
|
||||
<p class="text-[13px] text-on-surface/80 leading-relaxed">Match op tekstuele overlap (98.4%) en identieke functiebeschrijving. Alleen de meest recente posting is behouden in je overzicht.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Activity Item 4: Modification -->
|
||||
<div class="flex gap-stack-md group">
|
||||
<div class="relative z-10 flex items-center justify-center w-12 h-12 rounded bg-surface-container border border-outline-variant/40 text-tertiary-container">
|
||||
<span class="material-symbols-outlined">edit_calendar</span>
|
||||
</div>
|
||||
<div class="flex-1 bg-surface-container-low border border-outline-variant/20 p-stack-md rounded-xl hover:border-tertiary-container/30 transition-all">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-headline-md text-[18px] text-on-surface">Deadline gewijzigd</h3>
|
||||
<span class="font-label-mono text-metadata-caps text-on-surface-variant/40">GISTEREN • 14:05</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-sm mb-4">De sollicitatietermijn voor "Fullstack Architect" bij Adyen is verlengd met 2 weken.</p>
|
||||
<div class="bg-surface-container-highest/30 rounded border-l-2 border-tertiary-container p-3">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="material-symbols-outlined text-[16px] text-tertiary-container">update</span>
|
||||
<span class="font-label-mono text-metadata-caps text-tertiary-container uppercase">Tracking</span>
|
||||
</div>
|
||||
<p class="text-[13px] text-on-surface/80 leading-relaxed">Gedetecteerd via wekelijkse herscan van de directe carrièrepagina. Je hebt nu tot 30 september om te reageren.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dashboard Stats Sidebar Content (Bento Style) -->
|
||||
<section class="mt-stack-lg grid grid-cols-1 md:grid-cols-3 gap-stack-md">
|
||||
<div class="bg-surface-container-high p-stack-md rounded-xl border border-outline-variant/20">
|
||||
<span class="font-label-mono text-metadata-caps text-on-surface-variant/60 uppercase block mb-2">Efficiëntie</span>
|
||||
<div class="text-3xl font-headline-lg text-primary">84%</div>
|
||||
<p class="text-xs text-on-surface-variant mt-1 italic">Van ruwe data gefilterd vóór jouw review.</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-high p-stack-md rounded-xl border border-outline-variant/20">
|
||||
<span class="font-label-mono text-metadata-caps text-on-surface-variant/60 uppercase block mb-2">Gescande Bronnen</span>
|
||||
<div class="text-3xl font-headline-lg text-secondary">1.2k+</div>
|
||||
<p class="text-xs text-on-surface-variant mt-1 italic">Continu monitoring van globale portalen.</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-high p-stack-md rounded-xl border border-outline-variant/20">
|
||||
<span class="font-label-mono text-metadata-caps text-on-surface-variant/60 uppercase block mb-2">Bespaarde Tijd</span>
|
||||
<div class="text-3xl font-headline-lg text-on-surface">12u</div>
|
||||
<p class="text-xs text-on-surface-variant mt-1 italic">Handmatig zoekwerk voorkomen deze week.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Background Shader Atmosphere -->
|
||||
<div class="fixed inset-0 pointer-events-none opacity-20 z-0">
|
||||
|
||||
</div>
|
||||
<!-- Mobile Bottom Navigation -->
|
||||
<nav class="md:hidden fixed bottom-0 left-0 w-full glass-panel border-t border-outline-variant/20 flex justify-around py-3 z-50">
|
||||
<div class="flex flex-col items-center gap-1 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">radar</span>
|
||||
<span class="text-[10px] font-label-mono">Radar</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">work</span>
|
||||
<span class="text-[10px] font-label-mono">Matches</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 text-primary">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">history</span>
|
||||
<span class="text-[10px] font-label-mono font-bold">Activiteit</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">person_search</span>
|
||||
<span class="text-[10px] font-label-mono">Profiel</span>
|
||||
</div>
|
||||
</nav>
|
||||
<script>
|
||||
// Simple Micro-interactions
|
||||
document.querySelectorAll('.group').forEach(item => {
|
||||
item.addEventListener('mouseenter', () => {
|
||||
item.querySelector('.signal-glow')?.classList.add('scale-105');
|
||||
});
|
||||
item.addEventListener('mouseleave', () => {
|
||||
item.querySelector('.signal-glow')?.classList.remove('scale-105');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 361 KiB |
@@ -0,0 +1,490 @@
|
||||
<!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 | Automation Center</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<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=Inter:wght@400;500&family=Geist:wght@500;600&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"/>
|
||||
<!-- Tailwind Configuration -->
|
||||
<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>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.signal-glow {
|
||||
box-shadow: 0 0 15px rgba(0, 245, 255, 0.1);
|
||||
}
|
||||
.pipeline-line {
|
||||
background: linear-gradient(90deg, rgba(0,245,255,0.2) 0%, rgba(0,245,255,0) 100%);
|
||||
}
|
||||
.glass-panel {
|
||||
backdrop-filter: blur(12px);
|
||||
background: rgba(19, 27, 46, 0.7);
|
||||
}
|
||||
@keyframes pulse-cyan {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.1); }
|
||||
}
|
||||
.animate-pulse-cyan {
|
||||
animation: pulse-cyan 2s infinite ease-in-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md selection:bg-primary-container selection:text-on-primary">
|
||||
<!-- Sidebar 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 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 opacity-50 uppercase tracking-widest">Career Intelligence</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center px-6 py-3 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3">dashboard</span>
|
||||
<span class="font-body-sm text-body-sm">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center px-6 py-3 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3">radar</span>
|
||||
<span class="font-body-sm text-body-sm">Nieuwe matches</span>
|
||||
</a>
|
||||
<a class="flex items-center px-6 py-3 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3">view_list</span>
|
||||
<span class="font-body-sm text-body-sm">Alle vacatures</span>
|
||||
</a>
|
||||
<!-- Active Item -->
|
||||
<a class="flex items-center px-6 py-3 text-primary font-bold border-r-2 border-primary bg-surface-container-high transition-colors duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" style="font-variation-settings: 'FILL' 1;">robot_2</span>
|
||||
<span class="font-body-sm text-body-sm">Automatisering</span>
|
||||
</a>
|
||||
<a class="flex items-center px-6 py-3 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3">psychology</span>
|
||||
<span class="font-body-sm text-body-sm">Zoekprofiel</span>
|
||||
</a>
|
||||
<a class="flex items-center px-6 py-3 text-on-surface-variant opacity-70 hover:bg-surface-container-high transition-colors duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3">settings</span>
|
||||
<span class="font-body-sm text-body-sm">Instellingen</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-6 py-4 mt-auto border-t border-outline-variant/30">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center border border-outline-variant">
|
||||
<span class="material-symbols-outlined text-sm">account_circle</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-body-sm text-body-sm font-medium">Marc Janssen</p>
|
||||
<p class="text-[10px] font-label-mono text-on-surface-variant">PREMIUM ACCOUNT</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="fixed top-0 right-0 h-16 flex justify-between items-center px-gutter bg-surface/80 backdrop-blur-xl border-b border-outline-variant ml-64 w-[calc(100%-16rem)] 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">search</span>
|
||||
<input class="w-full bg-surface-container border-outline-variant focus:border-primary-container rounded-lg py-2 pl-10 text-body-sm text-on-surface" placeholder="Zoek in logs of bronnen..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<button class="relative text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
<span class="absolute -top-1 -right-1 w-2 h-2 bg-primary-container rounded-full"></span>
|
||||
</button>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">sensors</span>
|
||||
</button>
|
||||
<div class="w-px h-6 bg-outline-variant"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-label-mono text-label-mono text-secondary">SYSTEM LIVE</span>
|
||||
<div class="w-2 h-2 bg-secondary rounded-full animate-pulse-cyan"></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 pt-24 px-gutter pb-stack-lg min-h-screen">
|
||||
<!-- Dashboard Header -->
|
||||
<div class="flex justify-between items-end mb-stack-lg">
|
||||
<div>
|
||||
<h2 class="font-headline-lg text-headline-lg text-primary mb-1">Automation Center</h2>
|
||||
<p class="text-on-surface-variant font-body-sm">Real-time status van uw AI-gedreven job radar.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="bg-surface-container-high border border-outline-variant px-4 py-2 rounded text-body-sm flex items-center gap-2 hover:bg-surface-bright transition-colors">
|
||||
<span class="material-symbols-outlined text-sm">refresh</span> Logboek exporteren
|
||||
</button>
|
||||
<button class="bg-primary-container text-on-primary-container px-6 py-2 rounded font-medium text-body-sm flex items-center gap-2 signal-glow transition-transform active:scale-95">
|
||||
<span class="material-symbols-outlined text-sm">play_arrow</span> Forceer Scan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Global Status Bar -->
|
||||
<div class="mb-stack-lg bg-surface-container-low border border-outline-variant p-6 rounded-xl flex items-center justify-between">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-label-mono text-label-mono text-on-surface-variant mb-1 uppercase opacity-60">Status</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 bg-secondary rounded-full"></span>
|
||||
<span class="font-headline-md text-headline-md text-secondary">Systeem operationeel</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-10 w-px bg-outline-variant"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-label-mono text-label-mono text-on-surface-variant mb-1 uppercase opacity-60">Uptime</span>
|
||||
<span class="font-headline-md text-headline-md text-primary">99.98%</span>
|
||||
</div>
|
||||
<div class="h-10 w-px bg-outline-variant"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-label-mono text-label-mono text-on-surface-variant mb-1 uppercase opacity-60">Latentie</span>
|
||||
<span class="font-headline-md text-headline-md text-primary">124ms</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-48 h-12">
|
||||
<!-- Abstract signal visual -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Visual Pipeline representation -->
|
||||
<section class="mb-stack-lg">
|
||||
<h3 class="font-label-mono text-label-mono text-on-surface-variant uppercase mb-4 tracking-widest flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-sm">route</span> Verwerkingspipeline
|
||||
</h3>
|
||||
<div class="grid grid-cols-8 gap-1 bg-surface-container-lowest p-2 border border-outline-variant rounded-xl overflow-hidden">
|
||||
<!-- Step 1: Ontdekken -->
|
||||
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-primary-container transition-all hover:bg-surface-bright">
|
||||
<span class="material-symbols-outlined text-primary-container mb-2 block" style="font-variation-settings: 'FILL' 1;">explore</span>
|
||||
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Ontdekken</span>
|
||||
</div>
|
||||
<!-- Step 2: Ophalen -->
|
||||
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-primary-container transition-all hover:bg-surface-bright">
|
||||
<span class="material-symbols-outlined text-primary-container mb-2 block" style="font-variation-settings: 'FILL' 1;">cloud_download</span>
|
||||
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Ophalen</span>
|
||||
</div>
|
||||
<!-- Step 3: Extraheren -->
|
||||
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-primary-container transition-all hover:bg-surface-bright">
|
||||
<span class="material-symbols-outlined text-primary-container mb-2 block" style="font-variation-settings: 'FILL' 1;">data_exploration</span>
|
||||
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Extraheren</span>
|
||||
</div>
|
||||
<!-- Step 4: Normaliseren -->
|
||||
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-primary-container transition-all hover:bg-surface-bright">
|
||||
<span class="material-symbols-outlined text-primary-container mb-2 block" style="font-variation-settings: 'FILL' 1;">schema</span>
|
||||
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Normaliseren</span>
|
||||
</div>
|
||||
<!-- Step 5: Dedupliceren -->
|
||||
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-primary-container transition-all hover:bg-surface-bright">
|
||||
<span class="material-symbols-outlined text-primary-container mb-2 block" style="font-variation-settings: 'FILL' 1;">difference</span>
|
||||
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Dedupliceren</span>
|
||||
</div>
|
||||
<!-- Step 6: Filteren -->
|
||||
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-secondary transition-all hover:bg-surface-bright">
|
||||
<span class="material-symbols-outlined text-secondary mb-2 block" style="font-variation-settings: 'FILL' 1;">filter_alt</span>
|
||||
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Filteren</span>
|
||||
</div>
|
||||
<!-- Step 7: Analyseren -->
|
||||
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-secondary transition-all hover:bg-surface-bright">
|
||||
<span class="material-symbols-outlined text-secondary mb-2 block" style="font-variation-settings: 'FILL' 1;">psychology_alt</span>
|
||||
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Analyseren</span>
|
||||
</div>
|
||||
<!-- Step 8: Rangschikken -->
|
||||
<div class="relative group bg-surface-container-high p-4 rounded text-center border-b-2 border-primary transition-all hover:bg-surface-bright">
|
||||
<span class="material-symbols-outlined text-primary mb-2 block" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
<span class="font-label-mono text-[11px] uppercase tracking-tighter">Rangschikken</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Stats Bento Grid -->
|
||||
<div class="grid grid-cols-4 gap-gutter mb-stack-lg">
|
||||
<div class="bg-surface-container-low border border-outline-variant p-6 rounded-xl">
|
||||
<span class="material-symbols-outlined text-primary opacity-50 mb-4">language</span>
|
||||
<h4 class="font-headline-lg text-headline-lg">156</h4>
|
||||
<p class="text-on-surface-variant font-body-sm">Bronnen gescand (24u)</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-low border border-outline-variant p-6 rounded-xl">
|
||||
<span class="material-symbols-outlined text-primary opacity-50 mb-4">search</span>
|
||||
<h4 class="font-headline-lg text-headline-lg">412</h4>
|
||||
<p class="text-on-surface-variant font-body-sm">Vacatures gevonden</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-low border border-outline-variant p-6 rounded-xl">
|
||||
<span class="material-symbols-outlined text-error opacity-50 mb-4">filter_list_off</span>
|
||||
<h4 class="font-headline-lg text-headline-lg">389</h4>
|
||||
<p class="text-on-surface-variant font-body-sm">Gefilterd (geen match)</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-low border border-outline-variant p-6 rounded-xl relative overflow-hidden group">
|
||||
<div class="absolute inset-0 bg-primary-container/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<span class="material-symbols-outlined text-secondary mb-4">verified</span>
|
||||
<h4 class="font-headline-lg text-headline-lg text-secondary">23</h4>
|
||||
<p class="text-on-surface-variant font-body-sm">Ter review beschikbaar</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Content Area: Health & Logs -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-gutter">
|
||||
<!-- Source Health Table -->
|
||||
<div class="lg:col-span-2 bg-surface-container-lowest border border-outline-variant rounded-xl flex flex-col">
|
||||
<div class="p-6 border-b border-outline-variant flex justify-between items-center">
|
||||
<h3 class="font-headline-md text-headline-md">Bron Gezondheid</h3>
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-1 bg-secondary/10 text-secondary text-[10px] font-label-mono rounded">152 OK</span>
|
||||
<span class="px-2 py-1 bg-error/10 text-error text-[10px] font-label-mono rounded">4 FAILED</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left font-body-sm">
|
||||
<thead class="bg-surface-container text-on-surface-variant uppercase text-[11px] font-label-mono">
|
||||
<tr>
|
||||
<th class="px-6 py-3">Bron Naam</th>
|
||||
<th class="px-6 py-3">Status</th>
|
||||
<th class="px-6 py-3">Laatste Scan</th>
|
||||
<th class="px-6 py-3 text-right">Succesrate</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant/30">
|
||||
<tr class="hover:bg-surface-container-high transition-colors">
|
||||
<td class="px-6 py-4 flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-lg">link</span>
|
||||
LinkedIn Alerts
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="flex items-center gap-2 text-secondary">
|
||||
<span class="w-1.5 h-1.5 bg-secondary rounded-full"></span> Healthy
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-on-surface-variant font-label-mono">14:23:05</td>
|
||||
<td class="px-6 py-4 text-right">99.2%</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-high transition-colors">
|
||||
<td class="px-6 py-4 flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-lg">rss_feed</span>
|
||||
VDAB RSS
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="flex items-center gap-2 text-secondary">
|
||||
<span class="w-1.5 h-1.5 bg-secondary rounded-full"></span> Healthy
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-on-surface-variant font-label-mono">14:15:12</td>
|
||||
<td class="px-6 py-4 text-right">100%</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-high transition-colors">
|
||||
<td class="px-6 py-4 flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-lg">apartment</span>
|
||||
Ziekenhuis Hasselt Carrière
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="flex items-center gap-2 text-error">
|
||||
<span class="w-1.5 h-1.5 bg-error rounded-full"></span> Failed
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-on-surface-variant font-label-mono">13:58:44</td>
|
||||
<td class="px-6 py-4 text-right text-error">0.0%</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-high transition-colors">
|
||||
<td class="px-6 py-4 flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-lg">public</span>
|
||||
Indeed Search API
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="flex items-center gap-2 text-secondary">
|
||||
<span class="w-1.5 h-1.5 bg-secondary rounded-full"></span> Healthy
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-on-surface-variant font-label-mono">14:02:11</td>
|
||||
<td class="px-6 py-4 text-right">98.5%</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-high transition-colors">
|
||||
<td class="px-6 py-4 flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-lg">link</span>
|
||||
Monsterboard Traineeships
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="flex items-center gap-2 text-secondary">
|
||||
<span class="w-1.5 h-1.5 bg-secondary rounded-full"></span> Healthy
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-on-surface-variant font-label-mono">13:45:00</td>
|
||||
<td class="px-6 py-4 text-right">100%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="p-4 border-t border-outline-variant text-center">
|
||||
<button class="text-primary text-body-sm hover:underline">Alle 156 bronnen weergeven</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Technical Logs (Progressive Disclosure) -->
|
||||
<div class="bg-surface-container-low border border-outline-variant rounded-xl flex flex-col h-full overflow-hidden">
|
||||
<div class="p-6 border-b border-outline-variant bg-surface-container-lowest">
|
||||
<h3 class="font-headline-md text-headline-md flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary-container">terminal</span> Technische Logs
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex-1 p-4 font-label-mono text-[12px] space-y-4 overflow-y-auto max-h-[500px]">
|
||||
<div class="log-entry border-l-2 border-secondary pl-3">
|
||||
<p class="text-on-surface-variant">[14:30:12] <span class="text-secondary">INFO</span> Pipeline gestart voor 'LinkedIn'</p>
|
||||
</div>
|
||||
<div class="log-entry border-l-2 border-primary-container pl-3">
|
||||
<p class="text-on-surface-variant">[14:30:15] <span class="text-primary-container">DATA</span> 12 nieuwe URL's ontdekt</p>
|
||||
</div>
|
||||
<div class="log-entry border-l-2 border-secondary pl-3">
|
||||
<p class="text-on-surface-variant">[14:30:22] <span class="text-secondary">INFO</span> Extractie voltooid. 11/12 entiteiten herkend.</p>
|
||||
</div>
|
||||
<details class="group">
|
||||
<summary class="cursor-pointer list-none flex items-center gap-2 py-2 text-primary hover:text-primary-container">
|
||||
<span class="material-symbols-outlined text-sm group-open:rotate-180 transition-transform">expand_more</span>
|
||||
Toon normalisatie details (3)
|
||||
</summary>
|
||||
<div class="mt-2 space-y-2 pl-4 text-[11px] opacity-70 border-l border-outline-variant">
|
||||
<p>[14:30:23] Mapped 'Senior Dev' to internal ID: JOB_042</p>
|
||||
<p>[14:30:24] Location 'Brussel' matched to GEOS_BE_BRU</p>
|
||||
<p>[14:30:25] Salary extracted: 4500-5200 EUR</p>
|
||||
</div>
|
||||
</details>
|
||||
<div class="log-entry border-l-2 border-error pl-3">
|
||||
<p class="text-on-surface-variant">[14:28:01] <span class="text-error">ERROR</span> Verbinding verbroken: 'Hasselt API'</p>
|
||||
<p class="text-[10px] text-error opacity-70">Reason: Timeout (5000ms)</p>
|
||||
</div>
|
||||
<div class="log-entry border-l-2 border-secondary pl-3">
|
||||
<p class="text-on-surface-variant">[14:25:55] <span class="text-secondary">INFO</span> Deduplicatie voltooid. 4 dubbelingen verwijderd.</p>
|
||||
</div>
|
||||
<div class="log-entry border-l-2 border-primary pl-3">
|
||||
<p class="text-on-surface-variant">[14:20:00] <span class="text-primary">SYSTEM</span> Dagelijkse backup succesvol afgerond.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-container-lowest border-t border-outline-variant flex gap-2">
|
||||
<button class="flex-1 py-1.5 bg-surface-container-high rounded text-[11px] font-label-mono hover:bg-surface-bright">CLEAR LOGS</button>
|
||||
<button class="flex-1 py-1.5 bg-surface-container-high rounded text-[11px] font-label-mono hover:bg-surface-bright">DOWNLOAD .JSON</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer Meta-data -->
|
||||
<footer class="ml-64 px-gutter py-stack-md flex justify-between items-center text-on-surface-variant font-label-mono text-[11px]">
|
||||
<div class="flex gap-6">
|
||||
<span>© 2024 VacatureRadar AI</span>
|
||||
<a class="hover:text-primary" href="#">Service Status</a>
|
||||
<a class="hover:text-primary" href="#">Privacy Policy</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm">memory</span> CPU: 12%
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm">database</span> RAM: 4.2GB / 16GB
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm">update</span> V2.4.0-stable
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Interactive Layer: Notification Toast (Optional script demonstration) -->
|
||||
<script>
|
||||
document.querySelector('button.bg-primary-container').addEventListener('click', () => {
|
||||
const btn = document.querySelector('button.bg-primary-container');
|
||||
const originalContent = btn.innerHTML;
|
||||
btn.innerHTML = '<span class="material-symbols-outlined text-sm animate-spin">sync</span> Bezig met scannen...';
|
||||
btn.disabled = true;
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = '<span class="material-symbols-outlined text-sm">check</span> Scan Voltooid';
|
||||
btn.classList.replace('bg-primary-container', 'bg-secondary');
|
||||
btn.classList.replace('text-on-primary-container', 'text-on-secondary');
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = originalContent;
|
||||
btn.classList.replace('bg-secondary', 'bg-primary-container');
|
||||
btn.classList.replace('text-on-secondary', 'text-on-primary-container');
|
||||
btn.disabled = false;
|
||||
}, 2000);
|
||||
}, 1500);
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 424 KiB |
@@ -0,0 +1,486 @@
|
||||
<!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 - Bronnen & Source Health</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&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"/>
|
||||
<!-- Tailwind Configuration -->
|
||||
<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"],
|
||||
"headline-md": ["Geist"],
|
||||
"body-md": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"label-mono": ["JetBrains Mono"],
|
||||
"metadata-caps": ["JetBrains Mono"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #0b1326;
|
||||
color: #dae2fd;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.signal-glow-primary {
|
||||
box-shadow: 0 0 15px rgba(0, 245, 255, 0.1);
|
||||
border: 1px solid rgba(0, 245, 255, 0.2);
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(23, 31, 51, 0.6);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(58, 73, 74, 0.5);
|
||||
}
|
||||
.technical-log {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #3a494a #171f33;
|
||||
}
|
||||
@keyframes pulse-cyan {
|
||||
0% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.2); }
|
||||
100% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
.status-pulse {
|
||||
animation: pulse-cyan 2s infinite ease-in-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-body-md overflow-x-hidden">
|
||||
<!-- Top Navigation Anchor (Desktop/Web Layout) -->
|
||||
<header class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-xl border-b border-outline-variant/30 shadow-sm hidden md:block">
|
||||
<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-8">
|
||||
<span class="font-headline-md text-headline-md font-bold tracking-tight text-primary">VacatureRadar</span>
|
||||
<nav class="flex gap-6">
|
||||
<a class="text-on-surface-variant hover:bg-surface-container-highest/50 px-3 py-1 rounded transition-colors font-medium" href="#">Overzicht</a>
|
||||
<a class="text-primary font-bold px-3 py-1 rounded" href="#">Bronnen</a>
|
||||
<a class="text-on-surface-variant hover:bg-surface-container-highest/50 px-3 py-1 rounded transition-colors font-medium" href="#">Instellingen</a>
|
||||
</nav>
|
||||
</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">account_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Side Navigation Anchor (Desktop Sidebar) -->
|
||||
<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 z-40">
|
||||
<div class="px-6 pb-6">
|
||||
<h1 class="font-headline-md text-headline-md text-primary font-bold">VacatureRadar</h1>
|
||||
<p class="font-label-mono text-label-mono text-on-surface-variant opacity-60">Intelligent Discovery</p>
|
||||
</div>
|
||||
<nav class="flex flex-col px-3">
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span class="font-label-mono text-label-mono">Overview</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all" href="#">
|
||||
<span class="material-symbols-outlined">radar</span>
|
||||
<span class="font-label-mono text-label-mono">New matches</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded text-primary bg-primary-container/10 border-r-2 border-primary-container" href="#">
|
||||
<span class="material-symbols-outlined">hub</span>
|
||||
<span class="font-label-mono text-label-mono">Sources</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all" href="#">
|
||||
<span class="material-symbols-outlined">precision_manufacturing</span>
|
||||
<span class="font-label-mono text-label-mono">Automation</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="font-label-mono text-label-mono">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto px-6">
|
||||
<button class="w-full bg-primary-container/20 text-primary border border-primary-container/30 py-3 rounded-lg font-bold flex items-center justify-center gap-2 hover:bg-primary-container/30 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
<span class="font-label-mono text-label-mono uppercase tracking-widest text-[10px]">New Search</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="md:ml-64 pt-6 md:pt-24 min-h-screen px-4 md:px-gutter max-w-container-max mx-auto mb-24 md:mb-12">
|
||||
<!-- Header & Stats -->
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-stack-lg">
|
||||
<div>
|
||||
<h2 class="font-headline-lg text-headline-lg text-primary tracking-tight">Bronbeheer</h2>
|
||||
<p class="text-on-surface-variant font-body-md mt-1">Beheer en monitor de actieve scan-endpoints van jouw radarprofiel.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<div class="glass-card px-4 py-2 rounded-xl flex flex-col">
|
||||
<span class="text-label-mono text-[10px] text-on-surface-variant uppercase tracking-tighter">Actieve Bronnen</span>
|
||||
<span class="font-headline-md text-secondary">24</span>
|
||||
</div>
|
||||
<div class="glass-card px-4 py-2 rounded-xl flex flex-col">
|
||||
<span class="text-label-mono text-[10px] text-on-surface-variant uppercase tracking-tighter">Systeemstatus</span>
|
||||
<span class="font-headline-md text-primary flex items-center gap-2">
|
||||
Gezond
|
||||
<span class="w-2 h-2 rounded-full bg-secondary status-pulse"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sources Grid -->
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<!-- Source Card 1: LinkedIn Alerts (Health: Gezond) -->
|
||||
<section class="glass-card rounded-xl overflow-hidden signal-glow-primary">
|
||||
<div class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center border border-outline-variant/30">
|
||||
<span class="material-symbols-outlined text-primary">mail</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-primary">LinkedIn Alerts</h3>
|
||||
<div class="flex items-center gap-3 mt-1">
|
||||
<span class="font-label-mono text-label-mono text-on-surface-variant">Email Alert</span>
|
||||
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
||||
<span class="font-label-mono text-label-mono text-on-surface-variant">Laatste scan: 12 min geleden</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="text-right">
|
||||
<span class="block text-[10px] font-label-mono text-on-surface-variant uppercase">Vacatures gevonden</span>
|
||||
<span class="text-headline-md text-primary">142</span>
|
||||
</div>
|
||||
<div class="bg-secondary/10 border border-secondary/20 px-3 py-1 rounded-full flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
||||
<span class="text-label-mono text-secondary font-medium">Gezond</span>
|
||||
</div>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors" onclick="toggleDetails('details-1')">
|
||||
<span class="material-symbols-outlined" id="icon-details-1">expand_more</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Progressive Disclosure Section -->
|
||||
<div class="hidden border-t border-outline-variant/20 bg-surface-container-low/50" id="details-1">
|
||||
<div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h4 class="text-label-mono text-[11px] text-on-surface-variant uppercase mb-3">Technische Log</h4>
|
||||
<div class="bg-surface-container-lowest p-4 rounded border border-outline-variant/30 font-label-mono text-xs leading-relaxed text-on-surface-variant/80 technical-log max-h-40 overflow-y-auto">
|
||||
[2023-10-24 14:12:01] Connection established with imap.gmail.com<br/>
|
||||
[2023-10-24 14:12:03] Searching for subject: "LinkedIn Job Alert"<br/>
|
||||
[2023-10-24 14:12:05] Identified 3 new messages. Parsing bodies...<br/>
|
||||
[2023-10-24 14:12:08] 12 job entities extracted successfully.<br/>
|
||||
[2023-10-24 14:12:10] Session closed cleanly.
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h4 class="text-label-mono text-[11px] text-on-surface-variant uppercase mb-2">Parser Configuratie</h4>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-surface-container-highest px-2 py-1 rounded text-[10px] font-label-mono border border-outline-variant/30">REGEX_V2.4</span>
|
||||
<span class="bg-surface-container-highest px-2 py-1 rounded text-[10px] font-label-mono border border-outline-variant/30">DEEP_LINK_CLEANER</span>
|
||||
<span class="bg-surface-container-highest px-2 py-1 rounded text-[10px] font-label-mono border border-outline-variant/30">META_DATA_SCRAPER</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-primary px-4 py-2 rounded text-surface font-bold text-sm hover:bg-primary-fixed transition-colors">Herstart Scan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Source Card 2: VDAB RSS (Health: Beperkt) -->
|
||||
<section class="glass-card rounded-xl overflow-hidden border-orange-500/20">
|
||||
<div class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center border border-outline-variant/30">
|
||||
<span class="material-symbols-outlined text-orange-400">rss_feed</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-primary">VDAB RSS</h3>
|
||||
<div class="flex items-center gap-3 mt-1">
|
||||
<span class="font-label-mono text-label-mono text-on-surface-variant">RSS Feed</span>
|
||||
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
||||
<span class="font-label-mono text-label-mono text-on-surface-variant">Laatste scan: 4u geleden</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="text-right">
|
||||
<span class="block text-[10px] font-label-mono text-on-surface-variant uppercase">Vacatures gevonden</span>
|
||||
<span class="text-headline-md text-primary">89</span>
|
||||
</div>
|
||||
<div class="bg-orange-500/10 border border-orange-500/20 px-3 py-1 rounded-full flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-orange-500"></span>
|
||||
<span class="text-label-mono text-orange-400 font-medium">Beperkt</span>
|
||||
</div>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors" onclick="toggleDetails('details-2')">
|
||||
<span class="material-symbols-outlined" id="icon-details-2">expand_more</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden border-t border-outline-variant/20 bg-surface-container-low/50" id="details-2">
|
||||
<div class="p-6">
|
||||
<div class="bg-orange-500/5 border border-orange-500/20 p-4 rounded-lg flex items-start gap-3 mb-6">
|
||||
<span class="material-symbols-outlined text-orange-500">warning</span>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">De RSS feed van VDAB antwoordt traag (Latency > 5000ms). Sommige afbeeldingen konden niet worden gedownload. De tekstuele data is wel up-to-date.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="bg-surface-container-lowest p-4 rounded border border-outline-variant/30 font-label-mono text-xs text-on-surface-variant/80 technical-log max-h-40 overflow-y-auto">
|
||||
[2023-10-24 10:00:15] Fetching XML from vdab.be/feed...<br/>
|
||||
[2023-10-24 10:05:15] Warning: Timeout reached while fetching images.<br/>
|
||||
[2023-10-24 10:05:16] Partial success: 89 items processed.
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<button class="bg-orange-500/20 border border-orange-500/40 text-orange-400 px-4 py-2 rounded font-bold text-sm hover:bg-orange-500/30 transition-colors">Diagnose Uitvoeren</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Source Card 3: Ziekenhuis Hasselt (Health: Controle nodig) -->
|
||||
<section class="glass-card rounded-xl overflow-hidden border-yellow-500/20">
|
||||
<div class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center border border-outline-variant/30">
|
||||
<span class="material-symbols-outlined text-yellow-400">web</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-primary">Ziekenhuis Hasselt Carrière</h3>
|
||||
<div class="flex items-center gap-3 mt-1">
|
||||
<span class="font-label-mono text-label-mono text-on-surface-variant">Direct Scrape</span>
|
||||
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
||||
<span class="font-label-mono text-label-mono text-on-surface-variant">Laatste scan: Gisteren</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="text-right opacity-50">
|
||||
<span class="block text-[10px] font-label-mono text-on-surface-variant uppercase">Vacatures gevonden</span>
|
||||
<span class="text-headline-md text-primary">--</span>
|
||||
</div>
|
||||
<div class="bg-yellow-500/10 border border-yellow-500/20 px-3 py-1 rounded-full flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-yellow-500"></span>
|
||||
<span class="text-label-mono text-yellow-400 font-medium">Controle nodig</span>
|
||||
</div>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors" onclick="toggleDetails('details-3')">
|
||||
<span class="material-symbols-outlined" id="icon-details-3">expand_more</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden border-t border-outline-variant/20 bg-surface-container-low/50" id="details-3">
|
||||
<div class="p-6">
|
||||
<div class="bg-yellow-500/5 border border-yellow-500/20 p-4 rounded-lg mb-6">
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">De website structuur lijkt gewijzigd. De huidige selector <code class="bg-surface-container px-1 py-0.5 rounded text-yellow-400">.vacancy-item</code> vindt geen resultaten meer. Update de parser configuratie.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="bg-yellow-500 text-surface px-4 py-2 rounded font-bold text-sm hover:bg-yellow-400 transition-colors">Open Visual Debugger</button>
|
||||
<button class="bg-surface-container-highest text-primary border border-outline-variant/30 px-4 py-2 rounded font-bold text-sm">Handleiding Updaten</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Source Card 4: Indeed Search (Health: Mislukt) -->
|
||||
<section class="glass-card rounded-xl overflow-hidden border-error/30">
|
||||
<div class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 rounded-lg bg-error-container/20 flex items-center justify-center border border-error/30">
|
||||
<span class="material-symbols-outlined text-error">error</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-primary">Indeed Search Query</h3>
|
||||
<div class="flex items-center gap-3 mt-1">
|
||||
<span class="font-label-mono text-label-mono text-on-surface-variant">API Integration</span>
|
||||
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
||||
<span class="font-label-mono text-label-mono text-on-surface-variant">Laatste scan: mislukt</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="text-right opacity-50">
|
||||
<span class="block text-[10px] font-label-mono text-on-surface-variant uppercase">Vacatures gevonden</span>
|
||||
<span class="text-headline-md text-primary">0</span>
|
||||
</div>
|
||||
<div class="bg-error/10 border border-error/20 px-3 py-1 rounded-full flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-error"></span>
|
||||
<span class="text-label-mono text-error font-medium">Mislukt</span>
|
||||
</div>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors" onclick="toggleDetails('details-4')">
|
||||
<span class="material-symbols-outlined" id="icon-details-4">expand_more</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden border-t border-outline-variant/20 bg-surface-container-low/50" id="details-4">
|
||||
<div class="p-6">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="bg-error-container/10 border border-error/30 p-4 rounded-lg flex items-start gap-3">
|
||||
<span class="material-symbols-outlined text-error">lock</span>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-error mb-1">Authenticatie Fout (HTTP 401)</p>
|
||||
<p class="text-sm text-on-surface-variant">De API-key voor Indeed is verlopen of ingetrokken. Vernieuw je tokens in de integratie-instellingen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="bg-error text-surface px-4 py-2 rounded font-bold text-sm hover:bg-error/80 transition-colors">Credentials Bijwerken</button>
|
||||
<button class="bg-surface-container-highest text-primary border border-outline-variant/30 px-4 py-2 rounded font-bold text-sm">Documentatie</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- System Health Visualization Section -->
|
||||
<section class="mt-12 mb-24 md:mb-12">
|
||||
<h3 class="font-headline-md text-primary mb-6">Radar Systeem Integriteit</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="glass-card p-6 rounded-xl relative overflow-hidden h-64">
|
||||
<h4 class="text-label-mono text-[11px] text-on-surface-variant uppercase mb-4">Traffic Signal Flow</h4>
|
||||
|
||||
<div class="relative z-10 flex flex-col justify-end h-full">
|
||||
<span class="text-headline-md text-primary">98.2%</span>
|
||||
<span class="text-xs text-secondary font-label-mono">Scan Success Rate</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-card p-6 rounded-xl relative overflow-hidden h-64">
|
||||
<h4 class="text-label-mono text-[11px] text-on-surface-variant uppercase mb-4">Parser Latency</h4>
|
||||
|
||||
<div class="relative z-10 flex flex-col justify-end h-full">
|
||||
<span class="text-headline-md text-primary">45ms</span>
|
||||
<span class="text-xs text-on-surface-variant font-label-mono">Gemiddelde Reactietijd</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-card p-6 rounded-xl flex flex-col justify-between">
|
||||
<div>
|
||||
<h4 class="text-label-mono text-[11px] text-on-surface-variant uppercase mb-4">Systeem Logboek</h4>
|
||||
<div class="space-y-4">
|
||||
<div class="flex gap-3 items-start">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary mt-1.5"></span>
|
||||
<div class="text-xs">
|
||||
<p class="text-primary font-medium">Backup Voltooid</p>
|
||||
<p class="text-on-surface-variant/70">Database sync succesvol naar EU-WEST-1.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-orange-500 mt-1.5"></span>
|
||||
<div class="text-xs">
|
||||
<p class="text-primary font-medium">Capaciteit Waarschuwing</p>
|
||||
<p class="text-on-surface-variant/70">Scan queue is 80% vol. Vertraging mogelijk.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full border border-outline-variant/30 py-2 rounded text-xs font-label-mono hover:bg-surface-container-highest transition-colors">Volledig Log Bekijken</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Navigation (Mobile Only) -->
|
||||
<nav class="md:hidden fixed bottom-0 left-0 w-full bg-surface-container border-t border-outline-variant/10 py-3 px-6 flex justify-between items-center z-50">
|
||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span class="text-[10px] font-label-mono">Overzicht</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center gap-1 text-primary">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">hub</span>
|
||||
<span class="text-[10px] font-label-mono">Bronnen</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">radar</span>
|
||||
<span class="text-[10px] font-label-mono">Radar</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="text-[10px] font-label-mono">Instellingen</span>
|
||||
</button>
|
||||
</nav>
|
||||
<script>
|
||||
function toggleDetails(id) {
|
||||
const el = document.getElementById(id);
|
||||
const icon = document.getElementById('icon-' + id);
|
||||
const isHidden = el.classList.contains('hidden');
|
||||
|
||||
// Close all other open details
|
||||
document.querySelectorAll('[id^="details-"]').forEach(item => {
|
||||
if(item.id !== id) {
|
||||
item.classList.add('hidden');
|
||||
const otherIcon = document.getElementById('icon-' + item.id);
|
||||
if(otherIcon) otherIcon.style.transform = 'rotate(0deg)';
|
||||
}
|
||||
});
|
||||
|
||||
if (isHidden) {
|
||||
el.classList.remove('hidden');
|
||||
icon.style.transform = 'rotate(180deg)';
|
||||
icon.style.transition = 'transform 0.3s ease';
|
||||
} else {
|
||||
el.classList.add('hidden');
|
||||
icon.style.transform = 'rotate(0deg)';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 259 KiB |
@@ -0,0 +1,571 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 557 KiB |
@@ -0,0 +1,181 @@
|
||||
---
|
||||
name: Intelligence Cockpit
|
||||
colors:
|
||||
surface: '#0b1326'
|
||||
surface-dim: '#0b1326'
|
||||
surface-bright: '#31394d'
|
||||
surface-container-lowest: '#060e20'
|
||||
surface-container-low: '#131b2e'
|
||||
surface-container: '#171f33'
|
||||
surface-container-high: '#222a3d'
|
||||
surface-container-highest: '#2d3449'
|
||||
on-surface: '#dae2fd'
|
||||
on-surface-variant: '#b9caca'
|
||||
inverse-surface: '#dae2fd'
|
||||
inverse-on-surface: '#283044'
|
||||
outline: '#849495'
|
||||
outline-variant: '#3a494a'
|
||||
surface-tint: '#00dce5'
|
||||
primary: '#e9feff'
|
||||
on-primary: '#003739'
|
||||
primary-container: '#00f5ff'
|
||||
on-primary-container: '#006c71'
|
||||
inverse-primary: '#00696e'
|
||||
secondary: '#4edea3'
|
||||
on-secondary: '#003824'
|
||||
secondary-container: '#00a572'
|
||||
on-secondary-container: '#00311f'
|
||||
tertiary: '#fcf8ff'
|
||||
on-tertiary: '#1000a9'
|
||||
tertiary-container: '#dbdaff'
|
||||
on-tertiary-container: '#4c4ed9'
|
||||
error: '#ffb4ab'
|
||||
on-error: '#690005'
|
||||
error-container: '#93000a'
|
||||
on-error-container: '#ffdad6'
|
||||
primary-fixed: '#63f7ff'
|
||||
primary-fixed-dim: '#00dce5'
|
||||
on-primary-fixed: '#002021'
|
||||
on-primary-fixed-variant: '#004f53'
|
||||
secondary-fixed: '#6ffbbe'
|
||||
secondary-fixed-dim: '#4edea3'
|
||||
on-secondary-fixed: '#002113'
|
||||
on-secondary-fixed-variant: '#005236'
|
||||
tertiary-fixed: '#e1e0ff'
|
||||
tertiary-fixed-dim: '#c0c1ff'
|
||||
on-tertiary-fixed: '#07006c'
|
||||
on-tertiary-fixed-variant: '#2f2ebe'
|
||||
background: '#0b1326'
|
||||
on-background: '#dae2fd'
|
||||
surface-variant: '#2d3449'
|
||||
typography:
|
||||
headline-lg:
|
||||
fontFamily: Geist
|
||||
fontSize: 32px
|
||||
fontWeight: '600'
|
||||
lineHeight: '1.2'
|
||||
letterSpacing: -0.02em
|
||||
headline-lg-mobile:
|
||||
fontFamily: Geist
|
||||
fontSize: 24px
|
||||
fontWeight: '600'
|
||||
lineHeight: '1.2'
|
||||
headline-md:
|
||||
fontFamily: Geist
|
||||
fontSize: 20px
|
||||
fontWeight: '500'
|
||||
lineHeight: '1.4'
|
||||
body-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 16px
|
||||
fontWeight: '400'
|
||||
lineHeight: '1.6'
|
||||
body-sm:
|
||||
fontFamily: Inter
|
||||
fontSize: 14px
|
||||
fontWeight: '400'
|
||||
lineHeight: '1.5'
|
||||
metadata-caps:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 12px
|
||||
fontWeight: '500'
|
||||
lineHeight: '1.0'
|
||||
letterSpacing: 0.05em
|
||||
label-mono:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 13px
|
||||
fontWeight: '400'
|
||||
lineHeight: '1.0'
|
||||
rounded:
|
||||
sm: 0.125rem
|
||||
DEFAULT: 0.25rem
|
||||
md: 0.375rem
|
||||
lg: 0.5rem
|
||||
xl: 0.75rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
container-max: 1280px
|
||||
gutter: 24px
|
||||
margin-mobile: 16px
|
||||
stack-sm: 8px
|
||||
stack-md: 16px
|
||||
stack-lg: 32px
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
The design system is anchored in the concept of "Intelligent Discovery." It positions the product not just as a job board, but as a sophisticated radar system for career growth. The aesthetic is a refined blend of **Modern Corporate** and **Technical Minimalist**, evoking the feeling of a high-end data cockpit.
|
||||
|
||||
The target audience consists of professionals who value efficiency, precision, and a calm user experience. The UI should feel like a trusted advisor: quiet until it finds something significant, then clear and authoritative in its presentation. We avoid literal military metaphors in favor of abstract "signal" patterns, subtle data visualizations, and high-quality finishes that suggest a premium, automated service.
|
||||
|
||||
## Colors
|
||||
|
||||
The palette is centered on a "Professional Dark" foundation to reduce cognitive load and emphasize the intelligence-gathering nature of the platform.
|
||||
|
||||
* **Primary (Signal Cyan):** `#00F5FF`. Used for active radar pulses, high-confidence matches, and primary calls to action. It represents the "discovery" aspect.
|
||||
* **Secondary (Success Emerald):** `#10B981`. Reserved for "Healthy" system statuses and finalized matches.
|
||||
* **Tertiary (Intelligence Indigo):** `#6366F1`. Used for automation indicators and background accents to provide depth.
|
||||
* **Neutrals:** A range of Slate and Navy tones (from `#0F172A` to `#94A3B8`) form the structural layers.
|
||||
|
||||
In Light Mode, the deep navies are replaced with crisp whites and soft slates, but the Primary Cyan remains the focal point for interaction.
|
||||
|
||||
## Typography
|
||||
|
||||
This design system utilizes a tiered typographic approach to balance human readability with a technical edge.
|
||||
|
||||
* **Headlines:** Using **Geist**, these are sharp and modern, providing a clear hierarchy for job titles and section headers.
|
||||
* **Body:** **Inter** is used for all descriptive text, ensuring maximum legibility during long reading sessions of job descriptions.
|
||||
* **Data & Metadata:** **JetBrains Mono** is employed for small labels, status indicators, and automation logs. This reinforces the "Radar" and "Automated" personality of the brand.
|
||||
|
||||
Dutch language nuances (long compound words) are handled through generous line-heights and flexible container widths.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
The layout follows a **Fixed Grid** model on desktop to maintain a controlled "Cockpit" feel, centered within the viewport.
|
||||
|
||||
* **Desktop:** 12-column grid with 24px gutters. Content is often organized into a narrow sidebar for navigation/filters and a wide main area for the "Radar Feed."
|
||||
* **Mobile:** A single-column fluid layout with 16px side margins.
|
||||
* **Spacing Rhythm:** An 8px base unit drives all padding and margins. Vertical stacking uses "stack-md" (16px) for related elements and "stack-lg" (32px) for distinct sections.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
Hierarchy is established through **Tonal Layers** and **Subtle Glows** rather than heavy shadows.
|
||||
|
||||
* **Background:** The base layer uses the darkest neutral.
|
||||
* **Surface-Low:** Cards and containers use a slightly lighter slate with a 1px low-opacity border.
|
||||
* **Surface-High:** Elements in focus or "Strong Matches" utilize a "Signal Glow"—a faint, primary-colored outer shadow (`0 0 15px rgba(0, 245, 255, 0.15)`) and a subtle inner gradient.
|
||||
* **Backdrop Blur:** Modals and navigation overlays use a 12px blur to maintain the glass-like cockpit aesthetic without sacrificing legibility.
|
||||
|
||||
## Shapes
|
||||
|
||||
The shape language is **Soft (0.25rem)**. This provides a professional, geometric look that feels precise and modern.
|
||||
|
||||
* **Standard Elements:** Buttons and inputs use a 4px (0.25rem) radius.
|
||||
* **Large Containers:** Main cards and sections use an 8px (0.5rem) radius.
|
||||
* **Status Indicators:** Chips and small badges use a fully rounded (pill) shape to contrast against the structured grid of the cards.
|
||||
|
||||
## Components
|
||||
|
||||
### Cards (Vacaturekaarten)
|
||||
Cards are the primary data vessel. They feature a 1px border (`#334155`). For "Sterke Matches" (Strong Matches), the border color transitions to the Primary Cyan, and a subtle glow is applied.
|
||||
|
||||
### Score Indicators (Match-score)
|
||||
A combination of a bold numeric percentage in `Geist` and a qualitative label in `JetBrains Mono`.
|
||||
* *Example:* **94%** [STERKE MATCH]
|
||||
* Color reflects the score: Cyan for >80%, Indigo for 50-80%, Slate for <50%.
|
||||
|
||||
### Status Chips (Automatisering)
|
||||
Small, pill-shaped indicators for system health:
|
||||
* **Scanning:** Primary Cyan text with a pulsing dot icon.
|
||||
* **Healthy:** Secondary Emerald background (low opacity) with dark text.
|
||||
* **Degraded:** Amber/Orange for system warnings.
|
||||
|
||||
### Buttons (Actieknoppen)
|
||||
* **Primary:** Solid Cyan with dark text for high contrast.
|
||||
* **Ghost:** Transparent with a Slate-400 border, used for secondary actions like "Bewaar" (Save).
|
||||
|
||||
### Input Fields
|
||||
Dark backgrounds with a 1px border. On focus, the border glows with the Primary Cyan signal. Labels use the mono font for a technical feel.
|
||||
|
||||
### Navigation
|
||||
Compact, icon-driven sidebar on desktop to maximize the workspace for the Radar Feed. Icons are stroke-based (2px weight) for a clean, technical look.
|
||||
@@ -0,0 +1,496 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 536 KiB |
@@ -0,0 +1,517 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="nl"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Sollicitatiepipeline | VacatureRadar</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600&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>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(23, 31, 51, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(58, 73, 74, 0.3);
|
||||
}
|
||||
.signal-glow-primary {
|
||||
box-shadow: 0 0 15px rgba(0, 245, 255, 0.1);
|
||||
}
|
||||
.kanban-column::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.kanban-column::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.kanban-column::-webkit-scrollbar-thumb {
|
||||
background: #3a494a;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.active-view-btn {
|
||||
background-color: rgba(0, 245, 255, 0.1);
|
||||
color: #e9feff;
|
||||
}
|
||||
</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"],
|
||||
"label-mono": ["JetBrains Mono"],
|
||||
"headline-md": ["Geist"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
||||
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"label-mono": ["13px", {"lineHeight": "1.0", "fontWeight": "400"}],
|
||||
"headline-md": ["20px", {"lineHeight": "1.4", "fontWeight": "500"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md min-h-screen">
|
||||
<!-- Sidebar Navigation -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-surface-container border-r border-outline-variant/20 flex flex-col py-stack-lg gap-stack-md z-40">
|
||||
<div class="px-6 mb-8">
|
||||
<h1 class="font-headline-md text-headline-md text-primary font-bold tracking-tight">VacatureRadar</h1>
|
||||
<p class="font-label-mono text-label-mono text-on-surface-variant/60">Intelligent Discovery</p>
|
||||
</div>
|
||||
<nav class="flex-1 flex flex-col">
|
||||
<div class="space-y-1 px-3">
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all group cursor-pointer" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span class="font-label-mono text-label-mono">Overview</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all group cursor-pointer" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="radar">radar</span>
|
||||
<span class="font-label-mono text-label-mono">New matches</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-primary bg-primary-container/10 border-r-2 border-primary-container transition-all cursor-pointer" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="assignment">assignment</span>
|
||||
<span class="font-label-mono text-label-mono">Applications</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all group cursor-pointer" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="work">work</span>
|
||||
<span class="font-label-mono text-label-mono">All vacancies</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all group cursor-pointer" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="bookmark">bookmark</span>
|
||||
<span class="font-label-mono text-label-mono">Saved</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-8 border-t border-outline-variant/10 pt-8 px-3 space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:text-primary transition-all" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="person_search">person_search</span>
|
||||
<span class="font-label-mono text-label-mono">Search profile</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:text-primary transition-all" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="font-label-mono text-label-mono">Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="px-6 mt-auto">
|
||||
<button class="w-full bg-primary-container text-on-primary-container py-3 rounded font-bold font-label-mono text-label-mono active:scale-95 transition-transform">
|
||||
New Search
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-64 p-gutter max-w-container-max mx-auto pt-24">
|
||||
<!-- Header & Controls -->
|
||||
<header class="fixed top-0 left-64 right-0 z-30 bg-surface/80 backdrop-blur-xl border-b border-outline-variant/30 px-gutter py-4">
|
||||
<div class="flex justify-between items-center max-w-container-max mx-auto">
|
||||
<div>
|
||||
<h2 class="font-headline-md text-headline-md text-primary font-bold">Sollicitatiepipeline</h2>
|
||||
<p class="text-on-surface-variant text-body-sm">Beheer je actieve trajecten en deadlines</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- Toggle View -->
|
||||
<div class="bg-surface-container-low p-1 rounded-lg flex border border-outline-variant/20">
|
||||
<button class="px-3 py-1.5 rounded flex items-center gap-2 active-view-btn transition-all" id="kanban-toggle" onclick="switchView('kanban')">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="view_column">view_column</span>
|
||||
<span class="font-label-mono text-label-mono">Kanban</span>
|
||||
</button>
|
||||
<button class="px-3 py-1.5 rounded flex items-center gap-2 text-on-surface-variant hover:bg-surface-container-high transition-all" id="list-toggle" onclick="switchView('list')">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="view_list">view_list</span>
|
||||
<span class="font-label-mono text-label-mono">Lijst</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-on-surface-variant px-3 py-2 bg-surface-container border border-outline-variant/20 rounded cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="filter_list">filter_list</span>
|
||||
<span class="font-label-mono text-label-mono">Filters</span>
|
||||
</div>
|
||||
<button class="bg-primary px-4 py-2 text-on-primary font-bold rounded flex items-center gap-2 hover:bg-primary-fixed transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="add">add</span>
|
||||
<span class="font-label-mono text-label-mono">Toevoegen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Pipeline Board -->
|
||||
<div class="flex gap-4 overflow-x-auto pb-8 pt-8 h-[calc(100vh-200px)]" id="pipeline-view">
|
||||
<!-- Column: Interessant -->
|
||||
<div class="min-w-[300px] flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between px-2">
|
||||
<span class="font-label-mono text-label-mono text-primary flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-primary/40"></span>
|
||||
Interessant (2)
|
||||
</span>
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-[18px]" data-icon="more_horiz">more_horiz</span>
|
||||
</div>
|
||||
<div class="kanban-column flex-1 overflow-y-auto space-y-3 pr-2">
|
||||
<!-- Card 1 -->
|
||||
<div class="glass-panel p-4 rounded-xl border border-outline-variant/30 hover:border-primary/40 transition-all cursor-pointer group">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h4 class="font-headline-md text-[16px] text-primary leading-tight group-hover:text-primary-container transition-colors">IT Field Engineer</h4>
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-[18px]" data-icon="open_in_new">open_in_new</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-body-sm mb-4">Zorgregio</p>
|
||||
<div class="flex flex-col gap-2 pt-3 border-t border-outline-variant/10">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-label-mono text-[11px] text-on-surface-variant/60">DATUM: 12 MEI</span>
|
||||
<span class="font-label-mono text-[11px] text-secondary">84% MATCH</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2 -->
|
||||
<div class="glass-panel p-4 rounded-xl border border-outline-variant/30 hover:border-primary/40 transition-all cursor-pointer group">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h4 class="font-headline-md text-[16px] text-primary leading-tight">Data Architect</h4>
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-[18px]" data-icon="open_in_new">open_in_new</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-body-sm mb-4">FinTech Solutions</p>
|
||||
<div class="flex flex-col gap-2 pt-3 border-t border-outline-variant/10">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-label-mono text-[11px] text-on-surface-variant/60">DATUM: 14 MEI</span>
|
||||
<span class="font-label-mono text-[11px] text-primary-container">91% MATCH</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Column: Voorbereiden -->
|
||||
<div class="min-w-[300px] flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between px-2">
|
||||
<span class="font-label-mono text-label-mono text-on-surface-variant flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
|
||||
Voorbereiden (1)
|
||||
</span>
|
||||
</div>
|
||||
<div class="kanban-column flex-1 overflow-y-auto space-y-3 pr-2">
|
||||
<div class="glass-panel p-4 rounded-xl border border-outline-variant/30 hover:border-primary/40 transition-all cursor-pointer group">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h4 class="font-headline-md text-[16px] text-primary leading-tight">Cloud Security Lead</h4>
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-[18px]" data-icon="edit">edit</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-body-sm mb-3">GovNet Dynamics</p>
|
||||
<div class="bg-surface-container-high/40 p-2 rounded mb-3">
|
||||
<span class="font-label-mono text-[11px] text-primary uppercase block mb-1">Volgende stap:</span>
|
||||
<span class="text-body-sm text-on-surface">CV aanpassen voor cloud focus</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-3 border-t border-outline-variant/10">
|
||||
<span class="font-label-mono text-[11px] text-error flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px]" data-icon="warning">warning</span>
|
||||
DEADLINE: VANDAAG
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Column: Gesolliciteerd -->
|
||||
<div class="min-w-[300px] flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between px-2">
|
||||
<span class="font-label-mono text-label-mono text-on-surface-variant flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
|
||||
Gesolliciteerd (1)
|
||||
</span>
|
||||
</div>
|
||||
<div class="kanban-column flex-1 overflow-y-auto space-y-3 pr-2">
|
||||
<div class="glass-panel p-4 rounded-xl border border-outline-variant/30 hover:border-primary/40 transition-all cursor-pointer group">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h4 class="font-headline-md text-[16px] text-primary leading-tight">Infrastructure Lead</h4>
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-[18px]" data-icon="mail">mail</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-body-sm mb-4">EuroLogistix</p>
|
||||
<div class="flex items-center justify-between pt-3 border-t border-outline-variant/10">
|
||||
<span class="font-label-mono text-[11px] text-on-surface-variant/60">VERZONDEN: 10 MEI</span>
|
||||
<span class="font-label-mono text-[11px] text-secondary">BEVESTIGD</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Column: Wacht op reactie -->
|
||||
<div class="min-w-[300px] flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between px-2 text-error">
|
||||
<span class="font-label-mono text-label-mono flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-error animate-pulse"></span>
|
||||
Wacht op reactie (1)
|
||||
</span>
|
||||
</div>
|
||||
<div class="kanban-column flex-1 overflow-y-auto space-y-3 pr-2">
|
||||
<div class="glass-panel p-4 rounded-xl border border-error/40 signal-glow-primary hover:border-error transition-all cursor-pointer group relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 bg-error/10 px-2 py-1 rounded-bl-lg">
|
||||
<span class="font-label-mono text-[10px] text-error font-bold">TE LAAT</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h4 class="font-headline-md text-[16px] text-primary leading-tight">Senior SysOps</h4>
|
||||
<span class="material-symbols-outlined text-error text-[18px]" data-icon="alarm">alarm</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-body-sm mb-3">GreenEnergy NV</p>
|
||||
<div class="bg-error/5 p-2 rounded mb-3 border border-error/10">
|
||||
<span class="font-label-mono text-[11px] text-error uppercase block mb-1">Follow-up nodig:</span>
|
||||
<span class="text-body-sm text-on-surface">Bell voor status update</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-3 border-t border-outline-variant/10">
|
||||
<span class="font-label-mono text-[11px] text-error">DEADLINE: 2 DAGEN GELEDEN</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Column: Gesprek -->
|
||||
<div class="min-w-[300px] flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between px-2">
|
||||
<span class="font-label-mono text-label-mono text-primary-container flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
|
||||
Gesprek (1)
|
||||
</span>
|
||||
</div>
|
||||
<div class="kanban-column flex-1 overflow-y-auto space-y-3 pr-2">
|
||||
<div class="glass-panel p-4 rounded-xl border border-primary-container/40 signal-glow-primary hover:border-primary-container transition-all cursor-pointer group">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h4 class="font-headline-md text-[16px] text-primary leading-tight">Azure Consultant</h4>
|
||||
<span class="material-symbols-outlined text-primary-container text-[18px]" data-icon="event">event</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-body-sm mb-3">SkyHigh Tech</p>
|
||||
<div class="bg-primary-container/10 p-3 rounded-lg mb-3 border border-primary-container/20">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="material-symbols-outlined text-primary-container text-[18px]" data-icon="calendar_today">calendar_today</span>
|
||||
<span class="font-label-mono text-label-mono text-primary">22 MEI • 10:30</span>
|
||||
</div>
|
||||
<span class="text-body-sm text-on-surface-variant">Eerste kennismaking</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<span class="font-label-mono text-[11px] text-secondary flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px]" data-icon="check_circle">check_circle</span>
|
||||
VOORBEREID
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Column: Aanbod -->
|
||||
<div class="min-w-[300px] flex flex-col gap-4 opacity-60">
|
||||
<div class="flex items-center justify-between px-2">
|
||||
<span class="font-label-mono text-label-mono text-on-surface-variant flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
|
||||
Aanbod (0)
|
||||
</span>
|
||||
</div>
|
||||
<div class="kanban-column flex-1 border-2 border-dashed border-outline-variant/10 rounded-xl flex items-center justify-center p-8 text-center">
|
||||
<span class="font-label-mono text-[11px] text-on-surface-variant/40">Geen actieve aanbiedingen</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Column: Afgerond -->
|
||||
<div class="min-w-[300px] flex flex-col gap-4 opacity-80">
|
||||
<div class="flex items-center justify-between px-2">
|
||||
<span class="font-label-mono text-label-mono text-on-surface-variant flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
||||
Afgerond (1)
|
||||
</span>
|
||||
</div>
|
||||
<div class="kanban-column flex-1 overflow-y-auto space-y-3 pr-2">
|
||||
<div class="glass-panel p-4 rounded-xl border border-outline-variant/30 hover:border-secondary/40 transition-all cursor-pointer grayscale hover:grayscale-0">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h4 class="font-headline-md text-[16px] text-primary leading-tight">DevOps Engineer</h4>
|
||||
<span class="material-symbols-outlined text-secondary text-[18px]" data-icon="check_circle">check_circle</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-body-sm mb-4">CloudBase NL</p>
|
||||
<div class="flex items-center justify-between pt-3 border-t border-outline-variant/10">
|
||||
<span class="font-label-mono text-[11px] text-on-surface-variant/60">AFGEWEZEN DOOR MIJ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- List View (Hidden by default) -->
|
||||
<div class="hidden pt-8" id="list-view">
|
||||
<div class="glass-panel rounded-xl overflow-hidden border border-outline-variant/20">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="bg-surface-container-high/50 border-b border-outline-variant/30">
|
||||
<tr>
|
||||
<th class="px-6 py-4 font-label-mono text-label-mono text-on-surface-variant uppercase tracking-wider">Functie & Bedrijf</th>
|
||||
<th class="px-6 py-4 font-label-mono text-label-mono text-on-surface-variant uppercase tracking-wider">Fase</th>
|
||||
<th class="px-6 py-4 font-label-mono text-label-mono text-on-surface-variant uppercase tracking-wider">Datum</th>
|
||||
<th class="px-6 py-4 font-label-mono text-label-mono text-on-surface-variant uppercase tracking-wider">Volgende Actie</th>
|
||||
<th class="px-6 py-4 font-label-mono text-label-mono text-on-surface-variant uppercase tracking-wider">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant/10">
|
||||
<!-- List Item 1 -->
|
||||
<tr class="hover:bg-surface-container-high/30 transition-colors cursor-pointer group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-primary font-medium">Azure Consultant</span>
|
||||
<span class="text-on-surface-variant text-sm">SkyHigh Tech</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 rounded bg-primary-container/10 text-primary-container text-[11px] font-label-mono">GESPREK</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-on-surface-variant text-sm font-label-mono">22 MEI</td>
|
||||
<td class="px-6 py-4 text-on-surface-variant text-sm">Eerste kennismaking om 10:30</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
||||
<span class="text-sm text-secondary">Voorbereid</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- List Item 2 -->
|
||||
<tr class="hover:bg-surface-container-high/30 transition-colors cursor-pointer group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-primary font-medium">Senior SysOps</span>
|
||||
<span class="text-on-surface-variant text-sm">GreenEnergy NV</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 rounded bg-error/10 text-error text-[11px] font-label-mono">WACHT OP REACTIE</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-on-surface-variant text-sm font-label-mono">05 MEI</td>
|
||||
<td class="px-6 py-4 text-on-surface-variant text-sm">Bellen voor update</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-error animate-pulse"></span>
|
||||
<span class="text-sm text-error font-bold">TE LAAT</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- List Item 3 -->
|
||||
<tr class="hover:bg-surface-container-high/30 transition-colors cursor-pointer group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-primary font-medium">Cloud Security Lead</span>
|
||||
<span class="text-on-surface-variant text-sm">GovNet Dynamics</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 rounded bg-surface-container-highest text-on-surface-variant text-[11px] font-label-mono uppercase">Voorbereiden</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-on-surface-variant text-sm font-label-mono">VANDAAG</td>
|
||||
<td class="px-6 py-4 text-on-surface-variant text-sm">CV aanpassen</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-error"></span>
|
||||
<span class="text-sm text-error">Deadline vandaag</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Floating Action Indicator (Contextual) -->
|
||||
<div class="fixed bottom-8 right-8 z-50">
|
||||
<button class="bg-primary-container text-on-primary-container w-14 h-14 rounded-full flex items-center justify-center shadow-lg active:scale-90 transition-transform signal-glow-primary">
|
||||
<span class="material-symbols-outlined text-[28px]" data-icon="add_task">add_task</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Micro-interaction Scripts -->
|
||||
<script>
|
||||
function switchView(view) {
|
||||
const pipeline = document.getElementById('pipeline-view');
|
||||
const list = document.getElementById('list-view');
|
||||
const kBtn = document.getElementById('kanban-toggle');
|
||||
const lBtn = document.getElementById('list-toggle');
|
||||
|
||||
if (view === 'kanban') {
|
||||
pipeline.classList.remove('hidden');
|
||||
pipeline.classList.add('flex');
|
||||
list.classList.add('hidden');
|
||||
|
||||
kBtn.classList.add('active-view-btn');
|
||||
kBtn.classList.remove('text-on-surface-variant');
|
||||
lBtn.classList.remove('active-view-btn');
|
||||
lBtn.classList.add('text-on-surface-variant');
|
||||
} else {
|
||||
pipeline.classList.add('hidden');
|
||||
pipeline.classList.remove('flex');
|
||||
list.classList.remove('hidden');
|
||||
|
||||
lBtn.classList.add('active-view-btn');
|
||||
lBtn.classList.remove('text-on-surface-variant');
|
||||
kBtn.classList.remove('active-view-btn');
|
||||
kBtn.classList.add('text-on-surface-variant');
|
||||
}
|
||||
}
|
||||
|
||||
// Simple Drag Hint Effect
|
||||
const columns = document.querySelectorAll('.kanban-column');
|
||||
columns.forEach(col => {
|
||||
col.addEventListener('mouseenter', () => {
|
||||
if(col.children.length > 0) {
|
||||
col.classList.add('bg-surface-container/30');
|
||||
}
|
||||
});
|
||||
col.addEventListener('mouseleave', () => {
|
||||
col.classList.remove('bg-surface-container/30');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
@@ -0,0 +1,486 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 689 KiB |
@@ -0,0 +1,531 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="nl"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>VacatureRadar | Werkgevers Intelligence</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:wght@100..900&family=JetBrains+Mono:wght@100..900&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.signal-glow {
|
||||
box-shadow: 0 0 15px rgba(0, 245, 255, 0.1);
|
||||
}
|
||||
.glass-panel {
|
||||
backdrop-filter: blur(12px);
|
||||
background: rgba(23, 31, 51, 0.7);
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0b1326;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2d3449;
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3a494a;
|
||||
}
|
||||
@keyframes pulse-cyan {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
.animate-pulse-cyan {
|
||||
animation: pulse-cyan 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-secondary-fixed-variant": "#005236",
|
||||
"secondary-fixed": "#6ffbbe",
|
||||
"on-error-container": "#ffdad6",
|
||||
"surface": "#0b1326",
|
||||
"surface-dim": "#0b1326",
|
||||
"on-primary": "#003739",
|
||||
"on-surface": "#dae2fd",
|
||||
"inverse-surface": "#dae2fd",
|
||||
"background": "#0b1326",
|
||||
"tertiary-fixed": "#e1e0ff",
|
||||
"surface-container": "#171f33",
|
||||
"primary-container": "#00f5ff",
|
||||
"surface-container-lowest": "#060e20",
|
||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
||||
"on-tertiary": "#1000a9",
|
||||
"on-secondary": "#003824",
|
||||
"surface-container-highest": "#2d3449",
|
||||
"on-primary-fixed-variant": "#004f53",
|
||||
"on-secondary-container": "#00311f",
|
||||
"on-error": "#690005",
|
||||
"tertiary": "#fcf8ff",
|
||||
"on-secondary-fixed": "#002113",
|
||||
"on-primary-fixed": "#002021",
|
||||
"surface-variant": "#2d3449",
|
||||
"inverse-primary": "#00696e",
|
||||
"surface-bright": "#31394d",
|
||||
"secondary": "#4edea3",
|
||||
"primary-fixed": "#63f7ff",
|
||||
"outline": "#849495",
|
||||
"surface-container-high": "#222a3d",
|
||||
"primary": "#e9feff",
|
||||
"secondary-fixed-dim": "#4edea3",
|
||||
"on-background": "#dae2fd",
|
||||
"on-surface-variant": "#b9caca",
|
||||
"error": "#ffb4ab",
|
||||
"secondary-container": "#00a572",
|
||||
"tertiary-fixed-dim": "#c0c1ff",
|
||||
"on-tertiary-container": "#4c4ed9",
|
||||
"surface-container-low": "#131b2e",
|
||||
"outline-variant": "#3a494a",
|
||||
"inverse-on-surface": "#283044",
|
||||
"on-primary-container": "#006c71",
|
||||
"primary-fixed-dim": "#00dce5",
|
||||
"error-container": "#93000a",
|
||||
"tertiary-container": "#dbdaff",
|
||||
"surface-tint": "#00dce5",
|
||||
"on-tertiary-fixed": "#07006c"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"container-max": "1280px",
|
||||
"gutter": "24px",
|
||||
"stack-sm": "8px",
|
||||
"margin-mobile": "16px",
|
||||
"stack-lg": "32px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Geist"],
|
||||
"body-md": ["Inter"],
|
||||
"metadata-caps": ["JetBrains Mono"],
|
||||
"label-mono": ["JetBrains Mono"],
|
||||
"headline-md": ["Geist"],
|
||||
"body-sm": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
||||
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"metadata-caps": ["12px", {"lineHeight": "1.0", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"label-mono": ["13px", {"lineHeight": "1.0", "fontWeight": "400"}],
|
||||
"headline-md": ["20px", {"lineHeight": "1.4", "fontWeight": "500"}],
|
||||
"body-sm": ["14px", {"lineHeight": "1.5", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body-md overflow-hidden">
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-xl border-b border-outline-variant/30 shadow-sm">
|
||||
<div class="flex justify-between items-center px-gutter py-stack-sm w-full max-w-container-max mx-auto">
|
||||
<div class="flex items-center gap-6">
|
||||
<span class="font-headline-md text-headline-md font-bold tracking-tight text-primary">VacatureRadar</span>
|
||||
<div class="hidden md:flex items-center bg-surface-container rounded-lg px-4 py-1.5 border border-outline-variant/20">
|
||||
<span class="material-symbols-outlined text-on-surface-variant mr-2" style="font-size: 18px;">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-sm w-64 placeholder:text-on-surface-variant" placeholder="Zoek werkgevers..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="cursor-pointer active:scale-95 transition-transform p-2 rounded-full hover:bg-surface-container-highest/50">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">notifications</span>
|
||||
</button>
|
||||
<button class="cursor-pointer active:scale-95 transition-transform p-2 rounded-full hover:bg-surface-container-highest/50">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">account_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex h-screen pt-[60px]">
|
||||
<!-- Side Navigation Bar -->
|
||||
<aside class="hidden md:flex flex-col h-full w-64 py-stack-lg gap-stack-md bg-surface-container border-r border-outline-variant/20 relative z-40">
|
||||
<nav class="flex-1 px-3 space-y-1 overflow-y-auto">
|
||||
<div class="px-3 mb-6">
|
||||
<button class="w-full bg-primary-container text-on-primary-container py-3 px-4 rounded-xl font-medium flex items-center justify-center gap-2 active:scale-[0.98] transition-transform">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">add</span>
|
||||
Nieuwe Zoekopdracht
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
Overview
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
||||
<span class="material-symbols-outlined">radar</span>
|
||||
New matches
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
||||
<span class="material-symbols-outlined">work</span>
|
||||
All vacancies
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
||||
<span class="material-symbols-outlined">bookmark</span>
|
||||
Saved
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
||||
<span class="material-symbols-outlined">assignment</span>
|
||||
Applications
|
||||
</a>
|
||||
<!-- Active State for 'Employers' -->
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-primary bg-primary-container/10 border-r-2 border-primary-container transition-all rounded-r-none active:translate-x-1 font-label-mono text-label-mono" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">domain</span>
|
||||
Employers
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
||||
<span class="material-symbols-outlined">hub</span>
|
||||
Sources
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
||||
<span class="material-symbols-outlined">precision_manufacturing</span>
|
||||
Automation
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
||||
<span class="material-symbols-outlined">person_search</span>
|
||||
Search profile
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
||||
<span class="material-symbols-outlined">history</span>
|
||||
Activity
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:text-primary hover:bg-surface-container-high transition-all rounded-lg active:translate-x-1 font-label-mono text-label-mono" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
Settings
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="px-6 pt-4 border-t border-outline-variant/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-gradient-to-tr from-primary-container to-secondary overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="A professional studio portrait of a modern recruiter in a dark tech-oriented office environment. The lighting is moody with cyan rim lights, matching the corporate minimalist aesthetic of the tool. The style is clean, sharp, and corporate, emphasizing intelligence and trustworthiness." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCky4z2aP9d2avHJjSx6_QzO3aUqX2sOanRdD6Br83O9pTkTm-GjDZm4wnsD4Ci2IfRKNXePe2bzhGEkUYa62ggWibmu6zqpHgXdPNsfpB2epGbh0h36OfhBRuG3JB1JPuawzrVkU-II7ezUlyXmOkT6w3vD5ds3eyr5nzcDaNwlfJNLIqH3EP5PoZt3xOqkHxrIx_py5fvNOcKmJLAy8EK7rTeCzFZ9of0HP9ID14LcDb72WdcOx66R2JKfhtoYH-hC4eOzqkwUaMb"/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-medium text-on-surface">Alex Radar</span>
|
||||
<span class="text-[10px] text-on-surface-variant font-label-mono">PRO ACCOUNT</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 relative overflow-y-auto bg-surface p-gutter">
|
||||
<div class="max-w-6xl mx-auto space-y-stack-lg">
|
||||
<!-- Header & Stats -->
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||||
<div>
|
||||
<span class="font-metadata-caps text-metadata-caps text-on-surface-variant mb-2 block tracking-widest uppercase">Intelligent Tracking</span>
|
||||
<h1 class="font-headline-lg text-headline-lg text-primary tracking-tight">Werkgevers Radar</h1>
|
||||
</div>
|
||||
<div class="flex gap-stack-md">
|
||||
<div class="px-4 py-2 bg-surface-container rounded-lg border border-outline-variant/30">
|
||||
<span class="text-[10px] block text-on-surface-variant font-label-mono">Gemonitord</span>
|
||||
<span class="text-xl font-bold font-headline-md">142</span>
|
||||
</div>
|
||||
<div class="px-4 py-2 bg-surface-container rounded-lg border border-outline-variant/30">
|
||||
<span class="text-[10px] block text-on-surface-variant font-label-mono">Actieve Vacatures</span>
|
||||
<span class="text-xl font-bold font-headline-md text-secondary">318</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento Grid Section: Top Insights -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-stack-md">
|
||||
<div class="md:col-span-2 p-6 bg-surface-container border border-outline-variant/30 rounded-xl relative overflow-hidden group">
|
||||
<div class="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[120px]">radar</span>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md mb-4 text-primary">Systeem Status</h3>
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="flex items-center gap-2 bg-secondary/10 px-3 py-1.5 rounded-full">
|
||||
<div class="w-2 h-2 rounded-full bg-secondary animate-pulse-cyan"></div>
|
||||
<span class="text-secondary text-sm font-medium">Scanning 142 bronnen</span>
|
||||
</div>
|
||||
<span class="text-on-surface-variant text-sm">Laatste update: 4 minuten geleden</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-4 bg-surface-container-low border border-outline-variant/10 rounded-lg">
|
||||
<p class="text-on-surface-variant text-xs font-label-mono mb-1">STRONGEST MATCH TREND</p>
|
||||
<p class="text-lg font-bold text-primary">ASML Eindhoven</p>
|
||||
<p class="text-[11px] text-on-surface-variant">8 nieuwe matches gevonden vandaag</p>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-container-low border border-outline-variant/10 rounded-lg">
|
||||
<p class="text-on-surface-variant text-xs font-label-mono mb-1">BRON GEZONDHEID</p>
|
||||
<p class="text-lg font-bold text-secondary">98.4% Optimal</p>
|
||||
<p class="text-[11px] text-on-surface-variant">Geen kritieke foutmeldingen</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 bg-surface-container border border-primary-container/30 rounded-xl signal-glow flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-headline-md mb-1 text-primary">Radar Intelligence</h3>
|
||||
<p class="text-sm text-on-surface-variant">AI Analyse van wervingsgedrag</p>
|
||||
</div>
|
||||
<div class="space-y-3 mt-4">
|
||||
<div class="flex justify-between items-center text-sm">
|
||||
<span class="text-on-surface-variant">Directe kanalen</span>
|
||||
<span class="font-label-mono text-secondary">82%</span>
|
||||
</div>
|
||||
<div class="w-full bg-surface-container-highest h-1 rounded-full overflow-hidden">
|
||||
<div class="bg-secondary h-full w-[82%]"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-sm">
|
||||
<span class="text-on-surface-variant">Recruitment bureaus</span>
|
||||
<span class="font-label-mono text-primary-container">18%</span>
|
||||
</div>
|
||||
<div class="w-full bg-surface-container-highest h-1 rounded-full overflow-hidden">
|
||||
<div class="bg-primary-container h-full w-[18%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mt-6 text-primary-container text-sm font-medium flex items-center gap-1 hover:underline">
|
||||
Bekijk trendrapportages
|
||||
<span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Employers Table -->
|
||||
<div class="bg-surface-container-low border border-outline-variant/20 rounded-xl overflow-hidden">
|
||||
<div class="p-4 border-b border-outline-variant/10 flex justify-between items-center">
|
||||
<h2 class="font-headline-md text-primary">Gevolgde Werkgevers</h2>
|
||||
<div class="flex gap-2">
|
||||
<button class="p-2 hover:bg-surface-container-highest rounded-lg transition-colors">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">filter_list</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-surface-container-highest rounded-lg transition-colors">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">sort</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="border-b border-outline-variant/10 bg-surface-container-lowest/50">
|
||||
<th class="p-4 font-label-mono text-[11px] text-on-surface-variant uppercase tracking-wider">Werkgever</th>
|
||||
<th class="p-4 font-label-mono text-[11px] text-on-surface-variant uppercase tracking-wider">Type</th>
|
||||
<th class="p-4 font-label-mono text-[11px] text-on-surface-variant uppercase tracking-wider">Locatie</th>
|
||||
<th class="p-4 font-label-mono text-[11px] text-on-surface-variant uppercase tracking-wider">Vacatures</th>
|
||||
<th class="p-4 font-label-mono text-[11px] text-on-surface-variant uppercase tracking-wider">Check</th>
|
||||
<th class="p-4 font-label-mono text-[11px] text-on-surface-variant uppercase tracking-wider">Gezondheid</th>
|
||||
<th class="p-4 font-label-mono text-[11px] text-on-surface-variant uppercase tracking-wider">Status</th>
|
||||
<th class="p-4"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant/10">
|
||||
<!-- Row 1: ASML -->
|
||||
<tr class="hover:bg-surface-container-highest/30 transition-colors cursor-pointer group" onclick="toggleDrawer('ASML')">
|
||||
<td class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-white flex items-center justify-center p-1">
|
||||
<img class="w-full h-full object-contain" data-alt="A minimalist tech company logo for ASML, featuring geometric lines in blue and white. High contrast, professional corporate branding style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCSxhmVexEg6i44EP4zrCuKIX_NyaSorLw2EGD5cngr8hSPRJtH6ZyZ_LFW82HFD8EnCmGhkducVpspLA0fqL6fAU3eqEy_CiHn_WrqHmn8UEpzYZza-Om0D2s7mw6iJSjjoouMT9kDUsb4no7okQwOI0mrhZ1Oi2Bu9DuN_MT3P12g7QuzoADpD2AVlSwf6RKd-2-TrzodEZ_Aa8zPyY3ULMQbJH2zc9gI7DE6TIKHH1b1RZIXY18Xw9YH3_Gv3HKSFTqnCj9Eo8zV"/>
|
||||
</div>
|
||||
<span class="font-medium text-primary">ASML</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4"><span class="px-2 py-0.5 rounded border border-outline-variant/30 text-[10px] font-label-mono text-on-surface-variant">DIRECT</span></td>
|
||||
<td class="p-4 text-sm text-on-surface-variant">Veldhoven, NL</td>
|
||||
<td class="p-4">
|
||||
<span class="text-sm font-bold text-secondary">42</span>
|
||||
<span class="text-[10px] text-on-secondary-fixed/50 ml-1">+3</span>
|
||||
</td>
|
||||
<td class="p-4 text-[11px] font-label-mono text-on-surface-variant">4m geleden</td>
|
||||
<td class="p-4">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span>
|
||||
<span class="text-[11px] text-secondary font-medium">HEALTHY</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<span class="text-[10px] bg-primary-container/20 text-primary-container px-2 py-1 rounded border border-primary-container/30">PRIORITY</span>
|
||||
</td>
|
||||
<td class="p-4 text-right">
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">insights</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2: Zorgregio Hasselt -->
|
||||
<tr class="hover:bg-surface-container-highest/30 transition-colors cursor-pointer group" onclick="toggleDrawer('Zorgregio Hasselt')">
|
||||
<td class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-surface-container-high flex items-center justify-center text-primary-container border border-outline-variant/30">
|
||||
<span class="material-symbols-outlined" style="font-size: 18px;">medical_services</span>
|
||||
</div>
|
||||
<span class="font-medium text-primary">Zorgregio Hasselt</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4"><span class="px-2 py-0.5 rounded border border-outline-variant/30 text-[10px] font-label-mono text-on-surface-variant">OVERHEID</span></td>
|
||||
<td class="p-4 text-sm text-on-surface-variant">Hasselt, BE</td>
|
||||
<td class="p-4"><span class="text-sm font-bold text-on-surface">12</span></td>
|
||||
<td class="p-4 text-[11px] font-label-mono text-on-surface-variant">1u geleden</td>
|
||||
<td class="p-4">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span>
|
||||
<span class="text-[11px] text-secondary font-medium">HEALTHY</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<span class="text-[10px] bg-surface-container-highest text-on-surface-variant px-2 py-1 rounded">STANDARD</span>
|
||||
</td>
|
||||
<td class="p-4 text-right">
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">insights</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3: Gemeente Genk -->
|
||||
<tr class="hover:bg-surface-container-highest/30 transition-colors cursor-pointer group" onclick="toggleDrawer('Gemeente Genk')">
|
||||
<td class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-surface-container-high flex items-center justify-center text-primary-container border border-outline-variant/30">
|
||||
<span class="material-symbols-outlined" style="font-size: 18px;">account_balance</span>
|
||||
</div>
|
||||
<span class="font-medium text-primary">Gemeente Genk</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4"><span class="px-2 py-0.5 rounded border border-outline-variant/30 text-[10px] font-label-mono text-on-surface-variant">DIRECT</span></td>
|
||||
<td class="p-4 text-sm text-on-surface-variant">Genk, BE</td>
|
||||
<td class="p-4"><span class="text-sm font-bold text-on-surface">5</span></td>
|
||||
<td class="p-4 text-[11px] font-label-mono text-on-surface-variant">3u geleden</td>
|
||||
<td class="p-4">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-error"></span>
|
||||
<span class="text-[11px] text-error font-medium">FAILED</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<span class="text-[10px] bg-surface-container-highest text-on-surface-variant px-2 py-1 rounded">IGNORED</span>
|
||||
</td>
|
||||
<td class="p-4 text-right">
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">insights</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<!-- Employer Intelligence Drawer -->
|
||||
<div class="fixed top-0 right-0 h-full w-full md:w-[480px] glass-panel border-l border-outline-variant/40 transform translate-x-full transition-transform duration-300 z-[60] shadow-2xl" id="intelligence-drawer">
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="p-6 border-b border-outline-variant/20 flex items-center justify-between">
|
||||
<div>
|
||||
<span class="text-[10px] font-label-mono text-secondary mb-1 block">INTEL REPORT #8421</span>
|
||||
<h2 class="font-headline-lg text-headline-lg text-primary" id="drawer-title">ASML Intelligence</h2>
|
||||
</div>
|
||||
<button class="p-2 hover:bg-surface-container-highest rounded-full transition-colors" onclick="toggleDrawer()">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto p-6 space-y-stack-lg">
|
||||
<!-- Visual Data Section -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="font-label-mono text-xs text-on-surface-variant uppercase tracking-widest">Match Patroon Historie</h3>
|
||||
<div class="h-40 w-full bg-surface-container-lowest rounded-lg border border-outline-variant/10 p-4 relative overflow-hidden">
|
||||
<!-- Abstract "Graph" Visualization -->
|
||||
<div class="absolute bottom-4 left-4 right-4 flex items-end gap-1 h-24">
|
||||
<div class="bg-primary-container/20 w-full h-[40%] rounded-t-sm border-t border-primary-container"></div>
|
||||
<div class="bg-primary-container/20 w-full h-[60%] rounded-t-sm border-t border-primary-container"></div>
|
||||
<div class="bg-primary-container/40 w-full h-[55%] rounded-t-sm border-t border-primary-container"></div>
|
||||
<div class="bg-primary-container/20 w-full h-[85%] rounded-t-sm border-t border-primary-container animate-pulse-cyan"></div>
|
||||
<div class="bg-primary-container/20 w-full h-[30%] rounded-t-sm border-t border-primary-container"></div>
|
||||
<div class="bg-primary-container/50 w-full h-[70%] rounded-t-sm border-t border-primary-container shadow-[0_0_10px_rgba(0,245,255,0.3)]"></div>
|
||||
<div class="bg-primary-container/20 w-full h-[45%] rounded-t-sm border-t border-primary-container"></div>
|
||||
</div>
|
||||
<div class="flex justify-between text-[10px] text-on-surface-variant font-label-mono mt-2 absolute bottom-0 left-4 right-4 h-4">
|
||||
<span>MAA</span><span>DIN</span><span>WOE</span><span>DON</span><span>VRI</span><span>ZAT</span><span>ZON</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stats Grid -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-4 bg-surface-container-high rounded-lg">
|
||||
<span class="text-[10px] text-on-surface-variant font-label-mono">Gem. Match Score</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-2xl font-bold text-secondary">88%</span>
|
||||
<span class="text-[10px] bg-secondary/10 text-secondary px-1.5 rounded">HIGH</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-container-high rounded-lg">
|
||||
<span class="text-[10px] text-on-surface-variant font-label-mono">Wervings-snelheid</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-2xl font-bold text-primary-container">14d</span>
|
||||
<span class="text-[10px] bg-primary-container/10 text-primary-container px-1.5 rounded">FAST</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Recent Vacancies -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="font-label-mono text-xs text-on-surface-variant uppercase tracking-widest">Historische Vacatures</h3>
|
||||
<span class="text-[10px] text-primary-container font-medium cursor-pointer hover:underline">Toon alles</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="p-3 bg-surface-container rounded-lg border border-outline-variant/10 hover:border-primary-container/30 transition-all cursor-pointer">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<span class="text-sm font-medium text-primary">Senior Data Systems Engineer</span>
|
||||
<span class="font-label-mono text-[11px] text-secondary">94% MATCH</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-[10px] text-on-surface-variant">
|
||||
<span>Gepost: 2 dagen geleden</span>
|
||||
<span class="flex items-center gap-1"><span class="w-1.5 h-1.5 bg-secondary rounded-full"></span> Actief</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 bg-surface-container rounded-lg border border-outline-variant/10 hover:border-primary-container/30 transition-all cursor-pointer opacity-70">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<span class="text-sm font-medium text-primary">Technical Project Manager</span>
|
||||
<span class="font-label-mono text-[11px] text-on-surface-variant">62% MATCH</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-[10px] text-on-surface-variant">
|
||||
<span>Gepost: 12 dagen geleden</span>
|
||||
<span class="flex items-center gap-1">Ingevuld</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Button -->
|
||||
<div class="pt-4">
|
||||
<button class="w-full bg-surface-bright hover:bg-surface-container-highest border border-outline-variant/30 text-on-surface py-3 rounded-xl font-medium transition-all active:scale-[0.98]">
|
||||
Contactpersoon Finder (AI)
|
||||
</button>
|
||||
<p class="text-[11px] text-center text-on-surface-variant mt-3 italic">"ASML zoekt vaak op maandagochtend rond 09:00 naar nieuwe talenten."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Script for interactions -->
|
||||
<script>
|
||||
function toggleDrawer(title) {
|
||||
const drawer = document.getElementById('intelligence-drawer');
|
||||
const drawerTitle = document.getElementById('drawer-title');
|
||||
|
||||
if (title) {
|
||||
drawerTitle.innerText = title + ' Intelligence';
|
||||
drawer.classList.remove('translate-x-full');
|
||||
} else {
|
||||
drawer.classList.add('translate-x-full');
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation state handling (visual only)
|
||||
const navLinks = document.querySelectorAll('aside nav a');
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
navLinks.forEach(l => {
|
||||
l.classList.remove('text-primary', 'bg-primary-container/10', 'border-r-2', 'border-primary-container');
|
||||
l.classList.add('text-on-surface-variant');
|
||||
});
|
||||
link.classList.add('text-primary', 'bg-primary-container/10', 'border-r-2', 'border-primary-container');
|
||||
link.classList.remove('text-on-surface-variant');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
@@ -0,0 +1,471 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 324 KiB |
Reference in New Issue
Block a user