diff --git a/css/berater.css b/css/berater.css new file mode 100644 index 0000000..6195f1f --- /dev/null +++ b/css/berater.css @@ -0,0 +1,139 @@ +/* Ahmad: Styles bleiben in .berater-section; Karten passen auch auf Mobilgeraete. */ +/* Globale Design-Variablen */ +.berater-section { + --bg-dark-1: #0d0d1a; + --bg-dark-2: #1a1a2e; + --accent-teal: #00B3C2; + + --text-white: #ffffff; + --text-lightgray: #F8FAFC; + --text-muted: #94A3B8; + + --font-display: 'Inter', system-ui, sans-serif; + --font-body: 'Inter', system-ui, sans-serif; +} + +.berater-section { + margin: 0; + padding: 0; + font-family: var(--font-body); + background-color: var(--bg-dark-1); + color: var(--text-white); +} + +.berater-section { + padding: 80px 20px; + display: flex; + justify-content: center; +} + +.berater-section .berater-container { + display: flex; + gap: 30px; + width: 100%; + max-width: 1000px; + flex-wrap: wrap; + justify-content: center; +} + +.berater-section .berater-card { + background-color: var(--bg-dark-2); + border-radius: 24px; + padding: 24px; + width: min(380px, 100%); + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +.berater-section .berater-image-wrapper { + background-color: var(--bg-dark-1); + border-radius: 20px; + padding: 10px; + margin-bottom: 24px; +} + +.berater-section .berater-image-wrapper img { + width: 100%; + height: 350px; + object-fit: cover; + border-radius: 16px; + display: block; +} + +.berater-section .berater-name { + margin: 0 0 8px 0; + font-family: var(--font-display); + font-size: 32px; + font-weight: 700; + color: var(--text-white); +} + +.berater-section .berater-rolle { + margin: 0 0 24px 0; + font-family: var(--font-body); + font-size: 14px; + color: var(--accent-teal); + text-transform: uppercase; + letter-spacing: 1.5px; + font-weight: 600; +} + +.berater-section .berater-bio-box { + background-color: var(--bg-dark-1); + border-radius: 16px; + padding: 24px; + flex-grow: 1; +} + +.berater-section .bio-title { + margin: 0 0 16px 0; + font-size: 16px; + font-weight: 600; + color: var(--text-lightgray); +} + +.berater-section .bio-text { + margin: 0; + font-size: 15px; + line-height: 1.6; + color: var(--text-muted); +} + +/* Styling für dynamische Listen (Zertifikate) */ +.berater-section .berater-liste { + margin: 8px 0 0 0; + padding-left: 20px; + color: var(--text-muted); + font-size: 14px; + line-height: 1.6; +} + +.berater-section .berater-liste li { + margin-bottom: 4px; +} + +/* Styling für dynamische Links (Buttons) */ +.berater-section .berater-links { + margin-top: 20px; + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.berater-section .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-section .berater-link-btn:hover { + background-color: #0d9668; + color: #ffffff; +} diff --git a/img/relindis_agethen.png b/img/relindis_agethen.png new file mode 100644 index 0000000..ca0e288 Binary files /dev/null and b/img/relindis_agethen.png differ diff --git a/img/relindis_agethen_1.jpg b/img/relindis_agethen_1.jpg new file mode 100644 index 0000000..718a6e3 Binary files /dev/null and b/img/relindis_agethen_1.jpg differ diff --git a/index.html b/index.html index 5cd95b3..bbcd02d 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,9 @@ + + @@ -88,6 +90,12 @@
+ + +
+ +
+
diff --git a/js/berater.js b/js/berater.js new file mode 100644 index 0000000..abaa43e --- /dev/null +++ b/js/berater.js @@ -0,0 +1,82 @@ +document.addEventListener('DOMContentLoaded', () => { + const container = document.getElementById('berater-container'); + + fetch('json/berater.json') + .then(response => { + if (!response.ok) throw new Error('Fehler beim Laden der JSON'); + return response.json(); + }) + .then(beraterDaten => { + beraterDaten.forEach(berater => { + const card = document.createElement('div'); + card.className = 'berater-card'; + + // 1. Bekannte Listen und Zusätze verarbeiten + let zertifikateHtml = ''; + if (berater.zertifikate && berater.zertifikate.length > 0) { + zertifikateHtml = `

Zertifikate

`; + } + + let linksHtml = ''; + if (berater.links && berater.links.length > 0) { + linksHtml = `
`; + berater.links.forEach(link => { + linksHtml += `${link.text}`; + }); + linksHtml += `
`; + } + + let zusatzHtml = ''; + if (berater.zusatzInfo) { + zusatzHtml = `

${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 += ` +

${schluessel}

+

${wert}

+ `; + } + } + + // 3. Die Karte zusammenbauen + card.innerHTML = ` +
+ ${berater.name} Profilbild +
+

${berater.name}

+

${berater.role}

+ +
+

${berater.bioTitle}

+

${berater.bioText}

+ + + ${eigeneFelderHtml} + + ${zusatzHtml} + ${zertifikateHtml} + ${linksHtml} +
+ `; + + container.appendChild(card); + }); + }) + .catch(error => { + console.error('Fehler:', error); + container.innerHTML = '

Daten konnten nicht geladen werden.

'; + }); +}); diff --git a/json/berater.json b/json/berater.json new file mode 100644 index 0000000..24079e2 --- /dev/null +++ b/json/berater.json @@ -0,0 +1,46 @@ +[ + { + "id": 1, + "name": "Relindis Agethen ", + "role": "TRIATHLET UND ERNÄHRUNGSBERATERIN", + "image": "img/relindis_agethen.png", + "bioTitle": "Kurzbiografie", + "bioText": "Relindis Agethen, genannt Lilli, ist seit 16 Jahren im Triathlon aktiv und bringt starke sportliche Erfolge mit: Vize-Europameisterin, Deutsche Meisterin und mehrfache Baden-Württembergische Meisterin. Als zertifizierte Ernährungsberaterin für Sportler B-Lizenz ergänzt sie das Team um Leistungsentwicklung und Ernährungswissen.", + "zertifikate": [ + "Zertifizierter Triathlon-Trainer", + "Ernährungscoach B-Lizenz" + ], + "links": [ + { + "text": "Instagram Profil", + "url": "https://instagram.com/lili" + }, + { + "text": "Trainingsplan buchen", + "url": "https://tri-hub.de/booking" + } + ] + }, + { + "id": 2, + "name": "Relindis Agethen ", + "role": "TRIATHLET UND ERNÄHRUNGSBERATERIN", + "image": "img/relindis_agethen_1.jpg", + "bioTitle": "Kurzbiografie", + "bioText": "Relindis Agethen, genannt Lilli, ist seit 16 Jahren im Triathlon aktiv und bringt starke sportliche Erfolge mit: Vize-Europameisterin, Deutsche Meisterin und mehrfache Baden-Württembergische Meisterin. Als zertifizierte Ernährungsberaterin für Sportler B-Lizenz ergänzt sie das Team um Leistungsentwicklung und Ernährungswissen.", + "zertifikate": [ + "Zertifizierter Triathlon-Trainer", + "Ernährungscoach B-Lizenz" + ], + "links": [ + { + "text": "Instagram Profil", + "url": "https://instagram.com/lili" + }, + { + "text": "Trainingsplan buchen", + "url": "https://tri-hub.de/booking" + } + ] + } +] \ No newline at end of file