Mini HTML-Editor

m.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>

⚙ Projekt-Eigenschaften