dynamisch Infos in json-Datei bearbeiten
luay
parent
fb01091e61
commit
ee19a9a01f
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 = `<h4 class="bio-title" style="margin-top: 16px;">Zertifikate</h4><ul class="berater-liste">`;
|
||||
berater.zertifikate.forEach(zert => {
|
||||
zertifikateHtml += `<li>${zert}</li>`;
|
||||
});
|
||||
zertifikateHtml += `</ul>`;
|
||||
}
|
||||
|
||||
let linksHtml = '';
|
||||
if (berater.links && berater.links.length > 0) {
|
||||
linksHtml = `<div class="berater-links">`;
|
||||
berater.links.forEach(link => {
|
||||
linksHtml += `<a href="${link.url}" target="_blank" class="berater-link-btn">${link.text}</a>`;
|
||||
});
|
||||
linksHtml += `</div>`;
|
||||
}
|
||||
|
||||
let zusatzHtml = '';
|
||||
if (berater.zusatzInfo) {
|
||||
zusatzHtml = `<p class="berater-zusatz">${berater.zusatzInfo}</p>`;
|
||||
}
|
||||
|
||||
// 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 += `
|
||||
<h4 class="bio-title" style="margin-top: 16px; text-transform: capitalize;">${schluessel}</h4>
|
||||
<p class="bio-text">${wert}</p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Die Karte zusammenbauen
|
||||
card.innerHTML = `
|
||||
<div class="berater-image-wrapper">
|
||||
<img src="${berater.image}" alt="${berater.name} Profilbild">
|
||||
|
|
@ -25,6 +62,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
<div class="berater-bio-box">
|
||||
<h4 class="bio-title">${berater.bioTitle}</h4>
|
||||
<p class="bio-text">${berater.bioText}</p>
|
||||
|
||||
<!-- Hier werden deine eigenen JSON-Einträge wie "bla bla bla" platziert -->
|
||||
${eigeneFelderHtml}
|
||||
|
||||
${zusatzHtml}
|
||||
${zertifikateHtml}
|
||||
${linksHtml}
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
@ -33,6 +77,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
})
|
||||
.catch(error => {
|
||||
console.error('Fehler:', error);
|
||||
container.innerHTML = '<p style="color: #94A3B8;">Die Beraterprofile konnten nicht geladen werden.</p>';
|
||||
container.innerHTML = '<p style="color: #94A3B8;">Daten konnten nicht geladen werden.</p>';
|
||||
});
|
||||
});
|
||||
|
|
@ -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 "
|
||||
}
|
||||
]
|
||||
Loading…
Reference in New Issue