WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulaire de connexion/inscription (turc)
16
Metehan
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
13 June 2025
Un code de Metehan
21 July 2025
Menu de navigation des boutons radio CSS
21 July 2025
Exemple HTML CSS de carte UNO
HTML
Copy
Giriş Yap / Üye Ol
Oturum Aç
Kullanıcı Adınız
Şifreniz
Beni Hatırla
Şifremi Unuttum
Giriş
Üye Ol
Adınız Soyadınız
E-posta Adresiniz
Oluşturacağınız Şifre
Şifreyi Tekrar Girin
Üyelik sözleşmesini okudum ve kabul ediyorum.
Kayıt Ol
CSS
Copy
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
Copy
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).'); }); });