53 lines
No EOL
1.8 KiB
HTML
53 lines
No EOL
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Resonanzband Heatmap Analyse</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<script type="module" src="js/app.js" defer></script>
|
||
</head>
|
||
<body>
|
||
<header class="app-header" role="banner">
|
||
<h1>Resonanzband-Heatmap Analyse</h1>
|
||
</header>
|
||
|
||
<section class="app-controls" aria-label="Steuerbereich">
|
||
<form id="filter-form">
|
||
<label for="cohort-select">Kohorte:</label>
|
||
<select id="cohort-select" name="cohort_id" aria-label="Kohorten-Auswahl">
|
||
<option value="">Alle</option>
|
||
</select>
|
||
|
||
<label for="time-window">Zeitfenster:</label>
|
||
<input type="range" id="time-window" name="time_window" min="0" max="100" step="1" aria-label="Zeitfenster-Steuerung">
|
||
|
||
<button type="submit">Aktualisieren</button>
|
||
</form>
|
||
</section>
|
||
|
||
<main class="heatmap-area" role="main" aria-live="polite">
|
||
<canvas id="heatmap-canvas" width="800" height="400" aria-label="Resonanzband-Heatmap"></canvas>
|
||
</main>
|
||
|
||
<aside class="heatmap-legend" aria-label="Farbskala und Legende">
|
||
<h2>Legende</h2>
|
||
<div class="legend-scale">
|
||
<div class="legend-gradient" aria-hidden="true"></div>
|
||
<ul class="legend-values">
|
||
<li>Min</li>
|
||
<li>Max</li>
|
||
</ul>
|
||
</div>
|
||
<div class="legend-metrics">
|
||
<p><strong>band_center</strong>: <span id="metric-band-center">-</span></p>
|
||
<p><strong>band_width</strong>: <span id="metric-band-width">-</span></p>
|
||
<p><strong>cluster_score</strong>: <span id="metric-cluster-score">-</span></p>
|
||
</div>
|
||
</aside>
|
||
|
||
<footer class="app-footer" role="contentinfo">
|
||
<p>© 2026 Donau2Space.de – Experimentelle Resonanzbandanalyse</p>
|
||
</footer>
|
||
</body>
|
||
</html> |