Formulario de inicio de sesión/registro (turco)

Abrir en el editor Video Publica tu código

Recomendado

28 June 2025

Menú de navegación de Coreboot

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giriş Yap / Üye Ol</title>
    <link rel="stylesheet" href="dark-style.css">
</head>
<body>
    <div class="dark-container">
        <div class="dark-login-section">
            <h2>Oturum Aç</h2>
            <form id="loginForm">
                <div class="dark-input-group">
                    <label for="loginUsername">Kullanıcı Adınız</label>
                    <input type="text" id="loginUsername" name="loginUsername" required>
                </div>
                <div class="dark-input-group">
                    <label for="loginPassword">Şifreniz</label>
                    <input type="password" id="loginPassword" name="loginPassword" required>
                </div>
                <div class="dark-checkbox-group">
                    <input type="checkbox" id="rememberMe" name="rememberMe">
                    <label for="rememberMe">Beni Hatırla</label>
                </div>
                <a href="#" class="dark-forgot-password">Şifremi Unuttum</a>
                <button type="submit" class="dark-login-button">Giriş</button>
            </form>
        </div>
        <div class="dark-signup-section">
            <h2>Üye Ol</h2>
            <form id="signupForm">
                <div class="dark-input-group">
                    <label for="signupName">Adınız Soyadınız</label>
                    <input type="text" id="signupName" name="signupName" required>
                </div>
                <div class="dark-input-group">
                    <label for="signupEmail">E-posta Adresiniz</label>
                    <input type="email" id="signupEmail" name="signupEmail" required>
                </div>
                <div class="dark-input-group">
                    <label for="signupPassword">Oluşturacağınız Şifre</label>
                    <input type="password" id="signupPassword" name="signupPassword" required>
                </div>
                <div class="dark-input-group">
                    <label for="confirmPassword">Şifreyi Tekrar Girin</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" required>
                </div>
                <div class="dark-checkbox-group">
                    <input type="checkbox" id="agreement" name="agreement" required>
                    <label for="agreement">Üyelik sözleşmesini okudum ve kabul ediyorum.</label>
                </div>
                <button type="submit" class="dark-signup-button">Kayıt Ol</button>
            </form>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    background-color: #121212; /* Koyu arka plan */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.dark-container {
    background-color: #1E1E1E; /* Daha açık koyu arka plan */
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.3); /* Neon yeşili gölge */
    display: flex;
    width: 80%;
    max-width: 960px;
    overflow: hidden;
}

.dark-login-section, .dark-signup-section {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dark-login-section {
    background-color: #2E2E2E; /* Biraz daha koyu bölüm */
}

.dark-signup-section {
    background-color: #333333; /* Diğer bölüm */
}

h2 {
    color: #00FF00; /* Neon yeşili başlık */
    margin-bottom: 30px;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8); /* Neon parlaklık */
}

.dark-input-group {
    width: 100%;
    margin-bottom: 20px;
}

label {
    display: block;
    color: #B3B3B3;
    margin-bottom: 8px;
    font-weight: bold;
}

input[type="text"],
input[type="password"],
input[type="email"] {
    width: calc(100% - 24px);
    padding: 12px;
    border: 1px solid #555;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px;
    background-color: #444;
    color: #E0E0E0;
}

.dark-checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    color: #B3B3B3;
}

.dark-checkbox-group input[type="checkbox"] {
    margin-right: 8px;
}

.dark-forgot-password {
    color: #00FF00;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 20px;
    display: block;
    text-align: right;
    transition: color 0.3s ease;
}

.dark-forgot-password:hover {
    color: #00CC00;
    text-decoration: underline;
}

button {
    background-color: #00FF00;
    color: #222;
    border: none;
    border-radius: 6px;
    padding: 14px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); /* Neon parlaklık */
}

.dark-login-button {
    background-color: #00FF00;
    color: #222;
}

.dark-signup-button {
    background-color: #00FF00;
    color: #222;
}

button:hover {
    background-color: #00CC00;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
}

/* Mobil cihazlar için düzenlemeler */
@media (max-width: 768px) {
    .dark-container {
        flex-direction: column;
        width: 95%;
    }

.dark-login-section, .dark-signup-section {
        width: 100%;
        padding: 40px;
    }
}

JS

document.addEventListener('DOMContentLoaded', function() {
    const loginForm = document.getElementById('loginForm');
    const signupForm = document.getElementById('signupForm');

loginForm.addEventListener('submit', function(event) {
        event.preventDefault();
        // Burada oturum açma işlemleri gerçekleştirilebilir (API çağrısı vb.)
        const username = document.getElementById('loginUsername').value;
        const password = document.getElementById('loginPassword').value;
        console.log('Oturum Açma İsteği (Karanlık Tema):', { username, password });
        alert('Oturum açma isteği gönderildi (konsola bakınız - Karanlık Tema).');
    });

signupForm.addEventListener('submit', function(event) {
        event.preventDefault();
        // Burada üye olma işlemleri gerçekleştirilebilir (API çağrısı vb.)
        const name = document.getElementById('signupName').value;
        const email = document.getElementById('signupEmail').value;
        const password = document.getElementById('signupPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;
        const agreement = document.getElementById('agreement').checked;

if (password !== confirmPassword) {
            alert('Şifreler eşleşmiyor! (Karanlık Tema)');
            return;
        }

if (!agreement) {
            alert('Üyelik sözleşmesini kabul etmelisiniz! (Karanlık Tema)');
            return;
        }

console.log('Üye Olma İsteği (Karanlık Tema):', { name, email, password, confirmPassword, agreement });
        alert('Üye olma isteği gönderildi (konsola bakınız - Karanlık Tema).');
    });
});

Formulario de inicio de sesión/registro (turco)

Recomendado

Un código de Mete

Digital deja vu

Menú de navegación de Coreboot

HTML

CSS

JS

Recomendado

Un código de Mete

Digital deja vu

Menú de navegación de Coreboot

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS