Una página de inicio con color León

1,459 Metehan

Abrir en el editor Publica tu código

Recomendado

28 July 2023

Barra de búsqueda con CSS

12 December 2025

Ninja de la fruta

27 January 2026

Juego de evolución de criaturas - Unity JS

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