WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un répertoire de page d'accueil alternatif
1095
Metehan
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
7 May 2024
Chargeur avec CSS
23 August 2025
Modèle HTML pour la conception de sites Web, l'expérience numérique et les podcasts
16 June 2025
Un code de Mete
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"); }); });