Spaces:
Running
Running
| <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 < 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 > 1.5 - Injury risk</span> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <script type="module" src="/src/main.ts"></script> | |
| </body> | |
| </html> |