178 lines
13 KiB
HTML
178 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>CluPilot — Backups</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="clupilot.css">
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<aside class="sidebar" data-screen-label="Sidebar">
|
||
<div class="brand"><div class="brand-mark" aria-hidden="true"></div><div class="brand-name">CluPilot<span>v2.4</span></div></div>
|
||
<button class="ws-switch" aria-label="Workspace wechseln">
|
||
<div class="ws-avatar">AC</div>
|
||
<div class="ws-meta"><div class="ws-name">Acme Cluster</div><div class="ws-plan">team · 14 user</div></div>
|
||
<svg class="ws-chev" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 9l4-4 4 4M8 15l4 4 4-4"/></svg>
|
||
</button>
|
||
<nav class="nav">
|
||
<a class="nav-item" href="CluPilot Dashboard Glass.html"><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg><span>Dashboard</span></a>
|
||
<a class="nav-item" href="Server.html"><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="4" width="18" height="7" rx="1.5"/><rect x="3" y="13" width="18" height="7" rx="1.5"/><circle cx="7" cy="7.5" r="0.7" fill="currentColor"/><circle cx="7" cy="16.5" r="0.7" fill="currentColor"/></svg><span>Server</span><span class="count">6</span></a>
|
||
<a class="nav-item" href="Sites.html"><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg><span>Sites</span><span class="count">87</span></a>
|
||
<a class="nav-item active" href="Backups.html"><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12c0 5-9 9-9 9s-9-4-9-9V5l9-3 9 3v7z"/><path d="M9 11l2 2 4-4"/></svg><span>Backups</span></a>
|
||
<a class="nav-item" href="Sicherheit.html"><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4z"/></svg><span>Sicherheit</span><span class="count" style="color:var(--warning);background:var(--warning-soft);border-color:rgba(194,130,15,0.3)">3</span></a>
|
||
<div class="nav-title">Konto</div>
|
||
<a class="nav-item" href="Team.html"><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg><span>Team</span></a>
|
||
<a class="nav-item" href="Einstellungen.html"><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg><span>Einstellungen</span></a>
|
||
</nav>
|
||
<div class="plan-box">
|
||
<div class="plan-row"><div class="plan-name">Team Plan</div><div class="plan-tag">PRO</div></div>
|
||
<div class="plan-meter"><span></span></div>
|
||
<div class="plan-stats"><span>87 / 140 sites</span><span>62%</span></div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="main" data-screen-label="Backups">
|
||
<div class="topbar">
|
||
<div>
|
||
<div class="page-title">Backups</div>
|
||
<div class="page-sub">automatisch · tägl. 03:00 utc</div>
|
||
</div>
|
||
<span class="status-chip"><span class="pulse-dot"></span> alle gesichert</span>
|
||
<div class="top-spacer"></div>
|
||
<div class="search">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
|
||
<input placeholder="Backup suchen…" />
|
||
<span class="kbd">⌘K</span>
|
||
</div>
|
||
<button class="btn-primary">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></svg>
|
||
Backup jetzt
|
||
</button>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="metrics">
|
||
<div class="metric">
|
||
<div class="metric-top"><div class="metric-label">Letztes Backup</div><div class="m-ico success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg></div></div>
|
||
<div class="metric-value">12<span class="sub">min</span></div>
|
||
<div class="metric-delta"><span class="chg up">erfolgreich</span> · 87/87 sites</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-top"><div class="metric-label">Speicher belegt</div><div class="m-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3"/></svg></div></div>
|
||
<div class="metric-value">1,84<span class="sub">/ 4 TB</span></div>
|
||
<div class="metric-delta"><span class="chg">46%</span> object storage</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-top"><div class="metric-label">Wiederherstellungspunkte</div><div class="m-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 1 0 9-9 9 9 0 0 0-9 9M3 12H1m2-4l-2-1"/><path d="M12 7v5l3 2"/></svg></div></div>
|
||
<div class="metric-value">2.310</div>
|
||
<div class="metric-delta"><span class="chg">30 tage</span> aufbewahrung</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-top"><div class="metric-label">Fehlgeschlagen</div><div class="m-ico warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v4M12 17h.01"/><circle cx="12" cy="12" r="9"/></svg></div></div>
|
||
<div class="metric-value">1</div>
|
||
<div class="metric-delta"><span class="chg warn">staging.opencrate</span> · retry geplant</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row2">
|
||
<!-- recent backups -->
|
||
<section class="card">
|
||
<div class="card-head">
|
||
<h3><svg class="hico" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12c0 5-9 9-9 9s-9-4-9-9V5l9-3 9 3v7z"/><path d="M9 11l2 2 4-4"/></svg>Letzte Backups</h3>
|
||
<div class="card-tabs"><button class="active">Alle</button><button>Auto</button><button>Manuell</button></div>
|
||
</div>
|
||
<div class="scroll-x">
|
||
<table class="table">
|
||
<thead><tr><th>Site</th><th>Typ</th><th class="num">Größe</th><th>Zeitpunkt</th><th>Status</th><th class="num"></th></tr></thead>
|
||
<tbody id="bk-body"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- schedule + storage -->
|
||
<div style="display:flex;flex-direction:column;gap:18px">
|
||
<section class="card">
|
||
<div class="card-head"><h3><svg class="hico" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>Zeitplan</h3></div>
|
||
<div class="card-body" style="padding-top:4px">
|
||
<div class="toggle-row">
|
||
<div class="tr-body"><div class="tr-title">Tägliche Backups</div><div class="tr-desc">jeden Tag um 03:00 UTC</div></div>
|
||
<div class="toggle on"></div>
|
||
</div>
|
||
<div class="toggle-row">
|
||
<div class="tr-body"><div class="tr-title">Stündliche Snapshots</div><div class="tr-desc">nur Shop- & High-Traffic-Sites</div></div>
|
||
<div class="toggle on"></div>
|
||
</div>
|
||
<div class="toggle-row">
|
||
<div class="tr-body"><div class="tr-title">Off-site Replikation</div><div class="tr-desc">zweites Rechenzentrum (Helsinki)</div></div>
|
||
<div class="toggle on"></div>
|
||
</div>
|
||
<div class="toggle-row">
|
||
<div class="tr-body"><div class="tr-title">Vor Updates sichern</div><div class="tr-desc">automatischer Snapshot vor jedem Update</div></div>
|
||
<div class="toggle"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card">
|
||
<div class="card-head"><h3><svg class="hico" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6"/></svg>Speicher</h3><span class="meta">eu-central · s3</span></div>
|
||
<div class="card-body">
|
||
<div class="plan-meter" style="height:9px"><span style="width:46%"></span></div>
|
||
<div class="plan-stats" style="font-size:11.5px"><span>1,84 TB belegt</span><span>4 TB inkl.</span></div>
|
||
<div style="margin-top:14px">
|
||
<div class="kv"><span class="k">Voller Backup-Satz</span><span class="v">1,21 TB</span></div>
|
||
<div class="kv"><span class="k">Inkrementell (30 t)</span><span class="v">0,63 TB</span></div>
|
||
<div class="kv"><span class="k">Komprimierung</span><span class="v">zstd · 3,1×</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="foot">CluPilot · backups verschlüsselt · aes-256-gcm</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
const Icon = {
|
||
restore:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 1 0 3-6.7M3 4v4h4"/></svg>',
|
||
dl:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></svg>',
|
||
more:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></svg>',
|
||
};
|
||
const backups = [
|
||
{site:'agentur-helio.com', type:'Auto', size:'248 MB', when:'vor 12 min', st:'ok', label:'OK'},
|
||
{site:'shop.bergmann-coffee.com', type:'Auto', size:'1,9 GB', when:'vor 12 min', st:'ok', label:'OK'},
|
||
{site:'kunde-mueller.de', type:'Auto', size:'412 MB', when:'vor 13 min', st:'ok', label:'OK'},
|
||
{site:'rezepte.kochlust.de', type:'Stündl.', size:'2,4 GB', when:'vor 41 min', st:'ok', label:'OK'},
|
||
{site:'classic.tonhoff-bau.de', type:'Manuell', size:'180 MB', when:'vor 2 std', st:'ok', label:'OK'},
|
||
{site:'staging.opencrate.dev', type:'Auto', size:'—', when:'vor 12 min', st:'bad', label:'Fehler'},
|
||
{site:'shop.nordlicht-mode.com', type:'Stündl.', size:'3,1 GB', when:'vor 1 std', st:'ok', label:'OK'},
|
||
{site:'travelblog.fernweh.io', type:'Auto', size:'620 MB', when:'vor 13 min', st:'ok', label:'OK'},
|
||
];
|
||
const typePill = {Auto:'accent','Stündl.':'', Manuell:'warning'};
|
||
const body = document.getElementById('bk-body');
|
||
backups.forEach(b=>{
|
||
const stCls = b.st==='ok'?'ok':b.st==='bad'?'bad':'warn';
|
||
const pillCls = b.st==='ok'?'success':'danger';
|
||
body.insertAdjacentHTML('beforeend',`
|
||
<tr>
|
||
<td><div class="site-name" style="max-width:200px">${b.site}</div></td>
|
||
<td><span class="pill ${typePill[b.type]||''}">${b.type}</span></td>
|
||
<td class="num">${b.size}</td>
|
||
<td><span class="site-meta">${b.when}</span></td>
|
||
<td><span class="health"><span class="health-dot ${stCls}"></span><span class="health-label">${b.label}</span></span></td>
|
||
<td class="num"><div class="row-actions">
|
||
<button title="Wiederherstellen">${Icon.restore}</button>
|
||
<button title="Herunterladen">${Icon.dl}</button>
|
||
<button title="Mehr">${Icon.more}</button>
|
||
</div></td>
|
||
</tr>`);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|