Files
boc/quixzoom-landing-fixed/register/index.html
T
Bernt 48ea61cdcc docs: add quixzoom-auth-core product to AAMOS
- Product documentation in docs/products/
- Updated MEMORY.md with product info
- quiXzoom Auth Core as AAMOS Identity product
2026-07-14 09:58:53 +00:00

89 lines
4.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Join as Zoomer — quiXzoom</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta name="description" content="Join quiXzoom as a Zoomer. Free to join, no fees. Get paid per approved mission.">
<style>
:root{
--bg-white:#FFFFFF;--bg-off:#F7F7F5;--blue:#0066FF;--blue-dark:#0052CC;
--text-dark:#1a1a1a;--text-body:#3a3a3a;--text-muted:#6B6B6B;
--radius-card:16px;--radius-lg:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Inter','Helvetica Neue',sans-serif;font-size:1rem;line-height:1.65;color:var(--text-body);background:var(--bg-white);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.register-card{background:var(--bg-off);border-radius:var(--radius-card);padding:48px;width:100%;max-width:420px}
.logo{font-size:2rem;font-weight:900;color:var(--text-dark);text-align:center;margin-bottom:8px}
.logo .x{color:var(--blue)}
.subtitle{color:var(--text-muted);text-align:center;margin-bottom:32px;font-size:.9rem}
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:.875rem;font-weight:600;color:var(--text-dark);margin-bottom:6px}
.form-input{width:100%;padding:12px 16px;border:1.5px solid rgba(0,0,0,.1);border-radius:12px;font-size:1rem;background:#fff;color:var(--text-dark);transition:border-color .15s}
.form-input:focus{outline:none;border-color:var(--blue)}
.form-input::placeholder{color:rgba(10,10,10,.35)}
.btn-submit{width:100%;background:var(--blue);color:#fff;border:none;border-radius:var(--radius-lg);padding:14px 24px;font-size:1rem;font-weight:700;cursor:pointer;transition:background .15s;margin-top:8px}
.btn-submit:hover{background:var(--blue-dark)}
.login-link{text-align:center;margin-top:20px;font-size:.875rem;color:var(--text-muted)}
.login-link a{color:var(--blue);font-weight:600;text-decoration:none}
.features{display:flex;justify-content:center;gap:32px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(0,0,0,.08)}
.feature{text-align:center}
.feature-icon{width:40px;height:40px;margin:0 auto 8px;background:var(--blue);border-radius:10px;display:flex;align-items:center;justify-content:center}
.feature-icon svg{width:20px;height:20px;stroke:white;stroke-width:2;fill:none}
.feature-label{font-size:.75rem;color:var(--text-muted);font-weight:600}
@media(max-width:480px){.register-card{padding:32px 24px}}
</style>
<script type="module" src="https://auth.quixzoom.com/site-auth-snippet.js"></script>
</head>
<body>
<div class="register-card">
<div class="logo">qui<span class="x">X</span>zoom</div>
<p class="subtitle">Join as Zoomer — Free, no fees</p>
<form onsubmit="event.preventDefault();alert('Registration opens August 2026. Join the waitlist!');">
<div class="form-group">
<label class="form-label">Full Name</label>
<input type="text" class="form-input" placeholder="Anna Svensson" required>
</div>
<div class="form-group">
<label class="form-label">Email</label>
<input type="email" class="form-input" placeholder="anna@example.com" required>
</div>
<div class="form-group">
<label class="form-label">Phone Number</label>
<input type="tel" class="form-input" placeholder="+46 70 123 45 67" required>
</div>
<div class="form-group">
<label class="form-label">Password</label>
<input type="password" class="form-input" placeholder="Min. 8 characters" required minlength="8">
</div>
<button type="submit" class="btn-submit">Create Account</button>
</form>
<p class="login-link">Already have an account? <a href="/login">Log in</a></p>
<div class="features">
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="12" r="5"/></svg>
</div>
<div class="feature-label">Photograph</div>
</div>
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v12M8 10l4-4 4 4"/></svg>
</div>
<div class="feature-label">Earn Money</div>
</div>
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
</div>
<div class="feature-label">Flexible</div>
</div>
</div>
</div>
</body>
</html>