Mini HTML-Editor
Neu
Exportieren
Link-Graph
🎨 Galerie
Projekt-Code:
Öffnen
📋 Kein Projekt-Code eingegeben — Dateien werden im
öffentlichen Bereich
gespeichert und nach 24 Stunden automatisch gelöscht. Lege ein
neues Projekt
an um Dateien dauerhaft zu speichern.
trainingsplann.html
Speichern
Öffnen
↩ Undo
↪ Redo
A−
A+
Einfügen ▾
🔗 Link
🖼 Bild
🎨 Farbcode
📋 Liste (ul/li)
🃏 Karte (div)
⚡ Javascript-Block
🔒 Schützen
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Trainingsplan-Rechner</title> <style> :root { --bg-color: #0f172a; --card-bg: #1e293b; --accent-color: #38bdf8; --accent-hover: #0ea5e9; --text-main: #f8fafc; --text-muted: #94a3b8; --border-color: #334155; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--bg-color); color: var(--text-main); padding: 2rem 1rem; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { width: 100%; max-width: 800px; background: var(--card-bg); padding: 2rem; border-radius: 16px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); } h1 { text-align: center; margin-bottom: 2rem; color: var(--text-main); font-size: 2rem; } h1 span { color: var(--accent-color); } .form-group { margin-bottom: 1.5rem; } label { display: block; margin-bottom: 0.5rem; color: var(--text-muted); font-weight: 500; } select, input { width: 100%; padding: 0.75rem 1rem; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-main); font-size: 1rem; outline: none; transition: border-color 0.2s; } select:focus, input:focus { border-color: var(--accent-color); } button { width: 100%; padding: 1rem; background: var(--accent-color); border: none; border-radius: 8px; color: #0f172a; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background 0.2s, transform 0.1s; } button:hover { background: var(--accent-hover); } button:active { transform: scale(0.98); } .plan-output { margin-top: 2.5rem; display: none; } .plan-output h2 { margin-bottom: 1.5rem; border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem; font-size: 1.5rem; } .timetable { display: grid; grid-template-columns: 1fr; gap: 1rem; } .day-card { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .day-name { font-weight: bold; color: var(--accent-color); font-size: 1.1rem; } .workout-title { font-weight: 600; } .workout-desc { color: var(--text-muted); font-size: 0.9rem; line-height: 1.4; } .rest-day { border-left: 4px solid var(--text-muted); opacity: 0.7; } .workout-day { border-left: 4px solid var(--accent-color); } @media (min-width: 600px) { .row { display: flex; gap: 1rem; } .row .form-group { flex: 1; } } </style> </head> <body> <div class="container"> <h1><span>Fit</span>Planer</h1> <form id="planForm"> <div class="form-group"> <label for="sport">Sportart</label> <select id="sport" required> <option value="laufen">Laufen / Joggen</option> <option value="kraftsport">Krafttraining / Gym</option> <option value="radsport">Radsport</option> </select> </div> <div class="row"> <div class="form-group"> <label for="goal">Dein Ziel</label> <select id="goal" required> <option value="fitness">Allgemeine Fitness</option> <option value="abnehmen">Gewichtsverlust / Definition</option> <option value="wettkampf">Wettkampf / Muskelaufbau</option> </select> </div> <div class="form-group"> <label for="days">Trainingstage pro Woche</label> <select id="days" required> <option value="2">2 Tage</option> <option value="3" selected>3 Tage</option> <option value="4">4 Tage</option> <option value="5">5 Tage</option> </select> </div> </div> <button type="submit">Trainingsplan erstellen</button> </form> <div class="plan-output" id="planOutput"> <h2>Dein personalisierter Wochenplan</h2> <div class="timetable" id="timetable"></div> </div> </div> <script> document.getElementById('planForm').addEventListener('submit', function(e) { e.preventDefault(); const sport = document.getElementById('sport').value; const goal = document.getElementById('goal').value; const daysCount = parseInt(document.getElementById('days').value); generatePlan(sport, goal, daysCount); }); function generatePlan(sport, goal, daysCount) { const timetable = document.getElementById('timetable'); timetable.innerHTML = ''; // Vorherigen Plan löschen const daysOfWeek = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag']; // Verteilung der Trainingstage berechnen let workoutDays = []; if (daysCount === 2) workoutDays = [1, 4]; // Di, Fr else if (daysCount === 3) workoutDays = [0, 2, 4]; // Mo, Mi, Fr else if (daysCount === 4) workoutDays = [0, 1, 3, 4]; // Mo, Di, Do, Fr else if (daysCount === 5) workoutDays = [0, 1, 2, 4, 5]; // Mo, Di, Mi, Fr, Sa // Bausteine für die Trainingsinhalte const exercises = { laufen: { fitness: { title: "Grundlagen-Ausdauer", desc: "45 Min. entspanntes Laufen im Wohlfühltempo + 5 Min. Cooldown." }, abnehmen: { title: "HIIT-Intervalllauf", desc: "10 Min. Einlaufen, dann 8x (30 Sek. Sprint / 90 Sek. Gehen), 10 Min. Auslaufen." }, wettkampf: { title: "Tempolauf / Intervalle", desc: "15 Min. Einlaufen, 5km im Zieltempo oder 4x1000m Intervalle, Auslaufen." } }, kraftsport: { fitness: { title: "Ganzkörper-Workout", desc: "3 Sätze Kniebeugen, Liegestütze, Rudern, Kreuzheben und Planks (8-12 Wdh.)." }, abnehmen: { title: "Kraft-Zirkeltraining", desc: "4 Runden: 45 Sek. Belastung / 15 Sek. Pause (Kniebeugen, Liegestütze, Ausfallschritte, Mountain Climber)." }, wettkampf: { title: "Hypertrophie / Split", desc: "Fokus auf schwere Grundübungen (Bankdrücken, Kniebeugen oder Kreuzheben) mit 4 Sätzen à 6-8 Wdh." } }, radsport: { fitness: { title: "Genuss-Tour", desc: "60-90 Min. lockeres Kurbeln bei mittlerer Trittfrequenz auf flacher Strecke." }, abnehmen: { title: "Berg-Intervalle", desc: "45 Min. Fahrt mit 3-4 knackigen Anstiegen (jeweils 3 Min. hohe Intensität)." }, wettkampf: { title: "Distanz- & Schwellentraining", desc: "90+ Min. Fahrt mit 2 Block-Intervallen von je 15 Min. knapp unter der anaeroben Schwelle." } } }; const restDayDesc = "Regeneration. Nutze den Tag für leichtes Dehnen, Spaziergänge und ausreichend Schlaf."; // Plan generieren daysOfWeek.forEach((day, index) => { const isWorkoutDay = workoutDays.includes(index); const card = document.createElement('div'); card.classList.add('day-card'); if (isWorkoutDay) { card.classList.add('workout-day'); const content = exercises[sport][goal]; card.innerHTML = ` <div class="day-name">${day}</div> <div class="workout-title">💪 ${content.title}</div> <div class="workout-desc">${content.desc}</div> `; } else { card.classList.add('rest-day'); card.innerHTML = ` <div class="day-name">${day}</div> <div class="workout-title">😴 Erholungstag</div> <div class="workout-desc">${restDayDesc}</div> `; } timetable.appendChild(card); }); // Sichtbar machen document.getElementById('planOutput').style.display = 'block'; // Sanftes Scrollen zum Ergebnis document.getElementById('planOutput').scrollIntoView({ behavior: 'smooth' }); } </script> </body> </html>
⬛ Konsole
0
▲
Umbenennen…
Löschen…
Dateinamen kopieren
URL kopieren
Als <img> einfügen
⚙ Projekt-Eigenschaften
📝 Info
📱 PWA
Dein Edit-Code
🔒 geheim halten!
–
Nur mit diesem Code kannst du dein Projekt bearbeiten. Schreib ihn auf!
✓ Kopiert!
Projekt-Titel
Dein Name
Klasse
In der Galerie veröffentlichen
⚠ Deine Startseite muss
index.html
heißen.
Galerie-Code
Unter diesem Code ist dein Projekt in der Galerie sichtbar.
Mach dein Projekt zur
Progressive Web App
— dann können Nutzer es auf dem Handy installieren und offline nutzen.
App-Name (aus Projekt-Titel)
Icon-Farbe
✓ PWA aktiv —
manifest.json und service-worker.js wurden angelegt. index.html wurde aktualisiert.