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

943 Metehan

Abrir en el editor Video Publica tu código

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

Recomendado

20 August 2025

Plantilla HTML para blog de diseño moderno

29 January 2025

Un código de sheeshokaokayokay

28 August 2024

Efecto de desplazamiento al navegar por las imágenes

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).');
    });
});

Recomendado

Plantilla HTML para blog de diseño moderno

Un código de sheeshokaokayokay

Efecto de desplazamiento al navegar por las imágenes

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS