Seven more palettes: Midnight (indigo, violet), Moss (forest floor, lime), Plum (aubergine, purple), Sepia (warm brown with a cool teal — Ember's arrangement reversed), Blackout (true black for a dark room, where any glow off the screen carries), Paper (the warm light one, next to Daylight's cool white) and Iron, which has no colour of its own: its accent is near-white, so the only hues on screen are a module's own and the red and amber that mean something. Each holds the line the first five set. Text on panel lands between 14.8:1 and 19.8:1, muted between 5.8:1 and 7.4:1, and every accent clears its own theme's danger red and warning amber by more than Ember already does — the narrowest of the new ones is Moss at 54 degrees of hue, against Ember's 18. The Theme section now starts folded, wearing the same disclosure triangle as a module's config groups. A building picks its palette once and then wants the rest of the page, which was getting further down the screen with every swatch. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
111 lines
4.6 KiB
HTML
111 lines
4.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>ProdDash Admin</title>
|
|
<meta name="theme-color" content="#0b0e12">
|
|
<link rel="icon" href="/icons/icon-192.png">
|
|
<link rel="stylesheet" href="/style.css">
|
|
<link rel="stylesheet" href="/admin/admin.css">
|
|
</head>
|
|
<body>
|
|
<header id="topbar">
|
|
<span id="brand">Prod<span class="accent">Dash</span> <span class="admin-tag">Admin</span> <span class="admin-version" id="shell-version"></span></span>
|
|
<span class="spacer"></span>
|
|
<a class="tb-btn" href="/">← Dashboard</a>
|
|
</header>
|
|
|
|
<main id="admin-main">
|
|
<section class="admin-card" id="login-card" hidden>
|
|
<h2>Admin PIN</h2>
|
|
<p class="admin-copy">This page changes the server-wide configuration for every dashboard in the building.</p>
|
|
<div class="login-row">
|
|
<input type="password" id="passcode" class="pin-input" inputmode="numeric" autocomplete="off"
|
|
maxlength="6" placeholder="••••••" aria-label="Admin PIN">
|
|
<button class="btn primary" id="login-btn">Unlock</button>
|
|
</div>
|
|
<div class="admin-status" id="login-status"></div>
|
|
</section>
|
|
|
|
<section class="admin-card update-card" id="update-card" hidden>
|
|
<div class="update-head">
|
|
<span class="dot connecting"></span>
|
|
<strong id="update-title">Update available</strong>
|
|
<span class="spacer"></span>
|
|
<a class="btn small" id="update-changes" href="#" target="_blank" rel="noopener">What changed</a>
|
|
<button class="btn small primary" id="update-btn">Update now</button>
|
|
</div>
|
|
<p class="admin-copy" id="update-copy"></p>
|
|
<div class="admin-status" id="update-status"></div>
|
|
</section>
|
|
|
|
<section id="theme-section" hidden>
|
|
<details class="admin-fold">
|
|
<summary class="admin-h1 admin-fold-title">Theme</summary>
|
|
<div class="theme-swatches" id="theme-swatches" role="radiogroup" aria-label="Theme"></div>
|
|
<div class="admin-status" id="theme-status"></div>
|
|
</details>
|
|
</section>
|
|
|
|
<section id="modules-section" hidden>
|
|
<h1 class="admin-h1">Modules</h1>
|
|
<p class="admin-copy admin-storage" id="storage-note" hidden>Saved on the server at
|
|
<code id="storage-path"></code> — outside the app folder, so updating ProdDash keeps them.</p>
|
|
<div id="modules-list"></div>
|
|
</section>
|
|
|
|
<section id="available-section" hidden>
|
|
<h1 class="admin-h1">Available modules</h1>
|
|
<div class="catalog-toolbar">
|
|
<button class="btn small" id="catalog-refresh">Check again</button>
|
|
<span class="admin-status" id="catalog-status"></span>
|
|
</div>
|
|
<div id="available-list"></div>
|
|
</section>
|
|
|
|
<section id="layouts-section" hidden>
|
|
<h1 class="admin-h1">Saved layouts</h1>
|
|
<div id="layouts-list"></div>
|
|
</section>
|
|
|
|
<section id="security-section" hidden>
|
|
<h1 class="admin-h1">Admin PIN</h1>
|
|
<p class="admin-copy" id="pin-state"></p>
|
|
<div class="admin-card">
|
|
<div class="pin-form">
|
|
<label class="pin-field" id="pin-current-field" hidden>
|
|
<span>Current PIN</span>
|
|
<input type="password" id="pin-current" class="pin-input" inputmode="numeric"
|
|
autocomplete="off" maxlength="6" placeholder="••••••">
|
|
</label>
|
|
<label class="pin-field">
|
|
<span id="pin-new-label">New PIN</span>
|
|
<input type="password" id="pin-new" class="pin-input" inputmode="numeric"
|
|
autocomplete="off" maxlength="6" placeholder="6 digits">
|
|
</label>
|
|
<label class="pin-field">
|
|
<span>Repeat</span>
|
|
<input type="password" id="pin-repeat" class="pin-input" inputmode="numeric"
|
|
autocomplete="off" maxlength="6" placeholder="6 digits">
|
|
</label>
|
|
<div class="pin-actions">
|
|
<button class="btn primary" id="pin-save">Set PIN</button>
|
|
<button class="btn" id="pin-clear" hidden>Turn off</button>
|
|
</div>
|
|
</div>
|
|
<p class="admin-copy pin-note">Only this page and the admin API ask for it — dashboards stay
|
|
open, and it is nothing to do with a module's own PIN, such as Slack's send PIN. Forgotten?
|
|
Remove <code>adminPin</code> from <code id="pin-file">proddash.json</code> in the settings
|
|
folder and restart.</p>
|
|
<div class="admin-status" id="pin-status"></div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="toast" hidden></div>
|
|
|
|
<script type="module" src="/admin/admin.js"></script>
|
|
</body>
|
|
</html>
|