ameniboukattaya/CloudOps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change : UI/UX design

Browse Source
This commit is contained in:
ameniboukattaya
2026-06-21 19:16:07 +01:00
parent ae267a6d9b
commit 32feb9d4eb
5 changed files with 266 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
platform/templates/pages/backups.html
View File

@@ -1,33 +1,9 @@
{% extends "base.html" %}
{% block content %}
{# ── Extra styles scoped to this page ── #}
{# ── Extra styles scoped to this page (modals only) ── #}
<style>
/* ── BACKUP ITEMS ──────────────────────────────────────────────── */
.backup-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-radius: 10px;
background: var(--surface2);
border: 1px solid var(--border);
gap: 10px;
flex-wrap: wrap;
transition: border-color 0.15s, background 0.15s;
}
.backup-item:hover { border-color: var(--border2); background: var(--bg4); }
.backup-name {
font-family: var(--mono);
font-size: 12px;
color: var(--text2);
word-break: break-all;
}
.backup-actions { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
/* ── ENHANCED MODAL ─────────────────────────────────────────── */
/* page-specific modal styles — backup layout lives in style.css */
.modal-overlay {
position: fixed; inset: 0; z-index: 1000;
background: rgba(0,0,0,0.72);
@@ -298,18 +274,20 @@
<button class="btn btn-ghost btn-sm" onclick="refreshBackupsList()"><i class="fas fa-sync-alt"></i> Refresh</button>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;">
<div class="backup-columns">
{# LOCAL #}
<div>
<div class="section-header">
<div class="section-title">🖥️ MAIN SERVER</div>
<div class="backup-column">
<div class="backup-column-header">
<div class="section-title">🖥️ Main Server</div>
<span class="card-meta">/root/backups/</span>
</div>
<div class="backup-list" id="local-backup-list">
{% for b in backups %}
<div class="backup-item">
<span class="backup-name">{{ b }}</span>
<div class="backup-item-main">
<span class="backup-name">{{ b }}</span>
</div>
<div class="backup-actions">
<button class="btn btn-ghost btn-sm" style="color:var(--text3);" onclick="showBackupDetails('local','{{ b }}',this)" title="Quick details"><i class="fas fa-circle-info"></i></button>
<button class="btn btn-ghost btn-sm btn-audit" onclick="auditBackup('local','{{ b }}',this)"><i class="fas fa-shield-check"></i> Audit</button>
@@ -323,15 +301,17 @@
</div>
{# VM #}
<div>
<div class="section-header">
<div class="section-title">💾 VM SERVER</div>
<div class="backup-column">
<div class="backup-column-header">
<div class="section-title">💾 VM Server</div>
<span class="card-meta">/backups/main-server/</span>
</div>
<div class="backup-list" id="vm-backup-list">
{% for b in vm_backups %}
<div class="backup-item">
<span class="backup-name">{{ b }}</span>
<div class="backup-item-main">
<span class="backup-name">{{ b }}</span>
</div>
<div class="backup-actions">
<button class="btn btn-ghost btn-sm" style="color:var(--text3);" onclick="showBackupDetails('vm','{{ b }}',this)" title="Quick details"><i class="fas fa-circle-info"></i></button>
<button class="btn btn-ghost btn-sm btn-audit" onclick="auditBackup('vm','{{ b }}',this)"><i class="fas fa-shield-check"></i> Audit</button>
@@ -344,9 +324,9 @@
</div>
{# CLOUD R2 #}
<div>
<div class="section-header">
<div class="section-title">☁️ CLOUD (R2)</div>
<div class="backup-column">
<div class="backup-column-header">
<div class="section-title">☁️ Cloud (R2)</div>
<span class="card-meta">navitrends-backups</span>
</div>
<div class="backup-list" id="cloud-backup-list">
@@ -363,7 +343,7 @@
<div class="card-title"><i class="fas fa-clock-rotate-left"></i> Backup History</div>
<button class="btn btn-ghost btn-sm" onclick="loadBackupLog()"><i class="fas fa-sync-alt"></i> Refresh</button>
</div>
<div id="backup-history-list"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading…</div></div>
<div id="backup-history-list" class="cloud-backup-list"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading…</div></div>
</div>
@@ -734,11 +714,9 @@ async function loadCloudBackupsColumn() {
const archives = data.backups.filter(b => b.name.endsWith('.tar.gz'));
list.innerHTML = archives.map(b => `
<div class="backup-item">
<div style="display:flex;flex-direction:column;gap:2px;min-width:0;">
<span class="backup-name" style="font-size:11px;">
<i class="fas fa-cloud" style="color:var(--accent2);font-size:10px;margin-right:4px;"></i>${b.name}
</span>
<span style="font-size:10px;color:var(--text3);font-family:var(--mono);">${b.size_human} · ${b.last_modified_str}</span>
<div class="backup-item-main">
<span class="backup-name"><i class="fas fa-cloud" style="color:var(--accent2);"></i>${b.name}</span>
<span class="backup-meta">${b.size_human} · ${b.last_modified_str}</span>
</div>
<div class="backup-actions">
<button class="btn btn-ghost btn-sm btn-audit" onclick="auditCloudBackup('${b.key}', this)" title="Audit R2 integrity">