WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Matrex
564
Metehan
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
18 May 2024
13 June 2025
Ein Code von Metehan
21 December 2024
Ein Code von cleancloud166
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ı!'); });
