Untitled
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Uniko - Log In & Sign Up</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #4c9eff, #6a5ae0); color: #fff; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background: rgba(255, 255, 255, 0.1); border-radius: 15px; backdrop-filter: blur(10px); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); width: 90%; max-width: 400px; padding: 20px; } .header { text-align: center; margin-bottom: 20px; } .header h1 { font-size: 2em; margin-bottom: 10px; } .form-group { margin-bottom: 15px; } .form-group label { display: block; font-size: 0.9em; margin-bottom: 5px; } .form-group input { width: 100%; padding: 10px; border: none; border-radius: 5px; outline: none; font-size: 1em; } .btn { width: 100%; padding: 10px; border: none; border-radius: 5px; font-size: 1em; font-weight: bold; color: #fff; cursor: pointer; transition: background 0.3s; } .btn-primary { background: #4c9eff; } .btn-primary:hover { background: #398ed9; } .btn-secondary { background: #6a5ae0; } .btn-secondary:hover { background: #5848c1; } .switch { text-align: center; margin-top: 20px; } .switch p { font-size: 0.9em; } .switch a { color: #4c9eff; text-decoration: none; font-weight: bold; cursor: pointer; } .switch a:hover { text-decoration: underline; } </style> </head> <body> <div class="container" id="login-container"> <div class="header"> <h1>Welcome to Uniko</h1> <p>Log in to your account</p> </div> <form id="login-form"> <div class="form-group"> <label for="login-email">Email</label> <input type="email" id="login-email" placeholder="Enter your email" required> </div> <div class="form-group"> <label for="login-password">Password</label> <input type="password" id="login-password" placeholder="Enter your password" required> </div> <button type="submit" class="btn btn-primary">Log In</button> </form> <div class="switch"> <p>Don't have an account? <a id="show-signup">Sign Up</a></p> </div> </div> <div class="container" id="signup-container" style="display: none;"> <div class="header"> <h1>Join Uniko</h1> <p>Create your account</p> </div> <form id="signup-form"> <div class="form-group"> <label for="signup-name">Name</label> <input type="text" id="signup-name" placeholder="Enter your name" required> </div> <div class="form-group"> <label for="signup-email">Email</label> <input type="email" id="signup-email" placeholder="Enter your email" required> </div> <div class="form-group"> <label for="signup-password">Password</label> <input type="password" id="signup-password" placeholder="Create a password" required> </div> <button type="submit" class="btn btn-secondary">Sign Up</button> </form> <div class="switch"> <p>Already have an account? <a id="show-login">Log In</a></p> </div> </div> <script> const loginContainer = document.getElementById('login-container'); const signupContainer = document.getElementById('signup-container'); const showSignup = document.getElementById('show-signup'); const showLogin = document.getElementById('show-login'); showSignup.addEventListener('click', () => { loginContainer.style.display = 'none'; signupContainer.style.display = 'block'; }); showLogin.addEventListener('click', () => { signupContainer.style.display = 'none'; loginContainer.style.display = 'block'; }); </script> </body> </html>
Leave a Comment