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:04:41 +02:00
parent 3aeeae24cf
commit d04d7da491
1 changed files with 0 additions and 350 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_mobiel_definitief/code.html
-350
View File
@@ -1,350 +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 | Mobile Dashboard</title>
<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&amp;family=Inter:wght@400;500;600&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>
:root {
--glass-bg: rgba(15, 23, 42, 0.6);
--glass-border: rgba(30, 41, 59, 0.5);
}
body {
background-color: #0b1326;
color: #dbe2fd;
font-family: 'Inter', sans-serif;
-webkit-tap-highlight-color: transparent;
}
.glass-panel {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
}
.active-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #4edea3;
box-shadow: 0 0 8px #4edea3;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(0.95); opacity: 0.8; }
50% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(0.95); opacity: 0.8; }
}
.safe-area-bottom {
padding-bottom: env(safe-area-inset-bottom);
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
</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>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="flex flex-col min-h-screen">
<!-- Top Bar Component -->
<header class="fixed top-0 w-full z-50 glass-panel shadow-sm h-16 flex justify-between items-center px-gutter">
<div class="flex items-center gap-2">
<span class="font-headline-md text-headline-md font-bold text-primary">DockDeck</span>
</div>
<div class="flex items-center gap-stack-sm">
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-variant/50 transition-colors active:scale-95">
<span class="material-symbols-outlined text-on-surface-variant">account_circle</span>
</button>
</div>
</header>
<!-- Main Content Canvas -->
<main class="flex-1 mt-16 px-margin-mobile pb-32 pt-stack-sm overflow-x-hidden">
<!-- Search Section -->
<section class="mb-stack-md">
<div class="relative group">
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-on-surface-variant">search</span>
</div>
<input class="w-full h-14 bg-surface-container-low border-none rounded-xl pl-12 pr-4 text-on-surface placeholder:text-on-surface-variant focus:ring-2 focus:ring-primary-container transition-all text-body-md" placeholder="Snel zoeken naar apps..." type="text"/>
</div>
</section>
<!-- Status Overview (Subtle) -->
<section class="mb-stack-md flex gap-stack-sm overflow-x-auto no-scrollbar">
<div class="glass-panel px-4 py-3 rounded-xl flex items-center gap-3 shrink-0">
<div class="active-dot"></div>
<span class="font-label-md text-label-md text-on-surface">Server Online</span>
</div>
<div class="glass-panel px-4 py-3 rounded-xl flex items-center gap-3 shrink-0 border-outline-variant/30">
<span class="material-symbols-outlined text-secondary scale-75">layers</span>
<span class="font-label-md text-label-md text-on-surface">12 Containers</span>
</div>
</section>
<!-- Favorites (Bento Style) -->
<section class="mb-stack-md">
<h2 class="font-headline-md text-headline-md mb-stack-sm px-1 text-primary">Favorieten</h2>
<div class="grid grid-cols-2 gap-4">
<!-- App Tile 1 -->
<div class="glass-panel p-4 rounded-xl relative group active:scale-95 transition-transform">
<div class="w-12 h-12 rounded-xl bg-primary-container/20 flex items-center justify-center mb-4">
<span class="material-symbols-outlined text-primary text-3xl">terminal</span>
</div>
<span class="font-label-md text-label-md block text-on-surface mb-1">Terminal</span>
<span class="text-[10px] text-on-surface-variant uppercase tracking-wider font-bold">In gebruik</span>
<div class="absolute top-4 right-4">
<div class="active-dot"></div>
</div>
</div>
<!-- App Tile 2 -->
<div class="glass-panel p-4 rounded-xl relative group active:scale-95 transition-transform">
<div class="w-12 h-12 rounded-xl bg-secondary-container/20 flex items-center justify-center mb-4">
<span class="material-symbols-outlined text-secondary text-3xl">storage</span>
</div>
<span class="font-label-md text-label-md block text-on-surface mb-1">Nextcloud</span>
<span class="text-[10px] text-on-surface-variant uppercase tracking-wider font-bold">Actief</span>
<div class="absolute top-4 right-4">
<div class="active-dot"></div>
</div>
</div>
<!-- Long Tile -->
<div class="col-span-2 glass-panel p-4 rounded-xl flex items-center gap-4 active:scale-[0.98] transition-transform">
<div class="w-14 h-14 rounded-xl bg-tertiary-container/20 flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-tertiary text-4xl">dns</span>
</div>
<div class="flex-1">
<span class="font-label-md text-label-md block text-on-surface">Pi-Hole AdBlocker</span>
<div class="flex items-center gap-2 mt-1">
<span class="text-[11px] text-on-surface-variant">2.4k Verzoeken geblokkeerd</span>
</div>
</div>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
</div>
</section>
<!-- Categories / All Apps Grid -->
<section class="mb-stack-md">
<div class="flex justify-between items-center mb-stack-sm px-1">
<h2 class="font-headline-md text-headline-md text-primary">Alle Apps</h2>
<button class="text-secondary font-label-md text-label-md">Bekijk alles</button>
</div>
<div class="grid grid-cols-4 gap-3">
<!-- Compact App Icons -->
<div class="flex flex-col items-center gap-2">
<div class="w-14 h-14 glass-panel rounded-2xl flex items-center justify-center active:scale-90 transition-transform">
<span class="material-symbols-outlined text-on-surface">movie</span>
</div>
<span class="text-[11px] font-medium text-on-surface-variant text-center">Plex</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-14 h-14 glass-panel rounded-2xl flex items-center justify-center active:scale-90 transition-transform">
<span class="material-symbols-outlined text-on-surface">monitoring</span>
</div>
<span class="text-[11px] font-medium text-on-surface-variant text-center">Grafana</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-14 h-14 glass-panel rounded-2xl flex items-center justify-center active:scale-90 transition-transform">
<span class="material-symbols-outlined text-on-surface">database</span>
</div>
<span class="text-[11px] font-medium text-on-surface-variant text-center">MariaDB</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-14 h-14 glass-panel rounded-2xl flex items-center justify-center active:scale-90 transition-transform">
<span class="material-symbols-outlined text-on-surface">hub</span>
</div>
<span class="text-[11px] font-medium text-on-surface-variant text-center">HomeAssistant</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-14 h-14 glass-panel rounded-2xl flex items-center justify-center active:scale-90 transition-transform">
<span class="material-symbols-outlined text-on-surface">shield</span>
</div>
<span class="text-[11px] font-medium text-on-surface-variant text-center">Authelia</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-14 h-14 glass-panel rounded-2xl flex items-center justify-center active:scale-90 transition-transform">
<span class="material-symbols-outlined text-on-surface">vpn_key</span>
</div>
<span class="text-[11px] font-medium text-on-surface-variant text-center">Tailscale</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-14 h-14 glass-panel rounded-2xl flex items-center justify-center active:scale-90 transition-transform">
<span class="material-symbols-outlined text-on-surface">cloud_sync</span>
</div>
<span class="text-[11px] font-medium text-on-surface-variant text-center">Sync</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-14 h-14 glass-panel rounded-2xl flex items-center justify-center active:scale-90 transition-transform border-dashed border-primary/30">
<span class="material-symbols-outlined text-primary">add</span>
</div>
<span class="text-[11px] font-medium text-on-surface-variant text-center">Nieuw</span>
</div>
</div>
</section>
<!-- Quick Actions Banner -->
<section class="mb-4">
<div class="relative w-full h-32 rounded-2xl overflow-hidden glass-panel flex items-center px-6">
<div class="absolute inset-0 z-0 opacity-20">
</div>
<div class="relative z-10">
<h3 class="font-headline-md text-headline-md text-on-surface">Server Update</h3>
<p class="text-body-md text-on-surface-variant mb-2">v2.4.1 is nu beschikbaar</p>
<button class="bg-primary text-on-primary px-4 py-1.5 rounded-lg font-label-md text-label-md transition-all active:scale-95">Update Nu</button>
</div>
</div>
</section>
</main>
<!-- Bottom Navigation Bar -->
<nav class="fixed bottom-0 w-full z-50 glass-panel border-t border-outline-variant/10 md:hidden safe-area-bottom">
<div class="flex justify-around items-center h-16 px-gutter">
<!-- Nav Item: Dashboard (Active) -->
<a class="flex flex-col items-center justify-center gap-1 text-secondary font-bold active:scale-95 transition-all" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">dashboard</span>
<span class="font-label-md text-[10px]">Dashboard</span>
</a>
<!-- Nav Item: Categorieën -->
<a class="flex flex-col items-center justify-center gap-1 text-on-surface-variant hover:text-on-surface active:scale-95 transition-all" href="#">
<span class="material-symbols-outlined">grid_view</span>
<span class="font-label-md text-[10px]">Categorieën</span>
</a>
<!-- Nav Item: Statistieken (Implicit/Small) -->
<a class="flex flex-col items-center justify-center gap-1 text-on-surface-variant hover:text-on-surface active:scale-95 transition-all" href="#">
<span class="material-symbols-outlined">analytics</span>
<span class="font-label-md text-[10px]">Status</span>
</a>
<!-- Nav Item: Instellingen -->
<a class="flex flex-col items-center justify-center gap-1 text-on-surface-variant hover:text-on-surface active:scale-95 transition-all" href="#">
<span class="material-symbols-outlined">settings</span>
<span class="font-label-md text-[10px]">Instellingen</span>
</a>
</div>
</nav>
<!-- Micro-interaction Script -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
input.addEventListener('focus', () => {
// Slight vibration effect on mobile if supported
if ('vibrate' in navigator) {
navigator.vibrate(5);
}
});
});
// Smooth appear animation for cards
const cards = document.querySelectorAll('.glass-panel');
cards.forEach((card, index) => {
card.style.opacity = '0';
card.style.transform = 'translateY(10px)';
setTimeout(() => {
card.style.transition = 'all 0.4s ease-out';
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, index * 40);
});
});
</script>
</body></html>