index.html 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <html lang="et" data-theme="light">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  6. <meta name="theme-color" content="#1f6feb" id="meta-theme" />
  7. <meta name="robots" content="noindex" />
  8. <title>Nutikodu — andurid</title>
  9. <link rel="icon" href="/icon.svg" type="image/svg+xml" />
  10. <link rel="manifest" href="/manifest.webmanifest" />
  11. <link rel="apple-touch-icon" href="/icon.svg" />
  12. <link rel="stylesheet" href="/style.css" />
  13. </head>
  14. <body>
  15. <header>
  16. <div class="brand">
  17. <span class="logo" aria-hidden="true">🏠</span>
  18. <div>
  19. <h1>Nutikodu</h1>
  20. <div class="sub" id="subtitle">Zigbee andurid</div>
  21. </div>
  22. </div>
  23. <div class="header-actions">
  24. <span class="status" id="status" title="Ühenduse olek"></span>
  25. <button id="theme-toggle" class="icon-btn" title="Vaheta teema" aria-label="Vaheta teema">🌙</button>
  26. </div>
  27. </header>
  28. <main>
  29. <section class="cards" id="cards"></section>
  30. <section class="panel">
  31. <div class="controls">
  32. <div class="presets" id="presets">
  33. <button type="button" data-days="1">24 h</button>
  34. <button type="button" data-days="7" class="active">7 p</button>
  35. <button type="button" data-days="30">30 p</button>
  36. <button type="button" data-days="90">90 p</button>
  37. <button type="button" data-days="365">1 a</button>
  38. <button type="button" data-days="all">Kõik</button>
  39. </div>
  40. <div class="custom-range">
  41. <label>Algus<input type="datetime-local" id="from" /></label>
  42. <label>Lõpp<input type="datetime-local" id="to" /></label>
  43. <button type="button" id="apply" class="btn">Kuva</button>
  44. </div>
  45. <div class="toggles">
  46. <label class="chk"><input type="checkbox" id="show-temp" checked /> <span>Temperatuur</span></label>
  47. <label class="chk"><input type="checkbox" id="show-hum" checked /> <span>Niiskus</span></label>
  48. <label class="chk"><input type="checkbox" id="show-out" checked /> <span>Väli</span></label>
  49. <div class="seg" id="agg">
  50. <button type="button" data-agg="hour" class="active">Tund</button>
  51. <button type="button" data-agg="day">Päev</button>
  52. </div>
  53. </div>
  54. </div>
  55. <div id="chart" aria-label="Temperatuuri ja niiskuse ajatelg"></div>
  56. <div id="hint" class="hint" hidden></div>
  57. </section>
  58. <footer class="foot">
  59. <span id="range-label"></span>
  60. </footer>
  61. </main>
  62. <script src="/vendor/echarts.min.js"></script>
  63. <script src="/app.js"></script>
  64. <!-- HyperDX Browser Integration: session replays + RUM (vt LOEMIND) -->
  65. <script src="https://unpkg.com/@hyperdx/browser@0.26.0/build/index.js"></script>
  66. <script>
  67. if (window.HyperDX) {
  68. HyperDX.init({
  69. apiKey: '02a19ecf-f62e-4e17-819f-3ee1498d69f3',
  70. service: 'nutikodu-web',
  71. url: 'https://otel.odamus.com',
  72. consoleCapture: true,
  73. advancedNetworkCapture: true,
  74. maskAllInputs: true,
  75. maskAllText: true,
  76. });
  77. }
  78. </script>
  79. </body>
  80. </html>