📄 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__status" id="live-status">
          <span class="pulse"></span>
          <span>Loading…</span>
        </div>
      </header>

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

      <main class="panel">
        <div class="panel__head">
          <h2>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 the monitored page updates.</p>
        </div>
        <ul class="detection-list" id="detection-list"></ul>
      </main>

      <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>