WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Professional Login Portal</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient( 45deg, #FFD700, /* Sarı */ #FF4444, /* Kırmızı */ #4169E1, /* Mavi */ #32CD32, /* Yeşil */ #FFA500, /* Turuncu */ #8B4513 /* Kahverengi */ ); background-size: 600% 600%; animation: gradientBG 20s ease infinite; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: Arial, sans-serif; } @keyframes gradientBG { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} } .container { width: 400px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 40px; border-radius: 20px; box-shadow: 0 0 30px rgba(0,0,0,0.3); border: 2px solid rgba(255, 255, 255, 0.1); animation: float 6s ease-in-out infinite; } @keyframes float { 0% {transform: translateY(0px);} 50% {transform: translateY(-20px);} 100% {transform: translateY(0px);} } .leon-logo { width: 120px; height: 120px; margin: 0 auto 30px; background: linear-gradient(45deg, #FFD700, #FF4444); border-radius: 25px; position: relative; overflow: hidden; animation: roar 3s ease infinite; box-shadow: 0 0 20px rgba(0,0,0,0.3); } @keyframes roar { 0% {transform: scale(1) rotate(0deg);} 25% {transform: scale(1.1) rotate(-5deg);} 50% {transform: scale(1) rotate(0deg);} 75% {transform: scale(1.1) rotate(5deg);} 100% {transform: scale(1) rotate(0deg);} } .leon-logo::after { content: "LEON"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } h2 { text-align: center; margin-bottom: 30px; color: white; font-size: 28px; text-transform: uppercase; letter-spacing: 3px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .input-group { margin-bottom: 25px; position: relative; } input { width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 10px; color: white; font-size: 16px; transition: all 0.3s ease; outline: none; } input::placeholder { color: rgba(255, 255, 255, 0.7); } input:focus { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 15px rgba(255,255,255,0.2); } button { width: 100%; padding: 15px; background: linear-gradient(45deg, #FFD700, #FF4444); border: none; border-radius: 10px; color: white; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); } button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); } button:active { transform: translateY(2px); } .forgot { text-align: center; margin-top: 20px; } .forgot a { color: white; text-decoration: none; font-size: 14px; transition: all 0.3s ease; position: relative; } .forgot a:hover { text-shadow: 0 0 10px white; } .forgot a::after { content: ''; position: absolute; width: 100%; height: 2px; bottom: -4px; left: 0; background: white; transform: scaleX(0); transition: transform 0.3s ease; } .forgot a:hover::after { transform: scaleX(1); } #message { text-align: center; margin-top: 20px; padding: 10px; border-radius: 5px; font-size: 14px; transition: all 0.3s ease; } .matrix-effect { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: 0.3; } @media (max-width: 480px) { .container { width: 90%; padding: 20px; } .leon-logo { width: 100px; height: 100px; } h2 { font-size: 24px; } } </style> </head> <body> <canvas class="matrix-effect" id="matrix"></canvas> <div class="container"> <div class="leon-logo"></div> <h2>Matrix Portal</h2> <form id="loginForm"> <div class="input-group"> <input type="text" id="username" placeholder="Kullanıcı Adı" required autocomplete="off"> </div> <div class="input-group"> <input type="password" id="password" placeholder="Şifre" required> </div> <button type="submit">Giriş Yap</button> </form> <div class="forgot"> <a href="#" id="forgotPassword">Şifremi Unuttum</a> </div> <div id="message"></div> </div> <script> const canvas = document.getElementById('matrix'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const colors = ['#FFD700', '#FF4444', '#4169E1', '#32CD32', '#FFA500', '#8B4513']; const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%"; const fontSize = 14; const columns = canvas.width/fontSize; const drops = []; for(let i = 0; i < columns; i++) { drops[i] = 1; } function drawMatrix() { ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillRect(0, 0, canvas.width, canvas.height); for(let i = 0; i < drops.length; i++) { const colorIndex = Math.floor(Math.random() * colors.length); ctx.fillStyle = colors[colorIndex]; ctx.font = fontSize + "px monospace"; 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.975) { drops[i] = 0; } drops[i]++; } } setInterval(drawMatrix, 35); document.getElementById('loginForm').addEventListener('submit', function(e) { e.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; const message = document.getElementById('message'); if(username === "admin" && password === "12345") { message.style.color = "#4CAF50"; message.style.background = "rgba(76, 175, 80, 0.1)"; message.textContent = "Giriş başarılı! Yönlendiriliyorsunuz..."; setTimeout(() => { message.textContent = "Hoş geldiniz!"; }, 2000); } else { message.style.color = "#FF4444"; message.style.background = "rgba(255, 68, 68, 0.1)"; message.textContent = "Kullanıcı adı veya şifre hatalı!"; // Shake animation for container const container = document.querySelector('.container'); container.style.animation = 'none'; container.offsetHeight; // Trigger reflow container.style.animation = 'shake 0.5s ease'; } }); document.getElementById('forgotPassword').addEventListener('click', function(e) { e.preventDefault(); const message = document.getElementById('message'); message.style.color = "#FFA500"; message.style.background = "rgba(255, 165, 0, 0.1)"; message.textContent = "Şifre sıfırlama bağlantısı e-posta adresinize gönderildi."; }); window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); </script> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient( 45deg, #FFD700, /* Sarı */ #FF4444, /* Kırmızı */ #4169E1, /* Mavi */ #32CD32, /* Yeşil */ #FFA500, /* Turuncu */ #8B4513 /* Kahverengi */ ); background-size: 600% 600%; animation: gradientBG 20s ease infinite; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: Arial, sans-serif; } @keyframes gradientBG { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} } .container { width: 400px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 40px; border-radius: 20px; box-shadow: 0 0 30px rgba(0,0,0,0.3); border: 2px solid rgba(255, 255, 255, 0.1); animation: float 6s ease-in-out infinite; } @keyframes float { 0% {transform: translateY(0px);} 50% {transform: translateY(-20px);} 100% {transform: translateY(0px);} } .leon-logo { width: 120px; height: 120px; margin: 0 auto 30px; background: linear-gradient(45deg, #FFD700, #FF4444); border-radius: 25px; position: relative; overflow: hidden; animation: roar 3s ease infinite; box-shadow: 0 0 20px rgba(0,0,0,0.3); } @keyframes roar { 0% {transform: scale(1) rotate(0deg);} 25% {transform: scale(1.1) rotate(-5deg);} 50% {transform: scale(1) rotate(0deg);} 75% {transform: scale(1.1) rotate(5deg);} 100% {transform: scale(1) rotate(0deg);} } .leon-logo::after { content: "LEON"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } h2 { text-align: center; margin-bottom: 30px; color: white; font-size: 28px; text-transform: uppercase; letter-spacing: 3px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .input-group { margin-bottom: 25px; position: relative; } input { width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 10px; color: white; font-size: 16px; transition: all 0.3s ease; outline: none; } input::placeholder { color: rgba(255, 255, 255, 0.7); } input:focus { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 15px rgba(255,255,255,0.2); } button { width: 100%; padding: 15px; background: linear-gradient(45deg, #FFD700, #FF4444); border: none; border-radius: 10px; color: white; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); } button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); } button:active { transform: translateY(2px); } .forgot { text-align: center; margin-top: 20px; } .forgot a { color: white; text-decoration: none; font-size: 14px; transition: all 0.3s ease; position: relative; } .forgot a:hover { text-shadow: 0 0 10px white; } .forgot a::after { content: ''; position: absolute; width: 100%; height: 2px; bottom: -4px; left: 0; background: white; transform: scaleX(0); transition: transform 0.3s ease; } .forgot a:hover::after { transform: scaleX(1); } #message { text-align: center; margin-top: 20px; padding: 10px; border-radius: 5px; font-size: 14px; transition: all 0.3s ease; } .matrix-effect { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: 0.3; } @media (max-width: 480px) { .container { width: 90%; padding: 20px; } .leon-logo { width: 100px; height: 100px; } h2 { font-size: 24px; } }
const canvas = document.getElementById('matrix'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const colors = ['#FFD700', '#FF4444', '#4169E1', '#32CD32', '#FFA500', '#8B4513']; const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%"; const fontSize = 14; const columns = canvas.width/fontSize; const drops = []; for(let i = 0; i < columns; i++) { drops[i] = 1; } function drawMatrix() { ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillRect(0, 0, canvas.width, canvas.height); for(let i = 0; i < drops.length; i++) { const colorIndex = Math.floor(Math.random() * colors.length); ctx.fillStyle = colors[colorIndex]; ctx.font = fontSize + "px monospace"; 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.975) { drops[i] = 0; } drops[i]++; } } setInterval(drawMatrix, 35); document.getElementById('loginForm').addEventListener('submit', function(e) { e.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; const message = document.getElementById('message'); if(username === "admin" && password === "12345") { message.style.color = "#4CAF50"; message.style.background = "rgba(76, 175, 80, 0.1)"; message.textContent = "Giriş başarılı! Yönlendiriliyorsunuz..."; setTimeout(() => { message.textContent = "Hoş geldiniz!"; }, 2000); } else { message.style.color = "#FF4444"; message.style.background = "rgba(255, 68, 68, 0.1)"; message.textContent = "Kullanıcı adı veya şifre hatalı!"; // Shake animation for container const container = document.querySelector('.container'); container.style.animation = 'none'; container.offsetHeight; // Trigger reflow container.style.animation = 'shake 0.5s ease'; } }); document.getElementById('forgotPassword').addEventListener('click', function(e) { e.preventDefault(); const message = document.getElementById('message'); message.style.color = "#FFA500"; message.style.background = "rgba(255, 165, 0, 0.1)"; message.textContent = "Şifre sıfırlama bağlantısı e-posta adresinize gönderildi."; }); window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; });
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Professional Login Portal</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient( 45deg, #FFD700, /* Sarı */ #FF4444, /* Kırmızı */ #4169E1, /* Mavi */ #32CD32, /* Yeşil */ #FFA500, /* Turuncu */ #8B4513 /* Kahverengi */ ); background-size: 600% 600%; animation: gradientBG 20s ease infinite; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: Arial, sans-serif; } @keyframes gradientBG { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} } .container { width: 400px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 40px; border-radius: 20px; box-shadow: 0 0 30px rgba(0,0,0,0.3); border: 2px solid rgba(255, 255, 255, 0.1); animation: float 6s ease-in-out infinite; } @keyframes float { 0% {transform: translateY(0px);} 50% {transform: translateY(-20px);} 100% {transform: translateY(0px);} } .leon-logo { width: 120px; height: 120px; margin: 0 auto 30px; background: linear-gradient(45deg, #FFD700, #FF4444); border-radius: 25px; position: relative; overflow: hidden; animation: roar 3s ease infinite; box-shadow: 0 0 20px rgba(0,0,0,0.3); } @keyframes roar { 0% {transform: scale(1) rotate(0deg);} 25% {transform: scale(1.1) rotate(-5deg);} 50% {transform: scale(1) rotate(0deg);} 75% {transform: scale(1.1) rotate(5deg);} 100% {transform: scale(1) rotate(0deg);} } .leon-logo::after { content: "LEON"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } h2 { text-align: center; margin-bottom: 30px; color: white; font-size: 28px; text-transform: uppercase; letter-spacing: 3px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .input-group { margin-bottom: 25px; position: relative; } input { width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 10px; color: white; font-size: 16px; transition: all 0.3s ease; outline: none; } input::placeholder { color: rgba(255, 255, 255, 0.7); } input:focus { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 15px rgba(255,255,255,0.2); } button { width: 100%; padding: 15px; background: linear-gradient(45deg, #FFD700, #FF4444); border: none; border-radius: 10px; color: white; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); } button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); } button:active { transform: translateY(2px); } .forgot { text-align: center; margin-top: 20px; } .forgot a { color: white; text-decoration: none; font-size: 14px; transition: all 0.3s ease; position: relative; } .forgot a:hover { text-shadow: 0 0 10px white; } .forgot a::after { content: ''; position: absolute; width: 100%; height: 2px; bottom: -4px; left: 0; background: white; transform: scaleX(0); transition: transform 0.3s ease; } .forgot a:hover::after { transform: scaleX(1); } #message { text-align: center; margin-top: 20px; padding: 10px; border-radius: 5px; font-size: 14px; transition: all 0.3s ease; } .matrix-effect { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: 0.3; } @media (max-width: 480px) { .container { width: 90%; padding: 20px; } .leon-logo { width: 100px; height: 100px; } h2 { font-size: 24px; } } </style> </head> <body> <canvas class="matrix-effect" id="matrix"></canvas> <div class="container"> <div class="leon-logo"></div> <h2>Matrix Portal</h2> <form id="loginForm"> <div class="input-group"> <input type="text" id="username" placeholder="Kullanıcı Adı" required autocomplete="off"> </div> <div class="input-group"> <input type="password" id="password" placeholder="Şifre" required> </div> <button type="submit">Giriş Yap</button> </form> <div class="forgot"> <a href="#" id="forgotPassword">Şifremi Unuttum</a> </div> <div id="message"></div> </div> <script> const canvas = document.getElementById('matrix'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const colors = ['#FFD700', '#FF4444', '#4169E1', '#32CD32', '#FFA500', '#8B4513']; const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%"; const fontSize = 14; const columns = canvas.width/fontSize; const drops = []; for(let i = 0; i < columns; i++) { drops[i] = 1; } function drawMatrix() { ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillRect(0, 0, canvas.width, canvas.height); for(let i = 0; i < drops.length; i++) { const colorIndex = Math.floor(Math.random() * colors.length); ctx.fillStyle = colors[colorIndex]; ctx.font = fontSize + "px monospace"; 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.975) { drops[i] = 0; } drops[i]++; } } setInterval(drawMatrix, 35); document.getElementById('loginForm').addEventListener('submit', function(e) { e.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; const message = document.getElementById('message'); if(username === "admin" && password === "12345") { message.style.color = "#4CAF50"; message.style.background = "rgba(76, 175, 80, 0.1)"; message.textContent = "Giriş başarılı! Yönlendiriliyorsunuz..."; setTimeout(() => { message.textContent = "Hoş geldiniz!"; }, 2000); } else { message.style.color = "#FF4444"; message.style.background = "rgba(255, 68, 68, 0.1)"; message.textContent = "Kullanıcı adı veya şifre hatalı!"; // Shake animation for container const container = document.querySelector('.container'); container.style.animation = 'none'; container.offsetHeight; // Trigger reflow container.style.animation = 'shake 0.5s ease'; } }); document.getElementById('forgotPassword').addEventListener('click', function(e) { e.preventDefault(); const message = document.getElementById('message'); message.style.color = "#FFA500"; message.style.background = "rgba(255, 165, 0, 0.1)"; message.textContent = "Şifre sıfırlama bağlantısı e-posta adresinize gönderildi."; }); window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); </script> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient( 45deg, #FFD700, /* Sarı */ #FF4444, /* Kırmızı */ #4169E1, /* Mavi */ #32CD32, /* Yeşil */ #FFA500, /* Turuncu */ #8B4513 /* Kahverengi */ ); background-size: 600% 600%; animation: gradientBG 20s ease infinite; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: Arial, sans-serif; } @keyframes gradientBG { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} } .container { width: 400px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 40px; border-radius: 20px; box-shadow: 0 0 30px rgba(0,0,0,0.3); border: 2px solid rgba(255, 255, 255, 0.1); animation: float 6s ease-in-out infinite; } @keyframes float { 0% {transform: translateY(0px);} 50% {transform: translateY(-20px);} 100% {transform: translateY(0px);} } .leon-logo { width: 120px; height: 120px; margin: 0 auto 30px; background: linear-gradient(45deg, #FFD700, #FF4444); border-radius: 25px; position: relative; overflow: hidden; animation: roar 3s ease infinite; box-shadow: 0 0 20px rgba(0,0,0,0.3); } @keyframes roar { 0% {transform: scale(1) rotate(0deg);} 25% {transform: scale(1.1) rotate(-5deg);} 50% {transform: scale(1) rotate(0deg);} 75% {transform: scale(1.1) rotate(5deg);} 100% {transform: scale(1) rotate(0deg);} } .leon-logo::after { content: "LEON"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } h2 { text-align: center; margin-bottom: 30px; color: white; font-size: 28px; text-transform: uppercase; letter-spacing: 3px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .input-group { margin-bottom: 25px; position: relative; } input { width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 10px; color: white; font-size: 16px; transition: all 0.3s ease; outline: none; } input::placeholder { color: rgba(255, 255, 255, 0.7); } input:focus { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 15px rgba(255,255,255,0.2); } button { width: 100%; padding: 15px; background: linear-gradient(45deg, #FFD700, #FF4444); border: none; border-radius: 10px; color: white; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); } button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); } button:active { transform: translateY(2px); } .forgot { text-align: center; margin-top: 20px; } .forgot a { color: white; text-decoration: none; font-size: 14px; transition: all 0.3s ease; position: relative; } .forgot a:hover { text-shadow: 0 0 10px white; } .forgot a::after { content: ''; position: absolute; width: 100%; height: 2px; bottom: -4px; left: 0; background: white; transform: scaleX(0); transition: transform 0.3s ease; } .forgot a:hover::after { transform: scaleX(1); } #message { text-align: center; margin-top: 20px; padding: 10px; border-radius: 5px; font-size: 14px; transition: all 0.3s ease; } .matrix-effect { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: 0.3; } @media (max-width: 480px) { .container { width: 90%; padding: 20px; } .leon-logo { width: 100px; height: 100px; } h2 { font-size: 24px; } }
const canvas = document.getElementById('matrix'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const colors = ['#FFD700', '#FF4444', '#4169E1', '#32CD32', '#FFA500', '#8B4513']; const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%"; const fontSize = 14; const columns = canvas.width/fontSize; const drops = []; for(let i = 0; i < columns; i++) { drops[i] = 1; } function drawMatrix() { ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillRect(0, 0, canvas.width, canvas.height); for(let i = 0; i < drops.length; i++) { const colorIndex = Math.floor(Math.random() * colors.length); ctx.fillStyle = colors[colorIndex]; ctx.font = fontSize + "px monospace"; 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.975) { drops[i] = 0; } drops[i]++; } } setInterval(drawMatrix, 35); document.getElementById('loginForm').addEventListener('submit', function(e) { e.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; const message = document.getElementById('message'); if(username === "admin" && password === "12345") { message.style.color = "#4CAF50"; message.style.background = "rgba(76, 175, 80, 0.1)"; message.textContent = "Giriş başarılı! Yönlendiriliyorsunuz..."; setTimeout(() => { message.textContent = "Hoş geldiniz!"; }, 2000); } else { message.style.color = "#FF4444"; message.style.background = "rgba(255, 68, 68, 0.1)"; message.textContent = "Kullanıcı adı veya şifre hatalı!"; // Shake animation for container const container = document.querySelector('.container'); container.style.animation = 'none'; container.offsetHeight; // Trigger reflow container.style.animation = 'shake 0.5s ease'; } }); document.getElementById('forgotPassword').addEventListener('click', function(e) { e.preventDefault(); const message = document.getElementById('message'); message.style.color = "#FFA500"; message.style.background = "rgba(255, 165, 0, 0.1)"; message.textContent = "Şifre sıfırlama bağlantısı e-posta adresinize gönderildi."; }); window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; });