📄 wwwroot/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>BFI Monitor</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="layout">
      <header class="header">
        <div class="header__brand">
          <span class="header__mark" aria-hidden="true">β–Ά</span>
          <div>
            <h1>BFI Monitor</h1>
            <p class="header__subtitle">Screening change tracker</p>
          </div>
        </div>
        <div class="header__actions">
          <div class="header__status" id="live-status">
            <span class="pulse"></span>
            <span>Loading…</span>
          </div>
          <button type="button" class="btn btn--ghost" id="open-settings-btn">Settings</button>
        </div>
      </header>

      <section class="cards" id="status-cards" aria-label="Monitor status"></section>

      <section class="panel">
        <div class="panel__head">
          <h2>Monitorings</h2>
          <div class="panel__actions">
            <label class="toggle">
              <input type="checkbox" id="show-archived" />
              Show archived
            </label>
            <button type="button" class="btn" id="trigger-all-btn">Scan all</button>
            <button type="button" class="btn btn--primary" id="add-monitoring-btn">Add monitoring</button>
          </div>
        </div>
        <div id="monitorings-empty" class="empty hidden">
          <p>No active monitorings yet.</p>
          <p class="empty__hint">Add a URL and CSS selector to start watching for changes.</p>
        </div>
        <ul class="monitoring-list" id="monitoring-list"></ul>
      </section>

      <main class="panel">
        <div class="panel__head">
          <h2 id="detections-title">Detections</h2>
          <button type="button" class="btn" id="refresh-btn">Refresh</button>
        </div>
        <div id="detections-empty" class="empty hidden">
          <p>No changes detected yet.</p>
          <p class="empty__hint">The checker runs on a schedule and records HTML when a monitored page updates.</p>
        </div>
        <ul class="detection-list" id="detection-list"></ul>
      </main>

      <dialog class="dialog" id="add-dialog">
        <form method="dialog" id="add-form">
          <div class="dialog__head">
            <h2>Add monitoring</h2>
            <button type="button" class="btn btn--ghost" id="close-add-dialog" aria-label="Close">βœ•</button>
          </div>
          <label class="field">
            <span>Name <small>(optional)</small></span>
            <input type="text" id="add-name" placeholder="Odyssey IMAX" autocomplete="off" />
          </label>
          <label class="field">
            <span>URL</span>
            <input type="url" id="add-url" required placeholder="https://..." autocomplete="off" />
          </label>
          <label class="field">
            <span>CSS selector</span>
            <input type="text" id="add-selector" required placeholder=".detailed-search-results" autocomplete="off" />
          </label>
          <label class="field">
            <span>SMS recipients</span>
            <small>One phone number per line. Leave blank to use defaults.</small>
            <textarea id="add-phones" rows="3" placeholder="+46701234567"></textarea>
          </label>
          <p class="form-error hidden" id="add-error"></p>
          <div class="dialog__actions">
            <button type="button" class="btn btn--ghost" id="cancel-add-dialog">Cancel</button>
            <button type="submit" class="btn btn--primary">Add monitoring</button>
          </div>
        </form>
      </dialog>

      <dialog class="dialog" id="edit-dialog">
        <form method="dialog" id="edit-form">
          <div class="dialog__head">
            <h2>Edit monitoring</h2>
            <button type="button" class="btn btn--ghost" id="close-edit-dialog" aria-label="Close">βœ•</button>
          </div>
          <label class="field">
            <span>Name <small>(optional)</small></span>
            <input type="text" id="edit-name" placeholder="Odyssey IMAX" autocomplete="off" />
          </label>
          <label class="field">
            <span>URL</span>
            <input type="url" id="edit-url" required placeholder="https://..." autocomplete="off" />
          </label>
          <label class="field">
            <span>CSS selector</span>
            <input type="text" id="edit-selector" required placeholder=".detailed-search-results" autocomplete="off" />
          </label>
          <label class="field">
            <span>SMS recipients</span>
            <small>One phone number per line.</small>
            <textarea id="edit-phones" rows="3" placeholder="+46701234567"></textarea>
          </label>
          <p class="form-error hidden" id="edit-error"></p>
          <div class="dialog__actions">
            <button type="button" class="btn btn--ghost" id="cancel-edit-dialog">Cancel</button>
            <button type="submit" class="btn btn--primary">Save changes</button>
          </div>
        </form>
      </dialog>

      <dialog class="dialog" id="settings-dialog">
        <form id="settings-form">
          <div class="dialog__head">
            <h2>Settings</h2>
            <button type="button" class="btn btn--ghost" id="close-settings-dialog" aria-label="Close">βœ•</button>
          </div>
          <label class="field field--compact">
            <span>Check interval (seconds)</span>
            <input type="number" id="settings-interval" min="60" step="60" required />
          </label>
          <label class="field">
            <span>Default SMS recipients</span>
            <small>One phone number per line. Pre-filled when adding new monitorings.</small>
            <textarea id="settings-default-phones" rows="3" placeholder="+46701234567"></textarea>
          </label>
          <p class="form-error hidden" id="settings-error"></p>
          <div class="dialog__actions">
            <button type="button" class="btn btn--ghost" id="cancel-settings-dialog">Cancel</button>
            <button type="submit" class="btn btn--primary" id="save-settings-btn">Save</button>
          </div>
        </form>
      </dialog>

      <aside class="drawer hidden" id="detail-drawer" aria-hidden="true">
        <div class="drawer__head">
          <h2 id="drawer-title">Detection</h2>
          <button type="button" class="btn btn--ghost" id="close-drawer" aria-label="Close">βœ•</button>
        </div>
        <p class="drawer__meta" id="drawer-meta"></p>
        <div class="drawer__preview" id="drawer-preview"></div>
      </aside>
      <div class="backdrop hidden" id="drawer-backdrop"></div>
    </div>
    <script src="app.js"></script>
  </body>
</html>