WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Formulario de inicio de sesión HTML con alternancia de contraseña
1,055
Metehan
Abrir en el editor
Publica tu código
0
Recomendado
9 July 2025
Selector de temas de IU: opciones claras, oscuras y atenuadas
12 June 2025
Un código de Metehan
16 August 2024
Tienda de tokens de Discord
HTML
Copy
Login Form
My Account
Login
Password
Remember me
Forgot password?
Sign in
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } .container { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #E5C9D7 0%, #6BA3BE 100%); padding: 1rem; } .login-card { width: 100%; max-width: 400px; position: relative; background-color: #E3B6B1; border-radius: 0.5rem; box-shadow: 0 4px 20px rgba(163, 64, 84, 0.15); overflow: hidden; } .overlay { position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); } .content { position: relative; padding: 2rem; } .header { text-align: center; margin-bottom: 2rem; } .header h2 { color: #A34054; font-size: 1.5rem; margin-bottom: 1rem; } .avatar { width: 5rem; height: 5rem; margin: 0 auto; background-color: #E5C9D7; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .avatar svg { width: 2.5rem; height: 2.5rem; color: #A34054; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; font-size: 0.875rem; font-weight: 500; color: #A34054; margin-bottom: 0.25rem; } .form-group input { width: 100%; padding: 0.5rem 1rem; background-color: #E5C9D7; border: 1px solid #A34054; border-radius: 0.375rem; color: #A34054; transition: all 0.2s; } .form-group input:focus { outline: none; border-color: #A34054; box-shadow: 0 0 0 2px rgba(163, 64, 84, 0.2); } .password-container { position: relative; } .toggle-password { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #A34054; padding: 0.25rem; } .toggle-password svg { width: 1.25rem; height: 1.25rem; } .hidden { display: none; } .form-options { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .remember-me { display: flex; align-items: center; gap: 0.5rem; color: #A34054; font-size: 0.875rem; } .remember-me input[type="checkbox"] { width: 1rem; height: 1rem; border-color: #A34054; } .forgot-password { color: #A34054; text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: opacity 0.2s; } .forgot-password:hover { opacity: 0.8; } .submit-button { width: 100%; padding: 0.5rem 1rem; background-color: #A34054; color: white; border: none; border-radius: 0.375rem; font-weight: 500; cursor: pointer; transition: opacity 0.2s; box-shadow: 0 2px 10px rgba(163, 64, 84, 0.2); } .submit-button:hover { opacity: 0.9; }
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"); }); });