| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>WiFi Attendance Tracker - Login</title> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .login-container { |
| background: white; |
| padding: 2rem; |
| border-radius: 15px; |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); |
| width: 100%; |
| max-width: 400px; |
| text-align: center; |
| } |
| |
| .login-header { |
| margin-bottom: 2rem; |
| } |
| |
| .login-header i { |
| font-size: 3rem; |
| color: #667eea; |
| margin-bottom: 1rem; |
| } |
| |
| .login-header h1 { |
| color: #333; |
| font-size: 1.8rem; |
| margin-bottom: 0.5rem; |
| } |
| |
| .login-header p { |
| color: #666; |
| font-size: 0.9rem; |
| } |
| |
| .form-group { |
| margin-bottom: 1.5rem; |
| text-align: left; |
| } |
| |
| .form-group label { |
| display: block; |
| margin-bottom: 0.5rem; |
| color: #333; |
| font-weight: 500; |
| } |
| |
| .password-input-container { |
| position: relative; |
| } |
| |
| .form-group input { |
| width: 100%; |
| padding: 0.75rem; |
| border: 2px solid #e1e5e9; |
| border-radius: 8px; |
| font-size: 1rem; |
| transition: border-color 0.3s ease; |
| } |
| |
| .form-group input:focus { |
| outline: none; |
| border-color: #667eea; |
| } |
| |
| .toggle-password { |
| position: absolute; |
| right: 10px; |
| top: 50%; |
| transform: translateY(-50%); |
| background: none; |
| border: none; |
| color: #666; |
| cursor: pointer; |
| font-size: 1rem; |
| } |
| |
| .login-btn { |
| width: 100%; |
| padding: 0.75rem; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| border: none; |
| border-radius: 8px; |
| font-size: 1rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: transform 0.2s ease; |
| } |
| |
| .login-btn:hover { |
| transform: translateY(-2px); |
| } |
| |
| .login-btn:disabled { |
| opacity: 0.6; |
| cursor: not-allowed; |
| transform: none; |
| } |
| |
| .error-message { |
| background: #fee; |
| color: #c33; |
| padding: 0.75rem; |
| border-radius: 8px; |
| margin-bottom: 1rem; |
| border-left: 4px solid #c33; |
| display: none; |
| } |
| |
| .loading { |
| display: none; |
| margin-top: 1rem; |
| } |
| |
| .loading i { |
| animation: spin 1s linear infinite; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| .footer { |
| margin-top: 2rem; |
| padding-top: 1rem; |
| border-top: 1px solid #eee; |
| color: #666; |
| font-size: 0.8rem; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="login-container"> |
| <div class="login-header"> |
| <i class="fas fa-wifi"></i> |
| <h1>WiFi Attendance Tracker</h1> |
| <p>Please enter your password to access the dashboard</p> |
| </div> |
|
|
| <div id="errorMessage" class="error-message"></div> |
|
|
| <form id="loginForm"> |
| <div class="form-group"> |
| <label for="password">Dashboard Password</label> |
| <div class="password-input-container"> |
| <input type="password" id="password" name="password" required placeholder="Enter dashboard password" autocomplete="current-password"> |
| <button type="button" class="toggle-password" onclick="togglePassword()"> |
| <i class="fas fa-eye" id="toggleIcon"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <button type="submit" class="login-btn" id="loginBtn"> |
| <i class="fas fa-sign-in-alt"></i> Access Dashboard |
| </button> |
| </form> |
|
|
| <div class="loading" id="loading"> |
| <i class="fas fa-spinner"></i> Authenticating... |
| </div> |
|
|
| <div class="footer"> |
| <p>Default password: <strong>admin123</strong></p> |
| <p>Advanced Employee Management System</p> |
| </div> |
| </div> |
|
|
| <script> |
| function togglePassword() { |
| const passwordInput = document.getElementById('password'); |
| const toggleIcon = document.getElementById('toggleIcon'); |
| |
| if (passwordInput.type === 'password') { |
| passwordInput.type = 'text'; |
| toggleIcon.className = 'fas fa-eye-slash'; |
| } else { |
| passwordInput.type = 'password'; |
| toggleIcon.className = 'fas fa-eye'; |
| } |
| } |
| |
| function showError(message) { |
| const errorDiv = document.getElementById('errorMessage'); |
| errorDiv.textContent = message; |
| errorDiv.style.display = 'block'; |
| } |
| |
| function hideError() { |
| const errorDiv = document.getElementById('errorMessage'); |
| errorDiv.style.display = 'none'; |
| } |
| |
| function setLoading(loading) { |
| const loginBtn = document.getElementById('loginBtn'); |
| const loadingDiv = document.getElementById('loading'); |
| const form = document.getElementById('loginForm'); |
| |
| if (loading) { |
| loginBtn.disabled = true; |
| loadingDiv.style.display = 'block'; |
| form.style.opacity = '0.6'; |
| } else { |
| loginBtn.disabled = false; |
| loadingDiv.style.display = 'none'; |
| form.style.opacity = '1'; |
| } |
| } |
| |
| document.getElementById('loginForm').addEventListener('submit', async function(e) { |
| e.preventDefault(); |
| |
| const password = document.getElementById('password').value; |
| |
| if (!password) { |
| showError('Please enter a password'); |
| return; |
| } |
| |
| hideError(); |
| setLoading(true); |
| |
| try { |
| const response = await fetch('/api/login', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ password: password }) |
| }); |
| |
| const result = await response.json(); |
| |
| if (result.success) { |
| |
| window.location.href = '/dashboard'; |
| } else { |
| showError(result.message || 'Invalid password'); |
| } |
| } catch (error) { |
| console.error('Login error:', error); |
| showError('Connection error. Please try again.'); |
| } finally { |
| setLoading(false); |
| } |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| document.getElementById('password').focus(); |
| }); |
| |
| |
| document.getElementById('password').addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| document.getElementById('loginForm').dispatchEvent(new Event('submit')); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
|
|
