Add heatpump compressor cycle analysis web app

Static page that plots Home Assistant on/off history of the heatpump
compressor with pan/zoom, per-phase hover durations and statistics
(min/max/mean/median, total on-time, duty cycle) for the visible range.
English/German UI. Served by nginx in Docker with basic auth, CSP and
a healthcheck; Plotly is vendored locally.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

html/index.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Heatpump Cycles</title>
+<link rel="stylesheet" href="style.css">
+<script src="vendor/plotly.min.js" defer></script>
+<script src="vendor/plotly-locale-de.js" defer></script>
+<script src="i18n.js" defer></script>
+<script src="app.js" defer></script>
+</head>
+<body>
+<main>
+  <header>
+    <h1 data-i18n="title">Heatpump compressor cycles</h1>
+    <div class="header-right">
+      <span class="sub" id="source" data-i18n="loading">loading…</span>
+      <div class="lang" role="group" aria-label="Language">
+        <button type="button" data-lang="en">EN</button>
+        <button type="button" data-lang="de">DE</button>
+      </div>
+    </div>
+  </header>
+
+  <h2 data-i18n="dataHeading">Data</h2>
+  <div class="tiles" id="dataTiles"></div>
+
+  <div class="controls">
+    <button type="button" data-span="6">6 h</button>
+    <button type="button" data-span="24">24 h</button>
+    <button type="button" data-span="72">3 d</button>
+    <button type="button" data-span="168">7 d</button>
+    <button type="button" data-span="all" data-i18n="all">All</button>
+    <label class="file"><span data-i18n="loadCsv">Load CSV…</span> <input type="file" id="file" accept=".csv,text/csv"></label>
+    <span class="range" id="range"></span>
+  </div>
+
+  <div class="card"><div id="chart"></div></div>
+
+  <h2 data-i18n="rangeHeading">Selected range</h2>
+  <div class="tiles" id="tiles"></div>
+
+  <details>
+    <summary data-i18n="phaseList">On-phases in selected range</summary>
+    <table>
+      <thead><tr>
+        <th>#</th><th data-i18n="start">Start</th><th data-i18n="end">End</th>
+        <th class="num" data-i18n="duration">Duration</th><th class="num" data-i18n="gapBefore">Gap before</th>
+      </tr></thead>
+      <tbody id="rows"></tbody>
+    </table>
+  </details>
+  <p class="note" data-i18n="note"></p>
+</main>
+</body>
+</html>