140 lines
12 KiB
HTML
140 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>CluPilot — Einstellungen</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">
|
|
<style>
|
|
.settings{display:grid;grid-template-columns:212px 1fr;gap:18px;align-items:start}
|
|
.set-nav{display:flex;flex-direction:column;gap:2px;padding:10px;position:sticky;top:84px}
|
|
.set-nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius-xs);color:#3a3a47;font-size:12.5px;font-weight:500;cursor:pointer;transition:background .15s,color .15s}
|
|
.set-nav a:hover{background:rgba(255,255,255,0.55);color:var(--fg)}
|
|
.set-nav a.active{color:var(--fg);background:linear-gradient(180deg,rgba(255,255,255,0.92),rgba(255,255,255,0.66));box-shadow:0 4px 14px -6px rgba(40,52,92,0.3), inset 0 1px 0 rgba(255,255,255,0.9)}
|
|
.set-nav a .ico{width:16px;height:16px;color:var(--muted)}
|
|
.set-nav a.active .ico{color:var(--accent)}
|
|
.set-col{display:flex;flex-direction:column;gap:18px;min-width:0}
|
|
.form-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--hairline)}
|
|
@media (max-width:920px){.settings{grid-template-columns:1fr}.set-nav{position:static;flex-direction:row;flex-wrap:wrap}}
|
|
</style>
|
|
</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" 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 active" 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="Einstellungen">
|
|
<div class="topbar">
|
|
<div>
|
|
<div class="page-title">Einstellungen</div>
|
|
<div class="page-sub">workspace · acme cluster</div>
|
|
</div>
|
|
<div class="top-spacer"></div>
|
|
<button class="btn-ghost">Verwerfen</button>
|
|
<button class="btn-primary"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M5 12l5 5L20 7"/></svg>Speichern</button>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="settings">
|
|
<!-- sub nav -->
|
|
<aside class="card set-nav">
|
|
<a class="active"><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/></svg>Workspace</a>
|
|
<a><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a6 6 0 0 1 12 0v1"/></svg>Profil</a>
|
|
<a><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21a2 2 0 0 0 4 0"/></svg>Benachrichtigungen</a>
|
|
<a><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>Abrechnung</a>
|
|
<a><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 17l5-5-5-5M13 19h7"/></svg>API & Tokens</a>
|
|
<a><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>Regionen</a>
|
|
</aside>
|
|
|
|
<!-- content -->
|
|
<div class="set-col">
|
|
<section class="card">
|
|
<div class="card-head"><h3>Workspace-Details</h3></div>
|
|
<div class="card-body">
|
|
<div class="grid-2">
|
|
<div class="field"><label>Workspace-Name</label><input class="input" value="Acme Cluster" /></div>
|
|
<div class="field"><label>Workspace-Slug</label>
|
|
<div class="input-group"><span class="suffix" style="border-left:0;border-right:1px solid var(--hairline)">clupilot.io/</span><input value="acme-cluster" /></div>
|
|
</div>
|
|
</div>
|
|
<div class="field"><label>Beschreibung</label><textarea class="input" placeholder="Wofür wird dieser Workspace genutzt?">Verwaltung aller WordPress-Kundenprojekte der Acme GmbH.</textarea></div>
|
|
<div class="grid-2">
|
|
<div class="field"><label>Standard-Region</label>
|
|
<input class="input" value="eu-central-1 · Frankfurt" /></div>
|
|
<div class="field"><label>Zeitzone</label>
|
|
<input class="input" value="Europe/Berlin (UTC+1)" /></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-actions"><button class="btn-ghost">Verwerfen</button><button class="btn-primary">Speichern</button></div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<div class="card-head"><h3>Standard-Verhalten</h3><span class="meta">gilt für neue sites</span></div>
|
|
<div class="card-body" style="padding-top:4px">
|
|
<div class="toggle-row"><div class="tr-body"><div class="tr-title">Automatische WordPress-Core-Updates</div><div class="tr-desc">minor-versionen automatisch einspielen</div></div><div class="toggle on"></div></div>
|
|
<div class="toggle-row"><div class="tr-body"><div class="tr-title">Plugin-Updates automatisch</div><div class="tr-desc">nur als sicher markierte plugins</div></div><div class="toggle on"></div></div>
|
|
<div class="toggle-row"><div class="tr-body"><div class="tr-title">Staging vor Deploy erzwingen</div><div class="tr-desc">änderungen erst auf staging testen</div></div><div class="toggle"></div></div>
|
|
<div class="toggle-row"><div class="tr-body"><div class="tr-title">CDN für neue Sites aktivieren</div><div class="tr-desc">global edge cache standardmäßig an</div></div><div class="toggle on"></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"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>Abrechnung</h3><span class="meta">nächste rechnung 01.06.2026</span></div>
|
|
<div class="card-body">
|
|
<div class="kv"><span class="k">Aktueller Plan</span><span class="v">Team · PRO</span></div>
|
|
<div class="kv"><span class="k">Sites-Kontingent</span><span class="v">87 / 140</span></div>
|
|
<div class="kv"><span class="k">Monatlich</span><span class="v">249,00 €</span></div>
|
|
<div class="kv"><span class="k">Zahlungsmethode</span><span class="v">VISA · **** 4072</span></div>
|
|
</div>
|
|
<div class="form-actions"><button class="btn-ghost">Rechnungen</button><button class="btn-primary">Plan ändern</button></div>
|
|
</section>
|
|
|
|
<section class="card" style="border-color:rgba(219,59,59,0.3)">
|
|
<div class="card-head"><h3 style="color:var(--danger)"><svg class="hico" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" stroke-width="2"><path d="M12 9v4M12 17h.01"/><circle cx="12" cy="12" r="9"/></svg>Gefahrenzone</h3></div>
|
|
<div class="card-body" style="display:flex;align-items:center;justify-content:space-between;gap:14px">
|
|
<div><div style="font-weight:600;font-size:12.5px">Workspace löschen</div><div class="tr-desc">Alle Sites, Backups und Daten werden unwiderruflich entfernt.</div></div>
|
|
<button class="btn-ghost" style="color:var(--danger);border-color:rgba(219,59,59,0.35)">Löschen</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="foot">CluPilot · änderungen werden im audit-log protokolliert</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelectorAll('.toggle').forEach(t=>t.addEventListener('click',()=>t.classList.toggle('on')));
|
|
document.querySelectorAll('.set-nav a').forEach(a=>a.addEventListener('click',()=>{
|
|
document.querySelectorAll('.set-nav a').forEach(x=>x.classList.remove('active'));
|
|
a.classList.add('active');
|
|
}));
|
|
</script>
|
|
</body>
|
|
</html>
|