370 lines
21 KiB
HTML
370 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="nl"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>VacatureRadar | 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> |