repo: remove cross-project DockDeck Stitch input
GeoIntel release gates / Compile, test, contracts and builds (push) Canceled after 5s
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 5s
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:
-348
@@ -1,348 +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"/>
|
||||
<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=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"/>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('https://cdn.jsdelivr.net/gh/vercel/geist-font@main/packages/next/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('https://cdn.jsdelivr.net/gh/vercel/geist-font@main/packages/next/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('https://cdn.jsdelivr.net/gh/vercel/geist-font@main/packages/next/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Geist', sans-serif;
|
||||
background-color: #0b1326;
|
||||
color: #dbe2fd;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
/* Custom Switch Styling */
|
||||
.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: #c6c5d5;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
input:checked + .slider {
|
||||
background-color: #818cf8;
|
||||
}
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(20px);
|
||||
background-color: #0b1326;
|
||||
}
|
||||
|
||||
/* Glassmorphism/Tonal Depth */
|
||||
.glass-panel {
|
||||
background: rgba(23, 31, 51, 0.6);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"background": "#0b1326",
|
||||
"on-tertiary-fixed": "#07006c",
|
||||
"inverse-on-surface": "#283044",
|
||||
"error-container": "#93000a",
|
||||
"on-surface-variant": "#c6c5d5",
|
||||
"secondary-container": "#00a572",
|
||||
"inverse-surface": "#dbe2fd",
|
||||
"on-secondary-container": "#00311f",
|
||||
"on-error-container": "#ffdad6",
|
||||
"secondary-fixed": "#6ffbbe",
|
||||
"primary-fixed": "#e0e0ff",
|
||||
"on-secondary": "#003824",
|
||||
"tertiary-container": "#8689ff",
|
||||
"surface-container-lowest": "#060d20",
|
||||
"surface-container-high": "#222a3e",
|
||||
"tertiary": "#c0c1ff",
|
||||
"primary-fixed-dim": "#bdc2ff",
|
||||
"on-tertiary": "#1000a9",
|
||||
"surface-container": "#171f33",
|
||||
"on-primary-fixed": "#000767",
|
||||
"on-surface": "#dbe2fd",
|
||||
"on-error": "#690005",
|
||||
"surface-container-highest": "#2d3449",
|
||||
"on-tertiary-container": "#0f00a2",
|
||||
"on-background": "#dbe2fd",
|
||||
"secondary-fixed-dim": "#4edea3",
|
||||
"on-primary-container": "#101b8a",
|
||||
"inverse-primary": "#4953bc",
|
||||
"surface": "#0b1326",
|
||||
"on-secondary-fixed": "#002113",
|
||||
"tertiary-fixed-dim": "#c0c1ff",
|
||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
||||
"primary-container": "#818cf8",
|
||||
"outline": "#908f9e",
|
||||
"on-secondary-fixed-variant": "#005236",
|
||||
"surface-dim": "#0b1326",
|
||||
"surface-bright": "#31394e",
|
||||
"outline-variant": "#454653",
|
||||
"surface-container-low": "#131b2e",
|
||||
"surface-variant": "#2d3449",
|
||||
"secondary": "#4edea3",
|
||||
"primary": "#bdc2ff",
|
||||
"on-primary": "#131e8c",
|
||||
"error": "#ffb4ab",
|
||||
"tertiary-fixed": "#e1e0ff",
|
||||
"surface-tint": "#bdc2ff",
|
||||
"on-primary-fixed-variant": "#2f3aa3"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "1rem",
|
||||
"margin-mobile": "1rem",
|
||||
"gutter": "1.5rem",
|
||||
"stack-sm": "0.5rem",
|
||||
"container-max": "1280px",
|
||||
"stack-lg": "2rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Geist"],
|
||||
"label-caps": ["Geist"],
|
||||
"body-md": ["Geist"],
|
||||
"headline-lg-mobile": ["Geist"],
|
||||
"status-label": ["Geist"],
|
||||
"headline-md": ["Geist"],
|
||||
"body-sm": ["Geist"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
||||
"status-label": ["13px", {"lineHeight": "18px", "fontWeight": "500"}],
|
||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
|
||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background text-on-background min-h-screen flex flex-col">
|
||||
<!-- TopAppBar -->
|
||||
<header class="flex justify-between items-center px-gutter w-full h-16 bg-background dark:bg-background border-b border-outline-variant fixed top-0 z-50">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="font-headline-md text-headline-md font-bold text-primary">DockDeck</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-stack-md">
|
||||
<div class="flex items-center bg-surface-container-high px-4 py-2 rounded-full border border-outline-variant">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-sm mr-2">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-body-sm w-48 text-on-surface" placeholder="Zoek instellingen..." type="text"/>
|
||||
</div>
|
||||
<button class="material-symbols-outlined p-2 text-on-surface-variant hover:text-primary transition-colors cursor-pointer">settings</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex flex-1 pt-16 h-screen overflow-hidden">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="flex flex-col p-stack-md h-full bg-surface-container dark:bg-surface-container border-r border-outline-variant w-64 shrink-0 overflow-y-auto">
|
||||
<div class="mb-stack-lg">
|
||||
<h2 class="font-headline-md text-headline-md text-primary">Instellingen</h2>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant opacity-70">Beheer jouw omgeving</p>
|
||||
</div>
|
||||
<nav class="flex flex-col flex-1">
|
||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="font-body-md text-body-md">Algemeen</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
||||
<span class="material-symbols-outlined">apps</span>
|
||||
<span class="font-body-md text-body-md">Apps</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
||||
<span class="material-symbols-outlined">star</span>
|
||||
<span class="font-body-md text-body-md">Favorieten</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
||||
<span class="material-symbols-outlined">category</span>
|
||||
<span class="font-body-md text-body-md">Categorieën</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
||||
<span class="material-symbols-outlined">palette</span>
|
||||
<span class="font-body-md text-body-md">Uiterlijk</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer bg-primary-container text-on-primary-container font-medium rounded-lg">
|
||||
<span class="material-symbols-outlined">extension</span>
|
||||
<span class="font-body-md text-body-md">Integraties</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
||||
<span class="material-symbols-outlined">backup</span>
|
||||
<span class="font-body-md text-body-md">Back-up & Herstel</span>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="flex-1 overflow-y-auto p-gutter relative">
|
||||
<!-- Background Decoration -->
|
||||
<div class="absolute top-0 right-0 w-full h-full opacity-5 pointer-events-none">
|
||||
|
||||
</div>
|
||||
<div class="max-w-[1000px] mx-auto relative z-10">
|
||||
<div class="mb-stack-lg">
|
||||
<h1 class="font-headline-lg text-headline-lg text-on-surface mb-2">Integraties</h1>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant max-w-2xl">
|
||||
Koppel DockDeck aan je bestaande infrastructuur. Hieronder staan de actieve systeemintegraties. Deze verbindingen zijn essentieel voor de kernfunctionaliteit.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Integration Cards Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Unraid Metadata -->
|
||||
<div class="glass-panel rounded-xl p-stack-md flex flex-col justify-between hover:shadow-lg transition-shadow duration-300">
|
||||
<div>
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="w-12 h-12 bg-surface-container-highest rounded-lg flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">storage</span>
|
||||
</div>
|
||||
<div class="bg-surface-variant border border-outline-variant px-2 py-1 rounded text-[10px] font-label-caps text-on-surface-variant">READ-ONLY</div>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Unraid Metadata</h3>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mb-6">Synchroniseert serverstatus, CPU-gebruik en schijfinformatie rechtstreeks vanuit het OS.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-[#10b981]"></span>
|
||||
<span class="font-status-label text-status-label text-secondary">Verbonden</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Docker Socket Proxy -->
|
||||
<div class="glass-panel rounded-xl p-stack-md flex flex-col justify-between hover:shadow-lg transition-shadow duration-300">
|
||||
<div>
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="w-12 h-12 bg-surface-container-highest rounded-lg flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">terminal</span>
|
||||
</div>
|
||||
<div class="bg-surface-variant border border-outline-variant px-2 py-1 rounded text-[10px] font-label-caps text-on-surface-variant">READ-ONLY</div>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Docker Socket Proxy</h3>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mb-6">Veilige container-monitoring via een beperkte proxy zonder schrijf-rechten op de socket.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-[#10b981]"></span>
|
||||
<span class="font-status-label text-status-label text-secondary">Actief</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nginx Proxy Manager -->
|
||||
<div class="glass-panel border-primary/20 rounded-xl p-stack-md flex flex-col justify-between hover:shadow-lg transition-shadow duration-300 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 p-stack-sm">
|
||||
<div class="bg-surface-variant border border-outline-variant px-2 py-1 rounded text-[10px] font-label-caps text-on-surface-variant">READ-ONLY</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="w-12 h-12 bg-surface-container-highest rounded-lg flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">router</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Nginx Proxy Manager</h3>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mb-4">Haalt geconfigureerde hosts op voor automatische dashboard-mapping.</p>
|
||||
<div class="flex items-center justify-between bg-surface-container-lowest/50 p-3 rounded-lg border border-outline-variant/30 mb-2">
|
||||
<span class="font-body-sm text-body-sm text-on-surface">Externe URL's inschakelen</span>
|
||||
<label class="switch">
|
||||
<input checked="" type="checkbox"/>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-4">
|
||||
<span class="w-2 h-2 rounded-full bg-[#10b981]"></span>
|
||||
<span class="font-status-label text-status-label text-secondary">Gekoppeld</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Info Alert -->
|
||||
<div class="mt-stack-lg p-stack-md rounded-xl bg-surface-container-low border border-outline-variant flex gap-4">
|
||||
<span class="material-symbols-outlined text-primary">info</span>
|
||||
<div>
|
||||
<h4 class="font-body-md text-body-md font-medium text-on-surface">Privacy & Beveiliging</h4>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
||||
Alle bovenstaande integraties zijn geconfigureerd met het principe van 'least privilege'. DockDeck heeft geen toestemming om wijzigingen aan te brengen aan je containers of netwerkinstellingen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<!-- Mobile Navigation (Hidden on Desktop) -->
|
||||
<nav class="md:hidden fixed bottom-0 left-0 w-full bg-surface-container border-t border-outline-variant flex justify-around py-3 px-2 z-50">
|
||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<span class="text-[10px] font-label-caps">Home</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-fill">apps</span>
|
||||
<span class="text-[10px] font-label-caps">Apps</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center gap-1 text-primary">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">extension</span>
|
||||
<span class="text-[10px] font-label-caps">Instellingen</span>
|
||||
</button>
|
||||
</nav>
|
||||
<script>
|
||||
// Simple ripple effect for cards
|
||||
document.querySelectorAll('.glass-panel').forEach(card => {
|
||||
card.addEventListener('mousedown', function(e) {
|
||||
this.style.transform = 'scale(0.98)';
|
||||
this.style.transition = 'transform 0.1s ease';
|
||||
});
|
||||
card.addEventListener('mouseup', function(e) {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
card.addEventListener('mouseleave', function(e) {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user