Una página de inicio con color León

Abrir en el editor Publica tu código

Recomendado

5 June 2025

Página de inicio para un sitio de portafolio

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

JS

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

Una página de inicio con color León

Recomendado

Un código de alejandrokundrah

generador de citas

Página de inicio para un sitio de portafolio

HTML

CSS

JS

Recomendado

Un código de alejandrokundrah

generador de citas

Página de inicio para un sitio de portafolio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS