180 lines
12 KiB
HTML
180 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 — Sicherheit</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" 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 active" 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="Sicherheit">
|
|
<div class="topbar">
|
|
<div>
|
|
<div class="page-title">Sicherheit</div>
|
|
<div class="page-sub">waf aktiv · 3 hinweise</div>
|
|
</div>
|
|
<span class="status-chip warn"><span class="pulse-dot"></span> 3 offene hinweise</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="Ereignis 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.2"><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4z"/><path d="M9 12l2 2 4-4"/></svg>
|
|
Scan starten
|
|
</button>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="metrics">
|
|
<div class="metric">
|
|
<div class="metric-top"><div class="metric-label">Angriffe blockiert</div><div class="m-ico danger"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4z"/><path d="M12 8v5M12 16h.01"/></svg></div></div>
|
|
<div class="metric-value">128</div>
|
|
<div class="metric-delta"><span class="chg down">↑ 23%</span> letzte 24 h</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="metric-top"><div class="metric-label">Firewall-Regeln</div><div class="m-ico success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4z"/><path d="M9 12l2 2 4-4"/></svg></div></div>
|
|
<div class="metric-value">342</div>
|
|
<div class="metric-delta"><span class="chg up">aktiv</span> · managed ruleset</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="metric-top"><div class="metric-label">SSL-Zertifikate</div><div class="m-ico warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="11" width="14" height="9" rx="1.5"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></div></div>
|
|
<div class="metric-value">85<span class="sub">/ 87</span></div>
|
|
<div class="metric-delta"><span class="chg warn">2 laufen ab</span> in < 14 t</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="metric-top"><div class="metric-label">2FA-Abdeckung</div><div class="m-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></div></div>
|
|
<div class="metric-value">79<span class="sub">%</span></div>
|
|
<div class="metric-delta"><span class="chg warn">3 user</span> ohne 2FA</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- open advisories -->
|
|
<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="M12 9v4M12 17h.01"/><circle cx="12" cy="12" r="9"/></svg>Offene Hinweise <span class="pill warning" style="margin-left:4px">3</span></h3>
|
|
<button class="ghost-btn">Alle erledigen</button>
|
|
</div>
|
|
<div id="adv-body"></div>
|
|
</section>
|
|
|
|
<div class="row2">
|
|
<!-- threat feed -->
|
|
<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="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Bedrohungs-Feed <span class="live-tag" style="margin-left:2px"><span class="pulse-dot" style="color:var(--success)"></span>live</span></h3>
|
|
<span class="meta">24 h</span>
|
|
</div>
|
|
<div class="feed" id="threat-feed"></div>
|
|
</section>
|
|
|
|
<!-- SSL certs -->
|
|
<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="5" y="11" width="14" height="9" rx="1.5"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>SSL-Zertifikate</h3><span class="meta">auto-renew</span></div>
|
|
<div class="scroll-x">
|
|
<table class="table">
|
|
<thead><tr><th>Domain</th><th>Aussteller</th><th>Läuft ab</th></tr></thead>
|
|
<tbody id="ssl-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="foot">CluPilot · waf managed ruleset v2026.05 · ddos-schutz aktiv</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
/* advisories */
|
|
const advisories = [
|
|
{sev:'danger', title:'Kritisches Plugin-CVE: WP File Manager 7.0', sites:'classic.tonhoff-bau.de', cve:'CVE-2026-1184', action:'Patchen'},
|
|
{sev:'warning', title:'SSL-Zertifikat läuft in 9 Tagen ab', sites:'praxis-dr-schwarz.de', cve:'auto-renew fehlgeschlagen', action:'Erneuern'},
|
|
{sev:'warning', title:'3 Team-Mitglieder ohne 2-Faktor-Auth', sites:'workspace · Acme Cluster', cve:'richtlinie', action:'Erinnern'},
|
|
];
|
|
const advBody = document.getElementById('adv-body');
|
|
advisories.forEach((a,i)=>{
|
|
const last = i===advisories.length-1;
|
|
advBody.insertAdjacentHTML('beforeend',`
|
|
<div style="display:flex;align-items:center;gap:14px;padding:14px 18px;${last?'':'border-bottom:1px solid var(--hairline)'}">
|
|
<div class="feed-ico ${a.sev}"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 9v4M12 17h.01"/><circle cx="12" cy="12" r="9"/></svg></div>
|
|
<div style="flex:1;min-width:0">
|
|
<div style="font-weight:600;font-size:12.5px">${a.title}</div>
|
|
<div class="feed-meta">${a.sites} · ${a.cve}</div>
|
|
</div>
|
|
<button class="btn-primary" style="padding:7px 13px;font-size:12px">${a.action}</button>
|
|
</div>`);
|
|
});
|
|
|
|
/* threat feed */
|
|
const threats = [
|
|
{ic:'danger', t:'<b>17 Login-Versuche</b> blockiert · <span class="target">classic.tonhoff-bau.de</span>', m:'vor 1 min · 185.220.* (TOR)'},
|
|
{ic:'danger', t:'SQL-Injection geblockt auf <span class="target">/wp-json</span>', m:'vor 6 min · shop.bergmann-coffee.com'},
|
|
{ic:'warning', t:'Rate-Limit ausgelöst · <span class="target">xmlrpc.php</span>', m:'vor 14 min · 42 req/s'},
|
|
{ic:'success', t:'WAF-Regelsatz aktualisiert · <b>v2026.05</b>', m:'vor 38 min · 12 neue Signaturen'},
|
|
{ic:'danger', t:'Bekannter Bot-Range gesperrt · <span class="target">/8 CIDR</span>', m:'vor 52 min · 1.240 IPs'},
|
|
{ic:'accent', t:'Malware-Scan abgeschlossen · <b>0 Funde</b>', m:'vor 1 std · 87 sites'},
|
|
{ic:'success', t:'2FA aktiviert für <span class="target">m.weber</span>', m:'vor 2 std · TOTP'},
|
|
];
|
|
const tf = document.getElementById('threat-feed');
|
|
threats.forEach(f=>{
|
|
tf.insertAdjacentHTML('beforeend',`
|
|
<div class="feed-row">
|
|
<div class="feed-ico ${f.ic}"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4z"/></svg></div>
|
|
<div class="feed-body"><div>${f.t}</div><div class="feed-meta">${f.m}</div></div>
|
|
</div>`);
|
|
});
|
|
|
|
/* ssl */
|
|
const certs = [
|
|
{dom:'*.kunde-mueller.de', iss:"Let's Encrypt", days:71, st:'ok'},
|
|
{dom:'shop.bergmann-coffee.com', iss:"Let's Encrypt", days:54, st:'ok'},
|
|
{dom:'praxis-dr-schwarz.de', iss:"Let's Encrypt", days:9, st:'warn'},
|
|
{dom:'agentur-helio.com', iss:'ZeroSSL', days:122, st:'ok'},
|
|
{dom:'classic.tonhoff-bau.de', iss:"Let's Encrypt", days:12, st:'warn'},
|
|
{dom:'rezepte.kochlust.de', iss:"Let's Encrypt", days:88, st:'ok'},
|
|
];
|
|
const sslBody = document.getElementById('ssl-body');
|
|
certs.forEach(c=>{
|
|
const cls = c.st==='warn'?'warn':'ok';
|
|
const lbl = c.st==='warn'?`${c.days} t`:`${c.days} t`;
|
|
sslBody.insertAdjacentHTML('beforeend',`
|
|
<tr>
|
|
<td><div class="site-name" style="max-width:200px">${c.dom}</div></td>
|
|
<td><span class="site-meta">${c.iss}</span></td>
|
|
<td><span class="health"><span class="health-dot ${cls}"></span><span class="health-label">in ${lbl}</span></span></td>
|
|
</tr>`);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|