475 lines
27 KiB
HTML
475 lines
27 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{
|
|
--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);
|
|
--surface-2:rgba(30,35,60,0.08);
|
|
|
|
--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;
|
|
}
|
|
|
|
.page{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(440px,1fr) 1fr;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}
|
|
|
|
.top-link{font-size:12.5px;color:var(--muted)}
|
|
.top-link a{margin-left:6px;font-weight:600}
|
|
|
|
/* Stepper */
|
|
.stepper{display:flex;align-items:center;gap:10px;margin-top:30px;font-family:var(--mono);font-size:11px;color:var(--muted-2)}
|
|
.step{display:flex;align-items:center;gap:7px}
|
|
.step-num{width:22px;height:22px;border-radius:50%;border:1px solid var(--hairline);display:grid;place-items:center;font-size:10.5px;color:var(--muted);background:rgba(255,255,255,0.6)}
|
|
.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:600}
|
|
.step.active .step-label{color:var(--fg)}
|
|
.step-line{flex:1;height:1px;background:var(--hairline);min-width:14px;max-width:28px}
|
|
|
|
.form-wrap{margin:auto 0;display:flex;flex-direction:column;gap:22px;max-width:420px;width:100%;padding:30px 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)}
|
|
|
|
.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-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:600}
|
|
.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 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.with-suffix{padding-right:0}
|
|
.input-suffix{height:100%;display:flex;align-items:center;padding:0 13px;border-left:1px solid var(--hairline);color:var(--muted);font-family:var(--mono);font-size:11.5px;background:rgba(255,255,255,0.5);border-top-right-radius:var(--radius-xs);border-bottom-right-radius:var(--radius-xs)}
|
|
.input .eye{color:var(--muted);padding:4px;border-radius:6px;display:grid;place-items:center;transition:color .15s,background .15s;margin-right:4px}
|
|
.input .eye:hover{color:var(--fg);background:rgba(255,255,255,0.7)}
|
|
.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:4px;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:7px;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: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;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: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)}
|
|
|
|
/* 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: benefits panel ===== */
|
|
.live-side{position:relative;padding:32px 36px;overflow:hidden;display:flex;flex-direction:column;gap:20px;min-height:calc(100vh - 28px)}
|
|
.live-side::before{
|
|
content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
|
|
background:radial-gradient(70% 50% at 100% 0%, rgba(99,140,255,0.18), transparent 60%);
|
|
}
|
|
.live-side > *{position:relative}
|
|
|
|
.trial-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:18px 20px;position:relative;overflow:hidden;backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.85)}
|
|
.trial-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b6ff2,#7c5cff)}
|
|
.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:6px;border:1px solid rgba(59,111,242,0.28);font-weight:600;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:23px;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,#3b6ff2,#7c5cff);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
|
|
.trial-sub{color:var(--muted);font-size:13px;margin-top:7px;max-width:440px}
|
|
|
|
.benefit-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:15px}
|
|
.benefit{display:flex;gap:13px;align-items:flex-start}
|
|
.benefit-ico{width:32px;height:32px;border-radius:9px;background:var(--accent-soft);border:1px solid rgba(59,111,242,0.25);color:var(--accent);display:grid;place-items:center;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,0.5)}
|
|
.benefit-ico.success{background:var(--success-soft);border-color:rgba(21,160,106,0.25);color:var(--success)}
|
|
.benefit-ico.purple{background:rgba(124,92,255,0.12);border-color:rgba(124,92,255,0.25);color:#7c5cff}
|
|
.benefit-ico.warn{background:rgba(194,130,15,0.12);border-color:rgba(194,130,15,0.25);color:var(--warning)}
|
|
.benefit-body{flex:1;min-width:0}
|
|
.benefit-title{font-size:13.5px;font-weight:600;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:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:18px 20px;backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.85)}
|
|
.quote-text{font-size:13.5px;color:#34343f;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)}
|
|
.author-meta{font-size:12px}
|
|
.author-name{color:var(--fg);font-weight:600}
|
|
.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.8;font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em}
|
|
.logo-pill{padding:5px 11px;border:1px solid var(--glass-border);border-radius:7px;background:var(--glass);box-shadow:inset 0 1px 0 rgba(255,255,255,0.7)}
|
|
|
|
/* 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}
|
|
.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 glass-panel" data-screen-label="Signup">
|
|
<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 glass-panel" 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>
|
|
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); });
|
|
|
|
const email = document.getElementById('email');
|
|
const emailWrap = document.getElementById('email-wrap');
|
|
email.addEventListener('input', () => {
|
|
emailWrap.classList.toggle('valid', /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value));
|
|
});
|
|
|
|
const pwd = document.getElementById('password');
|
|
const meter = document.getElementById('pw-meter');
|
|
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];
|
|
document.querySelector(`.pw-rule[data-rule="${k}"]`).classList.toggle('ok', ok);
|
|
if(ok) score++;
|
|
});
|
|
meter.className = 'pw-meter' + (v.length ? ' s'+score : '');
|
|
});
|
|
|
|
document.getElementById('toggle-eye').addEventListener('click', () => {
|
|
pwd.type = pwd.type === 'password' ? 'text' : 'password';
|
|
});
|
|
|
|
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>
|