Jens/geointel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

repo: remove cross-project DockDeck Stitch input
GeoIntel release gates / Compile, test, contracts and builds (push) Canceled after 14s
Details
GeoIntel release gates / Python and npm vulnerability policy (push) Canceled after 0s
Details
GeoIntel release gates / GIS image, SBOM and container scan (push) Canceled after 0s
Details
GeoIntel release gates / AI image, SBOM and container scan (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Jens
2026-08-26 22:39:47 +02:00
parent 4216fa0cce
commit 69033cb738
1 changed files with 0 additions and 514 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/dockdeck_dashboard_categorie_weergave_definitief/code.html
-514
View File
@@ -1,514 +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 - Media Category</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&amp;family=Geist:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<style>
body {
background-color: #0b1326;
color: #dbe2fd;
font-family: 'Inter', sans-serif;
overflow-x: hidden;
}
.glass-panel {
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(30, 41, 59, 0.5);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-panel:hover {
background: rgba(45, 52, 73, 0.5);
transform: translateY(-2px);
border-color: rgba(192, 193, 255, 0.3);
}
.active-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #4edea3;
box-shadow: 0 0 8px #4edea3;
}
.pulse-online {
animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
0% { box-shadow: 0 0 0 0 rgba(78, 222, 163, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(78, 222, 163, 0); }
100% { box-shadow: 0 0 0 0 rgba(78, 222, 163, 0); }
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"surface-variant": "#2d3449",
"on-primary": "#292b5e",
"inverse-on-surface": "#283044",
"surface": "#0b1326",
"surface-container": "#171f33",
"surface-bright": "#31394e",
"on-secondary": "#003824",
"on-error-container": "#ffdad6",
"status-degraded": "#ffb783",
"surface-glass": "rgba(15, 23, 42, 0.6)",
"on-background": "#dbe2fd",
"on-tertiary": "#4f2500",
"status-online": "#4edea3",
"inverse-surface": "#dbe2fd",
"secondary-fixed": "#6ffbbe",
"on-tertiary-fixed-variant": "#703700",
"status-offline": "#ffb4ab",
"outline-variant": "#464554",
"on-primary-fixed": "#131449",
"surface-container-high": "#222a3e",
"primary-fixed": "#e1e0ff",
"on-secondary-container": "#003e28",
"outline": "#908fa0",
"tertiary-fixed-dim": "#ffb783",
"surface-tint": "#c0c1ff",
"tertiary-fixed": "#ffdcc5",
"error-container": "#93000a",
"secondary": "#4edea3",
"primary": "#c0c1ff",
"on-surface-variant": "#c7c4d7",
"on-tertiary-fixed": "#301400",
"on-secondary-fixed-variant": "#005236",
"error": "#ffb4ab",
"surface-container-low": "#131b2e",
"on-tertiary-container": "#452000",
"tertiary": "#ffb783",
"secondary-fixed-dim": "#4edea3",
"surface-container-highest": "#2d3449",
"secondary-container": "#00b47d",
"primary-fixed-dim": "#c0c1ff",
"on-primary-fixed-variant": "#404176",
"primary-container": "#8a8cc6",
"on-primary-container": "#222457",
"inverse-primary": "#585990",
"surface-container-lowest": "#060d20",
"on-secondary-fixed": "#002114",
"on-error": "#690005",
"background": "#0b1326",
"on-surface": "#dbe2fd",
"tertiary-container": "#d97721",
"surface-dim": "#0b1326"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"gutter": "24px",
"stack-lg": "48px",
"margin-desktop": "40px",
"margin-mobile": "16px",
"base": "8px",
"stack-md": "24px",
"container-max": "1440px",
"stack-sm": "12px"
},
"fontFamily": {
"label-md": ["Geist"],
"headline-lg-mobile": ["Geist"],
"code-sm": ["Geist"],
"headline-md": ["Geist"],
"display-lg": ["Geist"],
"body-lg": ["Inter"],
"headline-lg": ["Geist"],
"body-md": ["Inter"]
},
"fontSize": {
"label-md": ["14px", {"lineHeight": "20px", "letterSpacing": "0.02em", "fontWeight": "500"}],
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"code-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "500"}],
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
"body-lg": ["18px", {"lineHeight": "28px", "fontWeight": "400"}],
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
}
},
},
}
</script>
</head>
<body class="bg-background text-on-surface">
<!-- TopNavBar -->
<header class="fixed top-0 w-full backdrop-blur-xl border-b border-outline-variant/20 shadow-sm flex justify-between items-center h-16 px-gutter w-full z-50 bg-surface-glass">
<div class="flex items-center gap-4">
<h1 class="font-headline-md text-headline-md font-bold text-primary">DockDeck</h1>
</div>
<div class="hidden md:flex flex-1 max-w-xl mx-8">
<div class="relative w-full group">
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
<input class="w-full bg-surface-container-low border-none rounded-full py-2 pl-12 pr-4 text-on-surface focus:ring-2 focus:ring-primary-container transition-all group-hover:bg-surface-variant/50" placeholder="Search apps, containers..." type="text"/>
</div>
</div>
<div class="flex items-center gap-2">
<button class="p-2 rounded-full hover:bg-surface-variant/50 transition-colors active:scale-95 duration-150 text-on-surface-variant">
<span class="material-symbols-outlined">settings</span>
</button>
<button class="p-2 rounded-full hover:bg-surface-variant/50 transition-colors active:scale-95 duration-150 text-on-surface-variant">
<span class="material-symbols-outlined">account_circle</span>
</button>
</div>
</header>
<!-- SideNavBar -->
<aside class="fixed left-0 top-16 h-[calc(100vh-64px)] w-64 border-r border-outline-variant/10 bg-surface-container-low hidden xl:flex flex-col p-base gap-stack-sm z-40">
<div class="p-4 mb-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center overflow-hidden">
<img class="w-full h-full object-cover" data-alt="A cinematic, high-resolution portrait of a futuristic server administrator wearing glowing interface glasses. The background consists of soft-focus blue server rack LEDs in a dark, navy-blue data center. The lighting is dramatic and moody, reflecting the DockDeck brand colors of indigo and neon cyan. Professional digital art style with sharp details and shallow depth of field." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB-7JJ3A0IU1hUBF4QHgXKf5qeXImYUEv7GOOpKmVP4Q9ajsx68FxHL6yMrRlXOTHG_Na6K9o5TJ0vV2hYEMyHmAecURpSrsLJNr3h5yX9iU9P9AwewPKw3LYcwl_YiATtjtnma7CUOCEO-wILqRCLCNI3XAKfhrX3-hJhp7XWLhGqQT4JX7lHOfMM3gWqhe0Fg-yxr30Xs8UDYUpP2MvpHZ2BVXGc1LaTidBJie_UrKDku8qLBtx7uajC9-BCNXsVSObF8UE4p_6hJ"/>
</div>
<div>
<p class="font-label-md text-label-md text-on-surface">Admin</p>
<p class="text-[12px] text-on-surface-variant">Unraid Server</p>
</div>
</div>
</div>
<nav class="space-y-1">
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover:translate-x-1 duration-200 rounded-lg" href="#">
<span class="material-symbols-outlined">dashboard</span>
<span class="font-label-md text-label-md">Dashboard</span>
</a>
<a class="flex items-center gap-3 px-4 py-2 bg-secondary-container text-on-secondary-container rounded-lg transition-all translate-x-1 duration-200" href="#">
<span class="material-symbols-outlined">layers</span>
<span class="font-label-md text-label-md">Containers</span>
</a>
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover:translate-x-1 duration-200 rounded-lg" href="#">
<span class="material-symbols-outlined">image</span>
<span class="font-label-md text-label-md">Images</span>
</a>
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover:translate-x-1 duration-200 rounded-lg" href="#">
<span class="material-symbols-outlined">lan</span>
<span class="font-label-md text-label-md">Network</span>
</a>
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover:translate-x-1 duration-200 rounded-lg" href="#">
<span class="material-symbols-outlined">settings</span>
<span class="font-label-md text-label-md">Settings</span>
</a>
</nav>
<div class="mt-auto space-y-1 pt-4 border-t border-outline-variant/10">
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg" href="#">
<span class="material-symbols-outlined">description</span>
<span class="font-label-md text-label-md">Docs</span>
</a>
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg" href="#">
<span class="material-symbols-outlined">logout</span>
<span class="font-label-md text-label-md">Logout</span>
</a>
</div>
</aside>
<!-- Main Content Canvas -->
<main class="xl:pl-64 pt-16 min-h-screen">
<div class="max-w-[1440px] mx-auto p-gutter space-y-stack-lg">
<!-- Breadcrumbs & Category Title -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div class="space-y-1">
<nav class="flex items-center gap-2 text-on-surface-variant font-label-md text-label-md mb-2">
<a class="hover:text-primary transition-colors" href="#">Overzicht</a>
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
<span class="text-on-surface">Media</span>
</nav>
<h2 class="font-headline-lg text-headline-lg text-on-surface flex items-center gap-3">
<span class="material-symbols-outlined text-secondary text-3xl">movie</span>
Media Bibliotheek
</h2>
</div>
<button class="flex items-center gap-2 px-6 py-2.5 bg-primary text-on-primary rounded-full font-label-md text-label-md hover:brightness-110 active:scale-95 transition-all">
<span class="material-symbols-outlined">add</span>
Nieuwe App
</button>
</div>
<!-- Bento Grid Section: Favorites -->
<section class="space-y-stack-md">
<h3 class="font-label-md text-label-md text-on-surface-variant flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">star</span>
FAVORIETEN
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Plex -->
<div class="glass-panel p-6 rounded-xl flex flex-col justify-between h-48 relative group overflow-hidden">
<div class="absolute top-4 right-4">
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-secondary/20 bg-secondary/5">
<div class="active-dot pulse-online"></div>
<span class="text-[10px] font-bold text-secondary tracking-widest uppercase">Online</span>
</div>
</div>
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center border border-outline-variant/30 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-primary text-3xl" style="font-variation-settings: 'FILL' 1;">play_circle</span>
</div>
<div>
<h4 class="font-headline-md text-[20px] text-on-surface mb-1">Plex</h4>
<p class="text-on-surface-variant font-body-md text-[14px]">Media Server • Local: 32400</p>
</div>
<div class="absolute -bottom-1 -right-1 opacity-5">
<span class="material-symbols-outlined text-8xl">play_circle</span>
</div>
</div>
<!-- Jellyfin -->
<div class="glass-panel p-6 rounded-xl flex flex-col justify-between h-48 relative group overflow-hidden">
<div class="absolute top-4 right-4">
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-secondary/20 bg-secondary/5">
<div class="active-dot pulse-online"></div>
<span class="text-[10px] font-bold text-secondary tracking-widest uppercase">Online</span>
</div>
</div>
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center border border-outline-variant/30 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-secondary text-3xl">cast</span>
</div>
<div>
<h4 class="font-headline-md text-[20px] text-on-surface mb-1">Jellyfin</h4>
<p class="text-on-surface-variant font-body-md text-[14px]">Open Source Media • Port 8096</p>
</div>
</div>
<!-- Sonarr -->
<div class="glass-panel p-6 rounded-xl flex flex-col justify-between h-48 relative group overflow-hidden">
<div class="absolute top-4 right-4">
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-secondary/20 bg-secondary/5">
<div class="active-dot pulse-online"></div>
<span class="text-[10px] font-bold text-secondary tracking-widest uppercase">Online</span>
</div>
</div>
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center border border-outline-variant/30 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-tertiary text-3xl">tv_guide</span>
</div>
<div>
<h4 class="font-headline-md text-[20px] text-on-surface mb-1">Sonarr</h4>
<p class="text-on-surface-variant font-body-md text-[14px]">TV Series Manager • Port 8989</p>
</div>
</div>
<!-- Radarr -->
<div class="glass-panel p-6 rounded-xl flex flex-col justify-between h-48 relative group overflow-hidden">
<div class="absolute top-4 right-4">
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-status-degraded/20 bg-status-degraded/5">
<div class="w-2 h-2 rounded-full bg-status-degraded"></div>
<span class="text-[10px] font-bold text-status-degraded tracking-widest uppercase">Degraded</span>
</div>
</div>
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center border border-outline-variant/30 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-status-degraded text-3xl">movie_edit</span>
</div>
<div>
<h4 class="font-headline-md text-[20px] text-on-surface mb-1">Radarr</h4>
<p class="text-on-surface-variant font-body-md text-[14px]">Movie Manager • Port 7878</p>
</div>
</div>
</div>
</section>
<!-- All Media Apps Section -->
<section class="space-y-stack-md">
<div class="flex items-center justify-between">
<h3 class="font-label-md text-label-md text-on-surface-variant flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">list</span>
ALLE MEDIA APPS
</h3>
<div class="flex items-center gap-2">
<button class="p-2 hover:bg-surface-variant/50 rounded-lg text-on-surface-variant transition-colors">
<span class="material-symbols-outlined">grid_view</span>
</button>
<button class="p-2 hover:bg-surface-variant/50 rounded-lg text-on-surface-variant transition-colors">
<span class="material-symbols-outlined">list</span>
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Tautulli -->
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
<span class="material-symbols-outlined text-primary">monitoring</span>
</div>
<div class="flex-1 overflow-hidden">
<h4 class="font-label-md text-on-surface truncate">Tautulli</h4>
<div class="flex items-center gap-2 mt-1">
<div class="w-2 h-2 rounded-full bg-secondary"></div>
<span class="text-[12px] text-on-surface-variant">Active Monitoring</span>
</div>
</div>
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
</div>
<!-- Bazarr -->
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
<span class="material-symbols-outlined text-secondary">subtitles</span>
</div>
<div class="flex-1 overflow-hidden">
<h4 class="font-label-md text-on-surface truncate">Bazarr</h4>
<div class="flex items-center gap-2 mt-1">
<div class="w-2 h-2 rounded-full bg-secondary"></div>
<span class="text-[12px] text-on-surface-variant">Subtitles Manager</span>
</div>
</div>
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
</div>
<!-- Overseerr -->
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
<span class="material-symbols-outlined text-tertiary">request_page</span>
</div>
<div class="flex-1 overflow-hidden">
<h4 class="font-label-md text-on-surface truncate">Overseerr</h4>
<div class="flex items-center gap-2 mt-1">
<div class="w-2 h-2 rounded-full bg-secondary"></div>
<span class="text-[12px] text-on-surface-variant">Requests Portal</span>
</div>
</div>
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
</div>
<!-- Prowlarr -->
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
<span class="material-symbols-outlined text-primary">search_check</span>
</div>
<div class="flex-1 overflow-hidden">
<h4 class="font-label-md text-on-surface truncate">Prowlarr</h4>
<div class="flex items-center gap-2 mt-1">
<div class="w-2 h-2 rounded-full bg-secondary"></div>
<span class="text-[12px] text-on-surface-variant">Indexer Manager</span>
</div>
</div>
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
</div>
<!-- Transmission -->
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
<span class="material-symbols-outlined text-secondary">download</span>
</div>
<div class="flex-1 overflow-hidden">
<h4 class="font-label-md text-on-surface truncate">Transmission</h4>
<div class="flex items-center gap-2 mt-1">
<div class="w-2 h-2 rounded-full bg-secondary"></div>
<span class="text-[12px] text-on-surface-variant">Torrent Client</span>
</div>
</div>
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
</div>
<!-- Sabnzbd -->
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
<span class="material-symbols-outlined text-status-offline">download_done</span>
</div>
<div class="flex-1 overflow-hidden">
<h4 class="font-label-md text-on-surface truncate">Sabnzbd</h4>
<div class="flex items-center gap-2 mt-1">
<div class="w-2 h-2 rounded-full bg-status-offline"></div>
<span class="text-[12px] text-on-surface-variant">Offline</span>
</div>
</div>
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
</div>
<!-- Lidarr -->
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
<span class="material-symbols-outlined text-primary">music_note</span>
</div>
<div class="flex-1 overflow-hidden">
<h4 class="font-label-md text-on-surface truncate">Lidarr</h4>
<div class="flex items-center gap-2 mt-1">
<div class="w-2 h-2 rounded-full bg-secondary"></div>
<span class="text-[12px] text-on-surface-variant">Music Manager</span>
</div>
</div>
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
</div>
<!-- Audiobookshelf -->
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
<span class="material-symbols-outlined text-tertiary">menu_book</span>
</div>
<div class="flex-1 overflow-hidden">
<h4 class="font-label-md text-on-surface truncate">Audiobookshelf</h4>
<div class="flex items-center gap-2 mt-1">
<div class="w-2 h-2 rounded-full bg-secondary"></div>
<span class="text-[12px] text-on-surface-variant">Audio Server</span>
</div>
</div>
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
</div>
</div>
</section>
<!-- Quick Navigation Footer/Back -->
<div class="pt-stack-lg border-t border-outline-variant/10 flex flex-col items-center gap-6">
<p class="text-on-surface-variant font-body-md">Klaar met media beheer?</p>
<a class="flex items-center gap-3 px-8 py-3 glass-panel rounded-full text-primary hover:bg-primary hover:text-on-primary transition-all" href="#">
<span class="material-symbols-outlined">grid_view</span>
Terug naar 'Alles'
</a>
</div>
</div>
</main>
<!-- Mobile Bottom Navigation Shell -->
<nav class="fixed bottom-0 left-0 right-0 h-16 bg-surface-glass backdrop-blur-xl border-t border-outline-variant/20 md:hidden flex justify-around 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-bold">Overzicht</span>
</button>
<button class="flex flex-col items-center gap-1 text-secondary">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">movie</span>
<span class="text-[10px] font-bold">Media</span>
</button>
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
<span class="material-symbols-outlined">terminal</span>
<span class="text-[10px] font-bold">Logs</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-bold">Instellingen</span>
</button>
</nav>
<!-- Background Atmospheric Effect -->
<div class="fixed inset-0 pointer-events-none z-[-1]">
<div class="absolute top-[-10%] right-[-10%] w-[50%] h-[50%] bg-primary/10 blur-[120px] rounded-full"></div>
<div class="absolute bottom-[-10%] left-[-10%] w-[50%] h-[50%] bg-secondary/5 blur-[120px] rounded-full"></div>
</div>
<script>
// Simple search interactivity
const searchInput = document.querySelector('input[type="text"]');
searchInput.addEventListener('focus', () => {
searchInput.parentElement.classList.add('scale-[1.02]');
});
searchInput.addEventListener('blur', () => {
searchInput.parentElement.classList.remove('scale-[1.02]');
});
// Hover animation for cards using vanilla JS for extra spice
document.querySelectorAll('.glass-panel').forEach(card => {
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
card.style.setProperty('--mouse-x', `${x}px`);
card.style.setProperty('--mouse-y', `${y}px`);
});
});
</script>
</body></html>