WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Una directory alternativa della home page
1333
Metehan
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
20 June 2025
Modulo di accesso turco HTML
23 August 2025
Modello HTML/CS per pagina di accesso di lusso
21 July 2025
Menu di navigazione con pulsanti di scelta CSS
HTML
Copy
Giriş Portalı
Giriş Yap
E-posta
Şifre
Giriş Yap
Şifremi Unuttum?
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { overflow: hidden; /* Scroll bar'ı gizle */ } .background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://images.pexels.com/photos/1545743/pexels-photo-1545743.jpeg') no-repeat center center fixed; background-size: cover; /* Resmi tam kapla */ } .container { position: relative; z-index: 2; /* İçeriklerin ön planda olmasını sağla */ width: 400px; background: rgba(0, 0, 0, 0.7); padding: 40px; border-radius: 20px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); text-align: center; } h2 { margin-bottom: 30px; color: #00FF00; /* Yeşil renk */ } .input-group { position: relative; margin-bottom: 20px; } .input-group input { width: 100%; padding: 15px; border: 2px solid #ddd; border-radius: 5px; font-size: 16px; transition: border-color 0.3s; background: rgba(255, 255, 255, 0.1); color: #00FF00; /* Yeşil renk */ } .input-group input:focus { border-color: #00FF00; outline: none; } .input-group label { position: absolute; top: 15px; left: 15px; color: #aaa; transition: 0.3s; } .input-group input:focus + label, .input-group input:not(:placeholder-shown) + label { top: -10px; left: 10px; font-size: 12px; color: #00FF00; } .btn { width: 100%; padding: 15px; background-color: #00FF00; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.3s; } .btn:hover { background-color: #00CC00; /* Daha koyu yeşil */ } #message { margin-top: 20px; padding: 10px; border-radius: 5px; display: none; /* Başlangıçta gizli */ color: #00FF00; } .forgot { margin-top: 15px; } .forgot a { color: #00FF00; text-decoration: none; } .forgot a:hover { text-decoration: underline; }
JS
Copy
document.addEventListener('DOMContentLoaded', () => { const loginForm = document.getElementById('loginForm'); const message = document.getElementById('message'); // Giriş formu gönderildiğinde loginForm.addEventListener('submit', function(e) { e.preventDefault(); const email = document.querySelector('input[type="email"]').value.trim(); const password = document.querySelector('input[type="password"]').value.trim(); // E-posta ve şifre doğrulama if (!validateEmail(email)) { showMessage("Geçersiz e-posta adresi!", "#FF4444"); return; } if (password.length < 6) { showMessage("Şifre en az 6 karakter olmalıdır!", "#FF4444"); return; } // Örnek kullanıcı kontrolü if (email === "admin@example.com" && password === "12345") { showMessage("Giriş başarılı! Yönlendiriliyorsunuz...", "#4CAF50"); setTimeout(() => { message.textContent = "Hoş geldiniz!"; }, 2000); } else { showMessage("E-posta veya şifre hatalı!", "#FF4444"); } }); // E-posta doğrulama fonksiyonu function validateEmail(email) { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return regex.test(email); } // Mesaj gösterme fonksiyonu function showMessage(text, color) { message.style.color = color; message.style.background = `${color}20`; // Hafif arka plan rengi message.textContent = text; message.style.display = 'block'; // Mesajı göster // Hata animasyonu için konteyneri sars const container = document.querySelector('.container'); container.style.animation = 'none'; container.offsetHeight; // Reflow tetikleme container.style.animation = 'shake 0.5s ease'; } // Şifremi unuttum bağlantısı document.querySelector('.forgot a').addEventListener('click', function(e) { e.preventDefault(); showMessage("Şifre sıfırlama bağlantısı e-posta adresinize gönderildi.", "#FFA500"); }); });