WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Una directory alternativa della home page
671
Metehan
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
16 July 2023
23 May 2025
Spotify connesso
20 April 2025
il gioco della palla per divertimento (di Mr)
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"); }); });
