diff --git a/.DS_Store b/.DS_Store index 49132ec..5a1f190 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/images/Ohne Titel.jpg b/images/Ohne Titel.jpg new file mode 100644 index 0000000..5814a4c Binary files /dev/null and b/images/Ohne Titel.jpg differ diff --git a/images/Ohne Titel.png b/images/Ohne Titel.png new file mode 100644 index 0000000..e020689 Binary files /dev/null and b/images/Ohne Titel.png differ diff --git a/images/paket-premium.jpg b/images/paket-premium.jpg new file mode 100644 index 0000000..b9fda4d Binary files /dev/null and b/images/paket-premium.jpg differ diff --git a/images/paket-standard.jpg b/images/paket-standard.jpg new file mode 100644 index 0000000..4039f34 Binary files /dev/null and b/images/paket-standard.jpg differ diff --git a/images/paket-starter.jpg b/images/paket-starter.jpg new file mode 100644 index 0000000..033f633 Binary files /dev/null and b/images/paket-starter.jpg differ diff --git a/images/trihub-coaching-premium-Mm4RUEKQVkeJSbS3NF4PJi.webp b/images/trihub-coaching-premium-Mm4RUEKQVkeJSbS3NF4PJi.webp new file mode 100644 index 0000000..66f577a Binary files /dev/null and b/images/trihub-coaching-premium-Mm4RUEKQVkeJSbS3NF4PJi.webp differ diff --git a/images/trihub-coaching-standard-btv5cdK5BNczLZRb9yiaWj.webp b/images/trihub-coaching-standard-btv5cdK5BNczLZRb9yiaWj.webp new file mode 100644 index 0000000..229346a Binary files /dev/null and b/images/trihub-coaching-standard-btv5cdK5BNczLZRb9yiaWj.webp differ diff --git a/images/trihub-coaching-standard.webp b/images/trihub-coaching-standard.webp new file mode 100644 index 0000000..4343962 Binary files /dev/null and b/images/trihub-coaching-standard.webp differ diff --git a/images/trihub-coaching-starter-fZmSyY3qhds2EkisjRRnpf.webp b/images/trihub-coaching-starter-fZmSyY3qhds2EkisjRRnpf.webp new file mode 100644 index 0000000..df1856c Binary files /dev/null and b/images/trihub-coaching-starter-fZmSyY3qhds2EkisjRRnpf.webp differ diff --git a/images/trihub-ribbon-abstract-MUWs2QmtVzRHFkggzyNoRR.webp b/images/trihub-ribbon-abstract-MUWs2QmtVzRHFkggzyNoRR.webp new file mode 100644 index 0000000..bd072d0 Binary files /dev/null and b/images/trihub-ribbon-abstract-MUWs2QmtVzRHFkggzyNoRR.webp differ diff --git a/js/leistungen.js b/js/leistungen.js index e37dbee..f7f6143 100644 --- a/js/leistungen.js +++ b/js/leistungen.js @@ -2,11 +2,11 @@ // Markiert das gewählte Paket visuell und stellt die Auswahl bereit, // damit US-01-03 (Pakete online buchen) später darauf aufbauen kann. +// US-01-02 Leistungsübersicht document.addEventListener("DOMContentLoaded", async () => { const section = document.getElementById("leistungen"); if (!section) return; - // Integration: Der Datenpfad muss zum vorhandenen JSON-Ordner passen. let daten; try { const response = await fetch("json/pakete.json"); @@ -18,45 +18,65 @@ document.addEventListener("DOMContentLoaded", async () => { return; } - // Elemente aus dem HTML holen const titel = section.querySelector(".pakete__titel"); const text = section.querySelector(".pakete__text"); const grid = section.querySelector(".pakete__grid"); - // Intro mit Daten aus JSON füllen titel.textContent = daten.intro.titel; text.textContent = daten.intro.text; - // Vorhandenen Inhalt entfernen grid.innerHTML = ""; - // Für jedes Paket eine Karte erstellen - daten.pakete.forEach(paket => { + // Mappe Bild-Platzhalter zu den Paketen + const bilderMap = { + "Starter": "images/paket-starter.jpg", + "STANDART": "images/paket-standard.jpg", + "Rundum Sorglos Paket": "images/paket-premium.jpg" + }; - // Artikel erstellen + daten.pakete.forEach(paket => { const karte = document.createElement("article"); karte.classList.add("paket-karte"); - // Empfohlenes Paket bekommt zusätzliche Klasse if (paket.empfohlen) { karte.classList.add("paket-karte--empfohlen"); } - // Badge nur erstellen, wenn eines vorhanden ist - if (paket.badge) { - const badge = document.createElement("p"); - badge.classList.add("paket-karte__badge"); - badge.textContent = paket.badge; - karte.appendChild(badge); - } + // --- 1. Bildbereich (Platzhalter) --- + const imgContainer = document.createElement("div"); + imgContainer.classList.add("paket-karte__image-wrapper"); + + const img = document.createElement("img"); + img.src = bilderMap[paket.name] || "images/paket-placeholder.jpg"; + img.alt = `Vorschau ${paket.name}`; + img.classList.add("paket-karte__image"); + imgContainer.appendChild(img); + + karte.appendChild(imgContainer); + + // --- Content-Container für sauberes Layout --- + const content = document.createElement("div"); + content.classList.add("paket-karte__content"); + + // --- 2. Header: Paketname + Badge nebeneinander --- + const header = document.createElement("div"); + header.classList.add("paket-karte__header"); - // Name const name = document.createElement("h3"); name.classList.add("paket-karte__name"); name.textContent = paket.name; - karte.appendChild(name); + header.appendChild(name); - // Preis + if (paket.badge) { + const badge = document.createElement("span"); + badge.classList.add("paket-karte__badge"); + badge.textContent = paket.badge; + header.appendChild(badge); + } + + content.appendChild(header); + + // --- 3. Preis --- const preis = document.createElement("p"); preis.classList.add("paket-karte__preis"); @@ -70,15 +90,15 @@ document.addEventListener("DOMContentLoaded", async () => { preis.appendChild(betrag); preis.appendChild(zeitraum); - karte.appendChild(preis); + content.appendChild(preis); - // Beschreibung + // --- 4. Beschreibung --- const beschreibung = document.createElement("p"); beschreibung.classList.add("paket-karte__beschreibung"); beschreibung.textContent = paket.beschreibung; - karte.appendChild(beschreibung); + content.appendChild(beschreibung); - // Leistungen + // --- 5. Leistungsliste --- const liste = document.createElement("ul"); liste.classList.add("paket-karte__leistungen"); @@ -88,9 +108,9 @@ document.addEventListener("DOMContentLoaded", async () => { liste.appendChild(punkt); }); - karte.appendChild(liste); + content.appendChild(liste); - // Button + // --- 6. Button --- const button = document.createElement("button"); button.classList.add("paket-karte__cta"); button.type = "button"; @@ -98,7 +118,6 @@ document.addEventListener("DOMContentLoaded", async () => { button.dataset.paket = paket.dataPaket; button.setAttribute("aria-pressed", "false"); - // Die Paketauswahl aus der ersten Version auch nach dem JSON-Rendering erhalten. button.addEventListener("click", () => { grid.querySelectorAll(".paket-karte").forEach(andereKarte => { andereKarte.classList.remove("paket-karte--ausgewaehlt"); @@ -111,9 +130,9 @@ document.addEventListener("DOMContentLoaded", async () => { })); }); - karte.appendChild(button); + content.appendChild(button); + karte.appendChild(content); - // Karte ins Grid einfügen grid.appendChild(karte); }); -}); +}); \ No newline at end of file