Mini HTML-Editor

milena2.html Öffnen

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

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Trainingsplan Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {
        margin: 0;
        font-family: Arial, sans-serif;
        background: #f5f5f5;
        color: #222;
    }

.container {
        max-width: 600px;
        margin: 40px auto;
        background: white;
        padding: 24px;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

h1, h2 {
        margin-top: 0;
        font-weight: 600;
    }

label {
        display: block;
        margin-top: 14px;
        font-size: 0.9rem;
        font-weight: 600;
    }

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

button {
        margin-top: 20px;
        width: 100%;
        padding: 12px;
        background: #222;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        cursor: pointer;
    }

button:hover {
        background: #444;
    }

/* Plan Screen */
    #planScreen {
        display: none;
        max-width: 700px;
        margin: 40px auto;
        background: white;
        padding: 24px;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

.day-box {
        padding: 14px;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.day-box label {
        margin: 0;
        font-weight: normal;
    }

.checkbox {
        width: 22px;
        height: 22px;
        border: 2px solid #222;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.checkbox.checked {
        background: #222;
        color: white;
    }

</style>
</head>
<body>

<div class="container" id="startScreen">
    <h1>Trainingsplan Generator</h1>
    <p>Gib deine Daten ein und erhalte einen individuellen Trainingsplan.</p>

<label>Alter</label>
    <input type="number" id="age" placeholder="z.B. 28">

<label>Geschlecht</label>
    <select id="gender">
        <option value="">Bitte wählen</option>
        <option value="m">Männlich</option>
        <option value="w">Weiblich</option>
        <option value="d">Divers</option>
    </select>

<label>Ziel</label>
    <select id="goal">
        <option value="">Bitte wählen</option>
        <option value="muskelaufbau">Muskelaufbau</option>
        <option value="abnehmen">Abnehmen</option>
        <option value="ausdauer">Ausdauer verbessern</option>
        <option value="fitness">Allgemeine Fitness</option>
    </select>

<label>Sportart</label>
    <input type="text" id="sport" placeholder="z.B. Krafttraining, Laufen">

<label>Trainingstage pro Woche</label>
    <input type="number" id="days" min="1" max="7" placeholder="z.B. 4">

<button onclick="generatePlan()">Plan erstellen</button>
</div>

<div id="planScreen">
    <h2>Dein individueller Trainingsplan</h2>
    <p id="planInfo"></p>

<button onclick="location.reload()">Neuen Plan erstellen</button>
</div>

if (!age || !gender || !goal || !sport || !days) {
        alert("Bitte alle Felder ausfüllen.");
        return;
    }

// Hide start screen, show plan screen
    document.getElementById("startScreen").style.display = "none";
    document.getElementById("planScreen").style.display = "block";

document.getElementById("planInfo").innerText =
        `${days} Trainingstage pro Woche · Ziel: ${goal} · Sportart: ${sport}`;

const planList = document.getElementById("planList");
    planList.innerHTML = "";

const templates = {
        muskelaufbau: "Krafttraining – Fokus Grundübungen + Hypertrophie",
        abnehmen: "Cardio + Ganzkörpertraining – moderat, hoher Kalorienverbrauch",
        ausdauer: "Ausdauertraining – längere Einheiten + Intervallmix",
        fitness: "Mix aus Kraft, Cardio und Mobility"
    };

for (let i = 1; i <= days; i++) {
        const box = document.createElement("div");
        box.className = "day-box";

const label = document.createElement("label");
        label.innerHTML = `<strong>Tag ${i}:</strong> ${templates[goal]}`;

const checkbox = document.createElement("div");
        checkbox.className = "checkbox";
        checkbox.onclick = () => checkbox.classList.toggle("checked");

box.appendChild(label);
        box.appendChild(checkbox);
        planList.appendChild(box);
    }
}
</script>

</body>
</html>

⚙ Projekt-Eigenschaften