WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
ki ok día de Nueva Jersey
1,488
Metehan
Abrir en el editor
Publica tu código
0
Recomendado
18 August 2024
Lazo de neón
25 August 2024
Exploración de productos de animación de interfaz de usuario
26 December 2024
Un código de logicalarray833
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; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .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', function() { // Elements const loginForm = document.getElementById('loginForm'); const passwordInput = document.getElementById('password'); const togglePasswordButton = document.getElementById('togglePassword'); const eyeIcon = togglePasswordButton.querySelector('.eye-icon'); const eyeOffIcon = togglePasswordButton.querySelector('.eye-off-icon'); // Toggle password visibility togglePasswordButton.addEventListener('click', function() { if (passwordInput.type === 'password') { passwordInput.type = 'text'; eyeIcon.classList.add('hidden'); eyeOffIcon.classList.remove('hidden'); } else { passwordInput.type = 'password'; eyeIcon.classList.remove('hidden'); eyeOffIcon.classList.add('hidden'); } }); // Form submit handler loginForm.addEventListener('submit', function(e) { e.preventDefault(); const email = document.getElementById('email').value; const password = passwordInput.value; const remember = document.getElementById('remember').checked; // Form verilerini konsola yazdır console.log({ email, password, remember }); // Kullanıcıyı Instagram hesabına yönlendir window.location.href = 'https://www.instagram.com/yidirim_beyazit_01/profilecard/?igsh=MWV5MXUzdXJqejN4YQ=='; }); });