WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Leon renk ile bir giriş sayfası
1363
Metehan
Open In Editor
Video
Publish Your Code
0
Recommended
26 June 2025
Social Links Profile
11 July 2025
Mete'nin bir kodu
21 July 2025
File Upload Input with SVG Icon
HTML
Copy
Giriş Sayfası
Giriş Sayfası
Giriş Yap
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #121212; overflow: hidden; } .login-container { width: 400px; background-color: rgba(30,30,30,0.9); border-radius: 15px; padding: 40px; box-shadow: 0 15px 35px rgba(0,0,0,0.5); position: relative; z-index: 2; transition: all 0.3s ease; } .login-container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient( transparent, transparent, transparent, #00ff00 ); animation: rotate 4s linear infinite; z-index: -1; } .login-container::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #121212; margin: 10px; border-radius: 10px; z-index: -1; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .logo { text-align: center; color: #00ff00; font-size: 2.5rem; margin-bottom: 30px; text-shadow: 0 0 10px rgba(0,255,0,0.5); } .input-group { position: relative; margin-bottom: 20px; } .input-group input { width: 100%; padding: 12px 20px; background-color: rgba(50,50,50,0.8); border: 2px solid transparent; border-radius: 8px; color: #00ff00; outline: none; transition: all 0.3s ease; } .input-group input:focus { border-color: #00ff00; box-shadow: 0 0 15px rgba(0,255,0,0.3); } .input-group input::placeholder { color: rgba(0,255,0,0.5); } .login-btn { width: 100%; padding: 12px; background-color: #00ff00; color: #121212; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .login-btn:hover { background-color: #00cc00; transform: scale(1.05); } .error-message { color: #ff0000; text-align: center; margin-bottom: 15px; display: none; } .matrix-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
JS
Copy
// Matrix Arka Plan Efekti const canvas = document.getElementById('matrixCanvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const letters = '01'; const fontSize = 10; const columns = canvas.width / fontSize; const drops = []; for (let x = 0; x < columns; x++) { drops[x] = 1; } function drawMatrix() { ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#00ff00'; ctx.font = fontSize + 'px monospace'; for (let i = 0; i < drops.length; i++) { 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.95) { drops[i] = 0; } drops[i]++; } } function animateMatrix() { drawMatrix(); requestAnimationFrame(animateMatrix); } // Giriş Doğrulama function validateLogin(event) { event.preventDefault(); const username = document.getElementById('username'); const password = document.getElementById('password'); const errorMessage = document.getElementById('errorMessage'); const validUsername = 'admin'; const validPassword = 'leon123'; if (username.value === validUsername && password.value === validPassword) { errorMessage.style.display = 'none'; // Sahte yükleme animasyonu canvas.style.transition = 'opacity 1s'; canvas.style.opacity = '0'; setTimeout(() => { alert('Giriş Başarılı! Yönlendiriliyorsunuz...'); }, 500); } else { errorMessage.textContent = 'Hatalı kullanıcı adı veya şifre!'; errorMessage.style.display = 'block'; } } // Event Listener'ları document.getElementById('loginForm').addEventListener('submit', validateLogin); // Pencere boyutu değiştiğinde canvas'ı yeniden boyutlandır window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); // Matrix Animasyonunu Başlat animateMatrix();