Spaces:
Running
Running
add more animations, make the website appealing to the eye, comfortable and createive
839b8ab verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Create Password | PESO Registry</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --mint-green: #98FF98; | |
| --mint-dark: #79C779; | |
| --mint-light: #D1FFD1; | |
| } | |
| .password-card { | |
| border-radius: 15px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); | |
| background-color: white; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } | |
| .btn-mint { | |
| background-color: var(--mint-green); | |
| border-color: var(--mint-green); | |
| color: #333; | |
| } | |
| .btn-mint:hover { | |
| background-color: var(--mint-dark); | |
| border-color: var(--mint-dark); | |
| } | |
| .password-strength { | |
| height: 5px; | |
| margin-top: 5px; | |
| background-color: #e9ecef; | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .password-strength-bar { | |
| height: 100%; | |
| width: 0; | |
| transition: width 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light"> | |
| <div class="container py-5"> | |
| <div class="row justify-content-center"> | |
| <div class="col-md-8"> | |
| <div class="password-card p-4 p-md-5"> | |
| <div class="text-center mb-4"> | |
| <h2 class="fw-bold">Create Your Account</h2> | |
| <p class="text-muted">Your username has been generated. Now create a password.</p> | |
| </div> | |
| <form id="passwordForm"> | |
| <div class="mb-3"> | |
| <label for="username" class="form-label">Your Username</label> | |
| <input type="text" class="form-control" id="username" value="DoeJ" readonly> | |
| <div class="form-text">Username format: Lastname + First Initial (Doe + J)</div> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="password" class="form-label">Password</label> | |
| <input type="password" class="form-control" id="password" required> | |
| <div class="password-strength"> | |
| <div class="password-strength-bar" id="passwordStrengthBar"></div> | |
| </div> | |
| <div class="form-text">Password must be at least 8 characters</div> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="confirmPassword" class="form-label">Confirm Password</label> | |
| <input type="password" class="form-control" id="confirmPassword" required> | |
| <div id="passwordMatch" class="form-text"></div> | |
| </div> | |
| <div class="d-grid"> | |
| <button type="submit" class="btn btn-mint">Create Account</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| document.getElementById('password').addEventListener('input', function() { | |
| const password = this.value; | |
| const strengthBar = document.getElementById('passwordStrengthBar'); | |
| let strength = 0; | |
| // Length check | |
| if (password.length > 7) strength += 25; | |
| if (password.length > 11) strength += 25; | |
| // Character variety | |
| if (password.match(/[a-z]/)) strength += 10; | |
| if (password.match(/[A-Z]/)) strength += 10; | |
| if (password.match(/[0-9]/)) strength += 10; | |
| if (password.match(/[^a-zA-Z0-9]/)) strength += 10; | |
| // Update strength bar | |
| strengthBar.style.width = `${strength}%`; | |
| // Update color | |
| if (strength < 40) { | |
| strengthBar.style.backgroundColor = '#dc3545'; | |
| } else if (strength < 70) { | |
| strengthBar.style.backgroundColor = '#fd7e14'; | |
| } else { | |
| strengthBar.style.backgroundColor = '#28a745'; | |
| } | |
| }); | |
| document.getElementById('confirmPassword').addEventListener('input', function() { | |
| const password = document.getElementById('password').value; | |
| const confirmPassword = this.value; | |
| const matchText = document.getElementById('passwordMatch'); | |
| if (confirmPassword === '') { | |
| matchText.textContent = ''; | |
| matchText.style.color = ''; | |
| } else if (password === confirmPassword) { | |
| matchText.textContent = 'Passwords match'; | |
| matchText.style.color = '#28a745'; | |
| } else { | |
| matchText.textContent = 'Passwords do not match'; | |
| matchText.style.color = '#dc3545'; | |
| } | |
| }); | |
| document.getElementById('passwordForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const password = document.getElementById('password').value; | |
| const confirmPassword = document.getElementById('confirmPassword').value; | |
| if (password.length < 8) { | |
| alert('Password must be at least 8 characters long'); | |
| return; | |
| } | |
| if (password !== confirmPassword) { | |
| alert('Passwords do not match'); | |
| return; | |
| } | |
| // Here you would typically send the password to the server | |
| // For demo, we'll redirect to the login page | |
| alert('Account created successfully! Please login with your credentials.'); | |
| window.location.href = 'index.html'; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |