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

396 Metehan

Abrir en el editor Publica tu código

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

Recomendado

20 August 2024

Tarjeta de bicicleta Pure CSS

28 June 2025

Plantilla HTML de página de error 404

12 October 2025

Estructura HTML de la animación de carga CSS

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

Tarjeta de bicicleta Pure CSS

Plantilla HTML de página de error 404

Estructura HTML de la animación de carga CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS