From 32feb9d4eb79947e0b8924e78d147dd04dda67f9 Mon Sep 17 00:00:00 2001 From: ameniboukattaya Date: Sun, 21 Jun 2026 19:16:07 +0100 Subject: [PATCH] Change : UI/UX design --- platform/static/css/style.css | 196 ++++++++++++++++++++++++-- platform/static/js/platform.js | 12 +- platform/templates/base.html | 2 +- platform/templates/pages/backups.html | 66 +++------ platform/templates/pages/cloud.html | 86 ++++++----- 5 files changed, 266 insertions(+), 96 deletions(-) diff --git a/platform/static/css/style.css b/platform/static/css/style.css index 3957295..05aaa4f 100644 --- a/platform/static/css/style.css +++ b/platform/static/css/style.css @@ -836,26 +836,198 @@ a.sidebar-brand-link { .log-elapsed { font-size: 11px; font-family: var(--mono); color: var(--text3); margin-top: 6px; } /* ── BACKUP LIST ───────────────────────────────────────────── */ -.backup-list { display: flex; flex-direction: column; gap: 8px; } -.backup-item { - display: flex; align-items: center; justify-content: space-between; - padding: 11px 14px; border-radius: var(--radius); - background: var(--surface2); gap: 10px; flex-wrap: wrap; +/* ── BACKUP LIST ───────────────────────────────────────────── */ +.backup-columns { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 22px; +} +@media (max-width: 1200px) { + .backup-columns { grid-template-columns: 1fr; } +} + +.backup-column { display: flex; flex-direction: column; gap: 10px; min-width: 0; } + +.backup-column-header { + display: flex; flex-direction: column; gap: 8px; + padding: 14px 16px; + background: var(--surface2); border: 1px solid var(--border); - transition: border-color var(--trans), background var(--trans), transform var(--trans); + border-radius: var(--radius); +} +.backup-column-header .section-title { margin: 0; font-size: 12px; } +.backup-column-header .card-meta { + align-self: flex-start; + font-size: 10px; + word-break: break-all; +} + +.backup-list { display: flex; flex-direction: column; gap: 10px; } + +.backup-item { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 0; + padding: 14px 16px; + border-radius: var(--radius); + background: var(--surface2); + border: 1px solid var(--border); + transition: border-color var(--trans), background var(--trans), box-shadow var(--trans); } .backup-item:hover { - border-color: rgba(79,140,255,0.25); + border-color: rgba(79,140,255,0.28); background: var(--bg4); - transform: translateX(2px); + box-shadow: var(--glow-accent); } -.backup-name { font-family: var(--mono); font-size: 12px; color: var(--text2); flex: 1; min-width: 0; word-break: break-all; } -.backup-actions { display: flex; gap: 5px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } -.btn-delete-backup { color: var(--red) !important; opacity: 0.7; transition: opacity 0.15s; } + +.backup-item-main { min-width: 0; padding-bottom: 12px; } +.backup-item:not(:has(.backup-actions)) .backup-item-main { padding-bottom: 0; } + +.backup-name { + font-family: var(--mono); + font-size: 12px; + line-height: 1.5; + color: var(--text); + word-break: break-all; + display: block; +} +.backup-name i { margin-right: 6px; opacity: 0.85; } + +.backup-meta { + display: block; + margin-top: 6px; + font-size: 10px; + color: var(--text3); + font-family: var(--mono); + line-height: 1.4; +} + +.backup-actions { + display: flex; + flex-wrap: wrap; + gap: 6px; + align-items: center; + padding-top: 12px; + border-top: 1px solid var(--border); +} +.backup-actions .btn-sm { font-size: 11px; padding: 5px 10px; } +.backup-actions .btn-sm:not(.btn-audit):not(.btn-delete-backup) { min-height: 30px; } + +.btn-delete-backup { color: var(--red) !important; opacity: 0.75; transition: opacity 0.15s; } .btn-delete-backup:hover { opacity: 1; } -.btn-audit { color: var(--cyan) !important; opacity: 0.85; } +.btn-audit { color: var(--cyan) !important; opacity: 0.9; } .btn-audit:hover { opacity: 1; } +/* ── CLOUD PAGE ────────────────────────────────────────────── */ +.cloud-status-card .card-header { display: none; } + +.cloud-status-hero { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 16px; + flex-wrap: wrap; + padding-bottom: 20px; + margin-bottom: 20px; + border-bottom: 1px solid var(--border); +} +.cloud-status-hero-left { + display: flex; + align-items: center; + gap: 14px; + min-width: 0; +} +.cloud-status-icon { + width: 48px; height: 48px; border-radius: 14px; + display: flex; align-items: center; justify-content: center; + font-size: 20px; color: var(--accent2); flex-shrink: 0; + background: rgba(79,140,255,0.1); + border: 1px solid rgba(79,140,255,0.18); + box-shadow: var(--glow-accent); +} +.cloud-status-title { + font-size: 18px; font-weight: 700; letter-spacing: -0.02em; + color: var(--text); line-height: 1.2; +} +.cloud-status-sub { + font-size: 12px; color: var(--text3); margin-top: 4px; line-height: 1.4; +} +.cloud-status-hero-right { + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; +} +.cloud-conn-badge { + display: inline-flex; align-items: center; gap: 6px; + padding: 6px 12px; border-radius: 20px; + font-family: var(--mono); font-size: 11px; font-weight: 600; + background: rgba(79,140,255,0.1); + border: 1px solid rgba(79,140,255,0.2); + color: var(--accent2); + white-space: nowrap; +} + +.cloud-stats-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 12px; +} +@media (max-width: 900px) { + .cloud-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} +@media (max-width: 480px) { + .cloud-stats-grid { grid-template-columns: 1fr; } +} +.cloud-stats-grid .stat-card { + text-align: left; + padding: 16px 18px; + background: var(--surface2); + border: 1px solid var(--border); + border-radius: var(--radius); +} +.cloud-stats-grid .stat-number { + font-size: 26px; + margin-bottom: 2px; +} +.cloud-stats-grid .stat-number.is-text { + font-size: 14px; + line-height: 1.35; + word-break: break-all; +} +.cloud-stats-grid .stat-label { + text-align: left; + margin-top: 6px; +} + +.cloud-conn-msg { + color: var(--text3); + font-size: 11px; + font-family: var(--mono); + margin-top: 14px; + padding: 10px 14px; + background: var(--surface2); + border: 1px solid var(--border); + border-radius: var(--radius); + line-height: 1.5; +} + +.cloud-upload-form { + display: flex; + flex-direction: column; + gap: 14px; + max-width: 560px; +} +.cloud-upload-form .form-group { width: 100%; } +.cloud-upload-form .btn-primary { align-self: flex-start; } + +.cloud-backup-list { + display: flex; + flex-direction: column; + gap: 10px; +} + /* ── MODAL ─────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; diff --git a/platform/static/js/platform.js b/platform/static/js/platform.js index 340ff65..05874ef 100644 --- a/platform/static/js/platform.js +++ b/platform/static/js/platform.js @@ -403,7 +403,9 @@ function renderBackupList(items, id, source) { : ''; return `
- ${escapeHtml(b)} +
+ ${escapeHtml(b)} +
${detailsBtn} @@ -533,7 +535,13 @@ async function loadBackupLog() { node.innerHTML = '
No backup history yet
'; return; } - node.innerHTML = d.entries.map((e) => `
${e.name}${e.status}
`).join(''); + node.innerHTML = d.entries.map((e) => ` +
+
+ ${escapeHtml(e.name)} + ${escapeHtml(e.status)} +
+
`).join(''); } catch (e) { node.innerHTML = `
Error loading log: ${e}
`; } diff --git a/platform/templates/base.html b/platform/templates/base.html index bb17a1f..9d431df 100644 --- a/platform/templates/base.html +++ b/platform/templates/base.html @@ -7,7 +7,7 @@ - +
diff --git a/platform/templates/pages/backups.html b/platform/templates/pages/backups.html index 1e775f4..2d0737f 100644 --- a/platform/templates/pages/backups.html +++ b/platform/templates/pages/backups.html @@ -1,33 +1,9 @@ {% extends "base.html" %} {% block content %} -{# ── Extra styles scoped to this page ── #} +{# ── Extra styles scoped to this page (modals only) ── #}