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:
-415
@@ -1,415 +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 - App Editor</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist:wght@400;500;600;700;800&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"/>
|
|
||||||
<!-- Tailwind Configuration -->
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"on-primary": "#292b5e",
|
|
||||||
"inverse-on-surface": "#283044",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"status-degraded": "#ffb783",
|
|
||||||
"surface-glass": "rgba(15, 23, 42, 0.6)",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"on-tertiary": "#4f2500",
|
|
||||||
"status-online": "#4edea3",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"on-tertiary-fixed-variant": "#703700",
|
|
||||||
"status-offline": "#ffb4ab",
|
|
||||||
"outline-variant": "#464554",
|
|
||||||
"on-primary-fixed": "#131449",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"primary-fixed": "#e1e0ff",
|
|
||||||
"on-secondary-container": "#003e28",
|
|
||||||
"outline": "#908fa0",
|
|
||||||
"tertiary-fixed-dim": "#ffb783",
|
|
||||||
"surface-tint": "#c0c1ff",
|
|
||||||
"tertiary-fixed": "#ffdcc5",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"primary": "#c0c1ff",
|
|
||||||
"on-surface-variant": "#c7c4d7",
|
|
||||||
"on-tertiary-fixed": "#301400",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"on-tertiary-container": "#452000",
|
|
||||||
"tertiary": "#ffb783",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary-container": "#00b47d",
|
|
||||||
"primary-fixed-dim": "#c0c1ff",
|
|
||||||
"on-primary-fixed-variant": "#404176",
|
|
||||||
"primary-container": "#8a8cc6",
|
|
||||||
"on-primary-container": "#222457",
|
|
||||||
"inverse-primary": "#585990",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"on-secondary-fixed": "#002114",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"tertiary-container": "#d97721",
|
|
||||||
"surface-dim": "#0b1326"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.25rem",
|
|
||||||
"lg": "0.5rem",
|
|
||||||
"xl": "0.75rem",
|
|
||||||
"full": "9999px"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"gutter": "24px",
|
|
||||||
"stack-lg": "48px",
|
|
||||||
"margin-desktop": "40px",
|
|
||||||
"margin-mobile": "16px",
|
|
||||||
"base": "8px",
|
|
||||||
"stack-md": "24px",
|
|
||||||
"container-max": "1440px",
|
|
||||||
"stack-sm": "12px"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"label-md": ["Geist"],
|
|
||||||
"headline-lg-mobile": ["Geist"],
|
|
||||||
"code-sm": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"display-lg": ["Geist"],
|
|
||||||
"body-lg": ["Inter"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"body-md": ["Inter"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"label-md": ["14px", {"lineHeight": "20px", "letterSpacing": "0.02em", "fontWeight": "500"}],
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
||||||
"code-sm": ["13px", {"lineHeight": "18px", "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"}],
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background-color: #0b1326;
|
|
||||||
color: #dbe2fd;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(15, 23, 42, 0.6);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(30, 41, 59, 0.5);
|
|
||||||
}
|
|
||||||
.active-dot {
|
|
||||||
box-shadow: 0 0 8px #4edea3;
|
|
||||||
}
|
|
||||||
.custom-scrollbar::-webkit-scrollbar {
|
|
||||||
width: 4px;
|
|
||||||
}
|
|
||||||
.custom-scrollbar::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(144, 143, 160, 0.2);
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
input:focus {
|
|
||||||
outline: none;
|
|
||||||
box-shadow: 0 0 0 2px rgba(192, 193, 255, 0.3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="font-body-md text-body-md min-h-screen flex">
|
|
||||||
<!-- Sidebar Navigation Shell -->
|
|
||||||
<nav class="hidden xl:flex fixed left-0 top-16 h-[calc(100vh-64px)] w-64 flex-col p-base gap-stack-sm bg-surface-container-low border-r border-outline-variant/10 z-40 transition-all">
|
|
||||||
<div class="px-4 py-2">
|
|
||||||
<h3 class="font-label-md text-label-md text-primary/60 uppercase tracking-widest">Systeem</h3>
|
|
||||||
</div>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg group" href="#">
|
|
||||||
<span class="material-symbols-outlined group-hover:translate-x-1 duration-200">dashboard</span>
|
|
||||||
<span class="font-label-md text-label-md">Dashboard</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg group" href="#">
|
|
||||||
<span class="material-symbols-outlined group-hover:translate-x-1 duration-200">layers</span>
|
|
||||||
<span class="font-label-md text-label-md">Containers</span>
|
|
||||||
</a>
|
|
||||||
<div class="mt-4 px-4 py-2 border-t border-outline-variant/10">
|
|
||||||
<h3 class="font-label-md text-label-md text-primary/60 uppercase tracking-widest">Configuratie</h3>
|
|
||||||
</div>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-lg transition-all duration-200" href="#">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="font-label-md text-label-md">Settings</span>
|
|
||||||
</a>
|
|
||||||
<div class="mt-auto pt-4 border-t border-outline-variant/10">
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg group" href="#">
|
|
||||||
<span class="material-symbols-outlined group-hover:translate-x-1 duration-200">logout</span>
|
|
||||||
<span class="font-label-md text-label-md">Logout</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- Top App Bar -->
|
|
||||||
<header class="fixed top-0 w-full flex justify-between items-center h-16 px-gutter z-50 bg-surface-glass backdrop-blur-xl border-b border-outline-variant/20 shadow-sm">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<span class="font-headline-md text-headline-md font-bold text-primary">DockDeck</span>
|
|
||||||
<span class="text-on-surface-variant/40 hidden md:inline">/</span>
|
|
||||||
<span class="font-label-md text-label-md text-on-surface-variant hidden md:inline">Instellingen</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="relative hidden md:block">
|
|
||||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
|
||||||
<input class="bg-surface-container-low text-on-surface font-label-md text-label-md px-10 py-2 rounded-full border border-outline-variant/20 focus:border-primary/50 w-64 transition-all" placeholder="Doorzoek instellingen..." type="text"/>
|
|
||||||
</div>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:bg-surface-variant/50 rounded-full transition-colors active:scale-95">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:bg-surface-variant/50 rounded-full transition-colors active:scale-95">
|
|
||||||
<span class="material-symbols-outlined">account_circle</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- Main Content Canvas -->
|
|
||||||
<main class="flex-1 mt-16 ml-0 xl:ml-64 p-gutter max-w-7xl mx-auto w-full transition-all">
|
|
||||||
<!-- Setting Page Header -->
|
|
||||||
<div class="mb-stack-lg">
|
|
||||||
<h1 class="font-headline-lg text-headline-lg text-on-surface mb-2">Applicatie Beheer</h1>
|
|
||||||
<p class="text-on-surface-variant max-w-2xl">Beheer hoe je containers worden weergegeven op het dashboard en configureer toegang via lokale en externe netwerken.</p>
|
|
||||||
</div>
|
|
||||||
<!-- App Tiles Grid (Pre-state) -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-gutter">
|
|
||||||
<!-- App Card Example 1 -->
|
|
||||||
<div class="glass-panel p-gutter rounded-xl flex flex-col gap-4 relative group hover:-translate-y-1 transition-all cursor-pointer border-primary/20 bg-primary/5 ring-1 ring-primary/20">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-primary-container flex items-center justify-center text-on-primary-container">
|
|
||||||
<span class="material-symbols-outlined text-3xl">home_app_logo</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="text-[10px] font-bold text-secondary uppercase tracking-tighter bg-secondary/10 px-2 py-0.5 rounded">Actief</span>
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary active-dot"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Home Assistant</h3>
|
|
||||||
<p class="text-on-surface-variant font-label-md text-label-md">Smart Home Controller</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2 mt-2">
|
|
||||||
<span class="font-code-sm text-code-sm bg-surface-container px-2 py-1 rounded text-on-surface-variant">Automation</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl flex items-center justify-center">
|
|
||||||
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg font-label-md flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined">edit</span>
|
|
||||||
Bewerken
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- App Card Example 2 -->
|
|
||||||
<div class="glass-panel p-gutter rounded-xl flex flex-col gap-4 relative group hover:-translate-y-1 transition-all cursor-pointer">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-variant flex items-center justify-center text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined text-3xl">storage</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-status-offline opacity-50"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Nextcloud</h3>
|
|
||||||
<p class="text-on-surface-variant font-label-md text-label-md">File Storage & Cloud</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2 mt-2">
|
|
||||||
<span class="font-code-sm text-code-sm bg-surface-container px-2 py-1 rounded text-on-surface-variant">Cloud</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- App Card Example 3 -->
|
|
||||||
<div class="glass-panel p-gutter rounded-xl flex flex-col gap-4 relative group hover:-translate-y-1 transition-all cursor-pointer">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-variant flex items-center justify-center text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined text-3xl">terminal</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary active-dot"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Portainer</h3>
|
|
||||||
<p class="text-on-surface-variant font-label-md text-label-md">Docker Management UI</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2 mt-2">
|
|
||||||
<span class="font-code-sm text-code-sm bg-surface-container px-2 py-1 rounded text-on-surface-variant">Tools</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- Side Drawer Overlay -->
|
|
||||||
<div class="fixed inset-0 bg-surface/80 backdrop-blur-sm z-[60] transition-opacity duration-300" id="drawer-backdrop"></div>
|
|
||||||
<!-- Side Drawer (App Editor) -->
|
|
||||||
<aside class="fixed right-0 top-0 h-screen w-full md:w-[480px] bg-surface-container-high border-l border-outline-variant/30 z-[70] flex flex-col shadow-2xl transition-transform duration-300 translate-x-0" id="app-editor-drawer">
|
|
||||||
<!-- Drawer Header -->
|
|
||||||
<div class="flex items-center justify-between p-gutter border-b border-outline-variant/20 bg-surface-container-highest/30">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<button class="p-2 text-on-surface-variant hover:bg-surface-variant/50 rounded-full transition-colors" id="close-drawer">
|
|
||||||
<span class="material-symbols-outlined">close</span>
|
|
||||||
</button>
|
|
||||||
<div>
|
|
||||||
<h2 class="font-headline-md text-headline-md text-on-surface">App Bewerken</h2>
|
|
||||||
<p class="text-on-surface-variant font-label-md text-label-md">Home Assistant</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="bg-primary text-on-primary px-6 py-2 rounded-lg font-label-md hover:brightness-110 transition-all active:scale-95">Opslaan</button>
|
|
||||||
</div>
|
|
||||||
<!-- Scrollable Form Area -->
|
|
||||||
<div class="flex-1 overflow-y-auto custom-scrollbar p-gutter space-y-stack-md">
|
|
||||||
<!-- Basic Information Section -->
|
|
||||||
<section class="space-y-4">
|
|
||||||
<div class="flex items-center gap-2 mb-2">
|
|
||||||
<span class="material-symbols-outlined text-primary text-sm">info</span>
|
|
||||||
<h3 class="font-label-md text-label-md text-primary uppercase tracking-widest">Algemene Informatie</h3>
|
|
||||||
</div>
|
|
||||||
<!-- Display Name -->
|
|
||||||
<div class="space-y-2">
|
|
||||||
<label class="font-label-md text-label-md text-on-surface-variant block">Weergavenaam</label>
|
|
||||||
<input class="w-full bg-surface-container-low border border-outline-variant/30 rounded-lg px-4 py-3 text-on-surface focus:border-primary/50 transition-all" type="text" value="Home Assistant"/>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-2 gap-4">
|
|
||||||
<!-- Icon Selection -->
|
|
||||||
<div class="space-y-2">
|
|
||||||
<label class="font-label-md text-label-md text-on-surface-variant block">Icoon</label>
|
|
||||||
<div class="relative">
|
|
||||||
<div class="w-full bg-surface-container-low border border-outline-variant/30 rounded-lg px-4 py-3 text-on-surface flex items-center justify-between cursor-pointer">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="material-symbols-outlined text-secondary">home_app_logo</span>
|
|
||||||
<span class="font-label-md">home_app_logo</span>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined">expand_more</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Category -->
|
|
||||||
<div class="space-y-2">
|
|
||||||
<label class="font-label-md text-label-md text-on-surface-variant block">Categorie</label>
|
|
||||||
<div class="relative">
|
|
||||||
<select class="w-full bg-surface-container-low border border-outline-variant/30 rounded-lg px-4 py-3 text-on-surface appearance-none focus:border-primary/50 transition-all">
|
|
||||||
<option>Automatisering</option>
|
|
||||||
<option>Media</option>
|
|
||||||
<option>Beheer</option>
|
|
||||||
<option>Bestanden</option>
|
|
||||||
</select>
|
|
||||||
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">expand_more</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Visibility Toggle -->
|
|
||||||
<div class="flex items-center justify-between p-4 bg-surface-variant/20 rounded-xl border border-outline-variant/10">
|
|
||||||
<div>
|
|
||||||
<h4 class="font-label-md text-label-md text-on-surface">Zichtbaarheid</h4>
|
|
||||||
<p class="text-[12px] text-on-surface-variant">Verberg applicatie op het hoofd-dashboard</p>
|
|
||||||
</div>
|
|
||||||
<label class="relative inline-flex items-center cursor-pointer">
|
|
||||||
<input checked="" class="sr-only peer" type="checkbox" value=""/>
|
|
||||||
<div class="w-11 h-6 bg-surface-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Network & Connectivity Section -->
|
|
||||||
<section class="space-y-4 pt-4 border-t border-outline-variant/10">
|
|
||||||
<div class="flex items-center gap-2 mb-2">
|
|
||||||
<span class="material-symbols-outlined text-secondary text-sm">lan</span>
|
|
||||||
<h3 class="font-label-md text-label-md text-secondary uppercase tracking-widest">Netwerk & Connectiviteit</h3>
|
|
||||||
</div>
|
|
||||||
<!-- Local URL -->
|
|
||||||
<div class="space-y-2">
|
|
||||||
<div class="flex justify-between items-center">
|
|
||||||
<label class="font-label-md text-label-md text-on-surface-variant">Lokale WebUI URL</label>
|
|
||||||
<span class="text-[10px] bg-secondary/10 text-secondary border border-secondary/20 px-2 py-0.5 rounded uppercase font-bold tracking-tight">Automatisch ontdekt</span>
|
|
||||||
</div>
|
|
||||||
<div class="relative">
|
|
||||||
<input class="w-full bg-surface-container-lowest/50 border border-outline-variant/20 rounded-lg px-4 py-3 text-on-surface-variant italic cursor-not-allowed" disabled="" type="text" value="http://192.168.1.50:8123"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Local Override -->
|
|
||||||
<div class="space-y-2">
|
|
||||||
<label class="font-label-md text-label-md text-on-surface-variant block">Handmatige Lokale Override</label>
|
|
||||||
<input class="w-full bg-surface-container-low border border-outline-variant/30 rounded-lg px-4 py-3 text-on-surface focus:border-primary/50 transition-all placeholder:text-on-surface-variant/30" placeholder="bv. http://ha.local" type="text"/>
|
|
||||||
</div>
|
|
||||||
<!-- External URL -->
|
|
||||||
<div class="space-y-2">
|
|
||||||
<div class="flex justify-between items-center">
|
|
||||||
<label class="font-label-md text-label-md text-on-surface-variant">Externe URL</label>
|
|
||||||
<span class="text-[10px] bg-primary/10 text-primary border border-primary/20 px-2 py-0.5 rounded uppercase font-bold tracking-tight">Via Nginx Proxy Manager</span>
|
|
||||||
</div>
|
|
||||||
<input class="w-full bg-surface-container-low border border-outline-variant/30 rounded-lg px-4 py-3 text-on-surface focus:border-primary/50 transition-all" type="text" value="https://hass.mijn-domein.nl"/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Reset Actions -->
|
|
||||||
<section class="pt-6">
|
|
||||||
<button class="w-full group flex items-center justify-center gap-2 px-4 py-4 rounded-xl border border-error/30 text-error hover:bg-error/10 transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined text-[20px] group-active:rotate-180 transition-transform duration-300">history</span>
|
|
||||||
<span class="font-label-md">Overrides herstellen naar standaard</span>
|
|
||||||
</button>
|
|
||||||
<p class="text-center text-[11px] text-on-surface-variant/50 mt-3 px-6">
|
|
||||||
Dit herstelt alleen de weergave-instellingen en URL's binnen DockDeck. Dit heeft geen invloed op de draaiende Docker container.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<!-- Drawer Footer (Mobile visual support) -->
|
|
||||||
<div class="p-gutter border-t border-outline-variant/20 bg-surface-container-low md:hidden">
|
|
||||||
<button class="w-full bg-primary text-on-primary py-4 rounded-xl font-bold">Opslaan</button>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<!-- Visual Polish: Light atmospheric glow behind drawer -->
|
|
||||||
<div class="fixed top-0 right-0 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] pointer-events-none z-[65]"></div>
|
|
||||||
<script>
|
|
||||||
// Simple micro-interactions for the drawer
|
|
||||||
const closeBtn = document.getElementById('close-drawer');
|
|
||||||
const backdrop = document.getElementById('drawer-backdrop');
|
|
||||||
const drawer = document.getElementById('app-editor-drawer');
|
|
||||||
|
|
||||||
function hideDrawer() {
|
|
||||||
drawer.style.transform = 'translateX(100%)';
|
|
||||||
backdrop.style.opacity = '0';
|
|
||||||
setTimeout(() => {
|
|
||||||
backdrop.classList.add('hidden');
|
|
||||||
}, 300);
|
|
||||||
}
|
|
||||||
|
|
||||||
function showDrawer() {
|
|
||||||
backdrop.classList.remove('hidden');
|
|
||||||
setTimeout(() => {
|
|
||||||
drawer.style.transform = 'translateX(0)';
|
|
||||||
backdrop.style.opacity = '1';
|
|
||||||
}, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
closeBtn.addEventListener('click', hideDrawer);
|
|
||||||
backdrop.addEventListener('click', hideDrawer);
|
|
||||||
|
|
||||||
// Hover effect for reset button icon spin
|
|
||||||
const resetBtn = document.querySelector('button.text-error');
|
|
||||||
resetBtn.addEventListener('mousedown', () => {
|
|
||||||
resetBtn.querySelector('.material-symbols-outlined').style.transform = 'rotate(-180deg)';
|
|
||||||
});
|
|
||||||
resetBtn.addEventListener('mouseup', () => {
|
|
||||||
resetBtn.querySelector('.material-symbols-outlined').style.transform = 'rotate(0deg)';
|
|
||||||
});
|
|
||||||
|
|
||||||
// Initialize state
|
|
||||||
// showDrawer(); // Uncomment to open on load for preview
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
Reference in New Issue
Block a user