repo: remove cross-project DockDeck Stitch input
GeoIntel release gates / Compile, test, contracts and builds (push) Canceled after 4s
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 4s
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:
-395
@@ -1,395 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
|
|
||||||
<html class="light" lang="nl"><head>
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
||||||
<title>DockDeck — Dashboard</title>
|
|
||||||
<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"/>
|
|
||||||
<style>
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Geist', sans-serif;
|
|
||||||
background-color: #f8fafc; /* Light theme base */
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom Scrollbar for better aesthetic */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #e2e8f0;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #cbd5e1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(255, 255, 255, 0.8);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-card-hover:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 10px 15px -3px rgba(129, 140, 248, 0.1), 0 4px 6px -4px rgba(129, 140, 248, 0.1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"surface-container-highest": "#f1f5f9",
|
|
||||||
"secondary": "#10b981",
|
|
||||||
"error-container": "#fee2e2",
|
|
||||||
"outline-variant": "#e2e8f0",
|
|
||||||
"error": "#ef4444",
|
|
||||||
"surface-bright": "#ffffff",
|
|
||||||
"primary": "#818cf8",
|
|
||||||
"primary-container": "#e0e7ff",
|
|
||||||
"outline": "#94a3b8",
|
|
||||||
"surface-container": "#ffffff",
|
|
||||||
"surface-variant": "#f1f5f9",
|
|
||||||
"surface-container-lowest": "#ffffff",
|
|
||||||
"on-secondary": "#ffffff",
|
|
||||||
"on-surface": "#0f172a",
|
|
||||||
"surface-dim": "#f8fafc",
|
|
||||||
"on-primary": "#ffffff",
|
|
||||||
"background": "#f8fafc",
|
|
||||||
"surface-container-low": "#fcfcfd",
|
|
||||||
"surface": "#ffffff",
|
|
||||||
"on-surface-variant": "#64748b"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.25rem",
|
|
||||||
"lg": "0.5rem",
|
|
||||||
"xl": "0.75rem",
|
|
||||||
"full": "9999px"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"margin-mobile": "1rem",
|
|
||||||
"stack-lg": "2rem",
|
|
||||||
"gutter": "1.5rem",
|
|
||||||
"container-max": "1280px",
|
|
||||||
"stack-sm": "0.5rem",
|
|
||||||
"stack-md": "1rem"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"body-sm": ["Geist"],
|
|
||||||
"body-md": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
||||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body class="bg-background text-on-surface">
|
|
||||||
<!-- TopAppBar -->
|
|
||||||
<header class="fixed top-0 left-0 right-0 z-50 bg-surface border-b border-outline-variant">
|
|
||||||
<div class="flex justify-between items-center h-16 px-gutter max-w-container-max mx-auto">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<!-- Logo: Geometric bridge as described -->
|
|
||||||
<div class="w-8 h-8 flex items-center justify-center bg-primary-container rounded-lg">
|
|
||||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">badge</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-headline-md text-headline-md font-bold text-on-surface">DockDeck</span>
|
|
||||||
</div>
|
|
||||||
<!-- Navigation Links -->
|
|
||||||
<nav class="hidden md:flex gap-8">
|
|
||||||
<a class="text-primary border-b-2 border-primary pb-1 font-body-md" href="#">Dashboard</a>
|
|
||||||
<a class="text-on-surface-variant hover:text-on-surface transition-colors font-body-md" href="#">Favorieten</a>
|
|
||||||
</nav>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<!-- Search Bar -->
|
|
||||||
<div class="relative hidden sm:block">
|
|
||||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span>
|
|
||||||
<input class="pl-10 pr-4 py-1.5 bg-surface-variant border-none rounded-full text-body-sm focus:ring-2 focus:ring-primary/50 w-64 transition-all" placeholder="Zoek services..." type="text"/>
|
|
||||||
</div>
|
|
||||||
<!-- Action Icons -->
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<button class="p-2 hover:bg-surface-container-highest rounded-full transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">sync</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 hover:bg-surface-container-highest rounded-full transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">settings</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="flex pt-16 min-h-screen">
|
|
||||||
<!-- SideNavBar -->
|
|
||||||
<aside class="hidden md:flex flex-col w-64 bg-surface-container-low border-r border-outline-variant py-stack-md px-stack-sm fixed h-[calc(100vh-64px)] overflow-y-auto">
|
|
||||||
<div class="px-4 mb-6">
|
|
||||||
<h2 class="font-headline-sm text-headline-md text-on-surface">Instellingen</h2>
|
|
||||||
<p class="text-on-surface-variant text-body-sm">DockDeck Configuratie</p>
|
|
||||||
</div>
|
|
||||||
<nav class="flex flex-col gap-y-1">
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2 bg-secondary-container/10 text-on-secondary-container rounded-lg font-medium transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">settings</span>
|
|
||||||
<span class="text-body-sm">Algemeen</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined text-[20px]">grid_view</span>
|
|
||||||
<span class="text-body-sm">Apps</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined text-[20px]">star</span>
|
|
||||||
<span class="text-body-sm">Favorieten</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined text-[20px]">category</span>
|
|
||||||
<span class="text-body-sm">Categorieën</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined text-[20px]">palette</span>
|
|
||||||
<span class="text-body-sm">Weergave</span>
|
|
||||||
</a>
|
|
||||||
<div class="h-px bg-outline-variant my-4 mx-4"></div>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined text-[20px]">extension</span>
|
|
||||||
<span class="text-body-sm">Integraties</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined text-[20px]">settings_backup_restore</span>
|
|
||||||
<span class="text-body-sm">Back-up</span>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content -->
|
|
||||||
<main class="flex-1 md:ml-64 p-6 md:p-10">
|
|
||||||
<div class="max-w-6xl mx-auto space-y-12">
|
|
||||||
<!-- Quick Launch Section -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center justify-between mb-6">
|
|
||||||
<h3 class="font-headline-md text-on-surface">Favorieten</h3>
|
|
||||||
<button class="text-primary font-label-caps uppercase tracking-wider text-[11px] hover:underline transition-all">Bewerk Dashboard</button>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<!-- Card 1: Home Assistant -->
|
|
||||||
<div class="glass-card p-5 rounded-xl app-card-hover transition-all cursor-pointer">
|
|
||||||
<div class="flex items-start justify-between mb-4">
|
|
||||||
<div class="p-2.5 bg-primary-container/20 text-primary rounded-lg">
|
|
||||||
<span class="material-symbols-outlined text-[24px]" style="font-variation-settings: 'FILL' 1;">home_mini</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-[10px] bg-secondary/10 text-secondary px-2 py-0.5 rounded-full font-bold uppercase tracking-widest">Nieuw</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-body-md font-semibold text-on-surface">Home Assistant</h4>
|
|
||||||
<p class="text-on-surface-variant text-[12px] mb-6">Zichtbaar op netwerk</p>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Card 2: Plex -->
|
|
||||||
<div class="glass-card p-5 rounded-xl app-card-hover transition-all cursor-pointer">
|
|
||||||
<div class="flex items-start justify-between mb-4">
|
|
||||||
<div class="p-2.5 bg-amber-100 text-amber-600 rounded-lg">
|
|
||||||
<span class="material-symbols-outlined text-[24px]">movie</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-body-md font-semibold text-on-surface">Plex Media Server</h4>
|
|
||||||
<p class="text-on-surface-variant text-[12px] mb-6">Zichtbaar op netwerk</p>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Card 3: Pi-Hole -->
|
|
||||||
<div class="glass-card p-5 rounded-xl app-card-hover transition-all cursor-pointer">
|
|
||||||
<div class="flex items-start justify-between mb-4">
|
|
||||||
<div class="p-2.5 bg-rose-100 text-rose-600 rounded-lg">
|
|
||||||
<span class="material-symbols-outlined text-[24px]">security</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-body-md font-semibold text-on-surface">Pi-hole</h4>
|
|
||||||
<p class="text-on-surface-variant text-[12px] mb-6">Zichtbaar op netwerk</p>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Card 4: Synology -->
|
|
||||||
<div class="glass-card p-5 rounded-xl app-card-hover transition-all cursor-pointer">
|
|
||||||
<div class="flex items-start justify-between mb-4">
|
|
||||||
<div class="p-2.5 bg-slate-200 text-slate-700 rounded-lg">
|
|
||||||
<span class="material-symbols-outlined text-[24px]">storage</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-body-md font-semibold text-on-surface">NAS Opslag</h4>
|
|
||||||
<p class="text-on-surface-variant text-[12px] mb-6">Verborgen status</p>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-slate-400"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Offline</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Categories: Media Section with Asymmetric Layout -->
|
|
||||||
<section class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
|
|
||||||
<div class="lg:col-span-4 space-y-4">
|
|
||||||
<div class="p-8 bg-primary rounded-3xl text-white shadow-xl shadow-primary/20 relative overflow-hidden">
|
|
||||||
<div class="relative z-10">
|
|
||||||
<span class="material-symbols-outlined text-[48px] mb-4">theaters</span>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">Media & Entertainment</h3>
|
|
||||||
<p class="text-primary-container text-sm leading-relaxed opacity-90">Toegang tot al je streamingdiensten en lokale media bibliotheken op één plek.</p>
|
|
||||||
<button class="mt-6 bg-white text-primary px-6 py-2 rounded-full text-sm font-semibold hover:bg-primary-container transition-colors">Open Media Hub</button>
|
|
||||||
</div>
|
|
||||||
<!-- Subtle Background pattern -->
|
|
||||||
<div class="absolute -right-10 -bottom-10 opacity-10 rotate-12">
|
|
||||||
<span class="material-symbols-outlined text-[200px]">play_circle</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="lg:col-span-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
||||||
<div class="glass-card p-4 rounded-xl flex items-center gap-4 hover:bg-white transition-all cursor-pointer border border-transparent hover:border-primary/20">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-orange-100 flex items-center justify-center text-orange-600">
|
|
||||||
<span class="material-symbols-outlined">podcasts</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-body-md font-semibold">AudioBooks</h4>
|
|
||||||
<span class="text-[11px] text-secondary font-bold">4 ACTIEF</span>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined ml-auto text-on-surface-variant">chevron_right</span>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card p-4 rounded-xl flex items-center gap-4 hover:bg-white transition-all cursor-pointer border border-transparent hover:border-primary/20">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center text-blue-600">
|
|
||||||
<span class="material-symbols-outlined">tv</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-body-md font-semibold">Jellyfin</h4>
|
|
||||||
<span class="text-[11px] text-secondary font-bold">ONLINE</span>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined ml-auto text-on-surface-variant">chevron_right</span>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card p-4 rounded-xl flex items-center gap-4 hover:bg-white transition-all cursor-pointer border border-transparent hover:border-primary/20">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center text-indigo-600">
|
|
||||||
<span class="material-symbols-outlined">download</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-body-md font-semibold">Transmission</h4>
|
|
||||||
<span class="text-[11px] text-secondary font-bold">12 TAKEN</span>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined ml-auto text-on-surface-variant">chevron_right</span>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card p-4 rounded-xl flex items-center gap-4 hover:bg-white transition-all cursor-pointer border border-transparent hover:border-primary/20">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-emerald-100 flex items-center justify-center text-emerald-600">
|
|
||||||
<span class="material-symbols-outlined">music_note</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-body-md font-semibold">Spotify Connect</h4>
|
|
||||||
<span class="text-[11px] text-on-surface-variant font-bold">STANDBY</span>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined ml-auto text-on-surface-variant">chevron_right</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Smart Home Bento Grid Layout -->
|
|
||||||
<section>
|
|
||||||
<h3 class="font-headline-md text-on-surface mb-6">Smart Home</h3>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<!-- Large Feature Card -->
|
|
||||||
<div class="md:col-span-2 glass-card rounded-2xl overflow-hidden group">
|
|
||||||
<div class="relative h-48 overflow-hidden">
|
|
||||||
<div class="w-full h-full bg-cover bg-center transition-transform duration-700 group-hover:scale-105" data-alt="A bright and airy minimalist modern living room with large floor-to-ceiling windows, light wood floors, and soft lavender and blue accent lighting. The space is clean, organized, and futuristic, following a light-theme aesthetic with premium finishes and a sense of calm high-tech living." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCIR3iGyk1AyOwWKV2NXkWJ_lynZqRiC0-lykR_wOjRKOnSh-x6Or2H9k93_e01stpK7Nn0KGKURtoGPU3nI5nBzUV0yK3SnSms3XtKcIFdnIyF3Bqh3cI05XDVdrsOCu6_YVRzXhoguMwU8U3zM83eneOsMusqNmUzecJbEOUlgfhZKGCj3UthW_eKWUuiI3jTE-xa4joTQF7-LSaWmIUf3HEk8YJ_gkSe7AU7QhAJGsOFrlIvn9YUV5y0uID3TcoGrHozWBLw8kmD')"></div>
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
|
||||||
<div class="absolute bottom-4 left-6 text-white">
|
|
||||||
<span class="text-[10px] font-bold uppercase tracking-widest bg-primary px-2 py-1 rounded">Camera Feed</span>
|
|
||||||
<h4 class="text-xl font-bold mt-2">Woonkamer Camera</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-6 flex items-center justify-between">
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<div class="text-center">
|
|
||||||
<p class="text-on-surface-variant text-[10px] font-bold uppercase">Temp</p>
|
|
||||||
<p class="text-xl font-bold">21°C</p>
|
|
||||||
</div>
|
|
||||||
<div class="text-center">
|
|
||||||
<p class="text-on-surface-variant text-[10px] font-bold uppercase">Vocht</p>
|
|
||||||
<p class="text-xl font-bold">45%</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="p-3 bg-primary text-white rounded-xl shadow-lg shadow-primary/20">
|
|
||||||
<span class="material-symbols-outlined">videocam</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Stacked Small Cards -->
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div class="glass-card p-6 rounded-2xl flex flex-col justify-between h-full">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<span class="material-symbols-outlined text-amber-500 text-[32px]">lightbulb</span>
|
|
||||||
<div class="w-12 h-6 bg-slate-200 rounded-full relative cursor-pointer">
|
|
||||||
<div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all shadow-sm"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-8">
|
|
||||||
<h4 class="font-bold text-on-surface">Verlichting</h4>
|
|
||||||
<p class="text-on-surface-variant text-sm">8 lampen actief</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card p-6 rounded-2xl flex flex-col justify-between h-full">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<span class="material-symbols-outlined text-blue-500 text-[32px]">thermostat</span>
|
|
||||||
</div>
|
|
||||||
<div class="mt-8">
|
|
||||||
<h4 class="font-bold text-on-surface">Klimaat</h4>
|
|
||||||
<p class="text-on-surface-variant text-sm">Verwarming uit</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
<!-- Micro-interaction Script -->
|
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
// Simulate a simple toggle for the switch
|
|
||||||
const switches = document.querySelectorAll('.w-12.h-6.bg-slate-200');
|
|
||||||
switches.forEach(sw => {
|
|
||||||
sw.addEventListener('click', function() {
|
|
||||||
const circle = this.querySelector('div');
|
|
||||||
const isActive = circle.classList.contains('translate-x-6');
|
|
||||||
|
|
||||||
if (isActive) {
|
|
||||||
circle.classList.remove('translate-x-6');
|
|
||||||
circle.classList.add('left-1');
|
|
||||||
this.classList.remove('bg-primary');
|
|
||||||
this.classList.add('bg-slate-200');
|
|
||||||
} else {
|
|
||||||
circle.classList.remove('left-1');
|
|
||||||
circle.classList.add('translate-x-6');
|
|
||||||
this.classList.remove('bg-slate-200');
|
|
||||||
this.classList.add('bg-primary');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Basic hover lifting effect logic handled by Tailwind's transition and app-card-hover
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
Reference in New Issue
Block a user