<!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)”" action=""> <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="/pt/”/#”">Terms of Service</a> and <a href="/pt/”/#”">Privacy Policy</a></label> </div> <button type="”submit”" class="”submit-btn”">Create Account</button> <input type="hidden" name="trp-form-language" value="pt"/></form> <p class="”login-link”"> Already have an account? <a href="/pt/”/#”">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>
