From f3c450092aed596b3c4da74549133bca8349439c Mon Sep 17 00:00:00 2001
From: jessikitty <jess.rogerson.29@outlook.com>
Date: Wed, 17 Jun 2026 16:38:05 +1000
Subject: [PATCH] Add admin panel page

---
 public/admin.html | 147 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 147 insertions(+)
 create mode 100644 public/admin.html
diff --git a/public/admin.html b/public/admin.html
new file mode 100644
index 0000000..ae6bb1b
--- /dev/null
+++ b/public/admin.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Newbury Nights — Admin</title>
+  <link rel="stylesheet" href="/css/app.css" />
+  <link rel="stylesheet" href="/css/admin.css" />
+</head>
+<body>
+  <!-- Login -->
+  <div id="login" class="login-wrap">
+    <div class="login-card">
+      <h1 class="login-title">Newbury<span>Nights</span></h1>
+      <div class="login-sub mono">ADMIN CONSOLE</div>
+      <label for="lg-user">Username</label>
+      <input id="lg-user" autocomplete="username" />
+      <label for="lg-pass">Password</label>
+      <input id="lg-pass" type="password" autocomplete="current-password" />
+      <button class="primary" id="lg-go" style="width:100%;margin-top:14px">Sign in</button>
+      <div id="lg-error" class="lg-error hidden"></div>
+    </div>
+  </div>
+
+  <!-- App -->
+  <div id="app" class="hidden">
+    <header class="topbar">
+      <div class="brand">Newbury<span>Nights</span> <span class="badge mono">ADMIN</span></div>
+      <nav class="tabs">
+        <button class="tab active" data-tab="ghosts">Ghosts</button>
+        <button class="tab" data-tab="sets">Sets</button>
+        <button class="tab" data-tab="account">Account</button>
+      </nav>
+      <button id="logout" class="small">Sign out</button>
+    </header>
+
+    <!-- GHOSTS -->
+    <section id="tab-ghosts" class="tab-panel">
+      <div class="panel-head">
+        <h2>Ghosts</h2>
+        <div class="head-actions">
+          <input id="ghost-search" placeholder="Search name / ability…" style="width:220px" />
+          <button class="primary" id="new-ghost">+ New ghost</button>
+        </div>
+      </div>
+      <div class="table-wrap">
+        <table id="ghosts-table">
+          <thead>
+            <tr><th></th><th>Name / Display</th><th>Type</th><th>Rarity</th><th>HP</th><th>DMG</th><th>Ability</th><th>Set</th><th>On</th><th></th></tr>
+          </thead>
+          <tbody></tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- SETS -->
+    <section id="tab-sets" class="tab-panel hidden">
+      <div class="panel-head">
+        <h2>Sets</h2>
+        <button class="primary" id="new-set">+ New set</button>
+      </div>
+      <div id="sets-list" class="sets-list"></div>
+    </section>
+
+    <!-- ACCOUNT -->
+    <section id="tab-account" class="tab-panel hidden">
+      <div class="panel-head"><h2>Account</h2></div>
+      <div class="account-card">
+        <p class="muted">Signed in as <strong id="acct-user">—</strong>. Change your password below.</p>
+        <label>Current password</label><input id="cp-current" type="password" />
+        <label>New password (min 8 chars)</label><input id="cp-new" type="password" />
+        <button class="primary" id="cp-go" style="margin-top:12px">Update password</button>
+        <div id="cp-msg" class="cp-msg hidden"></div>
+      </div>
+    </section>
+  </div>
+
+  <!-- Ghost editor modal -->
+  <div id="ghost-modal" class="modal hidden">
+    <div class="modal-card">
+      <h3 id="gm-title">Edit ghost</h3>
+      <div class="grid2">
+        <div><label>Name</label><input id="gm-name" /></div>
+        <div><label>Display name (lock-on label)</label><input id="gm-display" /></div>
+        <div><label>Type</label>
+          <select id="gm-type"><option value="red">Red</option><option value="yellow">Yellow</option><option value="blue">Blue</option></select>
+        </div>
+        <div><label>Rarity (1–4)</label><input id="gm-rarity" type="number" min="1" max="4" /></div>
+        <div><label>Health</label><input id="gm-health" type="number" /></div>
+        <div><label>Damage</label><input id="gm-damage" type="number" /></div>
+        <div><label>Speed (0–5)</label><input id="gm-speed" type="number" min="0" max="5" /></div>
+        <div><label>Range (0–5)</label><input id="gm-range" type="number" min="0" max="5" /></div>
+        <div><label>Charge shot (0–3)</label><input id="gm-charge" type="number" min="0" max="3" /></div>
+        <div><label>Ability</label><input id="gm-ability" /></div>
+        <div><label>Set number (ref)</label><input id="gm-setnum" /></div>
+        <div><label>Set name (ref)</label><input id="gm-setname" /></div>
+      </div>
+      <div class="checks">
+        <label class="chk"><input type="checkbox" id="gm-boss" /> Boss ghost</label>
+        <label class="chk"><input type="checkbox" id="gm-enabled" checked /> Enabled</label>
+      </div>
+      <div class="image-row">
+        <label>Billboard image (GIF / PNG)</label>
+        <div class="row">
+          <input id="gm-file" type="file" accept=".gif,.png,.jpg,.jpeg,.webp" />
+          <img id="gm-preview" class="gm-preview hidden" alt="" />
+        </div>
+        <div class="muted" style="font-size:11px;margin-top:4px">Upload happens after you save the ghost.</div>
+      </div>
+      <div class="modal-actions">
+        <button data-close>Cancel</button>
+        <button class="primary" id="gm-save">Save</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Set editor modal -->
+  <div id="set-modal" class="modal hidden">
+    <div class="modal-card">
+      <h3 id="sm-title">Edit set</h3>
+      <div class="grid2">
+        <div><label>Scan code (QR payload)</label><input id="sm-code" placeholder="NN-70419" /></div>
+        <div><label>Set number (ref)</label><input id="sm-setnum" /></div>
+        <div><label>Set name</label><input id="sm-setname" /></div>
+        <div><label>Boss ghost</label><select id="sm-boss"><option value="">— none —</option></select></div>
+      </div>
+      <label class="chk"><input type="checkbox" id="sm-enabled" checked /> Enabled</label>
+      <div class="roster-pick">
+        <label>Roster (ghosts returned on scan)</label>
+        <input id="sm-roster-search" placeholder="Filter ghosts…" />
+        <div id="sm-roster" class="roster-checklist"></div>
+      </div>
+      <div class="modal-actions">
+        <button data-close>Cancel</button>
+        <button class="primary" id="sm-save">Save set</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="disclaimer">
+    Fan-made tribute. Not affiliated with, sponsored by, or endorsed by the LEGO Group.
+    LEGO® and Hidden Side™ are trademarks of the LEGO Group.
+  </div>
+
+  <script type="module" src="/js/admin.js"></script>
+</body>
+</html>
