WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Xendre Login</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <!-- Login Form --> <div class="card login-card"> <div class="logo">XENDRE</div> <form> <div class="input-group"> <input type="text" id="username" placeholder="Username" required> </div> <div class="input-group"> <input type="password" id="password" placeholder="Password" required> </div> <a href="#" class="forgot-link">Forgot Password?</a> <div class="button-group"> <button type="submit" class="btn primary">LOGIN</button> <button type="button" class="btn secondary">SIGNUP</button> </div> </form> <div class="divider">OR</div> <div class="fingerprint-login"> <button id="fingerprint-button"> <div class="fingerprint-icon"></div> </button> <p>Login with Touch ID</p> </div> </div> <!-- Fingerprint Scan Animation --> <div class="card scan-card"> <div class="scan-container"> <div class="fingerprint-scan"></div> <p>Scanning...</p> </div> </div> </div> <script src="script.js"></script> </body> </html>
/* General Styles */ body { margin: 0; font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #6e45e2, #88d3ce); } .container { display: flex; gap: 30px; } .card { background: linear-gradient(135deg, #612778, #894ac8); border-radius: 20px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); padding: 30px; text-align: center; color: white; width: 300px; } .logo { font-size: 24px; font-weight: bold; letter-spacing: 2px; margin-bottom: 20px; } .input-group { margin-bottom: 15px; } input { width: 100%; padding: 10px; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: white; outline: none; font-size: 14px; } input::placeholder { color: rgba(255, 255, 255, 0.7); } .forgot-link { display: block; margin: 10px 0; color: #f4c4f3; text-decoration: none; font-size: 12px; } .button-group { display: flex; justify-content: space-between; margin: 20px 0; } button { padding: 10px 20px; border: none; border-radius: 10px; cursor: pointer; font-size: 14px; } .btn.primary { background: #f4c4f3; color: #612778; } .btn.secondary { background: transparent; color: white; border: 2px solid white; } .divider { margin: 20px 0; font-size: 12px; opacity: 0.7; } .fingerprint-login { display: flex; flex-direction: column; align-items: center; } .fingerprint-icon { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; position: relative; } .fingerprint-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; transform: translate(-50%, -50%); } .scan-card { display: none; } .scan-container { margin-top: 50px; } .fingerprint-scan { width: 80px; height: 80px; border: 4px solid white; border-radius: 50%; position: relative; animation: scan-animation 2s infinite; } @keyframes scan-animation { 0% { border-color: rgba(255, 255, 255, 0.3); } 50% { border-color: rgba(255, 255, 255, 1); } 100% { border-color: rgba(255, 255, 255, 0.3); } }
const fingerprintButton = document.getElementById('fingerprint-button'); const loginCard = document.querySelector('.login-card'); const scanCard = document.querySelector('.scan-card'); fingerprintButton.addEventListener('click', () => { loginCard.style.display = 'none'; scanCard.style.display = 'block'; setTimeout(() => { alert('Fingerprint recognized! Logging in...'); scanCard.style.display = 'none'; loginCard.style.display = 'block'; }, 3000); // Simulates fingerprint scanning for 3 seconds });
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Xendre Login</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <!-- Login Form --> <div class="card login-card"> <div class="logo">XENDRE</div> <form> <div class="input-group"> <input type="text" id="username" placeholder="Username" required> </div> <div class="input-group"> <input type="password" id="password" placeholder="Password" required> </div> <a href="#" class="forgot-link">Forgot Password?</a> <div class="button-group"> <button type="submit" class="btn primary">LOGIN</button> <button type="button" class="btn secondary">SIGNUP</button> </div> </form> <div class="divider">OR</div> <div class="fingerprint-login"> <button id="fingerprint-button"> <div class="fingerprint-icon"></div> </button> <p>Login with Touch ID</p> </div> </div> <!-- Fingerprint Scan Animation --> <div class="card scan-card"> <div class="scan-container"> <div class="fingerprint-scan"></div> <p>Scanning...</p> </div> </div> </div> <script src="script.js"></script> </body> </html>
/* General Styles */ body { margin: 0; font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #6e45e2, #88d3ce); } .container { display: flex; gap: 30px; } .card { background: linear-gradient(135deg, #612778, #894ac8); border-radius: 20px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); padding: 30px; text-align: center; color: white; width: 300px; } .logo { font-size: 24px; font-weight: bold; letter-spacing: 2px; margin-bottom: 20px; } .input-group { margin-bottom: 15px; } input { width: 100%; padding: 10px; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: white; outline: none; font-size: 14px; } input::placeholder { color: rgba(255, 255, 255, 0.7); } .forgot-link { display: block; margin: 10px 0; color: #f4c4f3; text-decoration: none; font-size: 12px; } .button-group { display: flex; justify-content: space-between; margin: 20px 0; } button { padding: 10px 20px; border: none; border-radius: 10px; cursor: pointer; font-size: 14px; } .btn.primary { background: #f4c4f3; color: #612778; } .btn.secondary { background: transparent; color: white; border: 2px solid white; } .divider { margin: 20px 0; font-size: 12px; opacity: 0.7; } .fingerprint-login { display: flex; flex-direction: column; align-items: center; } .fingerprint-icon { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; position: relative; } .fingerprint-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; transform: translate(-50%, -50%); } .scan-card { display: none; } .scan-container { margin-top: 50px; } .fingerprint-scan { width: 80px; height: 80px; border: 4px solid white; border-radius: 50%; position: relative; animation: scan-animation 2s infinite; } @keyframes scan-animation { 0% { border-color: rgba(255, 255, 255, 0.3); } 50% { border-color: rgba(255, 255, 255, 1); } 100% { border-color: rgba(255, 255, 255, 0.3); } }
const fingerprintButton = document.getElementById('fingerprint-button'); const loginCard = document.querySelector('.login-card'); const scanCard = document.querySelector('.scan-card'); fingerprintButton.addEventListener('click', () => { loginCard.style.display = 'none'; scanCard.style.display = 'block'; setTimeout(() => { alert('Fingerprint recognized! Logging in...'); scanCard.style.display = 'none'; loginCard.style.display = 'block'; }, 3000); // Simulates fingerprint scanning for 3 seconds });