WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Matrex
1000
Metehan
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
14 October 2024
Modulo di iscrizione
13 January 2024
6 January 2025
Un codice di pivete290
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ı!'); });
