WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Matrix est un répertoire de page d'accueil
852
Metehan
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
12 June 2025
Un code de Metehan
22 August 2025
Site Web du cabinet d'avocats : Tailwind CSS, Services juridiques
21 September 2024
Saisie du mot de passe Lumière
HTML
Copy
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Giriş Sayfası</title> <link rel="stylesheet" href="styles.css"> <!-- CSS dosyası --> </head> <body> <div class="login-container"> <h1>Giriş Yap</h1> <form id="loginForm"> <div class="input-group"> <input type="text" id="username" placeholder="Kullanıcı Adı" required> </div> <div class="input-group"> <input type="password" id="password" placeholder="Şifre" required> </div> <button type="submit">Giriş</button> <p id="message"></p> </form> <div class="footer"> <p>Hesabınız yok mu? <a href="#">Kayıt Olun</a></p> </div> </div> <script src="script.js"></script> <!-- JavaScript dosyası --> </body> </html>
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ı!'; } });
