WEBLEB
Accueil
Éditeur
Chat communauté
Connexion
Pro
Français
English
Français
Español
Page d'accueil de Matrice Rouge
2,275
Metehan
0
Remixer
Ouvrir dans l'éditeur
Plein écran
Discuter
Publiez votre code
0
Recommandé
2 June 2025
Un code par sam_64
22 August 2025
Conception de sites Web, marketing numérique et services vidéo
19 May 2026
Code du jeu HTML5 Super Tucker Bros Deluxe
HTML
Copy
Modern Giriş Sayfası
Hoş Geldiniz
Kullanıcı Adı
Şifre
Giriş Yap
Şifremi Unuttum
•
Yeni Hesap Oluştur
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } body { min-height: 100vh; background: linear-gradient(135deg, #1a0001, #440000); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } /* 3D Shapes Animation */ .shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; } .shape { position: absolute; filter: blur(1px); opacity: 0.5; animation: float 10s infinite; } .shape:nth-child(1) { width: 100px; height: 100px; background: #ff0000; top: 20%; left: 10%; animation-delay: 0s; transform: rotate(45deg); } .shape:nth-child(2) { width: 150px; height: 150px; background: #ff2222; top: 60%; right: 10%; animation-delay: 2s; border-radius: 50%; } .shape:nth-child(3) { width: 80px; height: 80px; background: #ff4444; bottom: 20%; left: 20%; animation-delay: 4s; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } } .container { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 2rem; border-radius: 16px; width: 90%; max-width: 400px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); position: relative; z-index: 2; border: 1px solid rgba(255, 255, 255, 0.2); } h1 { color: #fff; text-align: center; margin-bottom: 1.5rem; font-size: 1.75rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .fingerprint-container { text-align: center; margin: 1rem 0 2rem 0; } .fingerprint { width: 80px; height: 80px; cursor: pointer; transition: all 0.3s ease; filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.5)); } .fingerprint:hover { transform: scale(1.1); filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8)); } .form-group { margin-bottom: 1.5rem; position: relative; } .form-group input { width: 100%; padding: 1rem; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: #fff; font-size: 1rem; transition: all 0.3s ease; } .form-group input:focus { outline: none; border-color: #ff0000; background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 15px rgba(255, 0, 0, 0.3); } .form-group label { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.6); pointer-events: none; transition: all 0.3s ease; } .form-group input:focus + label, .form-group input:not(:placeholder-shown) + label { top: 0; left: 0.5rem; font-size: 0.75rem; padding: 0 0.5rem; background: #ff0000; border-radius: 4px; color: #fff; } .btn { width: 100%; padding: 1rem; background: #ff0000; color: #fff; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; } .btn:hover { background: #cc0000; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3); } .links { margin-top: 1.5rem; text-align: center; } .links a { color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 0.875rem; transition: all 0.3s ease; margin: 0 0.5rem; } .links a:hover { color: #ff0000; text-shadow: 0 0 5px rgba(255, 0, 0, 0.5); }
JS
Copy
document.getElementById('loginForm').addEventListener('submit', function(e) { e.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; // Button animation effect const btn = document.querySelector('.btn'); btn.style.transform = 'scale(0.95)'; setTimeout(() => { btn.style.transform = 'translateY(-2px)'; }, 200); console.log('Login attempt:', { username, password }); }); // Fingerprint scanning animation const fingerprint = document.querySelector('.fingerprint'); let isScanning = false; fingerprint.addEventListener('click', function() { if (isScanning) return; isScanning = true; this.style.filter = 'drop-shadow(0 0 20px rgba(255, 0, 0, 0.8))'; let degree = 0; const scanAnimation = setInterval(() => { degree += 10; this.style.transform = `rotate(${degree}deg) scale(1.1)`; if (degree >= 360) { clearInterval(scanAnimation); this.style.transform = 'rotate(0deg) scale(1)'; this.style.filter = 'drop-shadow(0 0 10px rgba(255, 0, 0, 0.5))'; isScanning = false; } }, 30); }); // Float label effect document.querySelectorAll('.form-group input').forEach(input => { input.addEventListener('focus', function() { this.parentElement.classList.add('focused'); }); input.addEventListener('blur', function() { if (!this.value) { this.parentElement.classList.remove('focused'); } }); }); // Random movement for shapes const shapes = document.querySelectorAll('.shape'); shapes.forEach(shape => { setInterval(() => { const randomX = Math.random() * 20 - 10; const randomY = Math.random() * 20 - 10; shape.style.transform = `translate(${randomX}px, ${randomY}px) rotate(${Math.random() * 360}deg)`; }, 3000); });