Plantilla HTML de página de inicio de sesión en turco

1,117 Metehan

Abrir en el editor Publica tu código

Plantilla HTML de página de inicio de sesión en turco

Recomendado

22 November 2025

Efecto de desplazamiento de botón de vidrio líquido CSS

13 July 2025

Código HTML CSS JavaScript del juego Pac-Man

8 February 2025

Menú radial

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