WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Dizinler ile oluşmuş bir matrix giriş sayfası
1,813
Metehan
Open In Editor
Publish Your Code
0
Recommended
28 October 2024
Profile card design
11 July 2025
Mete'nin bir kodu
19 February 2026
Online AES File and Text Encryptor
HTML
Copy
Professional Login Portal
Matrix Portal
Giriş Yap
Şifremi Unuttum
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; });