WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Matrix è una directory della home page
793
Metehan
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
28 August 2024
28 June 2025
Dashboard OMIC EST HTML Barra di navigazione laterale
10 November 2024
Tris
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ı!'; } });
