ohmu/dev/nutikodu-web/static/index.html

<!DOCTYPE html>
<html lang="et" data-theme="light">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <meta name="theme-color" content="#1f6feb" id="meta-theme" />
  <meta name="robots" content="noindex" />
  <title>Nutikodu — andurid</title>
  <link rel="icon" href="/icon.svg" type="image/svg+xml" />
  <link rel="manifest" href="/manifest.webmanifest" />
  <link rel="apple-touch-icon" href="/icon.svg" />
  <link rel="stylesheet" href="/style.css" />
</head>
<body>
  <header>
    <div class="brand">
      <span class="logo" aria-hidden="true">🏠</span>
      <div>
        <h1>Nutikodu</h1>
        <div class="sub" id="subtitle">Zigbee andurid</div>
      </div>
    </div>
    <div class="header-actions">
      <span class="status" id="status" title="Ühenduse olek"></span>
      <a id="auth-link" class="icon-btn" href="/login" title="Sisselogimine" style="text-decoration:none">🔒</a>
      <button id="theme-toggle" class="icon-btn" title="Vaheta teema" aria-label="Vaheta teema">🌙</button>
    </div>
  </header>

  <main>
    <nav class="tabs" id="tabs" aria-label="Vahelehed">
      <button type="button" class="tab active" data-view="andurid">🏠 Andurid</button>
      <button type="button" class="tab" data-view="transport">🚌 Transport</button>
      <button type="button" class="tab" data-view="varv">🎨 Värv</button>
    </nav>

    <div id="view-andurid" class="view">
      <section class="cards" id="cards"></section>

      <section class="panel">
        <div class="controls">
          <div class="presets" id="presets">
            <button type="button" data-days="1">24 h</button>
            <button type="button" data-days="7" class="active">7 p</button>
            <button type="button" data-days="30">30 p</button>
            <button type="button" data-days="90">90 p</button>
            <button type="button" data-days="365">1 a</button>
            <button type="button" data-days="all">Kõik</button>
          </div>
          <div class="custom-range">
            <label>Algus<input type="datetime-local" id="from" /></label>
            <label>Lõpp<input type="datetime-local" id="to" /></label>
            <button type="button" id="apply" class="btn">Kuva</button>
          </div>
          <div class="toggles">
            <label class="chk"><input type="checkbox" id="show-temp" checked /> <span>Temperatuur</span></label>
            <label class="chk"><input type="checkbox" id="show-hum" checked /> <span>Niiskus</span></label>
            <label class="chk"><input type="checkbox" id="show-out" checked /> <span>Väli</span></label>
            <div class="seg" id="agg">
              <button type="button" data-agg="hour" class="active">Tund</button>
              <button type="button" data-agg="day">Päev</button>
            </div>
          </div>
        </div>
        <div id="chart" aria-label="Temperatuuri ja niiskuse ajatelg"></div>
        <div id="hint" class="hint" hidden></div>
      </section>

      <div id="protected" hidden>
        <section class="cards" id="cards-uus67"></section>

        <section class="panel">
          <h2 class="panel-title">⚡ Energia (pistikud)</h2>
          <div id="chart-energy" aria-label="Energia ajatelg" style="height:300px"></div>
          <div id="hint-energy" class="hint" hidden></div>
        </section>

        <section class="panel">
          <h2 class="panel-title">🚶 Liikumine / kohalolu</h2>
          <div id="chart-motion" aria-label="Liikumise ajatelg" style="height:220px"></div>
          <div id="hint-motion" class="hint" hidden></div>
        </section>
      </div>

      <footer class="foot">
        <span id="range-label"></span>
      </footer>
    </div>

    <div id="view-transport" class="view" hidden>
      <section class="panel">
        <h2 class="panel-title">🚌 Suuremõisa küla — bussid</h2>
        <div id="bus-list" class="dep-list"></div>
        <div id="bus-hint" class="hint" hidden></div>
      </section>

      <section class="panel">
        <div class="panel-head">
          <h2 class="panel-title">🚢 Heltermaa – Rohuküla</h2>
          <div class="seg" id="praam-days">
            <button type="button" data-days="1" class="active">Täna</button>
            <button type="button" data-days="2">Täna + homme</button>
          </div>
        </div>
        <div id="praam-warning" class="warn-banner" hidden></div>
        <div id="praam-list" class="dep-list"></div>
        <div id="praam-hint" class="hint" hidden></div>
      </section>

      <footer class="foot">
        <span id="transport-updated"></span>
      </footer>
    </div>

    <div id="view-varv" class="view" hidden>
      <section class="panel" id="varv-power" hidden>
        <div class="varv-power-row">
          <h2 class="panel-title" style="margin:0">🔌 Värvusemõõtja</h2>
          <span id="varv-power-status" class="badge muted">—</span>
          <div class="varv-power-btns">
            <button type="button" id="varv-on" class="btn">Lülita sisse</button>
            <button type="button" id="varv-off" class="btn">Lülita välja</button>
          </div>
        </div>
        <div id="varv-power-hint" class="hint" hidden></div>
      </section>

      <section class="panel" id="varv-calib-panel" hidden>
        <div class="varv-power-row">
          <h2 class="panel-title" style="margin:0">🎯 Kalibreerimine</h2>
          <span id="varv-calib-status" class="badge muted">—</span>
          <div class="varv-power-btns">
            <button type="button" id="varv-calib-dark" class="btn">Salvesta tume</button>
            <button type="button" id="varv-calib-white" class="btn">Salvesta valge</button>
          </div>
        </div>
        <div class="varv-sub" style="margin-top:8px">
          1) Kata andur → „Salvesta tume". 2) Pane valge pind sama valgustusega → „Salvesta valge".
          Oota ~30 s, kuni mõõtmine stabiliseerub.
        </div>
        <div id="varv-calib-live" class="varv-sub" style="margin-top:4px"></div>
        <label class="chk" style="margin-top:10px;display:inline-flex">
          <input type="checkbox" id="varv-calib-view" /> <span id="varv-calib-view-label">Kuva kalibreeritud värvi</span>
        </label>
        <div id="varv-calib-hint" class="hint" hidden></div>
      </section>

      <section class="panel">
        <div class="varv-current">
          <div id="varv-current-swatch" class="varv-current-swatch"></div>
          <div class="varv-current-info">
            <div class="varv-hex" id="varv-hex">#------</div>
            <div class="varv-meta" id="varv-current-meta">Laadin…</div>
          </div>
        </div>
      </section>

      <section class="panel">
        <h2 class="panel-title">🎨 Viimased mõõtmised</h2>
        <div id="varv-grid" class="swatch-grid"></div>
        <div id="varv-hint" class="hint" hidden></div>
      </section>

      <section class="panel">
        <h2 class="panel-title">📊 Spekter <span class="varv-sub" id="varv-spectrum-label"></span></h2>
        <div id="chart-varv-spectrum" style="height:280px" aria-label="Kanali spekter"></div>
      </section>

      <section class="panel">
        <h2 class="panel-title">🕓 Värvitelg (viimased 24 h)</h2>
        <div id="varv-timeline" class="swatch-timeline"></div>
      </section>

      <section class="panel">
        <h2 class="panel-title">🧭 Kromaatilisus (x, y)</h2>
        <div id="chart-varv-chroma" style="height:340px" aria-label="Kromaatilisuse hajuvus"></div>
      </section>

      <footer class="foot">
        <span id="varv-updated"></span>
      </footer>
    </div>
  </main>

  <script src="/vendor/echarts.min.js"></script>
  <script src="/app.js"></script>

  <!-- HyperDX Browser Integration: session replays + RUM (vt LOEMIND) -->
  <script src="https://unpkg.com/@hyperdx/browser@0.26.0/build/index.js"></script>
  <script>
    if (window.HyperDX) {
      HyperDX.init({
        apiKey: '02a19ecf-f62e-4e17-819f-3ee1498d69f3',
        service: 'nutikodu-web',
        url: 'https://otel.odamus.com',
        consoleCapture: true,
        advancedNetworkCapture: true,
        maskAllInputs: true,
        maskAllText: true,
      });
    }
  </script>
</body>
</html>