From 2323f886aabfdb3c2433341476ea16a4fefe0009 Mon Sep 17 00:00:00 2001
From: Mika <kontakt@donau2space.de>
Date: Sat, 24 Jan 2026 12:03:25 +0000
Subject: [PATCH] Add visualization_tool/index.html

---
 visualization_tool/index.html | 57 +++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 visualization_tool/index.html
diff --git a/visualization_tool/index.html b/visualization_tool/index.html
new file mode 100644
index 0000000..3d426f4
--- /dev/null
+++ b/visualization_tool/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Frozen Runs Analyse</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <div class="app-shell">
+    <header class="app-header" role="banner">
+      <h1>Frozen Runs Metrik-Visualisierung</h1>
+      <div class="filter-controls" role="region" aria-label="Filtersteuerung">
+        <label for="filter-select">Filter:</label>
+        <select id="filter-select" name="filter">
+          <option value="all">Alle</option>
+          <option value="pinned">Pinned</option>
+          <option value="unpinned">Unpinned</option>
+        </select>
+        <button id="apply-filter" type="button">Übernehmen</button>
+      </div>
+    </header>
+
+    <main class="app-main metrics-dashboard" role="main">
+      <section class="charts-section" aria-label="Visualisierung der Bootstrap-Verteilungen">
+        <!-- Dynamisch generierte Diagramme werden hier eingefügt -->
+        <div id="charts-container" class="charts-container"></div>
+      </section>
+
+      <section class="metrics-table" aria-label="Tabelle der Metriken">
+        <!-- Tabelle mit Effektgrößen und Konfidenzintervallen -->
+        <table id="metrics-table" class="table" aria-describedby="metrics-description">
+          <thead>
+            <tr>
+              <th scope="col">Metrik</th>
+              <th scope="col">Run-ID</th>
+              <th scope="col">Pinned</th>
+              <th scope="col">Effektgröße</th>
+              <th scope="col">CI (95%)</th>
+            </tr>
+          </thead>
+          <tbody>
+            <!-- Dynamisch befüllt über JS -->
+          </tbody>
+        </table>
+        <p id="metrics-description" class="visually-hidden">Tabelle der Metriken mit Effektgrößen und Konfidenzintervallen</p>
+      </section>
+    </main>
+
+    <footer class="app-footer" role="contentinfo">
+      <p>© 2026 Donau2Space.de</p>
+    </footer>
+  </div>
+
+  <script type="module" src="js/app.js"></script>
+</body>
+</html>
\ No newline at end of file
