diff --git a/css/style.css b/css/style.css index 416bdce..dc3bb1c 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,4 @@ +/* Globale Design-Variablen */ :root { --bg-dark-1: #0d0d1a; --bg-dark-2: #1a1a2e; @@ -7,7 +8,6 @@ --text-lightgray: #F8FAFC; --text-muted: #94A3B8; - /* Beide Schrift-Variablen nutzen jetzt Sans-Serif (Inter) */ --font-display: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; } @@ -59,7 +59,6 @@ body { display: block; } -/* Name nutzt jetzt Sans-Serif */ .berater-name { margin: 0 0 8px 0; font-family: var(--font-display); @@ -97,4 +96,42 @@ body { font-size: 15px; line-height: 1.6; color: var(--text-muted); +} + +/* Styling für dynamische Listen (Zertifikate) */ +.berater-liste { + margin: 8px 0 0 0; + padding-left: 20px; + color: var(--text-muted); + font-size: 14px; + line-height: 1.6; +} + +.berater-liste li { + margin-bottom: 4px; +} + +/* Styling für dynamische Links (Buttons) */ +.berater-links { + margin-top: 20px; + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.berater-link-btn { + display: inline-block; + background-color: var(--accent-teal); + color: var(--bg-dark-1); + text-decoration: none; + padding: 8px 16px; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + transition: background-color 0.3s ease; +} + +.berater-link-btn:hover { + background-color: #0d9668; + color: #ffffff; } \ No newline at end of file diff --git a/js/berater.js b/js/berater.js index 52666ae..148cd24 100644 --- a/js/berater.js +++ b/js/berater.js @@ -1,20 +1,57 @@ document.addEventListener('DOMContentLoaded', () => { - // Die neue ID 'berater-container' auswählen const container = document.getElementById('berater-container'); fetch('json/berater.json') .then(response => { - if (!response.ok) { - throw new Error('Fehler beim Laden der Datei: json/berater.json'); - } + if (!response.ok) throw new Error('Fehler beim Laden der JSON'); return response.json(); }) .then(beraterDaten => { - // Variablen von 'advisor' zu 'berater' geändert beraterDaten.forEach(berater => { const card = document.createElement('div'); - card.className = 'berater-card'; // Neue Klasse + card.className = 'berater-card'; + // 1. Bekannte Listen und Zusätze verarbeiten + let zertifikateHtml = ''; + if (berater.zertifikate && berater.zertifikate.length > 0) { + zertifikateHtml = `
${berater.zusatzInfo}
`; + } + + // 2. NEU: Alle eigenen/unbekannten Felder automatisch generieren + // Wir definieren zuerst, welche Felder Standard sind und ignoriert werden sollen + const standardFelder = ['id', 'name', 'role', 'image', 'bioTitle', 'bioText', 'zertifikate', 'links', 'zusatzInfo']; + let eigeneFelderHtml = ''; + + // Wir durchlaufen jeden Eintrag in der JSON für diesen Berater + for (const [schluessel, wert] of Object.entries(berater)) { + // Wenn das Feld kein Standardfeld ist, bauen wir daraus Überschrift + Text + if (!standardFelder.includes(schluessel)) { + eigeneFelderHtml += ` +${wert}
+ `; + } + } + + // 3. Die Karte zusammenbauen card.innerHTML = `${berater.bioText}
+ + + ${eigeneFelderHtml} + + ${zusatzHtml} + ${zertifikateHtml} + ${linksHtml}Die Beraterprofile konnten nicht geladen werden.
'; + container.innerHTML = 'Daten konnten nicht geladen werden.
'; }); }); \ No newline at end of file diff --git a/json/berater.json b/json/berater.json index 20cee1e..32493ff 100644 --- a/json/berater.json +++ b/json/berater.json @@ -1,18 +1,42 @@ [ { "id": 1, - "name": "Relindis Agethen", - "role": "TRIATHLETIN UND BERATERIN", - "image": "img/relindis_agethen.png", + "name": "Rolf Braun", + "role": "TRIATHLET UND HEAD COACH", + "image": "img/rolf_braun.jpg", "bioTitle": "Kurzbiografie", - "bioText": "Relindis Agethen bereichert das Team mit ihrer umfassenden Expertise. Als aktive Triathletin und Beraterin weiß sie genau, worauf es bei der Vorbereitung ankommt und unterstützt Athletinnen und Athleten dabei, ihre persönlichen Ziele sicher zu erreichen." + "bioText": "Rolf Braun verbindet 16 Jahre Triathlon-Erfahrung mit 25 Jahren Coaching-Praxis...", + "zertifikate": [ + "Zertifizierter Triathlon-Trainer", + "Ernährungscoach B-Lizenz" + ], + "links": [ + { + "text": "Instagram Profil", + "url": "https://instagram.com/rolf" + }, + { + "text": "Trainingsplan buchen", + "url": "https://tri-hub.de/booking" + } + ] }, { "id": 2, - "name": "Relindis Agethen", - "role": "TRIATHLETIN UND BERATERIN", - "image": "img/relindis_agethen.png", + "name": "Werner Ahl", + "role": "TRIATHLET UND COACH", + "image": "img/werner_ahl.jpg", "bioTitle": "Kurzbiografie", - "bioText": "Relindis Agethen bereichert das Team mit ihrer umfassenden Expertise. Als aktive Triathletin und Beraterin weiß sie genau, worauf es bei der Vorbereitung ankommt und unterstützt Athletinnen und Athleten dabei, ihre persönlichen Ziele sicher zu erreichen." + "bioText": "Werner Ahl ist seit 42 Jahren im Triathlon zuhause und hat seitdem jedes Jahr...", + "bla bla bla": "ba ba ba" + }, + { + "id": 2, + "name": "Werner Ahl", + "role": "TRIATHLET UND COACH", + "image": "img/werner_ahl.jpg", + "bioTitle": "Kurzbiografie", + "bioText": "Werner Ahl ist seit 42 Jahren im Triathlon zuhause und hat seitdem jedes Jahr...", + "Zertifikate": "sddfdsaf " } ] \ No newline at end of file