478 lines
26 KiB
HTML
478 lines
26 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Konto erstellen · 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{
|
|
--bg:#f7f7f9;
|
|
--bg-2:#fbfbfd;
|
|
--card:#ffffff;
|
|
--card-hover:#f5f5f8;
|
|
--surface:#f1f1f5;
|
|
--surface-2:#ebebf0;
|
|
--border:rgba(17,17,27,0.07);
|
|
--border-strong:rgba(17,17,27,0.12);
|
|
--border-focus:rgba(59,122,242,0.5);
|
|
--fg:#18181b;
|
|
--muted:#71717a;
|
|
--muted-2:#a1a1ad;
|
|
--accent:#3b7af2;
|
|
--accent-2:#6b46ff;
|
|
--accent-soft:rgba(59,122,242,0.10);
|
|
--success:#16a368;
|
|
--warning:#c87f10;
|
|
--danger:#dc3a3a;
|
|
--success-soft:rgba(22,163,104,0.10);
|
|
--mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
*{box-sizing:border-box}
|
|
html,body{margin:0;padding:0;background:var(--bg);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::before{
|
|
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
|
|
background:
|
|
radial-gradient(60% 50% at 12% 10%, rgba(59,122,242,0.08), transparent 65%),
|
|
radial-gradient(50% 50% at 88% 100%, rgba(107,70,255,0.06), transparent 65%);
|
|
}
|
|
body::after{
|
|
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
|
|
background-image:
|
|
linear-gradient(rgba(17,17,27,0.025) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(17,17,27,0.025) 1px, transparent 1px);
|
|
background-size:32px 32px;
|
|
mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
|
|
}
|
|
|
|
.page{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(440px,1fr) 1fr;gap:0}
|
|
|
|
/* ===== left: form ===== */
|
|
.form-side{display:flex;flex-direction:column;padding:32px 48px;min-height:100vh}
|
|
.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:8px;background:linear-gradient(135deg,#4f8ef7 0%,#7c5cff 100%);position:relative;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,0.20) inset, 0 6px 16px rgba(79,142,247,0.32)}
|
|
.brand-mark::before{content:"";width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,0.95);box-shadow:inset 0 0 0 2px #4f8ef7}
|
|
.brand-name{font-weight:600;font-size:15px;letter-spacing:-0.01em}
|
|
.brand-name span{color:var(--muted);font-weight:500;margin-left:5px;font-size:11.5px}
|
|
|
|
.top-link{font-size:12.5px;color:var(--muted)}
|
|
.top-link a{margin-left:6px;font-weight:500}
|
|
|
|
/* Stepper */
|
|
.stepper{display:flex;align-items:center;gap:10px;margin-top:32px;font-family:var(--mono);font-size:11px;color:var(--muted-2)}
|
|
.step{display:flex;align-items:center;gap:7px}
|
|
.step-num{width:20px;height:20px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;font-size:10.5px;color:var(--muted);background:var(--surface)}
|
|
.step.active .step-num{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
|
|
.step.done .step-num{border-color:var(--success);color:#ffffff;background:var(--success)}
|
|
.step-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;font-weight:500}
|
|
.step.active .step-label{color:var(--fg)}
|
|
.step-line{flex:1;height:1px;background:var(--border);min-width:14px;max-width:28px}
|
|
|
|
.form-wrap{margin:auto 0;display:flex;flex-direction:column;gap:22px;max-width:420px;width:100%;padding:32px 0}
|
|
h1{margin:0;font-size:24px;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:500}
|
|
|
|
/* SSO row */
|
|
.sso-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
|
.sso-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;background:#fff;border:1px solid var(--border);border-radius:8px;color:var(--fg);font-size:12.5px;font-weight:500;transition:all .15s}
|
|
.sso-btn:hover{background:var(--surface);border-color:var(--border-strong)}
|
|
|
|
.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(--border)}
|
|
|
|
/* Inputs */
|
|
form{display:flex;flex-direction:column;gap:14px}
|
|
.field{display:flex;flex-direction:column;gap:6px}
|
|
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
|
|
.field-label{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--muted);font-weight:500}
|
|
.field-label .hint{font-family:var(--mono);font-size:10.5px;color:var(--muted-2);font-weight:400}
|
|
.input{display:flex;align-items:center;gap:10px;padding:0 12px;background:#fff;border:1px solid var(--border);border-radius:8px;transition:border-color .15s, background .15s, box-shadow .15s;height:40px}
|
|
.input:hover{border-color:var(--border-strong)}
|
|
.input:focus-within{border-color:var(--border-focus);background:#fff;box-shadow:0 0 0 3px rgba(59,122,242,0.10)}
|
|
.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.with-suffix{padding-right:0}
|
|
.input-suffix{height:100%;display:flex;align-items:center;padding:0 12px;border-left:1px solid var(--border);color:var(--muted);font-family:var(--mono);font-size:11.5px;background:var(--surface);border-top-right-radius:8px;border-bottom-right-radius:8px}
|
|
.input .eye{color:var(--muted);padding:4px;border-radius:4px;display:grid;place-items:center;transition:color .15s,background .15s;margin-right:4px}
|
|
.input .eye:hover{color:var(--fg);background:var(--surface)}
|
|
.input-check{color:var(--success);margin-right:8px;display:none}
|
|
.input.valid .input-check{display:inline-flex}
|
|
|
|
/* Slug preview */
|
|
.slug-preview{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
|
|
.slug-preview b{color:var(--accent);font-weight:500}
|
|
|
|
/* Password strength */
|
|
.pw-meter{display:flex;gap:4px;margin-top:6px}
|
|
.pw-meter span{flex:1;height:3px;border-radius:2px;background:var(--surface-2);transition:background .2s}
|
|
.pw-meter.s1 span:nth-child(-n+1){background:var(--danger)}
|
|
.pw-meter.s2 span:nth-child(-n+2){background:var(--warning)}
|
|
.pw-meter.s3 span:nth-child(-n+3){background:var(--accent)}
|
|
.pw-meter.s4 span{background:var(--success)}
|
|
.pw-rules{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px;font-family:var(--mono);font-size:10.5px;color:var(--muted-2)}
|
|
.pw-rule{display:inline-flex;align-items:center;gap:5px}
|
|
.pw-rule .bullet{width:5px;height:5px;border-radius:50%;background:var(--muted-2);transition:background .15s}
|
|
.pw-rule.ok{color:var(--success)}
|
|
.pw-rule.ok .bullet{background:var(--success)}
|
|
|
|
/* Checkbox + submit */
|
|
.checkbox{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--muted);cursor:pointer;user-select:none;line-height:1.45}
|
|
.checkbox input{display:none}
|
|
.checkbox .box{width:15px;height:15px;border-radius:4px;border:1px solid var(--border-strong);background:#fff;display:grid;place-items:center;transition:all .15s;flex:none;margin-top:1px}
|
|
.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:10px 16px;background:var(--accent);color:#fff;border-radius:8px;font-weight:500;font-size:13.5px;height:40px;transition:background .15s,transform .05s;box-shadow:0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 3px rgba(59,122,242,0.30)}
|
|
.btn-primary:hover{background:#2c6ce6}
|
|
.btn-primary:active{transform:translateY(1px)}
|
|
.btn-primary .arrow{transition:transform .15s}
|
|
.btn-primary:hover .arrow{transform:translateX(2px)}
|
|
|
|
/* 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:12px;border-top:1px solid var(--border);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: benefits panel ===== */
|
|
.live-side{position:relative;border-left:1px solid var(--border);background:linear-gradient(180deg,#fbfbfd 0%, #f3f3f7 100%);padding:36px 40px;overflow:hidden;display:flex;flex-direction:column;gap:22px;min-height:100vh}
|
|
.live-side::before{
|
|
content:"";position:absolute;inset:0;pointer-events:none;
|
|
background:radial-gradient(70% 50% at 100% 0%, rgba(59,122,242,0.10), transparent 65%);
|
|
}
|
|
.live-side > *{position:relative}
|
|
|
|
.trial-card{background:#ffffff;border:1px solid var(--border);border-radius:12px;padding:18px 20px;position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(17,17,27,0.05)}
|
|
.trial-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b7af2,#6b46ff)}
|
|
.trial-row{display:flex;align-items:center;justify-content:space-between}
|
|
.trial-tag{font-family:var(--mono);font-size:10.5px;color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:5px;border:1px solid rgba(59,122,242,0.28);font-weight:500;text-transform:uppercase;letter-spacing:0.05em}
|
|
.trial-count{font-family:var(--mono);font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
|
|
.pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--success);position:relative;flex:none}
|
|
.pulse-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:currentColor;color:var(--success);opacity:0.4;animation:pulse 1.8s ease-out infinite}
|
|
@keyframes pulse{0%{transform:scale(0.6);opacity:.5}100%{transform:scale(2.4);opacity:0}}
|
|
|
|
.trial-title{font-size:22px;font-weight:600;letter-spacing:-0.015em;line-height:1.25;margin-top:12px;max-width:420px}
|
|
.trial-title em{font-style:normal;background:linear-gradient(90deg,#3b7af2,#6b46ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
|
|
.trial-sub{color:var(--muted);font-size:13px;margin-top:6px;max-width:440px}
|
|
|
|
.benefit-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
|
|
.benefit{display:flex;gap:12px;align-items:flex-start}
|
|
.benefit-ico{width:30px;height:30px;border-radius:8px;background:var(--accent-soft);border:1px solid rgba(59,122,242,0.25);color:var(--accent);display:grid;place-items:center;flex:none}
|
|
.benefit-ico.success{background:var(--success-soft);border-color:rgba(22,163,104,0.25);color:var(--success)}
|
|
.benefit-ico.purple{background:rgba(107,70,255,0.10);border-color:rgba(107,70,255,0.25);color:#6b46ff}
|
|
.benefit-ico.warn{background:rgba(200,127,16,0.10);border-color:rgba(200,127,16,0.25);color:var(--warning)}
|
|
.benefit-body{flex:1;min-width:0}
|
|
.benefit-title{font-size:13.5px;font-weight:500;color:var(--fg)}
|
|
.benefit-desc{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5}
|
|
|
|
/* Quote */
|
|
.quote-card{margin-top:auto;background:#ffffff;border:1px solid var(--border);border-radius:12px;padding:18px 20px;box-shadow:0 4px 16px rgba(17,17,27,0.05)}
|
|
.quote-text{font-size:13.5px;color:#3f3f47;line-height:1.55;font-weight:400}
|
|
.quote-text::before{content:"„";color:var(--accent);font-size:24px;line-height:0;margin-right:4px;vertical-align:-6px;font-weight:600}
|
|
.quote-text::after{content:""";color:var(--accent);font-weight:600}
|
|
.quote-author{display:flex;align-items:center;gap:10px;margin-top:12px}
|
|
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#16a368,#0c7a4e);display:grid;place-items:center;color:#ffffff;font-weight:600;font-size:12px;font-family:var(--mono)}
|
|
.avatar.alt{background:linear-gradient(135deg,#6b46ff,#3b7af2);color:#fff}
|
|
.author-meta{font-size:12px}
|
|
.author-name{color:var(--fg);font-weight:500}
|
|
.author-role{color:var(--muted);font-size:11px;font-family:var(--mono)}
|
|
|
|
/* Logo strip */
|
|
.logos{display:flex;align-items:center;gap:20px;flex-wrap:wrap;opacity:0.75;font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em}
|
|
.logo-pill{padding:5px 10px;border:1px solid var(--border);border-radius:5px;background:#ffffff}
|
|
|
|
/* responsive */
|
|
@media (max-width:1080px){
|
|
.page{grid-template-columns:1fr}
|
|
.live-side{display:none}
|
|
.form-side{padding:28px}
|
|
}
|
|
@media (max-width:520px){
|
|
.form-side{padding:22px}
|
|
.sso-row{grid-template-columns:1fr}
|
|
.field-row{grid-template-columns:1fr}
|
|
.form-footer{justify-content:flex-start}
|
|
.stepper .step-label{display:none}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
|
|
<!-- ============ LEFT: FORM ============ -->
|
|
<section class="form-side">
|
|
<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>
|
|
<div class="top-link">Schon Konto?<a href="#">Anmelden →</a></div>
|
|
</div>
|
|
|
|
<div class="stepper" aria-label="Registrierungs-Schritte">
|
|
<div class="step active">
|
|
<div class="step-num">1</div>
|
|
<div class="step-label">Konto</div>
|
|
</div>
|
|
<div class="step-line"></div>
|
|
<div class="step">
|
|
<div class="step-num">2</div>
|
|
<div class="step-label">Workspace</div>
|
|
</div>
|
|
<div class="step-line"></div>
|
|
<div class="step">
|
|
<div class="step-num">3</div>
|
|
<div class="step-label">Erster Server</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-wrap">
|
|
<header>
|
|
<h1>14 Tage kostenlos testen</h1>
|
|
<p class="sub">Keine Kreditkarte. Volle Funktionen. Jederzeit kündbar.</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>
|
|
Mit Google fortfahren
|
|
</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>
|
|
Mit GitHub fortfahren
|
|
</button>
|
|
</div>
|
|
|
|
<div class="divider">oder mit E-Mail</div>
|
|
|
|
<form id="signup-form" autocomplete="on">
|
|
<div class="field-row">
|
|
<div class="field">
|
|
<label class="field-label" for="firstname">Vorname</label>
|
|
<div class="input">
|
|
<input id="firstname" type="text" placeholder="Marie" autocomplete="given-name" required />
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="field-label" for="lastname">Nachname</label>
|
|
<div class="input">
|
|
<input id="lastname" type="text" placeholder="Weber" autocomplete="family-name" required />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label" for="email">Arbeits-E-Mail</label>
|
|
<div class="input" id="email-wrap">
|
|
<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" type="email" placeholder="du@firma.de" autocomplete="email" required />
|
|
<svg class="input-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12l5 5L20 7"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label" for="workspace">
|
|
Workspace-Name
|
|
<span class="hint">URL für dein Team</span>
|
|
</label>
|
|
<div class="input with-suffix">
|
|
<svg width="15" height="15" 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"/><circle cx="7" cy="7.5" r="0.7" fill="currentColor"/><circle cx="7" cy="16.5" r="0.7" fill="currentColor"/></svg>
|
|
<input id="workspace" type="text" placeholder="Acme Cluster" required />
|
|
<span class="input-suffix" id="slug-suffix">.clupilot.io</span>
|
|
</div>
|
|
<div class="slug-preview">Erreichbar unter <b id="slug-preview">dein-team</b>.clupilot.io</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label" for="password">
|
|
Passwort
|
|
<span class="hint">min. 10 Zeichen</span>
|
|
</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" type="password" placeholder="••••••••••••" autocomplete="new-password" required />
|
|
<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 class="pw-meter" id="pw-meter"><span></span><span></span><span></span><span></span></div>
|
|
<div class="pw-rules">
|
|
<span class="pw-rule" data-rule="len"><span class="bullet"></span>10+ Zeichen</span>
|
|
<span class="pw-rule" data-rule="upper"><span class="bullet"></span>Großbuchstabe</span>
|
|
<span class="pw-rule" data-rule="num"><span class="bullet"></span>Zahl</span>
|
|
<span class="pw-rule" data-rule="sym"><span class="bullet"></span>Sonderzeichen</span>
|
|
</div>
|
|
</div>
|
|
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="agree" required />
|
|
<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>Ich akzeptiere die <a href="#">AGB</a> und stimme der <a href="#">Datenschutzerklärung</a> zu. CluPilot speichert SSH-Keys verschlüsselt in der EU.</span>
|
|
</label>
|
|
|
|
<button class="btn-primary" type="submit">
|
|
Konto erstellen
|
|
<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>
|
|
</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: TRIAL / BENEFITS ============ -->
|
|
<aside class="live-side" aria-hidden="true">
|
|
|
|
<div class="trial-card">
|
|
<div class="trial-row">
|
|
<span class="trial-tag">14 Tage Pro · gratis</span>
|
|
<span class="trial-count"><span class="pulse-dot"></span> 47 Teams diese Woche</span>
|
|
</div>
|
|
<div class="trial-title">In <em>60 Sekunden</em> deinen ersten Server verbunden.</div>
|
|
<div class="trial-sub">SSH-Schlüssel hochladen, Site importieren, fertig. Wir kümmern uns ums Monitoring, Backups und Updates — du um dein Business.</div>
|
|
</div>
|
|
|
|
<ul class="benefit-list">
|
|
<li class="benefit">
|
|
<div class="benefit-ico">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 17l5-5-5-5M13 19h7"/></svg>
|
|
</div>
|
|
<div class="benefit-body">
|
|
<div class="benefit-title">SSH-First Setup</div>
|
|
<div class="benefit-desc">Verbinde Hetzner, Hostinger oder deinen eigenen Server in 2 Klicks — keine Agents, kein Custom-DNS.</div>
|
|
</div>
|
|
</li>
|
|
<li class="benefit">
|
|
<div class="benefit-ico success">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12c0 5-9 9-9 9s-9-4-9-9V5l9-3 9 3v7z"/><path d="M9 11l2 2 4-4"/></svg>
|
|
</div>
|
|
<div class="benefit-body">
|
|
<div class="benefit-title">Stündliche Backups inklusive</div>
|
|
<div class="benefit-desc">Verschlüsselt nach Frankfurt-S3, 30 Tage Retention, One-Click-Restore — auch für die WP-Datenbank.</div>
|
|
</div>
|
|
</li>
|
|
<li class="benefit">
|
|
<div class="benefit-ico purple">
|
|
<svg width="15" height="15" 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 class="benefit-body">
|
|
<div class="benefit-title">Bulk-Updates ohne Drama</div>
|
|
<div class="benefit-desc">WordPress, Plugins und Themes auf 100 Sites gleichzeitig — mit Staging-Diff und automatischem Rollback bei Fehler.</div>
|
|
</div>
|
|
</li>
|
|
<li class="benefit">
|
|
<div class="benefit-ico warn">
|
|
<svg width="15" height="15" 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 class="benefit-body">
|
|
<div class="benefit-title">Brute-Force-Defense aktiv</div>
|
|
<div class="benefit-desc">Geo-Fencing, Rate-Limits und WP-User-Lockout — schon im Trial dabei. Letzte 24h: 12.488 Versuche blockiert.</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="quote-card">
|
|
<div class="quote-text">Statt 18 SSH-Sessions in Terminal-Tabs habe ich jetzt eine Konsole. Mein Agency-Team hostet 87 Sites — und schläft endlich wieder durch.</div>
|
|
<div class="quote-author">
|
|
<div class="avatar">JK</div>
|
|
<div class="author-meta">
|
|
<div class="author-name">Julian Koch</div>
|
|
<div class="author-role">CTO · Helio Digital · 87 Sites</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="logos">
|
|
<span>vertrauen uns</span>
|
|
<span class="logo-pill">helio.</span>
|
|
<span class="logo-pill">acme▲</span>
|
|
<span class="logo-pill">opencrate</span>
|
|
<span class="logo-pill">bergmann</span>
|
|
<span class="logo-pill">+ 2.1k</span>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<script>
|
|
/* ---- workspace slug preview ---- */
|
|
const ws = document.getElementById('workspace');
|
|
const slug = document.getElementById('slug-preview');
|
|
const slugify = s => s.toLowerCase().trim().replace(/[^a-z0-9]+/g,'-').replace(/^-|-$/g,'').slice(0,32) || 'dein-team';
|
|
ws.addEventListener('input', () => { slug.textContent = slugify(ws.value); });
|
|
|
|
/* ---- email valid checkmark ---- */
|
|
const email = document.getElementById('email');
|
|
const emailWrap = document.getElementById('email-wrap');
|
|
email.addEventListener('input', () => {
|
|
emailWrap.classList.toggle('valid', /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value));
|
|
});
|
|
|
|
/* ---- pw strength + rules ---- */
|
|
const pwd = document.getElementById('password');
|
|
const meter = document.getElementById('pw-meter');
|
|
const rules = document.querySelectorAll('.pw-rule');
|
|
pwd.addEventListener('input', () => {
|
|
const v = pwd.value;
|
|
const tests = {
|
|
len: v.length >= 10,
|
|
upper: /[A-Z]/.test(v),
|
|
num: /[0-9]/.test(v),
|
|
sym: /[^A-Za-z0-9]/.test(v),
|
|
};
|
|
let score = 0;
|
|
Object.keys(tests).forEach(k => {
|
|
const ok = tests[k];
|
|
const el = document.querySelector(`.pw-rule[data-rule="${k}"]`);
|
|
el.classList.toggle('ok', ok);
|
|
if(ok) score++;
|
|
});
|
|
meter.className = 'pw-meter' + (v.length ? ' s'+score : '');
|
|
});
|
|
|
|
/* ---- eye toggle ---- */
|
|
document.getElementById('toggle-eye').addEventListener('click', () => {
|
|
pwd.type = pwd.type === 'password' ? 'text' : 'password';
|
|
});
|
|
|
|
/* ---- submit (demo) ---- */
|
|
document.getElementById('signup-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> Konto wird angelegt…';
|
|
btn.disabled = true;
|
|
setTimeout(() => { btn.innerHTML = orig; btn.disabled = false; }, 1800);
|
|
});
|
|
|
|
const style = document.createElement('style');
|
|
style.textContent = '@keyframes spin{to{transform:rotate(360deg)}}';
|
|
document.head.appendChild(style);
|
|
</script>
|
|
</body>
|
|
</html>
|