WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
एक वैकल्पिक होम पेज निर्देशिका
1093
Metehan
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
26 June 2024
एकाधिक सोशल मीडिया बटन
17 April 2025
मेटेहन द्वारा एक कोड
25 August 2024
GSAP होवर प्रभाव
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"); }); });