Design verbessert und Bugs gehoben
Majd Ibrahim
parent
94bea79863
commit
659e4ff9ec
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="description" content="Lerne die Ernährungsberaterinnen und Ernährungsberater von Tri-Hub kennen." />
|
||||||
|
<title>Beraterprofil · Tri-Hub</title>
|
||||||
|
<link rel="stylesheet" href="/src/styles/navigation.css" />
|
||||||
|
<link rel="stylesheet" href="/src/styles/packages.css" />
|
||||||
|
<link rel="stylesheet" href="/src/features/berater/berater.css" />
|
||||||
|
</head>
|
||||||
|
<body class="packages-page advisor-page">
|
||||||
|
<div id="navbar-placeholder"></div>
|
||||||
|
<main id="main-content" class="advisor-main">
|
||||||
|
<section class="advisor-section" aria-labelledby="advisor-heading">
|
||||||
|
<div class="advisor-container">
|
||||||
|
<header class="advisor-heading">
|
||||||
|
<p class="advisor-eyebrow">PERSÖNLICH FÜR DICH DA</p>
|
||||||
|
<h1 id="advisor-heading">Lerne deine Ernährungsberater kennen.</h1>
|
||||||
|
<p class="advisor-intro">Hinter einer guten Ernährungsstrategie stehen Menschen, die zuhören und ihre Erfahrung in deinen Alltag und dein Training einbringen.</p>
|
||||||
|
</header>
|
||||||
|
<div class="advisor-grid" id="advisor-profiles" aria-live="polite">
|
||||||
|
<p class="advisor-loading">Beraterprofile werden geladen …</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<script type="module" src="/src/components/navigationsbar/navigation.js"></script>
|
||||||
|
<script type="module" src="/src/features/berater/berater-entry.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
16
index.html
16
index.html
|
|
@ -920,21 +920,6 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- User Story: Rezensionen -->
|
<!-- User Story: Rezensionen -->
|
||||||
<section class="section advisor-section" id="beraterteam" aria-labelledby="advisor-heading">
|
|
||||||
<div class="container">
|
|
||||||
<div class="section-heading">
|
|
||||||
<div>
|
|
||||||
<p class="eyebrow">PERSÖNLICH FÜR DICH DA</p>
|
|
||||||
<h2 id="advisor-heading">Lerne deine Ernährungsberater kennen.</h2>
|
|
||||||
</div>
|
|
||||||
<p class="section-intro">Hinter einer guten Ernährungsstrategie stehen Menschen, die zuhören und ihre Erfahrung in deinen Alltag und dein Training einbringen.</p>
|
|
||||||
</div>
|
|
||||||
<div class="advisor-grid" id="advisor-profiles" aria-live="polite">
|
|
||||||
<p class="advisor-loading">Beraterprofile werden geladen …</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section review-section" id="erfahrungen">
|
<section class="section review-section" id="erfahrungen">
|
||||||
<div class="container review-layout">
|
<div class="container review-layout">
|
||||||
<div class="review-copy">
|
<div class="review-copy">
|
||||||
|
|
@ -1133,7 +1118,6 @@
|
||||||
type="module"
|
type="module"
|
||||||
src="/src/components/navigationsbar/navigation.js"
|
src="/src/components/navigationsbar/navigation.js"
|
||||||
></script>
|
></script>
|
||||||
<script type="module" src="/src/features/berater/berater-entry.js"></script>
|
|
||||||
<script>
|
<script>
|
||||||
const form = document.getElementById("reviewForm");
|
const form = document.getElementById("reviewForm");
|
||||||
const status = document.getElementById("formStatus");
|
const status = document.getElementById("formStatus");
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<header class="navbar" id="site-navbar">
|
<header class="navbar" id="site-navbar">
|
||||||
<div class="navbar__inner">
|
<div class="navbar__inner">
|
||||||
<a
|
<a
|
||||||
href="#main-content"
|
href="/index.html#main-content"
|
||||||
class="navbar__brand"
|
class="navbar__brand"
|
||||||
aria-label="Zum Hauptinhalt springen"
|
aria-label="Zum Hauptinhalt springen"
|
||||||
>
|
>
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
<a href="/index.html" class="navbar__link">Ernährung</a>
|
<a href="/index.html" class="navbar__link">Ernährung</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="/index.html" class="navbar__link">Beraterprofil</a>
|
<a href="/berater.html" class="navbar__link">Beraterprofil</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="/index.html" class="navbar__link">FAQ</a>
|
<a href="/index.html" class="navbar__link">FAQ</a>
|
||||||
|
|
|
||||||
|
|
@ -18,19 +18,24 @@ if (container) {
|
||||||
container.innerHTML = '<p class="advisor-loading">Aktuell sind keine Beraterprofile verfügbar.</p>';
|
container.innerHTML = '<p class="advisor-loading">Aktuell sind keine Beraterprofile verfügbar.</p>';
|
||||||
} else {
|
} else {
|
||||||
container.innerHTML = berater.map((person) => `
|
container.innerHTML = berater.map((person) => `
|
||||||
<article class="advisor-card">
|
<article class="package-card advisor-card">
|
||||||
<div class="advisor-card__topline"></div>
|
<h3 class="package-title">${escapeHtml(person.name)}</h3>
|
||||||
<h3>${escapeHtml(person.name)}</h3>
|
<p class="package-type">${escapeHtml(person.titel || "Ernährungsberatung")}</p>
|
||||||
<p class="advisor-card__role">${escapeHtml(person.titel || "Ernährungsberatung")}</p>
|
<div class="package-details-box">
|
||||||
<div class="advisor-card__details">
|
<div class="detail-item">
|
||||||
<h4>Kurzbiografie</h4>
|
<h4 class="detail-title">Kurzbiografie</h4>
|
||||||
<p>${escapeHtml(person.biographie)}</p>
|
<p class="detail-text">${escapeHtml(person.biographie)}</p>
|
||||||
<h4>Qualifikationen</h4>
|
</div>
|
||||||
<ul>${(person.qualifikationen || []).map((qualification) => `<li>${escapeHtml(qualification)}</li>`).join("")}</ul>
|
<div class="detail-item">
|
||||||
<h4>Schwerpunkte</h4>
|
<h4 class="detail-title">Qualifikationen</h4>
|
||||||
<ul>${(person.schwerpunkte || []).map((focus) => `<li>${escapeHtml(focus)}</li>`).join("")}</ul>
|
<ul class="detail-list">${(person.qualifikationen || []).map((qualification) => `<li>${escapeHtml(qualification)}</li>`).join("")}</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-item">
|
||||||
|
<h4 class="detail-title">Schwerpunkte</h4>
|
||||||
|
<ul class="detail-list">${(person.schwerpunkte || []).map((focus) => `<li>${escapeHtml(focus)}</li>`).join("")}</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button class="advisor-contact" type="button" data-berater-id="${escapeHtml(person.id)}" aria-haspopup="dialog">Berater kontaktieren</button>
|
<button class="package-btn advisor-contact" type="button" data-berater-id="${escapeHtml(person.id)}" aria-haspopup="dialog">Berater kontaktieren</button>
|
||||||
</article>
|
</article>
|
||||||
`).join("");
|
`).join("");
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,109 +1,118 @@
|
||||||
|
.advisor-page {
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advisor-main {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-top: 96px;
|
||||||
|
}
|
||||||
|
|
||||||
.advisor-section {
|
.advisor-section {
|
||||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.035));
|
width: min(1180px, calc(100% - 3rem));
|
||||||
|
margin: auto;
|
||||||
|
padding-block: 5rem;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advisor-grid {
|
.advisor-heading {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
|
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
|
||||||
gap: 20px;
|
gap: 3rem;
|
||||||
|
align-items: end;
|
||||||
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advisor-loading {
|
.advisor-eyebrow {
|
||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
color: var(--muted);
|
margin: 0;
|
||||||
}
|
color: #53d5cd;
|
||||||
|
font-size: 0.75rem;
|
||||||
.advisor-card {
|
font-weight: 600;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 30px;
|
|
||||||
border: 1px solid rgba(248, 250, 252, 0.12);
|
|
||||||
border-radius: 28px;
|
|
||||||
background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
|
|
||||||
}
|
|
||||||
|
|
||||||
.advisor-card__topline {
|
|
||||||
height: 3px;
|
|
||||||
margin: -30px -30px 26px;
|
|
||||||
border-radius: 28px 28px 0 0;
|
|
||||||
background: #10b981;
|
|
||||||
opacity: 0.75;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advisor-card h3 {
|
|
||||||
color: #fff;
|
|
||||||
font-family: Inter, system-ui, sans-serif;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advisor-card__role {
|
|
||||||
margin-top: 8px;
|
|
||||||
color: #10b981;
|
|
||||||
font-size: 0.78rem;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.14em;
|
letter-spacing: 0.14em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advisor-card__details {
|
.advisor-heading h1 {
|
||||||
flex: 1;
|
margin: 0.75rem 0 1rem;
|
||||||
margin-top: 24px;
|
font-size: clamp(2rem, 4.5vw, 3.75rem);
|
||||||
padding: 22px;
|
font-weight: 600;
|
||||||
border: 1px solid rgba(248, 250, 252, 0.1);
|
line-height: 1.15;
|
||||||
border-radius: 22px;
|
letter-spacing: -0.035em;
|
||||||
background: rgba(255, 255, 255, 0.045);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.advisor-card__details h4 {
|
.advisor-intro {
|
||||||
margin: 0 0 8px;
|
max-width: 40rem;
|
||||||
color: #fff;
|
|
||||||
font-size: 0.94rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advisor-card__details p,
|
|
||||||
.advisor-card__details li {
|
|
||||||
color: var(--muted);
|
|
||||||
font-size: 0.92rem;
|
|
||||||
line-height: 1.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advisor-card__details h4:not(:first-child) {
|
|
||||||
margin-top: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advisor-card__details ul {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-left: 18px;
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advisor-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advisor-loading {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advisor-card {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advisor-card .package-title {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advisor-card .package-type {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advisor-card .package-details-box {
|
||||||
|
flex: 1;
|
||||||
|
padding-block: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advisor-card .detail-title {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advisor-card .detail-item + .detail-item {
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advisor-card .detail-list {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advisor-card .detail-list li::marker {
|
||||||
|
color: #53d5cd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advisor-contact {
|
.advisor-contact {
|
||||||
min-height: 58px;
|
margin-top: 1.5rem;
|
||||||
margin-top: 24px;
|
|
||||||
padding: 10px 22px;
|
|
||||||
border: 1px solid rgba(148, 163, 184, 0.25);
|
|
||||||
border-radius: 999px;
|
|
||||||
color: #fff;
|
|
||||||
background: rgba(255, 255, 255, 0.025);
|
|
||||||
font: inherit;
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advisor-contact:hover,
|
|
||||||
.advisor-contact:focus-visible {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
border-color: rgba(16, 185, 129, 0.55);
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.advisor-contact:focus-visible {
|
|
||||||
outline: 3px solid rgba(16, 185, 129, 0.45);
|
|
||||||
outline-offset: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.advisor-contact-error {
|
.advisor-contact-error {
|
||||||
margin-top: 10px;
|
margin: 10px 0 0;
|
||||||
color: #fca5a5;
|
color: #fca5a5;
|
||||||
font-size: 0.82rem;
|
font-size: 0.82rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.advisor-section {
|
||||||
|
width: calc(100% - 2rem);
|
||||||
|
padding-block: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advisor-heading {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advisor-eyebrow {
|
||||||
|
grid-column: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,38 @@
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
"id": "anna-mueller",
|
"id": "relindis-agethen",
|
||||||
"name": "Anna Müller",
|
"name": "Relindis Agethen (Lilli)",
|
||||||
"email": "anna.mueller@tri-hub.de",
|
"email": "relindis.agethen@tri-hub.de",
|
||||||
"titel": "Ernährungsberaterin",
|
"titel": "Triathletin und Ernährungsberaterin",
|
||||||
"biographie": "Anna begleitet Ausdauerathletinnen und -athleten dabei, eine alltagstaugliche Ernährungsweise zu entwickeln. Im Mittelpunkt stehen individuelle Bedürfnisse, praktikable Routinen und eine gute Versorgung rund um Training und Wettkampf.",
|
"biographie": "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.",
|
||||||
"qualifikationen": ["Ernährungsberatung", "Sporternährung"],
|
"qualifikationen": [
|
||||||
"schwerpunkte": ["Sporternährung", "Wettkampfverpflegung", "Hydration"],
|
"Zertifizierte Ernährungsberaterin für Sportler (B-Lizenz)",
|
||||||
|
"Vize-Europameisterin",
|
||||||
|
"Deutsche Meisterin",
|
||||||
|
"Mehrfache Baden-Württembergische Meisterin"
|
||||||
|
],
|
||||||
|
"schwerpunkte": [
|
||||||
|
"Ernährung",
|
||||||
|
"Leistungssport-Perspektive",
|
||||||
|
"Wettkampforientierte Entwicklung"
|
||||||
|
],
|
||||||
|
"bildquelle": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "maren-hoffmann",
|
||||||
|
"name": "Maren Hoffmann",
|
||||||
|
"email": "maren.hoffmann@tri-hub.de",
|
||||||
|
"titel": "Triathletin und Ernährungsberaterin",
|
||||||
|
"biographie": "Maren Hoffmann verbindet ihre langjährige Erfahrung im Ausdauersport mit ihrem Wissen aus der Ernährungsberatung. Sie unterstützt Athletinnen und Athleten dabei, Training und Ernährung alltagstauglich aufeinander abzustimmen und sich gezielt auf Wettkämpfe vorzubereiten.",
|
||||||
|
"qualifikationen": [
|
||||||
|
"Ernährungsberaterin für Sporternährung",
|
||||||
|
"Langjährige Erfahrung im Ausdauersport"
|
||||||
|
],
|
||||||
|
"schwerpunkte": [
|
||||||
|
"Ernährung im Ausdauertraining",
|
||||||
|
"Wettkampfverpflegung",
|
||||||
|
"Alltagstaugliche Ernährungsroutinen"
|
||||||
|
],
|
||||||
"bildquelle": ""
|
"bildquelle": ""
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -35,6 +35,9 @@ export default defineConfig({
|
||||||
booking: fileURLToPath(
|
booking: fileURLToPath(
|
||||||
new URL("./booking.html", import.meta.url),
|
new URL("./booking.html", import.meta.url),
|
||||||
),
|
),
|
||||||
|
berater: fileURLToPath(
|
||||||
|
new URL("./berater.html", import.meta.url),
|
||||||
|
),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue