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:08:53 +02:00
parent ce67f56002
commit c7b121b1cd
1 changed files with 0 additions and 392 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_back_up_definitief/code.html
-392
View File
@@ -1,392 +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=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600&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&family=Inter:wght@100..900&display=swap" rel="stylesheet"/>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.glass-panel {
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(30, 41, 59, 0.5);
}
.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;
}
.pulse-animation {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: .5; }
}
body {
background-color: #0b1326;
color: #dbe2fd;
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-error-container": "#ffdad6",
"surface-glass": "rgba(15, 23, 42, 0.6)",
"on-surface": "#dbe2fd",
"inverse-surface": "#dbe2fd",
"background": "#0b1326",
"surface-dim": "#0b1326",
"on-primary": "#292b5e",
"surface": "#0b1326",
"on-tertiary": "#4f2500",
"on-tertiary-fixed-variant": "#703700",
"surface-container-highest": "#2d3449",
"on-secondary": "#003824",
"on-primary-fixed": "#131449",
"tertiary": "#ffb783",
"on-error": "#690005",
"inverse-primary": "#585990",
"primary-fixed": "#e1e0ff",
"outline": "#908fa0",
"secondary": "#4edea3",
"secondary-fixed-dim": "#4edea3",
"error": "#ffb4ab",
"inverse-on-surface": "#283044",
"outline-variant": "rgba(30, 41, 59, 0.5)",
"primary-fixed-dim": "#c0c1ff",
"error-container": "#93000a",
"tertiary-container": "#d97721",
"status-degraded": "#ffb783",
"secondary-fixed": "#6ffbbe",
"on-secondary-fixed-variant": "#005236",
"surface-container-lowest": "#060d20",
"primary-container": "#8a8cc6",
"tertiary-fixed": "#ffdcc5",
"surface-container": "#171f33",
"on-primary-fixed-variant": "#404176",
"on-secondary-fixed": "#002114",
"on-secondary-container": "#003e28",
"surface-variant": "#2d3449",
"on-surface-variant": "#c7c4d7",
"surface-bright": "#31394e",
"primary": "#c0c1ff",
"surface-container-high": "#222a3e",
"on-background": "#dbe2fd",
"surface-container-low": "#131b2e",
"tertiary-fixed-dim": "#ffb783",
"on-tertiary-container": "#452000",
"secondary-container": "#00b47d",
"status-online": "#4edea3",
"on-primary-container": "#222457",
"status-offline": "#ffb4ab",
"surface-tint": "#c0c1ff",
"on-tertiary-fixed": "#301400"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"stack-lg": "48px",
"margin-mobile": "16px",
"base": "8px",
"stack-sm": "12px",
"stack-md": "24px",
"container-max": "1440px",
"margin-desktop": "40px",
"gutter": "24px"
},
"fontFamily": {
"headline-md": ["Geist"],
"body-lg": ["Inter"],
"display-lg": ["Geist"],
"label-md": ["Geist"],
"headline-lg": ["Geist"],
"body-md": ["Inter"],
"headline-lg-mobile": ["Geist"],
"code-sm": ["Geist"]
},
"fontSize": {
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "500"}],
"body-lg": ["18px", {"lineHeight": "28px", "fontWeight": "400"}],
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
"label-md": ["14px", {"lineHeight": "20px", "letterSpacing": "0.02em", "fontWeight": "500"}],
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"code-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}]
}
},
},
}
</script>
</head>
<body class="font-body-md text-on-surface">
<!-- Top Navigation Bar -->
<header class="fixed top-0 w-full z-50 flex justify-between items-center h-16 px-gutter backdrop-blur-xl border-b border-outline-variant/20 bg-surface-glass shadow-sm">
<div class="flex items-center gap-base">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">terminal</span>
<h1 class="font-headline-md text-headline-md font-bold text-primary">DockDeck</h1>
</div>
<div class="hidden md:flex flex-1 max-w-2xl mx-12">
<div class="relative w-full">
<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 h-10 pl-12 pr-4 rounded-xl bg-surface-container-low border-none focus:ring-2 focus:ring-primary-container text-body-md transition-all" placeholder="Zoek in instellingen..." type="text"/>
</div>
</div>
<div class="flex items-center gap-4">
<button class="p-2 rounded-full hover:bg-surface-variant/50 transition-colors active:scale-95 duration-150">
<span class="material-symbols-outlined text-on-surface-variant">settings</span>
</button>
<button class="p-2 rounded-full hover:bg-surface-variant/50 transition-colors active:scale-95 duration-150">
<span class="material-symbols-outlined text-on-surface-variant">account_circle</span>
</button>
</div>
</header>
<!-- Side Navigation Bar -->
<aside class="fixed left-0 top-16 h-[calc(100vh-64px)] w-64 bg-surface-container-low border-r border-outline-variant/10 hidden xl:flex flex-col p-base gap-stack-sm z-40">
<div class="flex items-center gap-3 px-4 py-6">
<div class="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center">
<span class="material-symbols-outlined text-on-secondary-container" style="font-variation-settings: 'FILL' 1;">person</span>
</div>
<div>
<p class="font-label-md text-label-md text-primary font-bold">Admin</p>
<p class="text-[12px] text-on-surface-variant">Unraid Server</p>
</div>
</div>
<nav class="flex-1 space-y-1">
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover:translate-x-1 duration-200" 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 rounded-lg text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover: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-3 rounded-lg text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover:translate-x-1 duration-200" 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 rounded-lg text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover:translate-x-1 duration-200" 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-3 rounded-lg bg-secondary-container text-on-secondary-container font-bold transition-all" href="#">
<span class="material-symbols-outlined">settings</span>
<span class="font-label-md text-label-md">Settings</span>
</a>
</nav>
<div class="pt-4 border-t border-outline-variant/10 space-y-1">
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all" 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 rounded-lg text-error hover:bg-error-container/20 transition-all" 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:ml-64 mt-16 p-6 md:p-10 min-h-screen">
<div class="max-w-container-max mx-auto space-y-stack-lg">
<!-- Page Header -->
<section class="space-y-2">
<h2 class="font-headline-lg text-headline-lg text-primary">Back-up & Herstel</h2>
<p class="font-body-md text-on-surface-variant max-w-3xl">Beheer de configuratie van uw DockDeck omgeving. Exporteer uw huidige setup naar een lokaal bestand of herstel een eerdere sessie.</p>
</section>
<!-- Warning Callout -->
<div class="glass-panel rounded-xl p-4 flex gap-4 border-l-4 border-tertiary">
<span class="material-symbols-outlined text-tertiary">warning</span>
<div>
<h4 class="font-label-md text-label-md text-tertiary">Belangrijke informatie over secrets</h4>
<p class="text-sm text-on-surface-variant mt-1">Om veiligheidsredenen worden gevoelige gegevens zoals API-sleutels, wachtwoorden en database-credentials <strong>niet</strong> meegeëxporteerd. Deze moeten na een herstel handmatig opnieuw worden ingevoerd.</p>
</div>
</div>
<!-- Bento Grid Layout -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-md">
<!-- Export Card -->
<div class="glass-panel rounded-2xl p-8 flex flex-col justify-between min-h-[320px] transition-all group">
<div>
<div class="w-12 h-12 rounded-xl bg-primary-container/20 flex items-center justify-center mb-6 text-primary">
<span class="material-symbols-outlined text-[32px]">download</span>
</div>
<h3 class="font-headline-md text-headline-md text-on-surface mb-3">Configuratie exporteren</h3>
<p class="font-body-md text-on-surface-variant">Creëer een JSON-snapshot van al uw dashboard-instellingen, container-links en UI-voorkeuren. Handig voor migraties of herstel bij dataverlies.</p>
</div>
<div class="mt-8">
<button class="w-full bg-primary text-on-primary py-4 rounded-xl font-bold flex items-center justify-center gap-2 hover:brightness-110 active:scale-[0.98] transition-all">
<span class="material-symbols-outlined">cloud_download</span>
Start Export (.json)
</button>
</div>
</div>
<!-- Import Card (Drag & Drop) -->
<div class="glass-panel rounded-2xl p-8 flex flex-col border-2 border-dashed border-outline-variant/40 hover:border-secondary/50 min-h-[320px] transition-all relative group cursor-pointer" id="drop-zone">
<div class="flex-1 flex flex-col items-center justify-center text-center">
<div class="w-16 h-16 rounded-full bg-secondary-container/20 flex items-center justify-center mb-6 text-secondary group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-[40px]">upload_file</span>
</div>
<h3 class="font-headline-md text-headline-md text-on-surface mb-3">Back-up importeren</h3>
<p class="font-body-md text-on-surface-variant px-4">Sleep uw configuratiebestand hierheen of klik om te bladeren.</p>
<input accept=".json" class="hidden" id="file-input" type="file"/>
</div>
<!-- Validation Status (Hidden by default) -->
<div class="hidden mt-6 p-4 rounded-xl bg-surface-container-highest border border-outline-variant/30 animate-in fade-in slide-in-from-bottom-4 duration-300" id="validation-status">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined" id="status-icon">hourglass_empty</span>
<div>
<p class="font-label-md text-label-md text-on-surface font-bold" id="file-name">backup_2023.json</p>
<p class="text-xs text-on-surface-variant" id="status-text">Bezig met valideren...</p>
</div>
</div>
<div class="w-3 h-3 rounded-full bg-on-surface-variant" id="status-indicator"></div>
</div>
</div>
</div>
</div>
<!-- Recent Activity / History -->
<section class="space-y-stack-sm">
<div class="flex items-center justify-between">
<h3 class="font-headline-md text-headline-md text-on-surface">Recente Back-ups</h3>
<button class="text-secondary text-sm font-bold hover:underline">Geschiedenis wissen</button>
</div>
<div class="glass-panel rounded-xl overflow-hidden">
<table class="w-full text-left">
<thead class="bg-surface-container-high/50 text-on-surface-variant text-xs uppercase tracking-wider">
<tr>
<th class="px-6 py-4 font-semibold">Datum</th>
<th class="px-6 py-4 font-semibold">Bestand</th>
<th class="px-6 py-4 font-semibold">Grootte</th>
<th class="px-6 py-4 font-semibold">Status</th>
<th class="px-6 py-4 font-semibold text-right">Actie</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant/10">
<tr class="hover:bg-surface-variant/20 transition-colors">
<td class="px-6 py-4 font-label-md text-label-md">Vandaag, 14:20</td>
<td class="px-6 py-4 font-body-md">dockdeck_full_config.json</td>
<td class="px-6 py-4 text-on-surface-variant">1.2 MB</td>
<td class="px-6 py-4">
<span class="flex items-center gap-2 text-secondary text-sm">
<span class="active-dot pulse-animation"></span>
Succesvol
</span>
</td>
<td class="px-6 py-4 text-right">
<button class="text-primary hover:text-primary-fixed transition-colors">
<span class="material-symbols-outlined">download</span>
</button>
</td>
</tr>
<tr class="hover:bg-surface-variant/20 transition-colors">
<td class="px-6 py-4 font-label-md text-label-md">12 Okt 2023</td>
<td class="px-6 py-4 font-body-md">manual_export.json</td>
<td class="px-6 py-4 text-on-surface-variant">845 KB</td>
<td class="px-6 py-4">
<span class="flex items-center gap-2 text-secondary text-sm">
<span class="active-dot"></span>
Succesvol
</span>
</td>
<td class="px-6 py-4 text-right">
<button class="text-primary hover:text-primary-fixed transition-colors">
<span class="material-symbols-outlined">download</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</main>
<!-- Bottom Navigation (Mobile Only) -->
<nav class="md:hidden fixed bottom-0 w-full h-16 bg-surface-glass backdrop-blur-xl border-t border-outline-variant/20 flex justify-around items-center px-4 z-50">
<button class="flex flex-col items-center text-on-surface-variant hover:text-secondary">
<span class="material-symbols-outlined">dashboard</span>
</button>
<button class="flex flex-col items-center text-on-surface-variant hover:text-secondary">
<span class="material-symbols-outlined">layers</span>
</button>
<button class="flex flex-col items-center text-secondary font-bold">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">settings</span>
</button>
<button class="flex flex-col items-center text-on-surface-variant hover:text-secondary">
<span class="material-symbols-outlined">person</span>
</button>
</nav>
<script>
const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('file-input');
const validationStatus = document.getElementById('validation-status');
const fileNameLabel = document.getElementById('file-name');
const statusText = document.getElementById('status-text');
const statusIndicator = document.getElementById('status-indicator');
const statusIcon = document.getElementById('status-icon');
dropZone.addEventListener('click', () => fileInput.click());
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('border-secondary', 'bg-secondary/5');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('border-secondary', 'bg-secondary/5');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('border-secondary', 'bg-secondary/5');
const files = e.dataTransfer.files;
if (files.length) handleFile(files[0]);
});
fileInput.addEventListener('change', (e) => {
if (e.target.files.length) handleFile(e.target.files[0]);
});
function handleFile(file) {
validationStatus.classList.remove('hidden');
fileNameLabel.textContent = file.name;
statusText.textContent = 'Valideren...';
statusIndicator.className = 'w-3 h-3 rounded-full bg-tertiary pulse-animation';
statusIcon.textContent = 'hourglass_empty';
statusIcon.className = 'material-symbols-outlined text-tertiary';
// Simulate validation
setTimeout(() => {
if (file.name.endsWith('.json')) {
statusText.textContent = 'Geldige configuratie gevonden';
statusIndicator.className = 'w-3 h-3 rounded-full bg-secondary';
statusIcon.textContent = 'check_circle';
statusIcon.className = 'material-symbols-outlined text-secondary';
} else {
statusText.textContent = 'Ongeldig bestandstype. Gebruik .json';
statusIndicator.className = 'w-3 h-3 rounded-full bg-error';
statusIcon.textContent = 'error';
statusIcon.className = 'material-symbols-outlined text-error';
}
}, 1500);
}
</script>
</body></html>