WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Una página de inicio creada con directorios.
1122
Metehan
Abrir en el editor
Publica tu código
Recomendado
10 May 2025
Neón pulsante
5 December 2025
Dibujar escalador
25 November 2025
Mortal Kombat
HTML
Copy
Giriş Sayfası
Hoşgeldiniz!
Giriş yapmak için lütfen bilgilerinizi girin.
Giriş Yap
CSS
Copy
body { margin: 0; font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #FF6F91, #FF9671); /* Degrade arka plan */ display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background-color: rgba(255, 255, 255, 0.9); /* Beyaz arka plan */ padding: 20px; /* Daha az padding */ border-radius: 10px; /* Daha yuvarlak köşeler */ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Daha yumuşak gölge */ text-align: center; width: 280px; /* Daha dar bir genişlik */ } h1 { color: #333; margin-bottom: 15px; /* Alt boşluk */ } p { color: #666; margin-bottom: 20px; /* Alt boşluk */ } .login-form { display: flex; flex-direction: column; } .login-form input { margin: 10px 0; padding: 12px; /* Hafif artırılmış padding */ border: 1px solid #ccc; border-radius: 5px; transition: border-color 0.3s; } .login-form input:focus { border-color: #FF4081; /* Odaklanma rengi */ outline: none; } .login-form button { padding: 12px; /* Buton padding'i */ border: none; border-radius: 5px; background-color: #FF4081; /* Buton rengi */ color: white; cursor: pointer; transition: background-color 0.3s, transform 0.2s; } .login-form button:hover { background-color: #D5006D; /* Hover rengi */ transform: translateY(-2px); /* Yükselme efekti */ } .error-message { color: red; margin-top: 10px; display: none; } .footer { margin-top: 20px; /* Alt boşluk */ } .footer a { color: #FF4081; text-decoration: none; font-weight: bold; } .footer a:hover { text-decoration: underline; }
JS
Copy
document.addEventListener("DOMContentLoaded", () => { const loginForm = document.getElementById("loginForm"); const errorMessage = document.getElementById("error-message"); loginForm.addEventListener("submit", (event) => { event.preventDefault(); // Formun varsayılan gönderimini engelle const username = document.getElementById("username").value.trim(); const password = document.getElementById("password").value.trim(); // Basit form doğrulama if (username === "" || password === "") { showError("Kullanıcı adı ve şifre boş olamaz."); return; } // Giriş işlemi simülasyonu (örnek) if (username === "admin" && password === "12345") { alert("Giriş başarılı!"); // Başarı mesajı // Burada yönlendirme veya başka işlemler yapılabilir } else { showError("Kullanıcı adı veya şifre hatalı."); } }); function showError(message) { errorMessage.textContent = message; errorMessage.style.display = "block"; // Hata mesajını göster } });