Una página de inicio con color León

1,785 Metehan

Abrir en el editor Publica tu código

Recomendado

20 September 2025

Plantilla de formulario de inicio de sesión HTML de Sunflower

24 August 2025

InspireX: Tema web moderno (Tailwind, vídeo, galería)

22 January 2026

Código fuente HTML5 del juego Room Clicker

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Giriş Sayfası</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <canvas class="matrix-background" id="matrixCanvas"></canvas>
    
    <div class="login-container">
        <div class="logo">Giriş Sayfası</div>
        
        <div id="errorMessage" class="error-message"></div>
        
        <form id="loginForm">
            <div class="input-group">
                <input 
                    type="text" 
                    id="username" 
                    placeholder="Kullanıcı Adı" 
                    required
                >
            </div>
            
            <div class="input-group">
                <input 
                    type="password" 
                    id="password" 
                    placeholder="Şifre" 
                    required
                >
            </div>
            
            <button type="submit" class="login-btn">Giriş Yap</button>
        </form>
    </div>

CSS

* {
    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;
}

// 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();