188 lines
13 KiB
HTML
188 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 — Sites</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 active" 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 class="main" data-screen-label="Sites">
|
||
<div class="topbar">
|
||
<div>
|
||
<div class="page-title">Sites</div>
|
||
<div class="page-sub">87 wordpress-installationen</div>
|
||
</div>
|
||
<span class="status-chip"><span class="pulse-dot"></span> 87 online</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="Domain 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.6"><path d="M12 5v14M5 12h14"/></svg>
|
||
Site hinzufügen
|
||
</button>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="metrics">
|
||
<div class="metric">
|
||
<div class="metric-top"><div class="metric-label">Sites Online</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">87<span class="sub">/ 87</span></div>
|
||
<div class="metric-delta"><span class="chg up">100%</span> erreichbar</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-top"><div class="metric-label">Updates offen</div><div class="m-ico warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-3-6.7M21 4v5h-5"/></svg></div></div>
|
||
<div class="metric-value">24</div>
|
||
<div class="metric-delta"><span class="chg warn">7 kritisch</span> · 17 minor</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-top"><div class="metric-label">Ø PageSpeed</div><div class="m-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3a9 9 0 1 0 9 9M12 12l5-5"/></svg></div></div>
|
||
<div class="metric-value">94<span class="sub">/ 100</span></div>
|
||
<div class="metric-delta"><span class="chg up">↑ 3</span> core web vitals</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-top"><div class="metric-label">Besucher / 24h</div><div class="m-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></div></div>
|
||
<div class="metric-value">182<span class="sub">k</span></div>
|
||
<div class="metric-delta"><span class="chg up">↑ 12%</span> vs. vorwoche</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="card">
|
||
<div class="card-head">
|
||
<div class="toolbar">
|
||
<div class="seg">
|
||
<button class="active">Alle <span style="opacity:.6">87</span></button>
|
||
<button>Updates <span style="opacity:.6">12</span></button>
|
||
<button>Warnungen <span style="opacity:.6">2</span></button>
|
||
<button>Kritisch <span style="opacity:.6">1</span></button>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:8px">
|
||
<button class="ghost-btn">Server: Alle ▾</button>
|
||
<button class="ghost-btn">Sortieren ▾</button>
|
||
</div>
|
||
</div>
|
||
<div class="scroll-x">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>Site</th>
|
||
<th>Server</th>
|
||
<th>WordPress</th>
|
||
<th>PHP</th>
|
||
<th class="num">Besucher / 24h</th>
|
||
<th>Status</th>
|
||
<th class="num"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="sites-body"></tbody>
|
||
</table>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-top:1px solid var(--hairline)">
|
||
<span class="site-meta">1–15 von 87</span>
|
||
<div style="display:flex;gap:6px">
|
||
<button class="ghost-btn">← Zurück</button>
|
||
<button class="ghost-btn">Weiter →</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="foot">CluPilot · region eu-central-1 · uptime 99,984%</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
const Icon = {
|
||
terminal:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 17l5-5-5-5M13 19h7"/></svg>',
|
||
ext:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 3h7v7M21 3l-9 9M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5"/></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 palette = ['#3b6ff2','#15a06a','#c2820f','#7c5cff','#db3b3b','#0ea5b7','#c026d3','#0d9488','#e0772e','#2563eb'];
|
||
const sites = [
|
||
{url:'kunde-mueller.de', server:'eu-prod-01', wp:'6.5.2', wpOk:true, php:'8.2', visitors:'12,4k', health:'ok', label:'Optimal'},
|
||
{url:'shop.bergmann-coffee.com', server:'eu-prod-01', wp:'6.4.3', wpOk:false, php:'8.1', visitors:'48,7k', health:'ok', label:'3 Updates'},
|
||
{url:'blog.fintech-radar.io', server:'eu-prod-02', wp:'6.5.2', wpOk:true, php:'8.2', visitors:'9,1k', health:'ok', label:'Optimal'},
|
||
{url:'praxis-dr-schwarz.de', server:'eu-prod-02', wp:'6.2.1', wpOk:false, php:'8.0', visitors:'1,2k', health:'warn', label:'Wartung nötig'},
|
||
{url:'agentur-helio.com', server:'eu-edge-amsterdam', wp:'6.5.2', wpOk:true, php:'8.2', visitors:'18,2k', health:'ok', label:'Optimal'},
|
||
{url:'docs.opencrate.dev', server:'us-east-prod-01', wp:'6.5.1', wpOk:true, php:'8.3', visitors:'7,8k', health:'ok', label:'2 Updates'},
|
||
{url:'staging.opencrate.dev', server:'eu-staging', wp:'6.6-RC1', wpOk:true, php:'8.3', visitors:'82', health:'warn', label:'Backup spät'},
|
||
{url:'classic.tonhoff-bau.de', server:'us-east-prod-01', wp:'5.9.7', wpOk:false, php:'7.4', visitors:'3,4k', health:'bad', label:'Kritisch'},
|
||
{url:'rezepte.kochlust.de', server:'eu-prod-03', wp:'6.5.2', wpOk:true, php:'8.2', visitors:'31,5k', health:'ok', label:'Optimal'},
|
||
{url:'verein-sv-eiche.de', server:'eu-prod-02', wp:'6.5.0', wpOk:true, php:'8.1', visitors:'640', health:'ok', label:'Optimal'},
|
||
{url:'shop.nordlicht-mode.com', server:'eu-edge-amsterdam', wp:'6.4.3', wpOk:false, php:'8.2', visitors:'22,9k', health:'ok', label:'1 Update'},
|
||
{url:'kanzlei-roth-partner.de', server:'eu-prod-01', wp:'6.5.2', wpOk:true, php:'8.2', visitors:'2,1k', health:'ok', label:'Optimal'},
|
||
{url:'travelblog.fernweh.io', server:'eu-prod-03', wp:'6.5.1', wpOk:true, php:'8.3', visitors:'14,7k', health:'ok', label:'Optimal'},
|
||
{url:'app.leadmagnet.co', server:'us-east-prod-01', wp:'6.5.2', wpOk:true, php:'8.3', visitors:'5,3k', health:'ok', label:'Optimal'},
|
||
{url:'alt.stadtwerke-lohr.de', server:'eu-prod-02', wp:'6.1.4', wpOk:false, php:'7.4', visitors:'910', health:'warn', label:'PHP veraltet'},
|
||
];
|
||
const body = document.getElementById('sites-body');
|
||
sites.forEach((s,i)=>{
|
||
const initial = s.url[0].toUpperCase();
|
||
const color = palette[i % palette.length];
|
||
const wpPill = s.wpOk ? 'success' : 'warning';
|
||
const phpOld = (s.php==='7.4');
|
||
body.insertAdjacentHTML('beforeend',`
|
||
<tr>
|
||
<td>
|
||
<div class="site-cell">
|
||
<div class="favicon" style="background:${color}">${initial}</div>
|
||
<div style="min-width:0">
|
||
<a class="site-name" href="Site Details.html" style="display:block">${s.url}</a>
|
||
<div class="site-meta">ssl ✓ · cdn an</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td><span class="pill">${s.server}</span></td>
|
||
<td><span class="pill ${wpPill}">WP ${s.wp}</span></td>
|
||
<td><span class="pill ${phpOld?'warning':''}">php ${s.php}</span></td>
|
||
<td class="num"><span style="color:var(--fg)">${s.visitors}</span></td>
|
||
<td><span class="health"><span class="health-dot ${s.health}"></span><span class="health-label">${s.label}</span></span></td>
|
||
<td class="num"><div class="row-actions">
|
||
<button title="Site öffnen">${Icon.ext}</button>
|
||
<button title="WP-Admin">${Icon.terminal}</button>
|
||
<button title="Mehr">${Icon.more}</button>
|
||
</div></td>
|
||
</tr>`);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|