WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Plantilla HTML CSS para la página de inicio de sesión del SEAT León
1,021
Metehan
Abrir en el editor
Publica tu código
1
Recomendado
15 June 2025
Un código de securearray494
3 February 2026
Ejemplo de formulario de inicio de sesión HTML
30 March 2025
Un código de ytr3d3
HTML
Copy
SEAT Leon - Giriş
LEON
E-posta Adresi
Şifre
Giriş Yap
Şifremi Unuttum
Yeni Hesap Oluştur
CSS
Copy
/* Reset ve genel stiller */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Helvetica Neue', Arial, sans-serif; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background-image.jpg'); background-size: cover; background-position: center; background-attachment: fixed; } /* Login container stilleri */ .login-container { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 2.5rem; border-radius: 15px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); width: 100%; max-width: 420px; transition: transform 0.3s ease; } .login-container:hover { transform: translateY(-5px); } /* Logo stilleri */ .logo { text-align: center; margin-bottom: 2rem; } .logo h1 { color: #000; font-size: 2rem; font-weight: 300; letter-spacing: 2px; margin-bottom: 0.5rem; } /* Form grup stilleri */ .form-group { margin-bottom: 1.8rem; position: relative; } .form-group label { position: absolute; left: 45px; top: 50%; transform: translateY(-50%); color: #666; transition: all 0.3s; pointer-events: none; font-size: 0.95rem; } .form-group input { width: 100%; padding: 1.2rem 1rem 1.2rem 45px; border: none; border-radius: 10px; font-size: 1rem; transition: all 0.3s; background: rgba(0, 0, 0, 0.05); } .form-group input:focus { background: rgba(0, 0, 0, 0.08); outline: none; } .form-group input:focus + label, .form-group input:not(:placeholder-shown) + label { top: 0; left: 10px; background: white; padding: 0 5px; font-size: 0.8rem; color: #000; } .form-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #666; } /* Buton stilleri */ .submit-btn { width: 100%; padding: 1.2rem; background: #000; color: white; border: none; border-radius: 10px; font-size: 1rem; cursor: pointer; transition: all 0.3s; font-weight: 500; letter-spacing: 1px; margin-top: 1rem; text-transform: uppercase; } .submit-btn:hover { background: #333; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } /* Link stilleri */ .links { margin-top: 1.8rem; text-align: center; font-size: 0.9rem; display: flex; justify-content: space-around; } .links a { color: #333; text-decoration: none; transition: all 0.3s; position: relative; padding-bottom: 3px; } .links a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: #000; transition: width 0.3s; } .links a:hover::after { width: 100%; } .links a:hover { color: #000; } /* Responsive tasarım */ @media (max-width: 480px) { .login-container { margin: 1rem; padding: 2rem; } }
JS
Copy
// Form doğrulama ve animasyon işlemleri document.addEventListener('DOMContentLoaded', function() { // Form elementlerini seç const form = document.querySelector('form'); const emailInput = document.querySelector('#email'); const passwordInput = document.querySelector('#password'); const submitBtn = document.querySelector('.submit-btn'); // Form gönderim işlemi form.addEventListener('submit', function(e) { e.preventDefault(); // Form doğrulama if (validateForm()) { // Loading efekti submitBtn.innerHTML = 'Giriş Yapılıyor...'; submitBtn.disabled = true; // API çağrısı simülasyonu setTimeout(() => { submitBtn.innerHTML = 'Giriş Başarılı!'; submitBtn.style.background = '#28a745'; // Yönlendirme simülasyonu setTimeout(() => { window.location.href = '/dashboard'; }, 1000); }, 2000); } }); // Form doğrulama fonksiyonu function validateForm() { let isValid = true; // Email doğrulama if (!emailInput.value || !isValidEmail(emailInput.value)) { showError(emailInput, 'Geçerli bir email adresi giriniz'); isValid = false; } else { removeError(emailInput); } // Şifre doğrulama if (!passwordInput.value || passwordInput.value.length < 6) { showError(passwordInput, 'Şifre en az 6 karakter olmalıdır'); isValid = false; } else { removeError(passwordInput); } return isValid; } // Email format doğrulama function isValidEmail(email) { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return re.test(email); } // Hata mesajı gösterme function showError(input, message) { const formGroup = input.parentElement; if (!formGroup.querySelector('.error-message')) { const errorDiv = document.createElement('div'); errorDiv.className = 'error-message'; errorDiv.style.color = '#dc3545'; errorDiv.style.fontSize = '0.8rem'; errorDiv.style.marginTop = '5px'; errorDiv.textContent = message; formGroup.appendChild(errorDiv); } input.style.borderColor = '#dc3545'; } // Hata mesajını kaldırma function removeError(input) { const formGroup = input.parentElement; const errorDiv = formGroup.querySelector('.error-message'); if (errorDiv) { formGroup.removeChild(errorDiv); } input.style.borderColor = ''; } // Input focus animasyonları const inputs = document.querySelectorAll('.form-group input'); inputs.forEach(input => { // Focus olduğunda container'a active class ekle input.addEventListener('focus', function() { this.parentElement.classList.add('active'); }); // Focus kaldırıldığında ve input boşsa active class'ı kaldır input.addEventListener('blur', function() { if (!this.value) { this.parentElement.classList.remove('active'); } }); }); }); // Parola göster/gizle fonksiyonu const togglePassword = document.querySelector('.toggle-password'); if (togglePassword) { togglePassword.addEventListener('click', function() { const password = document.querySelector('#password'); const type = password.getAttribute('type') === 'password' ? 'text' : 'password'; password.setAttribute('type', type); this.classList.toggle('fa-eye-slash'); }); }