Add admin panel HTML (login + ghost/set management)

2026-06-03 09:59:37 +10:00
parent bc8acba4e4
commit fa3712d189
1 changed files with 83 additions and 0 deletions
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Hidden Spectre — Admin</title>
+  <link href="https://fonts.googleapis.com/css2?family=Bungee&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="/css/admin.css" />
+</head>
+<body>
+  <!-- LOGIN -->
+  <section id="login-view" class="view active">
+    <div class="login-card">
+      <h1>SPECTRE <span>ADMIN</span></h1>
+      <p class="sub">Control room — ghosts &amp; set recognition</p>
+      <input id="username" type="text" placeholder="Username" autocomplete="username" />
+      <input id="password" type="password" placeholder="Password" autocomplete="current-password" />
+      <button id="login-btn">SIGN IN</button>
+      <p id="login-error" class="error"></p>
+    </div>
+  </section>
+
+  <!-- DASHBOARD -->
+  <section id="dash-view" class="view">
+    <header class="topbar">
+      <h1>SPECTRE <span>ADMIN</span></h1>
+      <div class="topbar-right">
+        <span id="whoami"></span>
+        <button id="logout-btn" class="ghost-btn">Log out</button>
+      </div>
+    </header>
+
+    <nav class="tabs">
+      <button class="tab active" data-tab="ghosts">Ghosts</button>
+      <button class="tab" data-tab="sets">Sets &amp; QR</button>
+    </nav>
+
+    <!-- GHOSTS TAB -->
+    <div id="tab-ghosts" class="tab-panel active">
+      <div class="panel">
+        <h2>Add a ghost</h2>
+        <div class="form-row">
+          <input id="g-name" placeholder="Name (e.g. Graveyard Wisp)" />
+          <select id="g-rarity">
+            <option value="common">common</option>
+            <option value="rare">rare</option>
+            <option value="legendary">legendary</option>
+          </select>
+          <input id="g-scale" type="number" step="0.1" min="0.2" max="5" value="1.0" title="Billboard scale" />
+        </div>
+        <div class="form-row">
+          <input id="g-file" type="file" accept="image/gif,image/png,image/webp" />
+          <button id="g-add">Upload ghost</button>
+        </div>
+        <p class="hint">Animated GIF recommended (transparent background works best). Max 8 MB.</p>
+      </div>
+
+      <div id="ghost-grid" class="grid"></div>
+    </div>
+
+    <!-- SETS TAB -->
+    <div id="tab-sets" class="tab-panel">
+      <div class="panel">
+        <h2>Add a set</h2>
+        <div class="form-row">
+          <input id="s-code" placeholder="QR code payload (e.g. SET-GRAVEYARD)" />
+          <input id="s-title" placeholder="Title (e.g. Graveyard Mystery)" />
+        </div>
+        <div class="form-row">
+          <label class="lbl">Ghosts this set unlocks:</label>
+        </div>
+        <div id="s-ghost-picker" class="picker"></div>
+        <button id="s-add">Create set</button>
+        <p class="hint">Players scan a QR code containing the payload string to unlock that set's ghosts. Generate the QR from the payload with any QR tool.</p>
+      </div>
+
+      <div id="set-list" class="list"></div>
+    </div>
+  </section>
+
+  <script src="/js/admin.js"></script>
+</body>
+</html>