<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Sign Up</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .signup-container { background: white; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); max-width: 450px; width: 100%; padding: 40px; } h1 { color: #333; margin-bottom: 10px; font-size: 28px; } .subtitle { color: #666; margin-bottom: 30px; font-size: 14px; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; color: #333; font-weight: 500; font-size: 14px; } input { width: 100%; padding: 12px 15px; border: 2px solid #e1e8ed; border-radius: 6px; font-size: 15px; transition: border-color 0.3s; } input:focus { outline: none; border-color: #667eea; } .password-strength { height: 4px; background: #e1e8ed; border-radius: 2px; margin-top: 8px; overflow: hidden; } .password-strength-bar { height: 100%; width: 0%; transition: all 0.3s; } .strength-weak { background: #ff4757; width: 33%; } .strength-medium { background: #ffa502; width: 66%; } .strength-strong { background: #26de81; width: 100%; } .checkbox-group { display: flex; align-items: start; margin-bottom: 20px; } .checkbox-group input[type=”checkbox”] { width: auto; margin-right: 10px; margin-top: 3px; } .checkbox-group label { margin-bottom: 0; font-weight: 400; font-size: 13px; } .checkbox-group a { color: #667eea; text-decoration: none; } .checkbox-group a:hover { text-decoration: underline; } .submit-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4); } .submit-btn:active { transform: translateY(0); } .divider { text-align: center; margin: 25px 0; position: relative; } .divider::before { content: ”; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e1e8ed; } .divider span { background: white; padding: 0 15px; position: relative; color: #999; font-size: 13px; } .social-login { display: flex; gap: 10px; margin-bottom: 25px; } .social-btn { flex: 1; padding: 12px; border: 2px solid #e1e8ed; background: white; border-radius: 6px; cursor: pointer; transition: all 0.3s; font-size: 14px; font-weight: 500; } .social-btn:hover { border-color: #667eea; background: #f8f9ff; } .login-link { text-align: center; margin-top: 20px; font-size: 14px; color: #666; } .login-link a { color: #667eea; text-decoration: none; font-weight: 600; } .login-link a:hover { text-decoration: underline; } .error { color: #ff4757; font-size: 12px; margin-top: 5px; display: none; } </style> </head> <body> <div class=”signup-container”> <h1>Create Account</h1> <p class=”subtitle”>Join us today and get started</p> <div class=”social-login”> <button class=”social-btn” onclick=”alert(‘Google sign-up integration needed’)”> Google </button> <button class=”social-btn” onclick=”alert(‘GitHub sign-up integration needed’)”> GitHub </button> </div> <div class=”divider”> <span>or sign up with email</span> </div> <form id=”signupForm” onsubmit=”handleSubmit(event)”> <div class=”form-group”> <label for=”fullname”>Full Name</label> <input type=”text” id=”fullname” name=”fullname” required> </div> <div class=”form-group”> <label for=”email”>Email Address</label> <input type=”email” id=”email” name=”email” required> <span class=”error” id=”emailError”>Please enter a valid email</span> </div> <div class=”form-group”> <label for=”password”>Password</label> <input type=”password” id=”password” name=”password” required minlength=”8″ oninput=”checkPasswordStrength()”> <div class=”password-strength”> <div class=”password-strength-bar” id=”strengthBar”></div> </div> </div> <div class=”form-group”> <label for=”confirmPassword”>Confirm Password</label> <input type=”password” id=”confirmPassword” name=”confirmPassword” required> <span class=”error” id=”passwordError”>Passwords do not match</span> </div> <div class=”checkbox-group”> <input type=”checkbox” id=”terms” name=”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=”submit-btn”>Create Account</button> </form> <p class=”login-link”> Already have an account? <a href=”#”>Log in</a> </p> </div> <script> function checkPasswordStrength() { const password = document.getElementById(‘password’).value; const strengthBar = document.getElementById(‘strengthBar’); let strength = 0; if (password.length >= 8) strength++; if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength++; if (password.match(/[0-9]/)) strength++; if (password.match(/[^a-zA-Z0-9]/)) strength++; strengthBar.className = ‘password-strength-bar’; if (strength <= 2) { strengthBar.classList.add(‘strength-weak’); } else if (strength === 3) { strengthBar.classList.add(‘strength-medium’); } else { strengthBar.classList.add(‘strength-strong’); } } function handleSubmit(e) { e.preventDefault(); const password = document.getElementById(‘password’).value; const confirmPassword = document.getElementById(‘confirmPassword’).value; const email = document.getElementById(’email’).value; const passwordError = document.getElementById(‘passwordError’); const emailError = document.getElementById(’emailError’); // Reset errors passwordError.style.display = ‘none’; emailError.style.display = ‘none’; // Validate email const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { emailError.style.display = ‘block’; return; } // Validate password match if (password !== confirmPassword) { passwordError.style.display = ‘block’; return; } // If validation passes, you would send data to your server here alert(‘Sign up successful! In a real application, this would send data to your server.’); // Example of what you might do: // fetch(‘/api/signup’, { // method: ‘POST’, // headers: { ‘Content-Type’: ‘application/json’ }, // body: JSON.stringify({ // fullname: document.getElementById(‘fullname’).value, // email: email, // password: password // }) // }); } </script> </body> </html>
