.brand h1 span color: #2a9d8f;
.forgot-link:hover text-decoration: underline;
<div id="errorBox" class="error-msg"></div> Mis Aldel Login
<form id="loginForm"> <div class="input-group"> <i class="fas fa-envelope"></i> <input type="email" id="email" placeholder="Employee / User ID (email)" required> </div> <div class="input-group"> <i class="fas fa-lock"></i> <input type="password" id="password" placeholder="Password" required> </div> <div class="options"> <label class="checkbox"> <input type="checkbox" id="remember"> Remember me </label> <a href="#" class="forgot-link">Forgot password?</a> </div> <button type="submit" class="login-btn"> <i class="fas fa-sign-in-alt" style="margin-right: 8px;"></i> Login </button> </form>
<div class="signup-prompt"> Don't have access? <a href="#">Request account</a> </div> </div> <footer> © 2025 Aldel MIS — Secured access only </footer> </div> .brand h1 span color: #2a9d8f
.input-group input:focus border-color: #2a9d8f; box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.2);
// ✅ Simulate backend authentication // Replace this block with real fetch to your API try // Example: // const res = await fetch('/api/auth/login', // method: 'POST', // headers: 'Content-Type': 'application/json' , // body: JSON.stringify( email, password, remember ) // ); // const data = await res.json(); // if (res.ok) window.location.href = '/dashboard'; // else showError(data.message catch (err) showError("Server error. Please try again later."); .forgot-link:hover text-decoration: underline
.login-container width: 100%; max-width: 440px;