93 lines
3.8 KiB
HTML
93 lines
3.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>QRIS Soundbox UI Hub</title>
|
|
<style>
|
|
:root{--bg:#f8fafc;--text:#0f172a;--line:#e2e8f0;--accent:#2563eb;--muted:#64748b;}
|
|
body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}
|
|
header{position:sticky;top:0;z-index:2;padding:14px 20px;border-bottom:1px solid var(--line);background:white;display:flex;gap:12px;align-items:center}
|
|
header h1{margin:0;font-size:18px}
|
|
.pill{font-size:12px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:white;color:var(--text);text-decoration:none}
|
|
.layout{display:grid;grid-template-columns:260px 1fr;height:calc(100vh - 58px)}
|
|
nav{padding:16px;border-right:1px solid var(--line);background:#fff;overflow:auto}
|
|
nav a{display:block;padding:8px 10px;border-radius:8px;color:var(--text);text-decoration:none;margin-bottom:6px}
|
|
nav a.active{background:#e0ecff;color:var(--accent);font-weight:600}
|
|
nav a:hover{background:#eef2ff}
|
|
iframe{width:100%;height:100%;border:0;background:white}
|
|
.hint{font-size:12px;color:var(--muted);margin:0 0 12px}
|
|
.small{font-size:12px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>QRIS Soundbox UI Hub</h1>
|
|
<a class="pill" href="/ui">Kembali ke Katalog</a>
|
|
<span class="small" id="current"></span>
|
|
</header>
|
|
<div class="layout">
|
|
<nav id="menu"></nav>
|
|
<iframe id="preview" src=""></iframe>
|
|
</div>
|
|
<script>
|
|
const pages = [
|
|
'admin-application-review-detail',
|
|
'admin-dashboard-overview',
|
|
'admin-fee-pricing-management',
|
|
'admin-login',
|
|
'admin-login-portal',
|
|
'admin-onboarding-review-queue',
|
|
'admin-reconciliation-management',
|
|
'admin-system-audit-logs',
|
|
'device-registry-monitoring',
|
|
'device-technical-detail',
|
|
'device-ui-payment-success',
|
|
'device-ui-qr-payment-display',
|
|
'merchant-dashboard-portal',
|
|
'merchant-detail-view',
|
|
'merchant-list-management',
|
|
'merchant-login',
|
|
'merchant-login-portal',
|
|
'merchant-settlement-history',
|
|
'onboarding-bank-account',
|
|
'onboarding-business-info',
|
|
'onboarding-document-upload',
|
|
'onboarding-pic-details',
|
|
'outlet-branch-management',
|
|
'qris-soundbox-logo',
|
|
'settlement-batch-management',
|
|
'soundbox-ops',
|
|
'transaction-history-monitoring',
|
|
];
|
|
const menu = document.getElementById('menu');
|
|
const frame = document.getElementById('preview');
|
|
const current = document.getElementById('current');
|
|
const params = new URLSearchParams(window.location.search);
|
|
const selected = params.get('page') || pages[0];
|
|
const safePage = pages.includes(selected) ? selected : pages[0];
|
|
|
|
menu.innerHTML = '<p class="hint">Klik untuk buka halaman:</p>' + pages.map((slug) => {
|
|
const active = slug === safePage ? ' active' : '';
|
|
return `<a href="/ui/hub?page=${encodeURIComponent(slug)}" class="${active}">${slug}</a>`;
|
|
}).join('');
|
|
|
|
frame.src = `/ui/${safePage}`;
|
|
current.textContent = `Preview: ${safePage}`;
|
|
|
|
menu.addEventListener('click', (evt) => {
|
|
const a = evt.target.closest('a');
|
|
if (!a) return;
|
|
evt.preventDefault();
|
|
const next = new URL(a.href).searchParams.get('page');
|
|
if (!next) return;
|
|
current.textContent = `Preview: ${next}`;
|
|
frame.src = `/ui/${next}`;
|
|
menu.querySelectorAll('a').forEach((link) => link.classList.remove('active'));
|
|
a.classList.add('active');
|
|
history.replaceState(null, '', `/ui/hub?page=${encodeURIComponent(next)}`);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|