Mini HTML-Editor

milena.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" />
  <style>
    :root {
      --bg: #050816;
      --bg-card: #0f172a;
      --accent: #22c55e;
      --accent-soft: rgba(34, 197, 94, 0.15);
      --text: #e5e7eb;
      --muted: #9ca3af;
      --danger: #f97373;
      --border: #1f2937;
      --radius-lg: 18px;
      --radius-md: 10px;
      --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.7);
      --shadow-chip: 0 0 0 1px rgba(148, 163, 184, 0.35);
      --transition-fast: 0.18s ease-out;
      --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", sans-serif;
    }

* {
      box-sizing: border-box;
    }

body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font-sans);
      background: radial-gradient(circle at top, #1f2937 0, #020617 45%, #000 100%);
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

.app-shell {
      width: 100%;
      max-width: 980px;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
      gap: 24px;
      align-items: stretch;
    }

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

.card {
      background: radial-gradient(circle at top left, #111827 0, #020617 55%);
      border-radius: 26px;
      border: 1px solid rgba(148, 163, 184, 0.25);
      box-shadow: var(--shadow-soft);
      padding: 22px 22px 20px;
      position: relative;
      overflow: hidden;
    }

.card::before {
      content: "";
      position: absolute;
      inset: -40%;
      background:
        radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.08) 0, transparent 55%),
        radial-gradient(circle at 100% 0, rgba(34, 197, 94, 0.08) 0, transparent 55%);
      opacity: 0.9;
      pointer-events: none;
    }

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

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

.title-block h1 {
      font-size: 1.4rem;
      letter-spacing: 0.03em;
      margin: 0 0 4px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

.title-pill {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

.title-pill-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
    }

.title-highlight {
      background: linear-gradient(120deg, #22c55e, #38bdf8);
      -webkit-background-clip: text;
      color: transparent;
    }

.header-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(148, 163, 184, 0.4);
      font-size: 0.72rem;
      color: var(--muted);
      backdrop-filter: blur(10px);
      white-space: nowrap;
    }

.header-badge-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: radial-gradient(circle, #22c55e 0, #16a34a 55%, #052e16 100%);
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35);
    }

.subtitle {
      font-size: 0.86rem;
      color: var(--muted);
      margin: 0 0 18px;
      max-width: 32rem;
    }

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

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

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

.field-label {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--muted);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
    }

.field-label span {
      font-size: 0.7rem;
      text-transform: none;
      letter-spacing: 0;
      color: #6b7280;
    }

.input,
    .select {
      width: 100%;
      border-radius: var(--radius-md);
      border: 1px solid rgba(148, 163, 184, 0.45);
      background: rgba(15, 23, 42, 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 var(--transition-fast);
      appearance: none;
    }

.input::placeholder {
      color: #6b7280;
    }

.input:focus,
    .select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.5);
      background: rgba(15, 23, 42, 0.98);
      transform: translateY(-0.5px);
    }

.select-wrapper {
      position: relative;
    }

.select-wrapper::after {
      content: "▾";
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.7rem;
      color: #6b7280;
      pointer-events: none;
    }

.chips-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }

.chip {
      font-size: 0.72rem;
      padding: 5px 9px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.5);
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(15, 23, 42, 0.9);
      box-shadow: var(--shadow-chip);
    }

.chip-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #38bdf8;
    }

.chip-strong {
      border-color: rgba(34, 197, 94, 0.7);
      color: #bbf7d0;
      background: rgba(22, 163, 74, 0.12);
    }

.chip-strong .chip-dot {
      background: #22c55e;
    }

.actions-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-top: 6px;
    }

.btn-primary {
      border: none;
      border-radius: 999px;
      padding: 9px 18px;
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      background: linear-gradient(120deg, #22c55e, #16a34a);
      color: #022c22;
      box-shadow: 0 14px 30px rgba(22, 163, 74, 0.55);
      transition: transform var(--transition-fast), box-shadow var(--transition-fast),
        filter var(--transition-fast);
    }

.btn-primary span.icon {
      font-size: 1.1rem;
    }

.btn-primary:hover {
      transform: translateY(-1px);
      filter: brightness(1.05);
      box-shadow: 0 18px 40px rgba(22, 163, 74, 0.7);
    }

.btn-primary:active {
      transform: translateY(0);
      box-shadow: 0 10px 24px rgba(22, 163, 74, 0.5);
    }

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

.hint strong {
      color: #e5e7eb;
      font-weight: 500;
    }

.error {
      font-size: 0.78rem;
      color: var(--danger);
      margin-top: 6px;
      min-height: 1em;
    }

/* Plan card */

.plan-card {
      background: radial-gradient(circle at top right, #0b1120 0, #020617 55%);
      border-radius: 26px;
      border: 1px solid rgba(148, 163, 184, 0.25);
      box-shadow: var(--shadow-soft);
      padding: 20px 20px 18px;
      position: relative;
      overflow: hidden;
    }

.plan-card::before {
      content: "";
      position: absolute;
      inset: -40%;
      background:
        radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.1) 0, transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(34, 197, 94, 0.1) 0, transparent 55%);
      opacity: 0.9;
      pointer-events: none;
    }

.plan-inner {
      position: relative;
      z-index: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

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

.plan-title {
      font-size: 1.05rem;
      margin: 0 0 4px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

.plan-tag {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--muted);
    }

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

.plan-meta strong {
      color: #e5e7eb;
      font-weight: 500;
    }

.plan-badge {
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.5);
      background: rgba(15, 23, 42, 0.9);
      font-size: 0.72rem;
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      backdrop-filter: blur(10px);
    }

.plan-badge-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: radial-gradient(circle, #38bdf8 0, #0ea5e9 55%, #082f49 100%);
      box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.4);
    }

.plan-body {
      background: rgba(15, 23, 42, 0.9);
      border-radius: 18px;
      border: 1px solid rgba(148, 163, 184, 0.4);
      padding: 12px 12px 10px;
      display: grid;
      grid-template-columns: 1.1fr 1.4fr;
      gap: 10px;
      margin-bottom: 10px;
    }

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

.plan-summary {
      border-right: 1px dashed rgba(55, 65, 81, 0.9);
      padding-right: 10px;
    }

@media (max-width: 840px) {
      .plan-summary {
        border-right: none;
        border-bottom: 1px dashed rgba(55, 65, 81, 0.9);
        padding-right: 0;
        padding-bottom: 10px;
        margin-bottom: 4px;
      }
    }

.summary-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
      font-size: 0.8rem;
      margin-bottom: 6px;
    }

.summary-label {
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: 0.72rem;
    }

.summary-value {
      font-weight: 500;
      color: #e5e7eb;
    }

.summary-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(148, 163, 184, 0.5);
      font-size: 0.72rem;
      color: var(--muted);
      margin-top: 4px;
    }

.summary-pill-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #22c55e;
    }

.plan-weeklist {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 260px;
      overflow: auto;
      padding-right: 4px;
    }

.week-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      align-items: flex-start;
      padding: 7px 8px;
      border-radius: 12px;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(55, 65, 81, 0.9);
      font-size: 0.8rem;
    }

.week-label {
      font-weight: 600;
      color: #e5e7eb;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

.week-content {
      color: var(--muted);
      line-height: 1.4;
    }

.week-content strong {
      color: #e5e7eb;
      font-weight: 500;
    }

.week-tags {
      margin-top: 3px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

.week-tag {
      font-size: 0.7rem;
      padding: 2px 6px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(55, 65, 81, 0.9);
      color: #9ca3af;
    }

.plan-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      font-size: 0.75rem;
      color: var(--muted);
    }

.plan-footer span strong {
      color: #e5e7eb;
      font-weight: 500;
    }

.plan-footer-pill {
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px dashed rgba(148, 163, 184, 0.6);
      background: rgba(15, 23, 42, 0.9);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

.plan-footer-pill-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #38bdf8;
    }

.empty-state {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 0.85rem;
      color: var(--muted);
      padding: 18px 10px 6px;
    }

.empty-state span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px dashed rgba(148, 163, 184, 0.6);
      background: rgba(15, 23, 42, 0.9);
    }

.empty-state span .dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #22c55e;
    }

::-webkit-scrollbar {
      width: 6px;
    }

::-webkit-scrollbar-track {
      background: transparent;
    }

::-webkit-scrollbar-thumb {
      background: rgba(55, 65, 81, 0.9);
      border-radius: 999px;
    }
  </style>
</head>
<body>
  <main class="app-shell">
    
    <section class="card">
      <div class="card-inner">
        <header class="header">
          <div class="title-block">
            <h1>
              <span class="title-highlight">Trainingsplan</span>-Rechner
            </h1>
            <div class="title-pill">
              <span class="title-pill-dot"></span>
              Smart Weekly Structure
            </div>
          </div>
          <div class="header-badge">
            <span class="header-badge-dot"></span>
            Auto-generierter Wochenplan
          </div>
        </header>

<p class="subtitle">
          Gib deine <strong>Sportart</strong>, dein <strong>Ziel</strong> und die
          <strong>Trainingstage pro Woche</strong> ein. Du erhältst einen klaren, strukturierten
          Wochenplan mit Fokus-Einheiten.
        </p>

<form id="planForm" autocomplete="off">
          <div class="form-grid">
            <div class="field">
              <label class="field-label">
                Sportart
                <span>z.B. Laufen, Krafttraining, Fußball</span>
              </label>
              <input
                id="sport"
                class="input"
                type="text"
                placeholder="z.B. Laufen"
              />
            </div>

<div class="field">
              <label class="field-label">
                Ziel
                <span>Wähle deinen Fokus</span>
              </label>
              <div class="select-wrapper">
                <select id="goal" class="select">
                  <option value="">Bitte wählen …</option>
                  <option value="wettkampf">Wettkampf-Vorbereitung</option>
                  <option value="fitness">Allgemeine Fitness</option>
                  <option value="abnehmen">Abnehmen / Fettverlust</option>
                  <option value="aufbau">Muskelaufbau</option>
                  <option value="ausdauer">Ausdauer verbessern</option>
                </select>
              </div>
            </div>

<div class="field">
              <label class="field-label">
                Trainingstage / Woche
                <span>1–7 Tage</span>
              </label>
              <input
                id="days"
                class="input"
                type="number"
                min="1"
                max="7"
                step="1"
                placeholder="z.B. 4"
              />
            </div>

<div class="field">
              <label class="field-label">
                Plan-Länge
                <span>Wochen</span>
              </label>
              <div class="select-wrapper">
                <select id="weeks" class="select">
                  <option value="1">1 Woche</option>
                  <option value="2">2 Wochen</option>
                  <option value="3" selected>3 Wochen</option>
                  <option value="4">4 Wochen</option>
                </select>
              </div>
            </div>
          </div>

<div class="chips-row">
            <div class="chip chip-strong">
              <span class="chip-dot"></span>
              Fokus-Einheiten automatisch verteilt
            </div>
            <div class="chip">
              <span class="chip-dot"></span>
              Deload-Tag bei hoher Frequenz
            </div>
            <div class="chip">
              <span class="chip-dot"></span>
              Zielabhängige Intensität
            </div>
          </div>

<div class="actions-row">
            <button type="submit" class="btn-primary">
              <span class="icon">⚡</span>
              Plan berechnen
            </button>
            <p class="hint">
              <strong>Tipp:</strong> Nutze den Plan als Basis und passe ihn an dein aktuelles
              Leistungsniveau an.
            </p>
          </div>

<section class="plan-card">
      <div class="plan-inner">
        <header class="plan-header">
          <div>
            <h2 class="plan-title">
              Dein Wochenplan
            </h2>
            <div class="plan-tag">Strukturierte Übersicht nach Tagen</div>
            <div id="planMeta" class="plan-meta">
              Noch keine Eingaben – starte links mit deinen Daten.
            </div>
          </div>
          <div class="plan-badge">
            <span class="plan-badge-dot"></span>
            Dynamisch generiert
          </div>
        </header>

<div id="planBody" class="plan-body">
          <div class="empty-state">
            <span>
              <span class="dot"></span>
              Gib deine Daten ein und klicke auf <strong>Plan berechnen</strong>, um deinen
              Trainingsplan zu sehen.
            </span>
          </div>
        </div>

<footer class="plan-footer">
          <span>
            <strong>Hinweis:</strong> Der Plan ist eine Orientierungshilfe und ersetzt keine
            individuelle Trainingsbetreuung.
          </span>
          <div class="plan-footer-pill">
            <span class="plan-footer-pill-dot"></span>
            Progression über Wochen einplanen
          </div>
        </footer>
      </div>
    </section>
  </main>

function normalizeSport(sport) {
      const s = sport.trim().toLowerCase();
      if (!s) return "Training";
      if (s.includes("lauf")) return "Lauftraining";
      if (s.includes("run")) return "Lauftraining";
      if (s.includes("kraft") || s.includes("gym") || s.includes("studio"))
        return "Krafttraining";
      if (s.includes("rad") || s.includes("bike") || s.includes("velo"))
        return "Radtraining";
      if (s.includes("schwimm")) return "Schwimmtraining";
      return sport.trim();
    }

function goalDescriptor(goal) {
      switch (goal) {
        case "wettkampf":
          return "wettkampforientiert";
        case "fitness":
          return "allgemeine Fitness";
        case "abnehmen":
          return "Fettverlust";
        case "aufbau":
          return "Muskelaufbau";
        case "ausdauer":
          return "Ausdauerfokus";
        default:
          return "Allround";
      }
    }

function getIntensityTag(goal) {
      switch (goal) {
        case "wettkampf":
          return "Intensität: mittel–hoch";
        case "fitness":
          return "Intensität: moderat";
        case "abnehmen":
          return "Intensität: moderat, Volumen leicht erhöht";
        case "aufbau":
          return "Intensität: mittel–hoch, Fokus Kraft";
        case "ausdauer":
          return "Intensität: moderat, Fokus Umfang";
        default:
          return "Intensität: moderat";
      }
    }

function buildPlan(sport, goal, days, weeks) {
      const sportLabel = normalizeSport(sport || "Training");
      const template = getSessionTemplate(goal, sportLabel);
      const intensity = getIntensityTag(goal);

const daysPerWeek = Math.min(Math.max(days, 1), 7);
      const totalWeeks = Math.min(Math.max(weeks, 1), 4);

const weekData = [];

for (let w = 1; w <= totalWeeks; w++) {
        const daysArray = [];
        for (let d = 1; d <= daysPerWeek; d++) {
          const isKeyDay =
            daysPerWeek <= 2
              ? true
              : daysPerWeek <= 4
              ? d === 1 || d === Math.ceil(daysPerWeek / 2)
              : d === 1 || d === 3 || d === 5;

const isDeload =
            daysPerWeek >= 5 &&
            (d === daysPerWeek || (daysPerWeek === 7 && d === 6));

let title;
          let description;
          const tags = [];

if (isDeload) {
            title = "Regeneration / Deload";
            description =
              "Sehr lockere Einheit oder kompletter Ruhetag. Fokus auf Schlaf, Ernährung und Stressreduktion.";
            tags.push("Regeneration", "Deload");
          } else if (isKeyDay) {
            title = "Fokus-Einheit";
            description =
              "Schwerpunkt: " +
              template.key +
              ". Nach dem Aufwärmen 1–2 Hauptblöcke, danach kurzes Cool-down.";
            tags.push("Key Session", "Progression");
          } else {
            title = "Unterstützende Einheit";
            description =
              "Leichtere Einheit: " +
              template.support +
              ". Intensität bewusst niedriger halten.";
            tags.push("Support", "Locker");
          }

daysArray.push({
            day: d,
            title,
            description,
            tags,
          });
        }

weekData.push({
          week: w,
          days: daysArray,
        });
      }

return {
        sportLabel,
        intensity,
        weeks: weekData,
        daysPerWeek,
        totalWeeks,
      };
    }

function renderPlan(plan, goal) {
      const { sportLabel, intensity, weeks, daysPerWeek, totalWeeks } = plan;

planMeta.textContent =
        sportLabel +
        " · " +
        goalDescriptor(goal) +
        " · " +
        daysPerWeek +
        " Trainingstage · " +
        totalWeeks +
        (totalWeeks === 1 ? " Woche" : " Wochen");

const summaryHtml = `
        <div class="plan-summary">
          <div class="summary-row">
            <span class="summary-label">Sportart</span>
            <span class="summary-value">${sportLabel}</span>
          </div>
          <div class="summary-row">
            <span class="summary-label">Ziel</span>
            <span class="summary-value">${goalDescriptor(goal)}</span>
          </div>
          <div class="summary-row">
            <span class="summary-label">Struktur</span>
            <span class="summary-value">${daysPerWeek} Tage · ${totalWeeks} ${
        totalWeeks === 1 ? "Woche" : "Wochen"
      }</span>
          </div>
          <div class="summary-pill">
            <span class="summary-pill-dot"></span>
            ${intensity}
          </div>
        </div>
      `;

return `
            <div>
              <div class="summary-row" style="margin-bottom:4px;">
                <span class="summary-label">Woche</span>
                <span class="summary-value">W${week.week}</span>
              </div>
              ${dayLines}
            </div>
          `;
        })
        .join("");

const weekListHtml = `
        <div class="plan-weeklist">
          ${weeksHtml}
        </div>
      `;

planBody.innerHTML = `
        <div class="plan-body">
          ${summaryHtml}
          ${weekListHtml}
        </div>
      `;
    }

form.addEventListener("submit", (e) => {
      e.preventDefault();
      errorEl.textContent = "";

const sport = document.getElementById("sport").value;
      const goal = document.getElementById("goal").value;
      const daysRaw = document.getElementById("days").value;
      const weeksRaw = document.getElementById("weeks").value;

const days = parseInt(daysRaw, 10);
      const weeks = parseInt(weeksRaw, 10);

if (!sport.trim()) {
        errorEl.textContent = "Bitte gib eine Sportart ein.";
        return;
      }
      if (!goal) {
        errorEl.textContent = "Bitte wähle ein Ziel.";
        return;
      }
      if (isNaN(days) || days < 1 || days > 7) {
        errorEl.textContent = "Bitte gib eine gültige Anzahl an Trainingstagen (1–7) ein.";
        return;
      }

const plan = buildPlan(sport, goal, days, weeks);
      renderPlan(plan, goal);
    });
  </script>
</body>

⚙ Projekt-Eigenschaften