Mini HTML-Editor

trainingsplan.html Öffnen

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

<img src="trainingsplan.html" alt=""><!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pro Planer</title>
    <style>
        /* SF Pro / iOS Light System Font Style */
        :root {
            --bg-color: #f2f2f7;
            --card-bg: #ffffff;
            --card-sub-bg: #f2f2f7;
            --accent-color: #ff3b30; /* iOS Vibrant Red */
            --text-main: #000000;
            --text-muted: #000000;
            --text-ios-blue: #007aff;
            --border-color: #e5e5ea;
            --success-color: #34c759;
        }

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

body {
            background-color: var(--bg-color);
            color: var(--text-main);
            padding: 2rem 1rem;
            display: flex;
            justify-content: center;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }

.container {
            width: 100%;
            max-width: 600px;
        }

.app-header {
            text-align: center;
            margin-bottom: 2.5rem;
            padding-top: 1rem;
        }

.app-header h1 {
            font-size: 2.5rem;
            font-weight: 800;
            letter-spacing: -0.5px;
            margin-bottom: 0.2rem;
            color: var(--text-main);
        }

.app-header p {
            color: var(--text-muted);
            font-size: 1rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

/* iOS Form Styles */
        .ios-list {
            background: var(--card-bg);
            border-radius: 12px;
            margin-bottom: 2rem;
            overflow: hidden;
            border: 1px solid var(--border-color);
        }

.ios-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.2rem;
            border-bottom: 1px solid var(--border-color);
        }

.ios-row:last-child {
            border-bottom: none;
        }

.ios-row label {
            font-weight: 500;
            font-size: 1.05rem;
        }

.ios-select {
            background: transparent;
            border: none;
            color: var(--text-ios-blue);
            font-size: 1.05rem;
            outline: none;
            text-align: right;
            cursor: pointer;
            direction: rtl;
            padding-right: 0.5rem;
        }

.ios-select option {
            background: var(--card-bg);
            color: var(--text-main);
            direction: ltr;
        }

.ios-btn {
            width: 100%;
            padding: 1.1rem;
            background: var(--text-ios-blue);
            border: none;
            border-radius: 12px;
            color: #ffffff;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s;
            box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
        }

.ios-btn:active {
            opacity: 0.8;
        }

/* Plan Output */
        .plan-output {
            margin-top: 3rem;
            display: none;
        }

.section-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1.2rem;
            padding-left: 0.5rem;
        }

.day-card {
            background: var(--card-bg);
            border-radius: 14px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            border: 1px solid var(--border-color);
        }

.day-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 0.5rem;
        }

.day-name {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--accent-color);
        }

.session-badge {
            background: var(--card-sub-bg);
            color: var(--text-muted);
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }

.unit-container {
            background: var(--card-sub-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 1rem;
            margin-top: 1rem;
        }

.unit-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-ios-blue);
            margin-bottom: 0.8rem;
        }

/* Stopwatch Styles */
        .stopwatch-container {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 0.6rem 1rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

.stopwatch-time {
            font-family: monospace;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text-main);
        }

.stopwatch-btn {
            background: var(--text-ios-blue);
            color: white;
            border: none;
            padding: 0.3rem 0.6rem;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            margin-left: 0.3rem;
        }

.stopwatch-btn.stop { background: var(--accent-color); }
        .stopwatch-btn.reset { background: var(--text-muted); }

/* Phasen-Strukturierung */
        .phase-block {
            margin-bottom: 1.2rem;
        }

.phase-block:last-child {
            margin-bottom: 0;
        }

.phase-name {
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-muted);
            font-weight: 700;
            margin-bottom: 0.4rem;
        }

.exercise-item {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 0.8rem;
            margin-bottom: 0.5rem;
        }

.exercise-header {
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 0.3rem;
        }

.exercise-desc {
            font-size: 0.85rem;
            color: var(--text-main);
            line-height: 1.4;
            margin-bottom: 0.5rem;
        }

.exercise-details {
            list-style-type: none;
            padding-left: 0;
            margin-bottom: 0.5rem;
        }

.exercise-details li {
            font-size: 0.85rem;
            color: var(--text-muted);
            position: relative;
            padding-left: 1rem;
        }

.exercise-details li::before {
            content: "•";
            color: var(--text-ios-blue);
            font-weight: bold;
            position: absolute;
            left: 0;
        }

.exercise-img {
            width: 100%;
            height: 140px;
            background: #e5e5ea;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #8e8e93;
            font-size: 0.8rem;
            font-style: italic;
            object-fit: cover;
            border: 1px solid var(--border-color);
        }

.rest-day {
            text-align: center;
            padding: 2rem 1rem;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="app-header">
        <h1>Pro Planer</h1>
        <p>You vs You</p>
    </div>
    
    <form id="planForm">
        <div class="ios-list">
            <div class="ios-row">
                <label for="sport">Disziplin</label>
                <select id="sport" class="ios-select" required>
                    <option value="fechten">Fechten (Fencing)</option>
                    <option value="fussball">Fußball / Ballsport</option>
                    <option value="kraftsport">Functional Fitness / Gym</option>
                    <option value="laufen">Laufsport / Leichtathletik</option>
                    <option value="kampfsport">Kampfsport</option>
                </select>
            </div>

<div class="ios-row">
                <label for="goal">Fokus-Ziel</label>
                <select id="goal" class="ios-select" required>
                    <option value="wettkampf">Wettkampf-Performance</option>
                    <option value="fitness">Allround-Athletik</option>
                    <option value="abnehmen">Definition & Fettverbrennung</option>
                </select>
            </div>

<div class="ios-row">
                <label for="days">Trainingstage / Woche</label>
                <select id="days" class="ios-select" 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 class="ios-row">
                <label for="frequency">Einheiten pro Tag</label>
                <select id="frequency" class="ios-select" required>
                    <option value="1">1 Einheit am Tag</option>
                    <option value="2">2 Einheiten am Tag (Double Session)</option>
                </select>
            </div>
        </div>

<button type="submit" class="ios-btn">Start</button>
    </form>

<div class="plan-output" id="planOutput">
        <div class="section-title">Dein Trainings-Dashboard</div>
        <div id="timetable"></div>
    </div>
</div>

document.getElementById('planForm').addEventListener('submit', function(e) {
        e.preventDefault();
        // Eventuelle alte Timer stoppen
        Object.keys(timers).forEach(id => clearInterval(timers[id].interval));
        timers = {};
        
        generatePlan(
            document.getElementById('sport').value,
            document.getElementById('goal').value,
            parseInt(document.getElementById('days').value),
            parseInt(document.getElementById('frequency').value)
        );
    });

function toggleTimer(id) {
        const timerObj = timers[id];
        const btn = document.getElementById(`btn-${id}`);
        const display = document.getElementById(`time-${id}`);

if (timerObj.running) {
            clearInterval(timerObj.interval);
            timerObj.running = false;
            btn.textContent = 'Start';
            btn.classList.remove('stop');
        } else {
            timerObj.running = true;
            btn.textContent = 'Stopp';
            btn.classList.add('stop');
            timerObj.interval = setInterval(() => {
                timerObj.seconds++;
                let mins = Math.floor(timerObj.seconds / 60).toString().padStart(2, '0');
                let secs = (timerObj.seconds % 60).toString().padStart(2, '0');
                display.textContent = `${mins}:${secs}`;
            }, 1000);
        }
    }

function generatePlan(sport, goal, daysCount, frequency) {
        const timetable = document.getElementById('timetable');
        timetable.innerHTML = ''; 
        
        const daysOfWeek = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];
        
        let workoutDays = [];
        if (daysCount === 2) workoutDays = [1, 4];
        else if (daysCount === 3) workoutDays = [0, 2, 4];
        else if (daysCount === 4) workoutDays = [0, 1, 3, 4];
        else if (daysCount === 5) workoutDays = [0, 1, 2, 4, 5];

// 7 komplett unterschiedliche Tage im Pool
        const dynamicExercisePool = {
            mornings: [
                { phase: "Mobilisation & Core", title: "Day 1 Dynamic Flow", desc: "Aktivierung der Muskelketten für den Wochenstart.", details: ["3 Sätze à 10 Wiederholungen", "Pause: 45 Sekunden", "Fokus: Kontrollierte Ausführung"], img: "https://images.unsplash.com/photo-1601925260368-ae2f83cf8b7f?auto=format&fit=crop&w=500&q=80" },
                { phase: "Koordination", title: "Day 2 Agility Drills", desc: "Präzises Fußarbeits- und Gleichgewichtstraining.", details: ["4 Sätze à 30 Sekunden", "Pause: 60 Sekunden", "Fokus: Maximale Frequenz"], img: "https://images.unsplash.com/photo-1508098682722-e99c43a406b2?auto=format&fit=crop&w=500&q=80" },
                { phase: "Schnellkraft", title: "Day 3 Plyometrisches Training", desc: "Explosive Sprungvarianten zur Rekrutierung schneller Muskelfasern.", details: ["5 Sätze à 6 Sprünge", "Pause: 90 Sekunden", "Fokus: Minimale Bodenkontaktzeit"], img: "https://images.unsplash.com/photo-1541534741688-6078c6bfb5c5?auto=format&fit=crop&w=500&q=80" },
                { phase: "Aktivierung", title: "Day 4 CNS Stimulation", desc: "Kurze, hochintensive Reize für das zentrale Nervensystem.", details: ["3 Sätze à 8 Wiederholungen", "Pause: 60 Sekunden", "Fokus: Explosive Kontraktion"], img: "https://images.unsplash.com/photo-1517838277536-f5f99be501cd?auto=format&fit=crop&w=500&q=80" },
                { phase: "Stabilität", title: "Day 5 Isometrischer Core-Fokus", desc: "Statische Halteübungen zur Absicherung der Rumpf-Achse.", details: ["4 Sätze à 45 Sekunden", "Pause: 30 Sekunden", "Fokus: Maximale Rumpfspannung"], img: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?auto=format&fit=crop&w=500&q=80" },
                { phase: "Kondition", title: "Day 6 Aerobe Basis", desc: "Grundlagenausdauer im moderaten Intensitätsbereich.", details: ["1 Satz à 20 Minuten", "Pulsbereich: GA1 / Moderat", "Fokus: Konstantes Tempo"], img: "https://images.unsplash.com/photo-1434596955112-0f6643de2ba6?auto=format&fit=crop&w=500&q=80" },
                { phase: "Regeneration", title: "Day 7 Active Mobility", desc: "Sanfter Beweglichkeitsflow am aktiven Pausetag.", details: ["2 Sätze pro Gelenk", "Pause: Keine", "Fokus: Tiefe Atmung"], img: "https://images.unsplash.com/photo-1600881333168-2ef49b341f30?auto=format&fit=crop&w=500&q=80" }
            ],
            evenings: [
                { phase: "Hauptteil Kraft", title: "Day 1 Compound Overload", desc: "Mehrgelenksübungen zur Steigerung der Grundkraft.", details: ["4 Sätze à 8 Wiederholungen", "Pause: 120 Sekunden", "Zusatzgewicht: Progressiv steigern"], img: "https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=500&q=80" },
                { phase: "Spezifische Kraft", title: "Day 2 Asymmetrie-Ausgleich", desc: "Unilaterales Training zur Behebung muskulärer Dysbalancen.", details: ["3 Sätze à 10 Wiederholungen je Seite", "Pause: 60 Sekunden", "Fokus: Schwächere Seite beginnt"], img: "https://images.unsplash.com/photo-1574680096145-d05b474e2155?auto=format&fit=crop&w=500&q=80" },
                { phase: "Hypertrophie", title: "Day 3 Volumentraining", desc: "Gezielter Muskelaufbau durch erhöhtes Trainingsvolumen.", details: ["4 Sätze à 12 Wiederholungen", "Pause: 75 Sekunden", "Fokus: Muscle-Mind-Connection"], img: "https://images.unsplash.com/photo-1518459031867-a89b944bffe4?auto=format&fit=crop&w=500&q=80" },
                { phase: "Kondition", title: "Day 4 Anaerobes Intervall", desc: "Hochintensive Intervalle zur Verschiebung der Laktatschwelle.", details: ["6 Durchgänge à 40 Sekunden Belastung", "Pause: 20 Sekunden", "Intensität: All-Out"], img: "https://images.unsplash.com/photo-1599447421416-3414500d18a5?auto=format&fit=crop&w=500&q=80" },
                { phase: "Kraftausdauer", title: "Day 5 Zirkeltraining", desc: "Komplexe Ganzkörper-Muster unter akkumulierter Ermüdung.", details: ["3 Runden à 5 Übungen", "Pause nach Runde: 120 Sekunden", "Fokus: Saubere Technik trotz Erschöpfung"], img: "https://images.unsplash.com/photo-1614093633190-c205775836fa?auto=format&fit=crop&w=500&q=80" },
                { phase: "Finisher", title: "Day 6 Metabolic Burnout", desc: "Abschließender Reiz zur vollständigen Glykogenentleerung.", details: ["1 Satz bis zum Muskelversagen", "Pause: Keine", "Fokus: Mentale Härte"], img: "https://images.unsplash.com/photo-1541534741688-6078c6bfb5c5?auto=format&fit=crop&w=500&q=80" },
                { phase: "Decompression", title: "Day 7 Fascial Release", desc: "Regenerationsförderung mittels Blackroll und statischem Dehnen.", details: ["90 Sekunden pro Muskelgruppe", "Atemfrequenz: Langsam", "Fokus: Detonisierung"], img: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?auto=format&fit=crop&w=500&q=80" }
            ]
        };

daysOfWeek.forEach((day, index) => {
            const isWorkoutDay = workoutDays.includes(index);
            const card = document.createElement('div');
            card.classList.add('day-card');
            
            // Eindeutige IDs für Timer generieren
            const timerId1 = `timer_${index}_1`;
            const timerId2 = `timer_${index}_2`;
            
            timers[timerId1] = { interval: null, seconds: 0, running: false };
            timers[timerId2] = { interval: null, seconds: 0, running: false };

if (isWorkoutDay) {
                // Übungen basierend auf dem Wochentags-Index wählen -> Garantiert jeden Tag anders!
                const morningEx = dynamicExercisePool.mornings[index];
                const eveningEx = dynamicExercisePool.evenings[index];

let htmlContent = `
                    <div class="day-header">
                        <div class="day-name">${day}</div>
                        <div class="session-badge">${frequency === 2 ? '2 Einheiten' : '1 Einheit'}</div>
                    </div>
                `;

// EINHEIT 1
                htmlContent += `
                    <div class="unit-container">
                        <div class="unit-title">☀️ Einheit 1: Basis & Reaktivität</div>
                        
                        <div class="stopwatch-container">
                            <span class="stopwatch-time" id="time-${timerId1}">00:00</span>
                            <div>
                                <button class="stopwatch-btn" id="btn-${timerId1}" onclick="toggleTimer('${timerId1}')">Start</button>
                                <button class="stopwatch-btn reset" onclick="resetTimer('${timerId1}')">Reset</button>
                            </div>
                        </div>

<div class="phase-block">
                            <div class="phase-name">${morningEx.phase}</div>
                            <div class="exercise-item">
                                <div class="exercise-header">${morningEx.title}</div>
                                <div class="exercise-desc">${morningEx.desc}</div>
                                <ul class="exercise-details">
                                    ${morningEx.details.map(detail => `<li>${detail}</li>`).join('')}
                                </ul>
                                <img src="${morningEx.img}" class="exercise-img" alt="${morningEx.title}">
                            </div>
                        </div>
                    </div>
                `;

// EINHEIT 2
                const titleColor = frequency === 2 ? '#ff9500' : 'var(--text-ios-blue)';
                const borderColor = frequency === 2 ? '#ff9500' : 'var(--border-color)';
                const unitHeader = frequency === 2 ? '🌙 Einheit 2: Kraft & Kondition' : '🏋️‍♂️ Hauptteil & Abschluss';

htmlContent += `
                    <div class="unit-container" style="border-color: ${borderColor};">
                        <div class="unit-title" style="color: ${titleColor};">${unitHeader}</div>
                        
                        <div class="stopwatch-container">
                            <span class="stopwatch-time" id="time-${timerId2}">00:00</span>
                            <div>
                                <button class="stopwatch-btn" id="btn-${timerId2}" onclick="toggleTimer('${timerId2}')">Start</button>
                                <button class="stopwatch-btn reset" onclick="resetTimer('${timerId2}')">Reset</button>
                            </div>
                        </div>

<div class="phase-block">
                            <div class="phase-name">${eveningEx.phase}</div>
                            <div class="exercise-item">
                                <div class="exercise-header">${eveningEx.title}</div>
                                <div class="exercise-desc">${eveningEx.desc}</div>
                                <ul class="exercise-details">
                                    ${eveningEx.details.map(detail => `<li>${detail}</li>`).join('')}
                                </ul>
                                <img src="${eveningEx.img}" class="exercise-img" alt="${eveningEx.title}">
                            </div>
                        </div>
                    </div>
                `;

card.innerHTML = htmlContent;
            } else {
                // REST DAY
                card.innerHTML = `
                    <div class="day-header">
                        <div class="day-name" style="color: var(--text-muted);">${day}</div>
                        <div class="session-badge">Soll-Ruhe</div>
                    </div>
                    <div class="rest-day">
                        <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">🔋</div>
                        <div style="font-weight:600; margin-bottom: 0.2rem;">Vollständige Regeneration</div>
                        <p style="font-size:0.85rem; color: var(--text-muted);">Schlafoptimierung, sanftes Stretching & Flüssigkeitsausgleich. Heute baut dein Körper die Muskeln auf.</p>
                    </div>
                `;
            }
            
            timetable.appendChild(card);
        });

document.getElementById('planOutput').style.display = 'block';
        document.getElementById('planOutput').scrollIntoView({ behavior: 'smooth' });
    }
</script>

</body>
</html>

⚙ Projekt-Eigenschaften