WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Matrex
1176
Metehan
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
29 August 2024
20 June 2025
Türkisches Login-Formular HTML
14 September 2024
Hover-Schieberegler (dunkel/hell)
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ı!'); });
