WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Matriz
1011
Metehan
Abrir en el editor
Publica tu código
Recomendado
24 June 2025
Bienes Raíces de Élite: Apartamentos, Villas, Casas en Venta y Alquiler
7 October 2025
Fragmento de animación de carga de CSS
13 June 2025
Un código de ashimadison8
HTML
Copy
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Matrix Hacker Giriş Sayfası</title> <link rel="stylesheet" href="styles.css"> </head> <body> <canvas id="matrix-canvas"></canvas> <div class="login-container"> <form id="loginForm"> <h1>Giriş Yap</h1> <div class="input-field"> <input type="text" id="username" placeholder="Kullanıcı Adı" required> </div> <div class="input-field"> <input type="password" id="password" placeholder="Şifre" required> </div> <button type="submit">Giriş</button> </form> </div> <script src="scripts.js"></script> </body> </html>
CSS
Copy
body, html { height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: 'Courier New', monospace; } #matrix-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .login-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 1; } h1 { color: #00FF00; text-shadow: 0 0 10px #00FF00; margin-bottom: 20px; } .input-field { margin: 20px 0; } input { background: rgba(0, 0, 0, 0.5); border: none; border-bottom: 2px solid #00FF00; color: #00FF00; font-size: 16px; padding: 10px; width: 250px; outline: none; transition: border-color 0.3s; } input:focus { border-color: #008000; } input::placeholder { color: rgba(0, 255, 0, 0.5); } button { background: none; border: 2px solid #00FF00; color: #00FF00; padding: 10px 20px; cursor: pointer; font-size: 16px; transition: all 0.3s ease; } button:hover { background: #00FF00; color: black; }
JS
Copy
const canvas = document.getElementById('matrix-canvas'); const ctx = canvas.getContext('2d'); canvas.height = window.innerHeight; canvas.width = window.innerWidth; const matrixChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()_+-={}[]|\\:;"\'<>,.?/'; const fontSize = 16; const columns = canvas.width / fontSize; const drops = []; for (let i = 0; i < columns; i++) { drops[i] = 1; } function draw() { ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#0F0'; ctx.font = fontSize + 'px monospace'; for (let i = 0; i < drops.length; i++) { const text = matrixChars[Math.floor(Math.random() * matrixChars.length)]; ctx.fillText(text, i * fontSize, drops[i] * fontSize); if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) { drops[i] = 0; } drops[i]++; } } setInterval(draw, 33); document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); alert('Giriş yapıldı!'); });
