training-load-dataviz / index.html
glutamatt's picture
glutamatt HF Staff
nice
f63ce21 verified
raw
history blame
3.08 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Training Load Data Visualization</title>
<link rel="stylesheet" href="/src/style.css">
</head>
<body>
<div id="app">
<header>
<h1>Training Load Data Visualization</h1>
</header>
<main>
<section id="upload-section">
<h2>Upload Garmin Activities CSV</h2>
<div class="upload-container">
<div class="ftp-input-container">
<label for="ftp-input">
Functional Threshold Power (FTP)
</label>
<input type="number" id="ftp-input" value="343" min="0" step="1" placeholder="343" />
<span class="ftp-unit">Watts</span>
</div>
<input type="file" id="csv-upload" accept=".csv" />
<label for="csv-upload" class="upload-label">
Choose CSV File
</label>
<div id="upload-status"></div>
</div>
</section>
<section id="filter-section" class="hidden">
<div class="filter-container" id="filter-container">
<!-- Activity type filters will be dynamically generated here -->
</div>
</section>
<section id="charts-section" class="hidden">
<div class="chart-container">
<h2>๐Ÿ—บ๏ธ Distance-based ACWR</h2>
<canvas id="distance-chart"></canvas>
</div>
<div class="chart-container">
<h2>โฑ๏ธ Duration-based ACWR</h2>
<canvas id="duration-chart"></canvas>
</div>
<div class="chart-container">
<h2>๐Ÿ”‹ TSS-based ACWR</h2>
<canvas id="tss-chart"></canvas>
</div>
<div class="legend">
<div class="legend-item">
<span class="legend-color low"></span>
<span>ACWR &lt; 0.8 - Detraining risk</span>
</div>
<div class="legend-item">
<span class="legend-color optimal"></span>
<span>ACWR 0.8 - 1.3 - Optimal</span>
</div>
<div class="legend-item">
<span class="legend-color warning"></span>
<span>ACWR 1.3 - 1.5 - Warning</span>
</div>
<div class="legend-item">
<span class="legend-color high"></span>
<span>ACWR &gt; 1.5 - Injury risk</span>
</div>
</div>
</section>
</main>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>