MythEclipse/attack-defense-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: multi-team orchestrator - topology UI, team management, flag randomizer, public submit + leaderboard

Browse Source 
- panel/teams.py: create/start/stop teams with isolated ports+creds, per-team receivers with CHALLENGE_PORT/CONTAINER env, flag randomization, submit validation + leaderboard
- panel/main.py: /api/teams, /api/teams/{idx}/randomize, /api/flag/submit, /api/leaderboard, /api/public/teams, /submit page
- panel/static/submit.html: public flag submission UI for teams
- receiver: _ch_port/_ch_container read .env per team, container name overrides
- .gitignore: exclude teams/, .venv, __pycache__
This commit is contained in:
root
2026-09-23 15:14:52 +08:00
parent 6eb0dabb58
commit 1ca963b2b7
13 changed files with 1037 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
panel/static/index.html
+340 -24
View File
@@ -12,11 +12,18 @@
color: #c9d4e3; min-height:100vh; padding:24px;
}
header {
display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;
display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;
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; }
.tabs { display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap; }
.tab {
background:#0e1526; border:1px solid #1e3a5f; color:#8aa0b8; padding:9px 16px;
border-radius:8px; cursor:pointer; font-family:inherit; font-size:13px; transition:all .2s;
}
.tab.active { background:#2563eb33; border-color:#3b82f6; color:#fff; }
.tab:hover { border-color:#3b82f6; }
.pill {
background:#0e1526; border:1px solid #1e3a5f; color:#8aa0b8; font-size:12px;
padding:7px 13px; border-radius:20px;
@@ -28,11 +35,11 @@
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.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; }
.view { display:none; }
.view.active { display:block; }
.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;
@@ -56,11 +63,11 @@
.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] {
textarea, input[type=text], input[type=number], select {
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; }
textarea:focus, input:focus, select:focus { border-color:#3b82f6; }
.modal-back {
position:fixed; inset:0; background:#000a; display:none; align-items:center; justify-content:center; z-index:50;
}
@@ -83,6 +90,14 @@
.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); } }
.topo-wrap { background:#0a0f1c; border:1px solid #1e3a5f; border-radius:12px; padding:20px; overflow-x:auto; }
.topo-svg { width:100%; min-width:800px; }
.team-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.team-status { font-size:11px; }
.kv { display:grid; grid-template-columns:120px 1fr; gap:6px 12px; font-size:12px; }
.kv b { color:#8aa0b8; font-weight:600; }
.kv span { color:#dbe6f4; word-break:break-all; }
.mono { font-family:inherit; }
</style>
</head>
<body>
@@ -95,9 +110,77 @@
</div>
</header>
<div class="grid" id="grid"></div>
<div class="tabs">
<button class="tab active" data-view="challs" onclick="showView('challs')">🎯 Challenges</button>
<button class="tab" data-view="topo" onclick="showView('topo'); loadTopo()">🗺️ Topology</button>
<button class="tab" data-view="teams" onclick="showView('teams'); loadTeams()">👥 Teams</button>
<button class="tab" data-view="logs" onclick="showView('logs'); loadLogs()">📜 Logs</button>
<button class="tab" data-view="creds" onclick="showView('creds'); loadCreds()">🔑 Creds</button>
</div>
<div class="footer-note">Receiver: https://gemastik.imrnes.team · Auto-refresh tiap 15 detik · Flags dirotate lewat panel ini</div>
<!-- Challenges view -->
<div class="view active" id="view-challs">
<div class="grid" id="grid"></div>
</div>
<!-- Topology view -->
<div class="view" id="view-topo">
<div class="topo-wrap"><svg id="topoSvg" class="topo-svg" height="420"></svg></div>
</div>
<!-- Teams view -->
<div class="view" id="view-teams">
<div class="card" style="margin-bottom:16px">
<div class="team-head">
<div><b style="color:#5ad1ff">Jumlah Team</b> <span style="font-size:11px;color:#718096">(auto-create node per team)</span></div>
<div style="display:flex;gap:8px;align-items:center">
<input type="number" id="teamCount" min="0" max="50" value="0" style="width:90px">
<button class="primary" onclick="setTeams()">Set & Buat</button>
</div>
</div>
<div style="margin-top:10px;display:flex;gap:8px;flex-wrap:wrap">
<button class="primary" onclick="startAllTeams()">▶ Start CTF (semua)</button>
<button class="danger" onclick="stopAllTeams()">⏹ Stop CTF (semua)</button>
</div>
</div>
<div class="grid" id="teamsGrid"></div>
<div class="card" style="margin-top:16px">
<div class="team-head">
<div><b style="color:#5ad1ff">🏆 Leaderboard</b> <span style="font-size:11px;color:#718096">solve flag per team (dari halaman submit publik)</span></div>
<a href="/submit" target="_blank" class="primary" style="text-decoration:none;padding:8px 14px;border-radius:8px">🚩 Halaman Submit Team →</a>
</div>
<table style="width:100%;border-collapse:collapse;margin-top:10px;font-size:13px">
<thead><tr style="color:#718096;text-align:left"><th style="padding:6px">#</th><th>Tim</th><th>Solved</th><th>Challenges</th></tr></thead>
<tbody id="lbBody"></tbody>
</table>
</div>
</div>
<!-- Logs view -->
<div class="view" id="view-logs">
<div class="card" style="margin-bottom:16px">
<div class="team-head">
<div><b style="color:#5ad1ff">Log Server</b> <span style="font-size:11px;color:#718096">docker logs per team/service</span></div>
<div style="display:flex;gap:8px;align-items:center">
<select id="logTeam" style="width:130px"></select>
<select id="logService" style="width:150px">
<option value="">semua service</option>
<option>blogpost</option><option>carbeat</option><option>cdn</option>
<option>phew</option><option>sheesh</option><option>warmup</option>
</select>
<button class="primary" onclick="loadLogs()">Muat</button>
</div>
</div>
</div>
<div class="history-box" id="logsBox" style="max-height:70vh">Pilih team & service…</div>
</div>
<!-- Creds view -->
<div class="view" id="view-creds">
<div class="grid" id="credsGrid"></div>
</div>
<div class="footer-note">Receiver: https://gemastik.imrnes.team · Panel: https://panel.gemastik.imrnes.team · Auto-refresh tiap 15 detik</div>
<!-- modal flag -->
<div class="modal-back" id="modalFlag">
@@ -122,13 +205,13 @@
</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>
<!-- modal team creds -->
<div class="modal-back" id="modalTeamCred">
<div class="modal" style="width:520px">
<h2 id="mtcTitle">Kredensial Team</h2>
<div id="mtcBody" style="font-size:12px;color:#dbe6f4;line-height:1.9"></div>
<div class="btn-row" style="justify-content:flex-end;margin-top:14px">
<button onclick="closeModal('modalHist')">Tutup</button>
<button onclick="closeModal('modalTeamCred')">Tutup</button>
</div>
</div>
</div>
@@ -157,6 +240,12 @@ function esc(s) {
return (s||'').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}
function showView(v) {
document.querySelectorAll('.tab').forEach(b => b.classList.toggle('active', b.dataset.view === v));
document.querySelectorAll('.view').forEach(x => x.classList.toggle('active', x.id === 'view-' + v));
}
// ---------- Challenges ----------
async function refresh() {
const grid = document.getElementById('grid');
try {
@@ -186,7 +275,6 @@ async function refresh() {
<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>`;
@@ -230,7 +318,8 @@ 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));
const sshPort = {blogpost:10022, carbeat:11022, cdn:12022, phew:13022, sheesh:14022, warmup:15022}[ch] || 10022;
const cmd = `ssh ctfuser@${ch}.gemastik.imrnes.team -p ${sshPort}`;
document.getElementById('mcBody').innerHTML =
`<div>User: <b>ctfuser</b></div>
<div>Pass: <b>${esc(c.password)}</b></div>
@@ -240,23 +329,250 @@ async function viewCred(ch) {
} catch (e) { toast(e.message, true); }
}
async function openHist() {
// ---------- Topology ----------
let topoLoaded = false;
async function loadTopo() {
try {
const d = await api('/api/history');
document.getElementById('mhBody').textContent = d.lines.join('\n') || '(belum ada log)';
document.getElementById('modalHist').classList.add('open');
const d = await api('/api/topology');
renderTopo(d.nodes, d.edges);
} catch (e) { toast('Topologi gagal: ' + e.message, true); }
}
function renderTopo(nodes, edges) {
const svg = document.getElementById('topoSvg');
const W = Math.max(900, nodes.length * 130);
const H = 400;
svg.setAttribute('width', W); svg.setAttribute('height', H);
const cx = W / 2;
const ns = {};
nodes.forEach(n => { ns[n.id] = n; });
// layout: panel/infra top center, teams in circle, challenges below each team
const pos = {};
pos['dns'] = {x: cx, y: 30};
pos['traefik'] = {x: cx, y: 100};
pos['panel'] = {x: cx - 140, y: 100};
const teams = nodes.filter(n => n.type === 'team');
const teamPos = {};
teams.forEach((t, i) => {
const ang = (i / Math.max(1, teams.length)) * Math.PI * 2 - Math.PI / 2;
const rx = W * 0.36, ry = 100;
const tx = cx + rx * Math.cos(ang);
const ty = 210 + ry * Math.sin(ang) * 0.6;
teamPos[t.index] = {x: tx, y: ty};
pos[t.id] = {x: tx, y: ty};
});
nodes.filter(n => n.type === 'challenge').forEach(n => {
const ti = n.id.split('-')[0].replace('team','');
const base = teamPos[ti] || {x: cx, y: 250};
const chIdx = ['blogpost','carbeat','cdn','phew','sheesh','warmup'].indexOf(n.label.split('-').pop() || n.label);
pos[n.id] = {x: base.x + (chIdx - 2.5) * 70, y: base.y + 110};
});
// edges
let html = '';
edges.forEach(e => {
const a = pos[e.from], b = pos[e.to];
if (!a || !b) return;
html += `<line x1="${a.x}" y1="${a.y}" x2="${b.x}" y2="${b.y}" stroke="#2a4a6f" stroke-width="1.5" stroke-dasharray="4 3"/>`;
if (e.label) {
const mx = (a.x + b.x) / 2, my = (a.y + b.y) / 2 - 6;
html += `<text x="${mx}" y="${my}" fill="#5a7a9f" font-size="9" text-anchor="middle">${e.label}</text>`;
}
});
// nodes
nodes.forEach(n => {
const p = pos[n.id];
if (!p) return;
let fill = '#0e1526', stroke = '#2a4a6f', color = '#a8c3e0', r = 34;
if (n.type === 'panel') { fill = '#0ea5e933'; stroke = '#0ea5e9'; color = '#7dd3fc'; r = 42; }
if (n.type === 'infra') { r = 30; color = '#8aa0b8'; }
if (n.type === 'team') { fill = '#2563eb22'; stroke = '#3b82f6'; color = '#93c5fd'; r = 48; }
if (n.type === 'challenge') { r = 26; color = '#c9d4e3'; }
const status = n.status === 'running' ? ' fill="#34d399"' : '';
const sub = n.type === 'team' ? `:${n.receiver_port}` : (n.port ? `:${n.port}` : '');
html += `<g>
<circle cx="${p.x}" cy="${p.y}" r="${r}" fill="${fill}" stroke="${stroke}" stroke-width="1.5"/>
<circle cx="${p.x}" cy="${p.y}" r="${r-4}" fill="none" stroke="${stroke}" stroke-opacity="0.3"/>
<text x="${p.x}" y="${p.y - (sub ? 0 : 4)}" fill="${color}" font-size="${n.type==='team'?12:10}" font-weight="bold" text-anchor="middle">${esc(n.label)}</text>
${sub ? `<text x="${p.x}" y="${p.y + 12}" fill="#5a7a9f" font-size="9" text-anchor="middle">${sub}</text>` : ''}
${status ? `<circle cx="${p.x + r - 8}" cy="${p.y - r + 8}" r="5" fill="#34d399"/>` : ''}
</g>`;
});
svg.innerHTML = `<defs><marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#2a4a6f"/></marker></defs>` + html;
}
// ---------- Teams ----------
async function loadTeams() {
try {
const d = await api('/api/teams');
document.getElementById('teamCount').value = d.teams.length;
loadLeaderboard();
const grid = document.getElementById('teamsGrid');
if (!d.teams.length) { grid.innerHTML = '<div class="card"><span style="color:#718096">Belum ada team. Set jumlah team untuk auto-create.</span></div>'; return; }
let html = '';
for (const t of d.teams) {
const alive = t.status === 'running';
html += `<div class="card ${alive ? '' : 'dead'}">
<div class="team-head">
<span class="ch-name">${esc(t.label || ('Team ' + t.index))}</span>
<span class="status ${alive ? 'up' : 'down'}">${alive ? '● RUNNING' : '● STOPPED'}</span>
</div>
<div class="kv">
<b>Receiver</b><span>${t.ports.receiver}</span>
<b>Admin</b><span>${esc(t.admin_user)}</span>
<b>SSH user</b><span>ctfuser</span>
<b>Status</b><span>${esc(t.status)}</span>
</div>
<div class="btn-row">
<button class="primary" onclick="startTeam(${t.index})">▶ Start</button>
<button class="danger" onclick="stopTeam(${t.index})">⏹ Stop</button>
<button onclick="viewTeamCred(${t.index})">🔑 SSH & Pass</button>
<button onclick="openTeamLogs(${t.index})">📜 Logs</button>
<button onclick="randomizeTeam(${t.index})">🎲 Randomize Flag</button>
</div>
</div>`;
}
grid.innerHTML = html;
} catch (e) { toast('Teams gagal: ' + e.message, true); }
}
async function setTeams() {
const n = parseInt(document.getElementById('teamCount').value || '0', 10);
try {
const d = await api('/api/teams/set', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({count: n})});
toast(`Team dibuat: ${d.created.join(', ') || 'tidak ada yang baru'} · total ${d.total}`, false);
loadTeams();
} catch (e) { toast(e.message, true); }
}
async function startTeam(idx) {
try { await api('/api/teams/start', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({index: idx})}); toast(`Team ${idx} start (build bisa makan waktu)`, false); setTimeout(loadTeams, 3000); }
catch (e) { toast(e.message, true); }
}
async function stopTeam(idx) {
try { await api('/api/teams/stop', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({index: idx})}); toast(`Team ${idx} stop`, false); loadTeams(); }
catch (e) { toast(e.message, true); }
}
async function startAllTeams() {
try { const d = await api('/api/teams/start', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({})}); toast(`Start semua: ${d.results.filter(r=>r.ok).length}/${d.results.length} ok`, false); setTimeout(loadTeams, 4000); }
catch (e) { toast(e.message, true); }
}
async function stopAllTeams() {
try { const d = await api('/api/teams/stop', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({})}); toast(`Stop semua: ${d.results.filter(r=>r.ok).length}/${d.results.length} ok`, false); loadTeams(); }
catch (e) { toast(e.message, true); }
}
async function randomizeTeam(idx) {
if (!confirm(`Randomize SEMUA flag untuk Team ${idx}? Container akan di-recreate.`)) return;
try {
const d = await api(`/api/teams/${idx}/randomize`, {method:'POST'});
const flags = Object.values(d.flags || {}).join('\n');
toast(`Flag Team ${idx} di-randomize!`, false);
console.log('NEW FLAGS team', idx, flags);
setTimeout(loadTeams, 4000);
} catch (e) { toast(e.message, true); }
}
async function loadLeaderboard() {
try {
const d = await api('/api/leaderboard');
const body = document.getElementById('lbBody');
if (!body) return;
if (!d.teams.length) { body.innerHTML = '<tr><td colspan="4" style="color:#718096">Belum ada solve.</td></tr>'; return; }
body.innerHTML = d.teams.map((t,i) => `<tr>
<td>${i+1}</td><td>${esc(t.name)}</td><td>${t.solves}</td>
<td>${t.challs.map(c=>`<span class="chip">${esc(c)}</span>`).join('')}</td>
</tr>`).join('');
} catch (e) {}
}
setInterval(loadLeaderboard, 15000);
async function viewTeamCred(idx) {
try {
const t = await api(`/api/teams/${idx}/creds`);
let html = `<div class="kv">
<b>Label</b><span>${esc(t.team.label || ('Team ' + idx))}</span>
<b>Admin receiver</b><span>${esc(t.team.admin_user)} / ${esc(t.team.admin_pass)}</span>
<b>Receiver port</b><span>${esc(t.team.ports.receiver)}</span>
<b>SSH user</b><span>ctfuser</span>
<b>SSH pass</b><span>${esc(t.team.ssh_pass)}</span>
</div><div style="margin-top:10px"><b style="color:#5ad1ff">Per-challenge SSH:</b></div>`;
for (const [name, p] of Object.entries(t.team.ports)) {
if (name === 'receiver' || name === 'panel') continue;
html += `<div class="kv" style="margin-top:6px">
<b>${name}</b><span>ssh ctfuser@${name}.gemastik.imrnes.team -p ${p.ssh} &nbsp;·&nbsp; pass: ${esc(t.team.chall_passwords[name])}</span>
</div>`;
}
document.getElementById('mtcTitle').textContent = `Kredensial Team ${idx}`;
document.getElementById('mtcBody').innerHTML = html;
document.getElementById('modalTeamCred').classList.add('open');
} catch (e) { toast(e.message, true); }
}
function openTeamLogs(idx) {
document.getElementById('logTeam').value = idx;
showView('logs'); loadLogs();
}
// ---------- Logs ----------
async function loadLogs() {
const idx = document.getElementById('logTeam').value;
const svc = document.getElementById('logService').value;
await populateLogTeams();
if (!idx) { document.getElementById('logsBox').textContent = 'Pilih team dulu.'; return; }
try {
const d = await api(`/api/teams/${idx}/logs` + (svc ? `?service=${svc}` : '') + '&tail=200');
let out = '';
for (const [name, log] of Object.entries(d.logs)) {
out += `\n━━━ ${name} (team ${idx}) ━━━\n${log}\n`;
}
document.getElementById('logsBox').textContent = out || '(kosong)';
} catch (e) { document.getElementById('logsBox').textContent = 'Error: ' + e.message; }
}
async function populateLogTeams() {
try {
const d = await api('/api/teams');
const sel = document.getElementById('logTeam');
if (sel.options.length === 0 || sel.value === '') {
sel.innerHTML = d.teams.map(t => `<option value="${t.index}">Team ${t.index}</option>`).join('');
}
} catch (e) {}
}
// ---------- Creds ----------
async function loadCreds() {
try {
const d = await api('/api/teams');
const grid = document.getElementById('credsGrid');
if (!d.teams.length) { grid.innerHTML = '<div class="card"><span style="color:#718096">Belum ada team.</span></div>'; return; }
let html = '';
for (const t of d.teams) {
html += `<div class="card">
<div class="team-head">
<span class="ch-name">${esc(t.label || ('Team ' + t.index))}</span>
<button style="font-size:11px" onclick="viewTeamCred(${t.index})">Lihat Semua</button>
</div>
<div class="kv">
<b>Admin</b><span>${esc(t.admin_user)} / ${esc(t.admin_pass)}</span>
<b>SSH</b><span>ctfuser / ${esc(t.ssh_pass)}</span>
</div>
</div>`;
}
grid.innerHTML = html;
} catch (e) { toast(e.message, true); }
}
// ---------- misc ----------
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'); });
['modalFlag','modalCred','modalTeamCred'].forEach(id => {
document.getElementById(id).addEventListener('click', e => { if (e.target === e.currentTarget) closeModal(id); });
});
function tick() {
document.getElementById('clock').textContent = new Date().toLocaleTimeString('id-ID');
panel/static/submit.html
+131
View File
@@ -0,0 +1,131 @@
<!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 — Submit Flag</title>
<style>
:root { --bg:#0b0e14; --panel:#151a23; --panel2:#1d2430; --line:#2a3444; --txt:#e6edf3; --dim:#8b98a9; --accent:#38bdf8; --green:#34d399; --red:#f87171; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--txt); font-family:'Segoe UI',system-ui,sans-serif; min-height:100vh; }
.wrap { max-width:860px; margin:0 auto; padding:24px 16px 60px; }
header { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.logo { width:42px; height:42px; border-radius:10px; background:linear-gradient(135deg,#38bdf8,#6366f1); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; color:#fff; }
h1 { font-size:22px; }
.sub { color:var(--dim); font-size:13px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:16px; }
.card h2 { font-size:15px; margin-bottom:12px; color:var(--accent); }
label { display:block; font-size:12px; color:var(--dim); margin:12px 0 5px; }
select, input { width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line); background:var(--panel2); color:var(--txt); font-size:14px; }
button { margin-top:16px; width:100%; padding:12px; border:none; border-radius:8px; background:linear-gradient(135deg,#38bdf8,#6366f1); color:#fff; font-weight:600; font-size:15px; cursor:pointer; }
button:hover { filter:brightness(1.1); }
#result { margin-top:14px; padding:12px; border-radius:8px; display:none; font-size:14px; }
#result.ok { display:block; background:#06352a; border:1px solid var(--green); color:var(--green); }
#result.err { display:block; background:#3a1414; border:1px solid var(--red); color:var(--red); }
.lb-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; }
.lb-row { display:flex; justify-content:space-between; align-items:center; padding:10px 4px; border-bottom:1px solid var(--line); }
.lb-row:last-child { border-bottom:none; }
.lb-rank { font-weight:700; color:var(--accent); width:36px; }
.lb-name { flex:1; }
.lb-count { font-weight:600; }
table { width:100%; border-collapse:collapse; margin-top:8px; font-size:13px; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); }
th { color:var(--dim); font-weight:500; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.chip { background:var(--panel2); border:1px solid var(--line); border-radius:20px; padding:3px 10px; font-size:11px; color:var(--dim); }
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="logo">G</div>
<div>
<h1>Gemastik XVIII — Attack &amp; Defense</h1>
<div class="sub">Submit flag untuk tim kamu. Server: gemastik.imrnes.team</div>
</div>
</header>
<div class="card">
<h2>🚩 Submit Flag</h2>
<label>Tim kamu</label>
<select id="team"><option value="">— pilih tim —</option></select>
<label>Challenge</label>
<select id="challenge">
<option value="blogpost">blogpost (web)</option>
<option value="carbeat">carbeat (pwn)</option>
<option value="cdn">cdn (web)</option>
<option value="phew">phew (crypto)</option>
<option value="sheesh">sheesh (crypto)</option>
<option value="warmup">warmup</option>
</select>
<label>Flag</label>
<input id="flag" placeholder="GEMASTIK18{...}" autocomplete="off">
<button onclick="submitFlag()">Submit Flag</button>
<div id="result"></div>
</div>
<div class="lb-card">
<h2>🏆 Leaderboard</h2>
<table>
<thead><tr><th>#</th><th>Tim</th><th>Solved</th><th>Challenges</th></tr></thead>
<tbody id="lb-body"><tr><td colspan="4" style="color:var(--dim)">Belum ada solve.</td></tr></tbody>
</table>
</div>
</div>
<script>
async function api(url, opts) {
const r = await fetch(url, opts);
return r.json();
}
async function loadTeams() {
const d = await api('/api/public/teams');
const sel = document.getElementById('team');
d.teams.forEach(t => {
const o = document.createElement('option');
o.value = t.index; o.textContent = t.label;
sel.appendChild(o);
});
}
async function loadLeaderboard() {
const d = await api('/api/leaderboard');
const body = document.getElementById('lb-body');
const rows = d.teams.map((t, i) => `
<tr>
<td>${i + 1}</td>
<td>${esc(t.name)}</td>
<td>${t.solves}</td>
<td><div class="chips">${t.challs.map(c => `<span class="chip">${esc(c)}</span>`).join('')}</div></td>
</tr>`).join('');
body.innerHTML = rows || '<tr><td colspan="4" style="color:var(--dim)">Belum ada solve.</td></tr>';
}
function esc(s) {
return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}
async function submitFlag() {
const res = document.getElementById('result');
res.className = '';
const body = {
team: parseInt(document.getElementById('team').value || '0', 10),
challenge: document.getElementById('challenge').value,
flag: document.getElementById('flag').value.trim(),
};
const d = await api('/api/flag/submit', {
method: 'POST', headers: {'Content-Type': 'application/json'},
body: JSON.stringify(body),
});
if (d.success) {
res.className = 'ok';
res.innerHTML = '✅ Flag <b>benar</b>! Solve tercatat untuk tim kamu.';
loadLeaderboard();
} else {
res.className = 'err';
res.innerHTML = '❌ ' + esc(d.error || 'Gagal submit');
}
}
loadTeams();
loadLeaderboard();
setInterval(loadLeaderboard, 15000);
</script>
</body>
</html>