Login Page - Copy this React, Tailwind Component to your project
questa è la pagina originale, è possibile migliorarla?<!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login - Trading System Dashboard</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Poppins', Arial, sans-serif; background-color: #ffffff; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; } .header { display: flex; align-items: center; background-color: #000000; padding: 10px 20px; } .logo { width: 50px; height: 50px; margin-right: 20px; } .dashboard-name { font-size: 20px; font-weight: 600; color: #ffffff; } .login-container { flex: 1; display: flex; justify-content: center; align-items: center; padding: 20px; } .login-box { background-color: #000000; padding: 30px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.2); width: 300px; } .login-logo { width: 100px; height: 100px; margin: 0 auto 20px; display: block; } input { display: block; width: calc(100% - 22px); padding: 10px; margin: 10px 0; background-color: #2a2a2a; border: 1px solid #00ff00; color: #00ff00; border-radius: 5px; } input::placeholder { color: #008000; } button { width: 50%; padding: 10px; background-color: #00ff00; color: #000000; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; margin: 20px auto 0; display: block; } button:hover { background-color: #00cc00; } .error-message { color: #ff0000; text-align: center; margin-top: 10px; } .footer { background-color: #000000; color: #ffffff; text-align: center; padding: 10px 20px; font-size: 0.8em; } </style> </head> <body> <header class="header"> <img src="/TSD/FVG_Dashboard/images/logo.png" alt="Logo" class="logo"> <h1 class="dashboard-name">Trading System Dashboard</h1> </header> <div class="login-container"> <div class="login-box"> <img src="/TSD/FVG_Dashboard/images/login_icon.png" alt="TSD Logo" class="login-logo"> <form id="loginForm" action="authenticate.php" method="post"> <input type="text" name="email" placeholder="User Name" required> <input type="password" name="password" placeholder="Account Number" required> <button type="submit">Log in</button> </form> <div id="errorMessage" class="error-message"></div> </div> </div> <footer class="footer"> <p>© 2024 TSD - Trading System Dashboard. Tutti i diritti riservati.</p> <p>Indirizzo: Via Example, 123 - 00100 Roma, Italia</p> <p>Email: info@tsd.com | Tel: +39 06 1234567</p> </footer> <script> window.onload = function() { const urlParams = new URLSearchParams(window.location.search); if (urlParams.get('error') === '1') { document.getElementById('errorMessage').innerText = 'Login fallito. Controlla le tue credenziali.'; } if (document.querySelector('input[name="email"]').value === '') { document.querySelector('input[name="email"]').value = ''; } if (document.querySelector('input[name="password"]').value === '') { document.querySelector('input[name="password"]').value = ''; } }; </script> </body> </html>