From b8ba0f08dc2f02e6052ad3e047cf78c347434ac9 Mon Sep 17 00:00:00 2001 From: kodi Date: Fri, 20 Feb 2026 12:05:28 +0100 Subject: [PATCH] refactor(webui): introduceer assets-structuur en externe stylesheet - CSS verplaatst naar assets/css/app.css - Logo en favicon verplaatst naar assets/img en assets/icons - index.html verwijst naar nieuwe paden --- webui/html/assets/css/app.css | 388 +++++++++++++++++ .../{ => assets/icons}/podman.io-favicon.ico | Bin webui/html/{ => assets/img}/podman-logo.png | Bin webui/html/index.html | 396 +----------------- 4 files changed, 391 insertions(+), 393 deletions(-) create mode 100644 webui/html/assets/css/app.css rename webui/html/{ => assets/icons}/podman.io-favicon.ico (100%) rename webui/html/{ => assets/img}/podman-logo.png (100%) diff --git a/webui/html/assets/css/app.css b/webui/html/assets/css/app.css new file mode 100644 index 0000000..cda0294 --- /dev/null +++ b/webui/html/assets/css/app.css @@ -0,0 +1,388 @@ +:root{ + --bg: #0b1220; + --panel: #111a2e; + --panel2: #0e1730; + --text: #e8eefc; + --muted:#9bb0da; + --border:#24345f; + --ok:#2dd4bf; + --warn:#fbbf24; + --bad:#fb7185; + --btn:#1b2a55; + --btn2:#223564; + --accent:#60a5fa; + --shadow: 0 10px 30px rgba(0,0,0,.35); + --radius: 14px; + --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; +} +*{box-sizing:border-box} +body{ + margin:0; + font-family: var(--sans); + background: radial-gradient(1200px 600px at 20% 0%, #18244a 0%, var(--bg) 55%); + color: var(--text); +} +header{ + position: sticky; top:0; z-index:10; + background: rgba(11,18,32,.7); + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(36,52,95,.7); +} +.wrap{max-width:1700px;margin:0 auto;padding:16px} +.topbar{ + display:flex; gap:12px; align-items:center; justify-content:space-between; +} +.brand{ + display:flex; gap:12px; align-items:center; + font-weight:700; letter-spacing:.2px; +} +.brandLogo{ + width: 34px; + height: 34px; + display:block; +} +.dot{ + width:12px;height:12px;border-radius:50%; + background: var(--ok); + box-shadow: 0 0 0 6px rgba(45,212,191,.15); +} +.statusline{color:var(--muted); font-size:13px} +.row{display:flex; gap:14px; flex-wrap:wrap} +.tabs{ + display:flex; gap:8px; flex-wrap:wrap; + margin-top:12px; +} +.tab{ + border:1px solid var(--border); + background: rgba(17,26,46,.6); + color: var(--text); + padding:10px 12px; + border-radius: 999px; + cursor:pointer; + user-select:none; + font-size:14px; +} +.tab.active{ + background: linear-gradient(135deg, rgba(96,165,250,.25), rgba(17,26,46,.6)); + border-color: rgba(96,165,250,.5); +} +.grid{ + display:grid; + grid-template-columns: 1fr; + gap:14px; + padding:16px 0 26px; +} +@media (min-width: 980px){ + .grid{grid-template-columns: 1fr 1fr} +} +.card{ + background: linear-gradient(180deg, rgba(17,26,46,.85), rgba(14,23,48,.85)); + border: 1px solid rgba(36,52,95,.9); + border-radius: var(--radius); + box-shadow: var(--shadow); + overflow:hidden; +} +.card.half{min-height: 240px;} +.cardHeader{ + display:flex; align-items:center; justify-content:space-between; + padding:14px 14px; + border-bottom:1px solid rgba(36,52,95,.7); +} +.cardTitle{ + font-weight:700; + display:flex; gap:10px; align-items:center; +} +.cardBody{padding:14px} +.btn{ + border:1px solid rgba(36,52,95,.9); + background: var(--btn); + color: var(--text); + padding:9px 10px; + border-radius: 12px; + cursor:pointer; + font-size:13px; +} +.btn:hover{background: var(--btn2)} +.btn.small{padding:7px 9px; border-radius: 10px} +.btn.ghost{background: transparent} +.btn.ok{border-color: rgba(45,212,191,.6)} +.btn.bad{border-color: rgba(251,113,133,.6)} +.btn.warn{border-color: rgba(251,191,36,.6)} +.btn.icon { + padding: 6px 7px; + min-width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 13px; + border-radius: 8px; +} +.btn.icon span { + pointer-events: none; +} +.pill{ + display:inline-flex; align-items:center; gap:8px; + padding:6px 10px; + border-radius:999px; + border:1px solid rgba(36,52,95,.9); + color: var(--muted); + font-size:12px; +} +.pill .b{color: var(--text); font-weight:600} +table{ + width:100%; + border-collapse: collapse; + font-size: 13px; +} +th,td{ + padding:10px 8px; + border-bottom:1px solid rgba(36,52,95,.6); + text-align:left; + vertical-align: top; +} +th{color: var(--muted); font-weight:600} +tr:hover td{background: rgba(96,165,250,.06)} +.badge{ + display:inline-flex; + align-items:center; + border:1px solid rgba(36,52,95,.9); + padding:4px 8px; + border-radius:999px; + font-size:12px; + color: var(--muted); +} +.badge.ok{border-color: rgba(45,212,191,.6); color: var(--ok)} +.badge.bad{border-color: rgba(251,113,133,.6); color: var(--bad)} +.badge.warn{border-color: rgba(251,191,36,.6); color: var(--warn)} +.mono{font-family: var(--mono)} +.muted{color:var(--muted)} +.num{ + text-align:right; + white-space:nowrap; + font-variant-numeric: tabular-nums; +} +.flex{display:flex; gap:8px; flex-wrap:wrap; align-items:center} +.input, .textarea{ + width: 100%; + background: rgba(8,12,25,.6); + border:1px solid rgba(36,52,95,.9); + color: var(--text); + border-radius: 12px; + padding:10px 12px; + outline:none; + font-size: 13px; +} +.textarea{min-height: 120px; font-family: var(--mono)} +.split{ + display:grid; + grid-template-columns: 1fr; + gap:12px; +} +@media (min-width: 980px){ + .split{grid-template-columns: 1fr 1fr} +} + +/* Modal */ +.modalBack{ + position: fixed; inset:0; + background: rgba(0,0,0,.55); + display:none; align-items:center; justify-content:center; + padding:18px; z-index: 99; +} +.modal{ + width:min(980px, 100%); + background: linear-gradient(180deg, rgba(17,26,46,.95), rgba(14,23,48,.95)); + border:1px solid rgba(36,52,95,.9); + border-radius: 18px; + box-shadow: var(--shadow); + overflow:hidden; +} +.modalHeader{ + padding:12px 14px; + display:flex; align-items:center; justify-content:space-between; + border-bottom:1px solid rgba(36,52,95,.7); +} +.modalTitle{font-weight:700} +.modalBody{padding:14px} +pre{ + margin:0; + white-space: pre-wrap; + word-break: break-word; + font-family: var(--mono); + font-size: 12.5px; + color: #d9e6ff; + background: rgba(0,0,0,.35); + border:1px solid rgba(36,52,95,.7); + border-radius: 14px; + padding: 12px; + max-height: 60vh; + overflow:auto; +} +.hint{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.35} +.pod-group-row td { + background: rgba(255,255,255,0.04); + border-top: 1px solid rgba(255,255,255,0.08); + font-weight: 600; +} +.pod-group-row:hover td { + background: rgba(255,255,255,0.07); +} +.stale { + opacity: 0.65; + font-style: italic; +} +/* 3-dot dropdown actions */ +.actions-menu { position: relative; display: inline-flex; } + +.menuPanel{ + position: absolute; + right: 0; + top: 34px; + min-width: 140px; + background: linear-gradient(180deg, rgba(17,26,46,.98), rgba(14,23,48,.98)); + border: 1px solid rgba(36,52,95,.9); + border-radius: 12px; + box-shadow: var(--shadow); + padding: 6px; + display: none; + z-index: 50; +} + +.menuPanel.open { display: block; } + +.menuItem{ + width: 100%; + text-align: left; + padding: 8px 10px; + border-radius: 10px; + border: 1px solid transparent; + background: transparent; + color: var(--text); + cursor: pointer; + font-size: 13px; +} + +.menuItem:hover{ + background: rgba(96,165,250,.10); + border-color: rgba(96,165,250,.25); +} + +.menuItem.ok{ border-color: rgba(45,212,191,.35); } +.menuItem.warn{ border-color: rgba(251,191,36,.35); } +.menuItem.bad{ border-color: rgba(251,113,133,.35); } + +/* ========================= + Layout: Sidebar + Main + ========================= */ +.layout { + display: flex; + gap: 0; + align-items: stretch; +} + +/* Sidebar links (onder header) */ +.sidebar { + width: 220px; + flex: 0 0 220px; + border-right: 1px solid rgba(36,52,95,.7); + background: rgba(11,18,32,.55); + backdrop-filter: blur(10px); + min-height: calc(100vh - 72px); /* header hoogte approx; mag iets afwijken */ + position: sticky; + top: 72px; /* start direct onder header */ + align-self: flex-start; + padding: 12px; +} + +.sidebar.collapsed { + width: 64px; + flex-basis: 64px; +} + +/* Toggle button bovenaan in sidebar */ +.sidebarTop { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; +} + +.sidebarToggle { + width: 100%; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; +} + +/* Verticale tabs */ +.sidebar .tabs { + display: flex; + flex-direction: column; + gap: 8px; + margin-top: 0; /* override jouw header margin-top */ +} + +/* Tab als menu item (zelfde element, andere layout) */ +.sidebar .tab { + width: 100%; + display: flex; + align-items: center; + gap: 10px; + border-radius: 12px; + padding: 10px 12px; +} + +/* Icon + label */ +.navIcon { + width: 22px; + text-align: center; + font-size: 16px; + line-height: 1; +} + +.navLabel { + white-space: nowrap; +} + +/* Collapsed: alleen icon zichtbaar */ +.sidebar.collapsed .navLabel { + display: none; +} +.sidebar.collapsed .tab { + justify-content: center; + padding: 10px 10px; +} + +/* Main content: behoud jouw wrap look, maar laat het rechts groeien */ +.main { + flex: 1 1 auto; + min-width: 0; +} + +/* Op small screens: standaard collapsed (optioneel maar praktisch) */ +@media (max-width: 980px){ + .sidebar { width: 64px; flex-basis: 64px; } + .sidebar .navLabel { display: none; } + .sidebar .tab { justify-content: center; } +} +.file-folder-row{ + display:flex; + align-items:center; + justify-content:space-between; + gap:10px; + cursor:pointer; + user-select:none; +} + +.file-folder-left{ + display:flex; + align-items:center; + gap:10px; +} + +.file-folder-files{ + margin-left: 18px; +} \ No newline at end of file diff --git a/webui/html/podman.io-favicon.ico b/webui/html/assets/icons/podman.io-favicon.ico similarity index 100% rename from webui/html/podman.io-favicon.ico rename to webui/html/assets/icons/podman.io-favicon.ico diff --git a/webui/html/podman-logo.png b/webui/html/assets/img/podman-logo.png similarity index 100% rename from webui/html/podman-logo.png rename to webui/html/assets/img/podman-logo.png diff --git a/webui/html/index.html b/webui/html/index.html index 7dbadea..4e1d501 100644 --- a/webui/html/index.html +++ b/webui/html/index.html @@ -9,396 +9,9 @@ MVP Control UI - + + @@ -407,7 +20,7 @@
- +
MVP Control UI @@ -652,9 +265,6 @@
- - -