<!DOCTYPE html>
\
<html lang="id">
\
<head>
\
<meta charset="UTF-8">
\
<meta name="viewport" content="width=device-width, initial-scale=1.0">
\
<title>Harmoni - Login</title>
\

\
<!-- Bootstrap -->
\
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
\
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
\

\
<style>
\

\
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
\

\
*{
\
    font-family: 'Poppins', sans-serif;
\
}
\

\
html,
\
body{
\
    height:100%;
\
    margin:0;
\
}
\

\
body{
\
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(0, 91, 172, 0.85)), url('<?= base_url("background.jpeg"); ?>') no-repeat center center fixed;
\
    background-size: cover;
\
    display:flex;
\
    justify-content:center;
\
    align-items:center;
\
    overflow:hidden;
\
}
\

\
.login-card{
\
    width:100%;
\
    max-width:420px;
\
    background:#fff;
\
    border-radius:24px;
\
    padding:40px;
\
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
\
    animation:fadeIn .4s ease;
\
}
\

\
@keyframes fadeIn{
\
    from{
\
        opacity:0;
\
        transform:translateY(20px);
\
    }
\
    to{
\
        opacity:1;
\
        transform:translateY(0);
\
    }
\
}
\

\
.logo {
\
    height: 200px;
\
    width: auto;
\
    display: block;
\
    margin: 0 auto;
\
}
\

\
.input-group-text{
\
    background:#fff;
\
    border-right:none;
\
    border-radius:12px 0 0 12px;
\
    border:1px solid #dbe2ea;
\
    color: #64748b;
\
}
\

\
.form-control{
\
    border-left:none;
\
    height:50px;
\
    border-radius:0 12px 12px 0;
\
    border:1px solid #dbe2ea;
\
    font-size: 14px;
\
}
\

\
.form-control:focus{
\
    box-shadow:none;
\
    border-color:#3F89E2;
\
}
\

\
.input-group:focus-within{
\
    box-shadow:0 0 0 3px rgba(63, 137, 226, 0.15);
\
    border-radius:12px;
\
}
\

\
.input-group:focus-within .input-group-text,
\
.input-group:focus-within .form-control {
\
    border-color:#3F89E2;
\
}
\

\
.btn-login{
\
    height:50px;
\
    border:none;
\
    color:#fff;
\
    font-weight:600;
\
    border-radius:12px;
\
    background:linear-gradient(90deg,#005BAC,#3F89E2);
\
    transition:.3s;
\
    font-size: 15px;
\
    box-shadow: 0 4px 12px rgba(0, 91, 172, 0.2);
\
}
\

\
.btn-login:hover{
\
    transform:translateY(-2px);
\
    color:#fff;
\
    box-shadow: 0 6px 16px rgba(0, 91, 172, 0.35);
\
}
\

\
.alert{
\
    font-size:14px;
\
    border-radius: 12px;
\
}
\

\
.nik-input{
\
    text-transform:uppercase;
\
}
\

\
.version{
\
    text-align:center;
\
    margin-top:18px;
\
    font-size:12px;
\
    color:#98a2b3;
\
    font-weight: 500;
\
}
\

\
@media(max-width:576px){
\

\
    body{
\
        padding:20px;
\
    }
\

\
    .login-card{
\
        padding:30px 24px;
\
    }
\

\
    .logo {
\
        height: 80px;
\
    }
\
}
\

\
/* Hide login card until loaded */
\
.login-card {
\
    opacity: 0;
\
    transition: opacity 0.4s ease;
\
}
\
.login-card.show {
\
    opacity: 1;
\
}
\

\
/* =======================
\
   LOADING OVERLAY
\
======================= */
\
#harmoni-loader-overlay {
\
    position: fixed;
\
    top: 0;
\
    left: 0;
\
    width: 100%;
\
    height: 100%;
\
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.92), rgba(13, 202, 240, 0.92));
\
    backdrop-filter: blur(12px);
\
    -webkit-backdrop-filter: blur(12px);
\
    display: flex;
\
    flex-direction: column;
\
    justify-content: center;
\
    align-items: center;
\
    z-index: 99999;
\
    transition: opacity 0.5s ease, visibility 0.5s ease;
\
}
\
#harmoni-loader-overlay.fade-out {
\
    opacity: 0;
\
    visibility: hidden;
\
}
\
#harmoni-loader-overlay .loader-logo-wrapper {
\
    position: relative;
\
    width: 150px;
\
    height: 150px;
\
    display: flex;
\
    justify-content: center;
\
    align-items: center;
\
}
\
#harmoni-loader-overlay .loader-logo {
\
    width: 100px;
\
    height: auto;
\
    animation: loaderPulse 1.6s ease-in-out infinite;
\
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.2));
\
    z-index: 2;
\
    position: relative;
\
}
\
@keyframes loaderPulse {
\
    0%, 100% {
\
        transform: scale(1);
\
        opacity: 1;
\
    }
\
    50% {
\
        transform: scale(1.06);
\
        opacity: 0.8;
\
    }
\
}
\
#harmoni-loader-overlay .loader-spinner {
\
    position: absolute;
\
    top: 0;
\
    left: 0;
\
    width: 100%;
\
    height: 100%;
\
    border: 3.5px solid rgba(255, 255, 255, 0.25);
\
    border-top: 3.5px solid #ffffff;
\
    border-right: 3.5px solid #ffffff;
\
    border-radius: 50%;
\
    animation: loaderSpin 1s linear infinite;
\
    z-index: 1;
\
}
\
@keyframes loaderSpin {
\
    to { transform: rotate(360deg); }
\
}
\
#harmoni-loader-overlay .loader-text {
\
    margin-top: 20px;
\
    font-family: ui-sans-serif,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
\
    font-size: 14px;
\
    font-weight: 500;
\
    color: rgba(255, 255, 255, 0.9);
\
    letter-spacing: 1px;
\
}
\
#harmoni-loader-overlay .loader-text .dot {
\
    display: inline-block;
\
    width: 18px;
\
    text-align: left;
\
}
\
</style>
\
</head>
\
<body>
\

\
<!-- LOADING OVERLAY -->
\
<div id="harmoni-loader-overlay">
\
    <div class="loader-logo-wrapper">
\
        <img src="<?= base_url('harmonilogin2.png'); ?>" class="loader-logo" alt="Harmoni Logo">
\
        <div class="loader-spinner"></div>
\
    </div>
\
    <div class="loader-text">Loading<span class="dot"></span></div>
\
</div>
\

\
<script>
\
(function() {
\
    var dotEl = document.querySelector('#harmoni-loader-overlay .dot');
\
    if (!dotEl) return;
\
    var frames = ['', '.', '..', '...'];
\
    var i = 0;
\
    setInterval(function() {
\
        i = (i + 1) % frames.length;
\
        dotEl.textContent = frames[i];
\
    }, 400);
\
})();
\
window.addEventListener('load', function() {
\
    var loader = document.getElementById('harmoni-loader-overlay');
\
    if (loader) {
\
        setTimeout(function() {
\
            loader.classList.add('fade-out');
\
            setTimeout(function() { loader.remove(); }, 500);
\
        }, 400);
\
    }
\
    // Show login card
\
    var card = document.querySelector('.login-card');
\
    if (card) {
\
        card.classList.add('show');
\
    }
\
});
\
</script>
\

\
<div class="login-card">
\

\
    <div class="text-center mb-2">
\
        <img src="<?= base_url('harmonilogin2.png') ?>" class="logo" alt="Logo">
\
    </div>
\

\
    <?php if($this->session->flashdata('error')): ?>
\
        <div class="alert alert-danger">
\
            <?= htmlspecialchars($this->session->flashdata('error')); ?>
\
        </div>
\
    <?php endif; ?>
\

\
    <form
\
        id="loginForm"
\
        action="<?= site_url('auth/login_process'); ?>"
\
        method="post">
\

\
        <div class="mb-3">
\

\
            <label class="form-label">
\
                NIK
\
            </label>
\

\
            <div class="input-group">
\

\
                <span class="input-group-text">
\
                    <i class="bi bi-person"></i>
\
                </span>
\

\
                <input
\
                    type="text"
\
                    name="nik_user"
\
                    class="form-control nik-input"
\
                    placeholder="Masukkan NIK"
\
                    required
\
                    autofocus>
\

\
            </div>
\

\
        </div>
\

\
        <div class="mb-4">
\

\
            <label class="form-label">
\
                Password
\
            </label>
\

\
            <div class="input-group">
\

\
                <span class="input-group-text">
\
                    <i class="bi bi-lock"></i>
\
                </span>
\

\
                <input
\
                    type="password"
\
                    name="password"
\
                    class="form-control"
\
                    placeholder="Masukkan Password"
\
                    required>
\

\
            </div>
\

\
        </div>
\

\
.getElementById('loginForm')
\
.addEventListener('submit', function(){
\

\
    const btn =
\
        document.getElementById('loginBtn');
\

\
    btn.disabled = true;
\

\
    btn.innerHTML = `
\
        <span class="spinner-border spinner-border-sm me-2"></span>
\
        Memproses...
\
    `;
\
});
\

\
</script>
\

\
</body>
\
</html>
