Mini HTML-Editor

meineapp.html Öffnen

🔗 Link 🖼 Bild 🎨 Farbcode 📋 Liste (ul/li) 🃏 Karte (div) ⚡ Javascript-Block

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <title>Trainingsplan-Rechner</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    :root {
      --bg: #f5f5f7;
      --bg-elevated: #ffffff;
      --text: #111827;
      --text-muted: #6b7280;
      --border: #e5e7eb;
      --accent: #34c759;
      --accent-soft: rgba(52, 199, 89, 0.12);
      --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.08);
      --radius-lg: 18px;
      --radius-md: 12px;
      --radius-sm: 8px;
      --transition-fast: 0.18s ease-out;
    }

[data-theme="dark"] {
      --bg: #050816;
      --bg-elevated: #0b1120;
      --text: #e5e7eb;
      --text-muted: #9ca3af;
      --border: #1f2937;
      --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.7);
    }

* {
      box-sizing: border-box;
    }

body {
      margin: 0;
      min-height: 100vh;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
      display: flex;
      justify-content: center;
      padding: 24px 12px 32px;
      transition: background var(--transition-fast), color var(--transition-fast);
    }

.app {
      width: 100%;
      max-width: 1200px;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr);
      gap: 24px;
      align-items: flex-start;
    }

@media (max-width: 960px) {
      .app {
        grid-template-columns: minmax(0, 1fr);
      }
    }

.card {
      background: var(--bg-elevated);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft);
      padding: 22px 22px 24px;
      position: relative;
      overflow: hidden;
    }

.card::before {
      content: "";
      position: absolute;
      inset: -40%;
      background:
        radial-gradient(circle at 0% 0%, rgba(52, 199, 89, 0.12) 0, transparent 55%),
        radial-gradient(circle at 100% 0%, rgba(10, 132, 255, 0.12) 0, transparent 55%);
      opacity: 0.9;
      pointer-events: none;
      mix-blend-mode: screen;
    }

.card-inner {
      position: relative;
      z-index: 1;
    }

.header {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: flex-start;
      margin-bottom: 18px;
    }

.title-block {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

h1 {
      margin: 0;
      font-size: 1.6rem;
      letter-spacing: 0.01em;
      display: flex;
      align-items: center;
      gap: 8px;
    }

.badge {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-muted);
    }

.subtitle {
      margin: 0;
      font-size: 0.9rem;
      color: var(--text-muted);
    }

.pill-row {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

.pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.08);
      border: 1px solid rgba(148, 163, 184, 0.35);
      font-size: 0.75rem;
      color: var(--text-muted);
      white-space: nowrap;
    }

.pill-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.25);
    }

.theme-toggle {
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.5);
      background: rgba(15, 23, 42, 0.03);
      padding: 3px 8px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      cursor: pointer;
      color: var(--text-muted);
    }

.theme-toggle span.icon {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.12);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
    }

.form-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
      margin-top: 10px;
    }

.field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

label {
      font-size: 0.8rem;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }

label span.icon {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.12);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
    }

select,
    input[type="number"] {
      border-radius: var(--radius-md);
      border: 1px solid rgba(148, 163, 184, 0.5);
      background: rgba(255, 255, 255, 0.9);
      color: var(--text);
      padding: 9px 11px;
      font-size: 0.9rem;
      outline: none;
      transition: border-color var(--transition-fast),
        box-shadow var(--transition-fast), background var(--transition-fast),
        transform 0.08s ease-out;
      appearance: none;
    }

[data-theme="dark"] select,
    [data-theme="dark"] input[type="number"] {
      background: rgba(15, 23, 42, 0.95);
    }

select:focus,
    input[type="number"]:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px rgba(52, 199, 89, 0.5);
      transform: translateY(-1px);
    }

.hint {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

.actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 16px;
      flex-wrap: wrap;
    }

.btn-primary {
      border: none;
      border-radius: 999px;
      padding: 10px 18px;
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      background: linear-gradient(135deg, #34c759, #2bb24f);
      color: #022c22;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 12px 30px rgba(52, 199, 89, 0.35);
      transition: transform 0.12s ease, box-shadow 0.12s ease,
        filter 0.12s ease;
    }

.btn-primary span.icon {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: rgba(22, 163, 74, 0.2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
    }

.btn-primary:hover {
      transform: translateY(-1px);
      filter: brightness(1.03);
      box-shadow: 0 16px 40px rgba(52, 199, 89, 0.45);
    }

.btn-primary:active {
      transform: translateY(0);
      box-shadow: 0 8px 20px rgba(52, 199, 89, 0.35);
    }

.small-note {
      font-size: 0.75rem;
      color: var(--text-muted);
      max-width: 260px;
    }

.error {
      margin-top: 10px;
      font-size: 0.8rem;
      color: #ef4444;
    }

/* Plan-Card */

.plan-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 14px;
    }

.plan-title-block {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

.plan-title-block h2 {
      margin: 0;
      font-size: 1.25rem;
    }

.plan-meta {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

.plan-meta strong {
      color: var(--text);
      font-weight: 500;
    }

.week-tabs {
      display: inline-flex;
      padding: 3px;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.12);
      border: 1px solid rgba(148, 163, 184, 0.35);
      gap: 3px;
    }

.week-tab {
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 0.75rem;
      cursor: pointer;
      border: none;
      background: transparent;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background var(--transition-fast), color var(--transition-fast),
        transform 0.08s ease-out;
    }

.week-tab span.dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.8);
    }

.week-tab.active {
      background: #ffffff;
      color: #111827;
      transform: translateY(-1px);
    }

[data-theme="dark"] .week-tab.active {
      background: #111827;
      color: #e5e7eb;
    }

.week-tab.active span.dot {
      background: var(--accent);
    }

.progress-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 6px;
      font-size: 0.75rem;
      color: var(--text-muted);
    }

.progress-bar {
      flex: 1;
      height: 6px;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.25);
      overflow: hidden;
    }

.progress-fill {
      height: 100%;
      width: 0%;
      border-radius: 999px;
      background: linear-gradient(90deg, #34c759, #0a84ff);
      transition: width 0.3s ease-out;
    }

.week-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

@media (max-width: 960px) {
      .week-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

@media (max-width: 640px) {
      .week-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

.day-card {
      background: rgba(255, 255, 255, 0.9);
      border-radius: var(--radius-md);
      border: 1px solid rgba(148, 163, 184, 0.5);
      padding: 10px 10px 11px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.12s ease,
        border-color 0.12s ease, background 0.12s ease;
    }

[data-theme="dark"] .day-card {
      background: rgba(15, 23, 42, 0.96);
    }

.day-card.training {
      border-color: rgba(52, 199, 89, 0.7);
      box-shadow: 0 0 0 1px rgba(52, 199, 89, 0.35);
      background: radial-gradient(
        circle at top,
        rgba(52, 199, 89, 0.16) 0,
        rgba(255, 255, 255, 0.9) 55%
      );
    }

[data-theme="dark"] .day-card.training {
      background: radial-gradient(
        circle at top,
        rgba(52, 199, 89, 0.18) 0,
        rgba(15, 23, 42, 0.96) 55%
      );
    }

.day-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
    }

.day-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
    }

.day-name {
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

.day-tag {
      font-size: 0.7rem;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(52, 199, 89, 0.12);
      color: #166534;
      border: 1px solid rgba(52, 199, 89, 0.5);
    }

[data-theme="dark"] .day-tag {
      color: #bbf7d0;
    }

.day-tag.rest {
      background: rgba(148, 163, 184, 0.12);
      color: var(--text-muted);
      border-color: rgba(148, 163, 184, 0.6);
    }

.session-title {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text);
    }

.session-meta {
      font-size: 0.75rem;
      color: var(--text-muted);
      display: flex;
      justify-content: space-between;
      gap: 6px;
    }

.session-meta span {
      white-space: nowrap;
    }

.session-meta strong {
      color: var(--text);
      font-weight: 500;
    }

.footer-note {
      margin-top: 12px;
      font-size: 0.75rem;
      color: var(--text-muted);
    }

.footer-note strong {
      color: var(--text);
      font-weight: 500;
    }

/* Modal */

.modal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: flex-end;
      justify-content: center;
      background: rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(6px);
      z-index: 50;
    }

.modal.open {
      display: flex;
    }

.modal-sheet {
      width: 100%;
      max-width: 480px;
      background: var(--bg-elevated);
      border-radius: 18px 18px 0 0;
      border-top: 1px solid var(--border);
      box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.35);
      padding: 14px 18px 18px;
      transform: translateY(100%);
      animation: slideUp 0.22s ease-out forwards;
    }

@keyframes slideUp {
      from {
        transform: translateY(100%);
      }
      to {
        transform: translateY(0%);
      }
    }

.modal-handle {
      width: 40px;
      height: 4px;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.7);
      margin: 0 auto 10px;
    }

.modal-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 8px;
    }

.modal-title-block {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

.modal-title {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
    }

.modal-subtitle {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

.modal-close {
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.6);
      background: rgba(148, 163, 184, 0.08);
      width: 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 0.9rem;
      color: var(--text-muted);
    }

.modal-section-title {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-muted);
      margin: 10px 0 4px;
    }

.modal-list {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 0.85rem;
      color: var(--text);
    }

.modal-list li {
      padding: 4px 0;
      display: flex;
      gap: 6px;
      align-items: flex-start;
    }

.modal-list li span.bullet {
      font-size: 0.8rem;
      margin-top: 2px;
      color: var(--accent);
    }

.modal-meta-row {
      display: flex;
      gap: 10px;
      margin-top: 8px;
      font-size: 0.8rem;
      color: var(--text-muted);
      flex-wrap: wrap;
    }

.meta-pill {
      border-radius: 999px;
      padding: 3px 8px;
      background: rgba(148, 163, 184, 0.12);
      border: 1px solid rgba(148, 163, 184, 0.4);
    }

.meta-pill strong {
      color: var(--text);
      font-weight: 500;
    }
  </style>
</head>
<body data-theme="light">
  <main class="app">
    
    <section class="card">
      <div class="card-inner">
        <header class="header">
          <div class="title-block">
            <div class="badge">Trainingsplan-Rechner</div>
            <h1>
              Dein Wochenplan
              <span style="font-size: 1.2rem; color: var(--accent);">●</span>
            </h1>
            <p class="subtitle">
              Sportart, Ziel und Trainingstage wählen – wir bauen dir einen smarten 4‑Wochen‑Plan.
            </p>
          </div>
          <div class="pill-row">
            <button id="themeToggle" class="theme-toggle" type="button">
              <span class="icon" id="themeIcon">🌞</span>
              <span id="themeLabel">Light</span>
            </button>
            <div class="pill">
              <span class="pill-dot"></span>
              Apple‑Style · Clean
            </div>
          </div>
        </header>

<div class="form-grid">
          <div class="field">
            <label for="sport">
              <span class="icon">🏃</span>
              Sportart
            </label>
            <select id="sport">
              <option value="lauf">Laufen</option>
              <option value="rad">Radfahren</option>
              <option value="kraft">Krafttraining</option>
              <option value="schwimm">Schwimmen</option>
              <option value="hiit">HIIT / Intervall</option>
            </select>
            <div class="hint">Die Hauptsportart bestimmt Struktur und Übungen.</div>
          </div>

<div class="field">
            <label for="ziel">
              <span class="icon">🎯</span>
              Ziel
            </label>
            <select id="ziel">
              <option value="fitness">Allgemeine Fitness</option>
              <option value="abnehmen">Abnehmen</option>
              <option value="aufbau">Muskelaufbau</option>
              <option value="wettkampf">Wettkampf / Leistung</option>
              <option value="ausgleich">Ausgleich / Gesundheit</option>
            </select>
            <div class="hint">Dein Ziel steuert Intensität, Umfang und Progression.</div>
          </div>

<div class="field">
            <label for="tage">
              <span class="icon">📅</span>
              Trainingstage pro Woche
            </label>
            <input id="tage" type="number" min="1" max="7" value="4" />
            <div class="hint">Empfohlen: 3–5 Tage – mindestens ein kompletter Ruhetag.</div>
          </div>
        </div>

<div class="actions">
          <button class="btn-primary" id="generateBtn" type="button">
            <span class="icon">⚙️</span>
            Plan erstellen
          </button>
          <div class="small-note">
            Der Plan ist eine Orientierung – hör auf deinen Körper und passe Volumen & Intensität an.
          </div>
        </div>

<section class="card">
      <div class="card-inner">
        <header class="plan-header">
          <div class="plan-title-block">
            <h2>4‑Wochen‑Plan</h2>
            <div id="planMeta" class="plan-meta">
              Wähle links deine Einstellungen und klicke auf <strong>Plan erstellen</strong>.
            </div>
            <div class="progress-row">
              <div class="progress-bar">
                <div id="progressFill" class="progress-fill"></div>
              </div>
              <span id="progressLabel">Woche 1 von 4</span>
            </div>
          </div>
          <div class="week-tabs" id="weekTabs">
            <button class="week-tab active" data-week="1" type="button">
              <span class="dot"></span> W1
            </button>
            <button class="week-tab" data-week="2" type="button">
              <span class="dot"></span> W2
            </button>
            <button class="week-tab" data-week="3" type="button">
              <span class="dot"></span> W3
            </button>
            <button class="week-tab" data-week="4" type="button">
              <span class="dot"></span> W4
            </button>
          </div>
        </header>

<div class="footer-note">
          <strong>Tipp:</strong> Plane Schlaf, Ernährung und Stressmanagement genauso bewusst wie deine Einheiten.
        </div>
      </div>
    </section>
  </main>

<div id="dayModal" class="modal">
    <div class="modal-sheet">
      <div class="modal-handle"></div>
      <div class="modal-header">
        <div class="modal-title-block">
          <h3 id="modalTitle" class="modal-title"></h3>
          <div id="modalSubtitle" class="modal-subtitle"></div>
        </div>
        <button id="modalClose" class="modal-close" type="button">✕</button>
      </div>

<div class="modal-section-title">Hauptteil</div>
      <ul id="modalMain" class="modal-list"></ul>

<div class="modal-meta-row">
        <div class="meta-pill">
          Dauer: <strong id="modalDuration"></strong>
        </div>
        <div class="meta-pill">
          Intensität (RPE): <strong id="modalRpe"></strong>
        </div>
        <div class="meta-pill">
          Woche: <strong id="modalWeek"></strong>
        </div>
      </div>
    </div>
  </div>

const sportNames = {
      lauf: "Laufen",
      rad: "Radfahren",
      kraft: "Krafttraining",
      schwimm: "Schwimmen",
      hiit: "HIIT / Intervall"
    };

const zielNames = {
      fitness: "Allgemeine Fitness",
      abnehmen: "Abnehmen",
      aufbau: "Muskelaufbau",
      wettkampf: "Wettkampf / Leistung",
      ausgleich: "Ausgleich / Gesundheit"
    };

// Basis-Übungen pro Sportart
    const exerciseTemplates = {
      lauf: {
        warmup: [
          "5–10 Min. lockeres Einlaufen",
          "Lauf-ABC (Kniehebelauf, Anfersen, Skippings)"
        ],
        main: [
          "Intervall- oder Dauerlauf je nach Woche",
          "Optional: 3–6 Steigerungsläufe"
        ],
        cooldown: ["5–10 Min. Auslaufen", "Leichtes Dehnen der Beinmuskulatur"]
      },
      rad: {
        warmup: [
          "10 Min. locker einrollen",
          "2–3 kurze Steigerungen"
        ],
        main: [
          "GA1/GA2 oder Anstiege je nach Woche",
          "Trittfrequenz-Drills (90–100 RPM)"
        ],
        cooldown: ["5–10 Min. locker ausrollen", "Mobilität Hüfte & Rücken"]
      },
      kraft: {
        warmup: [
          "5–10 Min. leichtes Cardio",
          "Mobilität für Schultern, Hüfte, Sprunggelenk"
        ],
        main: [
          "Grundübungen (z.B. Kniebeugen, Drücken, Rudern)",
          "Isolationsübungen je nach Fokus"
        ],
        cooldown: ["Leichtes Dehnen", "Atemübungen / Entspannung 3–5 Min."]
      },
      schwimm: {
        warmup: [
          "200 m Einschwimmen locker",
          "4×50 m Technik (z.B. Kraul-Armzug, Beinarbeit)"
        ],
        main: [
          "Serien je nach Woche (z.B. 6×100 m, 8×50 m)",
          "Wechsel aus moderatem und zügigem Tempo"
        ],
        cooldown: ["100–200 m Ausschwimmen", "Leichtes Dehnen Schultergürtel"]
      },
      hiit: {
        warmup: [
          "5–8 Min. lockeres Aufwärmen",
          "Dynamische Mobilität (Arme, Hüfte, Beine)"
        ],
        main: [
          "Intervallblöcke (z.B. 30/30, 40/20)",
          "Körpergewichtsübungen (z.B. Squats, Burpees, Lunges)"
        ],
        cooldown: ["5 Min. lockeres Auslaufen / Gehen", "Atem- und Dehnübungen"]
      }
    };

// Progression pro Woche (Faktor für Dauer & Intensität)
    const weekProgression = {
      1: { duration: 1.0, rpe: 6, label: "Einstieg / Basis" },
      2: { duration: 1.1, rpe: 7, label: "Mehr Umfang" },
      3: { duration: 1.2, rpe: 8, label: "Intensität hoch" },
      4: { duration: 0.9, rpe: 6, label: "Deload / Regeneration" }
    };

// Dauer-Basis je nach Ziel (in Minuten)
    const baseDurationByGoal = {
      fitness: 45,
      abnehmen: 50,
      aufbau: 60,
      wettkampf: 60,
      ausgleich: 35
    };

// Theme handling
    const bodyEl = document.body;
    const themeToggle = document.getElementById("themeToggle");
    const themeIcon = document.getElementById("themeIcon");
    const themeLabel = document.getElementById("themeLabel");

// Initial theme
    (function initTheme() {
      let stored = null;
      try {
        stored = localStorage.getItem("tp-theme");
      } catch (e) {}
      if (stored === "dark" || stored === "light") {
        setTheme(stored);
      } else {
        const prefersDark = window.matchMedia &&
          window.matchMedia("(prefers-color-scheme: dark)").matches;
        setTheme(prefersDark ? "dark" : "light");
      }
    })();

themeToggle.addEventListener("click", () => {
      const current = bodyEl.getAttribute("data-theme");
      setTheme(current === "dark" ? "light" : "dark");
    });

// Modal handling
    const modal = document.getElementById("dayModal");
    const modalClose = document.getElementById("modalClose");
    const modalTitle = document.getElementById("modalTitle");
    const modalSubtitle = document.getElementById("modalSubtitle");
    const modalWarmup = document.getElementById("modalWarmup");
    const modalMain = document.getElementById("modalMain");
    const modalCooldown = document.getElementById("modalCooldown");
    const modalDuration = document.getElementById("modalDuration");
    const modalRpe = document.getElementById("modalRpe");
    const modalWeek = document.getElementById("modalWeek");

function openModal(data) {
      modalTitle.textContent = data.title;
      modalSubtitle.textContent = data.subtitle;

const tpl = exerciseTemplates[data.sport] || exerciseTemplates["lauf"];

function fillList(ul, items) {
        ul.innerHTML = "";
        items.forEach((text) => {
          const li = document.createElement("li");
          const bullet = document.createElement("span");
          bullet.className = "bullet";
          bullet.textContent = "•";
          const span = document.createElement("span");
          span.textContent = text;
          li.appendChild(bullet);
          li.appendChild(span);
          ul.appendChild(li);
        });
      }

fillList(modalWarmup, tpl.warmup);
      fillList(modalMain, tpl.main);
      fillList(modalCooldown, tpl.cooldown);

modalDuration.textContent = data.duration + " Min.";
      modalRpe.textContent = data.rpe + "/10";
      modalWeek.textContent = data.week + " (" + weekProgression[data.week].label + ")";

modal.classList.add("open");
    }

function closeModal() {
      modal.classList.remove("open");
    }

modalClose.addEventListener("click", closeModal);
    modal.addEventListener("click", (e) => {
      if (e.target === modal) closeModal();
    });

// Plan generation
    const planMeta = document.getElementById("planMeta");
    const weekGrid = document.getElementById("weekGrid");
    const errorEl = document.getElementById("error");
    const progressFill = document.getElementById("progressFill");
    const progressLabel = document.getElementById("progressLabel");
    const weekTabs = document.querySelectorAll(".week-tab");

let currentWeek = 1;
    let currentConfig = null;

weekTabs.forEach((tab) => {
      tab.addEventListener("click", () => {
        const week = parseInt(tab.getAttribute("data-week"), 10);
        if (!currentConfig) return;
        currentWeek = week;
        updateWeekTabs();
        renderWeek(currentConfig, currentWeek);
      });
    });

function updateWeekTabs() {
      weekTabs.forEach((tab) => {
        const w = parseInt(tab.getAttribute("data-week"), 10);
        tab.classList.toggle("active", w === currentWeek);
      });
      const pct = (currentWeek / 4) * 100;
      progressFill.style.width = pct + "%";
      progressLabel.textContent = "Woche " + currentWeek + " von 4";
    }

function generateTrainingDaysPerWeek(daysPerWeek) {
      const trainingDays = [];
      const step = 7 / daysPerWeek;
      for (let i = 0; i < daysPerWeek; i++) {
        trainingDays.push(Math.round(i * step));
      }
      const normalized = Array.from(
        new Set(trainingDays.map((d) => Math.min(6, Math.max(0, d))))
      ).sort((a, b) => a - b);

let idx = 0;
      while (normalized.length < daysPerWeek && idx < 7) {
        if (!normalized.includes(idx)) normalized.push(idx);
        idx++;
      }
      return normalized.sort((a, b) => a - b);
    }

function getSessionMeta(sport, ziel, week, trainingIndex) {
      const baseDuration = baseDurationByGoal[ziel] || 45;
      const prog = weekProgression[week] || weekProgression[1];
      const duration = Math.round(baseDuration * prog.duration);
      const rpe = prog.rpe;

return { title, duration, rpe };
    }

function renderWeek(config, week) {
      weekGrid.innerHTML = "";
      const trainingDays = generateTrainingDaysPerWeek(config.daysPerWeek);
      let trainingIndex = 0;

days.forEach((dayName, index) => {
        const isTraining = trainingDays.includes(index);
        const card = document.createElement("div");
        card.className = "day-card " + (isTraining ? "training" : "rest");

const header = document.createElement("div");
        header.className = "day-header";

const nameEl = document.createElement("div");
        nameEl.className = "day-name";
        nameEl.textContent = dayName;

const tagEl = document.createElement("div");
        tagEl.className = "day-tag" + (isTraining ? "" : " rest");
        tagEl.textContent = isTraining ? "Training" : "Ruhetag";

header.appendChild(nameEl);
        header.appendChild(tagEl);
        card.appendChild(header);

if (isTraining) {
          const meta = getSessionMeta(
            config.sport,
            config.ziel,
            week,
            trainingIndex
          );
          trainingIndex++;

const titleEl = document.createElement("div");
          titleEl.className = "session-title";
          titleEl.textContent = meta.title;

const metaRow = document.createElement("div");
          metaRow.className = "session-meta";

const durSpan = document.createElement("span");
          durSpan.textContent = meta.duration + " Min.";

const rpeSpan = document.createElement("span");
          rpeSpan.textContent = "RPE " + meta.rpe + "/10";

metaRow.appendChild(durSpan);
          metaRow.appendChild(rpeSpan);

card.appendChild(titleEl);
          card.appendChild(metaRow);

card.addEventListener("click", () => {
            openModal({
              title: meta.title + " · " + dayName,
              subtitle:
                sportNames[config.sport] +
                " · " +
                zielNames[config.ziel] +
                " · Woche " +
                week,
              sport: config.sport,
              duration: meta.duration,
              rpe: meta.rpe,
              week
            });
          });
        } else {
          const titleEl = document.createElement("div");
          titleEl.className = "session-title";
          titleEl.textContent = "Regeneration & Alltag";

const metaRow = document.createElement("div");
          metaRow.className = "session-meta";

const tipSpan = document.createElement("span");
          tipSpan.textContent = "Schlaf, Ernährung, Stress ↓";

metaRow.appendChild(tipSpan);
          card.appendChild(titleEl);
          card.appendChild(metaRow);

card.addEventListener("click", () => {
            openModal({
              title: "Ruhetag · " + dayName,
              subtitle: "Regeneration, Schlaf, Ernährung, leichte Bewegung",
              sport: "lauf",
              duration: 0,
              rpe: 2,
              week
            });
          });
        }

weekGrid.appendChild(card);
      });

updateWeekTabs();
    }

function generatePlan() {
      const sport = document.getElementById("sport").value;
      const ziel = document.getElementById("ziel").value;
      const tageInput = document.getElementById("tage");
      const daysPerWeek = parseInt(tageInput.value, 10);

errorEl.style.display = "none";
      errorEl.textContent = "";

if (isNaN(daysPerWeek) || daysPerWeek < 1 || daysPerWeek > 7) {
        errorEl.style.display = "block";
        errorEl.textContent =
          "Bitte gib eine Zahl zwischen 1 und 7 für die Trainingstage pro Woche ein.";
        return;
      }

currentConfig = {
        sport,
        ziel,
        daysPerWeek
      };
      currentWeek = 1;

planMeta.innerHTML =
        "Sportart: <strong>" +
        sportNames[sport] +
        "</strong> · Ziel: <strong>" +
        zielNames[ziel] +
        "</strong> · Trainingstage: <strong>" +
        daysPerWeek +
        "</strong> · Plan: <strong>4 Wochen</strong>";

renderWeek(currentConfig, currentWeek);
    }

document
      .getElementById("generateBtn")
      .addEventListener("click", generatePlan);
  </script>
</body>
</html>

⚙ Projekt-Eigenschaften