Mini HTML-Editor

mh.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 – Pro Version</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg);
  margin: 0;
  padding: 20px;
  color: var(--text);
}

.app {
  max-width: 1100px;
  margin: auto;
  display: grid;
  gap: 20px;
}

@media (min-width: 850px) {
  .app {
    grid-template-columns: 1fr 1.2fr;
  }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

label {
  font-size: 0.85rem;
  font-weight: 600;
}

select, input {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-top: 6px;
  font-size: 1rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #faf7f3;
  cursor: pointer;
  font-size: 0.85rem;
}

.chip.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

button {
  width: 100%;
  padding: 12px;
  margin-top: 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: white;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 600;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.day {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  background: #fffdfb;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.day h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
}

.day p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.35;
  word-break: break-word;
}

.tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-light);
  color: #5a2e1f;
  font-size: 0.75rem;
  margin-top: 4px;
}
</style>
</head>

<div class="panel">
    <h2>Trainingsplan-Rechner – Pro</h2>

<label>Sportart</label>
    <select id="sport">
      <option value="laufen">Laufen</option>
      <option value="rad">Radfahren</option>
      <option value="schwimmen">Schwimmen</option>
      <option value="kraft">Krafttraining</option>
      <option value="triathlon">Triathlon</option>
      <option value="fussball">Fußball</option>
      <option value="basketball">Basketball</option>
      <option value="rudern">Rudern</option>
      <option value="crossfit">CrossFit</option>
      <option value="mix">Allgemein / Mix</option>
    </select>

<label style="margin-top:16px;">Ziel</label>
    <div class="chips" id="goals">
      <div class="chip active" data-goal="wettkampf">Wettkampf</div>
      <div class="chip" data-goal="fitness">Fitness</div>
      <div class="chip" data-goal="abnehmen">Abnehmen</div>
      <div class="chip" data-goal="aufbau">Muskelaufbau</div>
    </div>

<label style="margin-top:16px;">Trainingstage pro Woche</label>
    <input id="days" type="number" min="1" max="7" value="5" />

<button id="generate">Plan erstellen</button>
  </div>

<div class="panel">
    <h2>Dein Wochenplan</h2>
    <p id="subtitle" style="color:var(--muted); margin-bottom:12px;">
      Wähle links deine Parameter.
    </p>

</div>

const templates = {
  laufen: {
    easy: "40–60 Min GA1 (ruhiges Tempo, Puls niedrig).",
    quality: "5×5 Min @ 95–100% vVO2max, 3 Min Trabpause.",
    threshold: "3×12 Min @ Schwelle (85–90% HFmax), 4 Min locker.",
    long: "75–120 Min ruhiger Dauerlauf.",
    strength: "20 Min Lauf-ABC + 20 Min Rumpfstabi.",
    fatburn: "60 Min zügiges Gehen oder sehr lockerer Lauf."
  },

rad: {
    easy: "60–90 Min GA1, hohe Trittfrequenz (90+).",
    quality: "6×4 Min @ VO2max, 3 Min locker.",
    threshold: "3×15 Min @ 90–95% FTP, 5 Min locker.",
    long: "2–4 h Grundlagenausdauer.",
    strength: "30 Min Core + Beinachsen-Stabilität.",
    fatburn: "90 Min GA1, gleichmäßiger Puls."
  },

schwimmen: {
    easy: "6×50 m Technik + 400 m locker.",
    quality: "12×100 m moderat-intensiv, 20–30 Sek Pause.",
    threshold: "6×200 m @ Schwelle, 30 Sek Pause.",
    long: "2000–3000 m ruhiges GA-Schwimmen.",
    strength: "Trockenübungen: Schulterblatt-Stabi + Core.",
    fatburn: "1000–1500 m locker, lange Züge."
  },

kraft: {
    easy: "Ganzkörper: 2×12 (Kniebeuge, Rudern, Liegestütz, Hüftheben).",
    quality: "Schwer: 4×6 Kniebeuge, 4×6 Bankdrücken, 4×6 Kreuzheben.",
    threshold: "Hypertrophie: 4×10 pro Übung, 60–90 Sek Pause.",
    long: "Volumentag: 5×12 pro Übung, langsame Ausführung.",
    strength: "Core-Fokus: Planks, Side Planks, Bird-Dog, Dead Bug.",
    fatburn: "Zirkel: 10 Übungen × 40 Sek, 20 Sek Pause."
  },

triathlon: {
    easy: "45–60 Min lockeres Rad ODER 30 Min Laufen + 15 Min Stabi.",
    quality: "Koppeltraining: 45 Min Rad @ moderat + 15 Min Laufen zügig.",
    threshold: "3×10 Min Rad @ Schwelle + 10 Min Laufen locker.",
    long: "Langer Tag: 2 h Rad + 20–30 Min Laufen.",
    strength: "30 Min Athletik + Core.",
    fatburn: "60–90 Min GA1 Rad oder Laufen."
  },

fussball: {
    easy: "45 Min lockere Spielformen + Mobility.",
    quality: "Intervall-Sprints: 12×30 Sek Sprint, 60 Sek Pause.",
    threshold: "Kleinfeldspiele 4×6 Min @ hoher Intensität.",
    long: "90 Min Technik + Spielformen.",
    strength: "Prävention: Sprungkraft + Core + Beinachsen.",
    fatburn: "60 Min lockeres Ausdauertraining."
  },

basketball: {
    easy: "60 Min Ballhandling + lockere Würfe.",
    quality: "Sprints: 10×20 m + 6×40 m, 60 Sek Pause.",
    threshold: "Intensive Drills: 4×8 Min Spielsimulation.",
    long: "90 Min Technik + Ausdauer.",
    strength: "Sprungkraft: Box Jumps, Core, Hüftstabi.",
    fatburn: "45–60 Min lockeres Cardio."
  },

rudern: {
    easy: "45–60 Min GA1 auf dem Ergo.",
    quality: "5×5 Min @ 90–95% FTP, 3 Min locker.",
    threshold: "3×12 Min @ Schwelle, 4 Min locker.",
    long: "60–90 Min ruhiges Grundlagentraining.",
    strength: "Rumpf & Rücken: 20–30 Min.",
    fatburn: "60 Min GA1, gleichmäßiger Schlag."
  },

crossfit: {
    easy: "Skill + Technik: 30–40 Min.",
    quality: "WOD: 12 Min AMRAP (z. B. 10 Burpees, 10 KB Swings, 10 Box Jumps).",
    threshold: "Strength + Metcon: 5×5 Grundübung + 10 Min Intervall.",
    long: "Langes WOD: 20–30 Min.",
    strength: "Kraftfokus: 5×5 Kniebeuge oder Kreuzheben.",
    fatburn: "EMOM 20 Min: 10 Air Squats, 8 Kettlebell Swings."
  },

mix: {
    easy: "30–40 Min lockeres Cardio.",
    quality: "Intervall: 10×1 Min schnell, 1 Min locker.",
    threshold: "3×10 Min moderat-hoch.",
    long: "60–90 Min Cardio nach Wahl.",
    strength: "Ganzkörper-Kraft: 3×10 pro Übung.",
    fatburn: "45–60 Min zügiges Gehen oder Radfahren."
  }
};

const daysOfWeek = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];

/* UI */
document.querySelectorAll(".chip").forEach(chip => {
  chip.addEventListener("click", () => {
    document.querySelectorAll(".chip").forEach(c => c.classList.remove("active"));
    chip.classList.add("active");
  });
});

document.getElementById("generate").addEventListener("click", () => {
  const sport = document.getElementById("sport").value;
  const goal = document.querySelector(".chip.active").dataset.goal;
  const days = Math.min(7, Math.max(1, Number(document.getElementById("days").value)));

const plan = buildPlan(sport, goal, days);
  renderPlan(plan, sport, goal, days);
});

/* Trainingslogik */
function buildPlan(sport, goal, days) {
  const t = templates[sport];
  const plan = [];

const order = goal === "wettkampf"
    ? ["quality", "threshold", "long", "easy", "strength"]
    : goal === "abnehmen"
    ? ["fatburn", "quality", "easy", "long", "strength"]
    : goal === "aufbau"
    ? ["strength", "threshold", "quality", "easy", "long"]
    : ["easy", "quality", "strength", "long", "threshold"];

let idx = 0;

for (let i = 0; i < 7; i++) {
    if (plan.length < days) {
      const type = order[idx % order.length];
      plan.push({ type, text: t[type] });
      idx++;
    } else {
      plan.push({ type: "rest", text: "Ruhetag: Mobility, Spaziergang, guter Schlaf." });
    }
  }

return plan;
}

/* Rendering */
function renderPlan(plan, sport, goal, days) {
  const week = document.getElementById("week");
  week.innerHTML = "";

plan.forEach((p, i) => {
    const el = document.createElement("div");
    el.className = "day";

el.innerHTML = `
      <h4>${daysOfWeek[i]}</h4>
      <p>${p.text}</p>
      <span class="tag">${p.type === "rest" ? "Ruhe" : p.type}</span>
    `;

week.appendChild(el);
  });

const goalNames = {
    wettkampf: "Wettkampf",
    fitness: "Fitness",
    abnehmen: "Abnehmen",
    aufbau: "Muskelaufbau"
  };

document.getElementById("subtitle").textContent =
    `${days} Trainingstage · ${sport} · Ziel: ${goalNames[goal]}`;
}
</script>

</body>
</html>

⚙ Projekt-Eigenschaften