205 lines
11 KiB
HTML
205 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>CluPilot — Server</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">
|
|
<!-- ============ SIDEBAR ============ -->
|
|
<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 active" 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" 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 ============ -->
|
|
<main class="main" data-screen-label="Server">
|
|
<div class="topbar">
|
|
<div>
|
|
<div class="page-title">Server</div>
|
|
<div class="page-sub">6 nodes · 3 regionen</div>
|
|
</div>
|
|
<span class="status-chip"><span class="pulse-dot"></span> 5 aktiv · 1 wartung</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="Server suchen…" />
|
|
<span class="kbd">⌘K</span>
|
|
</div>
|
|
<a class="btn-primary" href="Cluster anlegen.html">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M12 5v14M5 12h14"/></svg>
|
|
Cluster anlegen
|
|
</a>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<!-- metrics -->
|
|
<div class="metrics">
|
|
<div class="metric">
|
|
<div class="metric-top">
|
|
<div class="metric-label">Aktive Nodes</div>
|
|
<div class="m-ico success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="7" rx="1.5"/><rect x="3" y="13" width="18" height="7" rx="1.5"/></svg></div>
|
|
</div>
|
|
<div class="metric-value">5<span class="sub">/ 6</span></div>
|
|
<div class="metric-delta"><span class="chg up">99,98%</span> uptime · 30 d</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="metric-top">
|
|
<div class="metric-label">Ø CPU-Last</div>
|
|
<div class="m-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M9 9h6v6H9zM2 9h2M2 15h2M20 9h2M20 15h2M9 2v2M15 2v2M9 20v2M15 20v2"/></svg></div>
|
|
</div>
|
|
<div class="metric-value">38<span class="sub">%</span></div>
|
|
<div class="metric-delta"><span class="chg up">↓ 4,1%</span> vs. gestern</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="metric-top">
|
|
<div class="metric-label">RAM gesamt</div>
|
|
<div class="m-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 7v10M11 7v10M15 7v10"/></svg></div>
|
|
</div>
|
|
<div class="metric-value">112<span class="sub">/ 192 GB</span></div>
|
|
<div class="metric-delta"><span class="chg">58%</span> belegt</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="metric-top">
|
|
<div class="metric-label">Wartung</div>
|
|
<div class="m-ico warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18v3h3l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2-2 2.6-2.6z"/></svg></div>
|
|
</div>
|
|
<div class="metric-value">1</div>
|
|
<div class="metric-delta"><span class="chg warn">eu-staging</span> · kernel-update</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- toolbar -->
|
|
<div class="section-head">
|
|
<h2>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="7" rx="1.5"/><rect x="3" y="13" width="18" height="7" rx="1.5"/></svg>
|
|
Alle Server
|
|
</h2>
|
|
<div class="toolbar">
|
|
<div class="seg">
|
|
<button class="active">Alle</button>
|
|
<button>Produktion</button>
|
|
<button>Edge</button>
|
|
<button>Staging</button>
|
|
</div>
|
|
<button class="chip-filter">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
|
|
Region
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- server cards -->
|
|
<div class="grid-3" id="srv-grid"></div>
|
|
|
|
<div class="foot">CluPilot · region eu-central-1 · uptime 99,984%</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
const servers = [
|
|
{name:'eu-prod-01', region:'Frankfurt · de-fra', flag:'🇩🇪', specs:'8 vCPU · 32 GB · 640 GB NVMe', sites:24, status:'ok', cpu:42, ram:61, disk:48, ip:'94.130.12.4'},
|
|
{name:'eu-prod-02', region:'Frankfurt · de-fra', flag:'🇩🇪', specs:'8 vCPU · 32 GB · 640 GB NVMe', sites:19, status:'ok', cpu:31, ram:54, disk:55, ip:'94.130.12.9'},
|
|
{name:'eu-edge-amsterdam', region:'Amsterdam · nl-ams', flag:'🇳🇱', specs:'4 vCPU · 16 GB · 320 GB NVMe', sites:14, status:'ok', cpu:58, ram:47, disk:39, ip:'37.97.8.22'},
|
|
{name:'us-east-prod-01', region:'Ashburn · us-east', flag:'🇺🇸', specs:'8 vCPU · 32 GB · 640 GB NVMe', sites:21, status:'warn', cpu:81, ram:73, disk:62, ip:'162.55.4.18'},
|
|
{name:'eu-staging', region:'Nürnberg · de-nbg', flag:'🇩🇪', specs:'4 vCPU · 16 GB · 240 GB NVMe', sites:6, status:'maint', cpu:12, ram:28, disk:33, ip:'88.99.7.41'},
|
|
{name:'eu-prod-03', region:'Helsinki · fi-hel', flag:'🇫🇮', specs:'8 vCPU · 32 GB · 640 GB NVMe', sites:3, status:'ok', cpu:19, ram:24, disk:21, ip:'95.216.3.7'},
|
|
];
|
|
const statusMap = {
|
|
ok: {cls:'success', dot:'ok', label:'Online'},
|
|
warn: {cls:'warning', dot:'warn', label:'Hohe Last'},
|
|
maint: {cls:'', dot:'warn', label:'Wartung'},
|
|
};
|
|
function lvl(v){ return v>=80?'bad':v>=65?'warn':''; }
|
|
const grid = document.getElementById('srv-grid');
|
|
servers.forEach(s=>{
|
|
const st = statusMap[s.status];
|
|
grid.insertAdjacentHTML('beforeend',`
|
|
<div class="srv-card">
|
|
<div class="srv-head">
|
|
<div class="srv-flag">${s.flag}</div>
|
|
<div style="flex:1;min-width:0">
|
|
<div class="srv-name">${s.name}</div>
|
|
<div class="srv-region">${s.region}</div>
|
|
</div>
|
|
<span class="pill ${st.cls}"><span class="health-dot ${st.dot}" style="box-shadow:none"></span>${st.label}</span>
|
|
</div>
|
|
<div class="srv-spec">
|
|
<span><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/></svg>${s.specs}</span>
|
|
</div>
|
|
<div class="srv-spec" style="margin-top:6px">
|
|
<span>${s.sites} sites</span>
|
|
<span>· ${s.ip}</span>
|
|
</div>
|
|
<div class="gauges">
|
|
<div class="gauge-row"><span class="lbl">CPU</span><span class="gauge-track"><span class="gauge-fill ${lvl(s.cpu)}" style="width:${s.cpu}%"></span></span><span class="val">${s.cpu}%</span></div>
|
|
<div class="gauge-row"><span class="lbl">RAM</span><span class="gauge-track"><span class="gauge-fill ${lvl(s.ram)}" style="width:${s.ram}%"></span></span><span class="val">${s.ram}%</span></div>
|
|
<div class="gauge-row"><span class="lbl">Disk</span><span class="gauge-track"><span class="gauge-fill ${lvl(s.disk)}" style="width:${s.disk}%"></span></span><span class="val">${s.disk}%</span></div>
|
|
</div>
|
|
</div>`);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|