406 lines
24 KiB
HTML
406 lines
24 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Anmelden · CluPilot</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">
|
|
<style>
|
|
:root{
|
|
--fg:#1a1a22;
|
|
--muted:#5c5c6b;
|
|
--muted-2:#9596a6;
|
|
--accent:#3b6ff2;
|
|
--accent-2:#7c5cff;
|
|
--success:#15a06a;
|
|
--warning:#c2820f;
|
|
--danger:#db3b3b;
|
|
--success-soft:rgba(21,160,106,0.12);
|
|
--accent-soft:rgba(59,111,242,0.12);
|
|
|
|
--glass:rgba(255,255,255,0.55);
|
|
--glass-strong:rgba(255,255,255,0.72);
|
|
--glass-soft:rgba(255,255,255,0.4);
|
|
--glass-border:rgba(255,255,255,0.75);
|
|
--glass-shadow:0 10px 34px -10px rgba(40,52,92,0.20), 0 2px 8px -2px rgba(40,52,92,0.08);
|
|
--glass-inset:inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.25);
|
|
--hairline:rgba(30,35,60,0.08);
|
|
--border-focus:rgba(59,111,242,0.5);
|
|
|
|
--radius:20px;
|
|
--radius-sm:13px;
|
|
--radius-xs:11px;
|
|
--mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
*{box-sizing:border-box}
|
|
html,body{margin:0;padding:0;color:var(--fg);font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
|
|
a{color:var(--accent);text-decoration:none}
|
|
a:hover{text-decoration:underline}
|
|
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
|
|
|
|
body{
|
|
min-height:100vh;
|
|
background:
|
|
radial-gradient(60% 55% at 12% 8%, rgba(99,140,255,0.30), transparent 60%),
|
|
radial-gradient(55% 50% at 88% 0%, rgba(140,108,255,0.26), transparent 58%),
|
|
radial-gradient(50% 60% at 78% 92%, rgba(64,196,210,0.22), transparent 60%),
|
|
radial-gradient(45% 50% at 25% 100%, rgba(120,170,255,0.20), transparent 60%),
|
|
linear-gradient(160deg,#eef1fb 0%,#f4f3fb 50%,#eaf2f8 100%);
|
|
background-attachment:fixed;
|
|
}
|
|
|
|
/* ===== layout: two floating glass panels ===== */
|
|
.page{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(420px,1fr) 1.05fr;gap:14px;padding:14px}
|
|
|
|
.glass-panel{
|
|
border-radius:var(--radius);
|
|
background:var(--glass-strong);
|
|
backdrop-filter:blur(28px) saturate(175%);
|
|
-webkit-backdrop-filter:blur(28px) saturate(175%);
|
|
border:1px solid var(--glass-border);
|
|
box-shadow:var(--glass-shadow), var(--glass-inset);
|
|
}
|
|
|
|
/* ===== left: form ===== */
|
|
.form-side{display:flex;flex-direction:column;padding:30px 44px;min-height:calc(100vh - 28px)}
|
|
.top-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
|
|
.brand{display:flex;align-items:center;gap:10px}
|
|
.brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#5a8bff 0%,#8a63ff 100%);position:relative;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,0.4) inset, 0 6px 16px -4px rgba(90,139,255,0.6)}
|
|
.brand-mark::before{content:"";width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,0.96);box-shadow:inset 0 0 0 2px #5a8bff}
|
|
.brand-name{font-weight:600;font-size:15px;letter-spacing:-0.01em}
|
|
.brand-name span{color:var(--muted-2);font-weight:500;margin-left:5px;font-size:11.5px}
|
|
|
|
.status-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 9px;border:1px solid rgba(21,160,106,0.28);background:var(--success-soft);color:var(--success);border-radius:20px;font-size:11px;font-weight:600;font-family:var(--mono)}
|
|
.pulse-dot{width:6px;height:6px;border-radius:50%;background:currentColor;position:relative;flex:none}
|
|
.pulse-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:currentColor;opacity:0.35;animation:pulse 1.8s ease-out infinite}
|
|
@keyframes pulse{0%{transform:scale(0.6);opacity:.5}100%{transform:scale(2.4);opacity:0}}
|
|
|
|
.form-wrap{margin:auto 0;display:flex;flex-direction:column;gap:24px;max-width:380px;width:100%;padding:44px 0}
|
|
h1{margin:0;font-size:25px;font-weight:600;letter-spacing:-0.02em;line-height:1.2}
|
|
.sub{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
|
|
.sub a{font-weight:600}
|
|
|
|
/* SSO row */
|
|
.sso-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
|
|
.sso-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;background:rgba(255,255,255,0.55);border:1px solid var(--hairline);border-radius:var(--radius-xs);color:var(--fg);font-size:12.5px;font-weight:600;transition:all .15s;box-shadow:inset 0 1px 0 rgba(255,255,255,0.8)}
|
|
.sso-btn:hover{background:rgba(255,255,255,0.9);border-color:var(--glass-border)}
|
|
.sso-btn svg{flex:none}
|
|
|
|
.divider{display:flex;align-items:center;gap:12px;color:var(--muted-2);font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:0.08em}
|
|
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--hairline)}
|
|
|
|
/* Inputs */
|
|
form{display:flex;flex-direction:column;gap:14px}
|
|
.field{display:flex;flex-direction:column;gap:6px}
|
|
.field-label{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--muted);font-weight:600}
|
|
.field-label a{font-size:11.5px;color:var(--muted);font-weight:500}
|
|
.field-label a:hover{color:var(--fg);text-decoration:none}
|
|
.input{display:flex;align-items:center;gap:10px;padding:0 13px;background:rgba(255,255,255,0.5);border:1px solid var(--hairline);border-radius:var(--radius-xs);transition:border-color .15s, background .15s, box-shadow .15s;height:42px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.7)}
|
|
.input:hover{border-color:var(--glass-border);background:rgba(255,255,255,0.65)}
|
|
.input:focus-within{border-color:var(--border-focus);background:rgba(255,255,255,0.85);box-shadow:0 0 0 3px rgba(59,111,242,0.12)}
|
|
.input svg{color:var(--muted-2);flex:none}
|
|
.input input{flex:1;background:none;border:0;outline:0;color:var(--fg);font-size:13.5px;font-family:inherit;min-width:0;height:100%}
|
|
.input input::placeholder{color:var(--muted-2)}
|
|
.input .eye{color:var(--muted);padding:4px;border-radius:6px;display:grid;place-items:center;transition:color .15s,background .15s}
|
|
.input .eye:hover{color:var(--fg);background:rgba(255,255,255,0.7)}
|
|
|
|
/* Remember + submit */
|
|
.row-between{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
|
|
.checkbox{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);cursor:pointer;user-select:none}
|
|
.checkbox input{display:none}
|
|
.checkbox .box{width:16px;height:16px;border-radius:5px;border:1px solid rgba(30,35,60,0.2);background:rgba(255,255,255,0.7);display:grid;place-items:center;transition:all .15s}
|
|
.checkbox input:checked + .box{background:var(--accent);border-color:var(--accent)}
|
|
.checkbox input:checked + .box svg{opacity:1;transform:scale(1)}
|
|
.checkbox .box svg{opacity:0;transform:scale(0.6);transition:all .15s;color:#fff}
|
|
.checkbox:hover{color:var(--fg)}
|
|
|
|
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;background:linear-gradient(180deg,#4f7dff,#3b6ff2);color:#fff;border-radius:var(--radius-xs);font-weight:600;font-size:13.5px;height:44px;transition:filter .15s,transform .05s;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 6px 16px -5px rgba(59,111,242,0.65)}
|
|
.btn-primary:hover{filter:brightness(1.06)}
|
|
.btn-primary:active{transform:translateY(1px)}
|
|
.btn-primary .arrow{transition:transform .15s}
|
|
.btn-primary:hover .arrow{transform:translateX(2px)}
|
|
|
|
/* Magic link / passkey */
|
|
.alt-options{display:flex;flex-direction:column;gap:9px;margin-top:4px}
|
|
.alt-btn{display:flex;align-items:center;gap:11px;padding:10px 13px;background:rgba(255,255,255,0.4);border:1px solid var(--hairline);border-radius:var(--radius-xs);font-size:12.5px;color:var(--fg);font-weight:600;transition:all .15s}
|
|
.alt-btn:hover{border-color:var(--glass-border);background:rgba(255,255,255,0.7)}
|
|
.alt-btn .badge{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--accent);background:var(--accent-soft);padding:2px 7px;border-radius:5px;border:1px solid rgba(59,111,242,0.25);font-weight:600}
|
|
.alt-btn .ico{color:var(--muted)}
|
|
|
|
/* footer */
|
|
.form-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:11.5px;font-family:var(--mono);padding-top:14px;border-top:1px solid var(--hairline);flex-wrap:wrap}
|
|
.form-footer .links{display:flex;gap:14px}
|
|
.form-footer .links a{color:var(--muted)}
|
|
.form-footer .links a:hover{color:var(--fg);text-decoration:none}
|
|
.form-footer .lock{display:flex;align-items:center;gap:6px}
|
|
|
|
/* ===== right: live panel ===== */
|
|
.live-side{position:relative;padding:30px 34px;overflow:hidden;display:flex;flex-direction:column;gap:18px;min-height:calc(100vh - 28px)}
|
|
.live-side::before{
|
|
content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
|
|
background:radial-gradient(80% 50% at 100% 0%, rgba(99,140,255,0.18), transparent 60%);
|
|
}
|
|
.live-side > *{position:relative}
|
|
|
|
.live-head{display:flex;align-items:center;justify-content:space-between}
|
|
.live-head .label{font-size:11px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:0.10em}
|
|
.live-head .meta{font-size:11px;color:var(--muted);font-family:var(--mono)}
|
|
|
|
.hero-quote{margin:8px 0 0;font-size:23px;font-weight:600;letter-spacing:-0.015em;line-height:1.3;max-width:480px}
|
|
.hero-quote em{font-style:normal;color:var(--accent);font-weight:600}
|
|
.hero-sub{color:var(--muted);font-size:13px;max-width:460px;margin-top:7px}
|
|
|
|
/* Stat strip */
|
|
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
|
|
.stat{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:13px;backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.8)}
|
|
.stat-label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
|
|
.stat-value{font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:-0.01em;margin-top:5px}
|
|
.stat-value .unit{font-size:12px;color:var(--muted-2);font-weight:500;margin-left:2px}
|
|
.stat-trend{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:10.5px;color:var(--success);margin-top:5px}
|
|
.stat-trend.warn{color:var(--warning)}
|
|
|
|
/* terminal card — stays dark for code aesthetic */
|
|
.term-card{background:rgba(14,15,24,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-sm);overflow:hidden;flex:1;display:flex;flex-direction:column;min-height:280px;box-shadow:0 14px 40px -12px rgba(20,24,50,0.45), inset 0 1px 0 rgba(255,255,255,0.08)}
|
|
.term-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.07);background:rgba(10,10,16,0.6)}
|
|
.term-dots{display:flex;gap:5px}
|
|
.term-dots span{width:9px;height:9px;border-radius:50%;background:#2a2a36}
|
|
.term-dots span:nth-child(1){background:#f05252}
|
|
.term-dots span:nth-child(2){background:#f5a623}
|
|
.term-dots span:nth-child(3){background:#3ecf8e}
|
|
.term-title{font-family:var(--mono);font-size:11.5px;color:#8888a0;flex:1;text-align:center}
|
|
.term-meta{font-family:var(--mono);font-size:10.5px;color:#5c5c70}
|
|
|
|
.term-body{padding:14px 16px;font-family:var(--mono);font-size:11.5px;line-height:1.6;flex:1;overflow:hidden;position:relative}
|
|
.term-line{display:flex;gap:10px;align-items:flex-start;opacity:0;transform:translateY(4px);animation:typeIn .35s ease forwards}
|
|
.term-time{color:#5c5c70;flex:none;width:60px;font-size:10.5px;padding-top:1px}
|
|
.term-text{color:#cccddd;flex:1;min-width:0;word-break:break-word}
|
|
.term-text .ok{color:#3ecf8e}
|
|
.term-text .warn{color:#f5a623}
|
|
.term-text .err{color:#f05252}
|
|
.term-text .acc{color:#6f9bff}
|
|
.term-text .dim{color:#8888a0}
|
|
.term-text .pkg{color:#c084fc}
|
|
.term-prompt{display:inline-flex;align-items:center;gap:7px;color:#3ecf8e}
|
|
.term-prompt::before{content:"$";color:#6f9bff;font-weight:600}
|
|
@keyframes typeIn{to{opacity:1;transform:translateY(0)}}
|
|
|
|
.cursor{display:inline-block;width:7px;height:13px;background:#6f9bff;vertical-align:-2px;animation:blink 1s steps(1) infinite;margin-left:2px}
|
|
@keyframes blink{50%{opacity:0}}
|
|
|
|
/* mini activity row */
|
|
.live-tags{display:flex;flex-wrap:wrap;gap:7px}
|
|
.live-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;font-size:10.5px;font-family:var(--mono);color:var(--muted);background:var(--glass);border:1px solid var(--glass-border);border-radius:7px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.7)}
|
|
.live-tag .dot{width:5px;height:5px;border-radius:50%;background:var(--success)}
|
|
.live-tag.warn .dot{background:var(--warning)}
|
|
|
|
/* responsive */
|
|
@media (max-width:1080px){
|
|
.page{grid-template-columns:1fr;padding:12px}
|
|
.live-side{display:none}
|
|
.form-side{padding:26px;min-height:calc(100vh - 24px)}
|
|
}
|
|
@media (max-width:520px){
|
|
.form-side{padding:20px}
|
|
.sso-row{grid-template-columns:1fr}
|
|
.form-footer{justify-content:flex-start}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
|
|
<!-- ============ LEFT: FORM ============ -->
|
|
<section class="form-side glass-panel" data-screen-label="Login">
|
|
<div class="top-row">
|
|
<div class="brand">
|
|
<div class="brand-mark" aria-hidden="true"></div>
|
|
<div class="brand-name">CluPilot<span>v2.4</span></div>
|
|
</div>
|
|
<span class="status-chip"><span class="pulse-dot"></span> Alle Systeme aktiv</span>
|
|
</div>
|
|
|
|
<div class="form-wrap">
|
|
<header>
|
|
<h1>Willkommen zurück</h1>
|
|
<p class="sub">Bei CluPilot anmelden oder <a href="#">neues Konto erstellen</a></p>
|
|
</header>
|
|
|
|
<div class="sso-row">
|
|
<button class="sso-btn" type="button">
|
|
<svg width="15" height="15" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/><path fill="#FBBC05" d="M5.84 14.10A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.44.34-2.10V7.06H2.18A11 11 0 0 0 1 12c0 1.77.42 3.45 1.18 4.94l3.66-2.84z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.07.56 4.21 1.64l3.15-3.15C17.45 2.10 14.96 1 12 1A11 11 0 0 0 2.18 7.06l3.66 2.84C6.71 7.30 9.14 5.38 12 5.38z"/></svg>
|
|
Google
|
|
</button>
|
|
<button class="sso-btn" type="button">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.02c-3.2.7-3.87-1.36-3.87-1.36-.52-1.33-1.27-1.68-1.27-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.69 1.24 3.35.95.1-.74.4-1.24.73-1.53-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.28 1.18-3.09-.12-.29-.51-1.46.11-3.05 0 0 .97-.31 3.18 1.18.92-.26 1.91-.39 2.89-.39.98 0 1.97.13 2.89.39 2.20-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.81 1.18 1.83 1.18 3.09 0 4.42-2.69 5.40-5.25 5.68.41.36.78 1.06.78 2.14v3.18c0 .31.21.67.79.55C20.21 21.39 23.5 17.08 23.5 12c0-6.35-5.15-11.5-11.5-11.5z"/></svg>
|
|
GitHub
|
|
</button>
|
|
</div>
|
|
|
|
<div class="divider">oder mit E-Mail</div>
|
|
|
|
<form id="login-form" autocomplete="on">
|
|
<div class="field">
|
|
<label class="field-label" for="email">E-Mail-Adresse</label>
|
|
<div class="input">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
|
|
<input id="email" name="email" type="email" placeholder="du@firma.de" autocomplete="email" required value="m.weber@acme-cluster.de" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label" for="password">
|
|
Passwort
|
|
<a href="#">Vergessen?</a>
|
|
</label>
|
|
<div class="input">
|
|
<svg 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="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
|
|
<input id="password" name="password" type="password" placeholder="••••••••••••" autocomplete="current-password" required value="hunter2-very-secure" />
|
|
<button type="button" class="eye" id="toggle-eye" aria-label="Passwort anzeigen">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row-between">
|
|
<label class="checkbox">
|
|
<input type="checkbox" checked />
|
|
<span class="box">
|
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>
|
|
</span>
|
|
<span>30 Tage angemeldet bleiben</span>
|
|
</label>
|
|
</div>
|
|
|
|
<button class="btn-primary" type="submit">
|
|
Anmelden
|
|
<svg class="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
|
|
</button>
|
|
|
|
<div class="alt-options">
|
|
<button class="alt-btn" type="button">
|
|
<svg class="ico" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>
|
|
Magic-Link per E-Mail senden
|
|
</button>
|
|
<button class="alt-btn" type="button">
|
|
<svg class="ico" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12c0-4.97-4.03-9-9-9-2.5 0-4.76 1.02-6.39 2.67M3 12c0 4.97 4.03 9 9 9 2.5 0 4.76-1.02 6.39-2.67"/><path d="M9 12a3 3 0 1 0 6 0 3 3 0 1 0-6 0M12 1v4M12 19v4"/></svg>
|
|
Mit Passkey anmelden
|
|
<span class="badge">empfohlen</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<footer class="form-footer">
|
|
<div class="lock">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
|
|
TLS 1.3 · AES-256 · region eu-central-1
|
|
</div>
|
|
<div class="links">
|
|
<a href="#">Datenschutz</a>
|
|
<a href="#">AGB</a>
|
|
<a href="#">Status</a>
|
|
<a href="#">Hilfe</a>
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
|
|
<!-- ============ RIGHT: LIVE PANEL ============ -->
|
|
<aside class="live-side glass-panel" aria-hidden="true">
|
|
<div class="live-head">
|
|
<div class="label">— live cluster</div>
|
|
<div class="meta">eu-central-1 · build #4f8a32c</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="hero-quote">Verwalte <em>87 WordPress-Sites</em> auf 6 Servern. Ein Login. Volle Kontrolle.</p>
|
|
<p class="hero-sub">SSH-Tunnel, Backups, Updates und Security in einer Konsole — von Push-to-Deploy bis Brute-Force-Defense.</p>
|
|
</div>
|
|
|
|
<div class="stat-strip">
|
|
<div class="stat">
|
|
<div class="stat-label">Sites Online</div>
|
|
<div class="stat-value">87<span class="unit">/87</span></div>
|
|
<div class="stat-trend">● 100% Uptime · 24h</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-label">Ø Response</div>
|
|
<div class="stat-value">142<span class="unit">ms</span></div>
|
|
<div class="stat-trend">↓ 8,4% vs. 7d</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-label">Blocked / 24h</div>
|
|
<div class="stat-value">128</div>
|
|
<div class="stat-trend warn">↑ 23% Brute-force</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="term-card">
|
|
<div class="term-head">
|
|
<div class="term-dots"><span></span><span></span><span></span></div>
|
|
<div class="term-title">ssh <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92fde2e1d2f7e7bfe2e0fdf6bfa2a3bcf1fee7e2fbfefde6bcfbfd">[email protected]</a></div>
|
|
<div class="term-meta">pts/0</div>
|
|
</div>
|
|
<div class="term-body" id="term-body"></div>
|
|
</div>
|
|
|
|
<div class="live-tags">
|
|
<span class="live-tag"><span class="dot"></span>eu-prod-01 · 23 sites</span>
|
|
<span class="live-tag"><span class="dot"></span>eu-prod-02 · 19 sites</span>
|
|
<span class="live-tag"><span class="dot"></span>edge-ams · 14 sites</span>
|
|
<span class="live-tag warn"><span class="dot"></span>us-east-01 · CPU 78%</span>
|
|
<span class="live-tag"><span class="dot"></span>staging · 6 sites</span>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
|
|
const eyeBtn = document.getElementById('toggle-eye');
|
|
const pwd = document.getElementById('password');
|
|
eyeBtn.addEventListener('click', () => { pwd.type = pwd.type === 'password' ? 'text' : 'password'; });
|
|
|
|
document.getElementById('login-form').addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const btn = e.target.querySelector('.btn-primary');
|
|
const orig = btn.innerHTML;
|
|
btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="animation:spin 0.8s linear infinite"><path d="M21 12a9 9 0 1 1-6.2-8.55"/></svg> Authentifiziere…';
|
|
btn.disabled = true;
|
|
setTimeout(() => { btn.innerHTML = orig; btn.disabled = false; }, 1800);
|
|
});
|
|
|
|
const lines = [
|
|
['09:42:18', '<span class="term-prompt"></span> <span class="dim">clupilot</span> status --cluster=acme'],
|
|
['09:42:18', '<span class="ok">✓</span> 87/87 sites <span class="dim">healthy</span> · <span class="acc">142ms</span> ø response'],
|
|
['09:42:19', '<span class="ok">✓</span> backup eu-prod-02 → <span class="pkg">s3://clupilot-backups</span> <span class="dim">248 MB</span>'],
|
|
['09:42:21', '<span class="acc">→</span> deploying <span class="pkg">Yoast-SEO@22.5</span> to <span class="dim">3 sites…</span>'],
|
|
['09:42:23', '<span class="ok">✓</span> agentur-helio.com <span class="dim">(312ms)</span>'],
|
|
['09:42:24', '<span class="ok">✓</span> blog.fintech-radar.io <span class="dim">(287ms)</span>'],
|
|
['09:42:24', '<span class="ok">✓</span> docs.opencrate.dev <span class="dim">(298ms)</span>'],
|
|
['09:42:26', '<span class="warn">!</span> classic.tonhoff-bau.de <span class="dim">PHP 7.4 EOL — migration queued</span>'],
|
|
['09:42:28', '<span class="err">✗</span> fw <span class="dim">blocked</span> 17 login attempts from <span class="acc">185.220.101.18</span> <span class="dim">(TOR)</span>'],
|
|
['09:42:30', '<span class="ok">✓</span> SSL renewed: <span class="pkg">*.kunde-mueller.de</span> <span class="dim">until 2026-08-25</span>'],
|
|
['09:42:32', '<span class="term-prompt"></span> <span class="dim">tail -f /var/log/clupilot/audit.log</span><span class="cursor"></span>'],
|
|
];
|
|
const body = document.getElementById('term-body');
|
|
let i = 0;
|
|
function addLine(){
|
|
if(i >= lines.length){ setTimeout(() => { body.innerHTML = ''; i = 0; addLine(); }, 5000); return; }
|
|
const [t, html] = lines[i++];
|
|
const el = document.createElement('div');
|
|
el.className = 'term-line';
|
|
el.innerHTML = '<div class="term-time">'+t+'</div><div class="term-text">'+html+'</div>';
|
|
body.appendChild(el);
|
|
body.scrollTop = body.scrollHeight;
|
|
while(body.children.length > 11) body.removeChild(body.firstChild);
|
|
setTimeout(addLine, 600 + Math.random()*450);
|
|
}
|
|
addLine();
|
|
|
|
const style = document.createElement('style');
|
|
style.textContent = '@keyframes spin{to{transform:rotate(360deg)}}';
|
|
document.head.appendChild(style);
|
|
</script>
|
|
</body>
|
|
</html>
|