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