WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein alternatives Homepage-Verzeichnis
921
Metehan
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
30 August 2025
CSS-animierte Schaltfläche und Ebene
18 May 2024
20 August 2024
HTML
Copy
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Giriş Portalı</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="background"> <div class="container"> <h2>Giriş Yap</h2> <form id="loginForm"> <div class="input-group"> <input type="email" placeholder="E-posta" required> <label>E-posta</label> </div> <div class="input-group"> <input type="password" placeholder="Şifre" required> <label>Şifre</label> </div> <button type="submit" class="btn">Giriş Yap</button> </form> <div id="message"></div> <div class="forgot"> <a href="#">Şifremi Unuttum?</a> </div> </div> </div> <script src="script.js"></script> </body> </html>
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"); }); });
