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

repo: remove confirmed cross-project DockDeck Stitch scratch
GeoIntel release gates / Compile, test, contracts and builds (push) Canceled after 0s
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-27 00:09:50 +02:00
parent 330d5c1521
commit fd751c3c5d
1 changed files with 0 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/instellingen_integraties/code.html
-369
View File
@@ -1,369 +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=Inter:wght@400;500&amp;family=Geist:wght@400;500;600;700&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"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"primary-container": "#8083ff",
"surface-container-lowest": "#060e20",
"on-primary-fixed": "#07006c",
"on-primary-container": "#0d0096",
"inverse-primary": "#494bd6",
"tertiary": "#ffb783",
"secondary-fixed-dim": "#4edea3",
"surface-container-highest": "#2d3449",
"secondary-container": "#00a572",
"primary-fixed-dim": "#c0c1ff",
"on-primary-fixed-variant": "#2f2ebe",
"tertiary-fixed-dim": "#ffb783",
"surface-tint": "#c0c1ff",
"on-surface": "#dae2fd",
"tertiary-fixed": "#ffdcc5",
"tertiary-container": "#d97721",
"surface-dim": "#0b1326",
"error-container": "#93000a",
"on-secondary-fixed": "#002113",
"surface-container-high": "#222a3d",
"primary-fixed": "#e1e0ff",
"outline": "#908fa0",
"background": "#0b1326",
"on-secondary-container": "#00311f",
"on-error": "#690005",
"surface-container": "#171f33",
"surface-bright": "#31394d",
"surface": "#0b1326",
"primary": "#c0c1ff",
"on-secondary": "#003824",
"on-error-container": "#ffdad6",
"on-primary": "#1000a9",
"inverse-on-surface": "#283044",
"surface-variant": "#2d3449",
"secondary": "#4edea3",
"outline-variant": "#464554",
"secondary-fixed": "#6ffbbe",
"inverse-surface": "#dae2fd",
"on-tertiary-container": "#452000",
"surface-container-low": "#131b2e",
"on-tertiary-fixed-variant": "#703700",
"on-tertiary-fixed": "#301400",
"on-background": "#dae2fd",
"on-surface-variant": "#c7c4d7",
"on-secondary-fixed-variant": "#005236",
"error": "#ffb4ab",
"on-tertiary": "#4f2500"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"stack-md": "24px",
"stack-sm": "12px",
"container-max": "1440px",
"stack-lg": "48px",
"margin-desktop": "40px",
"gutter": "24px",
"margin-mobile": "16px",
"base": "8px"
},
"fontFamily": {
"headline-lg": ["Geist"],
"body-md": ["Inter"],
"headline-md": ["Geist"],
"display-lg": ["Geist"],
"body-lg": ["Inter"],
"code-sm": ["Geist"],
"label-md": ["Geist"],
"headline-lg-mobile": ["Geist"]
},
"fontSize": {
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"body-md": ["16px", {"lineHeight": "24px", "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"}],
"code-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
"label-md": ["14px", {"lineHeight": "20px", "letterSpacing": "0.02em", "fontWeight": "500"}],
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
}
},
},
}
</script>
<style>
body {
background-color: #0b1326;
color: #dae2fd;
-webkit-font-smoothing: antialiased;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.status-pulse {
animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-ring {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(1.1); }
}
.glass-header {
background: rgba(11, 19, 38, 0.8);
backdrop-filter: blur(12px);
}
.custom-toggle:checked + .toggle-dot {
transform: translateX(100%);
background-color: #4edea3;
}
</style>
</head>
<body class="font-body-md text-body-md overflow-x-hidden">
<!-- TopNavBar Shell -->
<nav class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-margin-desktop h-16 bg-surface-dim/80 backdrop-blur-md border-b border-outline-variant">
<div class="flex items-center gap-8">
<span class="font-headline-md text-headline-md font-bold text-primary">DockDeck</span>
<div class="hidden md:flex gap-6 items-center">
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Dashboard</a>
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Logs</a>
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Console</a>
</div>
</div>
<div class="flex items-center gap-4">
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-all active:scale-95" data-icon="search"></button>
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-all active:scale-95" data-icon="notifications"></button>
<button class="material-symbols-outlined text-primary border-b-2 border-primary pb-1" data-icon="settings"></button>
<div class="w-8 h-8 rounded-full bg-surface-container-highest overflow-hidden border border-outline-variant">
<img class="w-full h-full object-cover" data-alt="A sophisticated professional profile portrait of a high-tech system administrator in a dark, minimalist office. The aesthetic is tech-noir with soft cyan backlighting against a deep navy background, reflecting the premium modernist UI of DockDeck. Sharp focus, professional lighting, cinematic quality." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAERNdVdFy38jIV84LSdSXVOpwxDjCOhBtJUMIGaFwr7O-3ynupe-V9jdk3bokkTSCzVyExOifaFppYaS1cRDeU9-wmGnmQ59Yw5cMUJEDQ3dqSJDDmH9JcCVgSUaZ2RC98-TP3hG1AO5OclQExS7s_Nv4dmoCahmVidGuSBCqCE8rVcITVLzHa0Tx0sW2Oi1IJZPA5CYnJdZYFylsRdfbyXqJrEYLbnLTNWcyjwTjQ5ZylBWLNG11FrR-6WMT4XY6-DUr0SYaMdtTE"/>
</div>
</div>
</nav>
<!-- SideNavBar Shell -->
<aside class="fixed left-0 top-16 bottom-0 w-64 flex flex-col p-4 bg-surface-container-low border-r border-outline-variant hidden md:flex">
<div class="mb-8 px-2 flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-primary-container/20 flex items-center justify-center text-primary">
<span class="material-symbols-outlined" data-icon="hub" style="font-variation-settings: 'FILL' 1;"></span>
</div>
<div>
<p class="font-headline-md text-label-md font-bold text-primary">Unraid Engine</p>
<p class="text-[10px] uppercase tracking-wider text-on-surface-variant">6.12.4 - Stable</p>
</div>
</div>
<div class="flex-1 space-y-1">
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface transition-all rounded-lg font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" data-icon="dashboard"></span> Overview
</a>
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface transition-all rounded-lg font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" data-icon="memory"></span> System
</a>
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface transition-all rounded-lg font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" data-icon="lan"></span> Network
</a>
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface transition-all rounded-lg font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" data-icon="database"></span> Storage
</a>
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface transition-all rounded-lg font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" data-icon="backup"></span> Backups
</a>
<a class="flex items-center gap-3 px-3 py-2 bg-primary-container text-on-primary-container rounded-lg font-label-md text-label-md active:translate-x-1 transition-transform" href="#">
<span class="material-symbols-outlined" data-icon="hub"></span> Registry
</a>
</div>
<div class="pt-4 border-t border-outline-variant space-y-1 mt-auto">
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface transition-all rounded-lg font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" data-icon="help"></span> Documentation
</a>
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface transition-all rounded-lg font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" data-icon="chat_bubble"></span> Support
</a>
</div>
</aside>
<!-- Main Content Canvas -->
<main class="md:ml-64 pt-24 px-margin-mobile md:px-margin-desktop pb-12 max-w-container-max mx-auto">
<header class="mb-stack-lg">
<div class="flex items-center gap-2 text-on-surface-variant mb-2">
<span class="material-symbols-outlined text-[18px]" data-icon="settings"></span>
<span class="font-label-md text-label-md uppercase tracking-widest">Instellingen</span>
</div>
<h1 class="font-headline-lg text-headline-lg text-on-surface">Integraties</h1>
<p class="font-body-md text-body-md text-on-surface-variant max-w-2xl mt-2">
Beheer de verbindingen tussen DockDeck en je server-infrastructuur. Zorg voor een actieve sync om realtime statistieken en container-beheer mogelijk te maken.
</p>
</header>
<div class="grid gap-gutter">
<!-- Integration List -->
<section class="space-y-4">
<!-- Integration Card: Unraid -->
<div class="bg-surface-container-low border border-outline-variant rounded-xl p-6 hover:shadow-lg transition-all group">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-xl bg-surface-container-highest flex items-center justify-center text-primary border border-outline-variant shrink-0">
<span class="material-symbols-outlined text-[28px]" data-icon="dns" style="font-variation-settings: 'FILL' 1;"></span>
</div>
<div>
<h3 class="font-headline-md text-headline-md text-on-surface">Unraid OS</h3>
<p class="text-on-surface-variant font-body-md">Primaire server management interface en OS statistieken.</p>
<div class="mt-2 flex items-center gap-4">
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-secondary/10 text-secondary text-[12px] font-medium border border-secondary/20">
<span class="w-2 h-2 rounded-full bg-secondary status-pulse"></span>
Verbonden
</span>
<span class="text-[12px] text-outline flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]" data-icon="sync"></span>
Laatste sync: 2 min geleden
</span>
</div>
</div>
</div>
<div class="flex items-center gap-3">
<button class="px-4 py-2 rounded-lg border border-outline-variant text-on-surface hover:bg-surface-container-high transition-colors font-label-md text-label-md active:scale-95">
Verbinding Testen
</button>
<button class="material-symbols-outlined p-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high rounded-lg transition-all" data-icon="more_vert"></button>
</div>
</div>
</div>
<!-- Integration Card: Docker Socket Proxy -->
<div class="bg-surface-container-low border border-outline-variant rounded-xl p-6 hover:shadow-lg transition-all">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-xl bg-surface-container-highest flex items-center justify-center text-primary border border-outline-variant shrink-0">
<span class="material-symbols-outlined text-[28px]" data-icon="layers" style="font-variation-settings: 'FILL' 1;"></span>
</div>
<div>
<h3 class="font-headline-md text-headline-md text-on-surface">Docker Socket Proxy</h3>
<p class="text-on-surface-variant font-body-md">Beveiligde toegang tot de Docker API voor containerbeheer.</p>
<div class="mt-2 flex items-center gap-4">
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-error/10 text-error text-[12px] font-medium border border-error/20">
<span class="w-2 h-2 rounded-full bg-error"></span>
Fout
</span>
<span class="text-[12px] text-error/60 flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]" data-icon="history"></span>
Time-out bij verbinding (14:32)
</span>
</div>
</div>
</div>
<div class="flex items-center gap-3">
<button class="px-4 py-2 rounded-lg bg-primary text-on-primary hover:bg-primary-container transition-colors font-label-md text-label-md active:scale-95 shadow-md">
Opnieuw Proberen
</button>
<button class="material-symbols-outlined p-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high rounded-lg transition-all" data-icon="more_vert"></button>
</div>
</div>
</div>
<!-- Integration Card: Nginx Proxy Manager -->
<div class="bg-surface-container-low border border-outline-variant rounded-xl p-6 hover:shadow-lg transition-all relative overflow-hidden">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-6">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-xl bg-surface-container-highest flex items-center justify-center text-primary border border-outline-variant shrink-0">
<span class="material-symbols-outlined text-[28px]" data-icon="swap_calls" style="font-variation-settings: 'FILL' 1;"></span>
</div>
<div>
<h3 class="font-headline-md text-headline-md text-on-surface">Nginx Proxy Manager</h3>
<p class="text-on-surface-variant font-body-md">Automatische SSL en Reverse Proxy routering voor je containers.</p>
<div class="mt-2 flex items-center gap-4">
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-secondary/10 text-secondary text-[12px] font-medium border border-secondary/20">
<span class="w-2 h-2 rounded-full bg-secondary status-pulse"></span>
Verbonden
</span>
<span class="text-[12px] text-outline flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]" data-icon="sync"></span>
Laatste sync: Zojuist
</span>
</div>
</div>
</div>
<div class="flex items-center gap-3">
<button class="px-4 py-2 rounded-lg border border-outline-variant text-on-surface hover:bg-surface-container-high transition-colors font-label-md text-label-md active:scale-95">
Verbinding Testen
</button>
<button class="material-symbols-outlined p-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high rounded-lg transition-all" data-icon="more_vert"></button>
</div>
</div>
<!-- NPM Specific Toggle -->
<div class="pt-4 border-t border-outline-variant flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-[20px]" data-icon="link"></span>
<span class="font-label-md text-on-surface">Externe URL's activeren</span>
<span class="material-symbols-outlined text-outline text-[16px] cursor-help" data-icon="info" title="Maakt containers bereikbaar via publieke domeinen geregistreerd in NPM."></span>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input checked="" class="sr-only peer custom-toggle" type="checkbox"/>
<div class="w-11 h-6 bg-surface-container-highest rounded-full peer peer-checked:bg-secondary/30 transition-all"></div>
<div class="absolute left-1 top-1 w-4 h-4 bg-outline rounded-full transition-transform toggle-dot"></div>
</label>
</div>
</div>
</section>
<!-- Bottom Action Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-md mt-stack-md">
<div class="p-6 rounded-xl bg-surface-container-lowest border border-dashed border-outline-variant flex flex-col items-center justify-center text-center group cursor-pointer hover:border-primary transition-colors">
<div class="w-12 h-12 rounded-full bg-surface-container-high flex items-center justify-center mb-4 group-hover:text-primary transition-colors">
<span class="material-symbols-outlined text-[32px]" data-icon="add"></span>
</div>
<h4 class="font-headline-md text-label-md font-bold text-on-surface">Nieuwe Integratie Toevoegen</h4>
<p class="text-on-surface-variant text-[12px] mt-1">Verbind met Home Assistant, Plex of Tautulli.</p>
</div>
<div class="p-6 rounded-xl bg-surface-container-lowest border border-outline-variant flex flex-col justify-between">
<div>
<h4 class="font-headline-md text-label-md font-bold text-on-surface">Systeem Status</h4>
<p class="text-on-surface-variant text-[12px] mt-1">Global Health Check van alle verbindingen.</p>
</div>
<div class="flex items-center justify-between mt-4">
<div class="flex -space-x-2">
<div class="w-8 h-8 rounded-full bg-secondary border-2 border-surface-container-lowest flex items-center justify-center text-[10px] text-on-secondary font-bold">98%</div>
<div class="w-8 h-8 rounded-full bg-surface-container-high border-2 border-surface-container-lowest flex items-center justify-center text-primary"><span class="material-symbols-outlined text-[14px]" data-icon="bolt"></span></div>
</div>
<a class="text-primary text-[12px] font-medium hover:underline" href="#">Bekijk Rapport →</a>
</div>
</div>
</div>
</div>
</main>
<!-- FAB Suppression: Contextually hidden as per rules for Settings screens -->
<script>
// Micro-interaction for the toggle
document.querySelectorAll('.custom-toggle').forEach(toggle => {
toggle.addEventListener('change', function() {
const parent = this.closest('div');
if(this.checked) {
console.log('Integratie optie geactiveerd');
} else {
console.log('Integratie optie gedeactiveerd');
}
});
});
// Simulating a "Test Connection" loading state
document.querySelectorAll('button').forEach(btn => {
if(btn.innerText.includes('Testen')) {
btn.addEventListener('click', function() {
const originalText = this.innerText;
this.disabled = true;
this.innerHTML = `<span class="flex items-center gap-2"><svg class="animate-spin h-4 w-4 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Laden...</span>`;
setTimeout(() => {
this.disabled = false;
this.innerText = "Succes!";
this.classList.add('bg-secondary/20', 'text-secondary', 'border-secondary/30');
setTimeout(() => {
this.innerText = originalText;
this.classList.remove('bg-secondary/20', 'text-secondary', 'border-secondary/30');
}, 2000);
}, 1500);
});
}
});
</script>
</body></html>