From 28028e76df78cf7400bde6eb2126081b23467a31 Mon Sep 17 00:00:00 2001 From: luay
Date: Mon, 28 Sep 2026 20:43:13 +0200 Subject: [PATCH] =?UTF-8?q?Titel=20und=20Text=20f=C3=BCr=20Berater=20einge?= =?UTF-8?q?f=C3=BCgt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/berater.css | 117 +++++++++--- index.html | 452 +++++++++++++++++++++++----------------------- js/berater.js | 177 ++++++++++-------- json/berater.json | 96 +++++----- 4 files changed, 466 insertions(+), 376 deletions(-) diff --git a/css/berater.css b/css/berater.css index 6195f1f..1d3b8df 100644 --- a/css/berater.css +++ b/css/berater.css @@ -1,9 +1,12 @@ /* Ahmad: Styles bleiben in .berater-section; Karten passen auch auf Mobilgeraete. */ -/* Globale Design-Variablen */ +/* ========================================================== + Globale Design-Variablen - Angepasst an die Design-DNA von Tri-hub + ========================================================== */ .berater-section { --bg-dark-1: #0d0d1a; --bg-dark-2: #1a1a2e; - --accent-teal: #00B3C2; + --accent-teal: #10B981; + /* Farbe angepasst, um mit dem Pakete-Bereich übereinzustimmen */ --text-white: #ffffff; --text-lightgray: #F8FAFC; @@ -15,18 +18,43 @@ .berater-section { margin: 0; - padding: 0; + /* Padding vereinheitlicht, um dem Pakete-Bereich zu entsprechen */ + padding: 5rem 1.5rem; 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; + flex-direction: column; + align-items: center; + /* Gesamten Inhalt vertikal zentrieren */ } +/* ========================================= + Styling für Header (Titel und Untertitel) passend zu den Paketen + ========================================= */ +.berater-section .section-header { + text-align: center; + max-width: 42rem; + margin: 0 auto 3rem; +} + +.berater-section .section-title { + font-family: var(--font-display); + font-weight: 700; + font-size: clamp(1.8rem, 3vw, 2.4rem); + color: var(--text-white); + margin: 0 0 0.75rem; +} + +.berater-section .section-subtitle { + color: var(--text-muted); + line-height: 1.6; + margin: 0; +} + +/* ========================================= + Styling für den Container und die Berater-Karten + ========================================= */ .berater-section .berater-container { display: flex; gap: 30px; @@ -38,7 +66,10 @@ .berater-section .berater-card { background-color: var(--bg-dark-2); - border-radius: 24px; + /* Leichte Umrandung hinzugefügt, ähnlich wie bei den Pakete-Karten */ + border: 1px solid rgba(248, 250, 252, 0.08); + /* Border-Radius angepasst, passend zu den Paketen */ + border-radius: 14px; padding: 24px; width: min(380px, 100%); box-sizing: border-box; @@ -48,7 +79,7 @@ .berater-section .berater-image-wrapper { background-color: var(--bg-dark-1); - border-radius: 20px; + border-radius: 10px; padding: 10px; margin-bottom: 24px; } @@ -57,15 +88,16 @@ width: 100%; height: 350px; object-fit: cover; - border-radius: 16px; + border-radius: 8px; display: block; } .berater-section .berater-name { margin: 0 0 8px 0; font-family: var(--font-display); - font-size: 32px; - font-weight: 700; + font-size: 1.4rem; + /* Schriftgröße des Namens harmonisiert */ + font-weight: 600; color: var(--text-white); } @@ -80,9 +112,11 @@ } .berater-section .berater-bio-box { - background-color: var(--bg-dark-1); + /* Hintergrund entfernt, um sich nahtlos in die Karte einzufügen */ + background-color: transparent; border-radius: 16px; - padding: 24px; + /* Überschüssiges Padding entfernt */ + padding: 0; flex-grow: 1; } @@ -100,20 +134,40 @@ color: var(--text-muted); } -/* Styling für dynamische Listen (Zertifikate) */ +/* ========================================= + Styling für dynamische Listen (z. B. Zertifikate) + ========================================= */ .berater-section .berater-liste { margin: 8px 0 0 0; - padding-left: 20px; + padding-left: 1.4rem; color: var(--text-muted); font-size: 14px; line-height: 1.6; + list-style: none; + /* Standard-Listenpunkte entfernt für benutzerdefiniertes Styling */ } .berater-section .berater-liste li { - margin-bottom: 4px; + position: relative; + margin-bottom: 0.7rem; + color: var(--text-lightgray); } -/* Styling für dynamische Links (Buttons) */ +/* Grünes quadratisches Aufzählungszeichen hinzugefügt, exakt wie im Pakete-Bereich */ +.berater-section .berater-liste li::before { + content: ""; + position: absolute; + left: -1.4rem; + top: 0.4em; + width: 8px; + height: 8px; + border-radius: 2px; + background: var(--accent-teal); +} + +/* ========================================= + Styling für dynamische Links (Buttons) + ========================================= */ .berater-section .berater-links { margin-top: 20px; display: flex; @@ -123,17 +177,20 @@ .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-family: var(--font-body); font-weight: 600; - transition: background-color 0.3s ease; + font-size: 0.95rem; + color: var(--bg-dark-1); + background: var(--accent-teal); + border: none; + border-radius: 8px; + padding: 0.85rem 1rem; + cursor: pointer; + text-decoration: none; + transition: filter 0.15s ease; } -.berater-section .berater-link-btn:hover { - background-color: #0d9668; - color: #ffffff; -} +.berater-section .berater-link-btn:hover, +.berater-section .berater-link-btn:focus-visible { + filter: brightness(1.1); +} \ No newline at end of file diff --git a/index.html b/index.html index 250b5c5..004cd60 100644 --- a/index.html +++ b/index.html @@ -1,237 +1,243 @@ - - - - Ernährungsberatung für Triathleten | tri-hub - - - - - - - - - - - - + + + + Ernährungsberatung für Triathleten | tri-hub + + + + + + + + + + + + - -
- -
-
-
- tri-hub - Ernährungsberatung -
-
+ +
+ +
+
+
+ tri-hub + Ernährungsberatung +
+
-
-
- Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht +
+
+ Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht -
-
-

Der Text wärmt sich noch auf

-

- Überschrift. Weitere Zeile. - Akzentzeile. -

-

- Hier folgt eine kurze Beschreibung der Ernährungsberatung. - Dieser Platz ist für den finalen Text vorgesehen und wird ergänzt, - sobald die Inhalte vorliegen. -

-
+
+
+

Der Text wärmt sich noch auf

+

+ Überschrift. Weitere Zeile. + Akzentzeile. +

+

+ Hier folgt eine kurze Beschreibung der Ernährungsberatung. + Dieser Platz ist für den finalen Text vorgesehen und wird ergänzt, + sobald die Inhalte vorliegen. +

+
-
-
    -
  • - -

    Erster Vorteil Text folgt

    -
    • -
  • - -

    Zweiter Vorteil Text folgt

    -
    • -
  • - -

    Dritter Vorteil Text folgt

    -
    • -
+
+
    +
  • + +

    Erster Vorteil Text folgt

    +
    • +
  • + +

    Zweiter Vorteil Text folgt

    +
    • +
  • + +

    Dritter Vorteil Text folgt

    +
    • +
-
-

Bildunterschrift folgt

-

Slogan folgt. Weitere Zeile.

-
+
+

Bildunterschrift folgt

+

Slogan folgt. Weitere Zeile.

- -
-
-

Abschlusstext folgt. Ergänzender Text folgt.

-

Kurzhinweis folgt.

-
-
-
- - -
-
-

-

-
- -
-
- - -
- -
-
- - -
-
-
-
- Info über die Beratung -

Gut zu wissen, bevor du startest

-

Transparenz von Anfang an: So arbeitet die Beratung, für wen sie sich eignet und - was dich erwartet.

-
- -
-
-

Was dich bei der Beratung erwartet

- -

Gemeinsam schauen wir uns deine individuellen Ziele, Gewohnheiten und Bedürfnisse an und - entwickeln daraus passende Strategien für deinen Alltag.

- -
    -
  • Individuelle Ernährungsberatung
    • -
  • Erstellung von Ernährungsplänen
    • -
  • Unterstützung bei Gewichtsmanagement
    • -
  • Beratung bei speziellen Ernährungsbedürfnissen
    • -
  • Analyse deiner aktuellen Ernährungsgewohnheiten
    • -
  • Praktische Tipps für die Umsetzung im Alltag
    • -
-
- -
-

So läuft die Beratung ab

- -
    -
  1. - Erstgespräch -

    Wir besprechen deine Ziele, Wünsche und bisherigen Erfahrungen.

    -
    2. - -
  2. - Analyse -

    Deine aktuelle Ernährung und deine individuellen Bedürfnisse werden betrachtet. -

    -
    3. - -
  3. - Planung -

    Gemeinsam entwickeln wir konkrete und realistische Maßnahmen.

    -
    4. - -
  4. - Begleitung -

    Bei Bedarf wird der Fortschritt regelmäßig überprüft und der Plan angepasst.

    -
    5. -
-
- -
-

Für wen ist die Beratung geeignet?

- -
    -
  • Menschen, die ihre Ernährung verbessern möchten
    • -
  • Sportler mit individuellen Ernährungszielen
    • -
  • Menschen mit speziellen Ernährungsbedürfnissen
    • -
  • Personen, die Unterstützung beim Gewichtsmanagement suchen
    • -
-
- -
-

Weitere Informationen

- -

- Platzhalter für zukünftige Erweiterungen, beispielsweise Informationen zu Preisen, - Terminen, Kontaktmöglichkeiten oder zusätzlichen Beratungsangeboten. -

-
-
-
- -
-
-

Bereit für deinen nächsten Schritt?

-

Vereinbare ein unverbindliches Kennenlerngespräch – wir schauen gemeinsam, ob die Beratung zu dir - passt.

- Jetzt - unverbindlich anfragen -
-
- - - -
-
-
- - +
+
+

Abschlusstext folgt. Ergänzender Text folgt.

+

Kurzhinweis folgt.

+
+
+
+ + +
+
+

+

+
+ +
+
+ + +
+
+

+

+
+ +
+
+ + +
+
+
+
+ Info über die Beratung +

Gut zu wissen, bevor du startest

+

Transparenz von Anfang an: So arbeitet die Beratung, für wen sie sich eignet und + was dich erwartet.

+
+ +
+
+

Was dich bei der Beratung erwartet

+ +

Gemeinsam schauen wir uns deine individuellen Ziele, Gewohnheiten und Bedürfnisse an und + entwickeln daraus passende Strategien für deinen Alltag.

+ +
    +
  • Individuelle Ernährungsberatung
    • +
  • Erstellung von Ernährungsplänen
    • +
  • Unterstützung bei Gewichtsmanagement
    • +
  • Beratung bei speziellen Ernährungsbedürfnissen
    • +
  • Analyse deiner aktuellen Ernährungsgewohnheiten
    • +
  • Praktische Tipps für die Umsetzung im Alltag
    • +
+
+ +
+

So läuft die Beratung ab

+ +
    +
  1. + Erstgespräch +

    Wir besprechen deine Ziele, Wünsche und bisherigen Erfahrungen.

    +
    2. + +
  2. + Analyse +

    Deine aktuelle Ernährung und deine individuellen Bedürfnisse werden betrachtet. +

    +
    3. + +
  3. + Planung +

    Gemeinsam entwickeln wir konkrete und realistische Maßnahmen.

    +
    4. + +
  4. + Begleitung +

    Bei Bedarf wird der Fortschritt regelmäßig überprüft und der Plan angepasst.

    +
    5. +
+
+ +
+

Für wen ist die Beratung geeignet?

+ +
    +
  • Menschen, die ihre Ernährung verbessern möchten
    • +
  • Sportler mit individuellen Ernährungszielen
    • +
  • Menschen mit speziellen Ernährungsbedürfnissen
    • +
  • Personen, die Unterstützung beim Gewichtsmanagement suchen
    • +
+
+ +
+

Weitere Informationen

+ +

+ Platzhalter für zukünftige Erweiterungen, beispielsweise Informationen zu Preisen, + Terminen, Kontaktmöglichkeiten oder zusätzlichen Beratungsangeboten. +

+
+
+
+ +
+
+

Bereit für deinen nächsten Schritt?

+

Vereinbare ein unverbindliches Kennenlerngespräch – wir schauen gemeinsam, ob die Beratung zu + dir + passt.

+ Jetzt + unverbindlich anfragen +
+
+ + + +
+ +
+
+ + + \ No newline at end of file diff --git a/js/berater.js b/js/berater.js index abaa43e..7b14961 100644 --- a/js/berater.js +++ b/js/berater.js @@ -1,82 +1,103 @@ -document.addEventListener('DOMContentLoaded', () => { +document.addEventListener('DOMContentLoaded', async () => { + // Container für die Berater-Karten auswählen 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'; + // Titel- und Untertitel-Elemente aus dem HTML abrufen + const titleEl = document.querySelector('.section-title'); + const subtitleEl = document.querySelector('.section-subtitle'); - // 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); + let daten; + try { + // Daten aus der JSON-Datei asynchron laden + const response = await fetch('json/berater.json'); + if (!response.ok) throw new Error(`HTTP Fehler: ${response.status}`); + daten = await response.json(); + } catch (error) { + console.error('Fehler beim Laden der JSON-Datei:', error); + // Fehlermeldung auf der Webseite anzeigen, falls das Laden fehlschlägt + if (container) { container.innerHTML = '

Daten konnten nicht geladen werden.

'; - }); -}); + } + return; + } + + // 1. Titel und Einleitungstext (Intro) aus der JSON-Datei einfügen + if (titleEl && daten.intro) { + titleEl.textContent = daten.intro.titel; + } + if (subtitleEl && daten.intro) { + subtitleEl.textContent = daten.intro.text; + } + + // 2. Berater-Karten verarbeiten und erstellen + // Wir iterieren über das Array "berater" innerhalb der JSON-Daten + daten.berater.forEach(berater => { + // Ein neues div-Element für die Karte erstellen + const card = document.createElement('div'); + card.className = 'berater-card'; + + // Zertifikate verarbeiten (falls vorhanden) + let zertifikateHtml = ''; + if (berater.zertifikate && berater.zertifikate.length > 0) { + zertifikateHtml = `

Zertifikate

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

${berater.zusatzInfo}

`; + } + + // Eigene/unbekannte dynamische Felder verarbeiten + // Zuerst definieren wir, 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 spezifischen Berater + for (const [schluessel, wert] of Object.entries(berater)) { + // Wenn das Feld kein Standardfeld ist, generieren wir daraus eine Überschrift und den zugehörigen Text + if (!standardFelder.includes(schluessel)) { + eigeneFelderHtml += ` +

${schluessel}

+

${wert}

+ `; + } + } + + // Die Karte mit allen gesammelten HTML-Bausteinen zusammenbauen + card.innerHTML = ` +
+ ${berater.name} Profilbild +
+

${berater.name}

+

${berater.role}

+ +
+

${berater.bioTitle}

+

${berater.bioText}

+ + ${eigeneFelderHtml} + ${zusatzHtml} + ${zertifikateHtml} + ${linksHtml} +
+ `; + + // Die fertige Karte zum Container auf der Seite hinzufügen + container.appendChild(card); + }); +}); \ No newline at end of file diff --git a/json/berater.json b/json/berater.json index ad3813e..ae12219 100644 --- a/json/berater.json +++ b/json/berater.json @@ -1,46 +1,52 @@ -[ - { - "id": 1, - "name": "Relindis Agethen ", - "role": "TRIATHLET UND ERNÄHRUNGSBERATERIN", - "image": "images/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" - } - ] +{ + "intro": { + "titel": "Deine Ernährungsberater und Coaches", + "text": "Erfahrene Triathleten und zertifizierte Coaches, die dich auf dem Weg zu deinen Zielen begleiten und dir helfen, deine Leistung zu optimieren." }, - { - "id": 2, - "name": "Relindis Agethen ", - "role": "TRIATHLET UND ERNÄHRUNGSBERATERIN", - "image": "images/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" - } - ] - } -] + "berater": [ + { + "id": 1, + "name": "Relindis Agethen ", + "role": "TRIATHLET UND ERNÄHRUNGSBERATERIN", + "image": "images/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": "images/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