attack-defense-platform/panel/static/index.html

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gemastik A/D Panel</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    font-family: 'JetBrains Mono','Fira Code',monospace;
    background: radial-gradient(ellipse at top, #0d1b2a 0%, #0a0f1c 55%, #05070d 100%);
    color: #c9d4e3; min-height:100vh; padding:24px;
  }
  header {
    display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;
    border-bottom:1px solid #1e3a5f; padding-bottom:16px; flex-wrap:wrap; gap:12px;
  }
  h1 { font-size:22px; color:#5ad1ff; letter-spacing:1px; }
  .actions { display:flex; gap:10px; align-items:center; }
  .pill {
    background:#0e1526; border:1px solid #1e3a5f; color:#8aa0b8; font-size:12px;
    padding:7px 13px; border-radius:20px;
  }
  .pill.green { color:#34d399; border-color:#34d39955; background:#34d39911; }
  .pill.red { color:#f87171; border-color:#f8717155; background:#f8717111; }
  button {
    background:#0e1526; border:1px solid #1e3a5f; color:#a8c3e0; font-family:inherit;
    font-size:12px; padding:8px 14px; border-radius:8px; cursor:pointer; transition:all .2s;
  }
  button:hover { border-color:#3b82f6; color:#fff; }
  button.primary {
    background:linear-gradient(135deg,#0ea5e9,#2563eb); border:none; color:#fff; font-weight:700;
  }
  button.danger { border-color:#f8717155; color:#f87171; }
  button.danger:hover { background:#f8717122; }
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
  .card {
    background:#0e1526cc; border:1px solid #1e3a5f; border-radius:12px; padding:18px;
    display:flex; flex-direction:column; gap:10px; position:relative;
  }
  .card.dead { border-color:#f8717155; background:#1a0f16cc; }
  .card-top { display:flex; justify-content:space-between; align-items:center; }
  .ch-name { font-size:16px; font-weight:700; color:#e2ecfa; }
  .ch-cat {
    font-size:10px; text-transform:uppercase; letter-spacing:1px; padding:3px 8px;
    border-radius:10px; background:#1e3a5f44; color:#8aa0b8;
  }
  .status { font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
  .status.up { color:#34d399; }
  .status.down { color:#f87171; }
  .flag {
    background:#0a101f; border:1px dashed #2a4a6f; border-radius:8px; padding:10px 12px;
    font-size:12px; color:#7dd3fc; word-break:break-all; min-height:18px;
  }
  .creds { font-size:11px; color:#718096; }
  .creds b { color:#a8c3e0; font-weight:600; }
  .btn-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
  .btn-row button { font-size:11px; padding:6px 10px; }
  textarea, input[type=text] {
    width:100%; background:#0a101f; border:1px solid #1e3a5f; color:#dbe6f4;
    border-radius:8px; padding:10px; font-size:13px; font-family:inherit; outline:none; resize:vertical;
  }
  textarea:focus, input:focus { border-color:#3b82f6; }
  .modal-back {
    position:fixed; inset:0; background:#000a; display:none; align-items:center; justify-content:center; z-index:50;
  }
  .modal-back.open { display:flex; }
  .modal {
    background:#0d1526; border:1px solid #2a4a6f; border-radius:14px; padding:26px; width:440px; max-width:92vw;
  }
  .modal h2 { font-size:16px; color:#5ad1ff; margin-bottom:16px; }
  .toast {
    position:fixed; bottom:24px; right:24px; background:#0e1526; border:1px solid #3b82f6;
    color:#dbe6f4; padding:13px 18px; border-radius:10px; font-size:13px; z-index:80;
    opacity:0; transform:translateY(10px); transition:all .3s;
  }
  .toast.show { opacity:1; transform:translateY(0); }
  .toast.err { border-color:#f87171; color:#fca5a5; }
  .history-box {
    background:#0a101f; border:1px solid #1e3a5f; border-radius:10px; padding:14px;
    font-size:11px; color:#7dd3fc; max-height:300px; overflow-y:auto; white-space:pre-wrap;
  }
  .footer-note { color:#4a5a70; font-size:11px; margin-top:20px; text-align:center; }
  .spin { display:inline-block; width:12px; height:12px; border:2px solid #2a4a6f; border-top-color:#5ad1ff; border-radius:50%; animation:sp .7s linear infinite; }
  @keyframes sp { to { transform:rotate(360deg); } }
</style>
</head>
<body>
<header>
  <h1>⚔️ GEMASTIK A/D — NODE CONTROL</h1>
  <div class="actions">
    <span class="pill" id="clock">--:--:--</span>
    <button onclick="refresh()">🔄 Refresh</button>
    <button onclick="logout()">Keluar</button>
  </div>
</header>

<div class="grid" id="grid"></div>

<div class="footer-note">Receiver: https://gemastik.imrnes.team · Auto-refresh tiap 15 detik · Flags dirotate lewat panel ini</div>

<!-- modal flag -->
<div class="modal-back" id="modalFlag">
  <div class="modal">
    <h2 id="mfTitle">Rotate Flag</h2>
    <input type="text" id="mfFlag" placeholder="GEMASTIK18{...}" style="margin-bottom:12px">
    <div class="btn-row" style="justify-content:flex-end">
      <button onclick="closeModal('modalFlag')">Batal</button>
      <button class="primary" onclick="submitFlag()">Submit Flag</button>
    </div>
  </div>
</div>

<!-- modal creds -->
<div class="modal-back" id="modalCred">
  <div class="modal">
    <h2 id="mcTitle">SSH Credentials</h2>
    <div id="mcBody" style="font-size:13px;color:#dbe6f4;line-height:1.8"></div>
    <div class="btn-row" style="justify-content:flex-end;margin-top:14px">
      <button onclick="closeModal('modalCred')">Tutup</button>
    </div>
  </div>
</div>

<!-- modal history -->
<div class="modal-back" id="modalHist">
  <div class="modal" style="width:560px">
    <h2>Command History (preexec)</h2>
    <div class="history-box" id="mhBody">loading...</div>
    <div class="btn-row" style="justify-content:flex-end;margin-top:14px">
      <button onclick="closeModal('modalHist')">Tutup</button>
    </div>
  </div>
</div>

<div class="toast" id="toast"></div>

<script>
let CURRENT = null;
let REFRESH_MS = 15000;

async function api(path, opts={}) {
  const r = await fetch(path, opts);
  if (r.status === 401) { location.href = '/login'; throw new Error('unauth'); }
  const data = await r.json().catch(() => ({}));
  if (!r.ok) throw new Error(data.detail || data.receiver_body || r.statusText);
  return data;
}

function toast(msg, err=false) {
  const t = document.getElementById('toast');
  t.textContent = msg; t.className = 'toast show' + (err ? ' err' : '');
  setTimeout(() => t.className = 'toast', 3000);
}

function esc(s) {
  return (s||'').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}

async function refresh() {
  const grid = document.getElementById('grid');
  try {
    const d = await api('/api/status');
    const chs = await api('/api/challenges');
    const name2cat = Object.fromEntries((chs.challenges||[]).map(c => [c.name, c]));
    let html = '';
    for (const ch of d.results) {
      const meta = name2cat[ch.name] || {};
      const alive = ch.alive;
      html += `<div class="card ${alive ? '' : 'dead'}">
        <div class="card-top">
          <span class="ch-name">${esc(ch.name)}</span>
          <span class="ch-cat">${esc(meta.category || ch.category || '')}</span>
        </div>
        <div><span class="status ${alive ? 'up' : 'down'}">${alive ? '● SLA OK' : '● SLA DOWN'}</span>
        <span style="font-size:11px;color:#718096;margin-left:8px">
          ${esc(ch.port)} / ssh ${esc(ch.ssh)}</span></div>
        <div class="flag" title="Flag saat ini">🏳️ ${esc(ch.flag || '(kosong — belum di-set)')}</div>
        <div class="creds" id="creds-${esc(ch.name)}"><span class="spin"></span> ambil kredensial…</div>
        <div class="btn-row">
          <button class="primary" onclick="openFlag('${esc(ch.name)}')">Rotate Flag</button>
          <button onclick="act('restart','${esc(ch.name)}')">Restart</button>
          <button onclick="act('rollback','${esc(ch.name)}')">Rollback</button>
          <button onclick="act('activate','${esc(ch.name)}')">Activate</button>
          <button class="danger" onclick="act('deactivate','${esc(ch.name)}')">Deactivate</button>
          <button onclick="viewCred('${esc(ch.name)}')">SSH</button>
        </div>
      </div>`;
      // fetch creds lazily
      fetch(`/api/credential/${ch.name}`).then(r=>r.json()).then(c => {
        const el = document.getElementById('creds-' + ch.name);
        if (el && c.username) el.innerHTML = `<b>ctfuser</b> / <b>${esc(c.password)}</b>`;
      }).catch(()=>{});
    }
    grid.innerHTML = html;
  } catch (e) {
    toast('Gagal refresh: ' + e.message, true);
  }
}

async function act(action, challenge) {
  try {
    const d = await api(`/api/${action}/${challenge}`, {method:'POST'});
    toast(`${action} ${challenge} → receiver ${d.receiver_status}`, false);
    setTimeout(refresh, 2500);
  } catch (e) { toast(e.message, true); }
}

let flagChallenge = null;
function openFlag(ch) {
  flagChallenge = ch;
  document.getElementById('mfTitle').textContent = 'Rotate Flag — ' + ch;
  document.getElementById('mfFlag').value = '';
  document.getElementById('modalFlag').classList.add('open');
  document.getElementById('mfFlag').focus();
}

async function submitFlag() {
  const flag = document.getElementById('mfFlag').value.trim();
  if (!flag) return toast('Flag kosong', true);
  try {
    const d = await api('/api/flag', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({challenge: flagChallenge, flag})});
    toast(`Flag ${flagChallenge} di-rotate → receiver ${d.receiver_status}`, false);
    closeModal('modalFlag');
    setTimeout(refresh, 1500);
  } catch (e) { toast(e.message, true); }
}

async function viewCred(ch) {
  try {
    const c = await api(`/api/credential/${ch}`);
    document.getElementById('mcTitle').textContent = 'SSH Credentials — ' + ch;
    let cmd = `ssh ctfuser@warmup.gemastik.imrnes.team -p 10022`.replace('warmup.gemastik.imrnes.team', ch + '.gemastik.imrnes.team').replace('10022', String(ch==='blogpost'?10022:ch==='carbeat'?11022:ch==='cdn'?12022:ch==='phew'?13022:ch==='sheesh'?14022:15022));
    document.getElementById('mcBody').innerHTML =
      `<div>User: <b>ctfuser</b></div>
       <div>Pass: <b>${esc(c.password)}</b></div>
       <div style="margin-top:10px">SSH:</div>
       <div class="flag" style="margin-top:6px">${esc(cmd)}</div>`;
    document.getElementById('modalCred').classList.add('open');
  } catch (e) { toast(e.message, true); }
}

async function openHist() {
  try {
    const d = await api('/api/history');
    document.getElementById('mhBody').textContent = d.lines.join('\n') || '(belum ada log)';
    document.getElementById('modalHist').classList.add('open');
  } catch (e) { toast(e.message, true); }
}

function closeModal(id) { document.getElementById(id).classList.remove('open'); }
async function logout() {
  await fetch('/api/logout', {method:'POST'});
  location.href = '/login';
}

document.getElementById('modalFlag').addEventListener('click', e => { if (e.target === e.currentTarget) closeModal('modalFlag'); });
document.getElementById('modalCred').addEventListener('click', e => { if (e.target === e.currentTarget) closeModal('modalCred'); });
document.getElementById('modalHist').addEventListener('click', e => { if (e.target === e.currentTarget) closeModal('modalHist'); });

function tick() {
  document.getElementById('clock').textContent = new Date().toLocaleTimeString('id-ID');
}
setInterval(tick, 1000); tick();
refresh();
setInterval(refresh, REFRESH_MS);
</script>
</body>
</html>