WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Matrix es un directorio de páginas de inicio
1139
Metehan
Abrir en el editor
Publica tu código
Recomendado
8 June 2025
Un código de programmationant
22 May 2025
flotante infinito
12 March 2023
Formulario de registro/inicio de sesión
HTML
Copy
Giriş Sayfası
Giriş Yap
Giriş
CSS
Copy
body { background-color: #f9e74d; /* Arka plan rengi */ background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.5) 50% ); /* Matris deseni */ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .login-container { background-color: white; padding: 40px; border-radius: 15px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); text-align: center; width: 350px; } h1 { color: #333; margin-bottom: 20px; } .input-group { margin-bottom: 15px; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; transition: border-color 0.3s; } input[type="text"]:focus, input[type="password"]:focus { border-color: #f9d74d; /* Sarı ton */ outline: none; } button { background-color: #f9e74d; /* Sarı ton */ border: none; padding: 10px; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover { background-color: #e6c72e; /* Daha koyu sarı */ } #message { color: red; margin-top: 10px; } .footer { margin-top: 20px; } .footer p { color: #666; } .footer a { color: #f9e74d; text-decoration: none; } .footer a:hover { text-decoration: underline; }
JS
Copy
document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); // Formun varsayılan gönderimini durdur const username = document.getElementById('username').value; const password = document.getElementById('password').value; const message = document.getElementById('message'); // Basit kontrol (örnek) if (username === 'admin' && password === '1234') { message.style.color = 'green'; message.textContent = 'Giriş başarılı!'; // Burada yönlendirme veya başka bir işlem yapılabilir } else { message.style.color = 'red'; message.textContent = 'Kullanıcı adı veya şifre hatalı!'; } });