repo: remove confirmed cross-project DockDeck Stitch scratch
GeoIntel release gates / Compile, test, contracts and builds (push) Canceled after 0s
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 0s
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:
-424
@@ -1,424 +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 | Integratie-instellingen</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist:wght@400;500;600;700;800&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>
|
|
||||||
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);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(30, 41, 59, 0.5);
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-panel:hover {
|
|
||||||
background: rgba(45, 52, 73, 0.5);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-dot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #4edea3;
|
|
||||||
box-shadow: 0 0 8px #4edea3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-dot.pulse {
|
|
||||||
animation: pulse-animation 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse-animation {
|
|
||||||
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(78, 222, 163, 0.7); }
|
|
||||||
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(78, 222, 163, 0); }
|
|
||||||
100% { transform: scale(0.95); 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;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom Switch */
|
|
||||||
.switch {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 44px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.switch input { opacity: 0; width: 0; height: 0; }
|
|
||||||
|
|
||||||
.slider {
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
top: 0; left: 0; right: 0; bottom: 0;
|
|
||||||
background-color: #2d3449;
|
|
||||||
transition: .4s;
|
|
||||||
border-radius: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider:before {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
height: 18px; width: 18px;
|
|
||||||
left: 3px; bottom: 3px;
|
|
||||||
background-color: white;
|
|
||||||
transition: .4s;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked + .slider { background-color: #00b47d; }
|
|
||||||
input:checked + .slider:before { transform: translateX(20px); }
|
|
||||||
|
|
||||||
.status-chip {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 2px 10px;
|
|
||||||
border-radius: 9999px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
border: 1px solid rgba(78, 222, 163, 0.2);
|
|
||||||
}
|
|
||||||
</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-md": ["Geist"],
|
|
||||||
"display-lg": ["Geist"],
|
|
||||||
"body-lg": ["Inter"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"body-md": ["Inter"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body class="bg-surface font-body-md text-on-surface">
|
|
||||||
<!-- TopNavBar -->
|
|
||||||
<header class="fixed top-0 w-full z-50 backdrop-blur-xl border-b border-outline-variant/20 bg-surface-glass shadow-sm flex justify-between items-center h-16 px-gutter">
|
|
||||||
<div class="flex items-center gap-base">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl" style="font-variation-settings: 'FILL' 1;">developer_board</span>
|
|
||||||
<h1 class="font-headline-md text-headline-md font-bold text-primary">DockDeck</h1>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-stack-md">
|
|
||||||
<nav class="flex items-center gap-6">
|
|
||||||
<a class="text-on-surface-variant hover:bg-surface-variant/50 transition-colors px-3 py-2 rounded-lg" href="#">Dashboard</a>
|
|
||||||
<a class="text-on-surface-variant hover:bg-surface-variant/50 transition-colors px-3 py-2 rounded-lg" href="#">Containers</a>
|
|
||||||
<a class="text-secondary font-bold px-3 py-2 rounded-lg" href="#">Integraties</a>
|
|
||||||
</nav>
|
|
||||||
<div class="h-6 w-[1px] bg-outline-variant/30"></div>
|
|
||||||
<div class="flex items-center gap-stack-sm">
|
|
||||||
<button class="material-symbols-outlined p-2 rounded-full hover:bg-surface-variant/50 transition-colors text-on-surface-variant">settings</button>
|
|
||||||
<button class="material-symbols-outlined p-2 rounded-full hover:bg-surface-variant/50 transition-colors text-on-surface-variant">account_circle</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- SideNavBar -->
|
|
||||||
<aside class="fixed left-0 top-16 h-[calc(100vh-64px)] w-64 bg-surface-container-low border-r border-outline-variant/10 flex flex-col p-base gap-stack-sm hidden xl:flex">
|
|
||||||
<div class="px-4 py-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container">
|
|
||||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">person</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-label-md text-label-md text-on-surface font-bold">Admin</p>
|
|
||||||
<p class="text-[12px] text-on-surface-variant">Unraid Server</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-1">
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-bright/30 hover:translate-x-1 duration-200 transition-all 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-3 text-on-surface-variant hover:bg-surface-bright/30 hover:translate-x-1 duration-200 transition-all rounded-lg" 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-3 text-on-surface-variant hover:bg-surface-bright/30 hover:translate-x-1 duration-200 transition-all 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-3 bg-secondary-container text-on-secondary-container rounded-lg" href="#">
|
|
||||||
<span class="material-symbols-outlined">settings_input_component</span>
|
|
||||||
<span class="font-label-md text-label-md font-bold">Integraties</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto space-y-1">
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant 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-3 text-on-surface-variant hover:bg-surface-bright/30 transition-all rounded-lg" href="#">
|
|
||||||
<span class="material-symbols-outlined text-error">logout</span>
|
|
||||||
<span class="font-label-md text-label-md">Logout</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content -->
|
|
||||||
<main class="xl:ml-64 pt-24 pb-12 px-6 md:px-12 max-w-7xl mx-auto">
|
|
||||||
<!-- Page Header -->
|
|
||||||
<div class="mb-12">
|
|
||||||
<h2 class="font-headline-lg text-headline-lg text-on-surface mb-2">Integratie-instellingen</h2>
|
|
||||||
<p class="text-on-surface-variant font-body-md max-w-2xl">
|
|
||||||
Beheer de kernverbindingen van je DockDeck-omgeving. Deze pagina configureert hoe DockDeck communiceert met je host-systeem en netwerklaag.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<!-- Bento Grid for Integrations -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
<!-- Unraid Metadata Panel -->
|
|
||||||
<div class="glass-panel rounded-xl p-6 flex flex-col gap-6 relative overflow-hidden">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl" style="font-variation-settings: 'FILL' 1;">info</span>
|
|
||||||
</div>
|
|
||||||
<div class="status-chip text-status-online">
|
|
||||||
<div class="active-dot pulse"></div>
|
|
||||||
<span>Verbonden</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Unraid Metadata</h3>
|
|
||||||
<p class="text-sm text-on-surface-variant italic">Leest automatisch systeem-informatie uit de Unraid OS API.</p>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-3 bg-surface-container-low/50 p-4 rounded-lg border border-outline-variant/10">
|
|
||||||
<div class="flex justify-between text-xs">
|
|
||||||
<span class="text-outline">CPU-Model</span>
|
|
||||||
<span class="text-on-surface font-mono">Intel Core i7-10700K</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between text-xs">
|
|
||||||
<span class="text-outline">OS Versie</span>
|
|
||||||
<span class="text-on-surface font-mono">6.12.4</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between text-xs">
|
|
||||||
<span class="text-outline">Uptime</span>
|
|
||||||
<span class="text-on-surface font-mono">14d 2u 43m</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto pt-4 flex items-center justify-between">
|
|
||||||
<span class="text-[10px] uppercase tracking-wider text-outline">Gezien: 2 min geleden</span>
|
|
||||||
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg font-label-md text-label-md hover:brightness-110 active:scale-95 transition-all">Test verbinding</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Docker Socket Proxy Panel -->
|
|
||||||
<div class="glass-panel rounded-xl p-6 flex flex-col gap-6">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 bg-secondary/10 rounded-xl flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-secondary text-3xl" style="font-variation-settings: 'FILL' 1;">terminal</span>
|
|
||||||
</div>
|
|
||||||
<div class="status-chip text-status-online">
|
|
||||||
<div class="active-dot pulse"></div>
|
|
||||||
<span>Verbonden</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Docker Socket Proxy</h3>
|
|
||||||
<p class="text-sm text-on-surface-variant italic">Leest alleen containerstatistieken. Write-access is geblokkeerd.</p>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-2">
|
|
||||||
<div class="flex items-center gap-2 text-sm text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined text-sm">check_circle</span>
|
|
||||||
<span>API Versie: 1.41</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 text-sm text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined text-sm">lock</span>
|
|
||||||
<span>Mode: Read-Only (Secure)</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 text-sm text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined text-sm">link</span>
|
|
||||||
<span class="font-mono text-xs">tcp://192.168.1.50:2375</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto pt-4 flex items-center justify-between">
|
|
||||||
<span class="text-[10px] uppercase tracking-wider text-outline">Sync: 15s geleden</span>
|
|
||||||
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg font-label-md text-label-md hover:brightness-110 active:scale-95 transition-all">Test verbinding</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Nginx Proxy Manager Panel -->
|
|
||||||
<div class="glass-panel rounded-xl p-6 flex flex-col gap-6 lg:col-span-1 md:col-span-2 lg:col-auto">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 bg-tertiary/10 rounded-xl flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-tertiary text-3xl" style="font-variation-settings: 'FILL' 1;">router</span>
|
|
||||||
</div>
|
|
||||||
<div class="status-chip text-status-degraded">
|
|
||||||
<div class="active-dot bg-status-degraded shadow-[0_0_8px_#ffb783]"></div>
|
|
||||||
<span class="text-status-degraded">Bezig met synchroniseren</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Nginx Proxy Manager</h3>
|
|
||||||
<p class="text-sm text-on-surface-variant italic">Leest proxy-hosts voor automatische URL-toewijzing.</p>
|
|
||||||
</div>
|
|
||||||
<div class="py-4 border-t border-b border-outline-variant/10 flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p class="font-label-md text-label-md text-on-surface">Externe URL's weergeven</p>
|
|
||||||
<p class="text-xs text-outline">Toon publieke domeinen in dashboard</p>
|
|
||||||
</div>
|
|
||||||
<label class="switch">
|
|
||||||
<input checked="" type="checkbox"/>
|
|
||||||
<span class="slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto flex items-center justify-between">
|
|
||||||
<span class="text-[10px] uppercase tracking-wider text-outline">Sync: 4m geleden</span>
|
|
||||||
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg font-label-md text-label-md hover:brightness-110 active:scale-95 transition-all">Test verbinding</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Global Status & Info -->
|
|
||||||
<div class="mt-stack-lg p-6 bg-surface-container-highest/30 rounded-xl border border-outline-variant/20 flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center text-secondary">
|
|
||||||
<span class="material-symbols-outlined text-2xl">security</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-bold text-on-surface">Veiligheidsmodus actief</h4>
|
|
||||||
<p class="text-sm text-on-surface-variant">Alle verbindingen zijn geconfigureerd als 'Read-Only'. DockDeck kan geen wijzigingen aanbrengen in uw infrastructuur.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-4 w-full md:w-auto">
|
|
||||||
<button class="flex-1 md:flex-none px-6 py-2.5 border border-outline-variant text-on-surface-variant rounded-lg font-label-md text-label-md hover:bg-surface-variant/50 transition-colors">Logboeken inzien</button>
|
|
||||||
<button class="flex-1 md:flex-none px-6 py-2.5 bg-primary text-on-primary rounded-lg font-label-md text-label-md font-bold hover:brightness-110 transition-all">Alles synchroniseren</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- Background Decoration -->
|
|
||||||
<div class="fixed top-0 left-0 w-full h-full -z-10 pointer-events-none opacity-20">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- Mobile Bottom Navigation Shell (Filter Logic Applied) -->
|
|
||||||
<nav class="md:hidden fixed bottom-0 left-0 w-full bg-surface-glass backdrop-blur-xl border-t border-outline-variant/10 flex justify-around items-center h-16 z-50">
|
|
||||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
|
|
||||||
<span class="material-symbols-outlined">dashboard</span>
|
|
||||||
<span class="text-[10px]">Overzicht</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
|
|
||||||
<span class="material-symbols-outlined">layers</span>
|
|
||||||
<span class="text-[10px]">Containers</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex flex-col items-center gap-1 text-secondary" href="#">
|
|
||||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">settings_input_component</span>
|
|
||||||
<span class="text-[10px] font-bold">Integraties</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="text-[10px]">Systeem</span>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
<script>
|
|
||||||
// Micro-interaction for Test Connection buttons
|
|
||||||
document.querySelectorAll('button').forEach(btn => {
|
|
||||||
if (btn.innerText === "Test verbinding") {
|
|
||||||
btn.addEventListener('click', function() {
|
|
||||||
const originalText = this.innerText;
|
|
||||||
this.innerHTML = '<span class="material-symbols-outlined animate-spin text-sm">refresh</span>';
|
|
||||||
this.classList.add('opacity-80');
|
|
||||||
this.disabled = true;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.innerHTML = '<span class="material-symbols-outlined text-sm">check</span> Succes';
|
|
||||||
this.classList.replace('bg-primary', 'bg-secondary');
|
|
||||||
this.classList.replace('text-on-primary', 'text-on-secondary');
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.innerText = originalText;
|
|
||||||
this.classList.replace('bg-secondary', 'bg-primary');
|
|
||||||
this.classList.replace('text-on-secondary', 'text-on-primary');
|
|
||||||
this.classList.remove('opacity-80');
|
|
||||||
this.disabled = false;
|
|
||||||
}, 2000);
|
|
||||||
}, 1200);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
Reference in New Issue
Block a user