jessikitty/hidden-spectre-server
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jessikitty
2026-06-03 09:59:37 +10:00
parent bc8acba4e4
commit fa3712d189
1 changed files with 83 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin/index.html
+83
View File
@@ -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>