chore: prepare repository for public release
This commit is contained in:
Jens
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -1,176 +0,0 @@
|
|||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-widgets .widgets-edit,
|
|
||||||
.dashboard-widgets .widgets-refresh {
|
|
||||||
flex: 1 1 0;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cascade guard: platform geometry must win over the legacy launcher layer. */
|
|
||||||
.dashboard-topbar-inner,
|
|
||||||
.dashboard-workspace {
|
|
||||||
width: calc(100% - var(--platform-inset));
|
|
||||||
max-width: var(--platform-max);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-workspace {
|
|
||||||
grid-template-columns: clamp(248px, 15vw, 292px) minmax(0, 1fr);
|
|
||||||
gap: clamp(24px, 2vw, 36px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-rail {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rail-intro span,
|
|
||||||
.rail-favorites nav a small,
|
|
||||||
.rail-widget-link small,
|
|
||||||
.rail-empty-action small,
|
|
||||||
.rail-deck-health p,
|
|
||||||
.rail-deck-health > button {
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.45;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rail-favorites nav a strong,
|
|
||||||
.rail-widget-link strong,
|
|
||||||
.rail-empty-action strong,
|
|
||||||
.rail-favorites > header > span,
|
|
||||||
.rail-deck-health > header > span {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-layout {
|
|
||||||
width: calc(100% - var(--platform-inset));
|
|
||||||
max-width: var(--platform-max);
|
|
||||||
grid-template-columns: clamp(300px, 18vw, 348px) minmax(0, 1fr);
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-content,
|
|
||||||
.settings-page[data-section="appearance"] .settings-content {
|
|
||||||
max-width: none;
|
|
||||||
padding-right: clamp(40px, 4vw, 76px);
|
|
||||||
padding-left: clamp(40px, 4vw, 76px);
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-sidebar nav button {
|
|
||||||
font-size: 15.5px;
|
|
||||||
font-weight: 520;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-heading .eyebrow {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-heading h2 {
|
|
||||||
font-size: clamp(34px, 2vw, 40px);
|
|
||||||
line-height: 1.15;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-heading > p:last-child {
|
|
||||||
max-width: 900px;
|
|
||||||
font-size: 17px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-content :where(input, select, textarea, button) {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-content :where(
|
|
||||||
.management-title small,
|
|
||||||
.management-card small,
|
|
||||||
.widget-option > p,
|
|
||||||
.widget-option > header small,
|
|
||||||
.integration-list article small,
|
|
||||||
.security-callout small,
|
|
||||||
.toggle-list article small,
|
|
||||||
.appearance-advanced small,
|
|
||||||
.integration-section-heading small
|
|
||||||
) {
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.55;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1900px) {
|
|
||||||
.dashboard-canvas {
|
|
||||||
padding-right: calc(var(--widget-dock-width) + 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-insights-panel {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 20;
|
|
||||||
top: 96px;
|
|
||||||
right: max(var(--platform-gutter), calc((100vw - var(--platform-max)) / 2));
|
|
||||||
width: var(--widget-dock-width);
|
|
||||||
max-height: calc(100vh - 120px);
|
|
||||||
overflow: auto;
|
|
||||||
margin: 0;
|
|
||||||
background: color-mix(in srgb, var(--stitch-surface) 92%, transparent);
|
|
||||||
box-shadow: 0 20px 70px rgb(0 0 0 / 0.18);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
scrollbar-width: thin;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-insights-panel > summary {
|
|
||||||
position: sticky;
|
|
||||||
z-index: 3;
|
|
||||||
top: 0;
|
|
||||||
min-height: 76px;
|
|
||||||
background: color-mix(in srgb, var(--stitch-surface) 96%, transparent);
|
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-insights-panel .widgets-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-insights-panel .widget-shell.widget-size-wide {
|
|
||||||
grid-column: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-canvas .app-grid {
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-canvas .app-grid.feature-grid {
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1399px) and (min-width: 1101px) {
|
|
||||||
.dashboard-workspace {
|
|
||||||
grid-template-columns: 232px minmax(0, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1100px) {
|
|
||||||
.dashboard-workspace {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.settings-layout {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-content,
|
|
||||||
.settings-page[data-section="appearance"] .settings-content {
|
|
||||||
padding: 28px 22px 100px;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.settings-content,
|
|
||||||
.settings-page[data-section="appearance"] .settings-content {
|
|
||||||
padding: 24px 16px 96px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,358 +0,0 @@
|
|||||||
|
|
||||||
.canon-preference-columns {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-editor-drawer {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Platform geometry v2 — shared scaling, readable settings and widescreen dock. */
|
|
||||||
:root {
|
|
||||||
--platform-max: 3040px;
|
|
||||||
--platform-gutter: clamp(24px, 2.25vw, 56px);
|
|
||||||
--platform-inset: clamp(48px, 4.5vw, 112px);
|
|
||||||
--widget-dock-width: clamp(360px, 22vw, 430px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-topbar-inner,
|
|
||||||
.dashboard-workspace {
|
|
||||||
width: calc(100% - var(--platform-inset));
|
|
||||||
max-width: var(--platform-max);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-workspace {
|
|
||||||
grid-template-columns: clamp(248px, 15vw, 292px) minmax(0, 1fr);
|
|
||||||
gap: clamp(24px, 2vw, 36px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-rail {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rail-intro span,
|
|
||||||
.rail-favorites nav a small,
|
|
||||||
.rail-widget-link small,
|
|
||||||
.rail-empty-action small,
|
|
||||||
.rail-deck-health p,
|
|
||||||
.rail-deck-health > button {
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.45;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rail-favorites nav a strong,
|
|
||||||
.rail-widget-link strong,
|
|
||||||
.rail-empty-action strong,
|
|
||||||
.rail-favorites > header > span,
|
|
||||||
.rail-deck-health > header > span {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-tile.standard {
|
|
||||||
isolation: isolate;
|
|
||||||
overflow: hidden;
|
|
||||||
border-color: color-mix(
|
|
||||||
in srgb,
|
|
||||||
var(--stitch-border) 88%,
|
|
||||||
var(--stitch-primary) 12%
|
|
||||||
);
|
|
||||||
background: linear-gradient(
|
|
||||||
145deg,
|
|
||||||
color-mix(in srgb, var(--stitch-surface) 94%, var(--stitch-primary) 6%),
|
|
||||||
var(--stitch-surface)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-tile.standard::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
z-index: -1;
|
|
||||||
inset: 0 auto 0 0;
|
|
||||||
width: 3px;
|
|
||||||
background: linear-gradient(
|
|
||||||
180deg,
|
|
||||||
var(--stitch-primary),
|
|
||||||
var(--stitch-success-bright)
|
|
||||||
);
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 180ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-tile.standard:hover,
|
|
||||||
.app-tile.standard:focus-visible {
|
|
||||||
border-color: color-mix(
|
|
||||||
in srgb,
|
|
||||||
var(--stitch-primary) 46%,
|
|
||||||
var(--stitch-border)
|
|
||||||
);
|
|
||||||
box-shadow: 0 16px 34px rgb(0 0 0 / 0.13);
|
|
||||||
transform: translateY(-3px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-tile.standard:hover::before,
|
|
||||||
.app-tile.standard:focus-visible::before {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-tile.standard .tile-arrow {
|
|
||||||
opacity: 0.42;
|
|
||||||
transition:
|
|
||||||
opacity 160ms ease,
|
|
||||||
transform 160ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-tile.standard:hover .tile-arrow,
|
|
||||||
.app-tile.standard:focus-visible .tile-arrow {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(2px, -2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-launch-home {
|
|
||||||
display: grid;
|
|
||||||
gap: 10px;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-links-section {
|
|
||||||
padding: 0 10px 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-links-section > h2 {
|
|
||||||
margin: 0;
|
|
||||||
padding: 10px 10px 12px;
|
|
||||||
color: var(--stitch-text-muted);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 650;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-links-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-results .quick-links-grid > a {
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 108px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 46px minmax(0, 1fr) auto;
|
|
||||||
grid-template-rows: 1fr;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
border: 1px solid var(--stitch-border) !important;
|
|
||||||
border-radius: 13px !important;
|
|
||||||
padding: 14px;
|
|
||||||
background: color-mix(in srgb, var(--stitch-surface) 82%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-results .quick-links-grid > a:hover,
|
|
||||||
.search-results .quick-links-grid > a:focus-visible {
|
|
||||||
border-color: color-mix(
|
|
||||||
in srgb,
|
|
||||||
var(--stitch-primary) 48%,
|
|
||||||
var(--stitch-border)
|
|
||||||
) !important;
|
|
||||||
background: var(--stitch-primary-soft);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-links-grid > a > span:nth-child(2) {
|
|
||||||
min-width: 0;
|
|
||||||
display: grid;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-links-grid > a strong,
|
|
||||||
.quick-links-grid > a small {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-links-grid > a strong {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-links-grid > a small {
|
|
||||||
color: var(--stitch-text-muted);
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-links-grid .result-icon {
|
|
||||||
width: 46px;
|
|
||||||
height: 46px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-topbar {
|
|
||||||
padding-right: max(
|
|
||||||
calc(var(--platform-gutter) + 30px),
|
|
||||||
calc((100vw - var(--platform-max)) / 2 + 30px)
|
|
||||||
);
|
|
||||||
padding-left: max(
|
|
||||||
calc(var(--platform-gutter) + 30px),
|
|
||||||
calc((100vw - var(--platform-max)) / 2 + 30px)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-layout {
|
|
||||||
width: calc(100% - var(--platform-inset));
|
|
||||||
max-width: var(--platform-max);
|
|
||||||
grid-template-columns: clamp(300px, 18vw, 348px) minmax(0, 1fr);
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-content,
|
|
||||||
.settings-page[data-section="appearance"] .settings-content {
|
|
||||||
max-width: none;
|
|
||||||
padding-right: clamp(40px, 4vw, 76px);
|
|
||||||
padding-left: clamp(40px, 4vw, 76px);
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-sidebar nav button {
|
|
||||||
font-size: 15.5px;
|
|
||||||
font-weight: 520;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-sidebar h1,
|
|
||||||
.settings-sidebar .local-note {
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.45;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-heading .eyebrow {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-heading h2 {
|
|
||||||
font-size: clamp(34px, 2vw, 40px);
|
|
||||||
line-height: 1.15;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-heading > p:last-child {
|
|
||||||
max-width: 900px;
|
|
||||||
font-size: 17px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-content :where(input, select, textarea, button) {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-content :where(.setting-label, label > span, .results-note) {
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.45;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-content
|
|
||||||
:where(
|
|
||||||
.management-title small,
|
|
||||||
.management-card small,
|
|
||||||
.widget-option > p,
|
|
||||||
.widget-option > header small,
|
|
||||||
.integration-list article small,
|
|
||||||
.security-callout small,
|
|
||||||
.toggle-list article small,
|
|
||||||
.appearance-advanced small,
|
|
||||||
.integration-section-heading small
|
|
||||||
) {
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.55;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-content
|
|
||||||
:where(
|
|
||||||
.management-title strong,
|
|
||||||
.management-card strong,
|
|
||||||
.widget-option strong,
|
|
||||||
.toggle-list article strong,
|
|
||||||
.integration-list article strong
|
|
||||||
) {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.management-table-head,
|
|
||||||
.filter-pills button,
|
|
||||||
.pagination span,
|
|
||||||
.favorite-editor > summary {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1900px) {
|
|
||||||
.dashboard-canvas {
|
|
||||||
padding-right: calc(var(--widget-dock-width) + 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-insights-panel {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 20;
|
|
||||||
top: 96px;
|
|
||||||
right: max(var(--platform-gutter), calc((100vw - var(--platform-max)) / 2));
|
|
||||||
width: var(--widget-dock-width);
|
|
||||||
max-height: calc(100vh - 120px);
|
|
||||||
overflow: auto;
|
|
||||||
margin: 0;
|
|
||||||
background: color-mix(in srgb, var(--stitch-surface) 92%, transparent);
|
|
||||||
box-shadow: 0 20px 70px rgb(0 0 0 / 0.18);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
scrollbar-width: thin;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-insights-panel > summary {
|
|
||||||
position: sticky;
|
|
||||||
z-index: 3;
|
|
||||||
top: 0;
|
|
||||||
min-height: 76px;
|
|
||||||
background: color-mix(in srgb, var(--stitch-surface) 96%, transparent);
|
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-insights-panel .dashboard-widgets {
|
|
||||||
padding: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-insights-panel .widgets-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-insights-panel .widget-shell.widget-size-wide {
|
|
||||||
grid-column: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-insights-panel .widgets-section > header {
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-insights-panel .widgets-actions {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-insights-panel .widgets-edit,
|
|
||||||
.dashboard-insights-panel .widgets-refresh {
|
|
||||||
flex: 1 1 0;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-canvas .app-grid {
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-canvas .app-grid.feature-grid {
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 2600px) {
|
|
||||||
.dashboard-canvas .app-grid {
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-card-grid,
|
|
||||||
.integration-list,
|
|
||||||
.settings-page[data-section="favorites"] .compact-list {
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
-342
@@ -1,342 +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=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&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": {
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"outline-variant": "#454653",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"on-tertiary-container": "#0f00a2",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"primary": "#bdc2ff",
|
|
||||||
"primary-container": "#818cf8",
|
|
||||||
"outline": "#908f9e",
|
|
||||||
"tertiary-container": "#8689ff",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"on-primary-fixed": "#000767",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"primary-fixed-dim": "#bdc2ff",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"tertiary-fixed": "#e1e0ff",
|
|
||||||
"primary-fixed": "#e0e0ff",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"on-tertiary": "#1000a9",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"on-primary": "#131e8c",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"on-primary-container": "#101b8a",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"inverse-primary": "#4953bc",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"surface-tint": "#bdc2ff",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"on-tertiary-fixed": "#07006c",
|
|
||||||
"on-primary-fixed-variant": "#2f3aa3",
|
|
||||||
"tertiary-fixed-dim": "#c0c1ff",
|
|
||||||
"tertiary": "#c0c1ff",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-surface-variant": "#c6c5d5",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"inverse-on-surface": "#283044"
|
|
||||||
},
|
|
||||||
"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-lg-mobile": ["Geist"],
|
|
||||||
"status-label": ["Geist"],
|
|
||||||
"body-md": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"body-sm": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"status-label": ["13px", {"lineHeight": "18px", "fontWeight": "500"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
||||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body { font-family: 'Geist', sans-serif; }
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 1;
|
|
||||||
text-transform: none;
|
|
||||||
letter-spacing: normal;
|
|
||||||
word-wrap: normal;
|
|
||||||
white-space: nowrap;
|
|
||||||
direction: ltr;
|
|
||||||
}
|
|
||||||
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
|
|
||||||
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
|
||||||
.custom-scrollbar::-webkit-scrollbar-thumb { background: #2d3449; border-radius: 10px; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-background text-on-background overflow-hidden">
|
|
||||||
<!-- Main Dashboard Underlay (Apps Settings Screen) -->
|
|
||||||
<div class="flex h-screen w-full">
|
|
||||||
<!-- SideNavBar Anchor -->
|
|
||||||
<aside class="hidden md:flex flex-col py-stack-md px-stack-sm gap-y-1 bg-surface-container-low dark:bg-surface-container-low h-full w-64 border-r border-outline-variant">
|
|
||||||
<div class="px-4 py-6 mb-4">
|
|
||||||
<h1 class="font-headline-md text-headline-md font-bold text-primary dark:text-primary">DockDeck</h1>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Instellingen</p>
|
|
||||||
</div>
|
|
||||||
<nav class="flex-1 space-y-1">
|
|
||||||
<div class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all cursor-pointer">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Algemeen</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-lg font-medium transition-all cursor-pointer">
|
|
||||||
<span class="material-symbols-outlined">grid_view</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Apps</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all cursor-pointer">
|
|
||||||
<span class="material-symbols-outlined">star</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Favorieten</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all cursor-pointer">
|
|
||||||
<span class="material-symbols-outlined">category</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Categorieën</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all cursor-pointer">
|
|
||||||
<span class="material-symbols-outlined">palette</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Weergave</span>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content Area (Blurred Background for Drawer) -->
|
|
||||||
<main class="flex-1 overflow-auto bg-surface-container-lowest p-8 flex flex-col gap-8 opacity-40 grayscale">
|
|
||||||
<div class="flex justify-between items-center">
|
|
||||||
<h2 class="font-headline-lg text-headline-lg">Apps beheren</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
<!-- Mock Service Cards -->
|
|
||||||
<div class="bg-surface-container border border-outline-variant p-6 rounded-xl">
|
|
||||||
<div class="flex items-center gap-4 mb-4">
|
|
||||||
<div class="w-12 h-12 bg-surface-container-highest rounded-lg flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary">dns</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md">Pi-hole</h3>
|
|
||||||
<span class="font-label-caps text-label-caps text-on-surface-variant">Networking</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-[#10b981]"></div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Active Card (Plex) -->
|
|
||||||
<div class="bg-surface-container border border-primary p-6 rounded-xl ring-2 ring-primary ring-opacity-20 shadow-lg">
|
|
||||||
<div class="flex items-center gap-4 mb-4">
|
|
||||||
<div class="w-12 h-12 bg-surface-container-highest rounded-lg flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary">play_circle</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md">Plex</h3>
|
|
||||||
<span class="font-label-caps text-label-caps text-on-surface-variant">Media</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-[#10b981]"></div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
<!-- Overlay Backdrop -->
|
|
||||||
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm z-40 transition-opacity duration-300"></div>
|
|
||||||
<!-- App-editor drawer -->
|
|
||||||
<div class="fixed top-0 right-0 h-full w-full md:w-[480px] bg-surface-container shadow-2xl z-50 flex flex-col transform translate-x-0 transition-transform duration-500 border-l border-outline-variant" id="drawer">
|
|
||||||
<!-- Drawer Header -->
|
|
||||||
<div class="px-gutter py-stack-md flex justify-between items-center border-b border-outline-variant">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="font-label-caps text-label-caps text-primary tracking-widest">BEWERKEN</span>
|
|
||||||
<h2 class="font-headline-md text-headline-md text-on-surface">Plex</h2>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<button class="p-2 text-on-surface-variant hover:bg-surface-container-highest rounded-full transition-colors active:scale-95">
|
|
||||||
<span class="material-symbols-outlined">close</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Scrollable Content -->
|
|
||||||
<div class="flex-1 overflow-y-auto px-gutter py-8 space-y-10 custom-scrollbar">
|
|
||||||
<!-- Section 1: Algemene informatie -->
|
|
||||||
<section class="space-y-6">
|
|
||||||
<div class="flex items-center gap-2 text-primary">
|
|
||||||
<span class="material-symbols-outlined text-sm">info</span>
|
|
||||||
<h3 class="font-label-caps text-label-caps uppercase">Algemene informatie</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="space-y-2">
|
|
||||||
<label class="font-body-sm text-body-sm text-on-surface-variant ml-1">App Naam</label>
|
|
||||||
<input class="w-full bg-surface-container-lowest border border-outline-variant focus:border-primary-container focus:ring-2 focus:ring-primary-container/20 rounded-lg py-3 px-4 text-on-surface transition-all placeholder:text-outline" type="text" value="Plex"/>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-2">
|
|
||||||
<label class="font-body-sm text-body-sm text-on-surface-variant ml-1">Icoon</label>
|
|
||||||
<div class="flex items-center gap-4 bg-surface-container-lowest p-4 border border-outline-variant rounded-lg">
|
|
||||||
<div class="w-12 h-12 bg-surface-container-highest rounded-lg flex items-center justify-center ring-1 ring-outline-variant">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl">play_circle</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<p class="font-body-sm text-body-sm font-medium">play_circle</p>
|
|
||||||
<p class="text-xs text-on-surface-variant">Material Symbol</p>
|
|
||||||
</div>
|
|
||||||
<button class="text-primary font-body-sm text-body-sm hover:underline">Wijzig</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section 2: Zichtbaarheid en categorie -->
|
|
||||||
<section class="space-y-6">
|
|
||||||
<div class="flex items-center gap-2 text-primary">
|
|
||||||
<span class="material-symbols-outlined text-sm">visibility</span>
|
|
||||||
<h3 class="font-label-caps text-label-caps uppercase">Zichtbaarheid en categorie</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div class="flex items-center justify-between p-4 bg-surface-container-lowest border border-outline-variant rounded-lg">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="font-body-sm text-body-sm font-medium">Tonen op dashboard</span>
|
|
||||||
<span class="text-xs text-on-surface-variant">Maak deze app zichtbaar voor alle gebruikers</span>
|
|
||||||
</div>
|
|
||||||
<label class="relative inline-flex items-center cursor-pointer">
|
|
||||||
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
||||||
<div class="w-11 h-6 bg-surface-container-highest 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-container"></div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-2">
|
|
||||||
<label class="font-body-sm text-body-sm text-on-surface-variant ml-1">Categorie</label>
|
|
||||||
<div class="relative">
|
|
||||||
<select class="w-full appearance-none bg-surface-container-lowest border border-outline-variant focus:border-primary-container focus:ring-2 focus:ring-primary-container/20 rounded-lg py-3 px-4 text-on-surface transition-all pr-10">
|
|
||||||
<option>Media</option>
|
|
||||||
<option>Networking</option>
|
|
||||||
<option>Automatisering</option>
|
|
||||||
<option>Tools</option>
|
|
||||||
<option>Favorieten</option>
|
|
||||||
</select>
|
|
||||||
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-on-surface-variant">expand_more</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section 3: Lokale URL -->
|
|
||||||
<section class="space-y-6">
|
|
||||||
<div class="flex items-center gap-2 text-primary">
|
|
||||||
<span class="material-symbols-outlined text-sm">lan</span>
|
|
||||||
<h3 class="font-label-caps text-label-caps uppercase">Lokale URL</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="space-y-2">
|
|
||||||
<div class="flex justify-between items-center mb-1">
|
|
||||||
<label class="font-body-sm text-body-sm text-on-surface-variant ml-1">IP of Hostname</label>
|
|
||||||
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-secondary-container/10 border border-secondary-container/30 text-[10px] font-bold text-secondary-container tracking-wider uppercase">
|
|
||||||
<span class="material-symbols-outlined !text-[12px]">auto_awesome</span>
|
|
||||||
Automatisch ontdekt
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<input class="flex-1 bg-surface-container-lowest border border-outline-variant rounded-lg py-3 px-4 text-on-surface/60 font-mono text-sm cursor-not-allowed" readonly="" type="text" value="http://192.168.1.50:32400"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-2">
|
|
||||||
<label class="font-body-sm text-body-sm text-on-surface-variant ml-1">Handmatige override</label>
|
|
||||||
<input class="w-full bg-surface-container-lowest border border-outline-variant focus:border-primary-container focus:ring-2 focus:ring-primary-container/20 rounded-lg py-3 px-4 text-on-surface transition-all placeholder:text-outline-variant font-mono text-sm" placeholder="bv. http://plex.local" type="text"/>
|
|
||||||
</div>
|
|
||||||
<button class="flex items-center gap-2 text-primary hover:text-primary-container font-body-sm text-body-sm transition-colors group">
|
|
||||||
<span class="material-symbols-outlined group-hover:rotate-180 transition-transform duration-500">settings_backup_restore</span>
|
|
||||||
Automatische waarde herstellen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section 4: Externe URL -->
|
|
||||||
<section class="space-y-6">
|
|
||||||
<div class="flex items-center gap-2 text-primary">
|
|
||||||
<span class="material-symbols-outlined text-sm">public</span>
|
|
||||||
<h3 class="font-label-caps text-label-caps uppercase">Externe URL</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<span class="font-body-sm text-body-sm text-on-surface-variant">Externe toegang inschakelen</span>
|
|
||||||
<label class="relative inline-flex items-center cursor-pointer">
|
|
||||||
<input class="sr-only peer" id="externalToggle" type="checkbox"/>
|
|
||||||
<div class="w-11 h-6 bg-surface-container-highest 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-container"></div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<!-- Hidden content logic usually via JS, but styled here for initial state as per user request (Only shown if enabled) -->
|
|
||||||
<div class="hidden space-y-2 animate-in fade-in slide-in-from-top-1 duration-200" id="externalField">
|
|
||||||
<label class="font-body-sm text-body-sm text-on-surface-variant ml-1">Public URL</label>
|
|
||||||
<input class="w-full bg-surface-container-lowest border border-outline-variant focus:border-primary-container focus:ring-2 focus:ring-primary-container/20 rounded-lg py-3 px-4 text-on-surface transition-all font-mono text-sm" placeholder="https://plex.jouwdomein.nl" type="text"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<!-- Drawer Footer (Buttons) -->
|
|
||||||
<div class="p-gutter bg-surface-container-low border-t border-outline-variant flex items-center justify-end gap-3">
|
|
||||||
<button class="px-6 py-3 font-body-md text-body-md text-on-surface hover:bg-surface-container-highest rounded-lg transition-all active:scale-[0.98]">
|
|
||||||
Annuleren
|
|
||||||
</button>
|
|
||||||
<button class="px-6 py-3 font-body-md text-body-md bg-primary-container text-on-primary-container font-medium rounded-lg shadow-lg shadow-primary-container/10 hover:brightness-110 transition-all active:scale-[0.98]">
|
|
||||||
Opslaan
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Micro-interaction for external toggle -->
|
|
||||||
<script>
|
|
||||||
const toggle = document.getElementById('externalToggle');
|
|
||||||
const field = document.getElementById('externalField');
|
|
||||||
|
|
||||||
toggle.addEventListener('change', (e) => {
|
|
||||||
if (e.target.checked) {
|
|
||||||
field.classList.remove('hidden');
|
|
||||||
field.classList.add('block');
|
|
||||||
} else {
|
|
||||||
field.classList.remove('block');
|
|
||||||
field.classList.add('hidden');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 167 KiB |
-420
@@ -1,420 +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 - Media Categorie</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&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": {
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"outline-variant": "#454653",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"on-tertiary-container": "#0f00a2",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"primary": "#bdc2ff",
|
|
||||||
"primary-container": "#818cf8",
|
|
||||||
"outline": "#908f9e",
|
|
||||||
"tertiary-container": "#8689ff",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"on-primary": "#131e8c",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"on-surface-variant": "#c6c5d5",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"inverse-on-surface": "#283044"
|
|
||||||
},
|
|
||||||
"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-lg-mobile": ["Geist"],
|
|
||||||
"status-label": ["Geist"],
|
|
||||||
"body-md": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"body-sm": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"status-label": ["13px", {"lineHeight": "18px", "fontWeight": "500"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
||||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: 'Geist', sans-serif;
|
|
||||||
background-color: #0b1326;
|
|
||||||
color: #dbe2fd;
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
.app-card {
|
|
||||||
transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
||||||
}
|
|
||||||
.app-card:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
box-shadow: 0 12px 24px -8px rgba(129, 140, 248, 0.15);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="min-h-screen flex flex-col">
|
|
||||||
<!-- 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-8">
|
|
||||||
<div class="font-headline-md text-headline-md font-bold text-primary flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">dock</span>
|
|
||||||
DockDeck
|
|
||||||
</div>
|
|
||||||
<nav class="hidden md:flex items-center gap-6">
|
|
||||||
<a class="font-label-caps text-label-caps text-on-surface-variant hover:text-on-surface transition-colors" href="#">Dashboard</a>
|
|
||||||
<a class="font-label-caps text-label-caps text-primary border-b-2 border-primary pb-1" href="#">Favorieten</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<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-sm">search</span>
|
|
||||||
<input class="bg-surface-container-low border border-outline-variant rounded-full py-1.5 pl-10 pr-4 text-body-sm focus:ring-2 focus:ring-primary-container outline-none w-64 transition-all" placeholder="Zoek services..." type="text"/>
|
|
||||||
</div>
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:bg-surface-container-highest p-2 rounded-full transition-colors">sync</button>
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:bg-surface-container-highest p-2 rounded-full transition-colors">settings</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="flex flex-1 pt-16">
|
|
||||||
<!-- SideNavBar -->
|
|
||||||
<aside class="hidden md:flex flex-col w-64 bg-surface-container-low border-r border-outline-variant fixed h-[calc(100vh-64px)] overflow-y-auto">
|
|
||||||
<div class="py-stack-md px-stack-sm flex flex-col gap-y-1">
|
|
||||||
<div class="px-4 py-4">
|
|
||||||
<h2 class="font-headline-sm text-headline-sm text-primary">Instellingen</h2>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant opacity-70">DockDeck Configuratie</p>
|
|
||||||
</div>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Algemeen</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined">grid_view</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Apps</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined">star</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Favorieten</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2.5 bg-secondary-container text-on-secondary-container rounded-lg font-medium transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">category</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Categorieën</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined">palette</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Weergave</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined">extension</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Integraties</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2.5 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined">settings_backup_restore</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Back-up en herstel</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content -->
|
|
||||||
<main class="flex-1 md:ml-64 p-gutter max-w-container-max mx-auto w-full">
|
|
||||||
<!-- Breadcrumb & Header -->
|
|
||||||
<div class="mb-stack-lg">
|
|
||||||
<nav class="flex items-center gap-2 mb-2">
|
|
||||||
<span class="font-body-sm text-body-sm text-on-surface-variant">Overzicht</span>
|
|
||||||
<span class="material-symbols-outlined text-sm text-outline">chevron_right</span>
|
|
||||||
<span class="font-body-sm text-body-sm text-primary font-medium">Media</span>
|
|
||||||
</nav>
|
|
||||||
<div class="flex justify-between items-end">
|
|
||||||
<div>
|
|
||||||
<h1 class="font-headline-lg text-headline-lg text-on-surface">Media Bibliotheek</h1>
|
|
||||||
<p class="font-body-md text-body-md text-on-surface-variant">Beheer en bekijk al je streaming services en media-automatisering.</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 bg-surface-container-high p-1 rounded-lg">
|
|
||||||
<button class="px-4 py-1.5 rounded-md font-body-sm text-body-sm bg-primary-container text-on-primary-container transition-all">Grid</button>
|
|
||||||
<button class="px-4 py-1.5 rounded-md font-body-sm text-body-sm text-on-surface-variant hover:text-on-surface transition-all">Lijst</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Category Tabs -->
|
|
||||||
<div class="flex gap-4 border-b border-outline-variant mb-stack-lg overflow-x-auto pb-px">
|
|
||||||
<button class="flex items-center gap-2 px-4 py-3 font-label-caps text-label-caps text-primary border-b-2 border-primary transition-all whitespace-nowrap">
|
|
||||||
<span class="material-symbols-outlined text-sm">movie</span> MEDIA
|
|
||||||
</button>
|
|
||||||
<button class="flex items-center gap-2 px-4 py-3 font-label-caps text-label-caps text-on-surface-variant hover:text-on-surface transition-all whitespace-nowrap">
|
|
||||||
<span class="material-symbols-outlined text-sm">terminal</span> SYSTEM
|
|
||||||
</button>
|
|
||||||
<button class="flex items-center gap-2 px-4 py-3 font-label-caps text-label-caps text-on-surface-variant hover:text-on-surface transition-all whitespace-nowrap">
|
|
||||||
<span class="material-symbols-outlined text-sm">lan</span> NETWERK
|
|
||||||
</button>
|
|
||||||
<button class="flex items-center gap-2 px-4 py-3 font-label-caps text-label-caps text-on-surface-variant hover:text-on-surface transition-all whitespace-nowrap">
|
|
||||||
<span class="material-symbols-outlined text-sm">home</span> SMART HOME
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- App Bento Grid -->
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
||||||
<!-- Plex -->
|
|
||||||
<div class="app-card bg-surface-container rounded-xl border border-outline-variant overflow-hidden group cursor-pointer">
|
|
||||||
<div class="p-5 flex flex-col h-full gap-4">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-[#e5a00d]/10 flex items-center justify-center border border-[#e5a00d]/20">
|
|
||||||
<span class="material-symbols-outlined text-[#e5a00d]" style="font-variation-settings: 'FILL' 1;">play_circle</span>
|
|
||||||
</div>
|
|
||||||
<span class="bg-secondary/10 border border-secondary/20 text-secondary px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Plex</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-1">Ultieme Media Server</p>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto pt-4 flex items-center justify-between border-t border-outline-variant/30">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">arrow_forward_ios</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Jellyfin -->
|
|
||||||
<div class="app-card bg-surface-container rounded-xl border border-outline-variant overflow-hidden group cursor-pointer">
|
|
||||||
<div class="p-5 flex flex-col h-full gap-4">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-[#00a4dc]/10 flex items-center justify-center border border-[#00a4dc]/20">
|
|
||||||
<span class="material-symbols-outlined text-[#00a4dc]" style="font-variation-settings: 'FILL' 1;">movie</span>
|
|
||||||
</div>
|
|
||||||
<span class="bg-secondary/10 border border-secondary/20 text-secondary px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Jellyfin</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-1">Open Source Media System</p>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto pt-4 flex items-center justify-between border-t border-outline-variant/30">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">arrow_forward_ios</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Sonarr -->
|
|
||||||
<div class="app-card bg-surface-container rounded-xl border border-outline-variant overflow-hidden group cursor-pointer">
|
|
||||||
<div class="p-5 flex flex-col h-full gap-4">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-[#00bcff]/10 flex items-center justify-center border border-[#00bcff]/20">
|
|
||||||
<span class="material-symbols-outlined text-[#00bcff]" style="font-variation-settings: 'FILL' 1;">tv</span>
|
|
||||||
</div>
|
|
||||||
<span class="bg-secondary/10 border border-secondary/20 text-secondary px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Sonarr</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-1">TV Series Automatisering</p>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto pt-4 flex items-center justify-between border-t border-outline-variant/30">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">arrow_forward_ios</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Radarr -->
|
|
||||||
<div class="app-card bg-surface-container rounded-xl border border-outline-variant overflow-hidden group cursor-pointer">
|
|
||||||
<div class="p-5 flex flex-col h-full gap-4">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-[#ffc230]/10 flex items-center justify-center border border-[#ffc230]/20">
|
|
||||||
<span class="material-symbols-outlined text-[#ffc230]" style="font-variation-settings: 'FILL' 1;">theaters</span>
|
|
||||||
</div>
|
|
||||||
<span class="bg-secondary/10 border border-secondary/20 text-secondary px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Radarr</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-1">Film Automatisering</p>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto pt-4 flex items-center justify-between border-t border-outline-variant/30">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">arrow_forward_ios</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Tautulli -->
|
|
||||||
<div class="app-card bg-surface-container rounded-xl border border-outline-variant overflow-hidden group cursor-pointer">
|
|
||||||
<div class="p-5 flex flex-col h-full gap-4">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-[#e5a00d]/10 flex items-center justify-center border border-[#e5a00d]/20">
|
|
||||||
<span class="material-symbols-outlined text-[#e5a00d]" style="font-variation-settings: 'FILL' 1;">insights</span>
|
|
||||||
</div>
|
|
||||||
<span class="bg-on-surface-variant/10 border border-on-surface-variant/20 text-on-surface-variant px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider">Verborgen</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Tautulli</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-1">Plex Statistieken & Monitoring</p>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto pt-4 flex items-center justify-between border-t border-outline-variant/30">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">arrow_forward_ios</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Bazarr -->
|
|
||||||
<div class="app-card bg-surface-container rounded-xl border border-outline-variant overflow-hidden group cursor-pointer">
|
|
||||||
<div class="p-5 flex flex-col h-full gap-4">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-[#536dfe]/10 flex items-center justify-center border border-[#536dfe]/20">
|
|
||||||
<span class="material-symbols-outlined text-[#536dfe]" style="font-variation-settings: 'FILL' 1;">subtitles</span>
|
|
||||||
</div>
|
|
||||||
<span class="bg-secondary/10 border border-secondary/20 text-secondary px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Bazarr</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-1">Ondertitel Beheer</p>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto pt-4 flex items-center justify-between border-t border-outline-variant/30">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">arrow_forward_ios</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Overseerr -->
|
|
||||||
<div class="app-card bg-surface-container rounded-xl border border-outline-variant overflow-hidden group cursor-pointer">
|
|
||||||
<div class="p-5 flex flex-col h-full gap-4">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-[#f04747]/10 flex items-center justify-center border border-[#f04747]/20">
|
|
||||||
<span class="material-symbols-outlined text-[#f04747]" style="font-variation-settings: 'FILL' 1;">add_to_queue</span>
|
|
||||||
</div>
|
|
||||||
<span class="bg-secondary/10 border border-secondary/20 text-secondary px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Overseerr</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-1">Verzoeken & Ontdekking</p>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto pt-4 flex items-center justify-between border-t border-outline-variant/30">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">arrow_forward_ios</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Lidarr -->
|
|
||||||
<div class="app-card bg-surface-container rounded-xl border border-outline-variant overflow-hidden group cursor-pointer">
|
|
||||||
<div class="p-5 flex flex-col h-full gap-4">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-[#40d28d]/10 flex items-center justify-center border border-[#40d28d]/20">
|
|
||||||
<span class="material-symbols-outlined text-[#40d28d]" style="font-variation-settings: 'FILL' 1;">music_note</span>
|
|
||||||
</div>
|
|
||||||
<span class="bg-secondary/10 border border-secondary/20 text-secondary px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Lidarr</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-1">Muziek Automatisering</p>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto pt-4 flex items-center justify-between border-t border-outline-variant/30">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-error"></div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Offline</span>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">arrow_forward_ios</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Empty State / New Discovery (Chip) -->
|
|
||||||
<div class="mt-stack-lg p-6 bg-surface-container-low rounded-2xl border border-dashed border-outline-variant flex flex-col items-center justify-center text-center">
|
|
||||||
<div class="mb-4">
|
|
||||||
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-bold border border-primary/20">NIEUW ONTDEKT</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-headline-md text-headline-md text-on-surface">Nieuwe container gevonden?</h4>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant max-w-sm mx-auto mb-6">DockDeck heeft een nieuwe onbekende container gedetecteerd. Wil je deze toevoegen aan je media overzicht?</p>
|
|
||||||
<button class="bg-primary-container text-on-primary-container px-6 py-2 rounded-lg font-medium hover:brightness-110 transition-all flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined">add</span> Container Toevoegen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
<!-- Mobile Navigation -->
|
|
||||||
<footer class="md:hidden fixed bottom-0 left-0 right-0 bg-surface-container-high border-t border-outline-variant h-16 px-4 flex items-center justify-around z-50">
|
|
||||||
<button class="flex flex-col items-center gap-1 text-primary">
|
|
||||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">dashboard</span>
|
|
||||||
<span class="text-[10px] font-bold uppercase">Home</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">star</span>
|
|
||||||
<span class="text-[10px] font-bold uppercase">Favs</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">search</span>
|
|
||||||
<span class="text-[10px] font-bold uppercase">Zoek</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">person</span>
|
|
||||||
<span class="text-[10px] font-bold uppercase">Profiel</span>
|
|
||||||
</button>
|
|
||||||
</footer>
|
|
||||||
<script>
|
|
||||||
// Micro-interactions for app cards
|
|
||||||
document.querySelectorAll('.app-card').forEach(card => {
|
|
||||||
card.addEventListener('mousedown', () => {
|
|
||||||
card.style.transform = 'scale(0.97) translateY(-2px)';
|
|
||||||
});
|
|
||||||
card.addEventListener('mouseup', () => {
|
|
||||||
card.style.transform = 'translateY(-4px)';
|
|
||||||
});
|
|
||||||
card.addEventListener('mouseleave', () => {
|
|
||||||
card.style.transform = 'translateY(0)';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 257 KiB |
-331
@@ -1,331 +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=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&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": {
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"outline-variant": "#454653",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"on-tertiary-container": "#0f00a2",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"primary": "#bdc2ff",
|
|
||||||
"primary-container": "#818cf8",
|
|
||||||
"outline": "#908f9e",
|
|
||||||
"tertiary-container": "#8689ff",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"primary-fixed-dim": "#bdc2ff",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"tertiary-fixed": "#e1e0ff",
|
|
||||||
"primary-fixed": "#e0e0ff",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"on-tertiary": "#1000a9",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"on-primary": "#131e8c",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"on-primary-container": "#101b8a",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"inverse-primary": "#4953bc",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"surface-tint": "#bdc2ff",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"on-tertiary-fixed": "#07006c",
|
|
||||||
"on-primary-fixed-variant": "#2f3aa3",
|
|
||||||
"tertiary-fixed-dim": "#c0c1ff",
|
|
||||||
"tertiary": "#c0c1ff",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-surface-variant": "#c6c5d5",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"inverse-on-surface": "#283044"
|
|
||||||
},
|
|
||||||
"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-lg-mobile": ["Geist"],
|
|
||||||
"status-label": ["Geist"],
|
|
||||||
"body-md": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"body-sm": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"status-label": ["13px", {"lineHeight": "18px", "fontWeight": "500"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
||||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body { font-family: 'Geist', sans-serif; }
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(22, 31, 53, 0.6);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
.bento-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-surface text-on-surface min-h-screen">
|
|
||||||
<!-- TopAppBar -->
|
|
||||||
<header class="bg-surface sticky top-0 z-50 border-b border-outline-variant">
|
|
||||||
<div class="flex justify-between items-center h-16 px-gutter max-w-container-max mx-auto">
|
|
||||||
<div class="font-headline-md text-headline-md font-bold text-primary flex items-center gap-2">
|
|
||||||
<img alt="DockDeck Logo" class="h-8 w-auto" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB1OtpIheQletkNypVk6NgTvPJiJxdZ8PboQsLxOCHkjphspcpb3q4ll8lCUkxAQRw5wXZwmp8ultENewebOK63r1Js4AdQ8CHXn_O2rKKdG2EU_uZRPckT6Dkcby7HkkoujYeyfmMSp9SINWcAUzIXTXKXFJCWven8jPzdZXzJlUHRzbZWbTCnvXbIAhieSIUoi9z5Gv9ZOP1ypW8MKm0gyEfe7RG0mlWoNlqjqDfLPyWAeEWhW_R7Q8bLY72upxGGfuOrMPJtSD9n"/>
|
|
||||||
<span class="tracking-tight">DockDeck</span>
|
|
||||||
</div>
|
|
||||||
<!-- Quick Launch / Search -->
|
|
||||||
<div class="hidden md:flex flex-1 max-w-md mx-8">
|
|
||||||
<div class="w-full relative group">
|
|
||||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
|
||||||
<input class="w-full bg-surface-container-high border-none rounded-lg py-2 pl-10 pr-4 text-body-md focus:ring-2 focus:ring-primary-container transition-all" placeholder="Snel zoeken..." type="text"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<nav class="flex items-center gap-6">
|
|
||||||
<div class="hidden md:flex gap-4">
|
|
||||||
<a class="font-label-caps text-label-caps text-primary border-b-2 border-primary pb-1" href="#">Dashboard</a>
|
|
||||||
<a class="font-label-caps text-label-caps text-on-surface-variant hover:text-on-surface transition-colors" href="#">Favorieten</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 ml-4">
|
|
||||||
<button class="p-2 rounded-full hover:bg-surface-container-highest transition-colors active:scale-95 duration-150 relative">
|
|
||||||
<span class="material-symbols-outlined text-primary">sync</span>
|
|
||||||
<span class="absolute top-2 right-2 w-2 h-2 bg-secondary rounded-full"></span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 rounded-full hover:bg-surface-container-highest transition-colors active:scale-95 duration-150">
|
|
||||||
<span class="material-symbols-outlined text-primary">settings</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<main class="max-w-container-max mx-auto px-gutter py-8">
|
|
||||||
<!-- Greeting & Banner -->
|
|
||||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-stack-lg">
|
|
||||||
<div>
|
|
||||||
<h1 class="font-headline-lg text-headline-lg mb-1">Goedenavond</h1>
|
|
||||||
<p class="text-on-surface-variant font-body-md">Welkom terug bij je digitale hoofdkwartier.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-secondary-container/10 border border-secondary-container/30 px-4 py-2 rounded-xl flex items-center gap-3 group cursor-pointer hover:bg-secondary-container/20 transition-all">
|
|
||||||
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
|
||||||
<span class="font-body-sm text-body-sm text-secondary font-medium">3 nieuwe apps ontdekt</span>
|
|
||||||
<span class="material-symbols-outlined text-secondary text-sm">chevron_right</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Category Nav -->
|
|
||||||
<div class="flex gap-2 mb-stack-lg overflow-x-auto pb-2 scrollbar-hide">
|
|
||||||
<button class="px-5 py-2 rounded-full bg-primary-container text-on-primary-container font-label-caps text-label-caps whitespace-nowrap">Alles</button>
|
|
||||||
<button class="px-5 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest transition-all font-label-caps text-label-caps whitespace-nowrap">Media</button>
|
|
||||||
<button class="px-5 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest transition-all font-label-caps text-label-caps whitespace-nowrap">Smart Home</button>
|
|
||||||
<button class="px-5 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest transition-all font-label-caps text-label-caps whitespace-nowrap">Productiviteit</button>
|
|
||||||
<button class="px-5 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest transition-all font-label-caps text-label-caps whitespace-nowrap">Netwerk</button>
|
|
||||||
</div>
|
|
||||||
<!-- Section Favorieten -->
|
|
||||||
<section class="mb-stack-lg">
|
|
||||||
<div class="flex items-center gap-2 mb-4">
|
|
||||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
||||||
<h2 class="font-headline-md text-headline-md">Favorieten</h2>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-wrap gap-4">
|
|
||||||
<!-- App Icon Card -->
|
|
||||||
<a class="glass-card p-4 rounded-xl flex items-center gap-4 w-full md:w-64 group hover:border-primary/30 transition-all active:scale-[0.98]" href="https://google.com" target="_blank">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center p-2 group-hover:scale-110 transition-transform">
|
|
||||||
<img class="w-8 h-8 object-contain" data-alt="Official Google logo with vibrant primary colors isolated on a clean transparent-style background. Minimalist branding illustration with crisp edges and high fidelity for a professional tech dashboard UI." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDeL1KcbID1g6eSxEiTGZ9zgwjniCkdFThUxHv_hAygrD6hGHv2q9_WN93AaklugkL1BIlu1EGlOXvag6gjcMJamDJTksy0gyw_1FKCBFqB---ha9tmw3WL6I0JCSacgIQ-glVT77kbyoOJNeyiNpkSD1kzP7hQyVMM4Lq-5n9nDgxYxJ8xkp85WcFEAYO49EZ1TespNE8I_s7-G08Zq8G9rnwFe2jTxkJuJnm7I3c3ML3t4ZNpwgre3F1sfVNPaqy5NC9C2UUMUZp4"/>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<p class="font-body-md font-medium">Google</p>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-sm opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
|
|
||||||
</a>
|
|
||||||
<a class="glass-card p-4 rounded-xl flex items-center gap-4 w-full md:w-64 group hover:border-primary/30 transition-all active:scale-[0.98]" href="https://youtube.com" target="_blank">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center p-2 group-hover:scale-110 transition-transform">
|
|
||||||
<img class="w-8 h-8 object-contain" data-alt="Minimalist YouTube play button logo in bright red, styled as a modern vector icon for a dark-themed interface. Clean professional branding design with soft lighting and premium finish." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBjs6a9sL3JtQR46KRFZp-BUjwXpY2A33uvGVDbcR9Elmr69LQ2KUiiu3ktpET38xXTx1TTkX7xdh7DQ9eL0V3KJsLoCL8K9CBsxdCTlIvwBYIceNNWocuKYrU7ZXnguRx2lwOmqKb2dLR7bhOCKfrhsefEtDXALzKqzpSFH3fi0Rq1D7370OwYbRsv7lC8S6vsWsfKKvl39SBh-Y9F-yHPYC3_IfPYhYnpzsPJiytIOq00jHDUYaOMTAPo3OSqsmO3gPlznRgtbg8n"/>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<p class="font-body-md font-medium">YouTube</p>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-sm opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
|
|
||||||
</a>
|
|
||||||
<a class="glass-card p-4 rounded-xl flex items-center gap-4 w-full md:w-64 group hover:border-primary/30 transition-all active:scale-[0.98]" href="https://github.com" target="_blank">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center p-2 group-hover:scale-110 transition-transform">
|
|
||||||
<img class="w-8 h-8 object-contain" data-alt="Official GitHub Octocat logo in white silhouette on a dark background. Minimalist and sleek representation of professional software development branding for a premium developer portal dashboard." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBlLyiSy0H_hsa56hT9l4tNsmdzxFTnYQ20zPbyRx4S-BRqh8vCBbUpHHWedF6x-w7Af5S3jyCXeGRz4LlV1fRTn8P6pSHTPLQlgVGGQQNhP8iho9-k3q_GcEYjtq9O8ziGcF2Zwnx1gjNdhDLoKK5qYH0_mjCICOqQgEYGvzJB_YWd03X7QQC89ob5E_two0DYH3Zfmlrpf_lqh-OyaGFj9vjgPTw4KipQOnAv82fqQE_GzX0MMiR2qoIDNj6K59nnwmnpeJ9cWvHr"/>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<p class="font-body-md font-medium">GitHub</p>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-sm opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section Media -->
|
|
||||||
<section class="mb-stack-lg">
|
|
||||||
<div class="flex items-center gap-2 mb-4">
|
|
||||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">movie</span>
|
|
||||||
<h2 class="font-headline-md text-headline-md">Media</h2>
|
|
||||||
</div>
|
|
||||||
<div class="bento-grid">
|
|
||||||
<!-- Plex Card -->
|
|
||||||
<div class="glass-card p-5 rounded-2xl flex flex-col gap-4 group hover:bg-surface-container-high transition-all">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-[#E5A00D]/20 flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-[#E5A00D]">play_circle</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1.5 px-2 py-1 rounded-full bg-secondary-container/20 border border-secondary-container/30">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="font-status-label text-status-label text-secondary">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md">Plex</h3>
|
|
||||||
<p class="text-on-surface-variant text-body-sm">Media server & Streaming</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Jellyfin Card -->
|
|
||||||
<div class="glass-card p-5 rounded-2xl flex flex-col gap-4 group hover:bg-surface-container-high transition-all">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-[#00A4DC]/20 flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-[#00A4DC]">stream</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1.5 px-2 py-1 rounded-full bg-secondary-container/20 border border-secondary-container/30">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="font-status-label text-status-label text-secondary">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md">Jellyfin</h3>
|
|
||||||
<p class="text-on-surface-variant text-body-sm">De vrije software mediaserver</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Sonarr Card -->
|
|
||||||
<div class="glass-card p-5 rounded-2xl flex flex-col gap-4 group hover:bg-surface-container-high transition-all">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-[#3C9EDD]/20 flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-[#3C9EDD]">tv</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1.5 px-2 py-1 rounded-full bg-error-container/20 border border-error-container/30">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-error"></div>
|
|
||||||
<span class="font-status-label text-status-label text-error">Offline</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md">Sonarr</h3>
|
|
||||||
<p class="text-on-surface-variant text-body-sm">PVR voor TV series</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Radarr Card -->
|
|
||||||
<div class="glass-card p-5 rounded-2xl flex flex-col gap-4 group hover:bg-surface-container-high transition-all">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-[#FFC230]/20 flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-[#FFC230]">movie_filter</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1.5 px-2 py-1 rounded-full bg-surface-variant border border-outline-variant">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-outline"></div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Status onbekend</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md">Radarr</h3>
|
|
||||||
<p class="text-on-surface-variant text-body-sm">PVR voor films</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section Smart Home -->
|
|
||||||
<section class="mb-stack-lg">
|
|
||||||
<div class="flex items-center gap-2 mb-4">
|
|
||||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">home</span>
|
|
||||||
<h2 class="font-headline-md text-headline-md">Smart Home</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
||||||
<!-- Home Assistant -->
|
|
||||||
<div class="glass-card p-6 rounded-2xl flex items-center gap-6 group hover:border-primary/20 transition-all">
|
|
||||||
<div class="relative">
|
|
||||||
<div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center border border-primary/20 group-hover:scale-105 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl">home_app_logo</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute bottom-0 right-0 w-4 h-4 rounded-full bg-secondary border-4 border-surface"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<h3 class="font-headline-md text-headline-md">Home Assistant</h3>
|
|
||||||
<p class="text-on-surface-variant text-body-sm">Centrale automatisering</p>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-all">arrow_forward_ios</span>
|
|
||||||
</div>
|
|
||||||
<!-- AdGuard Home -->
|
|
||||||
<div class="glass-card p-6 rounded-2xl flex items-center gap-6 group hover:border-primary/20 transition-all">
|
|
||||||
<div class="relative">
|
|
||||||
<div class="w-16 h-16 rounded-full bg-secondary/10 flex items-center justify-center border border-secondary/20 group-hover:scale-105 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-secondary text-3xl">shield</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute bottom-0 right-0 w-4 h-4 rounded-full bg-secondary border-4 border-surface"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<h3 class="font-headline-md text-headline-md">AdGuard Home</h3>
|
|
||||||
<p class="text-on-surface-variant text-body-sm">Netwerkbeveiliging & Filter</p>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-all">arrow_forward_ios</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<!-- Background Decoration -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none -z-10 overflow-hidden">
|
|
||||||
<div class="absolute -top-[10%] -right-[5%] w-[40%] h-[40%] rounded-full bg-primary/5 blur-[120px]"></div>
|
|
||||||
<div class="absolute bottom-[5%] -left-[10%] w-[50%] h-[50%] rounded-full bg-secondary/5 blur-[150px]"></div>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
// Simple micro-interaction for cards
|
|
||||||
document.querySelectorAll('.glass-card').forEach(card => {
|
|
||||||
card.addEventListener('mouseenter', () => {
|
|
||||||
card.style.transform = 'translateY(-2px)';
|
|
||||||
});
|
|
||||||
card.addEventListener('mouseleave', () => {
|
|
||||||
card.style.transform = 'translateY(0px)';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 231 KiB |
-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>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 366 KiB |
-492
@@ -1,492 +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 — 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=Geist:wght@100..900&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": {
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"outline-variant": "#454653",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"on-tertiary-container": "#0f00a2",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"primary": "#bdc2ff",
|
|
||||||
"primary-container": "#818cf8",
|
|
||||||
"outline": "#908f9e",
|
|
||||||
"tertiary-container": "#8689ff",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"primary-fixed-dim": "#bdc2ff",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"tertiary-fixed": "#e1e0ff",
|
|
||||||
"primary-fixed": "#e0e0ff",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"on-tertiary": "#1000a9",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"on-primary": "#131e8c",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"on-primary-container": "#101b8a",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"inverse-primary": "#4953bc",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"surface-tint": "#bdc2ff",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"on-tertiary-fixed": "#07006c",
|
|
||||||
"on-primary-fixed-variant": "#2f3aa3",
|
|
||||||
"tertiary-fixed-dim": "#c0c1ff",
|
|
||||||
"tertiary": "#c0c1ff",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-surface-variant": "#c6c5d5",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"inverse-on-surface": "#283044"
|
|
||||||
},
|
|
||||||
"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-lg-mobile": ["Geist"],
|
|
||||||
"status-label": ["Geist"],
|
|
||||||
"body-md": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"body-sm": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"status-label": ["13px", {"lineHeight": "18px", "fontWeight": "500"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
||||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: 'Geist', sans-serif;
|
|
||||||
background-color: #0b1326;
|
|
||||||
color: #dbe2fd;
|
|
||||||
}
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(22, 31, 53, 0.6);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.glass-card:hover {
|
|
||||||
background: rgba(22, 31, 53, 0.8);
|
|
||||||
border-color: rgba(129, 140, 248, 0.3);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 10px 30px -10px rgba(129, 140, 248, 0.1);
|
|
||||||
}
|
|
||||||
.status-dot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
.dot-green { background-color: #10b981; }
|
|
||||||
.dot-red { background-color: #ef4444; }
|
|
||||||
.dot-slate { background-color: #94a3b8; }
|
|
||||||
|
|
||||||
::-webkit-scrollbar { width: 6px; }
|
|
||||||
::-webkit-scrollbar-track { background: #0b1326; }
|
|
||||||
::-webkit-scrollbar-thumb { background: #2d3449; border-radius: 10px; }
|
|
||||||
::-webkit-scrollbar-thumb:hover { background: #454653; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-surface selection:bg-primary-container selection:text-on-primary-container">
|
|
||||||
<!-- Top Navigation Bar -->
|
|
||||||
<header class="fixed top-0 left-0 right-0 z-50 bg-surface/80 backdrop-blur-md border-b border-outline-variant">
|
|
||||||
<div class="flex justify-between items-center h-16 px-gutter max-w-[1920px] mx-auto">
|
|
||||||
<div class="font-headline-md text-headline-md font-bold text-primary flex items-center gap-2 cursor-pointer">
|
|
||||||
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">dock</span>
|
|
||||||
<span>DockDeck</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a class="font-label-caps text-label-caps text-primary border-b-2 border-primary pb-1 transition-colors" href="#">Dashboard</a>
|
|
||||||
<a class="font-label-caps text-label-caps text-on-surface-variant hover:text-on-surface transition-colors" href="#">Favorieten</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="relative group hidden sm:block">
|
|
||||||
<input class="bg-surface-container-high border-none rounded-lg py-2 pl-10 pr-4 text-body-sm font-body-sm focus:ring-2 focus:ring-primary-container w-64 transition-all duration-300" placeholder="Diensten zoeken..." type="text"/>
|
|
||||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant group-focus-within:text-primary">search</span>
|
|
||||||
</div>
|
|
||||||
<button class="p-2 rounded-full hover:bg-surface-container-highest transition-colors active:scale-95 duration-150">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">sync</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 rounded-full hover:bg-surface-container-highest transition-colors active:scale-95 duration-150">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">settings</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<main class="pt-24 pb-12 px-gutter max-w-[1920px] mx-auto min-h-screen">
|
|
||||||
<!-- Welcome Section -->
|
|
||||||
<section class="mb-12">
|
|
||||||
<h1 class="font-headline-lg text-headline-lg mb-2">Goedenavond</h1>
|
|
||||||
<p class="font-body-md text-body-md text-on-surface-variant">Je digitale haven is klaar voor gebruik. Alle 24 diensten zijn operationeel.</p>
|
|
||||||
</section>
|
|
||||||
<!-- Dynamic Grid Layout -->
|
|
||||||
<div class="space-y-stack-lg">
|
|
||||||
<!-- Section: Favorieten -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
||||||
Favorieten
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
|
|
||||||
<!-- Service Card -->
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-primary-container/20 flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-3xl">cloud</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-[10px] px-2 py-1 rounded-full bg-secondary/10 text-secondary border border-secondary/20">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface truncate">Nextcloud</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Opslag & Sync</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Repeat for 6 items in Row -->
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-primary-container/20 flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-3xl">terminal</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-[10px] px-2 py-1 rounded-full bg-secondary/10 text-secondary border border-secondary/20">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface truncate">Portainer</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Container Management</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-primary-container/20 flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-3xl">mail</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-[10px] px-2 py-1 rounded-full bg-secondary/10 text-secondary border border-secondary/20">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface truncate">Mailserver</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Posteo Relay</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-primary-container/20 flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-3xl">monitoring</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-[10px] px-2 py-1 rounded-full bg-secondary/10 text-secondary border border-secondary/20">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface truncate">Grafana</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Server Statistieken</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-primary-container/20 flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-3xl">key</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-[10px] px-2 py-1 rounded-full bg-secondary/10 text-secondary border border-secondary/20">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface truncate">Vaultwarden</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Wachtwoordbeheer</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-primary-container/20 flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-3xl">dns</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-[10px] px-2 py-1 rounded-full bg-secondary/10 text-secondary border border-secondary/20">Zichtbaar</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface truncate">Pi-hole</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Advertentieblokkering</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section: Media -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-primary">play_circle</span>
|
|
||||||
Media
|
|
||||||
</h2>
|
|
||||||
<span class="font-label-caps text-on-surface-variant">3 Actieve Streams</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface group-hover:text-primary transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-3xl">movie</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">Plex</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Home Theater</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface group-hover:text-primary transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-3xl">music_note</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">Navidrome</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Muziek Streaming</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface group-hover:text-primary transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-3xl">download</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">Transmission</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Download Manager</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section: Smart Home -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-primary">home</span>
|
|
||||||
Smart Home
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface">
|
|
||||||
<span class="material-symbols-outlined text-3xl">settings_remote</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">Home Assistant</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Automatisering</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface">
|
|
||||||
<span class="material-symbols-outlined text-3xl">videocam</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">Frigate</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Beveiliging NVR</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-red"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Offline</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section: Productiviteit -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-primary">edit_note</span>
|
|
||||||
Productiviteit
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface">
|
|
||||||
<span class="material-symbols-outlined text-3xl">description</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">Paperless-ngx</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Documentenbeheer</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface">
|
|
||||||
<span class="material-symbols-outlined text-3xl">task_alt</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">Vikunja</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Takenlijst</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section: Netwerk -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-primary">hub</span>
|
|
||||||
Netwerk
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface">
|
|
||||||
<span class="material-symbols-outlined text-3xl">vpn_lock</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">WireGuard</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Toegang op Afstand</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-xl p-5 flex flex-col gap-4 cursor-pointer group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface">
|
|
||||||
<span class="material-symbols-outlined text-3xl">router</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-sm text-body-md font-semibold text-on-surface">UniFi Controller</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Netwerkbeheer</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-2">
|
|
||||||
<span class="status-dot dot-green"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- Floating Atmosphere Elements -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none -z-10 opacity-30 overflow-hidden">
|
|
||||||
<div class="absolute top-[-10%] right-[-10%] w-[500px] h-[500px] bg-primary rounded-full blur-[120px] mix-blend-screen animate-pulse"></div>
|
|
||||||
<div class="absolute bottom-[-10%] left-[-10%] w-[600px] h-[600px] bg-secondary rounded-full blur-[150px] mix-blend-screen animate-pulse" style="animation-delay: 2s;"></div>
|
|
||||||
</div>
|
|
||||||
<!-- Micro-interaction Script -->
|
|
||||||
<script>
|
|
||||||
// Simple search highlight simulation
|
|
||||||
const searchInput = document.querySelector('input[type="text"]');
|
|
||||||
const cards = document.querySelectorAll('.glass-card');
|
|
||||||
|
|
||||||
searchInput.addEventListener('input', (e) => {
|
|
||||||
const term = e.target.value.toLowerCase();
|
|
||||||
cards.forEach(card => {
|
|
||||||
const title = card.querySelector('h3').textContent.toLowerCase();
|
|
||||||
const desc = card.querySelector('p').textContent.toLowerCase();
|
|
||||||
if (title.includes(term) || desc.includes(term)) {
|
|
||||||
card.style.opacity = '1';
|
|
||||||
card.style.transform = 'scale(1)';
|
|
||||||
} else {
|
|
||||||
card.style.opacity = '0.4';
|
|
||||||
card.style.transform = 'scale(0.95)';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Hover lift effect enhancement
|
|
||||||
cards.forEach(card => {
|
|
||||||
card.addEventListener('mouseenter', () => {
|
|
||||||
card.style.zIndex = '10';
|
|
||||||
});
|
|
||||||
card.addEventListener('mouseleave', () => {
|
|
||||||
card.style.zIndex = '1';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 329 KiB |
-394
@@ -1,394 +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 Canon v1 Design System</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://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist.css" 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&display=swap" rel="stylesheet"/>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"outline-variant": "#454653",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"on-tertiary-container": "#0f00a2",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"primary": "#bdc2ff",
|
|
||||||
"primary-container": "#818cf8",
|
|
||||||
"outline": "#908f9e",
|
|
||||||
"tertiary-container": "#8689ff",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"on-primary-fixed": "#000767",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"primary-fixed-dim": "#bdc2ff",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"tertiary-fixed": "#e1e0ff",
|
|
||||||
"primary-fixed": "#e0e0ff",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"on-tertiary": "#1000a9",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"on-primary": "#131e8c",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"on-primary-container": "#101b8a",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"inverse-primary": "#4953bc",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"surface-tint": "#bdc2ff",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"on-tertiary-fixed": "#07006c",
|
|
||||||
"on-primary-fixed-variant": "#2f3aa3",
|
|
||||||
"tertiary-fixed-dim": "#c0c1ff",
|
|
||||||
"tertiary": "#c0c1ff",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-surface-variant": "#c6c5d5",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"inverse-on-surface": "#283044"
|
|
||||||
},
|
|
||||||
"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-lg-mobile": ["Geist"],
|
|
||||||
"status-label": ["Geist"],
|
|
||||||
"body-md": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"body-sm": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"status-label": ["13px", {"lineHeight": "18px", "fontWeight": "500"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
||||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
font-family: 'Geist', sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
.bento-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(12, 1fr);
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
.canvas-bg {
|
|
||||||
background-color: #0b1326;
|
|
||||||
background-image: radial-gradient(circle at 50% 50%, #161f35 0%, #0b1326 100%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-background text-on-background min-h-screen selection:bg-primary selection:text-on-primary">
|
|
||||||
<!-- Top Navigation Anchor (Shared Component: TopAppBar) -->
|
|
||||||
<header class="bg-surface border-b border-outline-variant fixed top-0 w-full z-50">
|
|
||||||
<div class="flex justify-between items-center h-16 px-gutter max-w-container-max mx-auto">
|
|
||||||
<div class="font-headline-md text-headline-md font-bold text-primary flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">dock_to_bottom</span>
|
|
||||||
<span>DockDeck</span>
|
|
||||||
</div>
|
|
||||||
<nav class="hidden md:flex items-center gap-8">
|
|
||||||
<a class="text-primary border-b-2 border-primary pb-1 font-label-caps text-label-caps" href="#">Dashboard</a>
|
|
||||||
<a class="text-on-surface-variant hover:text-on-surface transition-colors font-label-caps text-label-caps" href="#">Favorieten</a>
|
|
||||||
</nav>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="relative hidden sm:block">
|
|
||||||
<input class="bg-surface-container-low border border-outline-variant rounded-lg px-4 py-1.5 text-body-sm focus:ring-2 focus:ring-primary-container outline-none transition-all w-64" placeholder="Zoeken..." type="text"/>
|
|
||||||
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-sm">search</span>
|
|
||||||
</div>
|
|
||||||
<button class="hover:bg-surface-container-highest p-2 rounded-full transition-colors active:scale-95 duration-150">
|
|
||||||
<span class="material-symbols-outlined" data-icon="sync">sync</span>
|
|
||||||
</button>
|
|
||||||
<button class="hover:bg-surface-container-highest p-2 rounded-full transition-colors active:scale-95 duration-150">
|
|
||||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="flex pt-16 min-h-screen">
|
|
||||||
<!-- Side Navigation (Shared Component: SideNavBar) -->
|
|
||||||
<aside class="hidden lg:flex flex-col py-stack-md px-stack-sm gap-y-1 bg-surface-container-low border-r border-outline-variant h-[calc(100vh-64px)] w-64 sticky top-16">
|
|
||||||
<div class="px-4 mb-6">
|
|
||||||
<h2 class="font-headline-sm text-headline-sm text-on-surface">Instellingen</h2>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">DockDeck Configuratie</p>
|
|
||||||
</div>
|
|
||||||
<nav class="space-y-1">
|
|
||||||
<button class="flex items-center gap-3 w-full px-4 py-3 bg-secondary-container text-on-secondary-container rounded-lg font-medium transition-all">
|
|
||||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Algemeen</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex items-center gap-3 w-full px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all">
|
|
||||||
<span class="material-symbols-outlined" data-icon="grid_view">grid_view</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Apps</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex items-center gap-3 w-full px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all">
|
|
||||||
<span class="material-symbols-outlined" data-icon="star">star</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Favorieten</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex items-center gap-3 w-full px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all">
|
|
||||||
<span class="material-symbols-outlined" data-icon="category">category</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Categorieën</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex items-center gap-3 w-full px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all">
|
|
||||||
<span class="material-symbols-outlined" data-icon="palette">palette</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Weergave</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex items-center gap-3 w-full px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all">
|
|
||||||
<span class="material-symbols-outlined" data-icon="extension">extension</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Integraties</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex items-center gap-3 w-full px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all">
|
|
||||||
<span class="material-symbols-outlined" data-icon="settings_backup_restore">settings_backup_restore</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Back-up en herstel</span>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content Canvas -->
|
|
||||||
<main class="flex-1 p-gutter max-w-7xl mx-auto canvas-bg">
|
|
||||||
<!-- Header Section -->
|
|
||||||
<div class="mb-12">
|
|
||||||
<h1 class="font-headline-lg text-headline-lg text-on-surface mb-2">DockDeck Canon v1</h1>
|
|
||||||
<p class="font-body-md text-body-md text-on-surface-variant max-w-2xl">
|
|
||||||
Het fundament van onze digitale homebase. Een minimalistisch en modern design system gebouwd voor sereniteit, controle en naadloze navigatie tussen je services.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="bento-grid">
|
|
||||||
<!-- Logo Family Section -->
|
|
||||||
<section class="col-span-full md:col-span-8 bg-surface-container p-6 rounded-xl border border-outline-variant relative overflow-hidden">
|
|
||||||
<div class="absolute top-0 right-0 p-4 opacity-10 pointer-events-none">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="relative z-10">
|
|
||||||
<h3 class="font-label-caps text-label-caps text-primary mb-6">Logo Familie</h3>
|
|
||||||
<div class="flex flex-wrap items-end gap-12">
|
|
||||||
<div class="flex flex-col items-center gap-3">
|
|
||||||
<img class="w-24 h-24 object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB1OtpIheQletkNypVk6NgTvPJiJxdZ8PboQsLxOCHkjphspcpb3q4ll8lCUkxAQRw5wXZwmp8ultENewebOK63r1Js4AdQ8CHXn_O2rKKdG2EU_uZRPckT6Dkcby7HkkoujYeyfmMSp9SINWcAUzIXTXKXFJCWven8jPzdZXzJlUHRzbZWbTCnvXbIAhieSIUoi9z5Gv9ZOP1ypW8MKm0gyEfe7RG0mlWoNlqjqDfLPyWAeEWhW_R7Q8bLY72upxGGfuOrMPJtSD9n"/>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Standaard</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-center gap-3">
|
|
||||||
<div class="w-20 h-20 bg-on-background flex items-center justify-center rounded-lg">
|
|
||||||
<span class="material-symbols-outlined text-surface-dim text-5xl" style="font-variation-settings: 'FILL' 1;">dock_to_bottom</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Monochroom</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-center gap-3">
|
|
||||||
<div class="w-12 h-12 bg-primary-container flex items-center justify-center rounded-full">
|
|
||||||
<span class="material-symbols-outlined text-on-primary-container text-2xl" style="font-variation-settings: 'FILL' 1;">dock_to_bottom</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Favicon</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Color Palette Section -->
|
|
||||||
<section class="col-span-full md:col-span-4 bg-surface-container p-6 rounded-xl border border-outline-variant">
|
|
||||||
<h3 class="font-label-caps text-label-caps text-primary mb-6">Kleurenpalet</h3>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 bg-surface-dim rounded-lg border border-outline-variant"></div>
|
|
||||||
<div>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface">Navy Basis</p>
|
|
||||||
<p class="font-status-label text-status-label text-on-surface-variant">#0B1326</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 bg-primary-container rounded-lg"></div>
|
|
||||||
<div>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface">Lavender Accent</p>
|
|
||||||
<p class="font-status-label text-status-label text-on-surface-variant">#818CF8</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 bg-secondary rounded-lg"></div>
|
|
||||||
<div>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface">Green Status</p>
|
|
||||||
<p class="font-status-label text-status-label text-on-surface-variant">#4EDEA3</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Typography Scale Section -->
|
|
||||||
<section class="col-span-full md:col-span-6 bg-surface-container p-6 rounded-xl border border-outline-variant">
|
|
||||||
<h3 class="font-label-caps text-label-caps text-primary mb-6">Typografie (Geist Sans)</h3>
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<p class="font-status-label text-status-label text-on-surface-variant mb-1">Headline LG</p>
|
|
||||||
<h4 class="font-headline-lg text-headline-lg text-on-surface">Serene Digital Bridge</h4>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-status-label text-status-label text-on-surface-variant mb-1">Headline MD</p>
|
|
||||||
<h4 class="font-headline-md text-headline-md text-on-surface">Dashboard Overzicht</h4>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-status-label text-status-label text-on-surface-variant mb-1">Body MD</p>
|
|
||||||
<p class="font-body-md text-body-md text-on-surface">De snelle vos springt over de luie hond.</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-status-label text-status-label text-on-surface-variant mb-1">Label Caps</p>
|
|
||||||
<p class="font-label-caps text-label-caps text-on-surface">ACTIE VEREIST</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Components: Cards & Tiles -->
|
|
||||||
<section class="col-span-full md:col-span-6 bg-surface-container p-6 rounded-xl border border-outline-variant">
|
|
||||||
<h3 class="font-label-caps text-label-caps text-primary mb-6">App- & Service Tiles</h3>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
||||||
<!-- Service Card Online -->
|
|
||||||
<div class="bg-surface-container-high p-4 rounded-lg border border-outline-variant hover:shadow-[0_8px_30px_rgb(129,140,248,0.04)] transition-all">
|
|
||||||
<div class="flex justify-between items-start mb-4">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl">terminal</span>
|
|
||||||
<span class="bg-primary/10 border border-primary/20 text-primary px-2 py-0.5 rounded font-label-caps text-[10px]">FAVORIET</span>
|
|
||||||
</div>
|
|
||||||
<h5 class="font-headline-sm text-body-md font-semibold text-on-surface">Home Assistant</h5>
|
|
||||||
<p class="font-status-label text-status-label text-on-surface-variant mb-4">Zichtbaar</p>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Service Card Offline -->
|
|
||||||
<div class="bg-surface-container-high p-4 rounded-lg border border-outline-variant opacity-80">
|
|
||||||
<div class="flex justify-between items-start mb-4">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-3xl">dns</span>
|
|
||||||
</div>
|
|
||||||
<h5 class="font-headline-sm text-body-md font-semibold text-on-surface">Pi-Hole Base</h5>
|
|
||||||
<p class="font-status-label text-status-label text-on-surface-variant mb-4">Verborgen</p>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-error"></div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface">Offline</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Interactive Components -->
|
|
||||||
<section class="col-span-full bg-surface-container p-6 rounded-xl border border-outline-variant">
|
|
||||||
<h3 class="font-label-caps text-label-caps text-primary mb-6">Interactieve Componenten</h3>
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
|
||||||
<!-- Buttons -->
|
|
||||||
<div class="space-y-6">
|
|
||||||
<p class="font-label-caps text-label-caps text-on-surface-variant border-b border-outline-variant pb-2">Knoppen</p>
|
|
||||||
<div class="flex flex-wrap gap-4">
|
|
||||||
<button class="px-6 py-2.5 bg-primary-container text-surface-dim font-body-sm font-medium rounded-lg hover:bg-primary transition-colors">Primair</button>
|
|
||||||
<button class="px-6 py-2.5 bg-transparent border border-primary-container text-primary-container font-body-sm font-medium rounded-lg hover:bg-primary-container/10 transition-colors">Secundair</button>
|
|
||||||
<button class="px-6 py-2.5 text-on-surface-variant font-body-sm font-medium rounded-lg hover:bg-surface-container-highest transition-colors">Ghost</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Inputs & Selects -->
|
|
||||||
<div class="space-y-6">
|
|
||||||
<p class="font-label-caps text-label-caps text-on-surface-variant border-b border-outline-variant pb-2">Inputs & Switches</p>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="relative">
|
|
||||||
<input class="w-full bg-surface-container-low border border-outline-variant rounded-lg px-4 py-2.5 text-body-sm focus:ring-2 focus:ring-primary-container/30 outline-none transition-all" type="text" value="Gebruikersnaam"/>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<span class="font-body-sm text-on-surface">Donkere Modus</span>
|
|
||||||
<button class="w-12 h-6 bg-secondary-container rounded-full relative flex items-center px-1 transition-colors">
|
|
||||||
<div class="w-4 h-4 bg-white rounded-full ml-auto"></div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Status & Chips -->
|
|
||||||
<div class="space-y-6">
|
|
||||||
<p class="font-label-caps text-label-caps text-on-surface-variant border-b border-outline-variant pb-2">Indicators</p>
|
|
||||||
<div class="flex flex-wrap gap-3">
|
|
||||||
<span class="px-3 py-1 bg-secondary/10 border border-secondary/20 text-secondary rounded-full font-status-label text-status-label">Operationeel</span>
|
|
||||||
<span class="px-3 py-1 bg-error/10 border border-error/20 text-error rounded-full font-status-label text-status-label">Kritiek</span>
|
|
||||||
<span class="px-3 py-1 bg-on-surface-variant/10 border border-on-surface-variant/20 text-on-surface-variant rounded-full font-status-label text-status-label">Onderhoud</span>
|
|
||||||
<div class="flex items-center gap-2 px-3 py-1 bg-surface-container-highest rounded-full border border-outline-variant">
|
|
||||||
<span class="material-symbols-outlined text-primary text-sm">auto_awesome</span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface">Nieuw ontdekt</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Micro-interaction Demo -->
|
|
||||||
<section class="col-span-full h-48 bg-surface-container-lowest rounded-xl border border-outline-variant flex items-center justify-center relative overflow-hidden">
|
|
||||||
|
|
||||||
<div class="relative z-10 text-center">
|
|
||||||
<p class="font-label-caps text-label-caps text-on-surface-variant mb-2">Interface Atmosfeer</p>
|
|
||||||
<p class="font-body-md text-body-md text-primary/60 italic">"Digital Zen—een georganiseerde, rustige ruimte."</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<!-- Footer Attribution -->
|
|
||||||
<footer class="mt-20 py-12 border-t border-outline-variant flex flex-col md:flex-row justify-between items-center gap-6">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">copyright</span>
|
|
||||||
<span class="font-body-sm text-body-sm text-on-surface-variant">2024 DockDeck. Ontworpen voor maximale focus.</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-8">
|
|
||||||
<a class="font-label-caps text-label-caps text-on-surface-variant hover:text-primary transition-colors" href="#">DOCUMENTATIE</a>
|
|
||||||
<a class="font-label-caps text-label-caps text-on-surface-variant hover:text-primary transition-colors" href="#">COMMUNITY</a>
|
|
||||||
<a class="font-label-caps text-label-caps text-on-surface-variant hover:text-primary transition-colors" href="#">V1.0.4</a>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
<!-- Background Decoration Script -->
|
|
||||||
<script>
|
|
||||||
// Simple interactivity for the switches
|
|
||||||
document.querySelectorAll('button[class*="rounded-full"]').forEach(toggle => {
|
|
||||||
toggle.addEventListener('click', () => {
|
|
||||||
const dot = toggle.querySelector('div');
|
|
||||||
if (dot) {
|
|
||||||
dot.classList.toggle('ml-auto');
|
|
||||||
toggle.classList.toggle('bg-secondary-container');
|
|
||||||
toggle.classList.toggle('bg-surface-container-highest');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Hover lift effect for cards
|
|
||||||
document.querySelectorAll('.bg-surface-container-high').forEach(card => {
|
|
||||||
card.addEventListener('mouseenter', () => {
|
|
||||||
card.style.transform = 'translateY(-4px)';
|
|
||||||
});
|
|
||||||
card.addEventListener('mouseleave', () => {
|
|
||||||
card.style.transform = 'translateY(0)';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 378 KiB |
-450
@@ -1,450 +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 - Apps Instellingen</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=Geist:wght@100..900&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": {
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"outline-variant": "#454653",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"on-tertiary-container": "#0f00a2",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"primary": "#bdc2ff",
|
|
||||||
"primary-container": "#818cf8",
|
|
||||||
"outline": "#908f9e",
|
|
||||||
"tertiary-container": "#8689ff",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"primary-fixed-dim": "#bdc2ff",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"tertiary-fixed": "#e1e0ff",
|
|
||||||
"primary-fixed": "#e0e0ff",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"on-tertiary": "#1000a9",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"on-primary": "#131e8c",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"on-primary-container": "#101b8a",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"inverse-primary": "#4953bc",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"surface-tint": "#bdc2ff",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"on-tertiary-fixed": "#07006c",
|
|
||||||
"on-primary-fixed-variant": "#2f3aa3",
|
|
||||||
"tertiary-fixed-dim": "#c0c1ff",
|
|
||||||
"tertiary": "#c0c1ff",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-surface-variant": "#c6c5d5",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"inverse-on-surface": "#283044"
|
|
||||||
},
|
|
||||||
"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-lg-mobile": ["Geist"],
|
|
||||||
"status-label": ["Geist"],
|
|
||||||
"body-md": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"body-sm": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"status-label": ["13px", {"lineHeight": "18px", "fontWeight": "500"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
||||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background-color: #0b1326;
|
|
||||||
color: #dbe2fd;
|
|
||||||
font-family: 'Geist', sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(22, 31, 53, 0.6);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
.custom-scrollbar::-webkit-scrollbar {
|
|
||||||
width: 4px;
|
|
||||||
}
|
|
||||||
.custom-scrollbar::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
||||||
background: #2d3449;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="flex flex-col h-screen overflow-hidden">
|
|
||||||
<!-- TopAppBar -->
|
|
||||||
<header class="bg-surface dark:bg-surface border-b border-outline-variant z-30">
|
|
||||||
<div class="flex justify-between items-center h-16 px-gutter max-w-container-max mx-auto">
|
|
||||||
<div class="font-headline-md text-headline-md font-bold text-primary dark:text-primary flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">dock</span>
|
|
||||||
<span>DockDeck</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-6">
|
|
||||||
<nav class="flex gap-4">
|
|
||||||
<a class="font-label-caps text-label-caps text-on-surface-variant hover:text-on-surface hover:bg-surface-container-highest transition-colors px-3 py-1 rounded" href="#">Dashboard</a>
|
|
||||||
<a class="font-label-caps text-label-caps text-on-surface-variant hover:text-on-surface hover:bg-surface-container-highest transition-colors px-3 py-1 rounded" href="#">Favorieten</a>
|
|
||||||
</nav>
|
|
||||||
<div class="relative group">
|
|
||||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
||||||
<span class="material-symbols-outlined text-outline text-sm">search</span>
|
|
||||||
</div>
|
|
||||||
<input class="bg-surface-container-low border-none rounded-lg text-body-sm font-body-sm pl-10 pr-4 py-2 w-64 focus:ring-2 focus:ring-primary-container text-on-surface transition-all" placeholder="Zoek services..." type="text"/>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<button class="material-symbols-outlined text-primary hover:bg-surface-container-highest p-2 rounded-full transition-all active:scale-95">sync</button>
|
|
||||||
<button class="material-symbols-outlined text-primary hover:bg-surface-container-highest p-2 rounded-full transition-all active:scale-95">settings</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="flex flex-1 overflow-hidden">
|
|
||||||
<!-- SideNavBar -->
|
|
||||||
<aside class="hidden md:flex flex-col py-stack-md px-stack-sm gap-y-1 bg-surface-container-low dark:bg-surface-container-low border-r border-outline-variant h-full w-64">
|
|
||||||
<div class="px-4 mb-6">
|
|
||||||
<h2 class="font-headline-sm text-headline-sm text-primary">Instellingen</h2>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant opacity-70">DockDeck Configuratie</p>
|
|
||||||
</div>
|
|
||||||
<nav class="flex flex-col gap-1">
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg font-body-sm text-body-sm transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span>Algemeen</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-lg font-medium font-body-sm text-body-sm transition-all scale-[0.98]" href="#">
|
|
||||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">grid_view</span>
|
|
||||||
<span>Apps</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg font-body-sm text-body-sm transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined">star</span>
|
|
||||||
<span>Favorieten</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg font-body-sm text-body-sm transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined">category</span>
|
|
||||||
<span>Categorieën</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg font-body-sm text-body-sm transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined">palette</span>
|
|
||||||
<span>Weergave</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg font-body-sm text-body-sm transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined">extension</span>
|
|
||||||
<span>Integraties</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg font-body-sm text-body-sm transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined">settings_backup_restore</span>
|
|
||||||
<span>Back-up en herstel</span>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content Area -->
|
|
||||||
<main class="flex-1 flex flex-col overflow-y-auto custom-scrollbar bg-background">
|
|
||||||
<!-- Hero Header Section -->
|
|
||||||
<section class="px-gutter pt-stack-lg pb-stack-md max-w-container-max mx-auto w-full">
|
|
||||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<nav class="flex items-center gap-2 mb-2">
|
|
||||||
<span class="font-label-caps text-label-caps text-on-surface-variant opacity-60">Instellingen</span>
|
|
||||||
<span class="material-symbols-outlined text-[12px] text-on-surface-variant">chevron_right</span>
|
|
||||||
<span class="font-label-caps text-label-caps text-primary">Apps</span>
|
|
||||||
</nav>
|
|
||||||
<h1 class="font-headline-lg text-headline-lg text-on-surface">App Beheer</h1>
|
|
||||||
<p class="font-body-md text-body-md text-on-surface-variant mt-2 max-w-2xl">
|
|
||||||
DockDeck leest beschikbare apps uit Unraid-metadata en haalt hun actuele status op via een beperkte read-only Docker Proxy. Nieuwe apps zijn standaard verborgen.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 bg-surface-container-low px-4 py-2 rounded-lg border border-outline-variant/30">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-secondary animate-pulse" id="sync-dot"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">
|
|
||||||
Statussen worden bij het openen en daarna ongeveer iedere 30 seconden bijgewerkt.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Interactive Content Section -->
|
|
||||||
<section class="px-gutter pb-stack-lg max-w-container-max mx-auto w-full">
|
|
||||||
<!-- Filters -->
|
|
||||||
<div class="flex flex-wrap items-center gap-2 mb-6">
|
|
||||||
<button class="px-4 py-2 bg-primary-container text-on-primary-container font-body-sm text-body-sm rounded-lg hover:opacity-90 transition-all">Alles</button>
|
|
||||||
<button class="px-4 py-2 bg-surface-container-high text-on-surface font-body-sm text-body-sm rounded-lg hover:bg-surface-container-highest transition-all">Zichtbaar</button>
|
|
||||||
<button class="px-4 py-2 bg-surface-container-high text-on-surface font-body-sm text-body-sm rounded-lg hover:bg-surface-container-highest transition-all">Verborgen</button>
|
|
||||||
<button class="px-4 py-2 bg-surface-container-high text-on-surface font-body-sm text-body-sm rounded-lg border border-secondary/30 hover:bg-surface-container-highest transition-all flex items-center gap-2">
|
|
||||||
<span>Nieuw ontdekt</span>
|
|
||||||
<span class="bg-secondary text-on-secondary text-[10px] px-1.5 rounded-full">3</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- Apps Table -->
|
|
||||||
<div class="glass-card rounded-xl overflow-hidden">
|
|
||||||
<div class="absolute left-0 top-0 bottom-0 w-1 bg-secondary shadow-[0_0_10px_#4edea3]"></div><table class="w-full text-left border-collapse">
|
|
||||||
<thead>
|
|
||||||
<tr class="bg-surface-container-high/50 border-b border-outline-variant">
|
|
||||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant">App</th>
|
|
||||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant">Status</th>
|
|
||||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant">Categorie</th>
|
|
||||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant">Zichtbaarheid</th>
|
|
||||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant text-right">Actie</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="divide-y divide-outline-variant/30">
|
|
||||||
<!-- Row 1 -->
|
|
||||||
<tr class="hover:bg-surface-container-high/30 transition-all group">
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center p-2">
|
|
||||||
<span class="material-symbols-outlined text-primary text-2xl">router</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="font-body-md text-body-md text-on-surface">Plex Media Server</div>
|
|
||||||
<div class="text-[10px] text-on-surface-variant opacity-60">plex-linuxserver</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<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">Online</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-body-sm text-body-sm rounded-full border border-outline-variant">Media</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<label class="relative inline-flex items-center cursor-pointer">
|
|
||||||
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
||||||
<div class="w-11 h-6 bg-surface-container-highest rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-container"></div>
|
|
||||||
<span class="ml-3 font-body-sm text-body-sm text-on-surface-variant">Zichtbaar</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-right">
|
|
||||||
<button class="font-label-caps text-label-caps text-primary hover:underline px-4 py-1.5 rounded transition-all">Bewerken</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<!-- Row 2 -->
|
|
||||||
<tr class="hover:bg-surface-container-high/30 transition-all group">
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center p-2">
|
|
||||||
<span class="material-symbols-outlined text-primary text-2xl">terminal</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="font-body-md text-body-md text-on-surface">Home Assistant</div>
|
|
||||||
<div class="text-[10px] text-on-surface-variant opacity-60">ha-core</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<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">Online</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-body-sm text-body-sm rounded-full border border-outline-variant">Domotica</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<label class="relative inline-flex items-center cursor-pointer">
|
|
||||||
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
||||||
<div class="w-11 h-6 bg-surface-container-highest rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-container"></div>
|
|
||||||
<span class="ml-3 font-body-sm text-body-sm text-on-surface-variant">Zichtbaar</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-right">
|
|
||||||
<button class="font-label-caps text-label-caps text-primary hover:underline px-4 py-1.5 rounded transition-all">Bewerken</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<!-- Row 3 (Hidden) -->
|
|
||||||
<tr class="hover:bg-surface-container-high/30 transition-all group opacity-60">
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center p-2">
|
|
||||||
<span class="material-symbols-outlined text-primary text-2xl">cloud</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="font-body-md text-body-md text-on-surface">Nextcloud</div>
|
|
||||||
<div class="text-[10px] text-on-surface-variant opacity-60">nextcloud-aio</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-error"></span>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface">Offline</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-body-sm text-body-sm rounded-full border border-outline-variant">Opslag</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<label class="relative inline-flex items-center cursor-pointer">
|
|
||||||
<input class="sr-only peer" type="checkbox"/>
|
|
||||||
<div class="w-11 h-6 bg-surface-container-highest rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-container"></div>
|
|
||||||
<span class="ml-3 font-body-sm text-body-sm text-on-surface-variant">Verborgen</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-right">
|
|
||||||
<button class="font-label-caps text-label-caps text-primary hover:underline px-4 py-1.5 rounded transition-all">Bewerken</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<!-- Row 4 (New) -->
|
|
||||||
<tr class="hover:bg-surface-container-high/30 transition-all group relative overflow-hidden">
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center p-2">
|
|
||||||
<span class="material-symbols-outlined text-primary text-2xl">dns</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="font-body-md text-body-md text-on-surface flex items-center gap-2">
|
|
||||||
Pi-hole
|
|
||||||
<span class="bg-secondary/10 text-secondary text-[10px] font-bold px-1.5 py-0.5 rounded border border-secondary/20">NIEUW</span>
|
|
||||||
</div>
|
|
||||||
<div class="text-[10px] text-on-surface-variant opacity-60">pihole-official</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<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">Online</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-body-sm text-body-sm rounded-full border border-outline-variant">Netwerk</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<label class="relative inline-flex items-center cursor-pointer">
|
|
||||||
<input class="sr-only peer" type="checkbox"/>
|
|
||||||
<div class="w-11 h-6 bg-surface-container-highest rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-container"></div>
|
|
||||||
<span class="ml-3 font-body-sm text-body-sm text-on-surface-variant">Verborgen</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-right">
|
|
||||||
<button class="font-label-caps text-label-caps text-primary hover:underline px-4 py-1.5 rounded transition-all">Bewerken</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<!-- Dashboard Portal Visualization -->
|
|
||||||
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8 items-center bg-surface-container-low p-8 rounded-2xl border border-outline-variant/30">
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-3">Live Dashboard Preview</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant mb-6">
|
|
||||||
Instellingen worden direct toegepast op je startscherm. De verborgen apps zijn alleen zichtbaar in dit beheeroverzicht.
|
|
||||||
</p>
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<div class="flex flex-col items-center gap-2">
|
|
||||||
<div class="w-12 h-12 rounded-xl glass-card flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary">router</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-[10px] text-on-surface-variant">Plex</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-center gap-2">
|
|
||||||
<div class="w-12 h-12 rounded-xl glass-card flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary">terminal</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-[10px] text-on-surface-variant">Home Assistant</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-center gap-2 opacity-30 border border-dashed border-outline rounded-xl p-0.5">
|
|
||||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center bg-transparent">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">add</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-[10px] text-on-surface-variant">Verborgen</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="h-48 relative overflow-hidden rounded-xl border border-outline-variant/30 bg-surface-container-lowest">
|
|
||||||
|
|
||||||
<div class="absolute inset-0 flex flex-col items-center justify-center text-center p-6 bg-gradient-to-t from-surface-container-lowest to-transparent">
|
|
||||||
<span class="material-symbols-outlined text-secondary text-4xl mb-2">auto_awesome</span>
|
|
||||||
<h4 class="font-headline-sm text-headline-sm text-on-surface">Auto-Sync Actief</h4>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Sync met Unraid API voltooid 2m geleden</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
<!-- Micro-interactions Script -->
|
|
||||||
<script>
|
|
||||||
// Simulate sync pulse
|
|
||||||
const syncDot = document.getElementById('sync-dot');
|
|
||||||
setInterval(() => {
|
|
||||||
syncDot.classList.remove('animate-pulse');
|
|
||||||
void syncDot.offsetWidth; // trigger reflow
|
|
||||||
syncDot.classList.add('animate-pulse');
|
|
||||||
}, 30000);
|
|
||||||
|
|
||||||
// Simple visibility toggle label update
|
|
||||||
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
|
|
||||||
checkbox.addEventListener('change', (e) => {
|
|
||||||
const label = e.target.nextElementSibling.nextElementSibling;
|
|
||||||
const row = e.target.closest('tr');
|
|
||||||
if (e.target.checked) {
|
|
||||||
label.textContent = "Zichtbaar";
|
|
||||||
row.classList.remove('opacity-60');
|
|
||||||
} else {
|
|
||||||
label.textContent = "Verborgen";
|
|
||||||
row.classList.add('opacity-60');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 294 KiB |
-348
@@ -1,348 +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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css" 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": {
|
|
||||||
"background": "#0b1326",
|
|
||||||
"on-tertiary-fixed": "#07006c",
|
|
||||||
"inverse-on-surface": "#283044",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"on-surface-variant": "#c6c5d5",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"primary-fixed": "#e0e0ff",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"tertiary-container": "#8689ff",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"tertiary": "#c0c1ff",
|
|
||||||
"primary-fixed-dim": "#bdc2ff",
|
|
||||||
"on-tertiary": "#1000a9",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"on-primary-fixed": "#000767",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"on-tertiary-container": "#0f00a2",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"on-primary-container": "#101b8a",
|
|
||||||
"inverse-primary": "#4953bc",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"tertiary-fixed-dim": "#c0c1ff",
|
|
||||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
||||||
"primary-container": "#818cf8",
|
|
||||||
"outline": "#908f9e",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"outline-variant": "#454653",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"primary": "#bdc2ff",
|
|
||||||
"on-primary": "#131e8c",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"tertiary-fixed": "#e1e0ff",
|
|
||||||
"surface-tint": "#bdc2ff",
|
|
||||||
"on-primary-fixed-variant": "#2f3aa3"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.25rem",
|
|
||||||
"lg": "0.5rem",
|
|
||||||
"xl": "0.75rem",
|
|
||||||
"full": "9999px"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"stack-md": "1rem",
|
|
||||||
"margin-mobile": "1rem",
|
|
||||||
"gutter": "1.5rem",
|
|
||||||
"stack-sm": "0.5rem",
|
|
||||||
"container-max": "1280px",
|
|
||||||
"stack-lg": "2rem"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"headline-lg": ["Geist", "sans-serif"],
|
|
||||||
"label-caps": ["Geist", "sans-serif"],
|
|
||||||
"body-md": ["Geist", "sans-serif"],
|
|
||||||
"headline-lg-mobile": ["Geist", "sans-serif"],
|
|
||||||
"status-label": ["Geist", "sans-serif"],
|
|
||||||
"headline-md": ["Geist", "sans-serif"],
|
|
||||||
"body-sm": ["Geist", "sans-serif"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"status-label": ["13px", {"lineHeight": "18px", "fontWeight": "500"}],
|
|
||||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
|
|
||||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body { font-family: 'Geist', sans-serif; }
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(23, 31, 51, 0.7);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-background text-on-background min-h-screen overflow-hidden flex flex-col">
|
|
||||||
<!-- TopAppBar -->
|
|
||||||
<header class="flex justify-between items-center px-gutter w-full h-16 bg-background border-b border-outline-variant z-50">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<span class="font-headline-md text-headline-md font-bold text-primary">DockDeck</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 max-w-md mx-8 hidden md:block">
|
|
||||||
<div class="relative flex items-center">
|
|
||||||
<span class="material-symbols-outlined absolute left-3 text-on-surface-variant">search</span>
|
|
||||||
<input class="w-full bg-surface-container-low border border-outline-variant rounded-lg py-2 pl-10 pr-4 text-body-sm focus:outline-none focus:border-primary-container transition-colors" placeholder="Zoek instellingen..." type="text"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors cursor-pointer">settings</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="flex flex-1 overflow-hidden">
|
|
||||||
<!-- SideNavBar -->
|
|
||||||
<aside class="flex flex-col p-stack-md h-full bg-surface-container border-r border-outline-variant w-64 hidden md:flex">
|
|
||||||
<div class="mb-stack-lg">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-primary">Instellingen</h2>
|
|
||||||
<p class="text-body-sm text-on-surface-variant">Beheer jouw omgeving</p>
|
|
||||||
</div>
|
|
||||||
<nav class="flex-1">
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="text-body-md">Algemeen</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">apps</span>
|
|
||||||
<span class="text-body-md">Apps</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">star</span>
|
|
||||||
<span class="text-body-md">Favorieten</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">category</span>
|
|
||||||
<span class="text-body-md">Categorieën</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">palette</span>
|
|
||||||
<span class="text-body-md">Uiterlijk</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">extension</span>
|
|
||||||
<span class="text-body-md">Integraties</span>
|
|
||||||
</div>
|
|
||||||
<!-- Active Tab -->
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer bg-primary-container text-on-primary-container font-medium rounded-lg">
|
|
||||||
<span class="material-symbols-outlined">backup</span>
|
|
||||||
<span class="text-body-md">Back-up & Herstel</span>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
<!-- Content Canvas -->
|
|
||||||
<main class="flex-1 overflow-y-auto bg-background p-stack-lg relative">
|
|
||||||
<!-- Atmospheric Gradient -->
|
|
||||||
<div class="absolute top-0 right-0 w-1/2 h-1/2 bg-primary/5 blur-[120px] rounded-full -z-10"></div>
|
|
||||||
<div class="max-w-4xl mx-auto space-y-stack-lg">
|
|
||||||
<!-- Header Section -->
|
|
||||||
<header class="mb-stack-lg">
|
|
||||||
<h1 class="font-headline-lg text-headline-lg text-on-background">Back-up & Herstel</h1>
|
|
||||||
<p class="text-body-md text-on-surface-variant mt-2">Beveilig je configuratie door back-ups te maken of een eerdere staat te herstellen.</p>
|
|
||||||
</header>
|
|
||||||
<!-- Action Grid -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-md">
|
|
||||||
<!-- Export Box -->
|
|
||||||
<section class="glass-panel rounded-xl p-stack-md flex flex-col justify-between hover:border-primary/20 transition-colors">
|
|
||||||
<div>
|
|
||||||
<div class="flex items-center gap-3 mb-4">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
|
|
||||||
<span class="material-symbols-outlined">download</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-background">Configuratie exporteren</h3>
|
|
||||||
</div>
|
|
||||||
<p class="text-body-sm text-on-surface-variant mb-6 leading-relaxed">
|
|
||||||
Download een volledige kopie van je huidige instellingen, dashboards en app-configuraties in JSON-formaat.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<button class="w-full bg-primary-container text-on-primary-container font-medium py-3 rounded-lg hover:opacity-90 active:scale-[0.98] transition-all flex items-center justify-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-[20px]">file_download</span>
|
|
||||||
Download JSON
|
|
||||||
</button>
|
|
||||||
</section>
|
|
||||||
<!-- Import Box -->
|
|
||||||
<section class="glass-panel border-dashed border-2 border-outline-variant rounded-xl p-stack-md flex flex-col items-center justify-center text-center group hover:border-primary/50 transition-all cursor-pointer" id="drop-zone">
|
|
||||||
<input class="hidden" id="file-upload" type="file"/>
|
|
||||||
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center text-on-surface-variant mb-4 group-hover:text-primary transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-[32px]">upload_file</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-background mb-1">Configuratie importeren</h3>
|
|
||||||
<p class="text-body-sm text-on-surface-variant mb-4">
|
|
||||||
Sleep een bestand hierheen of <span class="text-primary font-medium">klik om te uploaden</span>
|
|
||||||
</p>
|
|
||||||
<span class="text-[10px] text-outline font-label-caps uppercase tracking-widest">JSON BESTANDEN MAX 10MB</span>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<!-- Recent Backups Table -->
|
|
||||||
<section class="glass-panel rounded-xl overflow-hidden">
|
|
||||||
<div class="px-stack-md py-4 border-b border-outline-variant flex justify-between items-center bg-surface-container-low/50">
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-background">Recente back-ups</h3>
|
|
||||||
<span class="text-body-sm text-on-surface-variant">Laatste 30 dagen</span>
|
|
||||||
</div>
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="w-full text-left">
|
|
||||||
<thead>
|
|
||||||
<tr class="bg-surface-container-low/30 border-b border-outline-variant/30">
|
|
||||||
<th class="px-stack-md py-3 font-label-caps text-outline uppercase">Datum</th>
|
|
||||||
<th class="px-stack-md py-3 font-label-caps text-outline uppercase">Bestandsnaam</th>
|
|
||||||
<th class="px-stack-md py-3 font-label-caps text-outline uppercase">Status</th>
|
|
||||||
<th class="px-stack-md py-3 font-label-caps text-outline uppercase text-right">Actie</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="divide-y divide-outline-variant/10">
|
|
||||||
<tr class="hover:bg-surface-container-highest/20 transition-colors group">
|
|
||||||
<td class="px-stack-md py-4 text-body-sm text-on-background">Vandaag, 14:22</td>
|
|
||||||
<td class="px-stack-md py-4 text-body-sm font-medium text-primary">dockdeck-backup-2023-10-27.json</td>
|
|
||||||
<td class="px-stack-md py-4">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-[#10b981]"></div>
|
|
||||||
<span class="text-status-label text-[#10b981]">Succesvol</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-stack-md py-4 text-right">
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary-container transition-colors">more_vert</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-surface-container-highest/20 transition-colors">
|
|
||||||
<td class="px-stack-md py-4 text-body-sm text-on-background">24 okt 2023, 09:15</td>
|
|
||||||
<td class="px-stack-md py-4 text-body-sm font-medium text-primary">dockdeck-auto-weekly.json</td>
|
|
||||||
<td class="px-stack-md py-4">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-[#10b981]"></div>
|
|
||||||
<span class="text-status-label text-[#10b981]">Succesvol</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-stack-md py-4 text-right">
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary-container transition-colors">more_vert</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-surface-container-highest/20 transition-colors">
|
|
||||||
<td class="px-stack-md py-4 text-body-sm text-on-background">17 okt 2023, 10:04</td>
|
|
||||||
<td class="px-stack-md py-4 text-body-sm font-medium text-primary">pre-update-v1.2.json</td>
|
|
||||||
<td class="px-stack-md py-4">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-[#10b981]"></div>
|
|
||||||
<span class="text-status-label text-[#10b981]">Succesvol</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-stack-md py-4 text-right">
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary-container transition-colors">more_vert</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="p-4 bg-surface-container-low/20 flex justify-center border-t border-outline-variant/20">
|
|
||||||
<button class="text-body-sm text-primary hover:underline font-medium">Toon volledige geschiedenis</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Information Alert -->
|
|
||||||
<div class="flex gap-4 p-stack-md bg-primary-container/10 border border-primary-container/20 rounded-lg">
|
|
||||||
<span class="material-symbols-outlined text-primary-container">info</span>
|
|
||||||
<div>
|
|
||||||
<h4 class="text-body-sm font-semibold text-primary-container">Automatische back-ups</h4>
|
|
||||||
<p class="text-body-sm text-on-surface-variant mt-1">Systeemgebaseerde back-ups worden elke zondag om 03:00 uur uitgevoerd en 30 dagen bewaard.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
<!-- Mobile Navigation -->
|
|
||||||
<footer class="md:hidden h-16 bg-surface-container border-t border-outline-variant flex items-center justify-around px-4">
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">home</span>
|
|
||||||
<span class="text-[10px]">Home</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-primary">
|
|
||||||
<span class="material-symbols-outlined">backup</span>
|
|
||||||
<span class="text-[10px]">Back-up</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="text-[10px]">Instellingen</span>
|
|
||||||
</button>
|
|
||||||
</footer>
|
|
||||||
<script>
|
|
||||||
// Micro-interactions for Drag & Drop
|
|
||||||
const dropZone = document.getElementById('drop-zone');
|
|
||||||
const fileInput = document.getElementById('file-upload');
|
|
||||||
|
|
||||||
dropZone.addEventListener('click', () => fileInput.click());
|
|
||||||
|
|
||||||
dropZone.addEventListener('dragover', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
dropZone.classList.add('border-primary');
|
|
||||||
dropZone.classList.add('bg-primary/5');
|
|
||||||
});
|
|
||||||
|
|
||||||
dropZone.addEventListener('dragleave', () => {
|
|
||||||
dropZone.classList.remove('border-primary');
|
|
||||||
dropZone.classList.remove('bg-primary/5');
|
|
||||||
});
|
|
||||||
|
|
||||||
dropZone.addEventListener('drop', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
dropZone.classList.remove('border-primary');
|
|
||||||
dropZone.classList.remove('bg-primary/5');
|
|
||||||
const files = e.dataTransfer.files;
|
|
||||||
if (files.length) {
|
|
||||||
console.log('Bestand ontvangen:', files[0].name);
|
|
||||||
alert(`Bestand "${files[0].name}" is klaar voor import.`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
fileInput.addEventListener('change', (e) => {
|
|
||||||
if (e.target.files.length) {
|
|
||||||
alert(`Bestand "${e.target.files[0].name}" geselecteerd.`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Simple Fade-in animation
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const sections = document.querySelectorAll('section');
|
|
||||||
sections.forEach((s, i) => {
|
|
||||||
s.style.opacity = '0';
|
|
||||||
s.style.transform = 'translateY(10px)';
|
|
||||||
s.style.transition = `all 0.5s ease ${i * 0.1}s`;
|
|
||||||
setTimeout(() => {
|
|
||||||
s.style.opacity = '1';
|
|
||||||
s.style.transform = 'translateY(0)';
|
|
||||||
}, 50);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 286 KiB |
-399
@@ -1,399 +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 — Instellingen Categorieën</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"/>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet"/>
|
|
||||||
<style>
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Geist';
|
|
||||||
src: url('https://cdn.jsdelivr.net/npm/geist-font@1.0.1/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Geist';
|
|
||||||
src: url('https://cdn.jsdelivr.net/npm/geist-font@1.0.1/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Geist';
|
|
||||||
src: url('https://cdn.jsdelivr.net/npm/geist-font@1.0.1/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Geist', sans-serif;
|
|
||||||
background-color: #0b1326;
|
|
||||||
color: #dbe2fd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom Scrollbar */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: #0b1326;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #2d3449;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #454653;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"background": "#0b1326",
|
|
||||||
"on-tertiary-fixed": "#07006c",
|
|
||||||
"inverse-on-surface": "#283044",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"on-surface-variant": "#c6c5d5",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"primary-fixed": "#e0e0ff",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"tertiary-container": "#8689ff",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"tertiary": "#c0c1ff",
|
|
||||||
"primary-fixed-dim": "#bdc2ff",
|
|
||||||
"on-tertiary": "#1000a9",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"on-primary-fixed": "#000767",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"on-tertiary-container": "#0f00a2",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"on-primary-container": "#101b8a",
|
|
||||||
"inverse-primary": "#4953bc",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"tertiary-fixed-dim": "#c0c1ff",
|
|
||||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
||||||
"primary-container": "#818cf8",
|
|
||||||
"outline": "#908f9e",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"outline-variant": "#454653",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"primary": "#bdc2ff",
|
|
||||||
"on-primary": "#131e8c",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"tertiary-fixed": "#e1e0ff",
|
|
||||||
"surface-tint": "#bdc2ff",
|
|
||||||
"on-primary-fixed-variant": "#2f3aa3"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.25rem",
|
|
||||||
"lg": "0.5rem",
|
|
||||||
"xl": "0.75rem",
|
|
||||||
"full": "9999px"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"stack-md": "1rem",
|
|
||||||
"margin-mobile": "1rem",
|
|
||||||
"gutter": "1.5rem",
|
|
||||||
"stack-sm": "0.5rem",
|
|
||||||
"container-max": "1280px",
|
|
||||||
"stack-lg": "2rem"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"body-md": ["Geist"],
|
|
||||||
"headline-lg-mobile": ["Geist"],
|
|
||||||
"status-label": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"body-sm": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"status-label": ["13px", {"lineHeight": "18px", "fontWeight": "500"}],
|
|
||||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
|
|
||||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body class="bg-background text-on-background overflow-hidden">
|
|
||||||
<!-- Top Navigation Anchor (Shared Component Mapping) -->
|
|
||||||
<header class="bg-background text-primary docked full-width top-0 border-b border-outline-variant flex justify-between items-center px-gutter w-full h-16 z-50 fixed">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl" style="font-variation-settings: 'FILL' 1;">dock_to_bottom</span>
|
|
||||||
<h1 class="font-headline-md text-headline-md font-bold text-primary">DockDeck</h1>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 max-w-md mx-8 hidden md:block">
|
|
||||||
<div class="relative group">
|
|
||||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
|
||||||
<input class="w-full bg-surface-container-low border border-outline-variant rounded-lg py-2 pl-10 pr-4 text-on-surface focus:outline-none focus:ring-2 focus:ring-primary-container/50 transition-all" placeholder="Zoek instellingen..." type="text"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md">
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors cursor-pointer">settings</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="flex h-screen pt-16">
|
|
||||||
<!-- Side Navigation (Shared Component Mapping) -->
|
|
||||||
<aside class="bg-surface-container dark:bg-surface-container docked h-full w-64 left-0 border-r border-outline-variant flex flex-col p-stack-md hidden md:flex">
|
|
||||||
<div class="mb-stack-lg px-2">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-primary">Instellingen</h2>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Beheer jouw omgeving</p>
|
|
||||||
</div>
|
|
||||||
<nav class="flex-1 space-y-1">
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="font-body-md text-body-md">Algemeen</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">apps</span>
|
|
||||||
<span class="font-body-md text-body-md">Apps</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">star</span>
|
|
||||||
<span class="font-body-md text-body-md">Favorieten</span>
|
|
||||||
</div>
|
|
||||||
<!-- ACTIVE STATE: Categories -->
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer bg-primary-container text-on-primary-container font-medium rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">category</span>
|
|
||||||
<span class="font-body-md text-body-md">Categorieën</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">palette</span>
|
|
||||||
<span class="font-body-md text-body-md">Uiterlijk</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">extension</span>
|
|
||||||
<span class="font-body-md text-body-md">Integraties</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">backup</span>
|
|
||||||
<span class="font-body-md text-body-md">Back-up & Herstel</span>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<div class="mt-auto pt-stack-md border-t border-outline-variant/30 px-2">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-primary-container/20 flex items-center justify-center text-primary">
|
|
||||||
<span class="material-symbols-outlined text-sm">bolt</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-status-label text-status-label text-on-surface">V1.4.2 stable</p>
|
|
||||||
<p class="text-[10px] text-on-surface-variant uppercase tracking-widest">DockDeck Canon</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content Canvas -->
|
|
||||||
<main class="flex-1 overflow-y-auto px-gutter py-stack-lg relative">
|
|
||||||
<div class="max-w-container-max mx-auto">
|
|
||||||
<header class="flex flex-col md:flex-row md:items-center justify-between mb-stack-lg gap-4">
|
|
||||||
<div>
|
|
||||||
<h2 class="font-headline-lg text-headline-lg text-on-surface">Categorieën Beheren</h2>
|
|
||||||
<p class="font-body-md text-body-md text-on-surface-variant">Organiseer je diensten in overzichtelijke groepen.</p>
|
|
||||||
</div>
|
|
||||||
<button class="inline-flex items-center gap-2 px-6 py-2.5 bg-primary-container text-on-primary-container font-medium rounded-lg hover:opacity-90 transition-all active:scale-95">
|
|
||||||
<span class="material-symbols-outlined">add</span>
|
|
||||||
<span class="font-body-md text-body-md">Nieuwe Categorie</span>
|
|
||||||
</button>
|
|
||||||
</header>
|
|
||||||
<!-- Categories Bento Grid -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-stack-md">
|
|
||||||
<!-- Category Card: Media -->
|
|
||||||
<div class="group relative bg-surface-container border border-outline-variant hover:border-primary-container/50 rounded-xl p-stack-md transition-all duration-300 hover:shadow-[0_8px_30px_rgb(129,140,248,0.08)]">
|
|
||||||
<div class="flex justify-between items-start mb-4">
|
|
||||||
<div class="p-3 bg-surface-variant rounded-lg text-primary group-hover:scale-110 transition-transform duration-300">
|
|
||||||
<span class="material-symbols-outlined text-2xl">movie</span>
|
|
||||||
</div>
|
|
||||||
<span class="px-2.5 py-0.5 bg-secondary/10 border border-secondary/20 text-secondary rounded-full font-status-label text-status-label">
|
|
||||||
8 items
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Media</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant mb-6">Streaming diensten en home-server bibliotheken.</p>
|
|
||||||
<div class="flex items-center gap-2 pt-4 border-t border-outline-variant/30">
|
|
||||||
<button class="flex-1 flex items-center justify-center gap-2 py-2 text-on-surface-variant hover:text-primary hover:bg-surface-variant rounded-lg transition-colors group/btn" title="Hernoemen">
|
|
||||||
<span class="material-symbols-outlined text-lg">edit</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Hernoemen</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-primary hover:bg-surface-variant rounded-lg transition-colors" title="Icoon kiezen">
|
|
||||||
<span class="material-symbols-outlined">palette</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-error rounded-lg hover:bg-error-container/20 transition-colors" title="Verwijderen">
|
|
||||||
<span class="material-symbols-outlined">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Category Card: Smart Home -->
|
|
||||||
<div class="group relative bg-surface-container border border-outline-variant hover:border-primary-container/50 rounded-xl p-stack-md transition-all duration-300 hover:shadow-[0_8px_30px_rgb(129,140,248,0.08)]">
|
|
||||||
<div class="flex justify-between items-start mb-4">
|
|
||||||
<div class="p-3 bg-surface-variant rounded-lg text-primary group-hover:scale-110 transition-transform duration-300">
|
|
||||||
<span class="material-symbols-outlined text-2xl">home_iot_device</span>
|
|
||||||
</div>
|
|
||||||
<span class="px-2.5 py-0.5 bg-secondary/10 border border-secondary/20 text-secondary rounded-full font-status-label text-status-label">
|
|
||||||
12 items
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Smart Home</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant mb-6">Automatisering, verlichting en sensor management.</p>
|
|
||||||
<div class="flex items-center gap-2 pt-4 border-t border-outline-variant/30">
|
|
||||||
<button class="flex-1 flex items-center justify-center gap-2 py-2 text-on-surface-variant hover:text-primary hover:bg-surface-variant rounded-lg transition-colors" title="Hernoemen">
|
|
||||||
<span class="material-symbols-outlined text-lg">edit</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Hernoemen</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-primary hover:bg-surface-variant rounded-lg transition-colors" title="Icoon kiezen">
|
|
||||||
<span class="material-symbols-outlined">palette</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-error rounded-lg hover:bg-error-container/20 transition-colors" title="Verwijderen">
|
|
||||||
<span class="material-symbols-outlined">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Category Card: Netwerk -->
|
|
||||||
<div class="group relative bg-surface-container border border-outline-variant hover:border-primary-container/50 rounded-xl p-stack-md transition-all duration-300 hover:shadow-[0_8px_30px_rgb(129,140,248,0.08)]">
|
|
||||||
<div class="flex justify-between items-start mb-4">
|
|
||||||
<div class="p-3 bg-surface-variant rounded-lg text-primary group-hover:scale-110 transition-transform duration-300">
|
|
||||||
<span class="material-symbols-outlined text-2xl">lan</span>
|
|
||||||
</div>
|
|
||||||
<span class="px-2.5 py-0.5 bg-secondary/10 border border-secondary/20 text-secondary rounded-full font-status-label text-status-label">
|
|
||||||
4 items
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Netwerk</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant mb-6">Router UI, Pi-hole en netwerk monitoring tools.</p>
|
|
||||||
<div class="flex items-center gap-2 pt-4 border-t border-outline-variant/30">
|
|
||||||
<button class="flex-1 flex items-center justify-center gap-2 py-2 text-on-surface-variant hover:text-primary hover:bg-surface-variant rounded-lg transition-colors" title="Hernoemen">
|
|
||||||
<span class="material-symbols-outlined text-lg">edit</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Hernoemen</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-primary hover:bg-surface-variant rounded-lg transition-colors" title="Icoon kiezen">
|
|
||||||
<span class="material-symbols-outlined">palette</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-error rounded-lg hover:bg-error-container/20 transition-colors" title="Verwijderen">
|
|
||||||
<span class="material-symbols-outlined">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Category Card: Werk -->
|
|
||||||
<div class="group relative bg-surface-container border border-outline-variant hover:border-primary-container/50 rounded-xl p-stack-md transition-all duration-300 hover:shadow-[0_8px_30px_rgb(129,140,248,0.08)]">
|
|
||||||
<div class="flex justify-between items-start mb-4">
|
|
||||||
<div class="p-3 bg-surface-variant rounded-lg text-primary group-hover:scale-110 transition-transform duration-300">
|
|
||||||
<span class="material-symbols-outlined text-2xl">work</span>
|
|
||||||
</div>
|
|
||||||
<span class="px-2.5 py-0.5 bg-secondary/10 border border-secondary/20 text-secondary rounded-full font-status-label text-status-label">
|
|
||||||
5 items
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Werk</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant mb-6">Productiviteit, Git server en documentbeheer.</p>
|
|
||||||
<div class="flex items-center gap-2 pt-4 border-t border-outline-variant/30">
|
|
||||||
<button class="flex-1 flex items-center justify-center gap-2 py-2 text-on-surface-variant hover:text-primary hover:bg-surface-variant rounded-lg transition-colors" title="Hernoemen">
|
|
||||||
<span class="material-symbols-outlined text-lg">edit</span>
|
|
||||||
<span class="font-body-sm text-body-sm">Hernoemen</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-primary hover:bg-surface-variant rounded-lg transition-colors" title="Icoon kiezen">
|
|
||||||
<span class="material-symbols-outlined">palette</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-error rounded-lg hover:bg-error-container/20 transition-colors" title="Verwijderen">
|
|
||||||
<span class="material-symbols-outlined">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Add New Card Skeleton -->
|
|
||||||
<div class="group border-2 border-dashed border-outline-variant hover:border-primary-container hover:bg-primary-container/5 rounded-xl p-stack-md flex flex-col items-center justify-center min-h-[220px] transition-all cursor-pointer">
|
|
||||||
<div class="w-12 h-12 rounded-full bg-surface-variant flex items-center justify-center text-on-surface-variant group-hover:bg-primary-container group-hover:text-on-primary-container transition-all">
|
|
||||||
<span class="material-symbols-outlined text-3xl">add</span>
|
|
||||||
</div>
|
|
||||||
<p class="mt-4 font-headline-md text-headline-md text-on-surface-variant group-hover:text-primary transition-colors">Voeg nieuwe toe</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Guidance Section -->
|
|
||||||
<section class="mt-12 bg-surface-container-low border border-outline-variant rounded-xl p-gutter flex flex-col md:flex-row items-center gap-stack-lg">
|
|
||||||
<div class="flex-1">
|
|
||||||
<h4 class="font-headline-md text-headline-md text-on-surface mb-2">Tip: Slimme Groepering</h4>
|
|
||||||
<p class="font-body-md text-body-md text-on-surface-variant">Het groeperen van diensten op basis van functie helpt bij het sneller navigeren in een groeiend dashboard. Gebruik herkenbare iconen om visuele rust te creëren.</p>
|
|
||||||
</div>
|
|
||||||
<div class="w-full md:w-auto">
|
|
||||||
<a class="inline-block font-body-md text-body-md text-primary hover:underline underline-offset-4 flex items-center gap-2" href="#">
|
|
||||||
Bekijk documentatie
|
|
||||||
<span class="material-symbols-outlined text-sm">open_in_new</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<!-- Atmospheric micro-interaction script -->
|
|
||||||
<script>
|
|
||||||
document.querySelectorAll('.group').forEach(card => {
|
|
||||||
card.addEventListener('mousemove', e => {
|
|
||||||
const rect = card.getBoundingClientRect();
|
|
||||||
const x = e.clientX - rect.left;
|
|
||||||
const y = e.clientY - rect.top;
|
|
||||||
card.style.setProperty('--mouse-x', `${x}px`);
|
|
||||||
card.style.setProperty('--mouse-y', `${y}px`);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.group::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), rgba(129, 140, 248, 0.05), transparent 40%);
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.5s;
|
|
||||||
pointer-events: none;
|
|
||||||
border-radius: inherit;
|
|
||||||
}
|
|
||||||
.group:hover::before {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
<!-- Mobile Navigation Bar -->
|
|
||||||
<nav class="md:hidden fixed bottom-0 left-0 right-0 h-16 bg-surface-container border-t border-outline-variant flex justify-around items-center px-4 z-50">
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="text-[10px] font-label-caps uppercase">Algemeen</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-primary">
|
|
||||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">category</span>
|
|
||||||
<span class="text-[10px] font-label-caps uppercase">Categorieën</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">palette</span>
|
|
||||||
<span class="text-[10px] font-label-caps uppercase">Uiterlijk</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">extension</span>
|
|
||||||
<span class="text-[10px] font-label-caps uppercase">Apps</span>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 257 KiB |
-390
@@ -1,390 +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=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&display=swap" rel="stylesheet"/>
|
|
||||||
<style>
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Geist';
|
|
||||||
src: url('https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Geist';
|
|
||||||
src: url('https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Geist';
|
|
||||||
src: url('https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
font-family: 'Geist', sans-serif;
|
|
||||||
background-color: #0b1326;
|
|
||||||
color: #dbe2fd;
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(22, 31, 53, 0.6);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
.nav-item-active {
|
|
||||||
background-color: #818cf8;
|
|
||||||
color: #101b8a;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: #0b1326;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #2d3449;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #454653;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"background": "#0b1326",
|
|
||||||
"on-tertiary-fixed": "#07006c",
|
|
||||||
"inverse-on-surface": "#283044",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"on-surface-variant": "#c6c5d5",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"primary-fixed": "#e0e0ff",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"tertiary-container": "#8689ff",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"tertiary": "#c0c1ff",
|
|
||||||
"primary-fixed-dim": "#bdc2ff",
|
|
||||||
"on-tertiary": "#1000a9",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"on-primary-fixed": "#000767",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"on-tertiary-container": "#0f00a2",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"on-primary-container": "#101b8a",
|
|
||||||
"inverse-primary": "#4953bc",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"tertiary-fixed-dim": "#c0c1ff",
|
|
||||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
||||||
"primary-container": "#818cf8",
|
|
||||||
"outline": "#908f9e",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"outline-variant": "#454653",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"primary": "#bdc2ff",
|
|
||||||
"on-primary": "#131e8c",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"tertiary-fixed": "#e1e0ff",
|
|
||||||
"surface-tint": "#bdc2ff",
|
|
||||||
"on-primary-fixed-variant": "#2f3aa3"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.25rem",
|
|
||||||
"lg": "0.5rem",
|
|
||||||
"xl": "0.75rem",
|
|
||||||
"full": "9999px"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"stack-md": "1rem",
|
|
||||||
"margin-mobile": "1rem",
|
|
||||||
"gutter": "1.5rem",
|
|
||||||
"stack-sm": "0.5rem",
|
|
||||||
"container-max": "1280px",
|
|
||||||
"stack-lg": "2rem"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"body-md": ["Geist"],
|
|
||||||
"headline-lg-mobile": ["Geist"],
|
|
||||||
"status-label": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"body-sm": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"status-label": ["13px", {"lineHeight": "18px", "fontWeight": "500"}],
|
|
||||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
|
|
||||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body class="bg-background text-on-background min-h-screen flex flex-col">
|
|
||||||
<!-- TopAppBar Shell -->
|
|
||||||
<header class="flex justify-between items-center px-gutter w-full h-16 bg-background dark:bg-background border-b border-outline-variant fixed top-0 z-50">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<span class="font-headline-md text-headline-md font-bold text-primary dark:text-primary tracking-tight">DockDeck</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md">
|
|
||||||
<div class="hidden md:flex items-center px-4 py-2 bg-surface-container-low rounded-lg border border-outline-variant group focus-within:border-primary-container transition-all">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant mr-2" data-icon="search">search</span>
|
|
||||||
<input class="bg-transparent border-none focus:ring-0 text-body-sm w-64 text-on-surface" placeholder="Zoek in instellingen..." type="text"/>
|
|
||||||
</div>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80">
|
|
||||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="flex flex-1 pt-16 h-full">
|
|
||||||
<!-- SideNavBar Shell -->
|
|
||||||
<aside class="hidden md:flex flex-col p-stack-md h-[calc(100vh-64px)] w-64 fixed left-0 bg-surface-container dark:bg-surface-container border-r border-outline-variant overflow-y-auto">
|
|
||||||
<div class="mb-stack-lg px-2">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-primary">Instellingen</h2>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant opacity-70">Beheer jouw omgeving</p>
|
|
||||||
</div>
|
|
||||||
<nav class="flex-1 space-y-1">
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
||||||
<span class="font-body-md text-body-md">Algemeen</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined" data-icon="apps">apps</span>
|
|
||||||
<span class="font-body-md text-body-md">Apps</span>
|
|
||||||
</div>
|
|
||||||
<!-- ACTIVE STATE: Favorieten -->
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer bg-primary-container text-on-primary-container font-medium rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined" data-icon="star" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
||||||
<span class="font-body-md text-body-md">Favorieten</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined" data-icon="category">category</span>
|
|
||||||
<span class="font-body-md text-body-md">Categorieën</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined" data-icon="palette">palette</span>
|
|
||||||
<span class="font-body-md text-body-md">Uiterlijk</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined" data-icon="extension">extension</span>
|
|
||||||
<span class="font-body-md text-body-md">Integraties</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined" data-icon="backup">backup</span>
|
|
||||||
<span class="font-body-md text-body-md">Back-up & Herstel</span>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<div class="mt-auto pt-stack-md border-t border-outline-variant">
|
|
||||||
<div class="flex items-center gap-3 p-2">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant">Systeem online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content Canvas -->
|
|
||||||
<main class="flex-1 md:ml-64 p-gutter max-w-container-max mx-auto w-full">
|
|
||||||
<div class="flex flex-col md:flex-row md:items-center justify-between mb-stack-lg gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 class="font-headline-lg text-headline-lg text-on-background">Favoriete Websites</h1>
|
|
||||||
<p class="font-body-md text-body-md text-on-surface-variant">Beheer de snelkoppelingen op jouw dashboard voor snelle toegang.</p>
|
|
||||||
</div>
|
|
||||||
<button class="flex items-center gap-2 bg-primary-container text-on-primary-container px-6 py-3 rounded-lg font-medium hover:opacity-90 transition-opacity self-start md:self-center shadow-lg shadow-primary-container/10">
|
|
||||||
<span class="material-symbols-outlined" data-icon="add">add</span>
|
|
||||||
<span>Favoriet toevoegen</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- Favorites Bento/Grid -->
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-stack-md">
|
|
||||||
<!-- Favorite Item: Google -->
|
|
||||||
<div class="glass-card p-stack-md rounded-xl group hover:border-primary-container/30 transition-all duration-300">
|
|
||||||
<div class="flex items-start justify-between">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center border border-outline-variant group-hover:border-primary-container/50 transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl" data-icon="language">language</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Google</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant truncate max-w-[180px]">google.com</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-1">
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors rounded-lg hover:bg-surface-variant" title="Bewerken">
|
|
||||||
<span class="material-symbols-outlined" data-icon="edit">edit</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-error transition-colors rounded-lg hover:bg-error-container/20" title="Verwijderen">
|
|
||||||
<span class="material-symbols-outlined" data-icon="delete">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-stack-md flex items-center justify-between border-t border-outline-variant/30 pt-stack-sm">
|
|
||||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary/10 text-secondary border border-secondary/20">
|
|
||||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span>
|
|
||||||
Online
|
|
||||||
</span>
|
|
||||||
<a class="text-primary hover:underline text-body-sm font-medium flex items-center gap-1" href="#">
|
|
||||||
Bezoek site <span class="material-symbols-outlined text-sm" data-icon="open_in_new">open_in_new</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Favorite Item: YouTube -->
|
|
||||||
<div class="glass-card p-stack-md rounded-xl group hover:border-primary-container/30 transition-all duration-300">
|
|
||||||
<div class="flex items-start justify-between">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center border border-outline-variant group-hover:border-primary-container/50 transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl" data-icon="play_circle">play_circle</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">YouTube</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant truncate max-w-[180px]">youtube.com</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-1">
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors rounded-lg hover:bg-surface-variant" title="Bewerken">
|
|
||||||
<span class="material-symbols-outlined" data-icon="edit">edit</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-error transition-colors rounded-lg hover:bg-error-container/20" title="Verwijderen">
|
|
||||||
<span class="material-symbols-outlined" data-icon="delete">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-stack-md flex items-center justify-between border-t border-outline-variant/30 pt-stack-sm">
|
|
||||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary/10 text-secondary border border-secondary/20">
|
|
||||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span>
|
|
||||||
Online
|
|
||||||
</span>
|
|
||||||
<a class="text-primary hover:underline text-body-sm font-medium flex items-center gap-1" href="#">
|
|
||||||
Bezoek site <span class="material-symbols-outlined text-sm" data-icon="open_in_new">open_in_new</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Favorite Item: GitHub -->
|
|
||||||
<div class="glass-card p-stack-md rounded-xl group hover:border-primary-container/30 transition-all duration-300">
|
|
||||||
<div class="flex items-start justify-between">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-lg bg-surface-container-highest flex items-center justify-center border border-outline-variant group-hover:border-primary-container/50 transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl" data-icon="terminal">terminal</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">GitHub</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant truncate max-w-[180px]">github.com</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-1">
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors rounded-lg hover:bg-surface-variant" title="Bewerken">
|
|
||||||
<span class="material-symbols-outlined" data-icon="edit">edit</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-error transition-colors rounded-lg hover:bg-error-container/20" title="Verwijderen">
|
|
||||||
<span class="material-symbols-outlined" data-icon="delete">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-stack-md flex items-center justify-between border-t border-outline-variant/30 pt-stack-sm">
|
|
||||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary/10 text-secondary border border-secondary/20">
|
|
||||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span>
|
|
||||||
Online
|
|
||||||
</span>
|
|
||||||
<a class="text-primary hover:underline text-body-sm font-medium flex items-center gap-1" href="#">
|
|
||||||
Bezoek site <span class="material-symbols-outlined text-sm" data-icon="open_in_new">open_in_new</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Additional Placeholder Slot -->
|
|
||||||
<div class="border-2 border-dashed border-outline-variant rounded-xl p-stack-md flex flex-col items-center justify-center min-h-[160px] group hover:border-primary-container/50 hover:bg-surface-container-low transition-all cursor-pointer">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary" data-icon="add">add</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-body-sm text-body-sm text-on-surface-variant">Nieuwe Favoriet</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Info Section -->
|
|
||||||
<section class="mt-stack-lg p-stack-md bg-surface-container-low rounded-xl border border-outline-variant/30">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<span class="material-symbols-outlined text-primary-container" data-icon="info">info</span>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-headline-md text-headline-md text-on-surface">Wist je dat?</h4>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Favorieten worden automatisch gesynchroniseerd over al je apparaten. Je kunt tot wel 24 favorieten toevoegen aan je hoofddashboard voor maximale productiviteit.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
<!-- Mobile Bottom Navigation -->
|
|
||||||
<nav class="md:hidden fixed bottom-0 left-0 right-0 h-16 bg-surface-container border-t border-outline-variant flex justify-around items-center px-4 z-50">
|
|
||||||
<button class="flex flex-col items-center justify-center text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined" data-icon="home">home</span>
|
|
||||||
<span class="text-[10px] mt-0.5">Home</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center justify-center text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined" data-icon="apps">apps</span>
|
|
||||||
<span class="text-[10px] mt-0.5">Apps</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center justify-center text-primary-container">
|
|
||||||
<span class="material-symbols-outlined" data-icon="star" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
||||||
<span class="text-[10px] mt-0.5 font-medium">Favorieten</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center justify-center text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
||||||
<span class="text-[10px] mt-0.5">Instellingen</span>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
<script>
|
|
||||||
// Simple interactive feedback for action buttons
|
|
||||||
document.querySelectorAll('button').forEach(button => {
|
|
||||||
button.addEventListener('mousedown', () => {
|
|
||||||
button.classList.add('opacity-70', 'scale-[0.98]');
|
|
||||||
});
|
|
||||||
button.addEventListener('mouseup', () => {
|
|
||||||
button.classList.remove('opacity-70', 'scale-[0.98]');
|
|
||||||
});
|
|
||||||
button.addEventListener('mouseleave', () => {
|
|
||||||
button.classList.remove('opacity-70', 'scale-[0.98]');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Search highlight simulation
|
|
||||||
const searchInput = document.querySelector('input[type="text"]');
|
|
||||||
if (searchInput) {
|
|
||||||
searchInput.addEventListener('input', (e) => {
|
|
||||||
const query = e.target.value.toLowerCase();
|
|
||||||
const cards = document.querySelectorAll('.glass-card');
|
|
||||||
cards.forEach(card => {
|
|
||||||
const title = card.querySelector('h3').textContent.toLowerCase();
|
|
||||||
const url = card.querySelector('p').textContent.toLowerCase();
|
|
||||||
if (title.includes(query) || url.includes(query)) {
|
|
||||||
card.style.display = 'block';
|
|
||||||
card.style.opacity = '1';
|
|
||||||
} else {
|
|
||||||
card.style.opacity = '0.3';
|
|
||||||
// Keep visible for layout flow but faded
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 197 KiB |
-348
@@ -1,348 +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=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&display=swap" rel="stylesheet"/>
|
|
||||||
<style>
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Geist';
|
|
||||||
src: url('https://cdn.jsdelivr.net/gh/vercel/geist-font@main/packages/next/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Geist';
|
|
||||||
src: url('https://cdn.jsdelivr.net/gh/vercel/geist-font@main/packages/next/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Geist';
|
|
||||||
src: url('https://cdn.jsdelivr.net/gh/vercel/geist-font@main/packages/next/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Geist', sans-serif;
|
|
||||||
background-color: #0b1326;
|
|
||||||
color: #dbe2fd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom Switch Styling */
|
|
||||||
.switch {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 44px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
.switch input {
|
|
||||||
opacity: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
.slider {
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: #2d3449;
|
|
||||||
transition: .4s;
|
|
||||||
border-radius: 24px;
|
|
||||||
}
|
|
||||||
.slider:before {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
left: 3px;
|
|
||||||
bottom: 3px;
|
|
||||||
background-color: #c6c5d5;
|
|
||||||
transition: .4s;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
input:checked + .slider {
|
|
||||||
background-color: #818cf8;
|
|
||||||
}
|
|
||||||
input:checked + .slider:before {
|
|
||||||
transform: translateX(20px);
|
|
||||||
background-color: #0b1326;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Glassmorphism/Tonal Depth */
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(23, 31, 51, 0.6);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"background": "#0b1326",
|
|
||||||
"on-tertiary-fixed": "#07006c",
|
|
||||||
"inverse-on-surface": "#283044",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"on-surface-variant": "#c6c5d5",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"primary-fixed": "#e0e0ff",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"tertiary-container": "#8689ff",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"tertiary": "#c0c1ff",
|
|
||||||
"primary-fixed-dim": "#bdc2ff",
|
|
||||||
"on-tertiary": "#1000a9",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"on-primary-fixed": "#000767",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"on-tertiary-container": "#0f00a2",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"on-primary-container": "#101b8a",
|
|
||||||
"inverse-primary": "#4953bc",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"tertiary-fixed-dim": "#c0c1ff",
|
|
||||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
||||||
"primary-container": "#818cf8",
|
|
||||||
"outline": "#908f9e",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"outline-variant": "#454653",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"primary": "#bdc2ff",
|
|
||||||
"on-primary": "#131e8c",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"tertiary-fixed": "#e1e0ff",
|
|
||||||
"surface-tint": "#bdc2ff",
|
|
||||||
"on-primary-fixed-variant": "#2f3aa3"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.25rem",
|
|
||||||
"lg": "0.5rem",
|
|
||||||
"xl": "0.75rem",
|
|
||||||
"full": "9999px"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"stack-md": "1rem",
|
|
||||||
"margin-mobile": "1rem",
|
|
||||||
"gutter": "1.5rem",
|
|
||||||
"stack-sm": "0.5rem",
|
|
||||||
"container-max": "1280px",
|
|
||||||
"stack-lg": "2rem"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"body-md": ["Geist"],
|
|
||||||
"headline-lg-mobile": ["Geist"],
|
|
||||||
"status-label": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"body-sm": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"status-label": ["13px", {"lineHeight": "18px", "fontWeight": "500"}],
|
|
||||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
|
|
||||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body class="bg-background text-on-background min-h-screen flex flex-col">
|
|
||||||
<!-- TopAppBar -->
|
|
||||||
<header class="flex justify-between items-center px-gutter w-full h-16 bg-background dark:bg-background border-b border-outline-variant fixed top-0 z-50">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<span class="font-headline-md text-headline-md font-bold text-primary">DockDeck</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md">
|
|
||||||
<div class="flex items-center bg-surface-container-high px-4 py-2 rounded-full border border-outline-variant">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-sm mr-2">search</span>
|
|
||||||
<input class="bg-transparent border-none focus:ring-0 text-body-sm w-48 text-on-surface" placeholder="Zoek instellingen..." type="text"/>
|
|
||||||
</div>
|
|
||||||
<button class="material-symbols-outlined p-2 text-on-surface-variant hover:text-primary transition-colors cursor-pointer">settings</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="flex flex-1 pt-16 h-screen overflow-hidden">
|
|
||||||
<!-- SideNavBar -->
|
|
||||||
<aside class="flex flex-col p-stack-md h-full bg-surface-container dark:bg-surface-container border-r border-outline-variant w-64 shrink-0 overflow-y-auto">
|
|
||||||
<div class="mb-stack-lg">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-primary">Instellingen</h2>
|
|
||||||
<p class="font-body-md text-body-md text-on-surface-variant opacity-70">Beheer jouw omgeving</p>
|
|
||||||
</div>
|
|
||||||
<nav class="flex flex-col flex-1">
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="font-body-md text-body-md">Algemeen</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">apps</span>
|
|
||||||
<span class="font-body-md text-body-md">Apps</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">star</span>
|
|
||||||
<span class="font-body-md text-body-md">Favorieten</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">category</span>
|
|
||||||
<span class="font-body-md text-body-md">Categorieën</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">palette</span>
|
|
||||||
<span class="font-body-md text-body-md">Uiterlijk</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer bg-primary-container text-on-primary-container font-medium rounded-lg">
|
|
||||||
<span class="material-symbols-outlined">extension</span>
|
|
||||||
<span class="font-body-md text-body-md">Integraties</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined">backup</span>
|
|
||||||
<span class="font-body-md text-body-md">Back-up & Herstel</span>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content Canvas -->
|
|
||||||
<main class="flex-1 overflow-y-auto p-gutter relative">
|
|
||||||
<!-- Background Decoration -->
|
|
||||||
<div class="absolute top-0 right-0 w-full h-full opacity-5 pointer-events-none">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="max-w-[1000px] mx-auto relative z-10">
|
|
||||||
<div class="mb-stack-lg">
|
|
||||||
<h1 class="font-headline-lg text-headline-lg text-on-surface mb-2">Integraties</h1>
|
|
||||||
<p class="font-body-md text-body-md text-on-surface-variant max-w-2xl">
|
|
||||||
Koppel DockDeck aan je bestaande infrastructuur. Hieronder staan de actieve systeemintegraties. Deze verbindingen zijn essentieel voor de kernfunctionaliteit.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<!-- Integration Cards Grid -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
<!-- Unraid Metadata -->
|
|
||||||
<div class="glass-panel rounded-xl p-stack-md flex flex-col justify-between hover:shadow-lg transition-shadow duration-300">
|
|
||||||
<div>
|
|
||||||
<div class="flex justify-between items-start mb-4">
|
|
||||||
<div class="w-12 h-12 bg-surface-container-highest rounded-lg flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl">storage</span>
|
|
||||||
</div>
|
|
||||||
<div class="bg-surface-variant border border-outline-variant px-2 py-1 rounded text-[10px] font-label-caps text-on-surface-variant">READ-ONLY</div>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Unraid Metadata</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant mb-6">Synchroniseert serverstatus, CPU-gebruik en schijfinformatie rechtstreeks vanuit het OS.</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-[#10b981]"></span>
|
|
||||||
<span class="font-status-label text-status-label text-secondary">Verbonden</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Docker Socket Proxy -->
|
|
||||||
<div class="glass-panel rounded-xl p-stack-md flex flex-col justify-between hover:shadow-lg transition-shadow duration-300">
|
|
||||||
<div>
|
|
||||||
<div class="flex justify-between items-start mb-4">
|
|
||||||
<div class="w-12 h-12 bg-surface-container-highest rounded-lg flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl">terminal</span>
|
|
||||||
</div>
|
|
||||||
<div class="bg-surface-variant border border-outline-variant px-2 py-1 rounded text-[10px] font-label-caps text-on-surface-variant">READ-ONLY</div>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Docker Socket Proxy</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant mb-6">Veilige container-monitoring via een beperkte proxy zonder schrijf-rechten op de socket.</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-[#10b981]"></span>
|
|
||||||
<span class="font-status-label text-status-label text-secondary">Actief</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Nginx Proxy Manager -->
|
|
||||||
<div class="glass-panel border-primary/20 rounded-xl p-stack-md flex flex-col justify-between hover:shadow-lg transition-shadow duration-300 relative overflow-hidden">
|
|
||||||
<div class="absolute top-0 right-0 p-stack-sm">
|
|
||||||
<div class="bg-surface-variant border border-outline-variant px-2 py-1 rounded text-[10px] font-label-caps text-on-surface-variant">READ-ONLY</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="flex justify-between items-start mb-4">
|
|
||||||
<div class="w-12 h-12 bg-surface-container-highest rounded-lg flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl">router</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Nginx Proxy Manager</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant mb-4">Haalt geconfigureerde hosts op voor automatische dashboard-mapping.</p>
|
|
||||||
<div class="flex items-center justify-between bg-surface-container-lowest/50 p-3 rounded-lg border border-outline-variant/30 mb-2">
|
|
||||||
<span class="font-body-sm text-body-sm text-on-surface">Externe URL's inschakelen</span>
|
|
||||||
<label class="switch">
|
|
||||||
<input checked="" type="checkbox"/>
|
|
||||||
<span class="slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mt-4">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-[#10b981]"></span>
|
|
||||||
<span class="font-status-label text-status-label text-secondary">Gekoppeld</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Info Alert -->
|
|
||||||
<div class="mt-stack-lg p-stack-md rounded-xl bg-surface-container-low border border-outline-variant flex gap-4">
|
|
||||||
<span class="material-symbols-outlined text-primary">info</span>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-body-md text-body-md font-medium text-on-surface">Privacy & Beveiliging</h4>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
|
||||||
Alle bovenstaande integraties zijn geconfigureerd met het principe van 'least privilege'. DockDeck heeft geen toestemming om wijzigingen aan te brengen aan je containers of netwerkinstellingen.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
<!-- Mobile Navigation (Hidden on Desktop) -->
|
|
||||||
<nav class="md:hidden fixed bottom-0 left-0 w-full bg-surface-container border-t border-outline-variant flex justify-around py-3 px-2 z-50">
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">home</span>
|
|
||||||
<span class="text-[10px] font-label-caps">Home</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined text-fill">apps</span>
|
|
||||||
<span class="text-[10px] font-label-caps">Apps</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-primary">
|
|
||||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">extension</span>
|
|
||||||
<span class="text-[10px] font-label-caps">Instellingen</span>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
<script>
|
|
||||||
// Simple ripple effect for cards
|
|
||||||
document.querySelectorAll('.glass-panel').forEach(card => {
|
|
||||||
card.addEventListener('mousedown', function(e) {
|
|
||||||
this.style.transform = 'scale(0.98)';
|
|
||||||
this.style.transition = 'transform 0.1s ease';
|
|
||||||
});
|
|
||||||
card.addEventListener('mouseup', function(e) {
|
|
||||||
this.style.transform = 'scale(1)';
|
|
||||||
});
|
|
||||||
card.addEventListener('mouseleave', function(e) {
|
|
||||||
this.style.transform = 'scale(1)';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 237 KiB |
-438
@@ -1,438 +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 - Instellingen Weergave</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"/>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet"/>
|
|
||||||
<style>
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Geist';
|
|
||||||
src: url('https://cdn.jsdelivr.net/npm/geist-font@1.1.0/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Geist';
|
|
||||||
src: url('https://cdn.jsdelivr.net/npm/geist-font@1.1.0/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Geist';
|
|
||||||
src: url('https://cdn.jsdelivr.net/npm/geist-font@1.1.0/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Geist', sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-scrollbar::-webkit-scrollbar {
|
|
||||||
width: 4px;
|
|
||||||
}
|
|
||||||
.custom-scrollbar::-webkit-scrollbar-track {
|
|
||||||
background: #0b1326;
|
|
||||||
}
|
|
||||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
||||||
background: #2d3748;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(22, 31, 53, 0.6);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-preview {
|
|
||||||
aspect-ratio: 16/10;
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-preview:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
border-color: #818cf8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-switch {
|
|
||||||
width: 44px;
|
|
||||||
height: 24px;
|
|
||||||
background: #2d3449;
|
|
||||||
border-radius: 99px;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-switch::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 2px;
|
|
||||||
top: 2px;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background: #bdc2ff;
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-active {
|
|
||||||
background: #818cf8 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-active::after {
|
|
||||||
transform: translateX(20px);
|
|
||||||
background: #0b1326 !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"background": "#0b1326",
|
|
||||||
"on-tertiary-fixed": "#07006c",
|
|
||||||
"inverse-on-surface": "#283044",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"on-surface-variant": "#c6c5d5",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"primary-fixed": "#e0e0ff",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"tertiary-container": "#8689ff",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"tertiary": "#c0c1ff",
|
|
||||||
"primary-fixed-dim": "#bdc2ff",
|
|
||||||
"on-tertiary": "#1000a9",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"on-primary-fixed": "#000767",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"on-tertiary-container": "#0f00a2",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"on-primary-container": "#101b8a",
|
|
||||||
"inverse-primary": "#4953bc",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"tertiary-fixed-dim": "#c0c1ff",
|
|
||||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
||||||
"primary-container": "#818cf8",
|
|
||||||
"outline": "#908f9e",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"outline-variant": "#454653",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"primary": "#bdc2ff",
|
|
||||||
"on-primary": "#131e8c",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"tertiary-fixed": "#e1e0ff",
|
|
||||||
"surface-tint": "#bdc2ff",
|
|
||||||
"on-primary-fixed-variant": "#2f3aa3"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.25rem",
|
|
||||||
"lg": "0.5rem",
|
|
||||||
"xl": "0.75rem",
|
|
||||||
"full": "9999px"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"stack-md": "1rem",
|
|
||||||
"margin-mobile": "1rem",
|
|
||||||
"gutter": "1.5rem",
|
|
||||||
"stack-sm": "0.5rem",
|
|
||||||
"container-max": "1280px",
|
|
||||||
"stack-lg": "2rem"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"body-md": ["Geist"],
|
|
||||||
"headline-lg-mobile": ["Geist"],
|
|
||||||
"status-label": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"body-sm": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600" }],
|
|
||||||
"label-caps": ["12px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600" }],
|
|
||||||
"body-md": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
|
|
||||||
"headline-lg-mobile": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600" }],
|
|
||||||
"status-label": ["13px", { "lineHeight": "18px", "fontWeight": "500" }],
|
|
||||||
"headline-md": ["20px", { "lineHeight": "28px", "fontWeight": "500" }],
|
|
||||||
"body-sm": ["14px", { "lineHeight": "20px", "fontWeight": "400" }]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body class="bg-background text-on-background min-h-screen flex flex-col overflow-hidden">
|
|
||||||
<!-- TopAppBar -->
|
|
||||||
<header class="flex justify-between items-center px-gutter w-full h-16 bg-background border-b border-outline-variant fixed top-0 z-50">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<span class="font-headline-md text-headline-md font-bold text-primary">DockDeck</span>
|
|
||||||
<div class="hidden md:flex h-8 w-px bg-outline-variant mx-2"></div>
|
|
||||||
<div class="hidden md:flex items-center gap-6">
|
|
||||||
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors cursor-pointer" href="#">Dashboard</a>
|
|
||||||
<a class="font-body-sm text-body-sm text-primary border-b-2 border-primary cursor-pointer h-full flex items-center" href="#">Instellingen</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="relative group">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary cursor-pointer transition-colors" data-icon="settings">settings</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="flex pt-16 h-screen overflow-hidden">
|
|
||||||
<!-- SideNavBar -->
|
|
||||||
<nav class="flex flex-col p-stack-md h-full bg-surface-container border-r border-outline-variant w-64 flex-shrink-0">
|
|
||||||
<div class="mb-stack-lg px-2">
|
|
||||||
<h1 class="font-headline-md text-headline-md text-primary">Instellingen</h1>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Beheer jouw omgeving</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow space-y-1 custom-scrollbar overflow-y-auto pr-2">
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
||||||
<span class="font-body-md text-body-md">Algemeen</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined" data-icon="apps">apps</span>
|
|
||||||
<span class="font-body-md text-body-md">Apps</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined" data-icon="star">star</span>
|
|
||||||
<span class="font-body-md text-body-md">Favorieten</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined" data-icon="category">category</span>
|
|
||||||
<span class="font-body-md text-body-md">Categorieën</span>
|
|
||||||
</div>
|
|
||||||
<!-- Active Item: Uiterlijk -->
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer bg-primary-container text-on-primary-container font-medium rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined" data-icon="palette">palette</span>
|
|
||||||
<span class="font-body-md text-body-md">Uiterlijk</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined" data-icon="extension">extension</span>
|
|
||||||
<span class="font-body-md text-body-md">Integraties</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-md p-stack-sm mb-1 cursor-pointer text-on-surface-variant hover:bg-surface-variant rounded-lg transition-all duration-200">
|
|
||||||
<span class="material-symbols-outlined" data-icon="backup">backup</span>
|
|
||||||
<span class="font-body-md text-body-md">Back-up & Herstel</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- Main Content Area -->
|
|
||||||
<main class="flex-grow overflow-y-auto custom-scrollbar bg-background relative px-gutter py-stack-lg lg:px-12">
|
|
||||||
<div class="max-w-4xl mx-auto space-y-stack-lg">
|
|
||||||
<!-- Section: Thema -->
|
|
||||||
<section class="space-y-stack-md">
|
|
||||||
<div>
|
|
||||||
<h2 class="font-headline-md text-headline-md text-on-background mb-1">Thema</h2>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Kies de visuele stijl die het beste bij je workflow past.</p>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<!-- Dark Theme -->
|
|
||||||
<div class="space-y-3">
|
|
||||||
<div class="theme-preview bg-[#0b1326] border-2 border-primary p-3 rounded-xl flex flex-col gap-2 cursor-pointer ring-offset-2 ring-offset-background group">
|
|
||||||
<div class="h-2 w-1/2 bg-primary/20 rounded-full"></div>
|
|
||||||
<div class="flex gap-2 h-full">
|
|
||||||
<div class="w-8 h-full bg-surface-container rounded-lg"></div>
|
|
||||||
<div class="flex-grow grid grid-cols-2 gap-2 h-full">
|
|
||||||
<div class="glass-card rounded-lg border-primary/20"></div>
|
|
||||||
<div class="glass-card rounded-lg"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center justify-between px-1">
|
|
||||||
<span class="font-body-md text-body-md text-on-background">Donker</span>
|
|
||||||
<span class="material-symbols-outlined text-primary text-sm" data-icon="check_circle" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Light Theme -->
|
|
||||||
<div class="space-y-3 opacity-60 hover:opacity-100 transition-opacity">
|
|
||||||
<div class="theme-preview bg-slate-100 border border-outline-variant p-3 rounded-xl flex flex-col gap-2 cursor-pointer group">
|
|
||||||
<div class="h-2 w-1/2 bg-slate-300 rounded-full"></div>
|
|
||||||
<div class="flex gap-2 h-full">
|
|
||||||
<div class="w-8 h-full bg-slate-200 rounded-lg"></div>
|
|
||||||
<div class="flex-grow grid grid-cols-2 gap-2 h-full">
|
|
||||||
<div class="bg-white rounded-lg border border-slate-200"></div>
|
|
||||||
<div class="bg-white rounded-lg border border-slate-200"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center justify-between px-1">
|
|
||||||
<span class="font-body-md text-body-md text-on-surface-variant">Licht</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Neon Theme -->
|
|
||||||
<div class="space-y-3 opacity-60 hover:opacity-100 transition-opacity">
|
|
||||||
<div class="theme-preview bg-black border border-[#00ff9d]/30 p-3 rounded-xl flex flex-col gap-2 cursor-pointer group relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-br from-[#00ff9d]/5 to-purple-500/5"></div>
|
|
||||||
<div class="h-2 w-1/2 bg-[#00ff9d]/40 rounded-full relative z-10"></div>
|
|
||||||
<div class="flex gap-2 h-full relative z-10">
|
|
||||||
<div class="w-8 h-full bg-[#111] border border-[#00ff9d]/20 rounded-lg"></div>
|
|
||||||
<div class="flex-grow grid grid-cols-2 gap-2 h-full">
|
|
||||||
<div class="bg-black border border-purple-500/20 rounded-lg"></div>
|
|
||||||
<div class="bg-black border border-purple-500/20 rounded-lg"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center justify-between px-1">
|
|
||||||
<span class="font-body-md text-body-md text-on-surface-variant">Neon</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<div class="h-px bg-outline-variant w-full"></div>
|
|
||||||
<!-- Section: Dashboardmodus & Grid -->
|
|
||||||
<section class="grid grid-cols-1 md:grid-cols-2 gap-stack-lg">
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="material-symbols-outlined text-primary" data-icon="dashboard">dashboard</span>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-background">Dashboardmodus</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-3">
|
|
||||||
<label class="flex items-center gap-4 p-4 rounded-xl border-2 border-primary-container bg-primary-container/5 cursor-pointer group">
|
|
||||||
<input checked="" class="hidden" name="dashboard-mode" type="radio"/>
|
|
||||||
<div class="w-5 h-5 rounded-full border-2 border-primary flex items-center justify-center">
|
|
||||||
<div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow">
|
|
||||||
<p class="font-body-md text-body-md font-medium text-on-background">Overzicht</p>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Toon alle services in één doorlopend grid.</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
<label class="flex items-center gap-4 p-4 rounded-xl border border-outline-variant hover:bg-surface-variant/30 cursor-pointer group">
|
|
||||||
<input class="hidden" name="dashboard-mode" type="radio"/>
|
|
||||||
<div class="w-5 h-5 rounded-full border-2 border-outline-variant flex items-center justify-center"></div>
|
|
||||||
<div class="flex-grow">
|
|
||||||
<p class="font-body-md text-body-md font-medium text-on-background">Categorie</p>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Groepeer services per type of project.</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="material-symbols-outlined text-primary" data-icon="grid_view">grid_view</span>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-background">Grid-dichtheid</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-3">
|
|
||||||
<label class="flex items-center gap-4 p-4 rounded-xl border border-outline-variant hover:bg-surface-variant/30 cursor-pointer group">
|
|
||||||
<input class="hidden" name="grid-density" type="radio"/>
|
|
||||||
<div class="w-5 h-5 rounded-full border-2 border-outline-variant flex items-center justify-center"></div>
|
|
||||||
<div class="flex-grow">
|
|
||||||
<p class="font-body-md text-body-md font-medium text-on-background">Compact</p>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Maximaliseer zichtbare items per scherm.</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
<label class="flex items-center gap-4 p-4 rounded-xl border-2 border-primary-container bg-primary-container/5 cursor-pointer group">
|
|
||||||
<input checked="" class="hidden" name="grid-density" type="radio"/>
|
|
||||||
<div class="w-5 h-5 rounded-full border-2 border-primary flex items-center justify-center">
|
|
||||||
<div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow">
|
|
||||||
<p class="font-body-md text-body-md font-medium text-on-background">Comfortabel</p>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Meer ademruimte en grotere interactiegebieden.</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<div class="h-px bg-outline-variant w-full"></div>
|
|
||||||
<!-- Section: Toegankelijkheid -->
|
|
||||||
<section class="p-6 glass-card rounded-2xl flex items-center justify-between">
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-full bg-secondary-container/10 flex items-center justify-center text-secondary">
|
|
||||||
<span class="material-symbols-outlined" data-icon="motion_photos_off">motion_photos_off</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-background mb-1">Reduced Motion</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant max-w-md">Beperk animaties en overgangen voor een rustigere interface ervaring.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="toggle-switch" id="motion-toggle" onclick="this.classList.toggle('toggle-active')"></div>
|
|
||||||
</section>
|
|
||||||
<!-- Action Footer -->
|
|
||||||
<div class="flex items-center justify-end gap-4 py-8">
|
|
||||||
<button class="px-6 py-2 rounded-lg border border-primary text-primary font-medium hover:bg-primary/5 transition-all">
|
|
||||||
Annuleren
|
|
||||||
</button>
|
|
||||||
<button class="px-8 py-2 rounded-lg bg-primary-container text-on-primary-container font-semibold hover:opacity-90 transition-all shadow-lg shadow-primary-container/20">
|
|
||||||
Wijzigingen Opslaan
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Atmosphere micro-animation -->
|
|
||||||
<div class="fixed bottom-0 right-0 p-8 opacity-20 pointer-events-none">
|
|
||||||
<div class="w-64 h-64 bg-primary/20 blur-[100px] rounded-full animate-pulse"></div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
// Micro-interaction logic
|
|
||||||
document.querySelectorAll('input[type="radio"]').forEach(radio => {
|
|
||||||
radio.addEventListener('change', function() {
|
|
||||||
const name = this.getAttribute('name');
|
|
||||||
const labels = document.querySelectorAll(`input[name="${name}"]`);
|
|
||||||
|
|
||||||
labels.forEach(input => {
|
|
||||||
const parent = input.closest('label');
|
|
||||||
const indicator = parent.querySelector('.rounded-full.border-2');
|
|
||||||
|
|
||||||
if (input.checked) {
|
|
||||||
parent.classList.add('border-primary-container', 'bg-primary-container/5');
|
|
||||||
parent.classList.remove('border-outline-variant');
|
|
||||||
indicator.classList.add('border-primary');
|
|
||||||
indicator.classList.remove('border-outline-variant');
|
|
||||||
indicator.innerHTML = '<div class="w-2.5 h-2.5 rounded-full bg-primary"></div>';
|
|
||||||
} else {
|
|
||||||
parent.classList.remove('border-primary-container', 'bg-primary-container/5');
|
|
||||||
parent.classList.add('border-outline-variant');
|
|
||||||
indicator.classList.remove('border-primary');
|
|
||||||
indicator.classList.add('border-outline-variant');
|
|
||||||
indicator.innerHTML = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Theme selection visual feedback
|
|
||||||
document.querySelectorAll('.theme-preview').forEach(preview => {
|
|
||||||
preview.addEventListener('click', function() {
|
|
||||||
document.querySelectorAll('.theme-preview').forEach(p => {
|
|
||||||
p.classList.remove('border-primary');
|
|
||||||
p.classList.add('border-outline-variant');
|
|
||||||
p.parentElement.classList.add('opacity-60');
|
|
||||||
const status = p.parentElement.querySelector('.material-symbols-outlined');
|
|
||||||
if(status) status.remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
this.classList.add('border-primary');
|
|
||||||
this.classList.remove('border-outline-variant');
|
|
||||||
this.parentElement.classList.remove('opacity-60');
|
|
||||||
|
|
||||||
const footer = this.parentElement.querySelector('div');
|
|
||||||
const check = document.createElement('span');
|
|
||||||
check.className = 'material-symbols-outlined text-primary text-sm';
|
|
||||||
check.style.fontVariationSettings = "'FILL' 1";
|
|
||||||
check.innerText = 'check_circle';
|
|
||||||
footer.appendChild(check);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 221 KiB |
-349
@@ -1,349 +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 - Mobiel Dashboard</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&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&display=swap" rel="stylesheet"/>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: 'Geist', sans-serif;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
.hide-scrollbar::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.hide-scrollbar {
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(22, 31, 53, 0.7);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"outline-variant": "#454653",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"on-tertiary-container": "#0f00a2",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"primary": "#bdc2ff",
|
|
||||||
"primary-container": "#818cf8",
|
|
||||||
"outline": "#908f9e",
|
|
||||||
"tertiary-container": "#8689ff",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"on-primary-fixed": "#000767",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"primary-fixed-dim": "#bdc2ff",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"tertiary-fixed": "#e1e0ff",
|
|
||||||
"primary-fixed": "#e0e0ff",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"on-tertiary": "#1000a9",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"on-primary": "#131e8c",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"on-primary-container": "#101b8a",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"inverse-primary": "#4953bc",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"surface-tint": "#bdc2ff",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"on-tertiary-fixed": "#07006c",
|
|
||||||
"on-primary-fixed-variant": "#2f3aa3",
|
|
||||||
"tertiary-fixed-dim": "#c0c1ff",
|
|
||||||
"tertiary": "#c0c1ff",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-surface-variant": "#c6c5d5",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"inverse-on-surface": "#283044"
|
|
||||||
},
|
|
||||||
"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-lg-mobile": ["Geist"],
|
|
||||||
"status-label": ["Geist"],
|
|
||||||
"body-md": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"body-sm": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg-mobile": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600" }],
|
|
||||||
"status-label": ["13px", { "lineHeight": "18px", "fontWeight": "500" }],
|
|
||||||
"body-md": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
|
|
||||||
"headline-md": ["20px", { "lineHeight": "28px", "fontWeight": "500" }],
|
|
||||||
"headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600" }],
|
|
||||||
"label-caps": ["12px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600" }],
|
|
||||||
"body-sm": ["14px", { "lineHeight": "20px", "fontWeight": "400" }]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
min-height: max(884px, 100dvh);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-background text-on-surface min-h-screen flex flex-col max-w-[390px] mx-auto overflow-x-hidden border-x border-outline-variant">
|
|
||||||
<!-- Top AppBar -->
|
|
||||||
<header class="sticky top-0 z-50 bg-surface/80 backdrop-blur-md px-4 h-16 flex items-center justify-between border-b border-outline-variant/30">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-primary-container flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-on-primary-container text-xl" style="font-variation-settings: 'FILL' 1;">dock</span>
|
|
||||||
</div>
|
|
||||||
<h1 class="font-headline-md text-headline-md tracking-tight">DockDeck</h1>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<button class="p-2 rounded-full hover:bg-surface-container-highest transition-colors active:scale-95 duration-150">
|
|
||||||
<span class="material-symbols-outlined text-on-surface">search</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 rounded-full hover:bg-surface-container-highest transition-colors active:scale-95 duration-150">
|
|
||||||
<span class="material-symbols-outlined text-on-surface">settings</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<main class="flex-1 overflow-y-auto pb-24">
|
|
||||||
<!-- Banner: Discovery -->
|
|
||||||
<div class="px-4 py-4">
|
|
||||||
<div class="bg-primary-container p-4 rounded-xl flex items-center justify-between shadow-lg relative overflow-hidden group">
|
|
||||||
<!-- Subtle pattern overlay -->
|
|
||||||
<div class="absolute inset-0 opacity-10 pointer-events-none bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-white via-transparent to-transparent"></div>
|
|
||||||
<div class="flex flex-col gap-0.5 relative z-10">
|
|
||||||
<span class="font-label-caps text-label-caps text-on-primary-container/80">ONTDEKKING</span>
|
|
||||||
<h2 class="font-headline-md text-headline-md text-on-primary-container leading-tight">3 nieuwe apps ontdekt</h2>
|
|
||||||
</div>
|
|
||||||
<button class="bg-on-primary-container text-primary-container rounded-full px-4 py-1.5 font-label-caps text-label-caps transition-transform active:scale-95 duration-150">
|
|
||||||
BEKIJK
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Quick Launch Search Placeholder (Content Specific) -->
|
|
||||||
<div class="px-4 mb-6">
|
|
||||||
<div class="relative">
|
|
||||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
|
||||||
<input class="w-full bg-surface-container-low border border-outline-variant/30 rounded-xl py-3 pl-10 pr-4 font-body-sm text-body-sm focus:outline-none focus:ring-2 focus:ring-primary-container/50 placeholder:text-on-surface-variant/50" placeholder="Snel zoeken in services..." type="text"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Category Scroll -->
|
|
||||||
<div class="mb-8">
|
|
||||||
<div class="flex items-center justify-between px-4 mb-3">
|
|
||||||
<span class="font-label-caps text-label-caps text-on-surface-variant">CATEGORIEËN</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-3 overflow-x-auto px-4 hide-scrollbar">
|
|
||||||
<button class="flex flex-col items-center gap-2 shrink-0">
|
|
||||||
<div class="w-14 h-14 rounded-full bg-surface-container-high border border-outline-variant flex items-center justify-center shadow-inner">
|
|
||||||
<span class="material-symbols-outlined text-primary">dashboard</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-label-caps text-on-surface">Alles</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-2 shrink-0">
|
|
||||||
<div class="w-14 h-14 rounded-full bg-surface-container-low border border-outline-variant/30 flex items-center justify-center opacity-70">
|
|
||||||
<span class="material-symbols-outlined text-secondary">videocam</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-label-caps text-on-surface-variant">Media</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-2 shrink-0">
|
|
||||||
<div class="w-14 h-14 rounded-full bg-surface-container-low border border-outline-variant/30 flex items-center justify-center opacity-70">
|
|
||||||
<span class="material-symbols-outlined text-tertiary">home</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-label-caps text-on-surface-variant">Smart</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-2 shrink-0">
|
|
||||||
<div class="w-14 h-14 rounded-full bg-surface-container-low border border-outline-variant/30 flex items-center justify-center opacity-70">
|
|
||||||
<span class="material-symbols-outlined text-primary">code</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-label-caps text-on-surface-variant">Dev</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-2 shrink-0">
|
|
||||||
<div class="w-14 h-14 rounded-full bg-surface-container-low border border-outline-variant/30 flex items-center justify-center opacity-70">
|
|
||||||
<span class="material-symbols-outlined text-secondary">storage</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-label-caps text-on-surface-variant">Opslag</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Favorites Section (Bento Cards) -->
|
|
||||||
<section class="px-4 mb-8">
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h3 class="font-headline-md text-headline-md">Favorieten</h3>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-sm">star</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-2 gap-3">
|
|
||||||
<div class="glass-card rounded-2xl p-4 flex flex-col gap-3 relative overflow-hidden group">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-[#243447] flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-secondary">play_circle</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-secondary/10 border border-secondary/20">
|
|
||||||
<div class="w-1.5 h-1.5 rounded-full bg-secondary"></div>
|
|
||||||
<span class="font-status-label text-[10px] text-secondary">LIVE</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-body-md text-body-md font-medium text-on-surface">Plex</h4>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Media Server</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-2xl p-4 flex flex-col gap-3">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-[#243447] flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary">folder</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-secondary/10 border border-secondary/20">
|
|
||||||
<div class="w-1.5 h-1.5 rounded-full bg-secondary"></div>
|
|
||||||
<span class="font-status-label text-[10px] text-secondary">OK</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-body-md text-body-md font-medium text-on-surface">Nextcloud</h4>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Bestandshosting</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-2xl p-4 col-span-2 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary">terminal</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-body-md text-body-md font-medium text-on-surface">Portainer CLI</h4>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Container Management</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Media Section (List View) -->
|
|
||||||
<section class="px-4 mb-8">
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h3 class="font-headline-md text-headline-md">Media</h3>
|
|
||||||
<span class="font-label-caps text-label-caps text-primary cursor-pointer">Alles tonen</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<div class="flex items-center justify-between bg-surface-container-low/50 p-3 rounded-xl border border-outline-variant/20">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container flex items-center justify-center border border-outline-variant/30">
|
|
||||||
<span class="material-symbols-outlined text-secondary-fixed">download</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-body-sm text-body-sm font-medium">Transmission</p>
|
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<div class="w-1.5 h-1.5 rounded-full bg-secondary"></div>
|
|
||||||
<span class="font-label-caps text-[10px] text-on-surface-variant uppercase tracking-widest">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant/40">open_in_new</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center justify-between bg-surface-container-low/50 p-3 rounded-xl border border-outline-variant/20">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container flex items-center justify-center border border-outline-variant/30">
|
|
||||||
<span class="material-symbols-outlined text-primary">volume_up</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-body-sm text-body-sm font-medium">Navidrome</p>
|
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<div class="w-1.5 h-1.5 rounded-full bg-secondary"></div>
|
|
||||||
<span class="font-label-caps text-[10px] text-on-surface-variant uppercase tracking-widest">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant/40">open_in_new</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Smart Home Section (Grid) -->
|
|
||||||
<section class="px-4 mb-8">
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h3 class="font-headline-md text-headline-md">Smart Home</h3>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">bolt</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-3 gap-3">
|
|
||||||
<div class="bg-surface-container-high aspect-square rounded-2xl flex flex-col items-center justify-center gap-2 border border-outline-variant/20">
|
|
||||||
<span class="material-symbols-outlined text-secondary-fixed text-2xl">home_app_logo</span>
|
|
||||||
<span class="font-label-caps text-[10px] text-on-surface-variant text-center px-1">Home Assistant</span>
|
|
||||||
</div>
|
|
||||||
<div class="bg-surface-container-high aspect-square rounded-2xl flex flex-col items-center justify-center gap-2 border border-outline-variant/20">
|
|
||||||
<span class="material-symbols-outlined text-tertiary-fixed text-2xl">router</span>
|
|
||||||
<span class="font-label-caps text-[10px] text-on-surface-variant text-center px-1">Pi-hole</span>
|
|
||||||
</div>
|
|
||||||
<div class="bg-surface-container-high aspect-square rounded-2xl flex flex-col items-center justify-center gap-2 border border-outline-variant/20">
|
|
||||||
<span class="material-symbols-outlined text-primary-fixed text-2xl">thermostat</span>
|
|
||||||
<span class="font-label-caps text-[10px] text-on-surface-variant text-center px-1">Netatmo</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<!-- Bottom Navigation -->
|
|
||||||
<nav class="fixed bottom-0 left-0 right-0 max-w-[390px] mx-auto bg-surface/90 backdrop-blur-lg px-6 py-3 flex items-center justify-between border-t border-outline-variant/30 z-50">
|
|
||||||
<div class="flex flex-col items-center gap-1 group cursor-pointer">
|
|
||||||
<div class="p-1 px-5 rounded-full bg-primary-container text-on-primary-container transition-all duration-300">
|
|
||||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">dashboard</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-[10px] text-primary">Dashboard</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-center gap-1 group cursor-pointer">
|
|
||||||
<div class="p-1 px-5 rounded-full hover:bg-surface-container-highest text-on-surface-variant transition-all duration-300">
|
|
||||||
<span class="material-symbols-outlined">grid_view</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-[10px] text-on-surface-variant">Categorieën</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-center gap-1 group cursor-pointer">
|
|
||||||
<div class="p-1 px-5 rounded-full hover:bg-surface-container-highest text-on-surface-variant transition-all duration-300">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-label-caps text-[10px] text-on-surface-variant">Instellingen</span>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- Micro-interaction script -->
|
|
||||||
<script>
|
|
||||||
document.querySelectorAll('nav div').forEach(item => {
|
|
||||||
item.addEventListener('click', function() {
|
|
||||||
// Logic for visual feedback on click
|
|
||||||
this.classList.add('scale-95');
|
|
||||||
setTimeout(() => this.classList.remove('scale-95'), 150);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 177 KiB |
-236
@@ -1,236 +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 - Snel Zoeken</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=Geist:wght@100..900&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": {
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"outline-variant": "#454653",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"on-tertiary-container": "#0f00a2",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"primary": "#bdc2ff",
|
|
||||||
"primary-container": "#818cf8",
|
|
||||||
"outline": "#908f9e",
|
|
||||||
"tertiary-container": "#8689ff",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"on-primary-fixed": "#000767",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"primary-fixed-dim": "#bdc2ff",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"tertiary-fixed": "#e1e0ff",
|
|
||||||
"primary-fixed": "#e0e0ff",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"on-tertiary": "#1000a9",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"on-primary": "#131e8c",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"on-primary-container": "#101b8a",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"inverse-primary": "#4953bc",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"surface-tint": "#bdc2ff",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"on-tertiary-fixed": "#07006c",
|
|
||||||
"on-primary-fixed-variant": "#2f3aa3",
|
|
||||||
"tertiary-fixed-dim": "#c0c1ff",
|
|
||||||
"tertiary": "#c0c1ff",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-surface-variant": "#c6c5d5",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"inverse-on-surface": "#283044"
|
|
||||||
},
|
|
||||||
"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-lg-mobile": ["Geist"],
|
|
||||||
"status-label": ["Geist"],
|
|
||||||
"body-md": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"body-sm": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"status-label": ["13px", {"lineHeight": "18px", "fontWeight": "500"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
||||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background-color: #0b1326;
|
|
||||||
font-family: 'Geist', sans-serif;
|
|
||||||
color: #dbe2fd;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.search-overlay {
|
|
||||||
background-color: rgba(11, 19, 38, 0.85);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(22, 31, 53, 0.7);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
.active-ring {
|
|
||||||
box-shadow: 0 0 0 2px #818cf8;
|
|
||||||
}
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from { opacity: 0; transform: translateY(10px); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
|
||||||
.animate-fade-in {
|
|
||||||
animation: fadeIn 0.3s ease-out forwards;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="flex items-center justify-center h-screen w-screen relative">
|
|
||||||
<!-- Background Subtle Atmospheric Effect -->
|
|
||||||
<div class="absolute inset-0 z-0 opacity-20 pointer-events-none">
|
|
||||||
<div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary rounded-full blur-[120px] opacity-10"></div>
|
|
||||||
<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary rounded-full blur-[120px] opacity-10"></div>
|
|
||||||
</div>
|
|
||||||
<!-- Search Overlay Container -->
|
|
||||||
<div class="search-overlay fixed inset-0 z-50 flex items-start justify-center pt-32 px-gutter">
|
|
||||||
<div class="w-full max-w-2xl flex flex-col gap-y-4 animate-fade-in">
|
|
||||||
<!-- Branding / Context Label -->
|
|
||||||
<div class="flex items-center gap-2 px-stack-sm mb-1">
|
|
||||||
<span class="material-symbols-outlined text-primary-container text-[20px]">dock</span>
|
|
||||||
<span class="font-label-caps text-label-caps text-on-surface-variant tracking-widest">DOCKDECK QUICK LAUNCH</span>
|
|
||||||
</div>
|
|
||||||
<!-- Search Box Component -->
|
|
||||||
<div class="glass-card rounded-xl p-stack-md flex items-center gap-stack-md active-ring">
|
|
||||||
<span class="material-symbols-outlined text-primary-container text-[28px]">search</span>
|
|
||||||
<input autofocus="" class="bg-transparent border-none focus:ring-0 w-full font-headline-md text-headline-md text-on-surface placeholder-on-surface-variant" type="text" value="asdfgh"/>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<kbd class="bg-surface-container-highest px-2 py-1 rounded text-[10px] font-mono text-on-surface-variant border border-outline-variant">ESC</kbd>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Results Section -->
|
|
||||||
<div class="glass-card rounded-xl overflow-hidden flex flex-col">
|
|
||||||
<!-- Empty State Content -->
|
|
||||||
<div class="p-8 flex flex-col items-center justify-center text-center gap-4">
|
|
||||||
<div class="w-16 h-16 bg-surface-container rounded-full flex items-center justify-center mb-2">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-[32px]">search_off</span>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-1">
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Geen lokale resultaten gevonden</h3>
|
|
||||||
<p class="font-body-sm text-body-sm text-on-surface-variant">We konden geen apps of services vinden die overeenkomen met 'asdfgh'.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Action Bar -->
|
|
||||||
<div class="bg-surface-container-low px-stack-md py-4 border-t border-outline-variant">
|
|
||||||
<button class="w-full group flex items-center justify-between p-stack-md bg-primary-container rounded-lg transition-all hover:brightness-110 active:scale-[0.99]">
|
|
||||||
<div class="flex items-center gap-stack-md">
|
|
||||||
<span class="material-symbols-outlined text-on-primary-container">language</span>
|
|
||||||
<span class="font-body-md text-body-md text-on-primary-container font-medium">Zoeken op Google naar "asdfgh"</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1 opacity-60">
|
|
||||||
<span class="material-symbols-outlined text-[18px]">keyboard_return</span>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<!-- Secondary Suggestion (Implicit) -->
|
|
||||||
<div class="mt-4 flex flex-wrap gap-2 px-stack-sm">
|
|
||||||
<span class="font-label-caps text-label-caps text-on-surface-variant uppercase pt-1 mr-2">Suggesties:</span>
|
|
||||||
<button class="px-3 py-1 bg-surface-container-highest hover:bg-surface-variant rounded-full text-body-sm font-status-label text-on-surface-variant transition-colors border border-outline-variant">Dashboard openen</button>
|
|
||||||
<button class="px-3 py-1 bg-surface-container-highest hover:bg-surface-variant rounded-full text-body-sm font-status-label text-on-surface-variant transition-colors border border-outline-variant">Instellingen</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Footer Hints -->
|
|
||||||
<div class="flex justify-center gap-6 px-stack-sm mt-2">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-[16px] text-on-surface-variant">keyboard_arrow_up</span>
|
|
||||||
<span class="material-symbols-outlined text-[16px] text-on-surface-variant -ml-3">keyboard_arrow_down</span>
|
|
||||||
<span class="font-body-sm text-body-sm text-on-surface-variant">Navigeren</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-[16px] text-on-surface-variant">keyboard_return</span>
|
|
||||||
<span class="font-body-sm text-body-sm text-on-surface-variant">Selecteren</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Background Content (Simulated Dashboard underneath) -->
|
|
||||||
<main class="w-full h-full p-gutter pointer-events-none opacity-20 filter blur-sm">
|
|
||||||
<!-- Top App Bar Mockup -->
|
|
||||||
<header class="flex justify-between items-center h-16 max-w-container-max mx-auto">
|
|
||||||
<div class="font-headline-md text-headline-md font-bold text-primary flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">dock</span>
|
|
||||||
DockDeck
|
|
||||||
</div>
|
|
||||||
<nav class="flex gap-stack-lg">
|
|
||||||
<span class="font-label-caps text-label-caps text-primary border-b-2 border-primary pb-1">Dashboard</span>
|
|
||||||
<span class="font-label-caps text-label-caps text-on-surface-variant">Favorieten</span>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<!-- Bento Grid Mockup -->
|
|
||||||
<section class="max-w-container-max mx-auto mt-stack-lg grid grid-cols-12 gap-gutter">
|
|
||||||
<div class="col-span-8 h-64 bg-surface-container rounded-xl"></div>
|
|
||||||
<div class="col-span-4 h-64 bg-surface-container rounded-xl"></div>
|
|
||||||
<div class="col-span-4 h-80 bg-surface-container rounded-xl"></div>
|
|
||||||
<div class="col-span-4 h-80 bg-surface-container rounded-xl"></div>
|
|
||||||
<div class="col-span-4 h-80 bg-surface-container rounded-xl"></div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<script>
|
|
||||||
// Simple micro-interaction for the search box
|
|
||||||
const searchInput = document.querySelector('input');
|
|
||||||
searchInput.addEventListener('keydown', (e) => {
|
|
||||||
if (e.key === 'Escape') {
|
|
||||||
// In a real app, this would close the overlay
|
|
||||||
searchInput.parentElement.style.opacity = '0.5';
|
|
||||||
searchInput.parentElement.style.transform = 'scale(0.98)';
|
|
||||||
setTimeout(() => {
|
|
||||||
searchInput.parentElement.style.opacity = '1';
|
|
||||||
searchInput.parentElement.style.transform = 'scale(1)';
|
|
||||||
}, 150);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 93 KiB |
-278
@@ -1,278 +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 - Quick Launch</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=Geist:wght@100..900&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>
|
|
||||||
body {
|
|
||||||
font-family: 'Geist', sans-serif;
|
|
||||||
background-color: #0b1326;
|
|
||||||
margin: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.command-palette-overlay {
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
background-color: rgba(11, 19, 38, 0.8);
|
|
||||||
}
|
|
||||||
.selection-glow {
|
|
||||||
box-shadow: 0 0 15px rgba(189, 194, 255, 0.1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"outline-variant": "#454653",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"on-tertiary-container": "#0f00a2",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"primary": "#bdc2ff",
|
|
||||||
"primary-container": "#818cf8",
|
|
||||||
"outline": "#908f9e",
|
|
||||||
"tertiary-container": "#8689ff",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"primary-fixed-dim": "#bdc2ff",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"tertiary-fixed": "#e1e0ff",
|
|
||||||
"primary-fixed": "#e0e0ff",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"on-tertiary": "#1000a9",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"on-primary": "#131e8c",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"on-primary-container": "#101b8a",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"inverse-primary": "#4953bc",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"surface-tint": "#bdc2ff",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"on-tertiary-fixed": "#07006c",
|
|
||||||
"on-primary-fixed-variant": "#2f3aa3",
|
|
||||||
"tertiary-fixed-dim": "#c0c1ff",
|
|
||||||
"tertiary": "#c0c1ff",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-surface-variant": "#c6c5d5",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"inverse-on-surface": "#283044"
|
|
||||||
},
|
|
||||||
"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-lg-mobile": ["Geist"],
|
|
||||||
"status-label": ["Geist"],
|
|
||||||
"body-md": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"body-sm": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"status-label": ["13px", {"lineHeight": "18px", "fontWeight": "500"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
||||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body class="dark bg-surface-dim min-h-screen flex items-center justify-center p-4">
|
|
||||||
<!-- Top Navigation Anchor (Hidden in focused overlay mode but provided for shell consistency) -->
|
|
||||||
<header class="fixed top-0 left-0 right-0 z-50 bg-surface border-b border-outline-variant md:block hidden opacity-20 pointer-events-none">
|
|
||||||
<div class="flex justify-between items-center h-16 px-gutter max-w-container-max mx-auto">
|
|
||||||
<div class="font-headline-md text-headline-md font-bold text-primary dark:text-primary flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined">anchor</span>
|
|
||||||
DockDeck
|
|
||||||
</div>
|
|
||||||
<nav class="flex gap-8">
|
|
||||||
<a class="font-label-caps text-label-caps text-primary border-b-2 border-primary pb-1" href="#">Dashboard</a>
|
|
||||||
<a class="font-label-caps text-label-caps text-on-surface-variant hover:text-on-surface" href="#">Favorieten</a>
|
|
||||||
</nav>
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<span class="material-symbols-outlined text-primary">sync</span>
|
|
||||||
<span class="material-symbols-outlined text-primary">settings</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- Overlay Wrapper -->
|
|
||||||
<div class="fixed inset-0 command-palette-overlay z-[100] flex flex-col items-center pt-24 px-4">
|
|
||||||
<!-- Search Container -->
|
|
||||||
<div class="w-full max-w-[640px] bg-surface-container rounded-xl shadow-2xl overflow-hidden border border-outline-variant flex flex-col transform transition-all duration-300 scale-100">
|
|
||||||
<!-- Search Input Area -->
|
|
||||||
<div class="flex items-center px-6 py-5 border-b border-outline-variant">
|
|
||||||
<span class="material-symbols-outlined text-primary mr-4 text-2xl">search</span>
|
|
||||||
<input autofocus="" class="bg-transparent border-none focus:ring-0 text-on-surface font-headline-md text-headline-md w-full placeholder-on-surface-variant outline-none" spellcheck="false" type="text" value="Pl"/>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="px-2 py-1 bg-surface-container-highest rounded-lg text-on-surface-variant font-label-caps text-[10px] tracking-widest">ESC</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Scrollable Content Area -->
|
|
||||||
<div class="max-h-[480px] overflow-y-auto py-4">
|
|
||||||
<!-- Group: Apps -->
|
|
||||||
<div class="px-2 mb-4">
|
|
||||||
<h3 class="px-4 py-2 font-label-caps text-label-caps text-on-surface-variant opacity-70">Apps</h3>
|
|
||||||
<div class="space-y-1 mt-1">
|
|
||||||
<!-- Plex (Selected State) -->
|
|
||||||
<div class="flex items-center justify-between px-4 py-3 bg-primary-container/20 rounded-lg group cursor-pointer selection-glow border border-primary/20">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center text-primary">
|
|
||||||
<span class="material-symbols-outlined" data-weight="fill">play_circle</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="font-body-md text-body-md text-primary font-medium">Plex</span>
|
|
||||||
<div class="flex items-center gap-1.5 mt-0.5">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-[#10b981]"></div>
|
|
||||||
<span class="font-status-label text-status-label text-secondary">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-primary text-xl opacity-0 group-hover:opacity-100 transition-opacity">subdirectory_arrow_left</span>
|
|
||||||
</div>
|
|
||||||
<!-- Plausible -->
|
|
||||||
<div class="flex items-center justify-between px-4 py-3 hover:bg-surface-container-highest rounded-lg group cursor-pointer transition-colors">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">analytics</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="font-body-md text-body-md text-on-surface">Plausible</span>
|
|
||||||
<div class="flex items-center gap-1.5 mt-0.5">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-[#ef4444]"></div>
|
|
||||||
<span class="font-status-label text-status-label text-on-surface-variant opacity-60">Offline</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Group: Favorieten -->
|
|
||||||
<div class="px-2 mb-4">
|
|
||||||
<h3 class="px-4 py-2 font-label-caps text-label-caps text-on-surface-variant opacity-70">Favorieten</h3>
|
|
||||||
<div class="space-y-1 mt-1">
|
|
||||||
<div class="flex items-center justify-between px-4 py-3 hover:bg-surface-container-highest rounded-lg group cursor-pointer transition-colors">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">push_pin</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="font-body-md text-body-md text-on-surface">Pinterest</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-xl">open_in_new</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Group: Google -->
|
|
||||||
<div class="px-2 mb-2">
|
|
||||||
<h3 class="px-4 py-2 font-label-caps text-label-caps text-on-surface-variant opacity-70">Google</h3>
|
|
||||||
<div class="space-y-1 mt-1">
|
|
||||||
<div class="flex items-center justify-between px-4 py-3 hover:bg-surface-container-highest rounded-lg group cursor-pointer transition-colors">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">search</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="font-body-md text-body-md text-on-surface">Zoeken op Google naar "Pl"</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Footer Shortcuts -->
|
|
||||||
<div class="bg-surface-container-low px-6 py-3 border-t border-outline-variant flex items-center gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<span class="px-1.5 py-0.5 bg-surface-container-highest rounded text-[10px] text-on-surface-variant border border-outline-variant">ENTER</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-body-sm text-body-sm text-on-surface-variant">Openen in nieuw tabblad</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<span class="px-1.5 py-0.5 bg-surface-container-highest rounded text-[10px] text-on-surface-variant border border-outline-variant">ESC</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-body-sm text-body-sm text-on-surface-variant">Sluiten</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="flex items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined text-lg">arrow_upward</span>
|
|
||||||
<span class="material-symbols-outlined text-lg">arrow_downward</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-body-sm text-body-sm text-on-surface-variant">Navigeren</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Atmospheric Subtle Background Element -->
|
|
||||||
<div class="mt-12 text-center pointer-events-none">
|
|
||||||
<div class="font-headline-md text-headline-md font-bold text-primary/30 flex items-center justify-center gap-2 mb-2">
|
|
||||||
<span class="material-symbols-outlined">dock</span>
|
|
||||||
DockDeck
|
|
||||||
</div>
|
|
||||||
<p class="text-on-surface-variant/20 font-body-sm text-body-sm">Typ om door je digitale universum te navigeren</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Background Decorative Element (Shader Placeholder integration concept) -->
|
|
||||||
<div class="fixed inset-0 -z-10 overflow-hidden opacity-30">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
// Simple micro-interaction for the search palette
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if (e.key === 'Escape') {
|
|
||||||
const palette = document.querySelector('.command-palette-overlay');
|
|
||||||
palette.style.opacity = '0';
|
|
||||||
palette.style.transform = 'scale(0.95)';
|
|
||||||
palette.style.transition = 'all 0.2s ease-in';
|
|
||||||
setTimeout(() => palette.remove(), 200);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Hover effect for items to simulate navigation
|
|
||||||
const items = document.querySelectorAll('.cursor-pointer');
|
|
||||||
items.forEach(item => {
|
|
||||||
item.addEventListener('mouseenter', () => {
|
|
||||||
// Clear any existing selected state if we wanted dynamic behavior
|
|
||||||
// For this static mock, we keep the first one highlighted as requested
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
-180
@@ -1,180 +0,0 @@
|
|||||||
---
|
|
||||||
name: DockDeck Cyber-Utility
|
|
||||||
colors:
|
|
||||||
surface: '#0b1326'
|
|
||||||
surface-dim: '#0b1326'
|
|
||||||
surface-bright: '#31394e'
|
|
||||||
surface-container-lowest: '#060d20'
|
|
||||||
surface-container-low: '#131b2e'
|
|
||||||
surface-container: '#171f33'
|
|
||||||
surface-container-high: '#222a3e'
|
|
||||||
surface-container-highest: '#2d3449'
|
|
||||||
on-surface: '#dbe2fd'
|
|
||||||
on-surface-variant: '#c7c4d7'
|
|
||||||
inverse-surface: '#dbe2fd'
|
|
||||||
inverse-on-surface: '#283044'
|
|
||||||
outline: '#908fa0'
|
|
||||||
outline-variant: rgba(30, 41, 59, 0.5)
|
|
||||||
surface-tint: '#c0c1ff'
|
|
||||||
primary: '#c0c1ff'
|
|
||||||
on-primary: '#292b5e'
|
|
||||||
primary-container: '#8a8cc6'
|
|
||||||
on-primary-container: '#222457'
|
|
||||||
inverse-primary: '#585990'
|
|
||||||
secondary: '#4edea3'
|
|
||||||
on-secondary: '#003824'
|
|
||||||
secondary-container: '#00b47d'
|
|
||||||
on-secondary-container: '#003e28'
|
|
||||||
tertiary: '#ffb783'
|
|
||||||
on-tertiary: '#4f2500'
|
|
||||||
tertiary-container: '#d97721'
|
|
||||||
on-tertiary-container: '#452000'
|
|
||||||
error: '#ffb4ab'
|
|
||||||
on-error: '#690005'
|
|
||||||
error-container: '#93000a'
|
|
||||||
on-error-container: '#ffdad6'
|
|
||||||
primary-fixed: '#e1e0ff'
|
|
||||||
primary-fixed-dim: '#c0c1ff'
|
|
||||||
on-primary-fixed: '#131449'
|
|
||||||
on-primary-fixed-variant: '#404176'
|
|
||||||
secondary-fixed: '#6ffbbe'
|
|
||||||
secondary-fixed-dim: '#4edea3'
|
|
||||||
on-secondary-fixed: '#002114'
|
|
||||||
on-secondary-fixed-variant: '#005236'
|
|
||||||
tertiary-fixed: '#ffdcc5'
|
|
||||||
tertiary-fixed-dim: '#ffb783'
|
|
||||||
on-tertiary-fixed: '#301400'
|
|
||||||
on-tertiary-fixed-variant: '#703700'
|
|
||||||
background: '#0b1326'
|
|
||||||
on-background: '#dbe2fd'
|
|
||||||
surface-variant: '#2d3449'
|
|
||||||
surface-glass: rgba(15, 23, 42, 0.6)
|
|
||||||
status-online: '#4edea3'
|
|
||||||
status-offline: '#ffb4ab'
|
|
||||||
status-degraded: '#ffb783'
|
|
||||||
typography:
|
|
||||||
display-lg:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 48px
|
|
||||||
fontWeight: '600'
|
|
||||||
lineHeight: 56px
|
|
||||||
letterSpacing: -0.02em
|
|
||||||
headline-lg:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 32px
|
|
||||||
fontWeight: '600'
|
|
||||||
lineHeight: 40px
|
|
||||||
letterSpacing: -0.01em
|
|
||||||
headline-lg-mobile:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 24px
|
|
||||||
fontWeight: '600'
|
|
||||||
lineHeight: 32px
|
|
||||||
headline-md:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 24px
|
|
||||||
fontWeight: '500'
|
|
||||||
lineHeight: 32px
|
|
||||||
body-lg:
|
|
||||||
fontFamily: Inter
|
|
||||||
fontSize: 18px
|
|
||||||
fontWeight: '400'
|
|
||||||
lineHeight: 28px
|
|
||||||
body-md:
|
|
||||||
fontFamily: Inter
|
|
||||||
fontSize: 16px
|
|
||||||
fontWeight: '400'
|
|
||||||
lineHeight: 24px
|
|
||||||
label-md:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 14px
|
|
||||||
fontWeight: '500'
|
|
||||||
lineHeight: 20px
|
|
||||||
letterSpacing: 0.02em
|
|
||||||
code-sm:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 13px
|
|
||||||
fontWeight: '400'
|
|
||||||
lineHeight: 18px
|
|
||||||
rounded:
|
|
||||||
sm: 0.25rem
|
|
||||||
DEFAULT: 0.5rem
|
|
||||||
md: 0.75rem
|
|
||||||
lg: 1rem
|
|
||||||
xl: 1.5rem
|
|
||||||
full: 9999px
|
|
||||||
spacing:
|
|
||||||
base: 8px
|
|
||||||
stack-sm: 12px
|
|
||||||
stack-md: 24px
|
|
||||||
stack-lg: 48px
|
|
||||||
gutter: 24px
|
|
||||||
margin-mobile: 16px
|
|
||||||
margin-desktop: 40px
|
|
||||||
container-max: 1440px
|
|
||||||
---
|
|
||||||
|
|
||||||
## Brand & Style
|
|
||||||
|
|
||||||
DockDeck is a high-performance utility dashboard designed for developers and home-lab enthusiasts. The brand personality is technical, precise, and sophisticated, evoking the feeling of a futuristic mission control center.
|
|
||||||
|
|
||||||
The design style is **Glassmorphism** mixed with **Corporate Modernism**. It utilizes deep indigo backgrounds, translucent surface layers with backdrop blurs, and vibrant "status" accents. The aesthetic relies on the interplay between dark navy tones and high-fidelity neon primary/secondary colors to create a clear visual hierarchy that feels both premium and functional.
|
|
||||||
|
|
||||||
## Colors
|
|
||||||
|
|
||||||
The palette is centered around a deep "Midnight Navy" base (`#0b1326`). Primary actions and branding use a high-fidelity "Periwinkle" (`#c0c1ff`), while system states are communicated through a semantic set of "Cyber Green" (Online), "Amber Glow" (Degraded), and "Soft Coral" (Offline).
|
|
||||||
|
|
||||||
Surface colors are built using varying levels of transparency rather than flat hex codes to maintain the glass effect. Text uses high-contrast off-white (`#dae2fd`) for primary readability and muted lavender-grey (`#c7c4d7`) for secondary metadata.
|
|
||||||
|
|
||||||
## Typography
|
|
||||||
|
|
||||||
The system uses a duo-font pairing: **Geist** for technical precision and **Inter** for interface readability.
|
|
||||||
|
|
||||||
- **Geist** is reserved for headlines, labels, and status indicators, emphasizing the "developer-tool" nature of the product. It uses tighter letter spacing at large scales to feel more modern.
|
|
||||||
- **Inter** is used for all body text and descriptive content to ensure maximum legibility across different densities.
|
|
||||||
- **Monospaced-style Geist** is used for "code-sm" roles, such as version numbers or technical metadata.
|
|
||||||
|
|
||||||
## Layout & Spacing
|
|
||||||
|
|
||||||
The layout follows a **Fixed Grid** approach for the central content canvas while the navigation bars are **Fluid (Full-Width)**.
|
|
||||||
|
|
||||||
- **Breakpoints:** The layout transitions from a single column on mobile to a multi-column dashboard at 768px (MD) and introduces a fixed sidebar at 1280px (XL).
|
|
||||||
- **Rhythm:** An 8px base unit drives all spacing. Vertical "Stack" spacing is used to separate semantic sections (48px for major sections, 24px for interior groups).
|
|
||||||
- **Grid:** Card containers follow a flexible auto-grid that scales from 1 column to 4 columns depending on screen width, utilizing a consistent 24px gutter.
|
|
||||||
|
|
||||||
## Elevation & Depth
|
|
||||||
|
|
||||||
Depth is conveyed through **Glassmorphism** and **Tonal Layering** rather than traditional drop shadows.
|
|
||||||
|
|
||||||
1. **Level 0 (Base):** Background color `#0b1326`.
|
|
||||||
2. **Level 1 (Panels):** Translucent surfaces (`rgba(15, 23, 42, 0.6)`) with a `12px` backdrop blur and a subtle `1px` border (`rgba(30, 41, 59, 0.5)`).
|
|
||||||
3. **Level 2 (Interaction):** On hover, panels shift to a brighter background (`rgba(45, 52, 73, 0.5)`) and translate `-2px` on the Y-axis.
|
|
||||||
4. **Level 3 (Pop-ups/Active):** Reserved for search inputs and active modal states, using a scale of `1.01` and high-intensity glows (e.g., `0 0 8px #4edea3` for active dots).
|
|
||||||
|
|
||||||
## Shapes
|
|
||||||
|
|
||||||
The shape language is consistently **Rounded**, using specific radii to differentiate between container types:
|
|
||||||
- **Tiles & Panels:** `12px` (xl) rounded corners provide a friendly but structured look.
|
|
||||||
- **Status Pills:** `9999px` (full) for high-contrast status chips.
|
|
||||||
- **Buttons:** `12px` (xl) to match the card containers.
|
|
||||||
- **Inputs:** `12px` (xl) for a cohesive form-factor.
|
|
||||||
|
|
||||||
## Components
|
|
||||||
|
|
||||||
### Buttons
|
|
||||||
- **Primary:** Solid `#c0c1ff` background with `#1000a9` text. High-contrast, no shadow, uses brightness shift on hover.
|
|
||||||
- **Ghost/Icon:** Unfilled, using `on-surface-variant` color. Rounded-full background appears on hover at 50% opacity.
|
|
||||||
|
|
||||||
### App Tiles (Cards)
|
|
||||||
The core component. Built with the `glass-panel` style. They must contain a `48x48px` icon container (rounded-xl) and a top-right status indicator.
|
|
||||||
|
|
||||||
### Status Chips
|
|
||||||
Ultra-compact badges with a 2px active pulse animation.
|
|
||||||
- **Online:** Bordered with 20% opacity secondary color, containing an `active-dot` with a glowing shadow.
|
|
||||||
- **Offline/Degraded:** Uses corresponding semantic colors with a lower opacity container border.
|
|
||||||
|
|
||||||
### Search Bar
|
|
||||||
A full-width (max-xl) input field with a `surface-container-low` background and an inset search icon. Focus state includes a `primary-container` ring and a subtle scale-up animation.
|
|
||||||
|
|
||||||
### Side Navigation
|
|
||||||
Fixed-position rail using `surface-container-low`. Active links use `secondary-container` background with `on-secondary-container` text to distinguish current location from the primary dashboard actions.
|
|
||||||
-38
@@ -1,38 +0,0 @@
|
|||||||
# DESIGN.md — DockDeck Canon v1
|
|
||||||
|
|
||||||
## Productdefinitie
|
|
||||||
DockDeck is een premium persoonlijke browserstartpagina voor één gebruiker op een Unraid-server. Het fungeert als de centrale 'home base' voor snelle navigatie naar Docker-apps en favoriete websites.
|
|
||||||
|
|
||||||
**Kernervaring:**
|
|
||||||
1. Zoeken via de kenmerkende 'Quick Launch'.
|
|
||||||
2. Docker-apps en favorieten openen in een nieuw tabblad.
|
|
||||||
3. Navigeren door persoonlijke categorieën.
|
|
||||||
4. Beheren van app-configuratie (naam, icoon, categorie, URL).
|
|
||||||
5. Personaliseren van de visuele weergave.
|
|
||||||
|
|
||||||
**Wat DockDeck niet is:**
|
|
||||||
Geen beheerplatform voor containers of servers. Geen monitoring, logs of console. Docker-data wordt uitsluitend read-only getoond.
|
|
||||||
|
|
||||||
## Visuele Identiteit
|
|
||||||
- **Kleurpalet:** Basis van diep navy (#0b1326). Accentkleur: verfijnd lavendel (#818cf8). Positieve status: smaragdgroen (#10b981).
|
|
||||||
- **Typografie:** Geist (Sans-serif), gefocust op leesbaarheid en hiërarchie.
|
|
||||||
- **Vormtaal:** Subtiele borders (outline-variant), afgeronde hoeken (8-12px), doelbewuste witruimte.
|
|
||||||
- **Merk:** Minimalistisch geometrisch dock/brug beeldmerk met horizontaal woordmerk.
|
|
||||||
|
|
||||||
## Design Tokens & Componenten
|
|
||||||
- **App Tegel:** Bevat icoon, naam en status (Online, Offline, Status onbekend). Geen technische poorten of stats.
|
|
||||||
- **Favoriet Tegel:** Zelfde vormentaal als app tegel, maar zonder statusdot en met extern-link icoon.
|
|
||||||
- **Quick Launch:** Command-palette overlay gegroepeerd op Apps, Favorieten en Google.
|
|
||||||
- **Status Indicatoren:** Gebruik kleur (groen/rood/grijs) EN tekst. Geen permanente animaties.
|
|
||||||
|
|
||||||
## Terminologie
|
|
||||||
- **Apps:** Online, Offline, Status onbekend.
|
|
||||||
- **Discovery:** Nieuw ontdekt, Zichtbaar, Verborgen.
|
|
||||||
- **Integraties:** Verbonden, Niet verbonden, Beperkt beschikbaar.
|
|
||||||
- **Taal:** Consequent Nederlands ("je/jouw"). Geen "u" of "uw".
|
|
||||||
|
|
||||||
## Gebruiksregels
|
|
||||||
- Alle links openen in een nieuw tabblad.
|
|
||||||
- Geen account- of profielgegevens (geen avatars, geen 'Admin' labels).
|
|
||||||
- Geen 'Nieuwe Container' of 'Stop/Start' acties.
|
|
||||||
- Verberg technische metadata (image names, poorten) standaard voor de gebruiker.
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 152 KiB |
-196
@@ -1,196 +0,0 @@
|
|||||||
---
|
|
||||||
name: DockDeck Canon v1
|
|
||||||
colors:
|
|
||||||
surface: '#0b1326'
|
|
||||||
surface-dim: '#0b1326'
|
|
||||||
surface-bright: '#31394e'
|
|
||||||
surface-container-lowest: '#060d20'
|
|
||||||
surface-container-low: '#131b2e'
|
|
||||||
surface-container: '#171f33'
|
|
||||||
surface-container-high: '#222a3e'
|
|
||||||
surface-container-highest: '#2d3449'
|
|
||||||
on-surface: '#dbe2fd'
|
|
||||||
on-surface-variant: '#c6c5d5'
|
|
||||||
inverse-surface: '#dbe2fd'
|
|
||||||
inverse-on-surface: '#283044'
|
|
||||||
outline: '#908f9e'
|
|
||||||
outline-variant: '#454653'
|
|
||||||
surface-tint: '#bdc2ff'
|
|
||||||
primary: '#bdc2ff'
|
|
||||||
on-primary: '#131e8c'
|
|
||||||
primary-container: '#818cf8'
|
|
||||||
on-primary-container: '#101b8a'
|
|
||||||
inverse-primary: '#4953bc'
|
|
||||||
secondary: '#4edea3'
|
|
||||||
on-secondary: '#003824'
|
|
||||||
secondary-container: '#00a572'
|
|
||||||
on-secondary-container: '#00311f'
|
|
||||||
tertiary: '#c0c1ff'
|
|
||||||
on-tertiary: '#1000a9'
|
|
||||||
tertiary-container: '#8689ff'
|
|
||||||
on-tertiary-container: '#0f00a2'
|
|
||||||
error: '#ffb4ab'
|
|
||||||
on-error: '#690005'
|
|
||||||
error-container: '#93000a'
|
|
||||||
on-error-container: '#ffdad6'
|
|
||||||
primary-fixed: '#e0e0ff'
|
|
||||||
primary-fixed-dim: '#bdc2ff'
|
|
||||||
on-primary-fixed: '#000767'
|
|
||||||
on-primary-fixed-variant: '#2f3aa3'
|
|
||||||
secondary-fixed: '#6ffbbe'
|
|
||||||
secondary-fixed-dim: '#4edea3'
|
|
||||||
on-secondary-fixed: '#002113'
|
|
||||||
on-secondary-fixed-variant: '#005236'
|
|
||||||
tertiary-fixed: '#e1e0ff'
|
|
||||||
tertiary-fixed-dim: '#c0c1ff'
|
|
||||||
on-tertiary-fixed: '#07006c'
|
|
||||||
on-tertiary-fixed-variant: '#2f2ebe'
|
|
||||||
background: '#0b1326'
|
|
||||||
on-background: '#dbe2fd'
|
|
||||||
surface-variant: '#2d3449'
|
|
||||||
typography:
|
|
||||||
headline-lg:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 32px
|
|
||||||
fontWeight: '600'
|
|
||||||
lineHeight: 40px
|
|
||||||
letterSpacing: -0.02em
|
|
||||||
headline-lg-mobile:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 24px
|
|
||||||
fontWeight: '600'
|
|
||||||
lineHeight: 32px
|
|
||||||
letterSpacing: -0.01em
|
|
||||||
headline-md:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 20px
|
|
||||||
fontWeight: '500'
|
|
||||||
lineHeight: 28px
|
|
||||||
body-md:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 16px
|
|
||||||
fontWeight: '400'
|
|
||||||
lineHeight: 24px
|
|
||||||
body-sm:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 14px
|
|
||||||
fontWeight: '400'
|
|
||||||
lineHeight: 20px
|
|
||||||
label-caps:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 12px
|
|
||||||
fontWeight: '600'
|
|
||||||
lineHeight: 16px
|
|
||||||
letterSpacing: 0.05em
|
|
||||||
status-label:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 13px
|
|
||||||
fontWeight: '500'
|
|
||||||
lineHeight: 18px
|
|
||||||
rounded:
|
|
||||||
sm: 0.25rem
|
|
||||||
DEFAULT: 0.5rem
|
|
||||||
md: 0.75rem
|
|
||||||
lg: 1rem
|
|
||||||
xl: 1.5rem
|
|
||||||
full: 9999px
|
|
||||||
spacing:
|
|
||||||
container-max: 1280px
|
|
||||||
gutter: 1.5rem
|
|
||||||
margin-mobile: 1rem
|
|
||||||
stack-sm: 0.5rem
|
|
||||||
stack-md: 1rem
|
|
||||||
stack-lg: 2rem
|
|
||||||
---
|
|
||||||
|
|
||||||
## Brand & Style
|
|
||||||
|
|
||||||
The design system is engineered for a premium, calm, and professional digital home base. It focuses on clarity and purposeful utility, acting as a serene entry point for a user's digital environment. The aesthetic moves away from the cluttered, metric-heavy dashboards of traditional DevOps tools, opting instead for a **Minimalist / Modern** style that prioritizes content visibility and ease of access.
|
|
||||||
|
|
||||||
The interface evokes a sense of "digital zen"—an organized, quiet space where the user feels in total control of their navigation. There are no distractions like avatars or management controls; the focus is entirely on the "bridge" between the user and their services.
|
|
||||||
|
|
||||||
**Key Identity Guidelines:**
|
|
||||||
- **Language:** All copy must be in Dutch. Use an informal but professional tone ("je/jouw", never "uw").
|
|
||||||
- **Logo:** A minimalist, geometric bridge or dock icon. It must be legible at small scales (16px to 24px) and should avoid complex gradients, favoring solid strokes or simple geometric fills.
|
|
||||||
- **Mood:** Professional, reliable, and unobtrusive.
|
|
||||||
|
|
||||||
## Colors
|
|
||||||
|
|
||||||
The palette is optimized for a high-end dark mode experience. The primary background uses a deep navy to reduce eye strain and provide a sophisticated canvas for vibrant accents.
|
|
||||||
|
|
||||||
- **Background:** Deep Navy (`#0b1326`) serves as the foundation.
|
|
||||||
- **Primary Accent:** Refined Lavender/Purple (`#818cf8`) is used for primary actions, active states, and branding elements.
|
|
||||||
- **Success/Positive:** Green (`#10b981`) is reserved strictly for "Online" status and positive indicators.
|
|
||||||
- **Muted/Neutral:** For secondary text and borders, use varying shades of slate and navy to maintain low visual noise.
|
|
||||||
- **Status Colors:**
|
|
||||||
- `Online`: #10b981
|
|
||||||
- `Offline`: #ef4444 (Softened red)
|
|
||||||
- `Status onbekend`: #94a3b8 (Muted slate)
|
|
||||||
|
|
||||||
## Typography
|
|
||||||
|
|
||||||
This design system utilizes **Geist** for its technical precision and modern, clean aesthetic. The typography scale is designed to be highly legible with generous line heights to enhance the calm, airy feel of the interface.
|
|
||||||
|
|
||||||
**Usage Notes:**
|
|
||||||
- **Headlines:** Use `headline-lg` for main section titles. In mobile views, drop to `headline-lg-mobile`.
|
|
||||||
- **Labels:** `label-caps` is used for category headers or small metadata tags.
|
|
||||||
- **Dutch Terminology:** Always use the following exact strings:
|
|
||||||
- *Online*
|
|
||||||
- *Offline*
|
|
||||||
- *Status onbekend*
|
|
||||||
- *Zichtbaar*
|
|
||||||
- *Verborgen*
|
|
||||||
- *Nieuw ontdekt*
|
|
||||||
|
|
||||||
## Layout & Spacing
|
|
||||||
|
|
||||||
The layout follows a **Fluid Grid** approach with a maximum container width to prevent line lengths from becoming unreadable on ultra-wide monitors.
|
|
||||||
|
|
||||||
- **Grid:** 12-column layout on desktop, 4-column on mobile.
|
|
||||||
- **Rhythm:** Use an 8px base unit for all spacing (padding, margins, gaps).
|
|
||||||
- **Safe Areas:** Maintain a minimum 24px (1.5rem) margin on the sides of the viewport on desktop and 16px (1rem) on mobile.
|
|
||||||
- **Alignment:** Content should be center-aligned within the main container to reinforce the "home base" feel.
|
|
||||||
|
|
||||||
## Elevation & Depth
|
|
||||||
|
|
||||||
Depth in the design system is achieved through **Tonal Layers** and **Low-Contrast Outlines** rather than heavy shadows. This keeps the interface feeling light and digital.
|
|
||||||
|
|
||||||
- **Base Layer:** The deepest navy (`#0b1326`).
|
|
||||||
- **Surface Layer:** Cards and containers use a slightly lighter navy (`#161f35`) with a 1px border (`#2d3748`).
|
|
||||||
- **Interactive Depth:** On hover, cards should subtly lift using a very soft, high-diffusion shadow with a 4% opacity indigo tint.
|
|
||||||
- **Borders:** Use subtle borders to define structure. Avoid high-contrast white borders; instead, use semi-transparent overlays (e.g., `rgba(255, 255, 255, 0.05)`) for a refined look.
|
|
||||||
|
|
||||||
## Shapes
|
|
||||||
|
|
||||||
The shape language is consistently **Rounded**, striking a balance between approachable and professional.
|
|
||||||
|
|
||||||
- **Standard Elements:** Buttons, input fields, and small cards use a **8px** (`0.5rem`) radius.
|
|
||||||
- **Large Containers:** Dashboard cards or featured sections use a **16px** (`1rem`) radius.
|
|
||||||
- **Interactive States:** Focus states should mirror the element's corner radius with a 2px offset.
|
|
||||||
|
|
||||||
## Components
|
|
||||||
|
|
||||||
### Buttons
|
|
||||||
- **Primary:** Background `#818cf8`, text `#0b1326`. No shadow, 8px radius.
|
|
||||||
- **Secondary:** Transparent background with a 1px border of `#818cf8`.
|
|
||||||
- **Text Style:** Medium weight, Geist Sans.
|
|
||||||
|
|
||||||
### Cards (Service Items)
|
|
||||||
- The core component of the system.
|
|
||||||
- **Header:** Title of the service (Zichtbaar/Verborgen status).
|
|
||||||
- **Footer:** Status label (Online/Offline) with a small colored dot indicator.
|
|
||||||
- **Constraint:** No management buttons (No start/stop/delete). The card is a portal, not a controller.
|
|
||||||
|
|
||||||
### Chips / Tags
|
|
||||||
- Used for `Nieuw ontdekt` or service categories.
|
|
||||||
- Subtle background tint (10% opacity of the accent color) with matching 1px border.
|
|
||||||
|
|
||||||
### Status Indicators
|
|
||||||
- A simple 8px circle.
|
|
||||||
- Colors: Green (`#10b981`), Red (`#ef4444`), or Slate (`#94a3b8`).
|
|
||||||
- Always accompanied by the Dutch text label.
|
|
||||||
|
|
||||||
### Input Fields
|
|
||||||
- Used only for search/filtering.
|
|
||||||
- Darker background than the card surface.
|
|
||||||
- Subtle lavender focus ring (2px).
|
|
||||||
-457
@@ -1,457 +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 - Media Categorie</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"/>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"surface-container-high": "#222a3d",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"tertiary": "#ffb783",
|
|
||||||
"surface-container-lowest": "#060e20",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"outline": "#908fa0",
|
|
||||||
"outline-variant": "#464554",
|
|
||||||
"on-primary": "#1000a9",
|
|
||||||
"on-tertiary-fixed-variant": "#703700",
|
|
||||||
"on-tertiary-fixed": "#301400",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"tertiary-fixed": "#ffdcc5",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"primary-container": "#8083ff",
|
|
||||||
"tertiary-container": "#d97721",
|
|
||||||
"surface-bright": "#31394d",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"primary-fixed-dim": "#c0c1ff",
|
|
||||||
"on-surface-variant": "#c7c4d7",
|
|
||||||
"inverse-surface": "#dae2fd",
|
|
||||||
"on-primary-container": "#0d0096",
|
|
||||||
"on-primary-fixed-variant": "#2f2ebe",
|
|
||||||
"tertiary-fixed-dim": "#ffb783",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"inverse-on-surface": "#283044",
|
|
||||||
"on-tertiary-container": "#452000",
|
|
||||||
"on-primary-fixed": "#07006c",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"inverse-primary": "#494bd6",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"on-surface": "#dae2fd",
|
|
||||||
"on-background": "#dae2fd",
|
|
||||||
"surface-tint": "#c0c1ff",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"primary": "#c0c1ff",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-tertiary": "#4f2500",
|
|
||||||
"primary-fixed": "#e1e0ff"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.25rem",
|
|
||||||
"lg": "0.5rem",
|
|
||||||
"xl": "0.75rem",
|
|
||||||
"full": "9999px"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"margin-mobile": "16px",
|
|
||||||
"stack-md": "24px",
|
|
||||||
"gutter": "24px",
|
|
||||||
"margin-desktop": "40px",
|
|
||||||
"container-max": "1440px",
|
|
||||||
"base": "8px",
|
|
||||||
"stack-lg": "48px",
|
|
||||||
"stack-sm": "12px"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"body-lg": ["Inter"],
|
|
||||||
"code-sm": ["Geist"],
|
|
||||||
"label-md": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"headline-lg-mobile": ["Geist"],
|
|
||||||
"body-md": ["Inter"],
|
|
||||||
"display-lg": ["Geist"],
|
|
||||||
"headline-lg": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"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-md": ["24px", {"lineHeight": "32px", "fontWeight": "500"}],
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background-color: #0b1326;
|
|
||||||
color: #dae2fd;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(15, 23, 42, 0.6);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(30, 41, 59, 0.5);
|
|
||||||
}
|
|
||||||
.status-pulse {
|
|
||||||
animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
||||||
}
|
|
||||||
@keyframes pulse-ring {
|
|
||||||
0% { transform: scale(0.8); opacity: 0.5; }
|
|
||||||
50% { transform: scale(1.2); opacity: 0.2; }
|
|
||||||
100% { transform: scale(0.8); opacity: 0.5; }
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="font-body-md text-body-md overflow-x-hidden">
|
|
||||||
<!-- SideNavBar -->
|
|
||||||
<aside class="bg-surface-container-low h-screen w-64 flex flex-col fixed left-0 top-0 border-r border-outline-variant/20 z-50">
|
|
||||||
<div class="p-6">
|
|
||||||
<h1 class="font-headline-md text-headline-md font-bold text-on-surface">DockDeck</h1>
|
|
||||||
<div class="flex items-center gap-3 mt-4">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-secondary-container flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-on-secondary-container text-sm">dns</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-label-md text-label-md text-on-surface font-semibold leading-tight">Unraid Main</p>
|
|
||||||
<p class="text-[11px] text-secondary leading-tight">Verbonden</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<nav class="flex flex-col gap-stack-sm p-4 h-full">
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/50 rounded-xl transition-all duration-300 font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined">dashboard</span>
|
|
||||||
Overzicht
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-xl font-medium font-label-md text-label-md translate-x-1" href="#">
|
|
||||||
<span class="material-symbols-outlined">play_circle</span>
|
|
||||||
Media
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/50 rounded-xl transition-all duration-300 font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined">home_iot_device</span>
|
|
||||||
Smart Home
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/50 rounded-xl transition-all duration-300 font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined">memory</span>
|
|
||||||
Systeem
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/50 rounded-xl transition-all duration-300 font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined">settings_backup_restore</span>
|
|
||||||
Back-ups
|
|
||||||
</a>
|
|
||||||
<div class="mt-auto border-t border-outline-variant/10 pt-4 flex flex-col gap-1">
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:bg-surface-variant/40 rounded-xl transition-all font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
Instellingen
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:bg-surface-variant/40 rounded-xl transition-all font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined">help</span>
|
|
||||||
Hulp
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Canvas -->
|
|
||||||
<main class="ml-64 min-h-screen flex flex-col relative">
|
|
||||||
<!-- TopNavBar -->
|
|
||||||
<header class="bg-background/80 backdrop-blur-md sticky top-0 border-b border-outline-variant/30 z-40">
|
|
||||||
<div class="flex justify-between items-center h-16 px-gutter max-w-container-max mx-auto w-full">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a class="flex items-center gap-2 text-on-surface-variant hover:text-on-surface transition-colors group" href="#">
|
|
||||||
<span class="material-symbols-outlined text-primary group-hover:-translate-x-1 transition-transform">arrow_back</span>
|
|
||||||
<span class="font-label-md text-label-md">Terug naar Alles</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 max-w-md px-12">
|
|
||||||
<div class="relative flex items-center">
|
|
||||||
<span class="material-symbols-outlined absolute left-3 text-on-surface-variant text-lg">search</span>
|
|
||||||
<input class="w-full bg-surface-container-high border-none rounded-full py-2 pl-10 pr-4 text-sm focus:ring-2 focus:ring-primary/50 placeholder-on-surface-variant/50" placeholder="Zoek in Media..." type="text"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-high/50 transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">notifications</span>
|
|
||||||
</button>
|
|
||||||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-high/50 transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">settings</span>
|
|
||||||
</button>
|
|
||||||
<div class="w-8 h-8 rounded-full overflow-hidden bg-primary-container">
|
|
||||||
<img alt="Gebruikersprofiel" class="w-full h-full object-cover" data-alt="A professional profile portrait of a software engineer, neutral cinematic lighting, soft focus background of a modern home office, dark mode aesthetic with cool blue and slate grey tones, high quality digital photography." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBWZdId5kj-c6QGKHVtj3yEHHv1LzM_QRPIQPCovcb7Z-7fdkQIPrL9QtRwW6uWlDBB-VLhpRNvCfC5Wa3M6UNxecjb7jlznCCWDZGlkJBuoVgW985vb8G53O8pVIwb-qmF9aL0UabQoIP255yK1BBq1yZWjuvk4HLZ8nBw2-h2XB_oyHG4zu2M5oudPCbHf3SuoKNboyB7KljNnwiyIev_z8nYtAO1blQ9BXS5BX2rn7pwJ4-yZU7lAhtPThbCiMu_Kl4gwggT4guE"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- Content Area -->
|
|
||||||
<div class="p-margin-desktop max-w-container-max w-full mx-auto flex flex-col gap-stack-lg">
|
|
||||||
<!-- Category Header -->
|
|
||||||
<section class="flex flex-col gap-2">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="material-symbols-outlined text-secondary text-4xl" style="font-variation-settings: 'FILL' 1;">play_circle</span>
|
|
||||||
<h2 class="font-headline-lg text-headline-lg text-on-surface">Media Categorie</h2>
|
|
||||||
</div>
|
|
||||||
<p class="text-on-surface-variant max-w-2xl font-body-md">Beheer uw entertainment ecosysteem. Van streaming servers tot geautomatiseerde download agents, alles is hier gecentraliseerd voor een vloeiende ervaring.</p>
|
|
||||||
</section>
|
|
||||||
<!-- Stats Bar (Bento-ish) -->
|
|
||||||
<section class="grid grid-cols-1 md:grid-cols-4 gap-gutter">
|
|
||||||
<div class="glass-card p-6 rounded-2xl flex flex-col gap-2">
|
|
||||||
<span class="text-on-surface-variant font-label-md text-label-md uppercase tracking-wider">Actieve Containers</span>
|
|
||||||
<div class="flex items-baseline gap-2">
|
|
||||||
<span class="font-display-lg text-display-lg text-primary">4</span>
|
|
||||||
<span class="text-secondary text-sm font-medium">Allemaal operationeel</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card p-6 rounded-2xl flex flex-col gap-2">
|
|
||||||
<span class="text-on-surface-variant font-label-md text-label-md uppercase tracking-wider">Gecombineerd CPU</span>
|
|
||||||
<div class="flex items-baseline gap-2">
|
|
||||||
<span class="font-display-lg text-display-lg text-on-surface">12.4%</span>
|
|
||||||
<span class="material-symbols-outlined text-secondary text-sm">trending_down</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card p-6 rounded-2xl flex flex-col gap-2">
|
|
||||||
<span class="text-on-surface-variant font-label-md text-label-md uppercase tracking-wider">Netwerkverkeer</span>
|
|
||||||
<div class="flex items-baseline gap-2">
|
|
||||||
<span class="font-display-lg text-display-lg text-on-surface">45</span>
|
|
||||||
<span class="text-on-surface-variant text-label-md">Mbps</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card p-6 rounded-2xl flex flex-col gap-2 border-primary/20 bg-primary/5">
|
|
||||||
<span class="text-primary font-label-md text-label-md uppercase tracking-wider">Snelactie</span>
|
|
||||||
<button class="mt-2 bg-primary text-on-primary py-3 px-4 rounded-xl font-medium flex items-center justify-center gap-2 hover:scale-[1.02] active:scale-95 transition-all">
|
|
||||||
<span class="material-symbols-outlined text-sm">add_circle</span>
|
|
||||||
Nieuwe Container
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Grid of Apps -->
|
|
||||||
<section class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-gutter">
|
|
||||||
<!-- Plex -->
|
|
||||||
<div class="glass-card p-6 rounded-2xl hover:border-primary/50 transition-all duration-300 group">
|
|
||||||
<div class="flex justify-between items-start mb-6">
|
|
||||||
<div class="w-12 h-12 bg-surface-container-highest rounded-xl flex items-center justify-center overflow-hidden">
|
|
||||||
<img class="w-8 h-8 object-contain" data-alt="A minimalist tech logo for a media server app named Plex, featuring a stylized chevron or arrow, metallic texture with warm orange accents against a deep charcoal grey background, professional tech branding style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB1cIfVyHsh2kQkAp42Q71R3O-SSjMi4lZivRgpXWBPchSdmUsbXVJUh1noNBaCplvw-grxD-dtQXvMH7vzMZR-IqYoY4ne6x2Ssc7fRXqZazwHRlIokMqTmxTG-_4Zpe7ed871HGdyyVrl1km5uK179zy1CMwcTWAbpzVg_p_ny-mywJ9wRrF7_UNG6Ga2LA-w7bs1q10y9FkcSbpw6HFqPy_xUm8WFZz8kR93-t36muOAz3Ii7HOkeSTEHSyS1_E3gPVq_gb0byG3"/>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-end">
|
|
||||||
<span class="flex items-center gap-1.5 px-3 py-1 bg-secondary/10 text-secondary rounded-full text-xs font-medium">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-secondary relative">
|
|
||||||
<span class="absolute inset-0 rounded-full bg-secondary status-pulse"></span>
|
|
||||||
</span>
|
|
||||||
Actief
|
|
||||||
</span>
|
|
||||||
<span class="text-[10px] text-on-surface-variant mt-1">Uptime: 14d 2h</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Plex</h3>
|
|
||||||
<p class="text-on-surface-variant font-body-md text-sm mb-4">Media Server & Streaming</p>
|
|
||||||
<div class="space-y-3 mb-6">
|
|
||||||
<div class="flex justify-between items-center text-xs">
|
|
||||||
<span class="text-on-surface-variant">CPU Gebruik</span>
|
|
||||||
<span class="text-on-surface">4.2%</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-full bg-surface-container-highest h-1 rounded-full overflow-hidden">
|
|
||||||
<div class="bg-primary h-full w-[42%]"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between items-center text-xs">
|
|
||||||
<span class="text-on-surface-variant">Geheugen</span>
|
|
||||||
<span class="text-on-surface">1.4 GB</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<button class="flex-1 py-2 rounded-lg bg-surface-variant/50 text-on-surface text-sm font-medium hover:bg-surface-variant transition-colors">Details</button>
|
|
||||||
<button class="px-3 py-2 rounded-lg bg-error/10 text-error hover:bg-error/20 transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-sm">stop</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Jellyfin -->
|
|
||||||
<div class="glass-card p-6 rounded-2xl hover:border-primary/50 transition-all duration-300 group">
|
|
||||||
<div class="flex justify-between items-start mb-6">
|
|
||||||
<div class="w-12 h-12 bg-surface-container-highest rounded-xl flex items-center justify-center overflow-hidden">
|
|
||||||
<img class="w-8 h-8 object-contain" data-alt="A modern software icon for Jellyfin, featuring a stylized purple and blue geometric shape resembling a jellyfish, clean vector art style, set against a dark glassmorphic surface with soft glow." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDJhD0b-6gYcBRULKyPs-yhhGjwV4FY5BAWcW8Uo55j4ACs0DgMvjcicprZwu_FMOrSdYVpFJQnRmSqWyD2E221elkHujg0bO7QzQE5gicyxJ-1xxsOK9SAI6Dheze1MSOLbCU02O7Yz9sZU6y_bsjSLgy4NaGM8BoGbMIxTBvNYGY-U_2B6qEbH5xwY7987jrjCELyUDLhhO-J5dxu6P5dGrA2QjEx76fgwn-CEpWbBOMOH3hAXew_kjwHPjqqhYHhfRZn_QLknBpV"/>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-end">
|
|
||||||
<span class="flex items-center gap-1.5 px-3 py-1 bg-secondary/10 text-secondary rounded-full text-xs font-medium">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-secondary relative">
|
|
||||||
<span class="absolute inset-0 rounded-full bg-secondary status-pulse"></span>
|
|
||||||
</span>
|
|
||||||
Actief
|
|
||||||
</span>
|
|
||||||
<span class="text-[10px] text-on-surface-variant mt-1">Uptime: 2d 18h</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Jellyfin</h3>
|
|
||||||
<p class="text-on-surface-variant font-body-md text-sm mb-4">Open Source Media System</p>
|
|
||||||
<div class="space-y-3 mb-6">
|
|
||||||
<div class="flex justify-between items-center text-xs">
|
|
||||||
<span class="text-on-surface-variant">CPU Gebruik</span>
|
|
||||||
<span class="text-on-surface">2.1%</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-full bg-surface-container-highest h-1 rounded-full overflow-hidden">
|
|
||||||
<div class="bg-primary h-full w-[21%]"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between items-center text-xs">
|
|
||||||
<span class="text-on-surface-variant">Geheugen</span>
|
|
||||||
<span class="text-on-surface">840 MB</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<button class="flex-1 py-2 rounded-lg bg-surface-variant/50 text-on-surface text-sm font-medium hover:bg-surface-variant transition-colors">Details</button>
|
|
||||||
<button class="px-3 py-2 rounded-lg bg-error/10 text-error hover:bg-error/20 transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-sm">stop</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Sonarr -->
|
|
||||||
<div class="glass-card p-6 rounded-2xl hover:border-primary/50 transition-all duration-300 group border-l-4 border-l-tertiary-container/30">
|
|
||||||
<div class="flex justify-between items-start mb-6">
|
|
||||||
<div class="w-12 h-12 bg-surface-container-highest rounded-xl flex items-center justify-center overflow-hidden">
|
|
||||||
<img class="w-8 h-8 object-contain" data-alt="A software logo for Sonarr, featuring a blue and white radar-like circle pattern, modern minimal tech logo, isolated on a dark background with professional studio lighting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDiBH-97Vhvc-m9rzpqZyuEiKFgLTMBejzhvBYgPpABaHkYk5MIzrplSyqucXLKx57O4u_OCK-LClGOTcjg5OLwFnxgO941SRb7-kNnoJcmHAV5hCgf7R5I-RAFnMRPYJDK2ZYAUp5j945KgwLGRxMJrqxQEn5FDZv3bFRDRF8ZG6LJ4HHqxV_7IctqcpBkZ1GWzzQqf43Jbk6tezbuzU6jujdJQsk2deosvso11XUwwfyVaMgeDzoKX3qI9sGBb_C_Pp0lylyaL0UK"/>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-end">
|
|
||||||
<span class="flex items-center gap-1.5 px-3 py-1 bg-secondary/10 text-secondary rounded-full text-xs font-medium">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-secondary relative">
|
|
||||||
<span class="absolute inset-0 rounded-full bg-secondary status-pulse"></span>
|
|
||||||
</span>
|
|
||||||
Actief
|
|
||||||
</span>
|
|
||||||
<span class="text-[10px] text-on-surface-variant mt-1">Uptime: 5d 1h</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Sonarr</h3>
|
|
||||||
<p class="text-on-surface-variant font-body-md text-sm mb-4">TV Series Management</p>
|
|
||||||
<div class="space-y-3 mb-6">
|
|
||||||
<div class="flex justify-between items-center text-xs">
|
|
||||||
<span class="text-on-surface-variant">CPU Gebruik</span>
|
|
||||||
<span class="text-on-surface">0.8%</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-full bg-surface-container-highest h-1 rounded-full overflow-hidden">
|
|
||||||
<div class="bg-primary h-full w-[8%]"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between items-center text-xs text-tertiary">
|
|
||||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">download</span> Downloadt nu</span>
|
|
||||||
<span>4.2 MB/s</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<button class="flex-1 py-2 rounded-lg bg-surface-variant/50 text-on-surface text-sm font-medium hover:bg-surface-variant transition-colors">Details</button>
|
|
||||||
<button class="px-3 py-2 rounded-lg bg-error/10 text-error hover:bg-error/20 transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-sm">stop</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Radarr -->
|
|
||||||
<div class="glass-card p-6 rounded-2xl hover:border-primary/50 transition-all duration-300 group">
|
|
||||||
<div class="flex justify-between items-start mb-6">
|
|
||||||
<div class="w-12 h-12 bg-surface-container-highest rounded-xl flex items-center justify-center overflow-hidden">
|
|
||||||
<img class="w-8 h-8 object-contain" data-alt="A software logo for Radarr, featuring an orange and white film-strip and radar circle pattern, sleek modern tech branding, set on a dark slate grey textured background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAmG0xxSBadvCEG8O_FhY6rpipdaYvferQp7J5AnHYEp5ETwE7HBG2KKpPDI53uCV3lJv6g5c5F1SxU1Ry28xb6de-61uobqdVOZNsSeDuFqboR0A22qlkeF8Gsnt0bARtrYVRbvR_jfYaB8mvP-qoR0dxk2YlNtWup7o0R9onZ4p9VNW2OmeEuXteaOsoBRrXfC9XHtv9VFJY9pgRG_eodc3juQMFN1VK7_0SvkCOlOlxq6jsVt-2IAIEke6fbCwGjR90zfe5D5W1L"/>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-end">
|
|
||||||
<span class="flex items-center gap-1.5 px-3 py-1 bg-secondary/10 text-secondary rounded-full text-xs font-medium">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-secondary relative">
|
|
||||||
<span class="absolute inset-0 rounded-full bg-secondary status-pulse"></span>
|
|
||||||
</span>
|
|
||||||
Actief
|
|
||||||
</span>
|
|
||||||
<span class="text-[10px] text-on-surface-variant mt-1">Uptime: 12d 6h</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Radarr</h3>
|
|
||||||
<p class="text-on-surface-variant font-body-md text-sm mb-4">Movies Management</p>
|
|
||||||
<div class="space-y-3 mb-6">
|
|
||||||
<div class="flex justify-between items-center text-xs">
|
|
||||||
<span class="text-on-surface-variant">CPU Gebruik</span>
|
|
||||||
<span class="text-on-surface">1.2%</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-full bg-surface-container-highest h-1 rounded-full overflow-hidden">
|
|
||||||
<div class="bg-primary h-full w-[12%]"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between items-center text-xs">
|
|
||||||
<span class="text-on-surface-variant">Geheugen</span>
|
|
||||||
<span class="text-on-surface">420 MB</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<button class="flex-1 py-2 rounded-lg bg-surface-variant/50 text-on-surface text-sm font-medium hover:bg-surface-variant transition-colors">Details</button>
|
|
||||||
<button class="px-3 py-2 rounded-lg bg-error/10 text-error hover:bg-error/20 transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-sm">stop</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Secondary Actions -->
|
|
||||||
<section class="flex flex-col gap-gutter">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Recente Downloads</h3>
|
|
||||||
<a class="text-primary font-label-md text-label-md hover:underline underline-offset-4" href="#">Bekijk volledige wachtrij</a>
|
|
||||||
</div>
|
|
||||||
<div class="glass-card rounded-2xl overflow-hidden divide-y divide-outline-variant/10">
|
|
||||||
<div class="p-4 flex items-center justify-between hover:bg-surface-variant/20 transition-colors">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-10 h-10 rounded bg-surface-container flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-tertiary">movie</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-sm font-medium text-on-surface">The Grand Expedition (2024)</p>
|
|
||||||
<p class="text-xs text-on-surface-variant">2.4 GB • Radarr</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<span class="text-xs text-secondary font-medium">Voltooid</span>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-lg">more_vert</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-4 flex items-center justify-between hover:bg-surface-variant/20 transition-colors">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-10 h-10 rounded bg-surface-container flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-tertiary">tv</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-sm font-medium text-on-surface">Modern Architecture S01E05</p>
|
|
||||||
<p class="text-xs text-on-surface-variant">850 MB • Sonarr</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<span class="text-xs text-primary font-medium">Bezig (85%)</span>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-lg">more_vert</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<!-- Footer Decoration / Ambient Light -->
|
|
||||||
<div class="fixed bottom-0 right-0 w-[500px] h-[500px] bg-primary/10 blur-[150px] -z-10 rounded-full pointer-events-none"></div>
|
|
||||||
</main>
|
|
||||||
<script>
|
|
||||||
// Micro-interactions
|
|
||||||
document.querySelectorAll('.glass-card').forEach(card => {
|
|
||||||
card.addEventListener('mouseenter', () => {
|
|
||||||
card.style.transform = 'translateY(-4px)';
|
|
||||||
});
|
|
||||||
card.addEventListener('mouseleave', () => {
|
|
||||||
card.style.transform = 'translateY(0)';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 339 KiB |
-514
@@ -1,514 +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 - Media Category</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"/>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background-color: #0b1326;
|
|
||||||
color: #dbe2fd;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
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);
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-panel:hover {
|
|
||||||
background: rgba(45, 52, 73, 0.5);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
border-color: rgba(192, 193, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-dot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #4edea3;
|
|
||||||
box-shadow: 0 0 8px #4edea3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pulse-online {
|
|
||||||
animation: pulse-green 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse-green {
|
|
||||||
0% { box-shadow: 0 0 0 0 rgba(78, 222, 163, 0.4); }
|
|
||||||
70% { box-shadow: 0 0 0 10px rgba(78, 222, 163, 0); }
|
|
||||||
100% { box-shadow: 0 0 0 0 rgba(78, 222, 163, 0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
||||||
.no-scrollbar::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide scrollbar for IE, Edge and Firefox */
|
|
||||||
.no-scrollbar {
|
|
||||||
-ms-overflow-style: none; /* IE and Edge */
|
|
||||||
scrollbar-width: none; /* Firefox */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<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>
|
|
||||||
</head>
|
|
||||||
<body class="bg-background text-on-surface">
|
|
||||||
<!-- TopNavBar -->
|
|
||||||
<header class="fixed top-0 w-full backdrop-blur-xl border-b border-outline-variant/20 shadow-sm flex justify-between items-center h-16 px-gutter w-full z-50 bg-surface-glass">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<h1 class="font-headline-md text-headline-md font-bold text-primary">DockDeck</h1>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex flex-1 max-w-xl mx-8">
|
|
||||||
<div class="relative w-full group">
|
|
||||||
<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 bg-surface-container-low border-none rounded-full py-2 pl-12 pr-4 text-on-surface focus:ring-2 focus:ring-primary-container transition-all group-hover:bg-surface-variant/50" placeholder="Search apps, containers..." type="text"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<button class="p-2 rounded-full hover:bg-surface-variant/50 transition-colors active:scale-95 duration-150 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 rounded-full hover:bg-surface-variant/50 transition-colors active:scale-95 duration-150 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">account_circle</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- SideNavBar -->
|
|
||||||
<aside class="fixed left-0 top-16 h-[calc(100vh-64px)] w-64 border-r border-outline-variant/10 bg-surface-container-low hidden xl:flex flex-col p-base gap-stack-sm z-40">
|
|
||||||
<div class="p-4 mb-4">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center overflow-hidden">
|
|
||||||
<img class="w-full h-full object-cover" data-alt="A cinematic, high-resolution portrait of a futuristic server administrator wearing glowing interface glasses. The background consists of soft-focus blue server rack LEDs in a dark, navy-blue data center. The lighting is dramatic and moody, reflecting the DockDeck brand colors of indigo and neon cyan. Professional digital art style with sharp details and shallow depth of field." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB-7JJ3A0IU1hUBF4QHgXKf5qeXImYUEv7GOOpKmVP4Q9ajsx68FxHL6yMrRlXOTHG_Na6K9o5TJ0vV2hYEMyHmAecURpSrsLJNr3h5yX9iU9P9AwewPKw3LYcwl_YiATtjtnma7CUOCEO-wILqRCLCNI3XAKfhrX3-hJhp7XWLhGqQT4JX7lHOfMM3gWqhe0Fg-yxr30Xs8UDYUpP2MvpHZ2BVXGc1LaTidBJie_UrKDku8qLBtx7uajC9-BCNXsVSObF8UE4p_6hJ"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-label-md text-label-md text-on-surface">Admin</p>
|
|
||||||
<p class="text-[12px] text-on-surface-variant">Unraid Server</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<nav class="space-y-1">
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover:translate-x-1 duration-200 rounded-lg" 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-2 bg-secondary-container text-on-secondary-container rounded-lg transition-all 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-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover:translate-x-1 duration-200 rounded-lg" 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-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover:translate-x-1 duration-200 rounded-lg" 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-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all hover:translate-x-1 duration-200 rounded-lg" href="#">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="font-label-md text-label-md">Settings</span>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
<div class="mt-auto space-y-1 pt-4 border-t border-outline-variant/10">
|
|
||||||
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg" 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-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg" 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:pl-64 pt-16 min-h-screen">
|
|
||||||
<div class="max-w-[1440px] mx-auto p-gutter space-y-stack-lg">
|
|
||||||
<!-- Breadcrumbs & Category Title -->
|
|
||||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
||||||
<div class="space-y-1">
|
|
||||||
<nav class="flex items-center gap-2 text-on-surface-variant font-label-md text-label-md mb-2">
|
|
||||||
<a class="hover:text-primary transition-colors" href="#">Overzicht</a>
|
|
||||||
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
|
||||||
<span class="text-on-surface">Media</span>
|
|
||||||
</nav>
|
|
||||||
<h2 class="font-headline-lg text-headline-lg text-on-surface flex items-center gap-3">
|
|
||||||
<span class="material-symbols-outlined text-secondary text-3xl">movie</span>
|
|
||||||
Media Bibliotheek
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<button class="flex items-center gap-2 px-6 py-2.5 bg-primary text-on-primary rounded-full font-label-md text-label-md hover:brightness-110 active:scale-95 transition-all">
|
|
||||||
<span class="material-symbols-outlined">add</span>
|
|
||||||
Nieuwe App
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- Bento Grid Section: Favorites -->
|
|
||||||
<section class="space-y-stack-md">
|
|
||||||
<h3 class="font-label-md text-label-md text-on-surface-variant flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-[18px]">star</span>
|
|
||||||
FAVORIETEN
|
|
||||||
</h3>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<!-- Plex -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl flex flex-col justify-between h-48 relative group overflow-hidden">
|
|
||||||
<div class="absolute top-4 right-4">
|
|
||||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-secondary/20 bg-secondary/5">
|
|
||||||
<div class="active-dot pulse-online"></div>
|
|
||||||
<span class="text-[10px] font-bold text-secondary tracking-widest uppercase">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center border border-outline-variant/30 group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl" style="font-variation-settings: 'FILL' 1;">play_circle</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-headline-md text-[20px] text-on-surface mb-1">Plex</h4>
|
|
||||||
<p class="text-on-surface-variant font-body-md text-[14px]">Media Server • Local: 32400</p>
|
|
||||||
</div>
|
|
||||||
<div class="absolute -bottom-1 -right-1 opacity-5">
|
|
||||||
<span class="material-symbols-outlined text-8xl">play_circle</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Jellyfin -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl flex flex-col justify-between h-48 relative group overflow-hidden">
|
|
||||||
<div class="absolute top-4 right-4">
|
|
||||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-secondary/20 bg-secondary/5">
|
|
||||||
<div class="active-dot pulse-online"></div>
|
|
||||||
<span class="text-[10px] font-bold text-secondary tracking-widest uppercase">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center border border-outline-variant/30 group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-secondary text-3xl">cast</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-headline-md text-[20px] text-on-surface mb-1">Jellyfin</h4>
|
|
||||||
<p class="text-on-surface-variant font-body-md text-[14px]">Open Source Media • Port 8096</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Sonarr -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl flex flex-col justify-between h-48 relative group overflow-hidden">
|
|
||||||
<div class="absolute top-4 right-4">
|
|
||||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-secondary/20 bg-secondary/5">
|
|
||||||
<div class="active-dot pulse-online"></div>
|
|
||||||
<span class="text-[10px] font-bold text-secondary tracking-widest uppercase">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center border border-outline-variant/30 group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-tertiary text-3xl">tv_guide</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-headline-md text-[20px] text-on-surface mb-1">Sonarr</h4>
|
|
||||||
<p class="text-on-surface-variant font-body-md text-[14px]">TV Series Manager • Port 8989</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Radarr -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl flex flex-col justify-between h-48 relative group overflow-hidden">
|
|
||||||
<div class="absolute top-4 right-4">
|
|
||||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-status-degraded/20 bg-status-degraded/5">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-status-degraded"></div>
|
|
||||||
<span class="text-[10px] font-bold text-status-degraded tracking-widest uppercase">Degraded</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center border border-outline-variant/30 group-hover:scale-110 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-status-degraded text-3xl">movie_edit</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-headline-md text-[20px] text-on-surface mb-1">Radarr</h4>
|
|
||||||
<p class="text-on-surface-variant font-body-md text-[14px]">Movie Manager • Port 7878</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- All Media Apps Section -->
|
|
||||||
<section class="space-y-stack-md">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<h3 class="font-label-md text-label-md text-on-surface-variant flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-[18px]">list</span>
|
|
||||||
ALLE MEDIA APPS
|
|
||||||
</h3>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<button class="p-2 hover:bg-surface-variant/50 rounded-lg text-on-surface-variant transition-colors">
|
|
||||||
<span class="material-symbols-outlined">grid_view</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 hover:bg-surface-variant/50 rounded-lg text-on-surface-variant transition-colors">
|
|
||||||
<span class="material-symbols-outlined">list</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
||||||
<!-- Tautulli -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
|
|
||||||
<span class="material-symbols-outlined text-primary">monitoring</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 overflow-hidden">
|
|
||||||
<h4 class="font-label-md text-on-surface truncate">Tautulli</h4>
|
|
||||||
<div class="flex items-center gap-2 mt-1">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="text-[12px] text-on-surface-variant">Active Monitoring</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
|
|
||||||
</div>
|
|
||||||
<!-- Bazarr -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
|
|
||||||
<span class="material-symbols-outlined text-secondary">subtitles</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 overflow-hidden">
|
|
||||||
<h4 class="font-label-md text-on-surface truncate">Bazarr</h4>
|
|
||||||
<div class="flex items-center gap-2 mt-1">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="text-[12px] text-on-surface-variant">Subtitles Manager</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
|
|
||||||
</div>
|
|
||||||
<!-- Overseerr -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
|
|
||||||
<span class="material-symbols-outlined text-tertiary">request_page</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 overflow-hidden">
|
|
||||||
<h4 class="font-label-md text-on-surface truncate">Overseerr</h4>
|
|
||||||
<div class="flex items-center gap-2 mt-1">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="text-[12px] text-on-surface-variant">Requests Portal</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
|
|
||||||
</div>
|
|
||||||
<!-- Prowlarr -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
|
|
||||||
<span class="material-symbols-outlined text-primary">search_check</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 overflow-hidden">
|
|
||||||
<h4 class="font-label-md text-on-surface truncate">Prowlarr</h4>
|
|
||||||
<div class="flex items-center gap-2 mt-1">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="text-[12px] text-on-surface-variant">Indexer Manager</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
|
|
||||||
</div>
|
|
||||||
<!-- Transmission -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
|
|
||||||
<span class="material-symbols-outlined text-secondary">download</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 overflow-hidden">
|
|
||||||
<h4 class="font-label-md text-on-surface truncate">Transmission</h4>
|
|
||||||
<div class="flex items-center gap-2 mt-1">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="text-[12px] text-on-surface-variant">Torrent Client</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
|
|
||||||
</div>
|
|
||||||
<!-- Sabnzbd -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
|
|
||||||
<span class="material-symbols-outlined text-status-offline">download_done</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 overflow-hidden">
|
|
||||||
<h4 class="font-label-md text-on-surface truncate">Sabnzbd</h4>
|
|
||||||
<div class="flex items-center gap-2 mt-1">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-status-offline"></div>
|
|
||||||
<span class="text-[12px] text-on-surface-variant">Offline</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
|
|
||||||
</div>
|
|
||||||
<!-- Lidarr -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
|
|
||||||
<span class="material-symbols-outlined text-primary">music_note</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 overflow-hidden">
|
|
||||||
<h4 class="font-label-md text-on-surface truncate">Lidarr</h4>
|
|
||||||
<div class="flex items-center gap-2 mt-1">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="text-[12px] text-on-surface-variant">Music Manager</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
|
|
||||||
</div>
|
|
||||||
<!-- Audiobookshelf -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl flex items-center gap-4 group">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0 border border-outline-variant/20">
|
|
||||||
<span class="material-symbols-outlined text-tertiary">menu_book</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 overflow-hidden">
|
|
||||||
<h4 class="font-label-md text-on-surface truncate">Audiobookshelf</h4>
|
|
||||||
<div class="flex items-center gap-2 mt-1">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
||||||
<span class="text-[12px] text-on-surface-variant">Audio Server</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">open_in_new</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Quick Navigation Footer/Back -->
|
|
||||||
<div class="pt-stack-lg border-t border-outline-variant/10 flex flex-col items-center gap-6">
|
|
||||||
<p class="text-on-surface-variant font-body-md">Klaar met media beheer?</p>
|
|
||||||
<a class="flex items-center gap-3 px-8 py-3 glass-panel rounded-full text-primary hover:bg-primary hover:text-on-primary transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined">grid_view</span>
|
|
||||||
Terug naar 'Alles'
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- Mobile Bottom Navigation Shell -->
|
|
||||||
<nav class="fixed bottom-0 left-0 right-0 h-16 bg-surface-glass backdrop-blur-xl border-t border-outline-variant/20 md:hidden flex justify-around items-center z-50">
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">dashboard</span>
|
|
||||||
<span class="text-[10px] font-bold">Overzicht</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-secondary">
|
|
||||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">movie</span>
|
|
||||||
<span class="text-[10px] font-bold">Media</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">terminal</span>
|
|
||||||
<span class="text-[10px] font-bold">Logs</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="text-[10px] font-bold">Instellingen</span>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
<!-- Background Atmospheric Effect -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none z-[-1]">
|
|
||||||
<div class="absolute top-[-10%] right-[-10%] w-[50%] h-[50%] bg-primary/10 blur-[120px] rounded-full"></div>
|
|
||||||
<div class="absolute bottom-[-10%] left-[-10%] w-[50%] h-[50%] bg-secondary/5 blur-[120px] rounded-full"></div>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
// Simple search interactivity
|
|
||||||
const searchInput = document.querySelector('input[type="text"]');
|
|
||||||
searchInput.addEventListener('focus', () => {
|
|
||||||
searchInput.parentElement.classList.add('scale-[1.02]');
|
|
||||||
});
|
|
||||||
searchInput.addEventListener('blur', () => {
|
|
||||||
searchInput.parentElement.classList.remove('scale-[1.02]');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Hover animation for cards using vanilla JS for extra spice
|
|
||||||
document.querySelectorAll('.glass-panel').forEach(card => {
|
|
||||||
card.addEventListener('mousemove', (e) => {
|
|
||||||
const rect = card.getBoundingClientRect();
|
|
||||||
const x = e.clientX - rect.left;
|
|
||||||
const y = e.clientY - rect.top;
|
|
||||||
card.style.setProperty('--mouse-x', `${x}px`);
|
|
||||||
card.style.setProperty('--mouse-y', `${y}px`);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 281 KiB |
-435
@@ -1,435 +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"/>
|
|
||||||
<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&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": "#ffffff",
|
|
||||||
"on-primary-fixed": "#07006c",
|
|
||||||
"on-primary-container": "#0d0096",
|
|
||||||
"inverse-primary": "#494bd6",
|
|
||||||
"tertiary": "#ffb783",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"surface-container-highest": "#e2e2ec",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"primary-fixed-dim": "#c0c1ff",
|
|
||||||
"on-primary-fixed-variant": "#2f2ebe",
|
|
||||||
"tertiary-fixed-dim": "#ffb783",
|
|
||||||
"surface-tint": "#494bd6",
|
|
||||||
"on-surface": "#191a23",
|
|
||||||
"tertiary-fixed": "#ffdcc5",
|
|
||||||
"tertiary-container": "#d97721",
|
|
||||||
"surface-dim": "#dedbe9",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"surface-container-high": "#e8e7f0",
|
|
||||||
"primary-fixed": "#e1e0ff",
|
|
||||||
"outline": "#767680",
|
|
||||||
"background": "#fbf8ff",
|
|
||||||
"on-secondary-container": "#ffffff",
|
|
||||||
"on-error": "#ffffff",
|
|
||||||
"surface-container": "#f3f3fa",
|
|
||||||
"surface-bright": "#fbf8ff",
|
|
||||||
"surface": "#fbf8ff",
|
|
||||||
"primary": "#494bd6",
|
|
||||||
"on-secondary": "#ffffff",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"on-primary": "#ffffff",
|
|
||||||
"inverse-on-surface": "#f1f0f7",
|
|
||||||
"surface-variant": "#e2e2ec",
|
|
||||||
"secondary": "#006d4a",
|
|
||||||
"outline-variant": "#c7c5d0",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"inverse-surface": "#303038",
|
|
||||||
"on-tertiary-container": "#452000",
|
|
||||||
"surface-container-low": "#f8f7ff",
|
|
||||||
"on-tertiary-fixed-variant": "#703700",
|
|
||||||
"on-tertiary-fixed": "#301400",
|
|
||||||
"on-background": "#191a23",
|
|
||||||
"on-surface-variant": "#46464f",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"error": "#ba1a1a",
|
|
||||||
"on-tertiary": "#ffffff"
|
|
||||||
},
|
|
||||||
"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: #fbf8ff;
|
|
||||||
color: #191a23;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.glass-header {
|
|
||||||
background: rgba(251, 248, 255, 0.8);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
}
|
|
||||||
.sidebar-item-active {
|
|
||||||
background-color: #e1e0ff;
|
|
||||||
color: #0d0096;
|
|
||||||
}
|
|
||||||
.app-card-hover:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="font-body-md text-body-md bg-background selection:bg-primary-container selection:text-on-primary-container">
|
|
||||||
<!-- TopNavBar -->
|
|
||||||
<header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-margin-desktop h-16 glass-header border-b border-outline-variant/30">
|
|
||||||
<div class="flex items-center gap-base">
|
|
||||||
<span class="font-headline-md text-headline-md font-bold text-primary">DockDeck</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<nav class="flex gap-6">
|
|
||||||
<a class="font-body-md text-body-md text-primary border-b-2 border-primary pb-1 transition-colors duration-200" href="#">Dashboard</a>
|
|
||||||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Logs</a>
|
|
||||||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Console</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<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">search</span>
|
|
||||||
<input class="bg-surface-container-high border-none rounded-full pl-10 pr-4 py-1.5 text-sm w-64 focus:ring-2 focus:ring-primary/30 transition-all outline-none" placeholder="Zoek containers..." type="text"/>
|
|
||||||
</div>
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary active:scale-95 transition-transform">notifications</button>
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary active:scale-95 transition-transform">settings</button>
|
|
||||||
<div class="h-8 w-8 rounded-full bg-primary-container flex items-center justify-center overflow-hidden border border-outline-variant/20">
|
|
||||||
<img class="w-full h-full object-cover" data-alt="A professional studio portrait of a technology administrator, minimalist aesthetic with soft natural light, clean white background, high-end commercial photography style, neutral professional expression, sharp focus on eyes, color palette of soft greys and whites." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDZBmQkMnbaoCp-YjMCrfRC8YulXxUhV1M5EDhBeypHkX2jdqcesz604-Y1P4VopmKQCiC61qYrSgcrnf12vgLmWVPlIVoWt3EeJqVA4LGP_ORObviY40uoazUOfT9uLIoQPFxgwZMkbeTVPjp28IT1cXM3pxcrkM9mko0BaJ5xulAMR3VL0FKW2AebMgIRxe-NMYuUPyE9WjAHliYs7P5Pek_VmUMRZzST5Ttgy4ghEUJoklMeWdHEfeADrTYgRz8bmzBwhXhHBQ__"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- SideNavBar -->
|
|
||||||
<aside class="fixed left-0 top-16 bottom-0 w-64 flex flex-col p-4 bg-surface-container-low border-r border-outline-variant/30 hidden md:flex">
|
|
||||||
<div class="mb-stack-md px-2 py-4 border-b border-outline-variant/10">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white">
|
|
||||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">dns</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 class="font-label-md text-label-md font-bold text-on-surface">Unraid Engine</h2>
|
|
||||||
<p class="text-[11px] text-on-surface-variant uppercase tracking-wider">6.12.4 - Stable</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<nav class="flex-1 space-y-1">
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2.5 bg-primary-container text-on-primary-container rounded-lg font-label-md text-label-md active:translate-x-1 transition-transform" href="#">
|
|
||||||
<span class="material-symbols-outlined">dashboard</span> Overview
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface rounded-lg font-label-md text-label-md active:translate-x-1 transition-transform" href="#">
|
|
||||||
<span class="material-symbols-outlined">memory</span> System
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface rounded-lg font-label-md text-label-md active:translate-x-1 transition-transform" href="#">
|
|
||||||
<span class="material-symbols-outlined">lan</span> Network
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface rounded-lg font-label-md text-label-md active:translate-x-1 transition-transform" href="#">
|
|
||||||
<span class="material-symbols-outlined">database</span> Storage
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface rounded-lg font-label-md text-label-md active:translate-x-1 transition-transform" href="#">
|
|
||||||
<span class="material-symbols-outlined">backup</span> Backups
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface rounded-lg font-label-md text-label-md active:translate-x-1 transition-transform" href="#">
|
|
||||||
<span class="material-symbols-outlined">hub</span> Registry
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
<div class="mt-auto space-y-4 pt-4">
|
|
||||||
<button class="w-full py-3 px-4 bg-primary text-white rounded-xl font-label-md text-label-md font-bold shadow-lg shadow-primary/20 hover:bg-primary/90 transition-all active:scale-95">
|
|
||||||
Deploy New App
|
|
||||||
</button>
|
|
||||||
<div class="space-y-1">
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:text-primary font-label-md text-label-md transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined text-[20px]">help</span> Documentation
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:text-primary font-label-md text-label-md transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined text-[20px]">chat_bubble</span> Support
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content Canvas -->
|
|
||||||
<main class="md:pl-64 pt-16 min-h-screen">
|
|
||||||
<div class="max-w-container-max mx-auto p-margin-desktop">
|
|
||||||
<!-- Welcome Header -->
|
|
||||||
<section class="mb-stack-lg animate-fade-in">
|
|
||||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 class="font-headline-lg text-headline-lg text-on-surface mb-2">Goedemorgen, Admin</h1>
|
|
||||||
<p class="font-body-md text-body-md text-on-surface-variant">Je systeem draait stabiel. 14 containers zijn actief en gezond.</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-3">
|
|
||||||
<div class="bg-surface-container border border-outline-variant/20 px-4 py-2 rounded-xl flex items-center gap-3">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary animate-pulse"></div>
|
|
||||||
<span class="text-sm font-medium text-on-surface">CPU: 12%</span>
|
|
||||||
</div>
|
|
||||||
<div class="bg-surface-container border border-outline-variant/20 px-4 py-2 rounded-xl flex items-center gap-3">
|
|
||||||
<div class="w-2 h-2 rounded-full bg-secondary animate-pulse"></div>
|
|
||||||
<span class="text-sm font-medium text-on-surface">RAM: 4.2GB</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Bento Dashboard Grid -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
|
|
||||||
<!-- Category: Media & Entertainment -->
|
|
||||||
<div class="md:col-span-12">
|
|
||||||
<div class="flex items-center justify-between mb-stack-sm">
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Media & Entertainment</h3>
|
|
||||||
<button class="text-primary text-sm font-semibold hover:underline">Beheer alles</button>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-gutter">
|
|
||||||
<!-- Plex Card -->
|
|
||||||
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded-2xl p-5 app-card-hover transition-all duration-300 group">
|
|
||||||
<div class="flex justify-between items-start mb-4">
|
|
||||||
<div class="w-12 h-12 bg-[#E5A00D]/10 rounded-xl flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-[#E5A00D] text-3xl" style="font-variation-settings: 'FILL' 1;">play_circle</span>
|
|
||||||
</div>
|
|
||||||
<span class="px-2 py-1 bg-secondary-container/10 text-secondary text-[11px] font-bold rounded uppercase tracking-tighter">Actief</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-headline-md text-[18px] text-on-surface group-hover:text-primary transition-colors">Plex Media Server</h4>
|
|
||||||
<p class="text-sm text-on-surface-variant mb-6">Home Cinema streaming platform</p>
|
|
||||||
<div class="flex items-center justify-between border-t border-outline-variant/10 pt-4">
|
|
||||||
<span class="text-xs text-on-surface-variant">CPU: 1.2%</span>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-error transition-colors">stop_circle</button>
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">restart_alt</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Sonarr Card -->
|
|
||||||
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded-2xl p-5 app-card-hover transition-all duration-300 group">
|
|
||||||
<div class="flex justify-between items-start mb-4">
|
|
||||||
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl" style="font-variation-settings: 'FILL' 1;">calendar_today</span>
|
|
||||||
</div>
|
|
||||||
<span class="px-2 py-1 bg-secondary-container/10 text-secondary text-[11px] font-bold rounded uppercase tracking-tighter">Actief</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-headline-md text-[18px] text-on-surface group-hover:text-primary transition-colors">Sonarr</h4>
|
|
||||||
<p class="text-sm text-on-surface-variant mb-6">TV Series management tool</p>
|
|
||||||
<div class="flex items-center justify-between border-t border-outline-variant/10 pt-4">
|
|
||||||
<span class="text-xs text-on-surface-variant">CPU: 0.8%</span>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-error transition-colors">stop_circle</button>
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">restart_alt</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Radarr Card -->
|
|
||||||
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded-2xl p-5 app-card-hover transition-all duration-300 group">
|
|
||||||
<div class="flex justify-between items-start mb-4">
|
|
||||||
<div class="w-12 h-12 bg-tertiary-container/10 rounded-xl flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-tertiary-container text-3xl" style="font-variation-settings: 'FILL' 1;">movie</span>
|
|
||||||
</div>
|
|
||||||
<span class="px-2 py-1 bg-secondary-container/10 text-secondary text-[11px] font-bold rounded uppercase tracking-tighter">Actief</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-headline-md text-[18px] text-on-surface group-hover:text-primary transition-colors">Radarr</h4>
|
|
||||||
<p class="text-sm text-on-surface-variant mb-6">Movies automation manager</p>
|
|
||||||
<div class="flex items-center justify-between border-t border-outline-variant/10 pt-4">
|
|
||||||
<span class="text-xs text-on-surface-variant">CPU: 2.1%</span>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-error transition-colors">stop_circle</button>
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">restart_alt</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Tautulli Card -->
|
|
||||||
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded-2xl p-5 app-card-hover transition-all duration-300 group">
|
|
||||||
<div class="flex justify-between items-start mb-4">
|
|
||||||
<div class="w-12 h-12 bg-secondary/10 rounded-xl flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-secondary text-3xl" style="font-variation-settings: 'FILL' 1;">query_stats</span>
|
|
||||||
</div>
|
|
||||||
<span class="px-2 py-1 bg-error-container/10 text-error text-[11px] font-bold rounded uppercase tracking-tighter">Gestopt</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-headline-md text-[18px] text-on-surface group-hover:text-primary transition-colors">Tautulli</h4>
|
|
||||||
<p class="text-sm text-on-surface-variant mb-6">Plex Monitoring & Statistics</p>
|
|
||||||
<div class="flex items-center justify-between border-t border-outline-variant/10 pt-4">
|
|
||||||
<span class="text-xs text-on-surface-variant">CPU: 0.0%</span>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-secondary transition-colors">play_circle</button>
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">settings</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Category: Infrastructure -->
|
|
||||||
<div class="md:col-span-8">
|
|
||||||
<div class="flex items-center justify-between mb-stack-sm">
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Infrastructuur</h3>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-gutter">
|
|
||||||
<!-- Nginx Card -->
|
|
||||||
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded-2xl p-6 app-card-hover transition-all duration-300">
|
|
||||||
<div class="flex items-center gap-4 mb-6">
|
|
||||||
<div class="w-14 h-14 bg-secondary/10 rounded-2xl flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-secondary text-4xl" style="font-variation-settings: 'FILL' 1;">router</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-headline-md text-[20px] text-on-surface">Nginx Proxy Manager</h4>
|
|
||||||
<div class="flex items-center gap-2 mt-1">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
|
||||||
<span class="text-xs text-on-surface-variant font-medium">8 Hosts Actief</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-3">
|
|
||||||
<div class="h-2 w-full bg-surface-container rounded-full overflow-hidden">
|
|
||||||
<div class="h-full bg-secondary rounded-full" style="width: 45%;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between text-[11px] font-bold text-on-surface-variant uppercase">
|
|
||||||
<span>Verkeer</span>
|
|
||||||
<span>452 MB/s</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Pi-hole Card -->
|
|
||||||
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded-2xl p-6 app-card-hover transition-all duration-300">
|
|
||||||
<div class="flex items-center gap-4 mb-6">
|
|
||||||
<div class="w-14 h-14 bg-error/10 rounded-2xl flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-error text-4xl" style="font-variation-settings: 'FILL' 1;">shield</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-headline-md text-[20px] text-on-surface">Pi-hole DNS</h4>
|
|
||||||
<div class="flex items-center gap-2 mt-1">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
|
||||||
<span class="text-xs text-on-surface-variant font-medium">24k Advertenties Geblokkeerd</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-3">
|
|
||||||
<div class="h-2 w-full bg-surface-container rounded-full overflow-hidden">
|
|
||||||
<div class="h-full bg-error rounded-full" style="width: 28%;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between text-[11px] font-bold text-on-surface-variant uppercase">
|
|
||||||
<span>Block Rate</span>
|
|
||||||
<span>28.4%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Recent Activities / Logs Side Bento -->
|
|
||||||
<div class="md:col-span-4">
|
|
||||||
<div class="flex items-center justify-between mb-stack-sm">
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Systeem Logs</h3>
|
|
||||||
</div>
|
|
||||||
<div class="bg-surface-container border border-outline-variant/30 rounded-2xl p-6 h-[calc(100%-40px)]">
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<div class="flex-shrink-0 w-2 h-2 mt-2 rounded-full bg-primary"></div>
|
|
||||||
<div>
|
|
||||||
<p class="text-sm text-on-surface leading-snug"><b>Sonarr</b> heeft 'Better Call Saul S06E13' gedownload.</p>
|
|
||||||
<span class="text-xs text-on-surface-variant">2 minuten geleden</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<div class="flex-shrink-0 w-2 h-2 mt-2 rounded-full bg-error"></div>
|
|
||||||
<div>
|
|
||||||
<p class="text-sm text-on-surface leading-snug"><b>Tautulli</b> container onverwacht gestopt.</p>
|
|
||||||
<span class="text-xs text-on-surface-variant">15 minuten geleden</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<div class="flex-shrink-0 w-2 h-2 mt-2 rounded-full bg-secondary"></div>
|
|
||||||
<div>
|
|
||||||
<p class="text-sm text-on-surface leading-snug"><b>Nginx</b> certificaat succesvol vernieuwd.</p>
|
|
||||||
<span class="text-xs text-on-surface-variant">1 uur geleden</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<div class="flex-shrink-0 w-2 h-2 mt-2 rounded-full bg-primary"></div>
|
|
||||||
<div>
|
|
||||||
<p class="text-sm text-on-surface leading-snug">Systeem update <b>v6.12.5</b> beschikbaar.</p>
|
|
||||||
<span class="text-xs text-on-surface-variant">3 uur geleden</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="w-full mt-8 py-2 text-primary font-bold text-sm border border-primary/20 rounded-lg hover:bg-primary/5 transition-colors">Bekijk alle logs</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- FAB for quick action (aligned with dashboard primary purpose) -->
|
|
||||||
<button class="fixed bottom-8 right-8 w-14 h-14 bg-primary text-white rounded-full shadow-2xl flex items-center justify-center hover:scale-110 active:scale-95 transition-all z-[60] group">
|
|
||||||
<span class="material-symbols-outlined text-3xl">add</span>
|
|
||||||
<span class="absolute right-16 bg-inverse-surface text-inverse-on-surface px-4 py-2 rounded-lg text-sm font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap shadow-lg">Nieuwe Container</span>
|
|
||||||
</button>
|
|
||||||
<!-- Mobile Bottom Navigation Shell -->
|
|
||||||
<nav class="fixed bottom-0 left-0 w-full h-16 bg-surface-container-lowest border-t border-outline-variant/30 flex md:hidden items-center justify-around z-50">
|
|
||||||
<button class="flex flex-col items-center gap-1 text-primary">
|
|
||||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">dashboard</span>
|
|
||||||
<span class="text-[10px] font-bold">Dashboard</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">memory</span>
|
|
||||||
<span class="text-[10px] font-bold">Systeem</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">storage</span>
|
|
||||||
<span class="text-[10px] font-bold">Opslag</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="text-[10px] font-bold">Instellingen</span>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
<script>
|
|
||||||
// Simple micro-interaction for cards
|
|
||||||
document.querySelectorAll('.app-card-hover').forEach(card => {
|
|
||||||
card.addEventListener('mouseenter', () => {
|
|
||||||
// Potential for adding visual flare here
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 276 KiB |
-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>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 176 KiB |
-350
@@ -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&family=Inter:wght@400;500;600&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"/>
|
|
||||||
<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>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 178 KiB |
-433
@@ -1,433 +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 | 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=Inter:wght@400;500&family=Geist:wght@400;500;600&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": {
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"surface-container-high": "#222a3d",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"tertiary": "#ffb783",
|
|
||||||
"surface-container-lowest": "#060e20",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"outline": "#908fa0",
|
|
||||||
"outline-variant": "#464554",
|
|
||||||
"on-primary": "#1000a9",
|
|
||||||
"on-tertiary-fixed-variant": "#703700",
|
|
||||||
"on-tertiary-fixed": "#301400",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"tertiary-fixed": "#ffdcc5",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"primary-container": "#8083ff",
|
|
||||||
"tertiary-container": "#d97721",
|
|
||||||
"surface-bright": "#31394d",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"primary-fixed-dim": "#c0c1ff",
|
|
||||||
"on-surface-variant": "#c7c4d7",
|
|
||||||
"inverse-surface": "#dae2fd",
|
|
||||||
"on-primary-container": "#0d0096",
|
|
||||||
"on-primary-fixed-variant": "#2f2ebe",
|
|
||||||
"tertiary-fixed-dim": "#ffb783",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"inverse-on-surface": "#283044",
|
|
||||||
"on-tertiary-container": "#452000",
|
|
||||||
"on-primary-fixed": "#07006c",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"inverse-primary": "#494bd6",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"on-surface": "#dae2fd",
|
|
||||||
"on-background": "#dae2fd",
|
|
||||||
"surface-tint": "#c0c1ff",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"primary": "#c0c1ff",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-tertiary": "#4f2500",
|
|
||||||
"primary-fixed": "#e1e0ff"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.25rem",
|
|
||||||
"lg": "0.5rem",
|
|
||||||
"xl": "0.75rem",
|
|
||||||
"full": "9999px"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"margin-mobile": "16px",
|
|
||||||
"stack-md": "24px",
|
|
||||||
"gutter": "24px",
|
|
||||||
"margin-desktop": "40px",
|
|
||||||
"container-max": "1440px",
|
|
||||||
"base": "8px",
|
|
||||||
"stack-lg": "48px",
|
|
||||||
"stack-sm": "12px"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"body-lg": ["Inter"],
|
|
||||||
"code-sm": ["Geist"],
|
|
||||||
"label-md": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"headline-lg-mobile": ["Geist"],
|
|
||||||
"body-md": ["Inter"],
|
|
||||||
"display-lg": ["Geist"],
|
|
||||||
"headline-lg": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"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-md": ["24px", {"lineHeight": "32px", "fontWeight": "500"}],
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background-color: #0b1326;
|
|
||||||
color: #dae2fd;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(15, 23, 42, 0.6);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(30, 41, 59, 0.5);
|
|
||||||
}
|
|
||||||
.status-pulse {
|
|
||||||
animation: pulse 2s infinite ease-in-out;
|
|
||||||
}
|
|
||||||
@keyframes pulse {
|
|
||||||
0%, 100% { opacity: 1; transform: scale(1); }
|
|
||||||
50% { opacity: 0.6; transform: scale(0.9); }
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
.active-dot { background-color: #4edea3; box-shadow: 0 0 8px #4edea3; }
|
|
||||||
.offline-dot { background-color: #ffb4ab; }
|
|
||||||
.degraded-dot { background-color: #ffb783; }
|
|
||||||
|
|
||||||
.container-card:hover {
|
|
||||||
background-color: rgba(45, 52, 73, 0.5);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="font-body-md overflow-x-hidden">
|
|
||||||
<!-- TopNavBar -->
|
|
||||||
<nav class="bg-background/80 dark:bg-background/80 backdrop-blur-md border-b border-outline-variant/30 docked full-width top-0 sticky z-50">
|
|
||||||
<div class="flex justify-between items-center h-16 px-gutter max-w-container-max mx-auto w-full">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<img alt="DockDeck Logo" class="h-8 w-8 object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCFUPk1Fi-n5Yb8aX331QJdGyRRnjF81_0vzaT4NtZx5LdqRKBE5Oi7nO3MRbUH25v7ZyxcCvY_OVe25VpOZui4AR8sNtlStDfOrskUE8JQXf4Ivbunn8cW65rlTcGLSwJ31kDl3Vh_wRWmfHs1xhh11XbkN947oRvD20byYw23cW-WVE9OCjUghFezkzjJ6_pEkmqrLOEDtJaHFlp_fR4hAwdPypDMOUftW3zX4DqenYbusFi7d-jEFmmZE894fbdkRE5UowA0pMER"/>
|
|
||||||
<span class="font-headline-md text-headline-md font-semibold text-primary dark:text-primary">DockDeck</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex flex-1 max-w-xl mx-8">
|
|
||||||
<div class="relative w-full">
|
|
||||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
|
||||||
<input class="w-full bg-surface-container-low border border-outline-variant/30 rounded-xl py-2 pl-10 pr-4 focus:ring-2 focus:ring-primary-container outline-none transition-all font-body-md" placeholder="Zoek in apps en favorieten..." type="text"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-base">
|
|
||||||
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high/50 rounded-full transition-colors">
|
|
||||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high/50 rounded-full transition-colors">
|
|
||||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
||||||
</button>
|
|
||||||
<div class="w-8 h-8 rounded-full bg-primary-container flex items-center justify-center ml-2">
|
|
||||||
<span class="material-symbols-outlined text-on-primary-container text-sm">person</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- Side Navigation Placeholder (Hidden on Mobile, simplified for this layout) -->
|
|
||||||
<aside class="hidden xl:flex h-screen w-64 flex-col fixed left-0 top-16 bg-surface-container-low border-r border-outline-variant/20 p-4 gap-stack-sm">
|
|
||||||
<a class="bg-secondary-container text-on-secondary-container rounded-xl font-medium flex items-center gap-3 px-4 py-3 transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
|
||||||
<span class="font-label-md text-label-md">Overzicht</span>
|
|
||||||
</a>
|
|
||||||
<a class="text-on-surface-variant hover:bg-surface-variant/50 rounded-xl flex items-center gap-3 px-4 py-3 transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="play_circle">play_circle</span>
|
|
||||||
<span class="font-label-md text-label-md">Media</span>
|
|
||||||
</a>
|
|
||||||
<a class="text-on-surface-variant hover:bg-surface-variant/50 rounded-xl flex items-center gap-3 px-4 py-3 transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="home_iot_device">home_iot_device</span>
|
|
||||||
<span class="font-label-md text-label-md">Smart Home</span>
|
|
||||||
</a>
|
|
||||||
<a class="text-on-surface-variant hover:bg-surface-variant/50 rounded-xl flex items-center gap-3 px-4 py-3 transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="memory">memory</span>
|
|
||||||
<span class="font-label-md text-label-md">Systeem</span>
|
|
||||||
</a>
|
|
||||||
<div class="mt-auto pt-4 border-t border-outline-variant/10 flex flex-col gap-2">
|
|
||||||
<a class="text-on-surface-variant hover:bg-surface-variant/50 rounded-xl flex items-center gap-3 px-4 py-2 transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="help">help</span>
|
|
||||||
<span class="font-label-md text-label-md text-sm">Hulp</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content Canvas -->
|
|
||||||
<main class="xl:ml-64 p-margin-mobile md:p-margin-desktop min-h-screen">
|
|
||||||
<div class="max-w-container-max mx-auto flex flex-col gap-stack-lg">
|
|
||||||
<!-- Header Section -->
|
|
||||||
<header class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 class="font-headline-lg text-headline-lg text-on-surface">Goedenavond, beheerder</h1>
|
|
||||||
<p class="text-on-surface-variant font-body-md mt-1" id="current-date">Donderdag, 24 Augustus 2023</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<button class="bg-primary text-on-primary px-4 py-2 rounded-xl font-label-md flex items-center gap-2 hover:brightness-110 active:scale-95 transition-all">
|
|
||||||
<span class="material-symbols-outlined text-[20px]">add</span>
|
|
||||||
Nieuwe Container
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- Grid of Categories -->
|
|
||||||
<div class="space-y-stack-lg">
|
|
||||||
<!-- Category: Media -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<span class="material-symbols-outlined text-primary" data-icon="movie">movie</span>
|
|
||||||
<h2 class="font-headline-md text-headline-md">Media</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-gutter">
|
|
||||||
<!-- App Tile: Plex -->
|
|
||||||
<div class="container-card glass-panel p-4 rounded-xl transition-all flex flex-col gap-3 group cursor-pointer">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-highest flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-tertiary text-3xl">play_arrow</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1.5 bg-secondary-container/10 px-2 py-0.5 rounded-full border border-secondary/20">
|
|
||||||
<div class="w-2 h-2 rounded-full active-dot status-pulse"></div>
|
|
||||||
<span class="text-[10px] uppercase font-bold text-secondary tracking-wider">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-label-md text-on-surface group-hover:text-primary transition-colors">Plex</h3>
|
|
||||||
<p class="text-[12px] text-on-surface-variant">Media Server</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- App Tile: Jellyfin -->
|
|
||||||
<div class="container-card glass-panel p-4 rounded-xl transition-all flex flex-col gap-3 group cursor-pointer">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-highest flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl">filter_vintage</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1.5 bg-secondary-container/10 px-2 py-0.5 rounded-full border border-secondary/20">
|
|
||||||
<div class="w-2 h-2 rounded-full active-dot status-pulse"></div>
|
|
||||||
<span class="text-[10px] uppercase font-bold text-secondary tracking-wider">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-label-md text-on-surface group-hover:text-primary transition-colors">Jellyfin</h3>
|
|
||||||
<p class="text-[12px] text-on-surface-variant">Open Source Media</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- App Tile: Sonarr -->
|
|
||||||
<div class="container-card glass-panel p-4 rounded-xl transition-all flex flex-col gap-3 group cursor-pointer opacity-80 border-dashed border-outline-variant/50">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-highest/50 flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-3xl">tv</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1.5 bg-error-container/10 px-2 py-0.5 rounded-full border border-error/20">
|
|
||||||
<div class="w-2 h-2 rounded-full offline-dot"></div>
|
|
||||||
<span class="text-[10px] uppercase font-bold text-error tracking-wider">Offline</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-label-md text-on-surface-variant">Sonarr</h3>
|
|
||||||
<p class="text-[12px] text-on-surface-variant">TV Series Manager</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Category: Smart Home -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<span class="material-symbols-outlined text-primary" data-icon="bolt">bolt</span>
|
|
||||||
<h2 class="font-headline-md text-headline-md">Smart Home</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-gutter">
|
|
||||||
<div class="container-card glass-panel p-4 rounded-xl transition-all flex flex-col gap-3 group cursor-pointer">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-highest flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-secondary text-3xl">house</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1.5 bg-tertiary-container/10 px-2 py-0.5 rounded-full border border-tertiary/20">
|
|
||||||
<div class="w-2 h-2 rounded-full degraded-dot status-pulse"></div>
|
|
||||||
<span class="text-[10px] uppercase font-bold text-tertiary tracking-wider">Degraded</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-label-md text-on-surface group-hover:text-primary transition-colors">Home Assistant</h3>
|
|
||||||
<p class="text-[12px] text-on-surface-variant">Automatisering</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="container-card glass-panel p-4 rounded-xl transition-all flex flex-col gap-3 group cursor-pointer">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-highest flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-on-primary-container text-3xl">shield</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1.5 bg-secondary-container/10 px-2 py-0.5 rounded-full border border-secondary/20">
|
|
||||||
<div class="w-2 h-2 rounded-full active-dot status-pulse"></div>
|
|
||||||
<span class="text-[10px] uppercase font-bold text-secondary tracking-wider">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-label-md text-on-surface group-hover:text-primary transition-colors">AdGuard Home</h3>
|
|
||||||
<p class="text-[12px] text-on-surface-variant">DNS Filtering</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Category: Downloads & Netwerk (Compact Row) -->
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-stack-lg">
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<span class="material-symbols-outlined text-primary" data-icon="download">download</span>
|
|
||||||
<h2 class="font-headline-md text-headline-md">Downloads</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-gutter">
|
|
||||||
<div class="container-card glass-panel p-4 rounded-xl flex items-center gap-4 group cursor-pointer">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-on-surface text-xl">download_done</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<h3 class="font-label-md">qBittorrent</h3>
|
|
||||||
<div class="flex items-center gap-2 mt-0.5">
|
|
||||||
<div class="w-1.5 h-1.5 rounded-full active-dot"></div>
|
|
||||||
<span class="text-[11px] text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="container-card glass-panel p-4 rounded-xl flex items-center gap-4 group cursor-pointer">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-on-surface text-xl">movie_filter</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<h3 class="font-label-md">Radarr</h3>
|
|
||||||
<div class="flex items-center gap-2 mt-0.5">
|
|
||||||
<div class="w-1.5 h-1.5 rounded-full active-dot"></div>
|
|
||||||
<span class="text-[11px] text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<span class="material-symbols-outlined text-primary" data-icon="lan">lan</span>
|
|
||||||
<h2 class="font-headline-md text-headline-md">Netwerk</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-gutter">
|
|
||||||
<div class="container-card glass-panel p-4 rounded-xl flex items-center gap-4 group cursor-pointer">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-on-surface text-xl">settings_ethernet</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<h3 class="font-label-md text-sm">Nginx Proxy</h3>
|
|
||||||
<div class="flex items-center gap-2 mt-0.5">
|
|
||||||
<div class="w-1.5 h-1.5 rounded-full active-dot"></div>
|
|
||||||
<span class="text-[11px] text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="container-card glass-panel p-4 rounded-xl flex items-center gap-4 group cursor-pointer">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-on-surface text-xl">key</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<h3 class="font-label-md text-sm">Vaultwarden</h3>
|
|
||||||
<div class="flex items-center gap-2 mt-0.5">
|
|
||||||
<div class="w-1.5 h-1.5 rounded-full active-dot"></div>
|
|
||||||
<span class="text-[11px] text-on-surface-variant">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<!-- Favorieten Sectie -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<span class="material-symbols-outlined text-tertiary" data-icon="star" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
||||||
<h2 class="font-headline-md text-headline-md">Favorieten</h2>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-wrap gap-4">
|
|
||||||
<a class="glass-panel px-6 py-3 rounded-full flex items-center gap-3 hover:bg-surface-variant/40 transition-all border-none" href="https://google.com" target="_blank">
|
|
||||||
<div class="w-5 h-5 bg-contain bg-center bg-no-repeat" data-alt="A clean, minimalist logo of Google with vibrant multi-colored letters set against a dark, tech-oriented professional background. High-key lighting effects create a sophisticated brand presentation for a modern software environment. Core modernist aesthetic with deep shadows and sharp edges." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAvnfEv8LirHPPHWSL7UbBuOQNfFxqmX1dy21n_-I7pTPYnkR1I1B8p2k2Mx45dVm9xXP1d8lKMvDy6ALV6yXHfd4EXPbe18y0auqvan6K67z_iC7ESgzSK9bfdUCtACA63Fp-UPA0Svz9luoHIKDsxGsHBhieMS9gKidGIpqTrrf7ZvXOkRISyVcvrvm5sSUpMIldf6pYrsUBf-EMhHhZhz_6WPW2OupTpE2x5utvkjbRZDup8GNzlos06BtuSy2kihhq_UYZ8XAFO')"></div>
|
|
||||||
<span class="font-label-md">Google</span>
|
|
||||||
</a>
|
|
||||||
<a class="glass-panel px-6 py-3 rounded-full flex items-center gap-3 hover:bg-surface-variant/40 transition-all border-none" href="https://youtube.com" target="_blank">
|
|
||||||
<div class="w-5 h-5 bg-contain bg-center bg-no-repeat" data-alt="A premium 3D render of the YouTube logo with a subtle gloss finish. The iconic red play button is centered perfectly, glowing slightly under cinematic studio lighting. Minimalist workspace background with indigo accents. High quality technical workspace visual style." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuD4LdXsZqQ29onlikF3ZJF8WAIkh2G5CSz4VXhFbC37cMd_DO3tLjc-cJFrCJy_raANqYkABPj-PqrWemDkCAVEq6idvxt10c36Aqm5brfNfdKbtHNRVzpTd6wBwTPD5RasyVYk8cc4Ty7CYvZ8U6So7sT1v2g0u9CY3vE0_X9o-x_81VHn1gr0by6bn9rVM67eTBj2JWePjSuHOCUbfFH0wmCzIpSxyp_Z5jeT2bn5qLgT6bx2x3Gr9fBBAc7oUEn9HZqq_r-TNA8P')"></div>
|
|
||||||
<span class="font-label-md">YouTube</span>
|
|
||||||
</a>
|
|
||||||
<a class="glass-panel px-6 py-3 rounded-full flex items-center gap-3 hover:bg-surface-variant/40 transition-all border-none" href="https://github.com" target="_blank">
|
|
||||||
<div class="w-5 h-5 bg-contain bg-center bg-no-repeat" data-alt="A sleek GitHub Octocat logo rendered in a polished matte white finish. The silhouette stands out against a deep navy blue background, illuminated by soft rim lighting. The style is modernist and professional, fitting for a high-end developer dashboard ecosystem." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuC20FnftZ7bz06us4GnUdiw_eMWGZKiywRzpxIN5q2hFsA6mJueKMC-q125Ds6BXMgE5yRu72qIY4NsMYbn8afbN7IBwIskPKU4ZAfrsO0KdoTvvH4lrZ140aX5zKAlT1_7Vr9W5xOKIWqyCIZzx281YompDTva_61r8COIaoEzvcpMayYsyMH4_wQJNAOxoMPLBIx-4PXt2OLtLQ2VusOsVvVmGBSVgD4rJhXLyQ7frK__ipT0LdOOSOzO_B9Hdpg6r6inYNxOrIXG')"></div>
|
|
||||||
<span class="font-label-md">GitHub</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<!-- Footer Status Bar -->
|
|
||||||
<footer class="mt-auto pt-stack-lg border-t border-outline-variant/10">
|
|
||||||
<div class="flex flex-col md:flex-row justify-between items-center gap-4 text-on-surface-variant">
|
|
||||||
<div class="flex items-center gap-3 font-body-md">
|
|
||||||
<span class="flex items-center gap-1.5">
|
|
||||||
<div class="w-2 h-2 rounded-full active-dot"></div>
|
|
||||||
Docker Verbonden
|
|
||||||
</span>
|
|
||||||
<span class="text-outline-variant">•</span>
|
|
||||||
<span>Laatste sync: 2 min geleden</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-6 text-[12px] uppercase tracking-widest font-bold">
|
|
||||||
<a class="hover:text-primary transition-colors" href="#">API Status</a>
|
|
||||||
<a class="hover:text-primary transition-colors" href="#">Privacy</a>
|
|
||||||
<a class="hover:text-primary transition-colors" href="#">DockDeck v2.4.1</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<script>
|
|
||||||
// Update current date in Dutch
|
|
||||||
function updateDate() {
|
|
||||||
const dateEl = document.getElementById('current-date');
|
|
||||||
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
|
||||||
const today = new Date();
|
|
||||||
const dateStr = today.toLocaleDateString('nl-NL', options);
|
|
||||||
dateEl.textContent = dateStr.charAt(0).toUpperCase() + dateStr.slice(1);
|
|
||||||
}
|
|
||||||
updateDate();
|
|
||||||
|
|
||||||
// Micro-interaction: Search focus effect
|
|
||||||
const searchInput = document.querySelector('input[type="text"]');
|
|
||||||
searchInput.addEventListener('focus', () => {
|
|
||||||
searchInput.closest('div').classList.add('scale-[1.01]');
|
|
||||||
searchInput.closest('div').classList.add('shadow-lg');
|
|
||||||
});
|
|
||||||
searchInput.addEventListener('blur', () => {
|
|
||||||
searchInput.closest('div').classList.remove('scale-[1.01]');
|
|
||||||
searchInput.closest('div').classList.remove('shadow-lg');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 233 KiB |
-440
@@ -1,440 +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 | Dashboard</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"/>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"on-surface-variant": "#c7c4d7",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"tertiary-container": "#d97721",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"on-secondary-fixed": "#002114",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"primary-container": "#8a8cc6",
|
|
||||||
"on-primary-container": "#222457",
|
|
||||||
"inverse-primary": "#585990",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"tertiary": "#ffb783",
|
|
||||||
"primary-fixed-dim": "#c0c1ff",
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary-container": "#00b47d",
|
|
||||||
"on-primary-fixed-variant": "#404176",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"on-tertiary-container": "#452000",
|
|
||||||
"on-tertiary-fixed": "#301400",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"primary": "#c0c1ff",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"outline-variant": "rgba(30, 41, 59, 0.5)",
|
|
||||||
"tertiary-fixed-dim": "#ffb783",
|
|
||||||
"surface-tint": "#c0c1ff",
|
|
||||||
"tertiary-fixed": "#ffdcc5",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"primary-fixed": "#e1e0ff",
|
|
||||||
"on-secondary-container": "#003e28",
|
|
||||||
"outline": "#908fa0",
|
|
||||||
"on-primary-fixed": "#131449",
|
|
||||||
"status-offline": "#ffb4ab",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"on-tertiary-fixed-variant": "#703700",
|
|
||||||
"status-degraded": "#ffb783",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"surface-glass": "rgba(15, 23, 42, 0.6)",
|
|
||||||
"on-tertiary": "#4f2500",
|
|
||||||
"status-online": "#4edea3",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"inverse-on-surface": "#283044",
|
|
||||||
"on-primary": "#292b5e"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.25rem",
|
|
||||||
"lg": "0.5rem",
|
|
||||||
"xl": "0.75rem",
|
|
||||||
"full": "9999px"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"gutter": "24px",
|
|
||||||
"margin-desktop": "40px",
|
|
||||||
"stack-lg": "48px",
|
|
||||||
"base": "8px",
|
|
||||||
"margin-mobile": "16px",
|
|
||||||
"stack-md": "24px",
|
|
||||||
"container-max": "1440px",
|
|
||||||
"stack-sm": "12px"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"headline-lg-mobile": ["Geist"],
|
|
||||||
"label-md": ["Geist"],
|
|
||||||
"code-sm": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"display-lg": ["Geist"],
|
|
||||||
"body-lg": ["Inter"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"body-md": ["Inter"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
||||||
"label-md": ["14px", {"lineHeight": "20px", "letterSpacing": "0.02em", "fontWeight": "500"}],
|
|
||||||
"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;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
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);
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-panel:hover {
|
|
||||||
background: rgba(45, 52, 73, 0.5);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
border-color: rgba(99, 102, 241, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-dot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-online-dot {
|
|
||||||
background-color: #4edea3;
|
|
||||||
box-shadow: 0 0 8px #4edea3;
|
|
||||||
animation: pulse 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0% { transform: scale(1); opacity: 1; }
|
|
||||||
50% { transform: scale(1.2); opacity: 0.7; }
|
|
||||||
100% { transform: scale(1); opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-container:focus-within {
|
|
||||||
box-shadow: 0 0 0 2px #8a8cc6;
|
|
||||||
transform: scale(1.01);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Material Symbols weight settings */
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
.fill-icon {
|
|
||||||
font-variation-settings: 'FILL' 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-item-active {
|
|
||||||
background-color: #00b47d;
|
|
||||||
color: #003e28;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="min-h-screen flex flex-col md:flex-row">
|
|
||||||
<!-- Sidebar Navigation -->
|
|
||||||
<aside class="hidden xl:flex flex-col gap-base p-margin-mobile h-screen w-64 docked left-0 bg-surface-container-low border-r border-outline-variant sticky top-0">
|
|
||||||
<div class="mb-stack-md px-2">
|
|
||||||
<img alt="DockDeck Logo" class="h-10 w-auto object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuARFmQsJNz9lu_scBfpGoziJcpALmL8l2l3ZlVf_OIGLaBjpbegIzdvoCKv6mqg6RikG1n2hCh4Mdafsdgz1an2ngqLsQcVHpwUBpwtHCnV-rfdD6yuV6pHIRf-YHCDFF7Fdj0eUXtzx9QPMBx4EoqFHi9yScPNpJZqF2l4W_Zkz-iGUMQJCkXJfFlR-S8gOabCnmIMEy6LZ794BCzI-BBGR7Hzuwtvmv83KqdS-tS-5E7g5JofB4K0eeTgBYTEKx2MiFTbj5m-_lux"/>
|
|
||||||
</div>
|
|
||||||
<nav class="flex flex-col gap-1">
|
|
||||||
<a class="sidebar-item-active flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined">dashboard</span>
|
|
||||||
<span class="font-label-md text-label-md">Algemeen</span>
|
|
||||||
</a>
|
|
||||||
<a class="text-on-surface-variant hover:bg-surface-variant/30 flex items-center gap-3 px-4 py-3 rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined group-hover:translate-x-1 duration-200">apps</span>
|
|
||||||
<span class="font-label-md text-label-md">Apps</span>
|
|
||||||
</a>
|
|
||||||
<a class="text-on-surface-variant hover:bg-surface-variant/30 flex items-center gap-3 px-4 py-3 rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined group-hover:translate-x-1 duration-200">star</span>
|
|
||||||
<span class="font-label-md text-label-md">Favorieten</span>
|
|
||||||
</a>
|
|
||||||
<a class="text-on-surface-variant hover:bg-surface-variant/30 flex items-center gap-3 px-4 py-3 rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined group-hover:translate-x-1 duration-200">category</span>
|
|
||||||
<span class="font-label-md text-label-md">Categorieën</span>
|
|
||||||
</a>
|
|
||||||
<a class="text-on-surface-variant hover:bg-surface-variant/30 flex items-center gap-3 px-4 py-3 rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined group-hover:translate-x-1 duration-200">palette</span>
|
|
||||||
<span class="font-label-md text-label-md">Weergave</span>
|
|
||||||
</a>
|
|
||||||
<a class="text-on-surface-variant hover:bg-surface-variant/30 flex items-center gap-3 px-4 py-3 rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined group-hover:translate-x-1 duration-200">extension</span>
|
|
||||||
<span class="font-label-md text-label-md">Integraties</span>
|
|
||||||
</a>
|
|
||||||
<a class="text-on-surface-variant hover:bg-surface-variant/30 flex items-center gap-3 px-4 py-3 rounded-lg transition-all group" href="#">
|
|
||||||
<span class="material-symbols-outlined group-hover:translate-x-1 duration-200">backup</span>
|
|
||||||
<span class="font-label-md text-label-md">Back-up</span>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
<div class="mt-auto pt-stack-md border-t border-outline-variant px-2">
|
|
||||||
<h3 class="font-label-md text-label-md font-bold text-primary">Instellingen</h3>
|
|
||||||
<p class="text-xs text-on-surface-variant">Beheer uw dashboard</p>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content Area -->
|
|
||||||
<main class="flex-1 flex flex-col min-w-0">
|
|
||||||
<!-- Top Navigation / Search -->
|
|
||||||
<header class="bg-surface-glass backdrop-blur-md border-b border-outline-variant shadow-sm sticky top-0 z-50">
|
|
||||||
<div class="flex justify-between items-center w-full px-gutter h-16 max-w-container-max mx-auto">
|
|
||||||
<div class="flex items-center gap-stack-md flex-1">
|
|
||||||
<img alt="Logo" class="h-8 xl:hidden" src="https://lh3.googleusercontent.com/aida-public/AB6AXuARFmQsJNz9lu_scBfpGoziJcpALmL8l2l3ZlVf_OIGLaBjpbegIzdvoCKv6mqg6RikG1n2hCh4Mdafsdgz1an2ngqLsQcVHpwUBpwtHCnV-rfdD6yuV6pHIRf-YHCDFF7Fdj0eUXtzx9QPMBx4EoqFHi9yScPNpJZqF2l4W_Zkz-iGUMQJCkXJfFlR-S8gOabCnmIMEy6LZ794BCzI-BBGR7Hzuwtvmv83KqdS-tS-5E7g5JofB4K0eeTgBYTEKx2MiFTbj5m-_lux"/>
|
|
||||||
<div class="search-container bg-surface-container-low flex items-center px-4 py-2 rounded-full w-full max-w-xl transition-all duration-300">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant mr-3">search</span>
|
|
||||||
<input class="bg-transparent border-none focus:ring-0 text-on-surface font-body-md text-body-md w-full placeholder-on-surface-variant/50" placeholder="Quick Launch..." type="text"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<button class="hover:bg-surface-variant/50 p-2 rounded-full transition-all active:scale-95">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">notifications</span>
|
|
||||||
</button>
|
|
||||||
<button class="hover:bg-surface-variant/50 p-2 rounded-full transition-all active:scale-95">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">settings</span>
|
|
||||||
</button>
|
|
||||||
<div class="h-8 w-8 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container font-bold text-xs">
|
|
||||||
AD
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- Dashboard Canvas -->
|
|
||||||
<div class="flex-1 px-margin-mobile md:px-margin-desktop py-stack-md md:py-stack-lg max-w-container-max mx-auto w-full">
|
|
||||||
<!-- Greeting -->
|
|
||||||
<section class="mb-stack-lg">
|
|
||||||
<h1 class="font-headline-lg text-headline-lg text-on-surface">Goedenavond, beheerder</h1>
|
|
||||||
<p class="font-body-md text-body-md text-on-surface-variant mt-1" id="date-display">Donderdag, 24 Augustus 2023</p>
|
|
||||||
</section>
|
|
||||||
<!-- Favorites Section -->
|
|
||||||
<section class="mb-stack-lg">
|
|
||||||
<div class="flex items-center justify-between mb-stack-md">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-primary flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined fill-icon">star</span>
|
|
||||||
Favorieten
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-gutter">
|
|
||||||
<!-- Google -->
|
|
||||||
<a class="glass-panel p-stack-md rounded-xl flex items-center gap-4" href="#">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-highest flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-2xl">language</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<h3 class="font-label-md text-label-md text-on-surface">Google</h3>
|
|
||||||
<p class="text-xs text-on-surface-variant">Zoekmachine</p>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-sm">open_in_new</span>
|
|
||||||
</a>
|
|
||||||
<!-- YouTube -->
|
|
||||||
<a class="glass-panel p-stack-md rounded-xl flex items-center gap-4" href="#">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-highest flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-2xl">play_circle</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<h3 class="font-label-md text-label-md text-on-surface">YouTube</h3>
|
|
||||||
<p class="text-xs text-on-surface-variant">Video platform</p>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-sm">open_in_new</span>
|
|
||||||
</a>
|
|
||||||
<!-- GitHub -->
|
|
||||||
<a class="glass-panel p-stack-md rounded-xl flex items-center gap-4" href="#">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-highest flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-2xl">terminal</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<h3 class="font-label-md text-label-md text-on-surface">GitHub</h3>
|
|
||||||
<p class="text-xs text-on-surface-variant">Source control</p>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-sm">open_in_new</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Categories & Apps Grid -->
|
|
||||||
<div class="flex flex-col gap-stack-lg">
|
|
||||||
<!-- Media Section -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center gap-2 mb-stack-md border-l-4 border-secondary pl-3">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-on-surface">Media</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-gutter">
|
|
||||||
<!-- Plex -->
|
|
||||||
<div class="glass-panel p-gutter rounded-xl flex flex-col items-center text-center relative group cursor-pointer">
|
|
||||||
<div class="absolute top-3 right-3 flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-secondary/10 border border-secondary/20">
|
|
||||||
<div class="active-dot status-online-dot"></div>
|
|
||||||
<span class="text-[10px] font-bold text-secondary uppercase tracking-wider">Online</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-16 h-16 rounded-2xl bg-surface-container-high flex items-center justify-center mb-4 transition-transform group-hover:scale-110">
|
|
||||||
<span class="material-symbols-outlined text-4xl text-primary">movie</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-label-md text-label-md text-on-surface font-bold">Plex</h3>
|
|
||||||
<p class="text-xs text-on-surface-variant mt-1">Media Server</p>
|
|
||||||
</div>
|
|
||||||
<!-- Overseerr -->
|
|
||||||
<div class="glass-panel p-gutter rounded-xl flex flex-col items-center text-center relative group cursor-pointer">
|
|
||||||
<div class="absolute top-3 right-3 flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-secondary/10 border border-secondary/20">
|
|
||||||
<div class="active-dot status-online-dot"></div>
|
|
||||||
<span class="text-[10px] font-bold text-secondary uppercase tracking-wider">Online</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-16 h-16 rounded-2xl bg-surface-container-high flex items-center justify-center mb-4 transition-transform group-hover:scale-110">
|
|
||||||
<span class="material-symbols-outlined text-4xl text-primary">shopping_cart</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-label-md text-label-md text-on-surface font-bold">Overseerr</h3>
|
|
||||||
<p class="text-xs text-on-surface-variant mt-1">Requests</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Smart Home Section -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center gap-2 mb-stack-md border-l-4 border-tertiary pl-3">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-on-surface">Smart Home</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-gutter">
|
|
||||||
<!-- Home Assistant -->
|
|
||||||
<div class="glass-panel p-gutter rounded-xl flex flex-col items-center text-center relative group cursor-pointer">
|
|
||||||
<div class="absolute top-3 right-3 flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-error/10 border border-error/20">
|
|
||||||
<div class="active-dot bg-status-offline"></div>
|
|
||||||
<span class="text-[10px] font-bold text-status-offline uppercase tracking-wider">Offline</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-16 h-16 rounded-2xl bg-surface-container-high flex items-center justify-center mb-4 transition-transform group-hover:scale-110">
|
|
||||||
<span class="material-symbols-outlined text-4xl text-tertiary">home</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-label-md text-label-md text-on-surface font-bold">Home Assistant</h3>
|
|
||||||
<p class="text-xs text-on-surface-variant mt-1">Automation Hub</p>
|
|
||||||
</div>
|
|
||||||
<!-- Zigbee2MQTT -->
|
|
||||||
<div class="glass-panel p-gutter rounded-xl flex flex-col items-center text-center relative group cursor-pointer">
|
|
||||||
<div class="absolute top-3 right-3 flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-on-surface-variant/10 border border-on-surface-variant/20">
|
|
||||||
<div class="active-dot bg-outline"></div>
|
|
||||||
<span class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider">Onbekend</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-16 h-16 rounded-2xl bg-surface-container-high flex items-center justify-center mb-4 transition-transform group-hover:scale-110">
|
|
||||||
<span class="material-symbols-outlined text-4xl text-tertiary">hub</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-label-md text-label-md text-on-surface font-bold">Zigbee2MQTT</h3>
|
|
||||||
<p class="text-xs text-on-surface-variant mt-1">Bridge</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Netwerk Section -->
|
|
||||||
<section>
|
|
||||||
<div class="flex items-center gap-2 mb-stack-md border-l-4 border-primary pl-3">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-on-surface">Netwerk</h2>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-gutter">
|
|
||||||
<!-- Sonarr -->
|
|
||||||
<div class="glass-panel p-gutter rounded-xl flex flex-col items-center text-center relative group cursor-pointer">
|
|
||||||
<div class="absolute top-3 right-3 flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-secondary/10 border border-secondary/20">
|
|
||||||
<div class="active-dot status-online-dot"></div>
|
|
||||||
<span class="text-[10px] font-bold text-secondary uppercase tracking-wider">Online</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-16 h-16 rounded-2xl bg-surface-container-high flex items-center justify-center mb-4 transition-transform group-hover:scale-110">
|
|
||||||
<span class="material-symbols-outlined text-4xl text-primary-fixed-dim">tv</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-label-md text-label-md text-on-surface font-bold">Sonarr</h3>
|
|
||||||
<p class="text-xs text-on-surface-variant mt-1">TV Management</p>
|
|
||||||
</div>
|
|
||||||
<!-- Pi-hole -->
|
|
||||||
<div class="glass-panel p-gutter rounded-xl flex flex-col items-center text-center relative group cursor-pointer">
|
|
||||||
<div class="absolute top-3 right-3 flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-secondary/10 border border-secondary/20">
|
|
||||||
<div class="active-dot status-online-dot"></div>
|
|
||||||
<span class="text-[10px] font-bold text-secondary uppercase tracking-wider">Online</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-16 h-16 rounded-2xl bg-surface-container-high flex items-center justify-center mb-4 transition-transform group-hover:scale-110">
|
|
||||||
<span class="material-symbols-outlined text-4xl text-primary-fixed-dim">shield</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-label-md text-label-md text-on-surface font-bold">Pi-hole</h3>
|
|
||||||
<p class="text-xs text-on-surface-variant mt-1">Ad Blocker</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<!-- Footer / Status Indicator -->
|
|
||||||
<footer class="mt-stack-lg border-t border-outline-variant pt-stack-md flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
||||||
<div class="flex items-center gap-3 bg-surface-container-low px-4 py-2 rounded-full border border-outline-variant/30">
|
|
||||||
<span class="material-symbols-outlined text-primary text-sm">inventory_2</span>
|
|
||||||
<p class="text-xs font-medium text-on-surface-variant">3 nieuwe containers ontdekt</p>
|
|
||||||
<a class="text-xs font-bold text-primary hover:underline ml-2" href="#">Beheer apps</a>
|
|
||||||
</div>
|
|
||||||
<div class="text-xs text-outline font-code-sm">
|
|
||||||
DockDeck v2.4.1-stable • System Up: 14d 2h 45m
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- Mobile Bottom Navigation -->
|
|
||||||
<nav class="md:hidden fixed bottom-0 left-0 right-0 bg-surface-glass backdrop-blur-lg border-t border-outline-variant flex justify-around items-center h-16 z-50">
|
|
||||||
<a class="flex flex-col items-center gap-1 text-primary" href="#">
|
|
||||||
<span class="material-symbols-outlined fill-icon">dashboard</span>
|
|
||||||
<span class="text-[10px] font-bold">Home</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
|
|
||||||
<span class="material-symbols-outlined">apps</span>
|
|
||||||
<span class="text-[10px]">Apps</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
|
|
||||||
<span class="material-symbols-outlined">search</span>
|
|
||||||
<span class="text-[10px]">Zoek</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
|
|
||||||
<span class="material-symbols-outlined">person</span>
|
|
||||||
<span class="text-[10px]">Profiel</span>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
<script>
|
|
||||||
// Update date display
|
|
||||||
function updateDate() {
|
|
||||||
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
|
||||||
const today = new Date();
|
|
||||||
const localeDate = today.toLocaleDateString('nl-NL', options);
|
|
||||||
const capitalized = localeDate.charAt(0).toUpperCase() + localeDate.slice(1);
|
|
||||||
document.getElementById('date-display').textContent = capitalized;
|
|
||||||
}
|
|
||||||
updateDate();
|
|
||||||
|
|
||||||
// Subtle micro-interaction for app tiles
|
|
||||||
document.querySelectorAll('.glass-panel').forEach(panel => {
|
|
||||||
panel.addEventListener('mousedown', () => {
|
|
||||||
panel.style.transform = 'scale(0.98) translateY(0px)';
|
|
||||||
});
|
|
||||||
panel.addEventListener('mouseup', () => {
|
|
||||||
panel.style.transform = 'translateY(-2px)';
|
|
||||||
});
|
|
||||||
panel.addEventListener('mouseleave', () => {
|
|
||||||
panel.style.transform = 'translateY(0px)';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 218 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 643 KiB |
-307
@@ -1,307 +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=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"/>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background-color: #0b1326;
|
|
||||||
margin: 0;
|
|
||||||
overflow: hidden; /* Prevent scrolling background */
|
|
||||||
}
|
|
||||||
.font-headline { font-family: 'Geist', sans-serif; }
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(15, 23, 42, 0.6);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(30, 41, 59, 0.5);
|
|
||||||
}
|
|
||||||
.active-dot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #4edea3;
|
|
||||||
box-shadow: 0 0 8px #4edea3;
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.command-palette-enter {
|
|
||||||
animation: commandPaletteEnter 0.2s ease-out forwards;
|
|
||||||
}
|
|
||||||
@keyframes commandPaletteEnter {
|
|
||||||
from { opacity: 0; transform: scale(0.98) translateY(-10px); }
|
|
||||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
||||||
}
|
|
||||||
.pulse-animation {
|
|
||||||
animation: pulse 2s infinite;
|
|
||||||
}
|
|
||||||
@keyframes pulse {
|
|
||||||
0% { transform: scale(1); opacity: 1; }
|
|
||||||
50% { transform: scale(1.2); opacity: 0.5; }
|
|
||||||
100% { transform: scale(1); opacity: 1; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"on-surface-variant": "#c7c4d7",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"tertiary-container": "#d97721",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"on-secondary-fixed": "#002114",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"primary-container": "#8a8cc6",
|
|
||||||
"on-primary-container": "#222457",
|
|
||||||
"inverse-primary": "#585990",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"tertiary": "#ffb783",
|
|
||||||
"primary-fixed-dim": "#c0c1ff",
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary-container": "#00b47d",
|
|
||||||
"on-primary-fixed-variant": "#404176",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"on-tertiary-container": "#452000",
|
|
||||||
"on-tertiary-fixed": "#301400",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"primary": "#c0c1ff",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"outline-variant": "rgba(30, 41, 59, 0.5)",
|
|
||||||
"tertiary-fixed-dim": "#ffb783",
|
|
||||||
"surface-tint": "#c0c1ff",
|
|
||||||
"tertiary-fixed": "#ffdcc5",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"primary-fixed": "#e1e0ff",
|
|
||||||
"on-secondary-container": "#003e28",
|
|
||||||
"outline": "#908fa0",
|
|
||||||
"on-primary-fixed": "#131449",
|
|
||||||
"status-offline": "#ffb4ab",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"on-tertiary-fixed-variant": "#703700",
|
|
||||||
"status-degraded": "#ffb783",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"surface-glass": "rgba(15, 23, 42, 0.6)",
|
|
||||||
"on-tertiary": "#4f2500",
|
|
||||||
"status-online": "#4edea3",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"inverse-on-surface": "#283044",
|
|
||||||
"on-primary": "#292b5e"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.25rem",
|
|
||||||
"lg": "0.5rem",
|
|
||||||
"xl": "0.75rem",
|
|
||||||
"full": "9999px"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"gutter": "24px",
|
|
||||||
"margin-desktop": "40px",
|
|
||||||
"stack-lg": "48px",
|
|
||||||
"base": "8px",
|
|
||||||
"margin-mobile": "16px",
|
|
||||||
"stack-md": "24px",
|
|
||||||
"container-max": "1440px",
|
|
||||||
"stack-sm": "12px"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"headline-lg-mobile": ["Geist"],
|
|
||||||
"label-md": ["Geist"],
|
|
||||||
"code-sm": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"display-lg": ["Geist"],
|
|
||||||
"body-lg": ["Inter"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"body-md": ["Inter"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
||||||
"label-md": ["14px", {"lineHeight": "20px", "letterSpacing": "0.02em", "fontWeight": "500"}],
|
|
||||||
"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>
|
|
||||||
</head>
|
|
||||||
<body class="text-on-surface">
|
|
||||||
<!-- Background Dashboard (Blurred) -->
|
|
||||||
<div class="fixed inset-0 z-0 overflow-hidden pointer-events-none opacity-40 blur-xl">
|
|
||||||
|
|
||||||
<!-- Mock UI Elements in Background -->
|
|
||||||
<div class="p-margin-desktop grid grid-cols-4 gap-gutter max-w-container-max mx-auto">
|
|
||||||
<div class="h-48 glass-panel rounded-xl"></div>
|
|
||||||
<div class="h-48 glass-panel rounded-xl"></div>
|
|
||||||
<div class="h-48 glass-panel rounded-xl"></div>
|
|
||||||
<div class="h-48 glass-panel rounded-xl"></div>
|
|
||||||
<div class="h-48 glass-panel rounded-xl"></div>
|
|
||||||
<div class="h-48 glass-panel rounded-xl"></div>
|
|
||||||
<div class="h-48 glass-panel rounded-xl"></div>
|
|
||||||
<div class="h-48 glass-panel rounded-xl"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Main Overlay Container -->
|
|
||||||
<div class="fixed inset-0 z-50 flex items-start justify-center pt-32 px-margin-mobile bg-surface-dim/60 backdrop-blur-sm">
|
|
||||||
<!-- Command Palette Wrapper -->
|
|
||||||
<div class="command-palette-enter w-full max-w-[640px] glass-panel rounded-2xl overflow-hidden shadow-2xl ring-1 ring-white/10">
|
|
||||||
<!-- Search Header -->
|
|
||||||
<div class="relative flex items-center p-4 border-b border-outline-variant bg-surface-container-low">
|
|
||||||
<span class="material-symbols-outlined text-primary mr-3 text-2xl" data-icon="search">search</span>
|
|
||||||
<input autofocus="" class="w-full bg-transparent border-none outline-none text-headline-md font-headline-md text-on-surface placeholder-on-surface-variant focus:ring-0" placeholder="Type om te zoeken..." type="text" value="PL"/>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<span class="px-2 py-1 bg-surface-variant text-[10px] font-bold text-on-surface-variant rounded border border-outline-variant uppercase">ESC</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Scrollable Results Content -->
|
|
||||||
<div class="max-h-[614px] overflow-y-auto scrollbar-hide py-2">
|
|
||||||
<!-- Group: Apps -->
|
|
||||||
<div class="px-3 mb-4">
|
|
||||||
<h3 class="px-3 py-2 text-label-md font-label-md text-primary/70 uppercase tracking-widest flex items-center">
|
|
||||||
<span class="material-symbols-outlined text-sm mr-2" data-icon="apps">apps</span>
|
|
||||||
Apps
|
|
||||||
</h3>
|
|
||||||
<!-- Result Item: Plex -->
|
|
||||||
<div class="group flex items-center justify-between p-3 rounded-xl hover:bg-secondary-container/20 cursor-pointer transition-all duration-200 hover:translate-x-1">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 glass-panel rounded-xl flex items-center justify-center text-primary group-hover:scale-105 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-3xl" data-icon="movie">movie</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="font-headline text-body-lg text-on-surface">Plex</span>
|
|
||||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-secondary/20 bg-secondary/10">
|
|
||||||
<div class="active-dot pulse-animation"></div>
|
|
||||||
<span class="text-[10px] font-bold text-secondary uppercase tracking-tight">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="text-on-surface-variant text-label-md">Container • Media Server</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<span class="text-on-surface-variant text-[11px] font-medium italic">open in nieuw tabblad</span>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-sm" data-icon="open_in_new">open_in_new</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Result Item: Paperless-ngx -->
|
|
||||||
<div class="group flex items-center justify-between p-3 rounded-xl hover:bg-secondary-container/20 cursor-pointer transition-all duration-200 hover:translate-x-1">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 glass-panel rounded-xl flex items-center justify-center text-primary group-hover:scale-105 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-3xl" data-icon="description">description</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="font-headline text-body-lg text-on-surface">Paperless-ngx</span>
|
|
||||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-secondary/20 bg-secondary/10">
|
|
||||||
<div class="active-dot pulse-animation"></div>
|
|
||||||
<span class="text-[10px] font-bold text-secondary uppercase tracking-tight">Online</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="text-on-surface-variant text-label-md">Document Management System</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-sm" data-icon="open_in_new">open_in_new</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Group: Favorieten -->
|
|
||||||
<div class="px-3 mb-4">
|
|
||||||
<h3 class="px-3 py-2 text-label-md font-label-md text-primary/70 uppercase tracking-widest flex items-center">
|
|
||||||
<span class="material-symbols-outlined text-sm mr-2" data-icon="star">star</span>
|
|
||||||
Favorieten
|
|
||||||
</h3>
|
|
||||||
<div class="group flex items-center justify-between p-3 rounded-xl hover:bg-secondary-container/20 cursor-pointer transition-all duration-200 hover:translate-x-1">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 glass-panel rounded-xl flex items-center justify-center text-on-surface group-hover:scale-105 transition-transform">
|
|
||||||
<svg fill="currentColor" height="24" viewbox="0 0 24 24" width="24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 21.795 24 17.298 24 12c0-6.627-5.373-12-12-12"></path></svg>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="font-headline text-body-lg text-on-surface">GitHub</span>
|
|
||||||
<p class="text-on-surface-variant text-label-md">Developer Ecosystem & Repository</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-sm" data-icon="open_in_new">open_in_new</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Group: Search Suggestions -->
|
|
||||||
<div class="px-3">
|
|
||||||
<h3 class="px-3 py-2 text-label-md font-label-md text-primary/70 uppercase tracking-widest flex items-center">
|
|
||||||
<span class="material-symbols-outlined text-sm mr-2" data-icon="language">language</span>
|
|
||||||
Google
|
|
||||||
</h3>
|
|
||||||
<div class="group flex items-center justify-between p-3 rounded-xl hover:bg-secondary-container/20 cursor-pointer transition-all duration-200">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 glass-panel rounded-xl flex items-center justify-center text-primary group-hover:scale-105 transition-transform">
|
|
||||||
<span class="material-symbols-outlined text-3xl" data-icon="search">search</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="font-headline text-body-lg text-on-surface">Zoek op Google naar <span class="text-secondary">'PL...'</span></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 px-2 py-1 bg-surface-container-high rounded text-[10px] font-bold text-on-surface-variant border border-outline-variant">
|
|
||||||
ENTER
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Footer / Shortcuts -->
|
|
||||||
<div class="px-6 py-4 bg-surface-container-low/80 border-t border-outline-variant flex justify-between items-center text-[11px] font-medium text-on-surface-variant uppercase tracking-wider">
|
|
||||||
<div class="flex gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="px-1.5 py-0.5 bg-surface-variant rounded border border-outline-variant">↑↓</span>
|
|
||||||
<span>Navigeren</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="px-1.5 py-0.5 bg-surface-variant rounded border border-outline-variant">Enter</span>
|
|
||||||
<span>Openen</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="px-1.5 py-0.5 bg-surface-variant rounded border border-outline-variant">Alt + Enter</span>
|
|
||||||
<span>Nieuw Tabblad</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<span class="material-symbols-outlined text-xs" data-icon="bolt">bolt</span>
|
|
||||||
<span>DockDeck QuickLaunch</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Floating Atmosphere Effects -->
|
|
||||||
<script>
|
|
||||||
// Simple logic for micro-interactions
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if(e.key === 'Escape') {
|
|
||||||
// In a real app, this would close the overlay
|
|
||||||
console.log('Escape pressed: Closing Search Overlay');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Dynamic background particle interaction or similar could go here
|
|
||||||
// For now, we rely on the premium CSS styling and shader.
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB |
-269
@@ -1,269 +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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist:wght@400;500;600;700&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>
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(15, 23, 42, 0.8);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
}
|
|
||||||
.search-glow {
|
|
||||||
box-shadow: 0 0 40px 5px rgba(192, 193, 255, 0.1);
|
|
||||||
}
|
|
||||||
.selected-item {
|
|
||||||
background: rgba(192, 193, 255, 0.1);
|
|
||||||
border-left: 3px solid #c0c1ff;
|
|
||||||
}
|
|
||||||
@keyframes pulse-emerald {
|
|
||||||
0%, 100% { opacity: 1; transform: scale(1); }
|
|
||||||
50% { opacity: 0.5; transform: scale(1.2); }
|
|
||||||
}
|
|
||||||
.status-pulse {
|
|
||||||
animation: pulse-emerald 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"surface-container-high": "#222a3d",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"tertiary": "#ffb783",
|
|
||||||
"surface-container-lowest": "#060e20",
|
|
||||||
"on-secondary-fixed": "#002113",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"secondary-container": "#00a572",
|
|
||||||
"outline": "#908fa0",
|
|
||||||
"outline-variant": "#464554",
|
|
||||||
"on-primary": "#1000a9",
|
|
||||||
"on-tertiary-fixed-variant": "#703700",
|
|
||||||
"on-tertiary-fixed": "#301400",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"tertiary-fixed": "#ffdcc5",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"primary-container": "#8083ff",
|
|
||||||
"tertiary-container": "#d97721",
|
|
||||||
"surface-bright": "#31394d",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"primary-fixed-dim": "#c0c1ff",
|
|
||||||
"on-surface-variant": "#c7c4d7",
|
|
||||||
"inverse-surface": "#dae2fd",
|
|
||||||
"on-primary-container": "#0d0096",
|
|
||||||
"on-primary-fixed-variant": "#2f2ebe",
|
|
||||||
"tertiary-fixed-dim": "#ffb783",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"inverse-on-surface": "#283044",
|
|
||||||
"on-tertiary-container": "#452000",
|
|
||||||
"on-primary-fixed": "#07006c",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"inverse-primary": "#494bd6",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"on-surface": "#dae2fd",
|
|
||||||
"on-background": "#dae2fd",
|
|
||||||
"surface-tint": "#c0c1ff",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"primary": "#c0c1ff",
|
|
||||||
"on-secondary-container": "#00311f",
|
|
||||||
"on-tertiary": "#4f2500",
|
|
||||||
"primary-fixed": "#e1e0ff"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.25rem",
|
|
||||||
"lg": "0.5rem",
|
|
||||||
"xl": "0.75rem",
|
|
||||||
"full": "9999px"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"margin-mobile": "16px",
|
|
||||||
"stack-md": "24px",
|
|
||||||
"gutter": "24px",
|
|
||||||
"margin-desktop": "40px",
|
|
||||||
"container-max": "1440px",
|
|
||||||
"base": "8px",
|
|
||||||
"stack-lg": "48px",
|
|
||||||
"stack-sm": "12px"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"body-lg": ["Inter"],
|
|
||||||
"code-sm": ["Geist"],
|
|
||||||
"label-md": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"headline-lg-mobile": ["Geist"],
|
|
||||||
"body-md": ["Inter"],
|
|
||||||
"display-lg": ["Geist"],
|
|
||||||
"headline-lg": ["Geist"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"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-md": ["24px", {"lineHeight": "32px", "fontWeight": "500"}],
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
||||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
||||||
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
||||||
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body class="bg-background text-on-background font-body-md min-h-screen overflow-hidden selection:bg-primary/30">
|
|
||||||
<!-- Background Content Layer (Blurred/Dimmed) -->
|
|
||||||
<div class="fixed inset-0 z-0 filter blur-sm brightness-50 opacity-60">
|
|
||||||
<!-- TopNavBar Mockup -->
|
|
||||||
<header class="bg-background/80 backdrop-blur-md border-b border-outline-variant/30 flex justify-between items-center h-16 px-gutter w-full sticky top-0 z-50">
|
|
||||||
<div class="font-headline-md text-headline-md font-semibold text-primary">DockDeck</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">settings</span>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">notifications</span>
|
|
||||||
<div class="w-8 h-8 rounded-full bg-surface-container-high border border-outline-variant/50"></div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- Main Content Mockup -->
|
|
||||||
<main class="max-w-container-max mx-auto p-gutter pt-stack-md">
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
|
||||||
<div class="col-span-2 space-y-stack-md">
|
|
||||||
<div class="h-64 rounded-xl bg-surface-container border border-outline-variant/20 p-6">
|
|
||||||
<div class="h-4 w-32 bg-surface-variant/40 rounded-full mb-4"></div>
|
|
||||||
<div class="h-40 w-full bg-surface-variant/20 rounded-lg"></div>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-2 gap-4">
|
|
||||||
<div class="h-32 rounded-xl bg-surface-container border border-outline-variant/20"></div>
|
|
||||||
<div class="h-32 rounded-xl bg-surface-container border border-outline-variant/20"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="h-[500px] rounded-xl bg-surface-container border border-outline-variant/20"></div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
<!-- Overlay / Command Palette -->
|
|
||||||
<div class="fixed inset-0 z-[100] flex items-start justify-center pt-[102px] px-4 sm:px-6">
|
|
||||||
<!-- Backdrop Backdrop -->
|
|
||||||
<div class="absolute inset-0 bg-background/60 backdrop-blur-sm"></div>
|
|
||||||
<!-- Command Palette Container -->
|
|
||||||
<div class="relative w-full max-w-2xl glass-panel rounded-2xl border border-outline-variant/30 shadow-2xl overflow-hidden search-glow animate-in fade-in zoom-in duration-300">
|
|
||||||
<!-- Search Input Area -->
|
|
||||||
<div class="flex items-center px-5 py-4 border-b border-outline-variant/20">
|
|
||||||
<span class="material-symbols-outlined text-primary mr-4" style="font-size: 28px;">search</span>
|
|
||||||
<input autofocus="" class="w-full bg-transparent border-none focus:ring-0 text-headline-md font-headline-md text-on-surface placeholder:text-on-surface-variant/40 outline-none" placeholder="Zoek containers, instellingen of apps..." type="text" value="Pl"/>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<kbd class="hidden sm:flex items-center justify-center h-6 w-12 rounded border border-outline-variant/40 bg-surface-container-high text-on-surface-variant font-code-sm text-code-sm">ESC</kbd>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Results List -->
|
|
||||||
<div class="max-h-[614px] overflow-y-auto py-2 custom-scrollbar">
|
|
||||||
<!-- Section: Apps -->
|
|
||||||
<div class="px-3 mb-2">
|
|
||||||
<div class="px-3 py-2 text-label-md font-label-md text-primary uppercase tracking-wider">Apps</div>
|
|
||||||
<!-- Plex (Selected) -->
|
|
||||||
<div class="group flex items-center px-3 py-3 rounded-xl selected-item transition-all duration-200 cursor-pointer">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center mr-4 border border-outline-variant/30 overflow-hidden">
|
|
||||||
<div class="w-full h-full" data-alt="A minimalist tech logo for a media streaming application featuring a stylized chevron or 'P' shape in a bright electric indigo color against a dark navy slate background. Professional, high-end software aesthetic with clean lines and premium lighting." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAcRUcFYPWPig6MaD2rJ1GsBpI31Vy2gaztYMPCWaPfKqdVoiyKOU0F9xUgANvDke4WA7CJkJ5bCSpEV9-2GEV0EAhDX3nseGcLMpTzZin172FTsvpzoJGi9jUmmxGOyQX-6j5ReNvKlManLLDX1YGcIeqFjtJhq2Pza-L96rlzrAsNyLEZGZI937rcB_NKa0qn6LIaf9oOqOoYYkBR2yDYgpAI8rfDcGmtgPBtP-XxL2-hkOXfWLhGM3rjsVYZMP--3pbXGdlUb31f')"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="font-headline-md text-body-lg text-on-surface font-semibold">Plex</span>
|
|
||||||
<span class="flex h-2 w-2 rounded-full bg-secondary status-pulse"></span>
|
|
||||||
<span class="text-label-md font-label-md text-secondary">Actief</span>
|
|
||||||
</div>
|
|
||||||
<div class="text-label-md font-label-md text-on-surface-variant">Media Server • Port 32400</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-on-surface-variant font-code-sm text-code-sm opacity-60">Container</div>
|
|
||||||
</div>
|
|
||||||
<!-- Paperless -->
|
|
||||||
<div class="group flex items-center px-3 py-3 rounded-xl hover:bg-surface-variant/40 transition-all duration-200 cursor-pointer">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center mr-4 border border-outline-variant/30 overflow-hidden">
|
|
||||||
<div class="w-full h-full" data-alt="A clean, minimalist logo for a document management service showing a stylized folded paper or stack icon in vibrant teal. Dark mode compatible design with deep slate backgrounds and high-contrast accents." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA3D9AXqBxbp_Ph0kQ8P6ogw5Wcz4NSlwdCLyXJQqrNTl60K2d4nfK99ZejAXWMvlVxuSg3iqyDaesmNmwZiPgkym5Gxv5GyqfHhlBTCs2ogRXLAExBeYMAnyPj49OAHpwyzymYHFRaEF5OaMA_UwMa-2MgkHWZMu1xdn0BZbiAKXiExyxNCpPrn2XVj5A9AjajvTmdVlmBif4U_6UAEgYqsAcxozTIX7LxOKvoH2ektyxB63VnuesWkb6kupzOiQscX1xuBpl0VUkB')"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="font-headline-md text-body-lg text-on-surface font-semibold">Paperless-ngx</span>
|
|
||||||
</div>
|
|
||||||
<div class="text-label-md font-label-md text-on-surface-variant">Document Management • Port 8000</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-on-surface-variant font-code-sm text-code-sm opacity-0 group-hover:opacity-60">Enter</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Section: Favorieten -->
|
|
||||||
<div class="px-3 mb-2">
|
|
||||||
<div class="px-3 py-2 text-label-md font-label-md text-primary uppercase tracking-wider">Favorieten</div>
|
|
||||||
<div class="group flex items-center px-3 py-3 rounded-xl hover:bg-surface-variant/40 transition-all duration-200 cursor-pointer">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center mr-4 border border-outline-variant/30 overflow-hidden">
|
|
||||||
<div class="w-full h-full" data-alt="The GitHub octocat logo rendered in a sleek, modernist 3D style with subtle metallic textures and soft ambient lighting. The background is a sophisticated deep indigo and slate blend, emphasizing technical authority and developer-centric aesthetics." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCcpgY_n9Ihv_W9bICccMpA-610_DhAaJBpqw7lr91uwS_btI9CpeFtuYEEFDs_yR2Xs2TH7EBDui75irP7h2GckXHpzKJxI4-cNIb9sLZEVTaVyQQ4I0VZ_LkLtgoTMqnYQDxG3KaOk0w0eBBTUY8aifo0pS6e4ZPH8gSYJ_NKALOlFxeav8_Avn-QuNC7F2v_d5U_tDiGOjFSGTw1CAvTGfXqWiBsPXgJb5Nm_JQTbeeRcYhTTmdmZLGs6nM_XiJBgudVI4Ls5B3k')"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow">
|
|
||||||
<span class="font-headline-md text-body-lg text-on-surface font-semibold">GitHub</span>
|
|
||||||
<div class="text-label-md font-label-md text-on-surface-variant">github.com/repository</div>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant/40 group-hover:text-primary transition-colors">star</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Section: Google Search -->
|
|
||||||
<div class="px-3 mb-2 border-t border-outline-variant/10 mt-2 pt-2">
|
|
||||||
<div class="group flex items-center px-3 py-3 rounded-xl hover:bg-surface-variant/40 transition-all duration-200 cursor-pointer">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center mr-4 border border-outline-variant/30">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">travel_explore</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow">
|
|
||||||
<span class="font-headline-md text-body-lg text-on-surface">Zoek op Google naar <span class="text-primary font-bold">"Pl..."</span></span>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant/40">north_east</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Footer Hints -->
|
|
||||||
<div class="px-5 py-3 border-t border-outline-variant/20 bg-surface-container-lowest/50 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-4 text-label-md font-label-md text-on-surface-variant/80">
|
|
||||||
<span class="flex items-center gap-1.5"><kbd class="px-1.5 py-0.5 rounded border border-outline-variant/40 bg-surface-container-high font-code-sm text-[11px]">ENTER</kbd> om te openen</span>
|
|
||||||
<span class="w-1 h-1 rounded-full bg-outline-variant/40"></span>
|
|
||||||
<span class="flex items-center gap-1.5"><kbd class="px-1.5 py-0.5 rounded border border-outline-variant/40 bg-surface-container-high font-code-sm text-[11px]">ESC</kbd> om te sluiten</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 text-label-md font-label-md text-primary/60">
|
|
||||||
<span class="material-symbols-outlined text-[18px]">keyboard_command_key</span>
|
|
||||||
<span>DockDeck QuickSearch</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Micro-interaction Script -->
|
|
||||||
<script>
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if (e.key === 'Escape') {
|
|
||||||
// In a real app, this would close the palette
|
|
||||||
console.log('Sluiten...');
|
|
||||||
}
|
|
||||||
if (e.key === 'ArrowDown') {
|
|
||||||
e.preventDefault();
|
|
||||||
// Simple navigation logic placeholder
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Atmosphere Effect
|
|
||||||
const palette = document.querySelector('.glass-panel');
|
|
||||||
document.addEventListener('mousemove', (e) => {
|
|
||||||
const { clientX, clientY } = e;
|
|
||||||
const x = (clientX / window.innerWidth - 0.5) * 10;
|
|
||||||
const y = (clientY / window.innerHeight - 0.5) * 10;
|
|
||||||
palette.style.transform = `perspective(1000px) rotateY(${x}deg) rotateX(${-y}deg)`;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB |
-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>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 235 KiB |
-418
@@ -1,418 +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 - Apps Beheren</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"/>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"on-surface-variant": "#c7c4d7",
|
|
||||||
"on-surface": "#dbe2fd",
|
|
||||||
"tertiary-container": "#d97721",
|
|
||||||
"surface-dim": "#0b1326",
|
|
||||||
"on-secondary-fixed": "#002114",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"background": "#0b1326",
|
|
||||||
"primary-container": "#8a8cc6",
|
|
||||||
"on-primary-container": "#222457",
|
|
||||||
"inverse-primary": "#585990",
|
|
||||||
"surface-container-lowest": "#060d20",
|
|
||||||
"secondary-fixed-dim": "#4edea3",
|
|
||||||
"tertiary": "#ffb783",
|
|
||||||
"primary-fixed-dim": "#c0c1ff",
|
|
||||||
"surface-container-highest": "#2d3449",
|
|
||||||
"secondary-container": "#00b47d",
|
|
||||||
"on-primary-fixed-variant": "#404176",
|
|
||||||
"surface-container-low": "#131b2e",
|
|
||||||
"on-tertiary-container": "#452000",
|
|
||||||
"on-tertiary-fixed": "#301400",
|
|
||||||
"on-secondary-fixed-variant": "#005236",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"primary": "#c0c1ff",
|
|
||||||
"secondary": "#4edea3",
|
|
||||||
"outline-variant": "rgba(30, 41, 59, 0.5)",
|
|
||||||
"tertiary-fixed-dim": "#ffb783",
|
|
||||||
"surface-tint": "#c0c1ff",
|
|
||||||
"tertiary-fixed": "#ffdcc5",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"surface-container-high": "#222a3e",
|
|
||||||
"primary-fixed": "#e1e0ff",
|
|
||||||
"on-secondary-container": "#003e28",
|
|
||||||
"outline": "#908fa0",
|
|
||||||
"on-primary-fixed": "#131449",
|
|
||||||
"status-offline": "#ffb4ab",
|
|
||||||
"inverse-surface": "#dbe2fd",
|
|
||||||
"secondary-fixed": "#6ffbbe",
|
|
||||||
"on-tertiary-fixed-variant": "#703700",
|
|
||||||
"status-degraded": "#ffb783",
|
|
||||||
"on-background": "#dbe2fd",
|
|
||||||
"surface-glass": "rgba(15, 23, 42, 0.6)",
|
|
||||||
"on-tertiary": "#4f2500",
|
|
||||||
"status-online": "#4edea3",
|
|
||||||
"surface": "#0b1326",
|
|
||||||
"surface-container": "#171f33",
|
|
||||||
"surface-bright": "#31394e",
|
|
||||||
"on-secondary": "#003824",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"surface-variant": "#2d3449",
|
|
||||||
"inverse-on-surface": "#283044",
|
|
||||||
"on-primary": "#292b5e"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.25rem",
|
|
||||||
"lg": "0.5rem",
|
|
||||||
"xl": "0.75rem",
|
|
||||||
"full": "9999px"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"gutter": "24px",
|
|
||||||
"margin-desktop": "40px",
|
|
||||||
"stack-lg": "48px",
|
|
||||||
"base": "8px",
|
|
||||||
"margin-mobile": "16px",
|
|
||||||
"stack-md": "24px",
|
|
||||||
"container-max": "1440px",
|
|
||||||
"stack-sm": "12px"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"headline-lg-mobile": ["Geist"],
|
|
||||||
"label-md": ["Geist"],
|
|
||||||
"code-sm": ["Geist"],
|
|
||||||
"headline-md": ["Geist"],
|
|
||||||
"display-lg": ["Geist"],
|
|
||||||
"body-lg": ["Inter"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"body-md": ["Inter"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
||||||
"label-md": ["14px", {"lineHeight": "20px", "letterSpacing": "0.02em", "fontWeight": "500"}],
|
|
||||||
"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 {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: inline-block;
|
|
||||||
box-shadow: 0 0 8px currentColor;
|
|
||||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
||||||
}
|
|
||||||
@keyframes pulse {
|
|
||||||
0%, 100% { opacity: 1; }
|
|
||||||
50% { opacity: .5; }
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
/* Custom scrollbar */
|
|
||||||
::-webkit-scrollbar { width: 6px; }
|
|
||||||
::-webkit-scrollbar-track { background: transparent; }
|
|
||||||
::-webkit-scrollbar-thumb { background: rgba(30, 41, 59, 0.8); border-radius: 10px; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="font-body-md text-body-md">
|
|
||||||
<!-- Top Navigation Bar -->
|
|
||||||
<header class="bg-surface-glass backdrop-blur-md text-primary font-headline-md text-headline-md full-width top-0 sticky border-b border-outline-variant shadow-sm z-50">
|
|
||||||
<div class="flex justify-between items-center w-full px-gutter h-16 max-w-container-max mx-auto">
|
|
||||||
<div class="flex items-center gap-stack-md">
|
|
||||||
<span class="font-headline-md text-headline-md font-bold text-primary">DockDeck</span>
|
|
||||||
<nav class="hidden md:flex gap-stack-md ml-8">
|
|
||||||
<a class="text-on-surface-variant hover:text-on-surface transition-colors font-label-md text-label-md" href="#">Dashboard</a>
|
|
||||||
<a class="text-primary font-bold border-b-2 border-primary font-label-md text-label-md py-4" href="#">Instellingen</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-sm">
|
|
||||||
<div class="relative group">
|
|
||||||
<input class="bg-surface-container-low border-none rounded-full px-10 py-1.5 text-label-md focus:ring-1 focus:ring-primary-container w-64 transition-all outline-none" placeholder="Apps zoeken..." type="text"/>
|
|
||||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-base">search</span>
|
|
||||||
</div>
|
|
||||||
<button class="p-2 hover:bg-surface-variant/50 rounded-full transition-all flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="flex max-w-container-max mx-auto">
|
|
||||||
<!-- Sidebar Navigation -->
|
|
||||||
<aside class="h-screen w-64 docked left-0 bg-surface-container-low border-r border-outline-variant flex flex-col gap-base p-margin-mobile fixed hidden xl:flex">
|
|
||||||
<div class="mb-stack-md px-2">
|
|
||||||
<h2 class="font-headline-md text-headline-md font-bold text-primary">Instellingen</h2>
|
|
||||||
<p class="font-label-md text-label-md text-on-surface-variant">Beheer uw dashboard</p>
|
|
||||||
</div>
|
|
||||||
<nav class="flex flex-col gap-1">
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/30 rounded-lg transition-colors group" href="#">
|
|
||||||
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform" data-icon="settings">settings</span>
|
|
||||||
<span class="font-label-md text-label-md">Algemeen</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-lg font-medium shadow-sm translate-x-1" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="apps">apps</span>
|
|
||||||
<span class="font-label-md text-label-md">Apps</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/30 rounded-lg transition-colors group" href="#">
|
|
||||||
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform" data-icon="star">star</span>
|
|
||||||
<span class="font-label-md text-label-md">Favorieten</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/30 rounded-lg transition-colors group" href="#">
|
|
||||||
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform" data-icon="category">category</span>
|
|
||||||
<span class="font-label-md text-label-md">Categorieën</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/30 rounded-lg transition-colors group" href="#">
|
|
||||||
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform" data-icon="palette">palette</span>
|
|
||||||
<span class="font-label-md text-label-md">Weergave</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/30 rounded-lg transition-colors group" href="#">
|
|
||||||
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform" data-icon="extension">extension</span>
|
|
||||||
<span class="font-label-md text-label-md">Integraties</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-variant/30 rounded-lg transition-colors group" href="#">
|
|
||||||
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform" data-icon="backup">backup</span>
|
|
||||||
<span class="font-label-md text-label-md">Back-up</span>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content Area -->
|
|
||||||
<main class="flex-1 xl:ml-64 p-margin-mobile md:p-margin-desktop min-h-screen">
|
|
||||||
<div class="max-w-5xl mx-auto space-y-stack-md">
|
|
||||||
<!-- Header & Filters Section -->
|
|
||||||
<section class="space-y-stack-sm">
|
|
||||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-stack-sm">
|
|
||||||
<div>
|
|
||||||
<h1 class="font-headline-lg text-headline-lg text-on-surface">Apps beheren</h1>
|
|
||||||
<p class="font-body-md text-body-md text-on-surface-variant">Beheer de zichtbaarheid en configuratie van ontdekte services.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Filters -->
|
|
||||||
<div class="flex flex-wrap gap-2 pt-4">
|
|
||||||
<button class="px-4 py-1.5 rounded-full bg-primary text-on-primary font-label-md text-label-md hover:brightness-110 transition-all">Alles</button>
|
|
||||||
<button class="px-4 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant font-label-md text-label-md hover:bg-surface-variant transition-all">Zichtbaar</button>
|
|
||||||
<button class="px-4 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant font-label-md text-label-md hover:bg-surface-variant transition-all">Verborgen</button>
|
|
||||||
<button class="px-4 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant font-label-md text-label-md hover:bg-surface-variant transition-all">Nieuw ontdekt</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Management Table -->
|
|
||||||
<section class="glass-panel rounded-xl overflow-hidden">
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="w-full text-left border-collapse">
|
|
||||||
<thead>
|
|
||||||
<tr class="bg-surface-container-highest/30 border-b border-outline-variant">
|
|
||||||
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">App</th>
|
|
||||||
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Status</th>
|
|
||||||
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Categorie</th>
|
|
||||||
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Zichtbaarheid</th>
|
|
||||||
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider text-right">Acties</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="divide-y divide-outline-variant">
|
|
||||||
<!-- Example 1: Plex (Zichtbaar) -->
|
|
||||||
<tr class="hover:bg-surface-variant/20 transition-all group">
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center border border-outline-variant group-hover:-translate-y-0.5 transition-transform">
|
|
||||||
<img class="w-8 h-8 object-contain" data-alt="A sleek minimalist logo icon for a media server app named Plex. The logo features futuristic geometric shapes with a deep indigo and neon violet color scheme, glowing slightly against a dark navy technical background. Corporate high-tech utility aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBN18k4Jmwg995SpRSa4L2EU5lbQmxelWEoPsuPW4fzIe0tRvJg0Hm3WZXysXiVE-xuav8njuw-9pvPnhPjiP7wR9UQPD6PwBrCrsxRcfXznG-KF_Qprh0V2_dre-msxVVFaxxmMJgEJChor5fd64YCfpt7TZm_ESekCHMQypncKnNwmAUFCOD1FAbvl66QKzO0BQXGKpZ3Plp6rD42CZ7XHP1-zgb7owH-QEj5IvIkhc4iBnIzdxthhA7wyQ0f8ih_KkgOG9doyPac"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="font-label-md text-label-md text-on-surface">Plex</div>
|
|
||||||
<div class="text-[12px] text-on-surface-variant">plex.local:32400</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="inline-flex items-center gap-2 px-2 py-0.5 rounded-full border border-status-online/20 bg-status-online/5">
|
|
||||||
<span class="active-dot text-status-online bg-status-online"></span>
|
|
||||||
<span class="text-[12px] font-medium text-status-online">Online</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<select class="bg-surface-container-low border border-outline-variant rounded-lg text-label-md py-1 px-2 focus:ring-1 focus:ring-primary outline-none">
|
|
||||||
<option selected="">Media</option>
|
|
||||||
<option>Home Lab</option>
|
|
||||||
<option>Downloaden</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<label class="relative inline-flex items-center cursor-pointer">
|
|
||||||
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
||||||
<div class="w-10 h-5 bg-surface-container-highest 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-4 after:w-4 after:transition-all peer-checked:bg-secondary"></div>
|
|
||||||
<span class="ml-3 text-label-md font-medium text-on-surface">Zichtbaar</span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-right">
|
|
||||||
<button class="p-2 hover:bg-surface-variant/50 rounded-full transition-all text-on-surface-variant hover:text-primary">
|
|
||||||
<span class="material-symbols-outlined" data-icon="edit">edit</span>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<!-- Example 2: Immich (Verborgen) -->
|
|
||||||
<tr class="hover:bg-surface-variant/20 transition-all group">
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center border border-outline-variant group-hover:-translate-y-0.5 transition-transform">
|
|
||||||
<img class="w-8 h-8 object-contain" data-alt="A clean and modern application icon for Immich photo management service. The icon uses a palette of soft teal and slate blue, featuring a stylized camera or lens shutter element. Professional, technical glassmorphism style for a developer dashboard." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCDyJEj9E70rkswyo3F3AMgP3Zy_Nik12n5HW7oheajUEV6qb9G_tXbq0WkTY_4W0Y8wufyApZspip4mLL7nxEZVwtzZTf6xTAA_qiUZY1Kt27xwiz44JcNWE1FCliRGfpUeewS5BcUd9kKrQovEqwrENU7mRvFGw-xUXr9UuZfOyyq8KkDDOZjS4lBOmLV4KIGsVoDo24r2rWIDE7ifAjK0rjWWtIwk1zUBw3ZJpiQOAswOSEmwiLcFi248QrvsTYHYLh9rmsSTHGW"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="font-label-md text-label-md text-on-surface">Immich</div>
|
|
||||||
<div class="text-[12px] text-on-surface-variant">immich.home.arpa</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="inline-flex items-center gap-2 px-2 py-0.5 rounded-full border border-status-online/20 bg-status-online/5">
|
|
||||||
<span class="active-dot text-status-online bg-status-online"></span>
|
|
||||||
<span class="text-[12px] font-medium text-status-online">Online</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<select class="bg-surface-container-low border border-outline-variant rounded-lg text-label-md py-1 px-2 focus:ring-1 focus:ring-primary outline-none">
|
|
||||||
<option>Media</option>
|
|
||||||
<option selected="">Home Lab</option>
|
|
||||||
<option>Downloaden</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<label class="relative inline-flex items-center cursor-pointer">
|
|
||||||
<input class="sr-only peer" type="checkbox"/>
|
|
||||||
<div class="w-10 h-5 bg-surface-container-highest 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-4 after:w-4 after:transition-all peer-checked:bg-secondary"></div>
|
|
||||||
<span class="ml-3 text-label-md font-medium text-on-surface-variant">Verborgen</span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-right">
|
|
||||||
<button class="p-2 hover:bg-surface-variant/50 rounded-full transition-all text-on-surface-variant hover:text-primary">
|
|
||||||
<span class="material-symbols-outlined" data-icon="edit">edit</span>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<!-- Example 3: Sonarr (Nieuw ontdekt) -->
|
|
||||||
<tr class="hover:bg-surface-variant/20 transition-all group">
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center border border-outline-variant group-hover:-translate-y-0.5 transition-transform relative">
|
|
||||||
<div class="absolute -top-1 -right-1 w-3 h-3 bg-primary rounded-full border-2 border-surface shadow-[0_0_8px_#c0c1ff]"></div>
|
|
||||||
<img class="w-8 h-8 object-contain" data-alt="A professional flat design icon for the Sonarr application, which manages television series. The style uses shades of blue and cyan with a minimalist radar-like motif. Rendered with clean edges for a technical developer dashboard interface." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBCAFxjaqE75xY1aKJh8qxj2YKyUsIHEg8CD8Ca0PMd95qxLY8vokOOuO6NpSjJidt-teeQeZ-L800NRdNqDPq955i_eNt6QPhznL6IcUFoVNID7RVKNr6Ishsz5b7kYAtjAcNscPKqB3mMRYY3R0kjz3ykBX1Xvsad5L4fNt9hBjh9WWT85Yf8QXC_EYQ5MKTwDGXDJaIB8Xv00beGusHxcks_pMgCb1E0Uj1SBa1JU0hybqvDAYtPJwy4n6RCT1lnv0mrGYPEq5xm"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="font-label-md text-label-md text-on-surface">Sonarr</div>
|
|
||||||
<div class="text-[12px] text-on-surface-variant italic">Nieuw ontdekt...</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="inline-flex items-center gap-2 px-2 py-0.5 rounded-full border border-status-degraded/20 bg-status-degraded/5">
|
|
||||||
<span class="active-dot text-status-degraded bg-status-degraded"></span>
|
|
||||||
<span class="text-[12px] font-medium text-status-degraded">Pending</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<select class="bg-surface-container-low border border-outline-variant rounded-lg text-label-md py-1 px-2 focus:ring-1 focus:ring-primary outline-none italic">
|
|
||||||
<option disabled="" selected="">Kies...</option>
|
|
||||||
<option>Media</option>
|
|
||||||
<option>Home Lab</option>
|
|
||||||
<option>Downloaden</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<label class="relative inline-flex items-center cursor-pointer">
|
|
||||||
<input class="sr-only peer" type="checkbox"/>
|
|
||||||
<div class="w-10 h-5 bg-surface-container-highest 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-4 after:w-4 after:transition-all peer-checked:bg-secondary"></div>
|
|
||||||
<span class="ml-3 text-label-md font-medium text-on-surface-variant">Uitgeschakeld</span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-right">
|
|
||||||
<button class="p-2 hover:bg-surface-variant/50 rounded-full transition-all text-on-surface-variant hover:text-primary">
|
|
||||||
<span class="material-symbols-outlined" data-icon="edit">edit</span>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Information Card -->
|
|
||||||
<section class="grid grid-cols-1 md:grid-cols-2 gap-stack-md pt-4">
|
|
||||||
<div class="glass-panel p-6 rounded-xl space-y-3">
|
|
||||||
<div class="flex items-center gap-2 text-primary">
|
|
||||||
<span class="material-symbols-outlined" data-icon="info">info</span>
|
|
||||||
<h3 class="font-label-md text-label-md font-bold uppercase tracking-wide">Automatische Detectie</h3>
|
|
||||||
</div>
|
|
||||||
<p class="text-on-surface-variant text-sm leading-relaxed">
|
|
||||||
DockDeck scant continu uw netwerk en Docker sockets op zoek naar nieuwe services. Nieuw ontdekte apps verschijnen hier als "Nieuw ontdekt" en zijn standaard verborgen op uw dashboard tot u een categorie toewijst en ze zichtbaar maakt.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="glass-panel p-6 rounded-xl space-y-3">
|
|
||||||
<div class="flex items-center gap-2 text-secondary">
|
|
||||||
<span class="material-symbols-outlined" data-icon="security">security</span>
|
|
||||||
<h3 class="font-label-md text-label-md font-bold uppercase tracking-wide">Status Monitoring</h3>
|
|
||||||
</div>
|
|
||||||
<p class="text-on-surface-variant text-sm leading-relaxed">
|
|
||||||
De statusindicator geeft real-time informatie over de bereikbaarheid van de container of service. Klik op 'Bewerken' om specifieke healthcheck-instellingen of API-sleutels voor statusmonitoring aan te passen.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
<!-- Mobile Bottom Navigation (Visible only on small screens) -->
|
|
||||||
<nav class="md:hidden fixed bottom-0 left-0 right-0 bg-surface-glass backdrop-blur-lg border-t border-outline-variant flex justify-around items-center h-16 z-50">
|
|
||||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
|
||||||
<span class="text-[10px]">Overzicht</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex flex-col items-center gap-1 text-primary" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="settings" style="font-variation-settings: 'FILL' 1;">settings</span>
|
|
||||||
<span class="text-[10px]">Instellingen</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
|
||||||
<span class="text-[10px]">Zoeken</span>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
<script>
|
|
||||||
// Micro-interaction for hover effects and button active states
|
|
||||||
document.querySelectorAll('button, a').forEach(el => {
|
|
||||||
el.addEventListener('mousedown', () => {
|
|
||||||
el.classList.add('scale-95');
|
|
||||||
setTimeout(() => el.classList.remove('scale-95'), 150);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Simple filter active state toggle simulation
|
|
||||||
const filterButtons = document.querySelectorAll('.flex.flex-wrap button');
|
|
||||||
filterButtons.forEach(btn => {
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
filterButtons.forEach(b => {
|
|
||||||
b.classList.remove('bg-primary', 'text-on-primary');
|
|
||||||
b.classList.add('bg-surface-container-high', 'text-on-surface-variant');
|
|
||||||
});
|
|
||||||
btn.classList.add('bg-primary', 'text-on-primary');
|
|
||||||
btn.classList.remove('bg-surface-container-high', 'text-on-surface-variant');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 264 KiB |
-392
@@ -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>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 289 KiB |
-396
@@ -1,396 +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 - Categorieën beheren</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=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"/>
|
|
||||||
<style>
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(15, 23, 42, 0.6);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(30, 41, 59, 0.5);
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
background-color: #0b1326;
|
|
||||||
color: #dbe2fd;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
.sidebar-active {
|
|
||||||
background-color: #00b47d; /* secondary-container */
|
|
||||||
color: #003e28; /* on-secondary-container */
|
|
||||||
}
|
|
||||||
</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-body-md">
|
|
||||||
<!-- TopNavBar -->
|
|
||||||
<header class="fixed top-0 w-full bg-surface-glass backdrop-blur-xl border-b border-outline-variant/20 shadow-sm z-50 flex justify-between items-center h-16 px-gutter">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<span class="font-headline-md text-headline-md font-bold text-primary">DockDeck</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-base">
|
|
||||||
<div class="hidden md:flex bg-surface-container-low border border-outline-variant rounded-full px-4 py-2 items-center gap-2 w-64 focus-within:ring-2 ring-primary-container transition-all">
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant">search</span>
|
|
||||||
<input class="bg-transparent border-none focus:ring-0 text-label-md w-full text-on-surface placeholder:text-on-surface-variant" placeholder="Zoek instellingen..." type="text"/>
|
|
||||||
</div>
|
|
||||||
<button class="p-2 rounded-full hover:bg-surface-variant/50 transition-colors text-on-surface-variant active:scale-95 duration-150">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 rounded-full hover:bg-surface-variant/50 transition-colors text-on-surface-variant active:scale-95 duration-150">
|
|
||||||
<span class="material-symbols-outlined">account_circle</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- SideNavBar -->
|
|
||||||
<aside class="fixed left-0 top-16 h-[calc(100vh-64px)] w-64 bg-surface-container-low border-r border-outline-variant/10 flex flex-col p-base gap-stack-sm hidden xl:flex">
|
|
||||||
<div class="px-2 py-4 border-b border-outline-variant/10 mb-2">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-primary">Admin</h2>
|
|
||||||
<p class="text-label-md font-label-md text-on-surface-variant opacity-70">Unraid Server</p>
|
|
||||||
</div>
|
|
||||||
<nav class="flex-1 space-y-1">
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg duration-200 hover:translate-x-1" 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-3 py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg duration-200 hover:translate-x-1" 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-3 py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg duration-200 hover:translate-x-1" 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-3 py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg duration-200 hover:translate-x-1" 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-3 py-2 bg-secondary-container text-on-secondary-container rounded-lg font-bold transition-all duration-200" 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-3 py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg" 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-3 py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg" href="#">
|
|
||||||
<span class="material-symbols-outlined text-error">logout</span>
|
|
||||||
<span class="font-label-md text-label-md">Logout</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<!-- Content Canvas -->
|
|
||||||
<main class="pt-24 pb-12 px-6 xl:pl-72 max-w-container-max mx-auto">
|
|
||||||
<header class="mb-stack-lg flex flex-col md:flex-row md:items-end justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 class="font-headline-lg text-headline-lg text-on-surface mb-2">Categorieën beheren</h1>
|
|
||||||
<p class="text-body-md font-body-md text-on-surface-variant max-w-2xl">Organiseer je DockDeck dashboard door services te groeperen in logische categorieën. Sleep om te sorteren.</p>
|
|
||||||
</div>
|
|
||||||
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-lg font-medium flex items-center gap-2 hover:brightness-110 active:scale-95 transition-all">
|
|
||||||
<span class="material-symbols-outlined">add</span>
|
|
||||||
Nieuwe Categorie
|
|
||||||
</button>
|
|
||||||
</header>
|
|
||||||
<!-- Category Grid -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-gutter">
|
|
||||||
<!-- Category: Media -->
|
|
||||||
<article class="glass-panel p-stack-md rounded-xl flex flex-col gap-4 relative group">
|
|
||||||
<div class="absolute top-4 right-4 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<button class="p-1.5 text-on-surface-variant hover:bg-surface-variant rounded-md cursor-grab active:cursor-grabbing" title="Sorteer">
|
|
||||||
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-secondary-container/20 border border-secondary-container/30 flex items-center justify-center text-secondary">
|
|
||||||
<span class="material-symbols-outlined text-[28px]">movie</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface leading-tight">Media</h3>
|
|
||||||
<p class="text-label-md font-label-md text-secondary">8 items gekoppeld</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2 mt-4 pt-4 border-t border-outline-variant/10">
|
|
||||||
<button class="flex-1 flex items-center justify-center gap-2 py-2 text-label-md font-label-md text-on-surface-variant hover:bg-surface-variant/40 rounded-lg transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-[18px]">edit</span>
|
|
||||||
Hernoemen
|
|
||||||
</button>
|
|
||||||
<button class="px-3 flex items-center justify-center py-2 text-on-error hover:bg-error-container/20 rounded-lg transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<!-- Category: Smart Home -->
|
|
||||||
<article class="glass-panel p-stack-md rounded-xl flex flex-col gap-4 relative group">
|
|
||||||
<div class="absolute top-4 right-4 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<button class="p-1.5 text-on-surface-variant hover:bg-surface-variant rounded-md cursor-grab active:cursor-grabbing" title="Sorteer">
|
|
||||||
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-primary-container/20 border border-primary-container/30 flex items-center justify-center text-primary">
|
|
||||||
<span class="material-symbols-outlined text-[28px]">home_iot_device</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface leading-tight">Smart Home</h3>
|
|
||||||
<p class="text-label-md font-label-md text-secondary">12 items gekoppeld</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2 mt-4 pt-4 border-t border-outline-variant/10">
|
|
||||||
<button class="flex-1 flex items-center justify-center gap-2 py-2 text-label-md font-label-md text-on-surface-variant hover:bg-surface-variant/40 rounded-lg transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-[18px]">edit</span>
|
|
||||||
Hernoemen
|
|
||||||
</button>
|
|
||||||
<button class="px-3 flex items-center justify-center py-2 text-on-error hover:bg-error-container/20 rounded-lg transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<!-- Category: Netwerk -->
|
|
||||||
<article class="glass-panel p-stack-md rounded-xl flex flex-col gap-4 relative group">
|
|
||||||
<div class="absolute top-4 right-4 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<button class="p-1.5 text-on-surface-variant hover:bg-surface-variant rounded-md cursor-grab active:cursor-grabbing" title="Sorteer">
|
|
||||||
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-tertiary-container/20 border border-tertiary-container/30 flex items-center justify-center text-tertiary">
|
|
||||||
<span class="material-symbols-outlined text-[28px]">router</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface leading-tight">Netwerk</h3>
|
|
||||||
<p class="text-label-md font-label-md text-secondary">4 items gekoppeld</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2 mt-4 pt-4 border-t border-outline-variant/10">
|
|
||||||
<button class="flex-1 flex items-center justify-center gap-2 py-2 text-label-md font-label-md text-on-surface-variant hover:bg-surface-variant/40 rounded-lg transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-[18px]">edit</span>
|
|
||||||
Hernoemen
|
|
||||||
</button>
|
|
||||||
<button class="px-3 flex items-center justify-center py-2 text-on-error hover:bg-error-container/20 rounded-lg transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<!-- Lege Toestand Categorie -->
|
|
||||||
<article class="glass-panel p-stack-md rounded-xl flex flex-col gap-4 relative group border-dashed border-2 border-outline-variant/30 bg-transparent hover:border-primary-container/50">
|
|
||||||
<div class="flex items-center gap-4 grayscale opacity-60">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-highest border border-outline-variant flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-[28px]">folder_off</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface leading-tight">Ongecategoriseerd</h3>
|
|
||||||
<p class="text-label-md font-label-md text-on-surface-variant">0 items gekoppeld</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-4 p-3 bg-surface-container-lowest/50 rounded-lg text-center">
|
|
||||||
<p class="text-label-md font-label-md text-on-surface-variant italic">Deze categorie is momenteel leeg en zal niet worden getoond op het dashboard.</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2 mt-auto pt-4 border-t border-outline-variant/10">
|
|
||||||
<button class="flex-1 flex items-center justify-center gap-2 py-2 text-label-md font-label-md text-on-surface-variant hover:bg-surface-variant/40 rounded-lg transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-[18px]">edit</span>
|
|
||||||
Hernoemen
|
|
||||||
</button>
|
|
||||||
<button class="px-3 flex items-center justify-center py-2 text-on-error hover:bg-error-container/20 rounded-lg transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<!-- Add New Placeholder -->
|
|
||||||
<button class="group relative flex flex-col items-center justify-center gap-4 p-stack-md rounded-xl border-2 border-dashed border-outline-variant/30 hover:border-primary/50 hover:bg-primary/5 transition-all duration-300 min-h-[220px]">
|
|
||||||
<div class="w-16 h-16 rounded-full bg-surface-container-high flex items-center justify-center text-on-surface-variant group-hover:scale-110 group-hover:text-primary transition-all duration-300">
|
|
||||||
<span class="material-symbols-outlined text-[40px]">add_circle</span>
|
|
||||||
</div>
|
|
||||||
<div class="text-center">
|
|
||||||
<p class="font-label-md text-label-md text-on-surface-variant group-hover:text-on-surface">Nieuwe groep aanmaken</p>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- Extra informatie sectie -->
|
|
||||||
<section class="mt-stack-lg glass-panel p-stack-md rounded-xl bg-surface-container-low/30 overflow-hidden relative">
|
|
||||||
<div class="absolute -right-16 -bottom-16 w-64 h-64 bg-primary/5 blur-3xl rounded-full"></div>
|
|
||||||
<div class="relative z-10 flex flex-col md:flex-row items-center gap-gutter">
|
|
||||||
<div class="w-20 h-20 shrink-0 bg-surface-container-highest rounded-full flex items-center justify-center text-primary-container">
|
|
||||||
<span class="material-symbols-outlined text-[48px]">info</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-2">Wist je dat?</h3>
|
|
||||||
<p class="text-body-md text-on-surface-variant">Je kunt ook de volgorde van services <i>binnen</i> een categorie wijzigen op de hoofdpagina. Verwijderde categorieën zorgen ervoor dat gekoppelde items automatisch naar 'Ongecategoriseerd' worden verplaatst.</p>
|
|
||||||
</div>
|
|
||||||
<div class="shrink-0">
|
|
||||||
<button class="px-6 py-2 border border-outline-variant hover:bg-surface-variant/30 rounded-lg text-label-md font-label-md transition-all">
|
|
||||||
Documentatie openen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<!-- BottomNavBar for Mobile -->
|
|
||||||
<nav class="md:hidden fixed bottom-0 w-full bg-surface-container-low backdrop-blur-xl flex justify-around items-center h-16 px-gutter z-50 shadow-[0_-4px_12px_rgba(0,0,0,0.1)]">
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">dashboard</span>
|
|
||||||
<span class="text-[10px] font-label-md">Overzicht</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">layers</span>
|
|
||||||
<span class="text-[10px] font-label-md">Containers</span>
|
|
||||||
</button>
|
|
||||||
<div class="relative -top-4">
|
|
||||||
<button class="w-12 h-12 bg-primary text-on-primary rounded-full flex items-center justify-center shadow-lg active:scale-90 transition-transform">
|
|
||||||
<span class="material-symbols-outlined">add</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">lan</span>
|
|
||||||
<span class="text-[10px] font-label-md">Netwerk</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-secondary font-bold">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="text-[10px] font-label-md">Instellingen</span>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
<script>
|
|
||||||
// Simple drag interaction visual feedback
|
|
||||||
document.querySelectorAll('button[title="Sorteer"]').forEach(btn => {
|
|
||||||
btn.addEventListener('mousedown', () => {
|
|
||||||
const card = btn.closest('article');
|
|
||||||
card.style.zIndex = '100';
|
|
||||||
card.style.opacity = '0.7';
|
|
||||||
});
|
|
||||||
btn.addEventListener('mouseup', () => {
|
|
||||||
const card = btn.closest('article');
|
|
||||||
card.style.zIndex = '1';
|
|
||||||
card.style.opacity = '1';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Hover animations for category tiles
|
|
||||||
const tiles = document.querySelectorAll('.glass-panel');
|
|
||||||
tiles.forEach(tile => {
|
|
||||||
tile.addEventListener('mouseenter', () => {
|
|
||||||
if(!tile.classList.contains('border-dashed')) {
|
|
||||||
tile.style.boxShadow = '0 0 15px rgba(192, 193, 255, 0.1)';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
tile.addEventListener('mouseleave', () => {
|
|
||||||
tile.style.boxShadow = 'none';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 284 KiB |
-371
@@ -1,371 +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&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"/>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background-color: #0b1326;
|
|
||||||
color: #dbe2fd;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
.glass-panel:hover {
|
|
||||||
background: rgba(45, 52, 73, 0.5);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
.drawer-overlay {
|
|
||||||
background: rgba(6, 13, 32, 0.8);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
}
|
|
||||||
.side-drawer {
|
|
||||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.active-dot {
|
|
||||||
box-shadow: 0 0 8px #4edea3;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: #0b1326;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #2d3449;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
</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="bg-background text-on-surface">
|
|
||||||
<!-- TopNavBar -->
|
|
||||||
<header class="fixed top-0 w-full z-50 flex justify-between items-center h-16 px-gutter w-full 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>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-stack-sm">
|
|
||||||
<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>
|
|
||||||
<div class="flex pt-16 min-h-screen">
|
|
||||||
<!-- SideNavBar (Active: Settings) -->
|
|
||||||
<aside class="hidden xl:flex fixed left-0 top-16 h-[calc(100vh-64px)] w-64 flex flex-col p-base gap-stack-sm bg-surface-container-low border-r border-outline-variant/10">
|
|
||||||
<div class="px-4 py-6">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-primary">Admin</h2>
|
|
||||||
<p class="text-on-surface-variant font-label-md text-label-md opacity-70">Unraid Server</p>
|
|
||||||
</div>
|
|
||||||
<nav class="flex-1 flex flex-col gap-1">
|
|
||||||
<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 hover:translate-x-1 duration-200 font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined">dashboard</span> Dashboard
|
|
||||||
</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 hover:translate-x-1 duration-200 font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined">layers</span> Containers
|
|
||||||
</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 hover:translate-x-1 duration-200 font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined">image</span> Images
|
|
||||||
</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 hover:translate-x-1 duration-200 font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined">lan</span> Network
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-lg font-label-md text-label-md font-bold" href="#">
|
|
||||||
<span class="material-symbols-outlined">settings</span> Settings
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
<div class="mt-auto border-t border-outline-variant/10 pt-4 flex flex-col gap-1">
|
|
||||||
<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 font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined">description</span> Docs
|
|
||||||
</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 font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined">logout</span> Logout
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content Canvas -->
|
|
||||||
<main class="flex-1 xl:ml-64 p-margin-mobile md:p-margin-desktop max-w-container-max mx-auto w-full">
|
|
||||||
<div class="flex flex-col gap-stack-lg">
|
|
||||||
<!-- Header Section -->
|
|
||||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 class="font-headline-lg text-headline-lg text-primary mb-2">Favorieten beheren</h1>
|
|
||||||
<p class="text-on-surface-variant font-body-md text-body-md max-w-2xl">Beheer uw meest gebruikte tools en websites. Wijzig de volgorde of voeg nieuwe snelkoppelingen toe aan uw dashboard.</p>
|
|
||||||
</div>
|
|
||||||
<button class="flex items-center gap-2 px-6 py-3 bg-primary text-on-primary rounded-xl font-bold transition-all hover:brightness-110 active:scale-95 shadow-lg shadow-primary/10" onclick="toggleDrawer(true)">
|
|
||||||
<span class="material-symbols-outlined">add_circle</span>
|
|
||||||
Favoriet toevoegen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- Bento Grid / List of Favorites -->
|
|
||||||
<div class="grid grid-cols-1 gap-4">
|
|
||||||
<!-- Favorite Item: Google -->
|
|
||||||
<div class="glass-panel p-4 rounded-xl flex items-center justify-between group transition-all duration-300">
|
|
||||||
<div class="flex items-center gap-6">
|
|
||||||
<div class="cursor-grab text-on-surface-variant/30 hover:text-primary transition-colors">
|
|
||||||
<span class="material-symbols-outlined">drag_indicator</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container flex items-center justify-center overflow-hidden border border-outline-variant/20">
|
|
||||||
<img class="w-8 h-8 object-contain" data-alt="A clean, minimalist logo of Google with its signature four colors, rendered as a crisp vector on a dark tech-inspired background with subtle glowing edges in DockDeck style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAlE81yePhc02KeHr-gmasdFhq1WtLkC0LJeFkxUg0RW87B8cY2m9O23Fn9WUgUwiObNBl981WVwXJmHsN4Czq7stRcRndmZHbU_5kSqAEBBm8tm2SabPDQ8Ot1d9tdJJn9Ok0KT3jaGJfyxVvU8dmX03XoFLJ_SvIziPVeeJKJM9H4Vsso8MglAg49dxeeyLHeS3TJqjfp8dYUFaE-UCcZgaDCwulShWUobiE0T5T3Z1v0y32rtc07FxcpjvjgNkPWVDSBslWNQyoI"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-body-lg text-on-surface">Google</h3>
|
|
||||||
<p class="font-code-sm text-code-sm text-on-surface-variant opacity-60">https://www.google.com</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<span class="px-3 py-1 bg-surface-container-high rounded-full font-label-md text-label-md text-secondary border border-secondary/20">Zoeken</span>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-primary hover:bg-surface-bright/30 rounded-lg transition-all">
|
|
||||||
<span class="material-symbols-outlined">edit</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-error hover:bg-error-container/20 rounded-lg transition-all">
|
|
||||||
<span class="material-symbols-outlined">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Favorite Item: YouTube -->
|
|
||||||
<div class="glass-panel p-4 rounded-xl flex items-center justify-between group transition-all duration-300">
|
|
||||||
<div class="flex items-center gap-6">
|
|
||||||
<div class="cursor-grab text-on-surface-variant/30 hover:text-primary transition-colors">
|
|
||||||
<span class="material-symbols-outlined">drag_indicator</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container flex items-center justify-center overflow-hidden border border-outline-variant/20">
|
|
||||||
<img class="w-8 h-8 object-contain" data-alt="A minimalist YouTube logo icon with its iconic red play button, styled with a glassmorphism aesthetic, featuring soft inner glows and sharp vector precision on a navy blue tech surface." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBvZMwuqnPupp6YRdhFt5loY-xdO2b6-mSU5Di_6V2elSgBv68Jrt9fbGZUBTX5apaoLjNN9RVn66iFCgh84t4cfm7l4nFe8lbRXFcFr8k9TEaMSSTO32l8DayJZ_Wm0s3VW3BeqGrFaYAvj39PwB4vXXsmXaara9jWQliybNOTqAnShJu47sx4vYkE3neBT_3av3YKnj_hqAXAMKOgXJ7nlNsjg8dZVlo6C28gvtW35j6HZZHqTw67nZHUBd77NofOgcNTyIs3WQaA"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-body-lg text-on-surface">YouTube</h3>
|
|
||||||
<p class="font-code-sm text-code-sm text-on-surface-variant opacity-60">https://www.youtube.com</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<span class="px-3 py-1 bg-surface-container-high rounded-full font-label-md text-label-md text-secondary border border-secondary/20">Media</span>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-primary hover:bg-surface-bright/30 rounded-lg transition-all">
|
|
||||||
<span class="material-symbols-outlined">edit</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-error hover:bg-error-container/20 rounded-lg transition-all">
|
|
||||||
<span class="material-symbols-outlined">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Favorite Item: GitHub -->
|
|
||||||
<div class="glass-panel p-4 rounded-xl flex items-center justify-between group transition-all duration-300">
|
|
||||||
<div class="flex items-center gap-6">
|
|
||||||
<div class="cursor-grab text-on-surface-variant/30 hover:text-primary transition-colors">
|
|
||||||
<span class="material-symbols-outlined">drag_indicator</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container flex items-center justify-center overflow-hidden border border-outline-variant/20">
|
|
||||||
<img class="w-8 h-8 object-contain" data-alt="A sleek white GitHub octocat logo rendered against a deep indigo backdrop. The visual style is high-performance utility with neon-white accents and a subtle digital grid pattern in the background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCqZ51I69-nfCcUf71LBc_RmVX3oVDq5LdlwAPToEb6OmLHY6_q_ARiy_2mXkkfBepa3Z5IMgTZhTSJqrK7OIJiYQjmvghueMA04JmBktPXPTRJMYLXrv9cXaEccq7B0Y28uJtKa2PAUHndAfZw8UltLXTzh6K080ufb709-tHj5s1tlaYaS2yGjcCrV8Q5GdTMTbtLjQQtOyp5P4FQbc7_PGGudjKwp8cZZFkuf0wV4FM3DIbfuaLYwyQAJT-PFESas_uZQ2h6YzYy"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-body-lg text-on-surface">GitHub</h3>
|
|
||||||
<p class="font-code-sm text-code-sm text-on-surface-variant opacity-60">https://github.com</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<span class="px-3 py-1 bg-surface-container-high rounded-full font-label-md text-label-md text-secondary border border-secondary/20">Ontwikkeling</span>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-primary hover:bg-surface-bright/30 rounded-lg transition-all">
|
|
||||||
<span class="material-symbols-outlined">edit</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 text-on-surface-variant hover:text-error hover:bg-error-container/20 rounded-lg transition-all">
|
|
||||||
<span class="material-symbols-outlined">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Guidance Footer -->
|
|
||||||
<div class="p-stack-md bg-surface-container-low rounded-xl border border-outline-variant/10">
|
|
||||||
<div class="flex items-center gap-4 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined text-secondary">info</span>
|
|
||||||
<p class="font-label-md text-label-md">U kunt de volgorde wijzigen door de items aan de linkerhendel te verslepen naar de gewenste positie.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
<!-- Side Drawer Overlay -->
|
|
||||||
<div class="drawer-overlay fixed inset-0 z-[60] opacity-0 pointer-events-none transition-all duration-300" id="drawerOverlay" onclick="toggleDrawer(false)"></div>
|
|
||||||
<!-- Side Drawer -->
|
|
||||||
<div class="side-drawer fixed top-0 right-0 h-full w-full max-w-md bg-surface-container border-l border-outline-variant/30 z-[70] translate-x-full shadow-2xl flex flex-col" id="sideDrawer">
|
|
||||||
<div class="p-6 border-b border-outline-variant/10 flex items-center justify-between">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-primary">Favoriet toevoegen</h2>
|
|
||||||
<button class="p-2 rounded-full hover:bg-surface-variant/50 text-on-surface-variant transition-colors" onclick="toggleDrawer(false)">
|
|
||||||
<span class="material-symbols-outlined">close</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 overflow-y-auto p-6 flex flex-col gap-6">
|
|
||||||
<!-- Icon Preview -->
|
|
||||||
<div class="flex flex-col items-center gap-3 py-6 bg-surface-container-low rounded-2xl border border-outline-variant/10">
|
|
||||||
<div class="w-20 h-20 rounded-2xl bg-surface-bright flex items-center justify-center border-2 border-dashed border-outline-variant group cursor-pointer hover:border-primary transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-4xl text-on-surface-variant group-hover:text-primary">add_photo_alternate</span>
|
|
||||||
</div>
|
|
||||||
<p class="font-label-md text-label-md text-on-surface-variant">Icoon preview</p>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">Naam</label>
|
|
||||||
<input class="w-full bg-surface-container-low border border-outline-variant/30 rounded-xl px-4 py-3 text-on-surface focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all font-body-md text-body-md" placeholder="Bijv. Google" type="text"/>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">URL</label>
|
|
||||||
<input class="w-full bg-surface-container-low border border-outline-variant/30 rounded-xl px-4 py-3 text-on-surface focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all font-body-md text-body-md" placeholder="https://..." type="url"/>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">Categorie</label>
|
|
||||||
<select class="w-full bg-surface-container-low border border-outline-variant/30 rounded-xl px-4 py-3 text-on-surface focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all font-body-md text-body-md appearance-none">
|
|
||||||
<option>Geen categorie</option>
|
|
||||||
<option>Ontwikkeling</option>
|
|
||||||
<option>Media</option>
|
|
||||||
<option>Zoeken</option>
|
|
||||||
<option>Social</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-6 border-t border-outline-variant/10 grid grid-cols-2 gap-4">
|
|
||||||
<button class="px-6 py-3 rounded-xl border border-outline-variant text-on-surface-variant font-bold hover:bg-surface-variant transition-colors" onclick="toggleDrawer(false)">
|
|
||||||
Annuleren
|
|
||||||
</button>
|
|
||||||
<button class="px-6 py-3 bg-primary text-on-primary rounded-xl font-bold hover:brightness-110 active:scale-95 transition-all">
|
|
||||||
Opslaan
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
function toggleDrawer(isOpen) {
|
|
||||||
const drawer = document.getElementById('sideDrawer');
|
|
||||||
const overlay = document.getElementById('drawerOverlay');
|
|
||||||
|
|
||||||
if (isOpen) {
|
|
||||||
drawer.classList.remove('translate-x-full');
|
|
||||||
overlay.classList.remove('opacity-0', 'pointer-events-none');
|
|
||||||
} else {
|
|
||||||
drawer.classList.add('translate-x-full');
|
|
||||||
overlay.classList.add('opacity-0', 'pointer-events-none');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Lightweight atmospheric interaction: Hover glow effect
|
|
||||||
document.querySelectorAll('.glass-panel').forEach(card => {
|
|
||||||
card.addEventListener('mousemove', e => {
|
|
||||||
const rect = card.getBoundingClientRect();
|
|
||||||
const x = e.clientX - rect.left;
|
|
||||||
const y = e.clientY - rect.top;
|
|
||||||
card.style.setProperty('--mouse-x', `${x}px`);
|
|
||||||
card.style.setProperty('--mouse-y', `${y}px`);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB |
-369
@@ -1,369 +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=Inter:wght@400;500&family=Geist:wght@400;500;600;700&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-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
.status-pulse {
|
|
||||||
animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
||||||
}
|
|
||||||
@keyframes pulse-ring {
|
|
||||||
0%, 100% { opacity: 1; transform: scale(1); }
|
|
||||||
50% { opacity: .5; transform: scale(1.1); }
|
|
||||||
}
|
|
||||||
.glass-header {
|
|
||||||
background: rgba(11, 19, 38, 0.8);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
}
|
|
||||||
.custom-toggle:checked + .toggle-dot {
|
|
||||||
transform: translateX(100%);
|
|
||||||
background-color: #4edea3;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="font-body-md text-body-md overflow-x-hidden">
|
|
||||||
<!-- TopNavBar Shell -->
|
|
||||||
<nav class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-margin-desktop h-16 bg-surface-dim/80 backdrop-blur-md border-b border-outline-variant">
|
|
||||||
<div class="flex items-center gap-8">
|
|
||||||
<span class="font-headline-md text-headline-md font-bold text-primary">DockDeck</span>
|
|
||||||
<div class="hidden md:flex gap-6 items-center">
|
|
||||||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Dashboard</a>
|
|
||||||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Logs</a>
|
|
||||||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Console</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-all active:scale-95" data-icon="search"></button>
|
|
||||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-all active:scale-95" data-icon="notifications"></button>
|
|
||||||
<button class="material-symbols-outlined text-primary border-b-2 border-primary pb-1" data-icon="settings"></button>
|
|
||||||
<div class="w-8 h-8 rounded-full bg-surface-container-highest overflow-hidden border border-outline-variant">
|
|
||||||
<img class="w-full h-full object-cover" data-alt="A sophisticated professional profile portrait of a high-tech system administrator in a dark, minimalist office. The aesthetic is tech-noir with soft cyan backlighting against a deep navy background, reflecting the premium modernist UI of DockDeck. Sharp focus, professional lighting, cinematic quality." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAERNdVdFy38jIV84LSdSXVOpwxDjCOhBtJUMIGaFwr7O-3ynupe-V9jdk3bokkTSCzVyExOifaFppYaS1cRDeU9-wmGnmQ59Yw5cMUJEDQ3dqSJDDmH9JcCVgSUaZ2RC98-TP3hG1AO5OclQExS7s_Nv4dmoCahmVidGuSBCqCE8rVcITVLzHa0Tx0sW2Oi1IJZPA5CYnJdZYFylsRdfbyXqJrEYLbnLTNWcyjwTjQ5ZylBWLNG11FrR-6WMT4XY6-DUr0SYaMdtTE"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- SideNavBar Shell -->
|
|
||||||
<aside class="fixed left-0 top-16 bottom-0 w-64 flex flex-col p-4 bg-surface-container-low border-r border-outline-variant hidden md:flex">
|
|
||||||
<div class="mb-8 px-2 flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-primary-container/20 flex items-center justify-center text-primary">
|
|
||||||
<span class="material-symbols-outlined" data-icon="hub" style="font-variation-settings: 'FILL' 1;"></span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-headline-md text-label-md font-bold text-primary">Unraid Engine</p>
|
|
||||||
<p class="text-[10px] uppercase tracking-wider text-on-surface-variant">6.12.4 - Stable</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 space-y-1">
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface transition-all rounded-lg font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="dashboard"></span> Overview
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface transition-all rounded-lg font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="memory"></span> System
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface transition-all rounded-lg font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="lan"></span> Network
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface transition-all rounded-lg font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="database"></span> Storage
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface transition-all rounded-lg font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="backup"></span> Backups
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2 bg-primary-container text-on-primary-container rounded-lg font-label-md text-label-md active:translate-x-1 transition-transform" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="hub"></span> Registry
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="pt-4 border-t border-outline-variant space-y-1 mt-auto">
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface transition-all rounded-lg font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="help"></span> Documentation
|
|
||||||
</a>
|
|
||||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container-highest hover:text-on-surface transition-all rounded-lg font-label-md text-label-md" href="#">
|
|
||||||
<span class="material-symbols-outlined" data-icon="chat_bubble"></span> Support
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content Canvas -->
|
|
||||||
<main class="md:ml-64 pt-24 px-margin-mobile md:px-margin-desktop pb-12 max-w-container-max mx-auto">
|
|
||||||
<header class="mb-stack-lg">
|
|
||||||
<div class="flex items-center gap-2 text-on-surface-variant mb-2">
|
|
||||||
<span class="material-symbols-outlined text-[18px]" data-icon="settings"></span>
|
|
||||||
<span class="font-label-md text-label-md uppercase tracking-widest">Instellingen</span>
|
|
||||||
</div>
|
|
||||||
<h1 class="font-headline-lg text-headline-lg text-on-surface">Integraties</h1>
|
|
||||||
<p class="font-body-md text-body-md text-on-surface-variant max-w-2xl mt-2">
|
|
||||||
Beheer de verbindingen tussen DockDeck en je server-infrastructuur. Zorg voor een actieve sync om realtime statistieken en container-beheer mogelijk te maken.
|
|
||||||
</p>
|
|
||||||
</header>
|
|
||||||
<div class="grid gap-gutter">
|
|
||||||
<!-- Integration List -->
|
|
||||||
<section class="space-y-4">
|
|
||||||
<!-- Integration Card: Unraid -->
|
|
||||||
<div class="bg-surface-container-low border border-outline-variant rounded-xl p-6 hover:shadow-lg transition-all group">
|
|
||||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-highest flex items-center justify-center text-primary border border-outline-variant shrink-0">
|
|
||||||
<span class="material-symbols-outlined text-[28px]" data-icon="dns" style="font-variation-settings: 'FILL' 1;"></span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Unraid OS</h3>
|
|
||||||
<p class="text-on-surface-variant font-body-md">Primaire server management interface en OS statistieken.</p>
|
|
||||||
<div class="mt-2 flex items-center gap-4">
|
|
||||||
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-secondary/10 text-secondary text-[12px] font-medium border border-secondary/20">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-secondary status-pulse"></span>
|
|
||||||
Verbonden
|
|
||||||
</span>
|
|
||||||
<span class="text-[12px] text-outline flex items-center gap-1">
|
|
||||||
<span class="material-symbols-outlined text-[14px]" data-icon="sync"></span>
|
|
||||||
Laatste sync: 2 min geleden
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<button class="px-4 py-2 rounded-lg border border-outline-variant text-on-surface hover:bg-surface-container-high transition-colors font-label-md text-label-md active:scale-95">
|
|
||||||
Verbinding Testen
|
|
||||||
</button>
|
|
||||||
<button class="material-symbols-outlined p-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high rounded-lg transition-all" data-icon="more_vert"></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Integration Card: Docker Socket Proxy -->
|
|
||||||
<div class="bg-surface-container-low border border-outline-variant rounded-xl p-6 hover:shadow-lg transition-all">
|
|
||||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-highest flex items-center justify-center text-primary border border-outline-variant shrink-0">
|
|
||||||
<span class="material-symbols-outlined text-[28px]" data-icon="layers" style="font-variation-settings: 'FILL' 1;"></span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Docker Socket Proxy</h3>
|
|
||||||
<p class="text-on-surface-variant font-body-md">Beveiligde toegang tot de Docker API voor containerbeheer.</p>
|
|
||||||
<div class="mt-2 flex items-center gap-4">
|
|
||||||
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-error/10 text-error text-[12px] font-medium border border-error/20">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-error"></span>
|
|
||||||
Fout
|
|
||||||
</span>
|
|
||||||
<span class="text-[12px] text-error/60 flex items-center gap-1">
|
|
||||||
<span class="material-symbols-outlined text-[14px]" data-icon="history"></span>
|
|
||||||
Time-out bij verbinding (14:32)
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<button class="px-4 py-2 rounded-lg bg-primary text-on-primary hover:bg-primary-container transition-colors font-label-md text-label-md active:scale-95 shadow-md">
|
|
||||||
Opnieuw Proberen
|
|
||||||
</button>
|
|
||||||
<button class="material-symbols-outlined p-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high rounded-lg transition-all" data-icon="more_vert"></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Integration Card: Nginx Proxy Manager -->
|
|
||||||
<div class="bg-surface-container-low border border-outline-variant rounded-xl p-6 hover:shadow-lg transition-all relative overflow-hidden">
|
|
||||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-6">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-surface-container-highest flex items-center justify-center text-primary border border-outline-variant shrink-0">
|
|
||||||
<span class="material-symbols-outlined text-[28px]" data-icon="swap_calls" style="font-variation-settings: 'FILL' 1;"></span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface">Nginx Proxy Manager</h3>
|
|
||||||
<p class="text-on-surface-variant font-body-md">Automatische SSL en Reverse Proxy routering voor je containers.</p>
|
|
||||||
<div class="mt-2 flex items-center gap-4">
|
|
||||||
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-secondary/10 text-secondary text-[12px] font-medium border border-secondary/20">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-secondary status-pulse"></span>
|
|
||||||
Verbonden
|
|
||||||
</span>
|
|
||||||
<span class="text-[12px] text-outline flex items-center gap-1">
|
|
||||||
<span class="material-symbols-outlined text-[14px]" data-icon="sync"></span>
|
|
||||||
Laatste sync: Zojuist
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<button class="px-4 py-2 rounded-lg border border-outline-variant text-on-surface hover:bg-surface-container-high transition-colors font-label-md text-label-md active:scale-95">
|
|
||||||
Verbinding Testen
|
|
||||||
</button>
|
|
||||||
<button class="material-symbols-outlined p-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high rounded-lg transition-all" data-icon="more_vert"></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- NPM Specific Toggle -->
|
|
||||||
<div class="pt-4 border-t border-outline-variant flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-primary text-[20px]" data-icon="link"></span>
|
|
||||||
<span class="font-label-md text-on-surface">Externe URL's activeren</span>
|
|
||||||
<span class="material-symbols-outlined text-outline text-[16px] cursor-help" data-icon="info" title="Maakt containers bereikbaar via publieke domeinen geregistreerd in NPM."></span>
|
|
||||||
</div>
|
|
||||||
<label class="relative inline-flex items-center cursor-pointer">
|
|
||||||
<input checked="" class="sr-only peer custom-toggle" type="checkbox"/>
|
|
||||||
<div class="w-11 h-6 bg-surface-container-highest rounded-full peer peer-checked:bg-secondary/30 transition-all"></div>
|
|
||||||
<div class="absolute left-1 top-1 w-4 h-4 bg-outline rounded-full transition-transform toggle-dot"></div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Bottom Action Grid -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-md mt-stack-md">
|
|
||||||
<div class="p-6 rounded-xl bg-surface-container-lowest border border-dashed border-outline-variant flex flex-col items-center justify-center text-center group cursor-pointer hover:border-primary transition-colors">
|
|
||||||
<div class="w-12 h-12 rounded-full bg-surface-container-high flex items-center justify-center mb-4 group-hover:text-primary transition-colors">
|
|
||||||
<span class="material-symbols-outlined text-[32px]" data-icon="add"></span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-headline-md text-label-md font-bold text-on-surface">Nieuwe Integratie Toevoegen</h4>
|
|
||||||
<p class="text-on-surface-variant text-[12px] mt-1">Verbind met Home Assistant, Plex of Tautulli.</p>
|
|
||||||
</div>
|
|
||||||
<div class="p-6 rounded-xl bg-surface-container-lowest border border-outline-variant flex flex-col justify-between">
|
|
||||||
<div>
|
|
||||||
<h4 class="font-headline-md text-label-md font-bold text-on-surface">Systeem Status</h4>
|
|
||||||
<p class="text-on-surface-variant text-[12px] mt-1">Global Health Check van alle verbindingen.</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center justify-between mt-4">
|
|
||||||
<div class="flex -space-x-2">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-secondary border-2 border-surface-container-lowest flex items-center justify-center text-[10px] text-on-secondary font-bold">98%</div>
|
|
||||||
<div class="w-8 h-8 rounded-full bg-surface-container-high border-2 border-surface-container-lowest flex items-center justify-center text-primary"><span class="material-symbols-outlined text-[14px]" data-icon="bolt"></span></div>
|
|
||||||
</div>
|
|
||||||
<a class="text-primary text-[12px] font-medium hover:underline" href="#">Bekijk Rapport →</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- FAB Suppression: Contextually hidden as per rules for Settings screens -->
|
|
||||||
<script>
|
|
||||||
// Micro-interaction for the toggle
|
|
||||||
document.querySelectorAll('.custom-toggle').forEach(toggle => {
|
|
||||||
toggle.addEventListener('change', function() {
|
|
||||||
const parent = this.closest('div');
|
|
||||||
if(this.checked) {
|
|
||||||
console.log('Integratie optie geactiveerd');
|
|
||||||
} else {
|
|
||||||
console.log('Integratie optie gedeactiveerd');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Simulating a "Test Connection" loading state
|
|
||||||
document.querySelectorAll('button').forEach(btn => {
|
|
||||||
if(btn.innerText.includes('Testen')) {
|
|
||||||
btn.addEventListener('click', function() {
|
|
||||||
const originalText = this.innerText;
|
|
||||||
this.disabled = true;
|
|
||||||
this.innerHTML = `<span class="flex items-center gap-2"><svg class="animate-spin h-4 w-4 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Laden...</span>`;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.disabled = false;
|
|
||||||
this.innerText = "Succes!";
|
|
||||||
this.classList.add('bg-secondary/20', 'text-secondary', 'border-secondary/30');
|
|
||||||
setTimeout(() => {
|
|
||||||
this.innerText = originalText;
|
|
||||||
this.classList.remove('bg-secondary/20', 'text-secondary', 'border-secondary/30');
|
|
||||||
}, 2000);
|
|
||||||
}, 1500);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 272 KiB |
-424
@@ -1,424 +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 | Integratie-instellingen</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"/>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background-color: #0b1326;
|
|
||||||
color: #dbe2fd;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(15, 23, 42, 0.6);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(30, 41, 59, 0.5);
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-dot.pulse {
|
|
||||||
animation: pulse-animation 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse-animation {
|
|
||||||
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(78, 222, 163, 0.7); }
|
|
||||||
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(78, 222, 163, 0); }
|
|
||||||
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(78, 222, 163, 0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom Switch */
|
|
||||||
.switch {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 44px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.switch input { opacity: 0; width: 0; height: 0; }
|
|
||||||
|
|
||||||
.slider {
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
top: 0; left: 0; right: 0; bottom: 0;
|
|
||||||
background-color: #2d3449;
|
|
||||||
transition: .4s;
|
|
||||||
border-radius: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider:before {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
height: 18px; width: 18px;
|
|
||||||
left: 3px; bottom: 3px;
|
|
||||||
background-color: white;
|
|
||||||
transition: .4s;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked + .slider { background-color: #00b47d; }
|
|
||||||
input:checked + .slider:before { transform: translateX(20px); }
|
|
||||||
|
|
||||||
.status-chip {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 2px 10px;
|
|
||||||
border-radius: 9999px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
border: 1px solid rgba(78, 222, 163, 0.2);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<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-md": ["Geist"],
|
|
||||||
"display-lg": ["Geist"],
|
|
||||||
"body-lg": ["Inter"],
|
|
||||||
"headline-lg": ["Geist"],
|
|
||||||
"body-md": ["Inter"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body class="bg-surface font-body-md text-on-surface">
|
|
||||||
<!-- TopNavBar -->
|
|
||||||
<header class="fixed top-0 w-full z-50 backdrop-blur-xl border-b border-outline-variant/20 bg-surface-glass shadow-sm flex justify-between items-center h-16 px-gutter">
|
|
||||||
<div class="flex items-center gap-base">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl" style="font-variation-settings: 'FILL' 1;">developer_board</span>
|
|
||||||
<h1 class="font-headline-md text-headline-md font-bold text-primary">DockDeck</h1>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-stack-md">
|
|
||||||
<nav class="flex items-center gap-6">
|
|
||||||
<a class="text-on-surface-variant hover:bg-surface-variant/50 transition-colors px-3 py-2 rounded-lg" href="#">Dashboard</a>
|
|
||||||
<a class="text-on-surface-variant hover:bg-surface-variant/50 transition-colors px-3 py-2 rounded-lg" href="#">Containers</a>
|
|
||||||
<a class="text-secondary font-bold px-3 py-2 rounded-lg" href="#">Integraties</a>
|
|
||||||
</nav>
|
|
||||||
<div class="h-6 w-[1px] bg-outline-variant/30"></div>
|
|
||||||
<div class="flex items-center gap-stack-sm">
|
|
||||||
<button class="material-symbols-outlined p-2 rounded-full hover:bg-surface-variant/50 transition-colors text-on-surface-variant">settings</button>
|
|
||||||
<button class="material-symbols-outlined p-2 rounded-full hover:bg-surface-variant/50 transition-colors text-on-surface-variant">account_circle</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- SideNavBar -->
|
|
||||||
<aside class="fixed left-0 top-16 h-[calc(100vh-64px)] w-64 bg-surface-container-low border-r border-outline-variant/10 flex flex-col p-base gap-stack-sm hidden xl:flex">
|
|
||||||
<div class="px-4 py-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container">
|
|
||||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">person</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-label-md text-label-md text-on-surface font-bold">Admin</p>
|
|
||||||
<p class="text-[12px] text-on-surface-variant">Unraid Server</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-1">
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-bright/30 hover:translate-x-1 duration-200 transition-all rounded-lg" 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 text-on-surface-variant hover:bg-surface-bright/30 hover:translate-x-1 duration-200 transition-all rounded-lg" 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 text-on-surface-variant hover:bg-surface-bright/30 hover:translate-x-1 duration-200 transition-all rounded-lg" 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 bg-secondary-container text-on-secondary-container rounded-lg" href="#">
|
|
||||||
<span class="material-symbols-outlined">settings_input_component</span>
|
|
||||||
<span class="font-label-md text-label-md font-bold">Integraties</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto space-y-1">
|
|
||||||
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-bright/30 transition-all rounded-lg" 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 text-on-surface-variant hover:bg-surface-bright/30 transition-all rounded-lg" href="#">
|
|
||||||
<span class="material-symbols-outlined text-error">logout</span>
|
|
||||||
<span class="font-label-md text-label-md">Logout</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content -->
|
|
||||||
<main class="xl:ml-64 pt-24 pb-12 px-6 md:px-12 max-w-7xl mx-auto">
|
|
||||||
<!-- Page Header -->
|
|
||||||
<div class="mb-12">
|
|
||||||
<h2 class="font-headline-lg text-headline-lg text-on-surface mb-2">Integratie-instellingen</h2>
|
|
||||||
<p class="text-on-surface-variant font-body-md max-w-2xl">
|
|
||||||
Beheer de kernverbindingen van je DockDeck-omgeving. Deze pagina configureert hoe DockDeck communiceert met je host-systeem en netwerklaag.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<!-- Bento Grid for Integrations -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
<!-- Unraid Metadata Panel -->
|
|
||||||
<div class="glass-panel rounded-xl p-6 flex flex-col gap-6 relative overflow-hidden">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary text-3xl" style="font-variation-settings: 'FILL' 1;">info</span>
|
|
||||||
</div>
|
|
||||||
<div class="status-chip text-status-online">
|
|
||||||
<div class="active-dot pulse"></div>
|
|
||||||
<span>Verbonden</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Unraid Metadata</h3>
|
|
||||||
<p class="text-sm text-on-surface-variant italic">Leest automatisch systeem-informatie uit de Unraid OS API.</p>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-3 bg-surface-container-low/50 p-4 rounded-lg border border-outline-variant/10">
|
|
||||||
<div class="flex justify-between text-xs">
|
|
||||||
<span class="text-outline">CPU-Model</span>
|
|
||||||
<span class="text-on-surface font-mono">Intel Core i7-10700K</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between text-xs">
|
|
||||||
<span class="text-outline">OS Versie</span>
|
|
||||||
<span class="text-on-surface font-mono">6.12.4</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between text-xs">
|
|
||||||
<span class="text-outline">Uptime</span>
|
|
||||||
<span class="text-on-surface font-mono">14d 2u 43m</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto pt-4 flex items-center justify-between">
|
|
||||||
<span class="text-[10px] uppercase tracking-wider text-outline">Gezien: 2 min geleden</span>
|
|
||||||
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg font-label-md text-label-md hover:brightness-110 active:scale-95 transition-all">Test verbinding</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Docker Socket Proxy Panel -->
|
|
||||||
<div class="glass-panel rounded-xl p-6 flex flex-col gap-6">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 bg-secondary/10 rounded-xl flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-secondary text-3xl" style="font-variation-settings: 'FILL' 1;">terminal</span>
|
|
||||||
</div>
|
|
||||||
<div class="status-chip text-status-online">
|
|
||||||
<div class="active-dot pulse"></div>
|
|
||||||
<span>Verbonden</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Docker Socket Proxy</h3>
|
|
||||||
<p class="text-sm text-on-surface-variant italic">Leest alleen containerstatistieken. Write-access is geblokkeerd.</p>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-2">
|
|
||||||
<div class="flex items-center gap-2 text-sm text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined text-sm">check_circle</span>
|
|
||||||
<span>API Versie: 1.41</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 text-sm text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined text-sm">lock</span>
|
|
||||||
<span>Mode: Read-Only (Secure)</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 text-sm text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined text-sm">link</span>
|
|
||||||
<span class="font-mono text-xs">tcp://192.168.1.50:2375</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto pt-4 flex items-center justify-between">
|
|
||||||
<span class="text-[10px] uppercase tracking-wider text-outline">Sync: 15s geleden</span>
|
|
||||||
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg font-label-md text-label-md hover:brightness-110 active:scale-95 transition-all">Test verbinding</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Nginx Proxy Manager Panel -->
|
|
||||||
<div class="glass-panel rounded-xl p-6 flex flex-col gap-6 lg:col-span-1 md:col-span-2 lg:col-auto">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div class="w-12 h-12 bg-tertiary/10 rounded-xl flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-tertiary text-3xl" style="font-variation-settings: 'FILL' 1;">router</span>
|
|
||||||
</div>
|
|
||||||
<div class="status-chip text-status-degraded">
|
|
||||||
<div class="active-dot bg-status-degraded shadow-[0_0_8px_#ffb783]"></div>
|
|
||||||
<span class="text-status-degraded">Bezig met synchroniseren</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-1">Nginx Proxy Manager</h3>
|
|
||||||
<p class="text-sm text-on-surface-variant italic">Leest proxy-hosts voor automatische URL-toewijzing.</p>
|
|
||||||
</div>
|
|
||||||
<div class="py-4 border-t border-b border-outline-variant/10 flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p class="font-label-md text-label-md text-on-surface">Externe URL's weergeven</p>
|
|
||||||
<p class="text-xs text-outline">Toon publieke domeinen in dashboard</p>
|
|
||||||
</div>
|
|
||||||
<label class="switch">
|
|
||||||
<input checked="" type="checkbox"/>
|
|
||||||
<span class="slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto flex items-center justify-between">
|
|
||||||
<span class="text-[10px] uppercase tracking-wider text-outline">Sync: 4m geleden</span>
|
|
||||||
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg font-label-md text-label-md hover:brightness-110 active:scale-95 transition-all">Test verbinding</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Global Status & Info -->
|
|
||||||
<div class="mt-stack-lg p-6 bg-surface-container-highest/30 rounded-xl border border-outline-variant/20 flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center text-secondary">
|
|
||||||
<span class="material-symbols-outlined text-2xl">security</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-bold text-on-surface">Veiligheidsmodus actief</h4>
|
|
||||||
<p class="text-sm text-on-surface-variant">Alle verbindingen zijn geconfigureerd als 'Read-Only'. DockDeck kan geen wijzigingen aanbrengen in uw infrastructuur.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-4 w-full md:w-auto">
|
|
||||||
<button class="flex-1 md:flex-none px-6 py-2.5 border border-outline-variant text-on-surface-variant rounded-lg font-label-md text-label-md hover:bg-surface-variant/50 transition-colors">Logboeken inzien</button>
|
|
||||||
<button class="flex-1 md:flex-none px-6 py-2.5 bg-primary text-on-primary rounded-lg font-label-md text-label-md font-bold hover:brightness-110 transition-all">Alles synchroniseren</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- Background Decoration -->
|
|
||||||
<div class="fixed top-0 left-0 w-full h-full -z-10 pointer-events-none opacity-20">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- Mobile Bottom Navigation Shell (Filter Logic Applied) -->
|
|
||||||
<nav class="md:hidden fixed bottom-0 left-0 w-full bg-surface-glass backdrop-blur-xl border-t border-outline-variant/10 flex justify-around items-center h-16 z-50">
|
|
||||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
|
|
||||||
<span class="material-symbols-outlined">dashboard</span>
|
|
||||||
<span class="text-[10px]">Overzicht</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
|
|
||||||
<span class="material-symbols-outlined">layers</span>
|
|
||||||
<span class="text-[10px]">Containers</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex flex-col items-center gap-1 text-secondary" href="#">
|
|
||||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">settings_input_component</span>
|
|
||||||
<span class="text-[10px] font-bold">Integraties</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="text-[10px]">Systeem</span>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
<script>
|
|
||||||
// Micro-interaction for Test Connection buttons
|
|
||||||
document.querySelectorAll('button').forEach(btn => {
|
|
||||||
if (btn.innerText === "Test verbinding") {
|
|
||||||
btn.addEventListener('click', function() {
|
|
||||||
const originalText = this.innerText;
|
|
||||||
this.innerHTML = '<span class="material-symbols-outlined animate-spin text-sm">refresh</span>';
|
|
||||||
this.classList.add('opacity-80');
|
|
||||||
this.disabled = true;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.innerHTML = '<span class="material-symbols-outlined text-sm">check</span> Succes';
|
|
||||||
this.classList.replace('bg-primary', 'bg-secondary');
|
|
||||||
this.classList.replace('text-on-primary', 'text-on-secondary');
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.innerText = originalText;
|
|
||||||
this.classList.replace('bg-secondary', 'bg-primary');
|
|
||||||
this.classList.replace('text-on-secondary', 'text-on-primary');
|
|
||||||
this.classList.remove('opacity-80');
|
|
||||||
this.disabled = false;
|
|
||||||
}, 2000);
|
|
||||||
}, 1200);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 284 KiB |
-430
@@ -1,430 +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@100..900&family=Inter:wght@100..900&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);
|
|
||||||
}
|
|
||||||
.active-dot {
|
|
||||||
box-shadow: 0 0 8px #4edea3;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
background-color: #0b1326;
|
|
||||||
color: #dbe2fd;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: #0b1326;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #2d3449;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #404176;
|
|
||||||
}
|
|
||||||
.preview-glow {
|
|
||||||
filter: drop-shadow(0 0 10px rgba(192, 193, 255, 0.3));
|
|
||||||
}
|
|
||||||
</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="bg-background text-on-surface">
|
|
||||||
<!-- TopNavBar -->
|
|
||||||
<header class="fixed top-0 w-full z-50 bg-surface-glass backdrop-blur-xl border-b border-outline-variant/20 shadow-sm flex justify-between items-center h-16 px-gutter">
|
|
||||||
<div class="flex items-center gap-stack-sm">
|
|
||||||
<span class="font-headline-md text-headline-md font-bold text-primary">DockDeck</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex flex-1 max-w-xl mx-gutter">
|
|
||||||
<div class="relative w-full">
|
|
||||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
|
||||||
<input class="w-full bg-surface-container-low border-none rounded-lg pl-10 pr-4 py-2 text-body-md focus:ring-2 focus:ring-primary-container transition-all outline-none" placeholder="Zoek instellingen..." type="text"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-base">
|
|
||||||
<button class="p-2 rounded-full hover:bg-surface-variant/50 transition-colors text-on-surface-variant active:scale-95 duration-150">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 rounded-full hover:bg-surface-variant/50 transition-colors text-on-surface-variant active:scale-95 duration-150">
|
|
||||||
<span class="material-symbols-outlined">account_circle</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- SideNavBar -->
|
|
||||||
<nav class="fixed left-0 top-16 h-[calc(100vh-64px)] w-64 bg-surface-container-low border-r border-outline-variant/10 flex flex-col p-base gap-stack-sm z-40 hidden xl:flex">
|
|
||||||
<div class="flex items-center gap-stack-sm p-base mb-base">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container font-bold">A</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-label-md text-label-md font-bold text-primary">Admin</p>
|
|
||||||
<p class="text-[10px] text-on-surface-variant uppercase tracking-widest">Unraid Server</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a class="flex items-center gap-3 p-3 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 rounded-lg 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 p-3 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 rounded-lg 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 p-3 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 rounded-lg 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 p-3 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 rounded-lg 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 p-3 bg-secondary-container text-on-secondary-container rounded-lg transition-all translate-x-1" href="#">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="font-label-md text-label-md font-bold">Settings</span>
|
|
||||||
</a>
|
|
||||||
<div class="mt-auto flex flex-col gap-1">
|
|
||||||
<a class="flex items-center gap-3 p-3 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 rounded-lg 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 p-3 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 rounded-lg transition-all" href="#">
|
|
||||||
<span class="material-symbols-outlined">logout</span>
|
|
||||||
<span class="font-label-md text-label-md">Logout</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- Main Content -->
|
|
||||||
<main class="xl:ml-64 mt-16 p-gutter min-h-screen">
|
|
||||||
<div class="max-w-container-max mx-auto">
|
|
||||||
<header class="mb-stack-lg">
|
|
||||||
<h1 class="font-headline-lg text-headline-lg text-primary mb-2">Weergave & Personalisatie</h1>
|
|
||||||
<p class="text-body-md text-on-surface-variant max-w-2xl">Pas je DockDeck dashboard aan naar jouw voorkeuren voor maximale productiviteit en stijl.</p>
|
|
||||||
</header>
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-stack-md">
|
|
||||||
<!-- Left Column: Settings -->
|
|
||||||
<div class="lg:col-span-7 space-y-stack-md">
|
|
||||||
<!-- Thema Sectie -->
|
|
||||||
<section class="glass-panel p-stack-md rounded-xl">
|
|
||||||
<h2 class="font-headline-md text-headline-md mb-stack-sm flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-secondary">palette</span>
|
|
||||||
Thema Selectie
|
|
||||||
</h2>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-stack-sm">
|
|
||||||
<!-- Dark Theme -->
|
|
||||||
<div class="group cursor-pointer">
|
|
||||||
<div class="relative aspect-video rounded-lg overflow-hidden border-2 border-primary ring-offset-2 ring-offset-background mb-2 transition-all group-hover:scale-[1.02]" data-alt="A sophisticated dark mode UI preview featuring a deep navy background with glowing cyan and indigo accents. The interface shows sleek dashboard cards with translucent glassmorphism effects and neon status indicators, reflecting a high-tech developer environment." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBTxt_sF5ycOllpG9X2dCjZmchye-65cpFBz5USUY7BJMLEXrs74MBaUa68rjHHTCQTX8hS9uhlgbweAiGeC9vJujNo-S9IZMNTIkKJw1yxX-nUP40K-ouTXMSvthhwQytvVxs0vTZViIn6tI6GisQxIXQ3IAsCYfo280h5PAi3jlZhgOTpXs0Zdew1u7sXAAkIBv7-V24UJrnk_VPXOU-b0RlVYS_0hH290HenpsCrtbpK3f2m1JYPdDma-sL4rKLm-qlby_kBBOat')">
|
|
||||||
<div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<span class="material-symbols-outlined text-white text-3xl">check_circle</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute bottom-0 left-0 right-0 h-1/3 bg-gradient-to-t from-black/80 to-transparent"></div>
|
|
||||||
</div>
|
|
||||||
<p class="font-label-md text-label-md text-center text-primary font-bold">Dark Theme</p>
|
|
||||||
</div>
|
|
||||||
<!-- Light Theme -->
|
|
||||||
<div class="group cursor-pointer">
|
|
||||||
<div class="relative aspect-video rounded-lg overflow-hidden border border-outline-variant/30 mb-2 transition-all group-hover:scale-[1.02]" data-alt="A clean and professional light mode UI preview with a soft white and pale gray background. The interface elements use subtle shadows and crisp indigo typography, maintaining the high-performance technical aesthetic of the brand in a bright, legible workspace setting." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBOPXM-JCNMRRGHO-hSc3X1fufIgo6PdT9yMDn43LaZtYgBwfp8DKD08XsX3zAqIC1nrhKtmJablku61FSe3hNBoOatPSPTW783T3I8qmp2W9mZdBK2vPozW1cPC-cXWcTrGgeXt38GD4BK6NKRD2OEYRBXiN9gAv9nWETCfi46KBJ9onR9AERhmKYDb5kr5gXoyTYzUAJyG1sjTD_2Qs_QtSR8QNRmALvQuA_kTZuETgvn4yWGjgTwYdQrbKcog5_tiinpzpanj1hN')">
|
|
||||||
<div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<span class="material-symbols-outlined text-white text-3xl">visibility</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="font-label-md text-label-md text-center text-on-surface-variant">Light Theme</p>
|
|
||||||
</div>
|
|
||||||
<!-- DockDeck Theme -->
|
|
||||||
<div class="group cursor-pointer">
|
|
||||||
<div class="relative aspect-video rounded-lg overflow-hidden border border-outline-variant/30 mb-2 transition-all group-hover:scale-[1.02]" data-alt="An artistic high-contrast theme for a dashboard featuring a deep violet background with vibrant lime green and electric pink status chips. The layout uses intense glassmorphism with heavy backdrop blurs and dramatic lighting effects to create a futuristic mission control aesthetic." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCYQCGSwANNEiduIdZL_aMusmoYDrB85pk_CkCTzXnUam_a8SuVqLAwNpu5fRFMuiTAKZaUySu9Ur-VW-K2_Wc0asJGahDDazeFqfwZ-AfDlrsvFGtCyw1Ykh-1bIFP9BlGQBS16EC7RM0wI00kF2hZthKvEhXfKdhJIp-HsKCHMhpJBxd8Ze0JFnqa1_DboeEwrHyCen0LxFmu4bh3w6lda4tN4qHBgxV-51WfbMg4ltQOl_RXCH-A4NqUMXflyHvafsxhIcvcxdUc')">
|
|
||||||
<div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<span class="material-symbols-outlined text-white text-3xl">visibility</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="font-label-md text-label-md text-center text-on-surface-variant">DockDeck Neon</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Modus & Dichtheid -->
|
|
||||||
<section class="glass-panel p-stack-md rounded-xl space-y-stack-md">
|
|
||||||
<div>
|
|
||||||
<h2 class="font-headline-md text-headline-md mb-stack-sm flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-secondary">grid_view</span>
|
|
||||||
Dashboard Modus
|
|
||||||
</h2>
|
|
||||||
<div class="flex gap-stack-sm">
|
|
||||||
<button class="flex-1 p-4 rounded-xl bg-secondary-container text-on-secondary-container flex flex-col items-center gap-2 border border-secondary transition-all">
|
|
||||||
<span class="material-symbols-outlined text-3xl">view_quilt</span>
|
|
||||||
<span class="font-label-md text-label-md font-bold">Overzicht</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex-1 p-4 rounded-xl bg-surface-container-high text-on-surface-variant hover:text-on-surface flex flex-col items-center gap-2 border border-outline-variant/20 transition-all">
|
|
||||||
<span class="material-symbols-outlined text-3xl">account_tree</span>
|
|
||||||
<span class="font-label-md text-label-md">Categorie</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="pt-4 border-t border-outline-variant/20">
|
|
||||||
<div class="flex justify-between items-center mb-4">
|
|
||||||
<h3 class="font-label-md text-label-md font-bold">Grid Dichtheid</h3>
|
|
||||||
<span class="px-2 py-1 rounded bg-primary-container text-on-primary-container text-[10px] font-bold">COMFORTABEL</span>
|
|
||||||
</div>
|
|
||||||
<input class="w-full h-2 bg-surface-container-highest rounded-lg appearance-none cursor-pointer accent-secondary" max="3" min="1" type="range" value="2"/>
|
|
||||||
<div class="flex justify-between mt-2 text-[10px] text-on-surface-variant uppercase tracking-tighter">
|
|
||||||
<span>Compact</span>
|
|
||||||
<span>Comfortabel</span>
|
|
||||||
<span>Ruim</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Toegankelijkheid -->
|
|
||||||
<section class="glass-panel p-stack-md rounded-xl">
|
|
||||||
<h2 class="font-headline-md text-headline-md mb-stack-sm flex items-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-secondary">accessibility</span>
|
|
||||||
Gedrag & Toegankelijkheid
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p class="font-label-md text-label-md font-bold">Beperk beweging</p>
|
|
||||||
<p class="text-xs text-on-surface-variant">Vermindert animaties en overgangen.</p>
|
|
||||||
</div>
|
|
||||||
<button class="w-11 h-6 bg-surface-container-highest rounded-full p-1 transition-colors duration-200" onclick="this.classList.toggle('bg-secondary-container'); this.firstElementChild.classList.toggle('translate-x-5')">
|
|
||||||
<div class="w-4 h-4 bg-white rounded-full transition-transform duration-200"></div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p class="font-label-md text-label-md font-bold">Hover-effecten versterken</p>
|
|
||||||
<p class="text-xs text-on-surface-variant">Voegt extra contrast toe bij muis interactie.</p>
|
|
||||||
</div>
|
|
||||||
<button class="w-11 h-6 bg-secondary-container rounded-full p-1 transition-colors duration-200" onclick="this.classList.toggle('bg-secondary-container'); this.firstElementChild.classList.toggle('translate-x-5')">
|
|
||||||
<div class="w-4 h-4 bg-white rounded-full translate-x-5 transition-transform duration-200"></div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<!-- Right Column: Live Preview -->
|
|
||||||
<div class="lg:col-span-5">
|
|
||||||
<div class="sticky top-stack-md">
|
|
||||||
<div class="glass-panel rounded-2xl overflow-hidden shadow-2xl border border-primary/20">
|
|
||||||
<div class="bg-surface-container-high px-4 py-3 flex items-center justify-between border-b border-outline-variant/20">
|
|
||||||
<div class="flex gap-1.5">
|
|
||||||
<div class="w-3 h-3 rounded-full bg-error/50"></div>
|
|
||||||
<div class="w-3 h-3 rounded-full bg-tertiary/50"></div>
|
|
||||||
<div class="w-3 h-3 rounded-full bg-secondary/50"></div>
|
|
||||||
</div>
|
|
||||||
<span class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">Live Preview</span>
|
|
||||||
<div class="w-6 h-6"></div>
|
|
||||||
</div>
|
|
||||||
<div class="p-stack-md bg-[#0b1326] min-h-[400px] flex flex-col gap-stack-sm relative overflow-hidden">
|
|
||||||
<!-- Atmospheric Background Effect -->
|
|
||||||
<div class="absolute -top-20 -right-20 w-64 h-64 bg-primary/10 blur-[80px] rounded-full"></div>
|
|
||||||
<div class="absolute -bottom-20 -left-20 w-48 h-48 bg-secondary/10 blur-[60px] rounded-full"></div>
|
|
||||||
<!-- Preview Dashboard Content -->
|
|
||||||
<div class="flex items-center justify-between mb-2">
|
|
||||||
<div class="h-6 w-32 bg-surface-variant rounded animate-pulse"></div>
|
|
||||||
<div class="h-8 w-8 rounded-full bg-surface-variant animate-pulse"></div>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-2 gap-stack-sm">
|
|
||||||
<!-- App Tile 1 -->
|
|
||||||
<div class="glass-panel p-3 rounded-xl border-outline-variant/50 relative group transition-all hover:-translate-y-1">
|
|
||||||
<div class="absolute top-2 right-2 w-2 h-2 rounded-full bg-secondary active-dot"></div>
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-secondary/20 flex items-center justify-center mb-3">
|
|
||||||
<span class="material-symbols-outlined text-secondary">terminal</span>
|
|
||||||
</div>
|
|
||||||
<div class="h-3 w-16 bg-on-surface/20 rounded mb-1"></div>
|
|
||||||
<div class="h-2 w-10 bg-on-surface/10 rounded"></div>
|
|
||||||
</div>
|
|
||||||
<!-- App Tile 2 -->
|
|
||||||
<div class="glass-panel p-3 rounded-xl border-outline-variant/50 relative group transition-all hover:-translate-y-1">
|
|
||||||
<div class="absolute top-2 right-2 w-2 h-2 rounded-full bg-secondary active-dot"></div>
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center mb-3">
|
|
||||||
<span class="material-symbols-outlined text-primary">database</span>
|
|
||||||
</div>
|
|
||||||
<div class="h-3 w-20 bg-on-surface/20 rounded mb-1"></div>
|
|
||||||
<div class="h-2 w-12 bg-on-surface/10 rounded"></div>
|
|
||||||
</div>
|
|
||||||
<!-- App Tile 3 -->
|
|
||||||
<div class="glass-panel p-3 rounded-xl border-outline-variant/50 relative group transition-all hover:-translate-y-1">
|
|
||||||
<div class="absolute top-2 right-2 w-2 h-2 rounded-full bg-secondary active-dot"></div>
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-tertiary/20 flex items-center justify-center mb-3">
|
|
||||||
<span class="material-symbols-outlined text-tertiary">monitoring</span>
|
|
||||||
</div>
|
|
||||||
<div class="h-3 w-14 bg-on-surface/20 rounded mb-1"></div>
|
|
||||||
<div class="h-2 w-10 bg-on-surface/10 rounded"></div>
|
|
||||||
</div>
|
|
||||||
<!-- App Tile 4 -->
|
|
||||||
<div class="glass-panel p-3 rounded-xl border-outline-variant/50 relative group transition-all hover:-translate-y-1">
|
|
||||||
<div class="absolute top-2 right-2 w-2 h-2 rounded-full bg-error active-dot shadow-[0_0_8px_#ffb4ab]"></div>
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-error/20 flex items-center justify-center mb-3">
|
|
||||||
<span class="material-symbols-outlined text-error">cloud_off</span>
|
|
||||||
</div>
|
|
||||||
<div class="h-3 w-18 bg-on-surface/20 rounded mb-1"></div>
|
|
||||||
<div class="h-2 w-8 bg-on-surface/10 rounded"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto glass-panel p-4 rounded-xl border-primary/30 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-8 h-8 rounded bg-primary/20 flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary text-sm">bolt</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="h-2.5 w-24 bg-on-surface/30 rounded mb-1"></div>
|
|
||||||
<div class="h-2 w-16 bg-on-surface/10 rounded"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-on-surface-variant text-sm">chevron_right</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-stack-sm flex gap-3">
|
|
||||||
<button class="flex-1 bg-primary text-on-primary py-3 rounded-xl font-bold font-label-md text-label-md hover:brightness-110 active:scale-95 transition-all">Wijzigingen Opslaan</button>
|
|
||||||
<button class="px-6 border border-outline-variant/30 text-on-surface-variant hover:text-on-surface rounded-xl font-label-md text-label-md active:scale-95 transition-all">Herstellen</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- Bottom Navigation (Mobile Only) -->
|
|
||||||
<footer class="md:hidden fixed bottom-0 w-full bg-surface-glass backdrop-blur-xl border-t border-outline-variant/20 h-16 flex justify-around items-center z-50">
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">dashboard</span>
|
|
||||||
<span class="text-[10px]">Dashboard</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">layers</span>
|
|
||||||
<span class="text-[10px]">Docker</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-secondary font-bold">
|
|
||||||
<span class="material-symbols-outlined">settings</span>
|
|
||||||
<span class="text-[10px]">Settings</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex flex-col items-center gap-1 text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined">account_circle</span>
|
|
||||||
<span class="text-[10px]">Profiel</span>
|
|
||||||
</button>
|
|
||||||
</footer>
|
|
||||||
<script>
|
|
||||||
// Simple interactivity for demonstration
|
|
||||||
document.querySelectorAll('input[type="range"]').forEach(range => {
|
|
||||||
range.addEventListener('input', (e) => {
|
|
||||||
const label = e.target.parentElement.querySelector('span.bg-primary-container');
|
|
||||||
const values = ['COMPACT', 'COMFORTABEL', 'RUIM'];
|
|
||||||
label.textContent = values[e.target.value - 1];
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Hover effect enhancement logic simulation
|
|
||||||
let hoverEnhanced = true;
|
|
||||||
const toggleEnhanced = () => {
|
|
||||||
hoverEnhanced = !hoverEnhanced;
|
|
||||||
console.log('Hover enhanced:', hoverEnhanced);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 317 KiB |
-179
@@ -1,179 +0,0 @@
|
|||||||
---
|
|
||||||
name: Obsidian Control
|
|
||||||
colors:
|
|
||||||
surface: '#0b1326'
|
|
||||||
surface-dim: '#0b1326'
|
|
||||||
surface-bright: '#31394d'
|
|
||||||
surface-container-lowest: '#060e20'
|
|
||||||
surface-container-low: '#131b2e'
|
|
||||||
surface-container: '#171f33'
|
|
||||||
surface-container-high: '#222a3d'
|
|
||||||
surface-container-highest: '#2d3449'
|
|
||||||
on-surface: '#dae2fd'
|
|
||||||
on-surface-variant: '#bbcabf'
|
|
||||||
inverse-surface: '#dae2fd'
|
|
||||||
inverse-on-surface: '#283044'
|
|
||||||
outline: '#86948a'
|
|
||||||
outline-variant: '#3c4a42'
|
|
||||||
surface-tint: '#4edea3'
|
|
||||||
primary: '#4edea3'
|
|
||||||
on-primary: '#003824'
|
|
||||||
primary-container: '#10b981'
|
|
||||||
on-primary-container: '#00422b'
|
|
||||||
inverse-primary: '#006c49'
|
|
||||||
secondary: '#b7c8e1'
|
|
||||||
on-secondary: '#213145'
|
|
||||||
secondary-container: '#3a4a5f'
|
|
||||||
on-secondary-container: '#a9bad3'
|
|
||||||
tertiary: '#ffb95f'
|
|
||||||
on-tertiary: '#472a00'
|
|
||||||
tertiary-container: '#e29100'
|
|
||||||
on-tertiary-container: '#523200'
|
|
||||||
error: '#ffb4ab'
|
|
||||||
on-error: '#690005'
|
|
||||||
error-container: '#93000a'
|
|
||||||
on-error-container: '#ffdad6'
|
|
||||||
primary-fixed: '#6ffbbe'
|
|
||||||
primary-fixed-dim: '#4edea3'
|
|
||||||
on-primary-fixed: '#002113'
|
|
||||||
on-primary-fixed-variant: '#005236'
|
|
||||||
secondary-fixed: '#d3e4fe'
|
|
||||||
secondary-fixed-dim: '#b7c8e1'
|
|
||||||
on-secondary-fixed: '#0b1c30'
|
|
||||||
on-secondary-fixed-variant: '#38485d'
|
|
||||||
tertiary-fixed: '#ffddb8'
|
|
||||||
tertiary-fixed-dim: '#ffb95f'
|
|
||||||
on-tertiary-fixed: '#2a1700'
|
|
||||||
on-tertiary-fixed-variant: '#653e00'
|
|
||||||
background: '#0b1326'
|
|
||||||
on-background: '#dae2fd'
|
|
||||||
surface-variant: '#2d3449'
|
|
||||||
typography:
|
|
||||||
display-lg:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 32px
|
|
||||||
fontWeight: '600'
|
|
||||||
lineHeight: 40px
|
|
||||||
letterSpacing: -0.02em
|
|
||||||
headline-md:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 24px
|
|
||||||
fontWeight: '600'
|
|
||||||
lineHeight: 32px
|
|
||||||
letterSpacing: -0.01em
|
|
||||||
headline-sm:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 18px
|
|
||||||
fontWeight: '600'
|
|
||||||
lineHeight: 24px
|
|
||||||
body-md:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 14px
|
|
||||||
fontWeight: '400'
|
|
||||||
lineHeight: 20px
|
|
||||||
body-sm:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 13px
|
|
||||||
fontWeight: '400'
|
|
||||||
lineHeight: 18px
|
|
||||||
data-mono:
|
|
||||||
fontFamily: JetBrains Mono
|
|
||||||
fontSize: 12px
|
|
||||||
fontWeight: '500'
|
|
||||||
lineHeight: 16px
|
|
||||||
label-caps:
|
|
||||||
fontFamily: Geist
|
|
||||||
fontSize: 11px
|
|
||||||
fontWeight: '700'
|
|
||||||
lineHeight: 16px
|
|
||||||
letterSpacing: 0.05em
|
|
||||||
rounded:
|
|
||||||
sm: 0.125rem
|
|
||||||
DEFAULT: 0.25rem
|
|
||||||
md: 0.375rem
|
|
||||||
lg: 0.5rem
|
|
||||||
xl: 0.75rem
|
|
||||||
full: 9999px
|
|
||||||
spacing:
|
|
||||||
density-standard: 1rem
|
|
||||||
density-compact: 0.5rem
|
|
||||||
gutter: 1.5rem
|
|
||||||
edge-margin: 2rem
|
|
||||||
sidebar-width: 260px
|
|
||||||
header-height: 64px
|
|
||||||
---
|
|
||||||
|
|
||||||
## Brand & Style
|
|
||||||
The design system is engineered for Managed Cloud Operations Platforms (MCOP), where the core brand personality is defined by **calm control, high precision, and technical credibility**. The aesthetic follows a **Modernist Technical** approach, blending the utility of developer tools with the refinement of enterprise SaaS.
|
|
||||||
|
|
||||||
The interface prioritizes reduced cognitive load through a dark-mode-first environment that emphasizes "dark operational surfaces." It evokes an emotional response of professional reliability—giving operators the confidence to manage complex cloud infrastructures without visual distraction. The style utilizes subtle glassmorphism for overlays to maintain spatial context and high-contrast typography for critical data.
|
|
||||||
|
|
||||||
## Colors
|
|
||||||
The palette shifts from generic corporate tones to a specialized **Operational Slate & Emerald** scheme.
|
|
||||||
|
|
||||||
- **Primary (Emerald):** Used for `Wijzigingsmodus` (Action/Change mode) and successful states.
|
|
||||||
- **Secondary (Slate):** Used for structural elements, borders, and `Alleen-lezen` (Read-only) states.
|
|
||||||
- **Tertiary (Amber):** Dedicated to `Planningsmodus` (Planning mode) and cautionary notices.
|
|
||||||
- **System Health vs. Security Risk:** These are semantically separated. Health uses a vibrant green-to-yellow spectrum, while Security Risk utilizes a high-chroma red and violet spectrum to differentiate "functional failure" from "active threat."
|
|
||||||
|
|
||||||
All color combinations are calibrated to meet **WCAG AA** standards. Status indicators must always be accompanied by icons or textural labels to ensure accessibility beyond color alone.
|
|
||||||
|
|
||||||
## Typography
|
|
||||||
This design system utilizes **Geist** for its exceptional legibility and neutral, technical character. For tabular data and technical identifiers (e.g., Resource IDs, IP addresses), **JetBrains Mono** is employed to ensure character distinction and alignment.
|
|
||||||
|
|
||||||
- **Headings:** Use Geist with tight letter-spacing for a modern, controlled look.
|
|
||||||
- **Tabular Data:** Always use the `data-mono` token for alignment and readability in dense grids.
|
|
||||||
- **Dutch Localization:** Ensure line heights accommodate Dutch compound words which can be significantly longer than English counterparts.
|
|
||||||
|
|
||||||
## Layout & Spacing
|
|
||||||
The layout uses a **fluid-to-fixed hybrid grid**. The global shell features a fixed left-hand navigation and a persistent top status bar.
|
|
||||||
|
|
||||||
**Density Modes:**
|
|
||||||
1. **Standard:** Used for dashboards and configuration screens. 16px (1rem) base spacing.
|
|
||||||
2. **Compact:** Used for log viewers and advanced data tables. 8px (0.5rem) base spacing to maximize information density.
|
|
||||||
|
|
||||||
**Breakpoints:**
|
|
||||||
- **Mobile (<768px):** Navigation collapses to a bottom bar; margins reduce to 16px.
|
|
||||||
- **Tablet (768px - 1280px):** Sidebar collapses to icons only.
|
|
||||||
- **Desktop (>1280px):** Full sidebar and multi-pane layouts enabled.
|
|
||||||
|
|
||||||
## Elevation & Depth
|
|
||||||
Depth is communicated through **Tonal Layering** rather than traditional shadows. In a dark operational environment, higher elevation is represented by lighter surface colors.
|
|
||||||
|
|
||||||
- **Base Layer:** Darkest slate (#020617) for the application background.
|
|
||||||
- **Surface Layer:** One step lighter (#0F172A) for primary content cards and panels.
|
|
||||||
- **Overlay Layer:** Semi-transparent glassmorphism (15% opacity tint with 20px backdrop blur) for modals and dropdowns to keep the underlying system state visible.
|
|
||||||
- **Borders:** Subtle 1px strokes (#1E293B) replace shadows for a cleaner, "flat-tech" appearance.
|
|
||||||
|
|
||||||
## Shapes
|
|
||||||
The design system uses a **Soft (0.25rem)** rounding strategy. This maintains a crisp, professional edge suitable for technical software while avoiding the harshness of 90-degree corners.
|
|
||||||
|
|
||||||
- **Input Fields & Buttons:** 4px radius.
|
|
||||||
- **Cards & Modals:** 8px (rounded-lg) for clear container separation.
|
|
||||||
- **Environment Badges:** Fully pill-shaped to differentiate status metadata from interactive components.
|
|
||||||
|
|
||||||
## Components
|
|
||||||
|
|
||||||
### Global App Shell
|
|
||||||
A persistent top bar displays the **Tenant Switcher** (dropdown) and **Environment Badges** (e.g., `Productie`, `Staging`). The right side of the bar hosts the global system health pulse.
|
|
||||||
|
|
||||||
### Specialized Badges
|
|
||||||
- **Versheid (Freshness):** Indicators for data latency (e.g., "Live", "5m geleden").
|
|
||||||
- **Bron van Gezag (Source-of-Authority):** A distinctive icon-prefix badge showing if data is from `Cloud Provider` or `On-Premise`.
|
|
||||||
- **Beveiligd Object (Protected-Object):** A lock-themed badge for resources requiring MFA to modify.
|
|
||||||
|
|
||||||
### Safety-first Action Previews
|
|
||||||
Before executing any `Wijziging` (Change), a modal must present an **Impact-analyse**:
|
|
||||||
- **Risico:** Low/Medium/High/Critical.
|
|
||||||
- **Omkeerbaarheid:** Clear label stating if the action is `Herstelbaar` (Reversible) or `Permanent`.
|
|
||||||
- **Impact Radius:** A list of affected downstream resources.
|
|
||||||
|
|
||||||
### Advanced Data Tables
|
|
||||||
- **Bulk Selection:** A dedicated action bar appears at the bottom of the screen when items are selected.
|
|
||||||
- **Filter States:** Visible "Chips" in the header to allow quick removal of active filters.
|
|
||||||
- **Compact Toggle:** A dedicated UI switch to toggle between Standard and Compact row heights.
|
|
||||||
|
|
||||||
### Operational Modes (UI State)
|
|
||||||
- **Alleen-lezen:** Header is Neutral Gray; primary actions are disabled.
|
|
||||||
- **Planningsmodus:** Header features a subtle Amber stripe; actions are "Stage" instead of "Execute".
|
|
||||||
- **Wijzigingsmodus:** Header features a subtle Emerald glow; all destructive actions are unlocked.
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
@@ -1,220 +0,0 @@
|
|||||||
{
|
|
||||||
"schema_version": 1,
|
|
||||||
"model": "/app/storage/training/building-be-v33-yolo11l-rotation-regularized-r1/iteration-001/candidate.pt",
|
|
||||||
"summary": "/app/storage/operator-data/building-be-v30-rotated-holdouts-r1/calibration/yolo_tile_dataset_summary.json",
|
|
||||||
"threshold": 0.02,
|
|
||||||
"match_iou": 0.25,
|
|
||||||
"samples": [
|
|
||||||
"genk-industry-train"
|
|
||||||
],
|
|
||||||
"legend": {
|
|
||||||
"reference": "yellow",
|
|
||||||
"matched_prediction": "green",
|
|
||||||
"false_positive": "red",
|
|
||||||
"false_negative": "magenta"
|
|
||||||
},
|
|
||||||
"geometry": {
|
|
||||||
"reference": {
|
|
||||||
"area_share": {
|
|
||||||
"count": 338,
|
|
||||||
"median": 0.041666667499999976,
|
|
||||||
"p90": 0.13444010562499992,
|
|
||||||
"p95": 0.18716769704861105,
|
|
||||||
"p99": 0.3315429665625,
|
|
||||||
"max": 1.0
|
|
||||||
},
|
|
||||||
"aspect_ratio": {
|
|
||||||
"count": 338,
|
|
||||||
"median": 1.4962686370115839,
|
|
||||||
"p90": 3.5681819510743784,
|
|
||||||
"p95": 6.052631238559578,
|
|
||||||
"p99": 11.5,
|
|
||||||
"max": 31.699995814400538
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"matched": {
|
|
||||||
"area_share": {
|
|
||||||
"count": 230,
|
|
||||||
"median": 0.07151662196138497,
|
|
||||||
"p90": 0.19851095458115434,
|
|
||||||
"p95": 0.2571341409752494,
|
|
||||||
"p99": 0.9420929719723353,
|
|
||||||
"max": 0.9554557734008216
|
|
||||||
},
|
|
||||||
"aspect_ratio": {
|
|
||||||
"count": 230,
|
|
||||||
"median": 1.2699186574908667,
|
|
||||||
"p90": 2.181951416274265,
|
|
||||||
"p95": 2.6990222168919176,
|
|
||||||
"p99": 3.3889875335047184,
|
|
||||||
"max": 4.849564664775975
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"false_positive": {
|
|
||||||
"area_share": {
|
|
||||||
"count": 406,
|
|
||||||
"median": 0.04993198819198241,
|
|
||||||
"p90": 0.20385685010478483,
|
|
||||||
"p95": 0.26342950975102686,
|
|
||||||
"p99": 0.9240076295477402,
|
|
||||||
"max": 0.9727196192452536
|
|
||||||
},
|
|
||||||
"aspect_ratio": {
|
|
||||||
"count": 406,
|
|
||||||
"median": 1.372857491117996,
|
|
||||||
"p90": 2.4137304286864176,
|
|
||||||
"p95": 2.9231592178599466,
|
|
||||||
"p99": 3.9573746420891225,
|
|
||||||
"max": 7.008886112292641
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"false_negative": {
|
|
||||||
"area_share": {
|
|
||||||
"count": 108,
|
|
||||||
"median": 0.017011854548611108,
|
|
||||||
"p90": 0.049370659626736084,
|
|
||||||
"p95": 0.063374836328125,
|
|
||||||
"p99": 0.087890625,
|
|
||||||
"max": 0.113579644548611
|
|
||||||
},
|
|
||||||
"aspect_ratio": {
|
|
||||||
"count": 108,
|
|
||||||
"median": 1.7549949901698705,
|
|
||||||
"p90": 6.357143346938822,
|
|
||||||
"p95": 10.545455656198481,
|
|
||||||
"p99": 22.444444586666666,
|
|
||||||
"max": 31.699995814400538
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"tiles": [
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0000_r0_c0_z0_0.png",
|
|
||||||
"label_count": 24,
|
|
||||||
"true_positive": 16,
|
|
||||||
"false_positive": 26,
|
|
||||||
"false_negative": 8
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0000_r0_c0_z0_256.png",
|
|
||||||
"label_count": 17,
|
|
||||||
"true_positive": 11,
|
|
||||||
"false_positive": 22,
|
|
||||||
"false_negative": 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0000_r0_c0_z256_0.png",
|
|
||||||
"label_count": 27,
|
|
||||||
"true_positive": 12,
|
|
||||||
"false_positive": 20,
|
|
||||||
"false_negative": 15
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0000_r0_c0_z256_256.png",
|
|
||||||
"label_count": 32,
|
|
||||||
"true_positive": 19,
|
|
||||||
"false_positive": 18,
|
|
||||||
"false_negative": 13
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0001_r0_c416_z0_0.png",
|
|
||||||
"label_count": 15,
|
|
||||||
"true_positive": 11,
|
|
||||||
"false_positive": 31,
|
|
||||||
"false_negative": 4
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0001_r0_c416_z0_256.png",
|
|
||||||
"label_count": 14,
|
|
||||||
"true_positive": 8,
|
|
||||||
"false_positive": 24,
|
|
||||||
"false_negative": 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0001_r0_c416_z256_0.png",
|
|
||||||
"label_count": 27,
|
|
||||||
"true_positive": 23,
|
|
||||||
"false_positive": 26,
|
|
||||||
"false_negative": 4
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0001_r0_c416_z256_256.png",
|
|
||||||
"label_count": 14,
|
|
||||||
"true_positive": 13,
|
|
||||||
"false_positive": 27,
|
|
||||||
"false_negative": 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0002_r416_c0_z0_0.png",
|
|
||||||
"label_count": 22,
|
|
||||||
"true_positive": 11,
|
|
||||||
"false_positive": 17,
|
|
||||||
"false_negative": 11
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0002_r416_c0_z0_256.png",
|
|
||||||
"label_count": 35,
|
|
||||||
"true_positive": 21,
|
|
||||||
"false_positive": 14,
|
|
||||||
"false_negative": 14
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0002_r416_c0_z256_0.png",
|
|
||||||
"label_count": 16,
|
|
||||||
"true_positive": 13,
|
|
||||||
"false_positive": 32,
|
|
||||||
"false_negative": 3
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0002_r416_c0_z256_256.png",
|
|
||||||
"label_count": 23,
|
|
||||||
"true_positive": 15,
|
|
||||||
"false_positive": 21,
|
|
||||||
"false_negative": 8
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0003_r416_c416_z0_0.png",
|
|
||||||
"label_count": 26,
|
|
||||||
"true_positive": 21,
|
|
||||||
"false_positive": 30,
|
|
||||||
"false_negative": 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0003_r416_c416_z0_256.png",
|
|
||||||
"label_count": 6,
|
|
||||||
"true_positive": 5,
|
|
||||||
"false_positive": 45,
|
|
||||||
"false_negative": 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0003_r416_c416_z256_0.png",
|
|
||||||
"label_count": 23,
|
|
||||||
"true_positive": 18,
|
|
||||||
"false_positive": 20,
|
|
||||||
"false_negative": 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "genk-industry-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/genk-industry-train_0003_r416_c416_z256_256.png",
|
|
||||||
"label_count": 17,
|
|
||||||
"true_positive": 13,
|
|
||||||
"false_positive": 33,
|
|
||||||
"false_negative": 4
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 MiB |
-220
@@ -1,220 +0,0 @@
|
|||||||
{
|
|
||||||
"schema_version": 1,
|
|
||||||
"model": "/app/storage/training/building-be-v33-yolo11l-rotation-regularized-r1/iteration-001/candidate.pt",
|
|
||||||
"summary": "/app/storage/operator-data/building-be-v30-rotated-holdouts-r1/calibration/yolo_tile_dataset_summary.json",
|
|
||||||
"threshold": 0.02,
|
|
||||||
"match_iou": 0.25,
|
|
||||||
"samples": [
|
|
||||||
"lokeren-ribbon-train"
|
|
||||||
],
|
|
||||||
"legend": {
|
|
||||||
"reference": "yellow",
|
|
||||||
"matched_prediction": "green",
|
|
||||||
"false_positive": "red",
|
|
||||||
"false_negative": "magenta"
|
|
||||||
},
|
|
||||||
"geometry": {
|
|
||||||
"reference": {
|
|
||||||
"area_share": {
|
|
||||||
"count": 626,
|
|
||||||
"median": 0.024105495789930563,
|
|
||||||
"p90": 0.05283610164062493,
|
|
||||||
"p95": 0.06494140734375,
|
|
||||||
"p99": 0.10803222656249999,
|
|
||||||
"max": 0.1717529296875
|
|
||||||
},
|
|
||||||
"aspect_ratio": {
|
|
||||||
"count": 626,
|
|
||||||
"median": 1.404918084303365,
|
|
||||||
"p90": 2.4468086045088318,
|
|
||||||
"p95": 2.8269230073372804,
|
|
||||||
"p99": 4.307692568994086,
|
|
||||||
"max": 11.0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"matched": {
|
|
||||||
"area_share": {
|
|
||||||
"count": 420,
|
|
||||||
"median": 0.04354447306734517,
|
|
||||||
"p90": 0.07574379198059786,
|
|
||||||
"p95": 0.0871026223402901,
|
|
||||||
"p99": 0.14168901977266538,
|
|
||||||
"max": 0.22531782415795712
|
|
||||||
},
|
|
||||||
"aspect_ratio": {
|
|
||||||
"count": 420,
|
|
||||||
"median": 1.2577785750145072,
|
|
||||||
"p90": 2.071724511910444,
|
|
||||||
"p95": 2.5182856881285645,
|
|
||||||
"p99": 3.369228702110751,
|
|
||||||
"max": 4.11930690141678
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"false_positive": {
|
|
||||||
"area_share": {
|
|
||||||
"count": 733,
|
|
||||||
"median": 0.034581028300648436,
|
|
||||||
"p90": 0.11523054054110086,
|
|
||||||
"p95": 0.21367703243527103,
|
|
||||||
"p99": 0.9053550285003372,
|
|
||||||
"max": 0.9264573896154693
|
|
||||||
},
|
|
||||||
"aspect_ratio": {
|
|
||||||
"count": 733,
|
|
||||||
"median": 1.2965030555397925,
|
|
||||||
"p90": 2.7956813131281595,
|
|
||||||
"p95": 3.2247266223475957,
|
|
||||||
"p99": 4.748123855618314,
|
|
||||||
"max": 6.793088751091444
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"false_negative": {
|
|
||||||
"area_share": {
|
|
||||||
"count": 206,
|
|
||||||
"median": 0.006934272118055553,
|
|
||||||
"p90": 0.033203125,
|
|
||||||
"p95": 0.03849283796875,
|
|
||||||
"p99": 0.0541924376736111,
|
|
||||||
"max": 0.07318793209201388
|
|
||||||
},
|
|
||||||
"aspect_ratio": {
|
|
||||||
"count": 206,
|
|
||||||
"median": 1.3660714135714294,
|
|
||||||
"p90": 2.2456140126315796,
|
|
||||||
"p95": 2.5652173477504743,
|
|
||||||
"p99": 3.7000001728000047,
|
|
||||||
"max": 11.0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"tiles": [
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0000_r0_c0_z0_0.png",
|
|
||||||
"label_count": 42,
|
|
||||||
"true_positive": 31,
|
|
||||||
"false_positive": 57,
|
|
||||||
"false_negative": 11
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0000_r0_c0_z0_256.png",
|
|
||||||
"label_count": 35,
|
|
||||||
"true_positive": 29,
|
|
||||||
"false_positive": 61,
|
|
||||||
"false_negative": 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0000_r0_c0_z256_0.png",
|
|
||||||
"label_count": 47,
|
|
||||||
"true_positive": 36,
|
|
||||||
"false_positive": 47,
|
|
||||||
"false_negative": 11
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0000_r0_c0_z256_256.png",
|
|
||||||
"label_count": 51,
|
|
||||||
"true_positive": 34,
|
|
||||||
"false_positive": 43,
|
|
||||||
"false_negative": 17
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0001_r0_c395_z0_0.png",
|
|
||||||
"label_count": 28,
|
|
||||||
"true_positive": 22,
|
|
||||||
"false_positive": 51,
|
|
||||||
"false_negative": 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0001_r0_c395_z0_256.png",
|
|
||||||
"label_count": 48,
|
|
||||||
"true_positive": 28,
|
|
||||||
"false_positive": 46,
|
|
||||||
"false_negative": 20
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0001_r0_c395_z256_0.png",
|
|
||||||
"label_count": 57,
|
|
||||||
"true_positive": 37,
|
|
||||||
"false_positive": 52,
|
|
||||||
"false_negative": 20
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0001_r0_c395_z256_256.png",
|
|
||||||
"label_count": 49,
|
|
||||||
"true_positive": 39,
|
|
||||||
"false_positive": 43,
|
|
||||||
"false_negative": 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0002_r395_c0_z0_0.png",
|
|
||||||
"label_count": 48,
|
|
||||||
"true_positive": 25,
|
|
||||||
"false_positive": 31,
|
|
||||||
"false_negative": 23
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0002_r395_c0_z0_256.png",
|
|
||||||
"label_count": 43,
|
|
||||||
"true_positive": 27,
|
|
||||||
"false_positive": 35,
|
|
||||||
"false_negative": 16
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0002_r395_c0_z256_0.png",
|
|
||||||
"label_count": 40,
|
|
||||||
"true_positive": 20,
|
|
||||||
"false_positive": 43,
|
|
||||||
"false_negative": 20
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0002_r395_c0_z256_256.png",
|
|
||||||
"label_count": 22,
|
|
||||||
"true_positive": 15,
|
|
||||||
"false_positive": 44,
|
|
||||||
"false_negative": 7
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0003_r395_c395_z0_0.png",
|
|
||||||
"label_count": 49,
|
|
||||||
"true_positive": 34,
|
|
||||||
"false_positive": 52,
|
|
||||||
"false_negative": 15
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0003_r395_c395_z0_256.png",
|
|
||||||
"label_count": 34,
|
|
||||||
"true_positive": 27,
|
|
||||||
"false_positive": 50,
|
|
||||||
"false_negative": 7
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0003_r395_c395_z256_0.png",
|
|
||||||
"label_count": 21,
|
|
||||||
"true_positive": 13,
|
|
||||||
"false_positive": 58,
|
|
||||||
"false_negative": 8
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "lokeren-ribbon-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/lokeren-ribbon-train_0003_r395_c395_z256_256.png",
|
|
||||||
"label_count": 12,
|
|
||||||
"true_positive": 3,
|
|
||||||
"false_positive": 20,
|
|
||||||
"false_negative": 9
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 MiB |
-220
@@ -1,220 +0,0 @@
|
|||||||
{
|
|
||||||
"schema_version": 1,
|
|
||||||
"model": "/app/storage/training/building-be-v33-yolo11l-rotation-regularized-r1/iteration-001/candidate.pt",
|
|
||||||
"summary": "/app/storage/operator-data/building-be-v30-rotated-holdouts-r1/calibration/yolo_tile_dataset_summary.json",
|
|
||||||
"threshold": 0.02,
|
|
||||||
"match_iou": 0.25,
|
|
||||||
"samples": [
|
|
||||||
"ostend-coastal-train"
|
|
||||||
],
|
|
||||||
"legend": {
|
|
||||||
"reference": "yellow",
|
|
||||||
"matched_prediction": "green",
|
|
||||||
"false_positive": "red",
|
|
||||||
"false_negative": "magenta"
|
|
||||||
},
|
|
||||||
"geometry": {
|
|
||||||
"reference": {
|
|
||||||
"area_share": {
|
|
||||||
"count": 46,
|
|
||||||
"median": 0.11498006316406245,
|
|
||||||
"p90": 0.5957234677343751,
|
|
||||||
"p95": 0.76041667,
|
|
||||||
"p99": 1.0,
|
|
||||||
"max": 1.0
|
|
||||||
},
|
|
||||||
"aspect_ratio": {
|
|
||||||
"count": 46,
|
|
||||||
"median": 1.3931591894640243,
|
|
||||||
"p90": 2.5066666496000005,
|
|
||||||
"p95": 3.3902440395002955,
|
|
||||||
"p99": 4.166666666666667,
|
|
||||||
"max": 4.166666666666667
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"matched": {
|
|
||||||
"area_share": {
|
|
||||||
"count": 37,
|
|
||||||
"median": 0.103368325942424,
|
|
||||||
"p90": 0.960510907801758,
|
|
||||||
"p95": 0.961443528228294,
|
|
||||||
"p99": 0.9675038678905048,
|
|
||||||
"max": 0.9675038678905048
|
|
||||||
},
|
|
||||||
"aspect_ratio": {
|
|
||||||
"count": 37,
|
|
||||||
"median": 1.0741198977650206,
|
|
||||||
"p90": 1.7965107909999176,
|
|
||||||
"p95": 2.031736149075751,
|
|
||||||
"p99": 2.4426746916804336,
|
|
||||||
"max": 2.4426746916804336
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"false_positive": {
|
|
||||||
"area_share": {
|
|
||||||
"count": 268,
|
|
||||||
"median": 0.07739730946661932,
|
|
||||||
"p90": 0.22339239581131348,
|
|
||||||
"p95": 0.27401130787593087,
|
|
||||||
"p99": 0.9555367739508974,
|
|
||||||
"max": 0.9745105956175415
|
|
||||||
},
|
|
||||||
"aspect_ratio": {
|
|
||||||
"count": 268,
|
|
||||||
"median": 1.2243194185289603,
|
|
||||||
"p90": 1.8480747263777986,
|
|
||||||
"p95": 2.2133905118780652,
|
|
||||||
"p99": 3.1314726443655205,
|
|
||||||
"max": 3.9135288253718294
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"false_negative": {
|
|
||||||
"area_share": {
|
|
||||||
"count": 9,
|
|
||||||
"median": 0.0281982421875,
|
|
||||||
"p90": 0.10327826826388889,
|
|
||||||
"p95": 0.14211697302951382,
|
|
||||||
"p99": 0.14211697302951382,
|
|
||||||
"max": 0.14211697302951382
|
|
||||||
},
|
|
||||||
"aspect_ratio": {
|
|
||||||
"count": 9,
|
|
||||||
"median": 1.6185566928685302,
|
|
||||||
"p90": 2.083333439999999,
|
|
||||||
"p95": 2.346154010887576,
|
|
||||||
"p99": 2.346154010887576,
|
|
||||||
"max": 2.346154010887576
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"tiles": [
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0000_r0_c0_z0_0.png",
|
|
||||||
"label_count": 0,
|
|
||||||
"true_positive": 0,
|
|
||||||
"false_positive": 21,
|
|
||||||
"false_negative": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0000_r0_c0_z0_256.png",
|
|
||||||
"label_count": 2,
|
|
||||||
"true_positive": 2,
|
|
||||||
"false_positive": 16,
|
|
||||||
"false_negative": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0000_r0_c0_z256_0.png",
|
|
||||||
"label_count": 0,
|
|
||||||
"true_positive": 0,
|
|
||||||
"false_positive": 11,
|
|
||||||
"false_negative": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0000_r0_c0_z256_256.png",
|
|
||||||
"label_count": 2,
|
|
||||||
"true_positive": 2,
|
|
||||||
"false_positive": 11,
|
|
||||||
"false_negative": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0001_r0_c424_z0_0.png",
|
|
||||||
"label_count": 5,
|
|
||||||
"true_positive": 4,
|
|
||||||
"false_positive": 10,
|
|
||||||
"false_negative": 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0001_r0_c424_z0_256.png",
|
|
||||||
"label_count": 15,
|
|
||||||
"true_positive": 10,
|
|
||||||
"false_positive": 15,
|
|
||||||
"false_negative": 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0001_r0_c424_z256_0.png",
|
|
||||||
"label_count": 3,
|
|
||||||
"true_positive": 3,
|
|
||||||
"false_positive": 15,
|
|
||||||
"false_negative": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0001_r0_c424_z256_256.png",
|
|
||||||
"label_count": 5,
|
|
||||||
"true_positive": 3,
|
|
||||||
"false_positive": 18,
|
|
||||||
"false_negative": 2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0002_r424_c0_z0_0.png",
|
|
||||||
"label_count": 1,
|
|
||||||
"true_positive": 1,
|
|
||||||
"false_positive": 3,
|
|
||||||
"false_negative": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0002_r424_c0_z0_256.png",
|
|
||||||
"label_count": 2,
|
|
||||||
"true_positive": 2,
|
|
||||||
"false_positive": 16,
|
|
||||||
"false_negative": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0002_r424_c0_z256_0.png",
|
|
||||||
"label_count": 0,
|
|
||||||
"true_positive": 0,
|
|
||||||
"false_positive": 13,
|
|
||||||
"false_negative": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0002_r424_c0_z256_256.png",
|
|
||||||
"label_count": 1,
|
|
||||||
"true_positive": 1,
|
|
||||||
"false_positive": 24,
|
|
||||||
"false_negative": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0003_r424_c424_z0_0.png",
|
|
||||||
"label_count": 2,
|
|
||||||
"true_positive": 2,
|
|
||||||
"false_positive": 14,
|
|
||||||
"false_negative": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0003_r424_c424_z0_256.png",
|
|
||||||
"label_count": 2,
|
|
||||||
"true_positive": 1,
|
|
||||||
"false_positive": 26,
|
|
||||||
"false_negative": 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0003_r424_c424_z256_0.png",
|
|
||||||
"label_count": 2,
|
|
||||||
"true_positive": 2,
|
|
||||||
"false_positive": 20,
|
|
||||||
"false_negative": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"sample_slug": "ostend-coastal-train",
|
|
||||||
"image_path": "/app/storage/operator-data/yolo-building-be-v27-overlap384-train-r1/images/train/ostend-coastal-train_0003_r424_c424_z256_256.png",
|
|
||||||
"label_count": 4,
|
|
||||||
"true_positive": 4,
|
|
||||||
"false_positive": 35,
|
|
||||||
"false_negative": 0
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 MiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,130 +0,0 @@
|
|||||||
{
|
|
||||||
"schema_version": 1,
|
|
||||||
"status": "continue_training_loop",
|
|
||||||
"threshold_selection_source": "calibration_only",
|
|
||||||
"selected_threshold": 0.025,
|
|
||||||
"gates": {
|
|
||||||
"min_aggregate_f1": 0.55,
|
|
||||||
"min_region_f1": 0.45,
|
|
||||||
"min_region_precision": 0.5,
|
|
||||||
"min_region_recall": 0.4,
|
|
||||||
"max_pure_empty_false_positives": 0
|
|
||||||
},
|
|
||||||
"calibration": {
|
|
||||||
"threshold": 0.025,
|
|
||||||
"aggregate": {
|
|
||||||
"true_positive": 2996,
|
|
||||||
"false_positive": 2331,
|
|
||||||
"false_negative": 1808,
|
|
||||||
"precision": 0.5624178712220762,
|
|
||||||
"recall": 0.6236469608659451,
|
|
||||||
"f1": 0.5914519790741289
|
|
||||||
},
|
|
||||||
"regions": {
|
|
||||||
"brussels": {
|
|
||||||
"true_positive": 1192,
|
|
||||||
"false_positive": 616,
|
|
||||||
"false_negative": 656,
|
|
||||||
"precision": 0.6592920353982301,
|
|
||||||
"recall": 0.645021645021645,
|
|
||||||
"f1": 0.6520787746170679
|
|
||||||
},
|
|
||||||
"flanders": {
|
|
||||||
"true_positive": 468,
|
|
||||||
"false_positive": 571,
|
|
||||||
"false_negative": 542,
|
|
||||||
"precision": 0.4504331087584216,
|
|
||||||
"recall": 0.4633663366336634,
|
|
||||||
"f1": 0.4568081991215227
|
|
||||||
},
|
|
||||||
"wallonia": {
|
|
||||||
"true_positive": 1336,
|
|
||||||
"false_positive": 1144,
|
|
||||||
"false_negative": 610,
|
|
||||||
"precision": 0.5387096774193548,
|
|
||||||
"recall": 0.6865364850976362,
|
|
||||||
"f1": 0.6037053773158608
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"samples": {
|
|
||||||
"anderlecht-industry-train": {
|
|
||||||
"true_positive": 354,
|
|
||||||
"false_positive": 225,
|
|
||||||
"false_negative": 128,
|
|
||||||
"precision": 0.6113989637305699,
|
|
||||||
"recall": 0.7344398340248963,
|
|
||||||
"f1": 0.6672950047125353
|
|
||||||
},
|
|
||||||
"ath-rural-train": {
|
|
||||||
"true_positive": 648,
|
|
||||||
"false_positive": 519,
|
|
||||||
"false_negative": 288,
|
|
||||||
"precision": 0.5552699228791774,
|
|
||||||
"recall": 0.6923076923076923,
|
|
||||||
"f1": 0.616262482168331
|
|
||||||
},
|
|
||||||
"charleroi-core-train": {
|
|
||||||
"true_positive": 338,
|
|
||||||
"false_positive": 260,
|
|
||||||
"false_negative": 188,
|
|
||||||
"precision": 0.5652173913043478,
|
|
||||||
"recall": 0.6425855513307985,
|
|
||||||
"f1": 0.6014234875444839
|
|
||||||
},
|
|
||||||
"eupen-train": {
|
|
||||||
"true_positive": 350,
|
|
||||||
"false_positive": 365,
|
|
||||||
"false_negative": 134,
|
|
||||||
"precision": 0.48951048951048953,
|
|
||||||
"recall": 0.7231404958677686,
|
|
||||||
"f1": 0.5838198498748959
|
|
||||||
},
|
|
||||||
"genk-industry-train": {
|
|
||||||
"true_positive": 108,
|
|
||||||
"false_positive": 108,
|
|
||||||
"false_negative": 230,
|
|
||||||
"precision": 0.5,
|
|
||||||
"recall": 0.31952662721893493,
|
|
||||||
"f1": 0.3898916967509025
|
|
||||||
},
|
|
||||||
"ixelles-dense-train": {
|
|
||||||
"true_positive": 610,
|
|
||||||
"false_positive": 229,
|
|
||||||
"false_negative": 408,
|
|
||||||
"precision": 0.7270560190703218,
|
|
||||||
"recall": 0.5992141453831041,
|
|
||||||
"f1": 0.6569736133548734
|
|
||||||
},
|
|
||||||
"lokeren-ribbon-train": {
|
|
||||||
"true_positive": 340,
|
|
||||||
"false_positive": 377,
|
|
||||||
"false_negative": 286,
|
|
||||||
"precision": 0.47419804741980476,
|
|
||||||
"recall": 0.5431309904153354,
|
|
||||||
"f1": 0.5063291139240508
|
|
||||||
},
|
|
||||||
"ostend-coastal-train": {
|
|
||||||
"true_positive": 20,
|
|
||||||
"false_positive": 86,
|
|
||||||
"false_negative": 26,
|
|
||||||
"precision": 0.18867924528301888,
|
|
||||||
"recall": 0.43478260869565216,
|
|
||||||
"f1": 0.26315789473684215
|
|
||||||
},
|
|
||||||
"uccle-residential-train": {
|
|
||||||
"true_positive": 228,
|
|
||||||
"false_positive": 162,
|
|
||||||
"false_negative": 120,
|
|
||||||
"precision": 0.5846153846153846,
|
|
||||||
"recall": 0.6551724137931034,
|
|
||||||
"f1": 0.6178861788617886
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"pure_empty_false_positives": 0
|
|
||||||
},
|
|
||||||
"test": null,
|
|
||||||
"background": null,
|
|
||||||
"failures": [
|
|
||||||
"calibration_flanders_precision_below_gate"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 14 MiB |
+5
-4
@@ -8,9 +8,10 @@ GEOINTEL_MAX_IN_MEMORY_VECTOR_MB=64
|
|||||||
CORS_ORIGINS=http://localhost:1202,http://127.0.0.1:1202
|
CORS_ORIGINS=http://localhost:1202,http://127.0.0.1:1202
|
||||||
|
|
||||||
# Optional single-operator access gate. Store only a PBKDF2-SHA256 hash and
|
# Optional single-operator access gate. Store only a PBKDF2-SHA256 hash and
|
||||||
# a unique 32+ character signing secret. Guest access is enabled by default
|
# a unique 32+ character signing secret. Guest access is opt-in and should be
|
||||||
# whenever this gate is active; disable it explicitly on non-demo instances.
|
# enabled only on a dedicated demo installation with bounded public data.
|
||||||
GEOINTEL_AUTH_ENABLED=false
|
GEOINTEL_AUTH_ENABLED=false
|
||||||
|
GEOINTEL_AUTH_REQUIRE_HTTPS=false
|
||||||
GEOINTEL_AUTH_USERNAME=
|
GEOINTEL_AUTH_USERNAME=
|
||||||
GEOINTEL_AUTH_PASSWORD_HASH=
|
GEOINTEL_AUTH_PASSWORD_HASH=
|
||||||
GEOINTEL_AUTH_SESSION_SECRET=
|
GEOINTEL_AUTH_SESSION_SECRET=
|
||||||
@@ -20,7 +21,7 @@ GEOINTEL_AUTHENTIK_ISSUER=
|
|||||||
GEOINTEL_AUTHENTIK_CLIENT_ID=
|
GEOINTEL_AUTHENTIK_CLIENT_ID=
|
||||||
GEOINTEL_AUTHENTIK_CLIENT_SECRET=
|
GEOINTEL_AUTHENTIK_CLIENT_SECRET=
|
||||||
GEOINTEL_AUTHENTIK_ALLOWED_EMAIL=
|
GEOINTEL_AUTHENTIK_ALLOWED_EMAIL=
|
||||||
GEOINTEL_GUEST_ACCESS_ENABLED=true
|
GEOINTEL_GUEST_ACCESS_ENABLED=false
|
||||||
GEOINTEL_GUEST_DISPLAY_NAME=Gast
|
GEOINTEL_GUEST_DISPLAY_NAME=Gast
|
||||||
GEOINTEL_GUEST_SESSION_TTL_SECONDS=7200
|
GEOINTEL_GUEST_SESSION_TTL_SECONDS=7200
|
||||||
ORTHOPHOTO_ENABLED=true
|
ORTHOPHOTO_ENABLED=true
|
||||||
@@ -193,7 +194,7 @@ GEOINTEL_POSTGIS_DATA_PATH=./postgres-data
|
|||||||
GEOINTEL_POSTGRES_DB=geointel
|
GEOINTEL_POSTGRES_DB=geointel
|
||||||
GEOINTEL_POSTGRES_USER=geointel
|
GEOINTEL_POSTGRES_USER=geointel
|
||||||
GEOINTEL_POSTGRES_PASSWORD=geointel
|
GEOINTEL_POSTGRES_PASSWORD=geointel
|
||||||
GEOINTEL_CORS_ORIGINS=https://geointel.itworx.tech,http://geointel.itworx.tech,http://localhost:1202,http://127.0.0.1:1202,http://192.168.10.150:1202
|
GEOINTEL_CORS_ORIGINS=https://geointel.example.com,http://localhost:1202,http://127.0.0.1:1202
|
||||||
GEOINTEL_MAX_UPLOAD_MB=500
|
GEOINTEL_MAX_UPLOAD_MB=500
|
||||||
GEOINTEL_AOI_WORKER_ENABLED=false
|
GEOINTEL_AOI_WORKER_ENABLED=false
|
||||||
GEOINTEL_AOI_WORKER_POLL_SECONDS=2
|
GEOINTEL_AOI_WORKER_POLL_SECONDS=2
|
||||||
|
|||||||
@@ -82,3 +82,6 @@ build/
|
|||||||
# Local investigation scratch is never repository input.
|
# Local investigation scratch is never repository input.
|
||||||
/.codex-input/
|
/.codex-input/
|
||||||
/.codex-artifacts/
|
/.codex-artifacts/
|
||||||
|
/.playwright-mcp/
|
||||||
|
/.mcp.json
|
||||||
|
/data/
|
||||||
|
|||||||
@@ -1,21 +0,0 @@
|
|||||||
{
|
|
||||||
"mcpServers": {
|
|
||||||
"higgsfield": {
|
|
||||||
"command": "npx",
|
|
||||||
"args": ["-y", "higgsfield-mcp"],
|
|
||||||
"env": {
|
|
||||||
"HF_API_KEY": "${HF_API_KEY}",
|
|
||||||
"HF_SECRET": "${HF_SECRET}"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"aistudio": {
|
|
||||||
"command": "npx",
|
|
||||||
"args": ["-y", "aistudio-mcp-server"],
|
|
||||||
"env": {
|
|
||||||
"GEMINI_API_KEY": "${GEMINI_API_KEY}",
|
|
||||||
"GEMINI_MODEL": "gemini-2.5-flash",
|
|
||||||
"GEMINI_TIMEOUT": "600000"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
[ 3386ms] [ERROR] Failed to load resource: net::ERR_NAME_NOT_RESOLVED @ http://boot/config/plugins/dockerMan/images/media-codec-dashboard-icon.png:0
|
|
||||||
[ 421496ms] [ERROR] Failed to load resource: the server responded with a status of 404 (Not Found) @ http://192.168.10.150:1218/api/icons/media-codec-dashboard-icon.png:0
|
|
||||||
+6
-6
@@ -1600,7 +1600,7 @@
|
|||||||
## Sprint 162 Split-background promotion runtime pass (2026-07-11)
|
## Sprint 162 Split-background promotion runtime pass (2026-07-11)
|
||||||
|
|
||||||
- Hardened split-background preflight compatibility for legacy operator manifests by deriving missing background categories from `reference_feature_count`.
|
- Hardened split-background preflight compatibility for legacy operator manifests by deriving missing background categories from `reference_feature_count`.
|
||||||
- Ran Tower split-background promotion evidence against `http://192.168.10.150:1202`.
|
- Ran Tower split-background promotion evidence against `http://192.0.2.10:1202`.
|
||||||
- Produced a high-threshold promote candidate: `geointel-building-yolov8s-aoi1024bg512r3e50-pt|512|64|0.35`.
|
- Produced a high-threshold promote candidate: `geointel-building-yolov8s-aoi1024bg512r3e50-pt|512|64|0.35`.
|
||||||
- Verified the strict pure-empty background gate: 3 samples, 9 runs, 0 detections.
|
- Verified the strict pure-empty background gate: 3 samples, 9 runs, 0 detections.
|
||||||
- Preserved the current model default; no automatic activation, provider fetching, fake outputs, model downloads, API contracts or migrations changed.
|
- Preserved the current model default; no automatic activation, provider fetching, fake outputs, model downloads, API contracts or migrations changed.
|
||||||
@@ -1953,7 +1953,7 @@
|
|||||||
- `geel_grb_gbg_buildings.geojson` from the Digitaal Vlaanderen GRB OGC API Features `GBG` collection.
|
- `geel_grb_gbg_buildings.geojson` from the Digitaal Vlaanderen GRB OGC API Features `GBG` collection.
|
||||||
- Fixed raster upload metadata mapping so uploaded rasters persist canonical `bounds_json`, `resolution_json` and `bands_json` from extracted raster metadata.
|
- Fixed raster upload metadata mapping so uploaded rasters persist canonical `bounds_json`, `resolution_json` and `bands_json` from extracted raster metadata.
|
||||||
- Added regression coverage for raster upload metadata mapping.
|
- Added regression coverage for raster upload metadata mapping.
|
||||||
- Deployed the fix to Tower and ran the real-data detection + QA workflow against `http://192.168.10.150:1202`.
|
- Deployed the fix to Tower and ran the real-data detection + QA workflow against `http://192.0.2.10:1202`.
|
||||||
- The workflow passed with persisted raster/reference datasets, tile manifest, AnalysisRun, QualityCheck and detection GeoJSON export. A follow-up pass identified case-sensitive class filtering as the reason the initial Geel run persisted zero detections.
|
- The workflow passed with persisted raster/reference datasets, tile manifest, AnalysisRun, QualityCheck and detection GeoJSON export. A follow-up pass identified case-sensitive class filtering as the reason the initial Geel run persisted zero detections.
|
||||||
|
|
||||||
## Sprint 121 Real data detection and QA workflow smoke (2026-07-07)
|
## Sprint 121 Real data detection and QA workflow smoke (2026-07-07)
|
||||||
@@ -2178,7 +2178,7 @@
|
|||||||
|
|
||||||
## Sprint 91 populated workflow audit polish (2026-06-21)
|
## Sprint 91 populated workflow audit polish (2026-06-21)
|
||||||
|
|
||||||
- Audited the live populated demo workflow on `http://192.168.10.150:1202` across Overview, Data, Map, QA/QC, AI Labs and Exports.
|
- Audited the live populated demo workflow on `http://192.0.2.10:1202` across Overview, Data, Map, QA/QC, AI Labs and Exports.
|
||||||
- Tightened the Overview workflow guidance complete state so a fully populated flow shows `Ready for handoff` instead of another next-step prompt.
|
- Tightened the Overview workflow guidance complete state so a fully populated flow shows `Ready for handoff` instead of another next-step prompt.
|
||||||
- Clarified the Map guidance detail by separating rendered layer feature count from AOI context.
|
- Clarified the Map guidance detail by separating rendered layer feature count from AOI context.
|
||||||
- Added regression coverage for complete-state copy and precise Map guidance copy.
|
- Added regression coverage for complete-state copy and precise Map guidance copy.
|
||||||
@@ -2502,7 +2502,7 @@
|
|||||||
- Created a live Tower database backup before collation maintenance: `backups/geointel-before-collation-refresh-20260617-065707.dump`.
|
- Created a live Tower database backup before collation maintenance: `backups/geointel-before-collation-refresh-20260617-065707.dump`.
|
||||||
- Ran `REINDEX DATABASE geointel;` and `ALTER DATABASE "geointel" REFRESH COLLATION VERSION;` against the all-in-one PostGIS runtime.
|
- Ran `REINDEX DATABASE geointel;` and `ALTER DATABASE "geointel" REFRESH COLLATION VERSION;` against the all-in-one PostGIS runtime.
|
||||||
- Verified the reused database volume now reports matching collation versions: `stored=2.36 actual=2.36`.
|
- Verified the reused database volume now reports matching collation versions: `stored=2.36 actual=2.36`.
|
||||||
- Re-ran live migration smoke, browser runtime smoke, GIS runtime smoke and demo/export/golden QA workflow smoke successfully against `http://192.168.10.150:1202`.
|
- Re-ran live migration smoke, browser runtime smoke, GIS runtime smoke and demo/export/golden QA workflow smoke successfully against `http://192.0.2.10:1202`.
|
||||||
- No API contracts, migrations, product features, provider fetching or AI behavior were introduced.
|
- No API contracts, migrations, product features, provider fetching or AI behavior were introduced.
|
||||||
|
|
||||||
## Sprint 36 PostgreSQL collation maintenance visibility (2026-06-17)
|
## Sprint 36 PostgreSQL collation maintenance visibility (2026-06-17)
|
||||||
@@ -2553,7 +2553,7 @@
|
|||||||
- Updated Tower deploy scripts to stop the old multi-container stack without removing volumes and start the all-in-one stack.
|
- Updated Tower deploy scripts to stop the old multi-container stack without removing volumes and start the all-in-one stack.
|
||||||
- Updated the Unraid template so the Docker can be edited from Unraid with one web port, storage path, PostGIS data path and app icon.
|
- Updated the Unraid template so the Docker can be edited from Unraid with one web port, storage path, PostGIS data path and app icon.
|
||||||
- Hardened live migration and browser runtime smoke scripts with startup retries and an icon check.
|
- Hardened live migration and browser runtime smoke scripts with startup retries and an icon check.
|
||||||
- Verified Tower deployment at `http://192.168.10.150:1202` with one healthy `geointel` container, passing live migration smoke, API proxy smoke and icon smoke.
|
- Verified Tower deployment at `http://192.0.2.10:1202` with one healthy `geointel` container, passing live migration smoke, API proxy smoke and icon smoke.
|
||||||
- No API contracts, migrations, product features, provider fetching or AI behavior were introduced.
|
- No API contracts, migrations, product features, provider fetching or AI behavior were introduced.
|
||||||
|
|
||||||
## Sprint 31 Unraid deployment template (2026-06-17)
|
## Sprint 31 Unraid deployment template (2026-06-17)
|
||||||
@@ -3008,7 +3008,7 @@ Added:
|
|||||||
|
|
||||||
## Sprint 55 live visual shell polish (2026-06-17)
|
## Sprint 55 live visual shell polish (2026-06-17)
|
||||||
|
|
||||||
- Audited the live workbench visually in Browser on `http://192.168.10.150:1202`.
|
- Audited the live workbench visually in Browser on `http://192.0.2.10:1202`.
|
||||||
- Compacted the top context bar and primary navigation so the workbench has more usable canvas space.
|
- Compacted the top context bar and primary navigation so the workbench has more usable canvas space.
|
||||||
- Moved the inspector below the workspace on standard desktop widths instead of forcing a cramped three-column layout.
|
- Moved the inspector below the workspace on standard desktop widths instead of forcing a cramped three-column layout.
|
||||||
- Preserved the side inspector behavior for wider screens.
|
- Preserved the side inspector behavior for wider screens.
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user