index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Training Dashboard</title>
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32.png">
<link rel="apple-touch-icon" href="assets/apple-touch-icon.png">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<script>
(function () {
  var saved = localStorage.getItem("td:theme");
  if (saved === "light") document.documentElement.setAttribute("data-theme", "light");
})();
</script>
<div class="layout">
<aside class="side-nav">
  <div class="side-nav-brand">Training Dashboard</div>
  <nav class="side-nav-pages">
    <a href="index.html" class="active">Dashboard</a>
    <a href="exercises.html">PT &amp; Prehab Reference</a>
    <a href="workouts.html">Workout Files</a>
    <a href="trends.html">Trends</a>
  </nav>
  <nav class="side-nav-sections">
    <div class="side-nav-sections-label">On this page</div>
    <a href="#week-detail">This week</a>
    <a href="#coach-notes">Coach notes</a>
    <a href="#retro-panel">Last week</a>
    <a href="#chart-mileage-panel">Weekly mileage</a>
    <a href="#chart-hrv-panel">HRV &amp; RHR</a>
    <a href="#chart-load-panel">Training load</a>
    <a href="#race-log-panel">Race log</a>
    <a href="#pace-zones-panel">Pace zones</a>
    <a href="#race-strategy-panel">Race day</a>
  </nav>
</aside>
<div class="wrap">

  <div class="sticky-header">
    <nav class="site-nav">
      <a href="index.html" class="active">Dashboard</a>
      <a href="exercises.html">PT &amp; Prehab Reference</a>
      <a href="workouts.html">Workout Files</a>
      <a href="trends.html">Trends</a>
    </nav>

    <header class="page-header">
      <div class="page-header-text">
        <div class="eyebrow" id="eyebrow">LOADING</div>
        <h1 id="page-title">Training Dashboard</h1>
        <div class="header-meta" id="header-meta"></div>
      </div>
      <div class="header-controls">
        <div class="theme-toggle" id="theme-toggle">
          <button type="button" data-theme-choice="dark">Dark</button>
          <button type="button" data-theme-choice="light">Light</button>
        </div>
        <button type="button" id="sign-out" class="btn-signout" title="Sign out">Sign out</button>
      </div>
    </header>
  </div>

  <section class="kpi-strip kpi-strip-primary" id="kpi-primary"></section>
  <section class="kpi-strip kpi-strip-secondary" id="kpi-secondary"></section>

  <section class="panel week-nav-panel" id="week-nav-panel">
    <div class="week-nav" id="week-nav"></div>
  </section>

  <section class="panel week-detail" id="week-detail"></section>

  <section class="panel coach-notes" id="coach-notes"></section>

  <section class="panel" id="retro-panel"></section>

  <section class="panel chart-panel" id="chart-mileage-panel">
    <div class="panel-subheader">
      <div class="panel-kicker">TRENDS</div>
      <h2>Weekly mileage</h2>
      <p class="panel-sub">Planned vs. actual, by week. Actual comes from your uploaded Garmin activities.</p>
    </div>
    <div class="chart-legend" id="chart-mileage-legend"></div>
    <canvas id="chart-mileage" height="90"></canvas>
  </section>

  <section class="panel chart-panel" id="chart-hrv-panel">
    <div class="panel-subheader">
      <div class="panel-kicker">TRENDS</div>
      <h2>HRV &amp; resting heart rate</h2>
      <p class="panel-sub">Daily readings from Garmin Coach data. Watch the trend, not the daily noise.</p>
    </div>
    <div class="chart-legend" id="chart-hrv-legend"></div>
    <canvas id="chart-hrv" height="90"></canvas>
  </section>

  <section class="panel chart-panel" id="chart-load-panel">
    <div class="panel-subheader">
      <div class="panel-kicker">TRENDS</div>
      <h2>Training load (ATL / CTL / ACWR)</h2>
      <p class="panel-sub">Acute vs. chronic training load. ACWR above ~1.3 is when injury risk climbs.</p>
    </div>
    <div class="chart-legend" id="chart-load-legend"></div>
    <canvas id="chart-load" height="90"></canvas>
  </section>

  <section class="panel" id="race-log-panel"></section>

  <section class="panel" id="pace-zones-panel"></section>

  <section class="panel" id="race-strategy-panel"></section>

  <footer class="page-footer">
    Built from Garmin FIT exports + Garmin Coach data. Plan defined in <code>scripts/build_plan.py</code>,
    actuals updated via <code>scripts/parse_garmin.py</code>.
  </footer>

</div>
</div>

<script src="assets/js/vendor/chart.umd.js"></script>
<script src="assets/js/weather.js"></script>
<script type="module" src="assets/js/firebase-auth.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>