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:
-323
@@ -1,323 +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&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"/>
|
||||
<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-tap-highlight-color: transparent;
|
||||
}
|
||||
.status-pulse {
|
||||
position: relative;
|
||||
}
|
||||
.status-pulse::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
opacity: 0.4;
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); opacity: 0.4; }
|
||||
50% { transform: scale(2.5); opacity: 0; }
|
||||
100% { transform: scale(1); opacity: 0; }
|
||||
}
|
||||
.glass-header {
|
||||
background: rgba(11, 19, 38, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-body-md overflow-x-hidden pb-24">
|
||||
<!-- Top Navigation Bar (Shared Component Logic) -->
|
||||
<header class="fixed top-0 left-0 w-full z-50 glass-header border-b border-outline-variant h-16 px-margin-mobile flex justify-between items-center">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-headline-md text-headline-md font-bold text-primary">DockDeck</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="material-symbols-outlined text-on-surface-variant active:scale-95 transition-transform" data-icon="search">search</button>
|
||||
<button class="material-symbols-outlined text-on-surface-variant active:scale-95 transition-transform" data-icon="notifications">notifications</button>
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden border border-outline-variant">
|
||||
<img class="w-full h-full object-cover" data-alt="A close-up high-resolution profile portrait of a tech-savvy user, softly lit with cool blue and indigo tones to match a modernist dark-mode dashboard aesthetic. The lighting is cinematic, highlighting clean facial features against a blurred technical background of server racks and blinking LEDs. Professional and sophisticated vibe." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAD-32yqqkxcVatfZK7YL80jXyz7S-Got2jf7fY4Wzg6Kh__mUBy6iV18rXw89MIdV-VNk8owLTDDkfyZ7xvrqdx1Xc-CmFf5HsmeDWSvX_Fr1emNWHy8QY1WR-72D-m8nWIwRHD9CNL9LRYmkr2ujPbhr4iNGVVo6v_dd1vHO6uufXyCWVOHmwnF14RJOWKAoVxSNbuSGZQDZjPyl53sPkzoP7zM-ca0m7jm8_e306MPauzOEnDtAgZoLo2XwUmVyNOHoT4vEa4W-4"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mt-20 px-margin-mobile space-y-8">
|
||||
<!-- Quick Search Section -->
|
||||
<section class="space-y-4">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline" data-icon="search">search</span>
|
||||
<input class="w-full bg-surface-container-low border border-outline-variant rounded-xl py-3 pl-12 pr-4 text-on-surface placeholder:text-outline focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all" placeholder="Zoek containers..." type="text"/>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Category: Media -->
|
||||
<section class="space-y-4">
|
||||
<div class="flex justify-between items-end">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface">Media</h2>
|
||||
<span class="font-label-md text-label-md text-secondary">3 Actief</span>
|
||||
</div>
|
||||
<div class="bento-grid">
|
||||
<!-- Plex Card -->
|
||||
<div class="bg-surface-container rounded-xl p-4 border border-outline-variant active:scale-[0.98] transition-transform">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="w-10 h-10 bg-surface-container-high rounded-lg flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="movie">movie</span>
|
||||
</div>
|
||||
<div class="status-pulse w-2 h-2 rounded-full bg-secondary"></div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="font-label-md text-label-md font-bold text-on-surface">Plex</p>
|
||||
<p class="text-[12px] text-on-surface-variant">1.2% CPU</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sonarr Card -->
|
||||
<div class="bg-surface-container rounded-xl p-4 border border-outline-variant active:scale-[0.98] transition-transform">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="w-10 h-10 bg-surface-container-high rounded-lg flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="tv">tv</span>
|
||||
</div>
|
||||
<div class="status-pulse w-2 h-2 rounded-full bg-secondary"></div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="font-label-md text-label-md font-bold text-on-surface">Sonarr</p>
|
||||
<p class="text-[12px] text-on-surface-variant">0.8% CPU</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Category: Smart Home -->
|
||||
<section class="space-y-4">
|
||||
<div class="flex justify-between items-end">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface">Smart Home</h2>
|
||||
<span class="font-label-md text-label-md text-secondary">2 Actief</span>
|
||||
</div>
|
||||
<div class="bento-grid">
|
||||
<!-- Home Assistant Card -->
|
||||
<div class="bg-surface-container rounded-xl p-4 border border-outline-variant active:scale-[0.98] transition-transform">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="w-10 h-10 bg-surface-container-high rounded-lg flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="home_app">home_max</span>
|
||||
</div>
|
||||
<div class="status-pulse w-2 h-2 rounded-full bg-secondary"></div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="font-label-md text-label-md font-bold text-on-surface">HomeAssist</p>
|
||||
<p class="text-[12px] text-on-surface-variant">4.5% CPU</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Zigbee2MQTT Card -->
|
||||
<div class="bg-surface-container rounded-xl p-4 border border-outline-variant active:scale-[0.98] transition-transform">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="w-10 h-10 bg-surface-container-high rounded-lg flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="hub">hub</span>
|
||||
</div>
|
||||
<div class="status-pulse w-2 h-2 rounded-full bg-secondary"></div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="font-label-md text-label-md font-bold text-on-surface">Zigbee2MQTT</p>
|
||||
<p class="text-[12px] text-on-surface-variant">0.2% CPU</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Category: Utilities -->
|
||||
<section class="space-y-4">
|
||||
<div class="flex justify-between items-end">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface">Utilities</h2>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant">1 Gestopt</span>
|
||||
</div>
|
||||
<div class="bento-grid">
|
||||
<!-- Nginx Proxy Card -->
|
||||
<div class="bg-surface-container rounded-xl p-4 border border-outline-variant active:scale-[0.98] transition-transform">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="w-10 h-10 bg-surface-container-high rounded-lg flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="lan">lan</span>
|
||||
</div>
|
||||
<div class="status-pulse w-2 h-2 rounded-full bg-secondary"></div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="font-label-md text-label-md font-bold text-on-surface">Nginx PM</p>
|
||||
<p class="text-[12px] text-on-surface-variant">0.5% CPU</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pihole Card (Stopped) -->
|
||||
<div class="bg-surface-container/50 rounded-xl p-4 border border-outline-variant/30 active:scale-[0.98] transition-transform opacity-70">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="w-10 h-10 bg-surface-container-high/50 rounded-lg flex items-center justify-center text-outline">
|
||||
<span class="material-symbols-outlined" data-icon="security">security</span>
|
||||
</div>
|
||||
<div class="w-2 h-2 rounded-full bg-error"></div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="font-label-md text-label-md font-bold text-on-surface">Pi-hole</p>
|
||||
<p class="text-[12px] text-on-surface-variant">Offline</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- System Status Banner -->
|
||||
<section class="bg-primary-container/10 border border-primary/20 rounded-2xl p-6 relative overflow-hidden">
|
||||
<div class="relative z-10 flex items-center justify-between">
|
||||
<div class="space-y-1">
|
||||
<h3 class="font-headline-md text-headline-md text-primary">Systeem Status</h3>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant">Unraid Engine 6.12.4</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="font-headline-md text-headline-md text-secondary">Healthy</p>
|
||||
<p class="text-[12px] text-on-surface-variant">Uptime: 14d 2h</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative element -->
|
||||
<div class="absolute -right-10 -bottom-10 w-32 h-32 bg-primary/10 blur-3xl rounded-full"></div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full h-20 glass-header flex items-center justify-around px-4 z-50">
|
||||
<a class="flex flex-col items-center gap-1 bg-primary-container/10 text-primary px-4 py-2 rounded-xl transition-all" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard" style="font-variation-settings: 'FILL' 1;">dashboard</span>
|
||||
<span class="font-label-md text-[10px]">Overzicht</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary transition-all" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="memory">memory</span>
|
||||
<span class="font-label-md text-[10px]">System</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary transition-all" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="lan">lan</span>
|
||||
<span class="font-label-md text-[10px]">Netwerk</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary transition-all" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="font-label-md text-[10px]">Instellingen</span>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- Floating Action Button -->
|
||||
<button class="fixed bottom-24 right-6 w-14 h-14 bg-primary text-on-primary rounded-2xl shadow-lg shadow-primary/20 flex items-center justify-center active:scale-90 transition-transform z-40">
|
||||
<span class="material-symbols-outlined text-3xl" data-icon="add">add</span>
|
||||
</button>
|
||||
<script>
|
||||
// Simple micro-interaction for cards
|
||||
document.querySelectorAll('.bg-surface-container').forEach(card => {
|
||||
card.addEventListener('touchstart', () => {
|
||||
card.classList.add('bg-surface-container-high');
|
||||
});
|
||||
card.addEventListener('touchend', () => {
|
||||
setTimeout(() => {
|
||||
card.classList.remove('bg-surface-container-high');
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user