WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1410
cleanarray216
Abrir no Editor
Publique Seu Código
6 November 2024
Animação de texto
HTML
Copy
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ekran Logowania</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="login-container"> <h1>Logowanie</h1> <form id="login-form"> <div class="input-group"> <label for="username">Nazwa użytkownika:</label> <input type="text" id="username" name="username" required> </div> <div class="input-group"> <label for="password">Hasło:</label> <input type="password" id="password" name="password" required> </div> <button type="submit">Zaloguj się</button> <p id="error-message"></p> </form> </div> <script src="script.js"></script> </body> </html>
CSS
Copy
body { font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .login-container { background-color: #ffffff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; width: 300px; } h1 { margin-bottom: 20px; text-align: center; } .input-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; } button { width: 100%; padding: 10px; background-color: #007bff; color: #ffffff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; } button:hover { background-color: #0056b3; }
JS
Copy
document.getElementById('login-form').addEventListener('submit', function(event) { event.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; // Tutaj możesz dodać logikę do obsługi logowania, np. wysyłanie danych do serwera console.log('Zalogowano użytkownika:', username); });
