WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ama e rispetta la natura
1127
Metehan
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
11 January 2024
24 July 2025
Trasformazione dei dati
21 November 2025
Modulo di accesso al neomorfismo Codice HTML CSS
HTML
Copy
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lüks Yaşam</title> <style> body { margin: 0; padding: 0; height: 100vh; background-image: url('https://www.istockphoto.com/tr/foto%C4%9Fraf/luxury-sports-car-and-yachts-at-puerto-banus-in-marbella-gm616255418-107151133'); background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: Arial, sans-serif; } .login-container { background-color: rgba(255, 255, 255, 0.9); padding: 40px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); } input { display: block; margin: 10px 0; padding: 10px; width: 250px; border: 1px solid #ddd; border-radius: 5px; } button { width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; } h2 { text-align: center; color: #333; margin-bottom: 20px; } </style> </head> <body> <div class="login-container"> <h2>Giriş Yap</h2> <form> <input type="email" placeholder="E-posta" required> <input type="password" placeholder="Şifre" required> <button type="submit">Giriş</button> </form> </div> <script> // Form gönderimini dinle document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); // Formun normal gönderimini engelle // Form verilerini al const email = document.querySelector('input[type="email"]').value; const password = document.querySelector('input[type="password"]').value; // Form validasyonu if (!email || !password) { alert('Lütfen tüm alanları doldurun!'); return; } // E-posta formatı kontrolü const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { alert('Geçerli bir e-posta adresi giriniz!'); return; } // Şifre uzunluğu kontrolü if (password.length < 6) { alert('Şifre en az 6 karakter olmalıdır!'); return; } // Başarılı giriş simülasyonu console.log('Giriş bilgileri:', { email: email, password: password }); // Giriş başarılı mesajı alert('Giriş başarılı!'); // Form alanlarını temizle document.querySelector('form').reset(); }); // Input alanları için animasyon efekti const inputs = document.querySelectorAll('input'); inputs.forEach(input => { input.addEventListener('focus', function() { this.style.transform = 'scale(1.02)'; this.style.transition = 'all 0.3s ease'; }); input.addEventListener('blur', function() { this.style.transform = 'scale(1)'; }); }); // Buton hover efekti için ek JavaScript document.querySelector('button').addEventListener('mouseover', function() { this.style.opacity = '0.8'; }); document.querySelector('button').addEventListener('mouseout', function() { this.style.opacity = '1'; }); </script> </body> </html>
CSS
Copy
body { margin: 0; padding: 0; height: 100vh; background-image: url('https://images.pexels.com/photos/1173777/pexels-photo-1173777.jpeg'); background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: Arial, sans-serif; } .login-container { background-color: rgba(255, 255, 255, 0.8); padding: 40px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); } input { display: block; margin: 10px 0; padding: 10px; width: 250px; border: 1px solid #ddd; border-radius: 5px; background-color: rgba(255, 255, 255, 0.9); /* Giriş alanlarının arka planını daha açık yaptık */ } button { width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; } h2 { text-align: center; color: #333; margin-bottom: 20px; }
JS
Copy
// Form gönderimini dinle document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); // Formun normal gönderimini engelle // Form verilerini al const email = document.querySelector('input[type="email"]').value; const password = document.querySelector('input[type="password"]').value; // Form validasyonu if (!email || !password) { alert('Lütfen tüm alanları doldurun!'); return; } // E-posta formatı kontrolü const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { alert('Geçerli bir e-posta adresi giriniz!'); return; } // Şifre uzunluğu kontrolü if (password.length < 6) { alert('Şifre en az 6 karakter olmalıdır!'); return; } // Başarılı giriş simülasyonu console.log('Giriş bilgileri:', { email: email, password: password }); // Giriş başarılı mesajı alert('Giriş başarılı!'); // Form alanlarını temizle document.querySelector('form').reset(); }); // Input alanları için animasyon efekti const inputs = document.querySelectorAll('input'); inputs.forEach(input => { input.addEventListener('focus', function() { this.style.transform = 'scale(1.02)'; this.style.transition = 'all 0.3s ease'; }); input.addEventListener('blur', function() { this.style.transform = 'scale(1)'; }); }); // Buton hover efekti için ek JavaScript document.querySelector('button').addEventListener('mouseover', function() { this.style.opacity = '0.8'; }); document.querySelector('button').addEventListener('mouseout', function() { this.style.opacity = '1'; });
