HTML Template
87 lines
5.4 KB
Register Page Template
Live Preview
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register Page Template</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0a0a0f; color: #e4e4e7; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.card { background: #18181b; border: 1px solid #27272a; border-radius: 20px; padding: 2.5rem; width: 100%; max-width: 420px; }
.logo { text-align: center; font-size: 1.5rem; font-weight: 800; color: #6366f1; margin-bottom: 0.5rem; }
.subtitle { text-align: center; color: #71717a; font-size: 0.9rem; margin-bottom: 2rem; }
.form-group { margin-bottom: 1rem; }
.form-row { display: flex; gap: 0.75rem; }
.form-row .form-group { flex: 1; }
label { display: block; font-size: 0.8rem; font-weight: 600; color: #a1a1aa; margin-bottom: 0.4rem; }
input { width: 100%; padding: 0.7rem 0.9rem; background: #09090b; border: 1px solid #27272a; border-radius: 10px; color: #e4e4e7; font-size: 0.9rem; outline: none; transition: border-color 0.3s; }
input:focus { border-color: #6366f1; }
input::placeholder { color: #52525b; }
.password-strength { height: 4px; border-radius: 999px; margin-top: 0.5rem; background: #27272a; overflow: hidden; }
.password-strength .bar { height: 100%; width: 0; border-radius: 999px; transition: all 0.3s; }
.strength-text { font-size: 0.7rem; color: #71717a; margin-top: 0.25rem; }
.terms { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 1.5rem; }
.terms input { width: 16px; height: 16px; accent-color: #6366f1; margin-top: 2px; }
.terms label { font-size: 0.8rem; color: #71717a; font-weight: 400; }
.terms a { color: #6366f1; text-decoration: none; }
.btn { width: 100%; padding: 0.8rem; background: #6366f1; color: #fff; border: none; border-radius: 10px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.3s; }
.btn:hover { background: #4f46e5; }
.divider { text-align: center; margin: 1.25rem 0; color: #52525b; font-size: 0.8rem; position: relative; }
.divider::before, .divider::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: #27272a; }
.divider::before { left: 0; } .divider::after { right: 0; }
.social-btn { width: 100%; padding: 0.7rem; background: #09090b; border: 1px solid #27272a; border-radius: 10px; color: #a1a1aa; font-size: 0.85rem; cursor: pointer; margin-bottom: 0.5rem; transition: border-color 0.3s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.social-btn:hover { border-color: #3f3f46; }
.login { text-align: center; margin-top: 1.25rem; font-size: 0.85rem; color: #71717a; }
.login a { color: #6366f1; text-decoration: none; }
</style>
</head>
<body>
<div class="card">
<div class="logo">CDNSnippet</div>
<p class="subtitle">Create your free account</p>
<form onsubmit="event.preventDefault(); alert('Registration form submitted!');">
<div class="form-row">
<div class="form-group"><label>First Name</label><input type="text" placeholder="John" required></div>
<div class="form-group"><label>Last Name</label><input type="text" placeholder="Doe" required></div>
</div>
<div class="form-group"><label>Email</label><input type="email" placeholder="you@example.com" required></div>
<div class="form-group">
<label>Password</label>
<input type="password" id="pwd" placeholder="Create a password" required oninput="checkStrength(this.value)">
<div class="password-strength"><div class="bar" id="strengthBar"></div></div>
<div class="strength-text" id="strengthText">Enter a password</div>
</div>
<div class="terms">
<input type="checkbox" id="terms" required>
<label for="terms">I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a></label>
</div>
<button type="submit" class="btn">Create Account</button>
</form>
<div class="divider">OR</div>
<button class="social-btn">🕵 Sign up with Google</button>
<button class="social-btn">📱 Sign up with GitHub</button>
<p class="login">Already have an account? <a href="#">Sign in</a></p>
</div>
<script>
function checkStrength(v) {
const bar = document.getElementById('strengthBar');
const txt = document.getElementById('strengthText');
let s = 0;
if (v.length >= 8) s++;
if (/[A-Z]/.test(v)) s++;
if (/[0-9]/.test(v)) s++;
if (/[^A-Za-z0-9]/.test(v)) s++;
const levels = [
{ w: '0%', c: '#ef4444', t: 'Enter a password' },
{ w: '25%', c: '#ef4444', t: 'Weak' },
{ w: '50%', c: '#f59e0b', t: 'Fair' },
{ w: '75%', c: '#3b82f6', t: 'Good' },
{ w: '100%', c: '#22c55e', t: 'Strong' }
];
const l = levels[s];
bar.style.width = l.w; bar.style.background = l.c; txt.textContent = l.t;
}
</script>
</body>
</html>