Formulaire de connexion/inscription (turc)

1,726 Metehan

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Formulaire de connexion/inscription (turc)

Recommandé

6 January 2026

Modèle HTML de page de connexion Nexus AI

13 March 2026

Code HTML5 du jeu de puzzle Block Blast

22 August 2025

Animation de notification de blob 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;
    }
}

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