cw
97 lines
3.9 KiB
PHP
97 lines
3.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="app-url" content="<?= APP_URL ?>">
|
|
<title>Login — SINERGI</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="<?= asset('css/app.css') ?>">
|
|
</head>
|
|
<body>
|
|
<?php if (session_status()===PHP_SESSION_NONE){session_start();} ?>
|
|
|
|
<div class="login-page">
|
|
<!-- LEFT PANEL -->
|
|
<div class="login-left">
|
|
<div class="login-logo">SINER<span>GI</span></div>
|
|
<div class="login-tagline">
|
|
Sistem Informasi Geografis Penanganan Kemiskinan<br>
|
|
Berbasis Kolaborasi Rumah Ibadah, Masyarakat,<br>
|
|
dan Pemerintah Kota Pontianak
|
|
</div>
|
|
|
|
<div style="margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:380px;width:100%">
|
|
<?php $items = [
|
|
['🗺','Peta GIS Real-time'],['⛪','Kolaborasi Rumah Ibadah'],
|
|
['📊','Dashboard Monitoring'],['⚡','Deteksi Blind Spot'],
|
|
]; foreach ($items as [$icon,$label]): ?>
|
|
<div style="background:rgba(255,255,255,0.08);border-radius:10px;padding:14px;display:flex;gap:10px;align-items:center;">
|
|
<span style="font-size:1.4rem"><?= $icon ?></span>
|
|
<span style="font-size:0.8rem;color:rgba(255,255,255,0.8);font-weight:500"><?= $label ?></span>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<div style="margin-top:48px;text-align:center">
|
|
<a href="<?= APP_URL ?>/" style="color:rgba(255,255,255,0.5);font-size:0.82rem">← Kembali ke Halaman Publik</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT PANEL (Form) -->
|
|
<div class="login-right">
|
|
<div style="margin-bottom:32px;">
|
|
<div style="font-size:2rem;font-weight:900;color:var(--clr-primary);">SINER<span style="color:var(--clr-accent)">GI</span></div>
|
|
</div>
|
|
|
|
<div class="login-form-title">Selamat Datang</div>
|
|
<div class="login-form-sub">Masuk ke sistem untuk melanjutkan</div>
|
|
|
|
<?= flashMessage() ?>
|
|
|
|
<form method="POST" action="<?= APP_URL ?>/login">
|
|
<?= csrfField() ?>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="username">Username / Email <span class="required">*</span></label>
|
|
<input type="text" id="username" name="username" class="form-control"
|
|
placeholder="Masukkan username atau email" required autofocus
|
|
value="<?= e($_POST['username'] ?? '') ?>">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="password">Password <span class="required">*</span></label>
|
|
<div style="position:relative">
|
|
<input type="password" id="password" name="password" class="form-control"
|
|
placeholder="Masukkan password" required style="padding-right:44px">
|
|
<button type="button" onclick="togglePwd()" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);border:none;background:none;cursor:pointer;color:var(--clr-text-muted);font-size:1rem;" id="pwd-toggle">👁</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary w-full" style="margin-top:8px;padding:12px;font-size:1rem;justify-content:center;">
|
|
Masuk ke Sistem
|
|
</button>
|
|
</form>
|
|
|
|
<div style="margin-top:20px;text-align:center">
|
|
<a href="<?= APP_URL ?>/" style="font-size:0.82rem;color:var(--clr-text-muted)">← Kembali ke Beranda</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function togglePwd() {
|
|
const i = document.getElementById('password');
|
|
const b = document.getElementById('pwd-toggle');
|
|
i.type = i.type === 'password' ? 'text' : 'password';
|
|
b.textContent = i.type === 'password' ? '👁' : '🙈';
|
|
}
|
|
function fillLogin(u, p) {
|
|
document.getElementById('username').value = u;
|
|
document.getElementById('password').value = p;
|
|
}
|
|
</script>
|
|
<script src="<?= asset('js/app.js') ?>"></script>
|
|
</body>
|
|
</html>
|