WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1587
cleanarray216
Abrir no Editor
Publique Seu Código
23 October 2025
Ocultar div, iniciar animação ao clicar no botão
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); });
