


<!DOCTYPE html>
<html>
<head>
<title>Login - HEALTH</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

<style>

/* =============================
   GLOBAL BACKGROUND
============================= */

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg,#eef2f7,#ffffff);
    background-image: url('/assets/images/lsnc_logo.svg');
    background-repeat: repeat;
    background-size: 140px;
    background-position: center;
}

/* Soft overlay */
body::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.92);
    z-index: 1;
}

/* =============================
   LOGIN CARD (GLASS STYLE)
============================= */

.login-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 430px;
    padding: 40px;
    border-radius: 18px;

    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(15px);

    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
    animation: fadeIn 0.8s ease-in-out;
}

/* Fade animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =============================
   LOGO
============================= */

.logo {
    max-width: 180px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px rgba(28,53,94,0.6));
}

/* =============================
   TITLE
============================= */

.login-title {
    font-weight: 600;
    color: #1c355e;
    margin-bottom: 25px;
}

/* =============================
   INPUTS
============================= */

.form-control {
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid #dbe3f0;
    transition: all 0.2s ease;
}

.form-control:focus {
    border-color: #1c355e;
    box-shadow: 0 0 0 3px rgba(28,53,94,0.15);
}

/* =============================
   PASSWORD WRAPPER
============================= */

.password-wrapper {
    position: relative;
}

.password-wrapper i {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d;
    transition: color 0.2s ease;
}

.password-wrapper i:hover {
    color: #1c355e;
}

/* =============================
   BUTTON
============================= */

.btn-primary {
    border-radius: 10px;
    padding: 12px;
    font-weight: 600;
    background: linear-gradient(135deg, #0f1f3d, #1c355e);
    border: none;
    transition: all 0.25s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #142a52, #254a80);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(28,53,94,0.25);
}

/* =============================
   LINKS
============================= */

a {
    text-decoration: none;
    color: #1c355e;
    font-weight: 500;
}

a:hover {
    text-decoration: underline;
}

/* =============================
   FOOTER NOTE
============================= */

.footer-note {
    font-size: 12px;
    color: #6c757d;
    margin-top: 25px;
}

</style>
</head>

<body>

<div class="login-card text-center">

    <img src="/assets/images/lsnc_logo.svg" alt="LSNC Logo" class="logo">

    <h5 class="login-title">LSNC HEALTH Program</h5>

    
    <form method="POST" autocomplete="off">

        <input type="text" name="username" class="form-control mb-3" placeholder="Your Username NOT email" required>

        <div class="password-wrapper mb-3">
            <input type="password" name="password" id="passwordField" class="form-control" placeholder="Password" required>
            <i class="fa-solid fa-eye" onclick="togglePassword(event)"></i>
        </div>

        <div class="form-check text-start mb-3">
            <input class="form-check-input" type="checkbox" name="remember" id="remember">
            <label class="form-check-label" for="remember">
                Remember Me
            </label>
        </div>

        <button class="btn btn-primary w-100 mb-3">Login</button>

        <div>
            <a href="/reset_password/request.php">Forgot Password?</a>
        </div>

        <div class="footer-note">
            Powered by LSNC IT
        </div>

    </form>

</div>
<script>

/* =============================
   PLACEHOLDER CONTROL + PASSWORD TOGGLE
============================= */

const usernameField = document.querySelector('input[name="username"]');
const passwordField = document.getElementById("passwordField");

/* ---- Placeholder Handling ---- */

function handlePlaceholder(field) {
    const originalPlaceholder = field.getAttribute("placeholder");

    field.addEventListener("focus", function() {
        this.setAttribute("placeholder", "");
    });

    field.addEventListener("blur", function() {
        if (this.value.trim() === "") {
            this.setAttribute("placeholder", originalPlaceholder);
        }
    });
}

if (usernameField) handlePlaceholder(usernameField);
if (passwordField) handlePlaceholder(passwordField);


/* ---- Password Toggle ---- */

function togglePassword(e) {
    const icon = e.target;

    if (passwordField.type === "password") {
        passwordField.type = "text";
        icon.classList.replace("fa-eye","fa-eye-slash");
    } else {
        passwordField.type = "password";
        icon.classList.replace("fa-eye-slash","fa-eye");
    }
}

</script>


</body>
</html>

