Lumen/theme-preview.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#f6f9f7" />
    <title>Lumen — theme preview</title>
    <link rel="stylesheet" href="./src/app/styles.css" />
    <style>
      .stat-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.25rem;
        padding: 0.75rem 0;
        font-weight: 700;
        font-size: 0.9375rem;
      }
      .stat-row span {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
      }
      .stat-row i {
        width: 18px;
        height: 18px;
        border-radius: 5px;
        background: var(--fg);
        display: inline-block;
      }
      .row {
        display: flex;
        align-items: center;
        gap: 0.875rem;
        padding: 0.875rem 1rem;
        border-bottom: 1px solid var(--border);
      }
      .row:last-child {
        border-bottom: 0;
      }
      .row .dot {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--accent-soft);
        border: 1px solid var(--border-accent);
        flex: none;
      }
      .row .txt {
        flex: 1;
        min-width: 0;
      }
      .row .txt b {
        display: block;
      }
      .row .txt small {
        color: var(--muted);
      }
      .row .time {
        font-weight: 700;
        white-space: nowrap;
      }
      .banner {
        background: var(--accent-soft);
        border-radius: 12px;
        padding: 0.75rem 1rem;
        font-weight: 600;
        color: var(--fg);
        margin: 0.75rem 0;
      }
      .topbar {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-bottom: 0.75rem;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <a class="skip-link" href="#main-content">Skip to content</a>
      <header class="app-header" role="banner">
        <a class="app-header__brand app-header__brand--back" href="/">LUMEN</a>
        <div class="app-header__status" role="status" aria-live="polite">Live</div>
      </header>
      <main id="main-content" class="app-main" tabindex="-1">
        <h1>Schedule</h1>
        <div class="topbar">
          <span class="chip chip--pink">● Live — 12:04</span>
          <span class="chip chip--green">Synced</span>
          <span class="chip chip--blue">3.2 km away</span>
          <span class="chip chip--indigo">Indigo wash</span>
          <span class="chip chip--amber">Amber wash</span>
        </div>
        <div class="status-card">
          <b>Festival status</b>
          <p style="margin: 0.25rem 0 0; color: var(--muted)">
            Gates open 10:00 · Main stage show 21:30 · No red alerts
          </p>
        </div>
        <div class="stat-row">
          <span><i></i> 148 acts</span>
          <span><i></i> 6 stages</span>
          <span><i></i> 2.1k on site</span>
        </div>
        <div class="view-placeholder" style="padding: 0; overflow: hidden">
          <div class="row">
            <div class="dot"></div>
            <div class="txt">
              <b>Headliners — Main Stage</b><small>21:30–23:59 · 320 m NE</small>
            </div>
            <span class="time">21:30</span>
          </div>
          <div class="row">
            <div class="dot"></div>
            <div class="txt"><b>Forest Session</b><small>19:00–20:30 · 900 m W</small></div>
            <span class="time">19:00</span>
          </div>
          <div class="row">
            <div class="dot"></div>
            <div class="txt">
              <b>Afterglow — Chill Zone</b><small>23:00–01:00 · 1.4 km S</small>
            </div>
            <span class="time">23:00</span>
          </div>
          <div class="banner">Next favorite: Headliners in 4 h 42 min</div>
        </div>
        <div class="emergency-view">
          <section>
            <h2>Emergency</h2>
            <div class="emergency-alert">
              <h2>Alert banner styling</h2>
              <p class="emergency-service">Red stays red in both themes.</p>
              <a class="emergency-call" href="tel:112">112</a>
            </div>
          </section>
        </div>
      </main>
      <nav class="side-nav" aria-label="Primary navigation" role="navigation">
        <a class="side-nav__link" href="/">Home</a>
        <a class="side-nav__link" href="/schedule">Schedule</a>
        <a class="side-nav__link" href="/map">Map</a>
        <a class="side-nav__link" href="/festival">Information</a>
        <a class="side-nav__link side-nav__link--emergency" href="/emergency" aria-current="page"
          >Emergency</a
        >
      </nav>
    </div>
  </body>
</html>