WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Una página de inicio con color León
1365
Metehan
Abrir en el editor
Video
Publica tu código
0
Recomendado
29 August 2025
Administrador de tareas HTML: agregar, eliminar y completar tareas
29 December 2024
Una página de inicio alternativa
25 January 2026
Plantilla HTML para reproductor de juegos Flash Ruffle
HTML
Copy
Giriş Sayfası
Giriş Sayfası
Giriş Yap
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #121212; overflow: hidden; } .login-container { width: 400px; background-color: rgba(30,30,30,0.9); border-radius: 15px; padding: 40px; box-shadow: 0 15px 35px rgba(0,0,0,0.5); position: relative; z-index: 2; transition: all 0.3s ease; } .login-container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient( transparent, transparent, transparent, #00ff00 ); animation: rotate 4s linear infinite; z-index: -1; } .login-container::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #121212; margin: 10px; border-radius: 10px; z-index: -1; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .logo { text-align: center; color: #00ff00; font-size: 2.5rem; margin-bottom: 30px; text-shadow: 0 0 10px rgba(0,255,0,0.5); } .input-group { position: relative; margin-bottom: 20px; } .input-group input { width: 100%; padding: 12px 20px; background-color: rgba(50,50,50,0.8); border: 2px solid transparent; border-radius: 8px; color: #00ff00; outline: none; transition: all 0.3s ease; } .input-group input:focus { border-color: #00ff00; box-shadow: 0 0 15px rgba(0,255,0,0.3); } .input-group input::placeholder { color: rgba(0,255,0,0.5); } .login-btn { width: 100%; padding: 12px; background-color: #00ff00; color: #121212; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .login-btn:hover { background-color: #00cc00; transform: scale(1.05); } .error-message { color: #ff0000; text-align: center; margin-bottom: 15px; display: none; } .matrix-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
JS
Copy
// Matrix Arka Plan Efekti const canvas = document.getElementById('matrixCanvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const letters = '01'; const fontSize = 10; const columns = canvas.width / fontSize; const drops = []; for (let x = 0; x < columns; x++) { drops[x] = 1; } function drawMatrix() { ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#00ff00'; ctx.font = fontSize + 'px monospace'; for (let i = 0; i < drops.length; i++) { const text = letters.charAt(Math.floor(Math.random() * letters.length)); ctx.fillText(text, i * fontSize, drops[i] * fontSize); if (drops[i] * fontSize > canvas.height && Math.random() > 0.95) { drops[i] = 0; } drops[i]++; } } function animateMatrix() { drawMatrix(); requestAnimationFrame(animateMatrix); } // Giriş Doğrulama function validateLogin(event) { event.preventDefault(); const username = document.getElementById('username'); const password = document.getElementById('password'); const errorMessage = document.getElementById('errorMessage'); const validUsername = 'admin'; const validPassword = 'leon123'; if (username.value === validUsername && password.value === validPassword) { errorMessage.style.display = 'none'; // Sahte yükleme animasyonu canvas.style.transition = 'opacity 1s'; canvas.style.opacity = '0'; setTimeout(() => { alert('Giriş Başarılı! Yönlendiriliyorsunuz...'); }, 500); } else { errorMessage.textContent = 'Hatalı kullanıcı adı veya şifre!'; errorMessage.style.display = 'block'; } } // Event Listener'ları document.getElementById('loginForm').addEventListener('submit', validateLogin); // Pencere boyutu değiştiğinde canvas'ı yeniden boyutlandır window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); // Matrix Animasyonunu Başlat animateMatrix();