Une page d'accueil aux couleurs de Léon

1,738 Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

24 November 2025

Les bases de Baldi

12 July 2025

Compteur de clics avec la barre d'espace - JavaScript HTML

30 November 2024

Un code par fastbug70

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