WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Alternatif bir Giriş sayfası
944
Metehan
Open In Editor
Publish Your Code
Recommended
6 October 2024
Animated Label Input Tag
26 July 2025
hover memory recursive colors
24 November 2024
Shoes shop
HTML
Copy
Xendre Login
XENDRE
Forgot Password?
LOGIN
SIGNUP
OR
Login with Touch ID
Scanning...
CSS
Copy
/* 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); } }
JS
Copy
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 });