ProdDash/public/admin/index.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>
      <h1 class="admin-h1">Theme</h1>
      <div class="theme-swatches" id="theme-swatches" role="radiogroup" aria-label="Theme"></div>
      <div class="admin-status" id="theme-status"></div>
    </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>
        <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>