WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Uma página inicial de matriz criada com índices
1045
Metehan
Abrir no Editor
Publique Seu Código
Recomendado
12 July 2025
Contador de cliques da barra de espaço - JavaScript HTML
22 May 2025
Jogo de fuga
19 May 2025
jogo de respostas
HTML
Copy
<!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>
CSS
Copy
* { 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; } }
JS
Copy
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; });
