repo: remove cross-project DockDeck Stitch input
GeoIntel release gates / Compile, test, contracts and builds (push) Canceled after 8s
GeoIntel release gates / Python and npm vulnerability policy (push) Canceled after 0s
GeoIntel release gates / GIS image, SBOM and container scan (push) Canceled after 0s
GeoIntel release gates / AI image, SBOM and container scan (push) Canceled after 0s
GeoIntel release gates / Compile, test, contracts and builds (push) Canceled after 8s
GeoIntel release gates / Python and npm vulnerability policy (push) Canceled after 0s
GeoIntel release gates / GIS image, SBOM and container scan (push) Canceled after 0s
GeoIntel release gates / AI image, SBOM and container scan (push) Canceled after 0s
This commit is contained in:
-492
@@ -1,492 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
|
|
||||||
<html class="dark" lang="nl"><head>
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
||||||
<title>DockDeck — Dashboard</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=Geist:wght@100..900&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"/>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"outline-variant": "#454653",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"on-tertiary-container": "#0f00a2",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"primary": "#bdc2ff",
|
|
||||||
"primary-container": "#818cf8",
|
|
||||||
"outline": "#908f9e",
|
|
||||||
"tertiary-container": "#8689ff",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"primary-fixed-dim": "#bdc2ff",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"tertiary-fixed": "#e1e0ff",
|
|
||||||
"primary-fixed": "#e0e0ff",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"on-tertiary": "#1000a9",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"on-primary": "#131e8c",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"on-primary-container": "#101b8a",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"inverse-primary": "#4953bc",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"surface-tint": "#bdc2ff",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"on-tertiary-fixed": "#07006c",
|
|
||||||
"on-primary-fixed-variant": "#2f3aa3",
|
|
||||||
"tertiary-fixed-dim": "#c0c1ff",
|
|
||||||
"tertiary": "#c0c1ff",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-surface-variant": "#c6c5d5",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"inverse-on-surface": "#283044"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.25rem",
|
|
||||||
"lg": "0.5rem",
|
|
||||||
"xl": "0.75rem",
|
|
||||||
"full": "9999px"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"margin-mobile": "1rem",
|
|
||||||
"stack-lg": "2rem",
|
|
||||||
"gutter": "1.5rem",
|
|
||||||
"container-max": "1280px",
|
|
||||||
"stack-sm": "0.5rem",
|
|
||||||
"stack-md": "1rem"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"headline-lg-mobile": ["Geist"],
|
|
||||||
"status-label": ["Geist"],
|
|
||||||
"body-md": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"body-sm": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"status-label": ["13px", {"lineHeight": "18px", "fontWeight": "500"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
||||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: 'Geist', sans-serif;
|
|
||||||
background-color: #0b1326;
|
|
||||||
color: #dbe2fd;
|
|
||||||
}
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(22, 31, 53, 0.6);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.glass-card:hover {
|
|
||||||
background: rgba(22, 31, 53, 0.8);
|
|
||||||
border-color: rgba(129, 140, 248, 0.3);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 10px 30px -10px rgba(129, 140, 248, 0.1);
|
|
||||||
}
|
|
||||||
.status-dot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
.dot-green { background-color: #10b981; }
|
|
||||||
.dot-red { background-color: #ef4444; }
|
|
||||||
.dot-slate { background-color: #94a3b8; }
|
|
||||||
|
|
||||||
::-webkit-scrollbar { width: 6px; }
|
|
||||||
::-webkit-scrollbar-track { background: #0b1326; }
|
|
||||||
::-webkit-scrollbar-thumb { background: #2d3449; border-radius: 10px; }
|
|
||||||
::-webkit-scrollbar-thumb:hover { background: #454653; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-surface selection:bg-primary-container selection:text-on-primary-container">
|
|
||||||
<!-- Top Navigation Bar -->
|
|
||||||
<header class="fixed top-0 left-0 right-0 z-50 bg-surface/80 backdrop-blur-md border-b border-outline-variant">
|
|
||||||
<div class="flex justify-between items-center h-16 px-gutter max-w-[1920px] mx-auto">
|
|
||||||
<div class="font-headline-md text-headline-md font-bold text-primary flex items-center gap-2 cursor-pointer">
|
|
||||||
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">dock</span>
|
|
||||||
<span>DockDeck</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a class="font-label-caps text-label-caps text-primary border-b-2 border-primary pb-1 transition-colors" href="#">Dashboard</a>
|
|
||||||
<a class="font-label-caps text-label-caps text-on-surface-variant hover:text-on-surface transition-colors" href="#">Favorieten</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="relative group hidden sm:block">
|
|
||||||
<input class="bg-surface-container-high border-none rounded-lg py-2 pl-10 pr-4 text-body-sm font-body-sm focus:ring-2 focus:ring-primary-container w-64 transition-all duration-300" placeholder="Diensten zoeken..." type="text"/>
|
|
||||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant group-focus-within:text-primary">search</span>
|
|
||||||
</div>
|
|
||||||
<button class="p-2 rounded-full hover:bg-surface-container-highest transition-colors active:scale-95 duration-150">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">sync</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 rounded-full hover:bg-surface-container-highest transition-colors active:scale-95 duration-150">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">settings</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<main class="pt-24 pb-12 px-gutter max-w-[1920px] mx-auto min-h-screen">
|
|
||||||
<!-- Welcome Section -->
|
|
||||||
<section class="mb-12">
|
|
||||||
<h1 class="font-headline-lg text-headline-lg mb-2">Goedenavond</h1>
|
|
||||||
<p class="font-body-md text-body-md text-on-surface-variant">Je digitale haven is klaar voor gebruik. Alle 24 diensten zijn operationeel.</p>
|
|
||||||
</section>
|
|
||||||
<!-- Dynamic Grid Layout -->
|
|
||||||
<div class="space-y-stack-lg">
|
|
||||||
<!-- Section: Favorieten -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
||||||
Favorieten
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
|
|
||||||
<!-- Service Card -->
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-primary-container/20 flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-3xl">cloud</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-[10px] px-2 py-1 rounded-full bg-secondary/10 text-secondary border border-secondary/20">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface truncate">Nextcloud</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Opslag & Sync</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Repeat for 6 items in Row -->
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-primary-container/20 flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-3xl">terminal</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-[10px] px-2 py-1 rounded-full bg-secondary/10 text-secondary border border-secondary/20">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface truncate">Portainer</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Container Management</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-primary-container/20 flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-3xl">mail</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-[10px] px-2 py-1 rounded-full bg-secondary/10 text-secondary border border-secondary/20">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface truncate">Mailserver</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Posteo Relay</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-primary-container/20 flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-3xl">monitoring</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-[10px] px-2 py-1 rounded-full bg-secondary/10 text-secondary border border-secondary/20">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface truncate">Grafana</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Server Statistieken</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-primary-container/20 flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-3xl">key</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-[10px] px-2 py-1 rounded-full bg-secondary/10 text-secondary border border-secondary/20">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface truncate">Vaultwarden</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Wachtwoordbeheer</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-primary-container/20 flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-3xl">dns</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-[10px] px-2 py-1 rounded-full bg-secondary/10 text-secondary border border-secondary/20">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface truncate">Pi-hole</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Advertentieblokkering</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section: Media -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-primary">play_circle</span>
|
|
||||||
Media
|
|
||||||
</h2>
|
|
||||||
<span class="font-label-caps text-on-surface-variant">3 Actieve Streams</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface group-hover:text-primary transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-3xl">movie</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">Plex</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Home Theater</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface group-hover:text-primary transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-3xl">music_note</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">Navidrome</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Muziek Streaming</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface group-hover:text-primary transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-3xl">download</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">Transmission</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Download Manager</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section: Smart Home -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-primary">home</span>
|
|
||||||
Smart Home
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface">
|
|
||||||
<span class="material-symbols-outlined text-3xl">settings_remote</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">Home Assistant</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Automatisering</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface">
|
|
||||||
<span class="material-symbols-outlined text-3xl">videocam</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">Frigate</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Beveiliging NVR</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-red"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Offline</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section: Productiviteit -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-primary">edit_note</span>
|
|
||||||
Productiviteit
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface">
|
|
||||||
<span class="material-symbols-outlined text-3xl">description</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">Paperless-ngx</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Documentenbeheer</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface">
|
|
||||||
<span class="material-symbols-outlined text-3xl">task_alt</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">Vikunja</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Takenlijst</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section: Netwerk -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-primary">hub</span>
|
|
||||||
Netwerk
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface">
|
|
||||||
<span class="material-symbols-outlined text-3xl">vpn_lock</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">WireGuard</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Toegang op Afstand</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface">
|
|
||||||
<span class="material-symbols-outlined text-3xl">router</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">UniFi Controller</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Netwerkbeheer</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- Floating Atmosphere Elements -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none -z-10 opacity-30 overflow-hidden">
|
|
||||||
<div class="absolute top-[-10%] right-[-10%] w-[500px] h-[500px] bg-primary rounded-full blur-[120px] mix-blend-screen animate-pulse"></div>
|
|
||||||
<div class="absolute bottom-[-10%] left-[-10%] w-[600px] h-[600px] bg-secondary rounded-full blur-[150px] mix-blend-screen animate-pulse" style="animation-delay: 2s;"></div>
|
|
||||||
</div>
|
|
||||||
<!-- Micro-interaction Script -->
|
|
||||||
<script>
|
|
||||||
// Simple search highlight simulation
|
|
||||||
const searchInput = document.querySelector('input[type="text"]');
|
|
||||||
const cards = document.querySelectorAll('.glass-card');
|
|
||||||
|
|
||||||
searchInput.addEventListener('input', (e) => {
|
|
||||||
const term = e.target.value.toLowerCase();
|
|
||||||
cards.forEach(card => {
|
|
||||||
const title = card.querySelector('h3').textContent.toLowerCase();
|
|
||||||
const desc = card.querySelector('p').textContent.toLowerCase();
|
|
||||||
if (title.includes(term) || desc.includes(term)) {
|
|
||||||
card.style.opacity = '1';
|
|
||||||
card.style.transform = 'scale(1)';
|
|
||||||
} else {
|
|
||||||
card.style.opacity = '0.4';
|
|
||||||
card.style.transform = 'scale(0.95)';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Hover lift effect enhancement
|
|
||||||
cards.forEach(card => {
|
|
||||||
card.addEventListener('mouseenter', () => {
|
|
||||||
card.style.zIndex = '10';
|
|
||||||
});
|
|
||||||
card.addEventListener('mouseleave', () => {
|
|
||||||
card.style.zIndex = '1';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
Reference in New Issue
Block a user