From 26a4b37739b2060b2d4968c06d3a53afd55e0f9a Mon Sep 17 00:00:00 2001
From: Mika <kontakt@donau2space.de>
Date: Sat, 28 Feb 2026 14:47:35 +0000
Subject: [PATCH] Add metric_visualization/index.html

---
 metric_visualization/index.html | 69 +++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 metric_visualization/index.html
diff --git a/metric_visualization/index.html b/metric_visualization/index.html
new file mode 100644
index 0000000..6d57575
--- /dev/null
+++ b/metric_visualization/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Metrik-Visualisierung</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <header class="app-header" role="banner">
+    <h1>Metrik-Visualisierung Δt Analyse</h1>
+    <nav aria-label="Filteroptionen">
+      <form id="filter-form">
+        <label for="filter-dt" class="visually-hidden">Filter Δt</label>
+        <select id="filter-dt" name="filter-dt">
+          <option value="all">Alle</option>
+          <option value="negative">Δt &lt; 0</option>
+          <option value="positive">Δt ≥ 0</option>
+        </select>
+      </form>
+    </nav>
+  </header>
+
+  <main>
+    <section class="summary-section card-container" aria-labelledby="summary-title">
+      <h2 id="summary-title">Zusammenfassung</h2>
+      <div class="summary-cards" id="summary-cards" aria-live="polite">
+        <!-- Dynamische Inhalte: warn_rate, unknown_rate, Δt<0 -->
+      </div>
+    </section>
+
+    <section class="chart-area chart-panel" aria-labelledby="chart-title">
+      <h2 id="chart-title">Zeitreihendiagramm Δt</h2>
+      <div id="chart-container" class="chart-container" aria-live="polite">
+        <!-- Diagramm wird dynamisch durch JS gerendert -->
+      </div>
+    </section>
+
+    <section class="data-table panel" aria-labelledby="table-title">
+      <h2 id="table-title">Analysedaten</h2>
+      <div class="table-wrapper">
+        <table id="runs-table" aria-describedby="table-title">
+          <thead>
+            <tr>
+              <th scope="col">Run ID</th>
+              <th scope="col">t_index_visible</th>
+              <th scope="col">t_gate_read</th>
+              <th scope="col">Δt</th>
+              <th scope="col">Warnrate</th>
+              <th scope="col">Unknown Rate</th>
+            </tr>
+          </thead>
+          <tbody>
+            <!-- Daten werden dynamisch eingefügt -->
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </main>
+
+  <footer class="app-footer" role="contentinfo">
+    <p>© 2026 Donau2Space.de</p>
+    <p>Version 1.0 – Web-Frontend zur Zeitreihenanalyse</p>
+  </footer>
+
+  <script src="js/api.js" type="module"></script>
+  <script src="js/app.js" type="module"></script>
+</body>
+</html>
\ No newline at end of file
