116 lines
4.5 KiB
JavaScript
116 lines
4.5 KiB
JavaScript
// Vollständige Paketdetails und Rabattdialog aus TriHub Design Original.
|
|
(() => {
|
|
"use strict";
|
|
const packages = {
|
|
starter: {
|
|
name: "Starter",
|
|
title: "Dein erster guter Schritt.",
|
|
description:
|
|
"Du möchtest wissen, wo du stehst und was du konkret verändern kannst? Starter schafft eine persönliche Grundlage für deinen Einstieg.",
|
|
features: [
|
|
"Gemeinsames Erstgespräch zu Zielen, Training, Alltag und Vorlieben.",
|
|
"Auswertung eines Ernährungsprotokolls mit Blick auf deine bisherigen Gewohnheiten.",
|
|
"Persönliche Handlungsempfehlungen für Essen und Trinken im Alltag und rund um dein Training.",
|
|
"Abschlussgespräch zur Einordnung deiner nächsten Schritte.",
|
|
],
|
|
},
|
|
standard: {
|
|
name: "Standard",
|
|
title: "Aus guten Vorsätzen wird dein Plan.",
|
|
description:
|
|
"Du möchtest aus einzelnen Empfehlungen eine verlässliche Routine machen? Standard verbindet die Bestandsaufnahme mit einem individuellen Plan und persönlichem Feedback.",
|
|
features: [
|
|
"Alle vorgeschlagenen Leistungen aus Starter.",
|
|
"Ein individueller Ernährungsrahmen für Trainings- und Ruhetage.",
|
|
"Praktische Mahlzeitenideen, abgestimmt auf deine Vorlieben und deinen Alltag.",
|
|
"Feedbackgespräche, um Erfahrungen zu besprechen und den Plan gemeinsam anzupassen.",
|
|
],
|
|
},
|
|
premium: {
|
|
name: "Premium",
|
|
title: "Dein Ziel. Ganz persönlich.",
|
|
description:
|
|
"Du möchtest deine Ernährung gezielt auf sportliche Herausforderungen abstimmen? Premium sieht eine besonders enge Begleitung bis in die Wettkampfvorbereitung vor.",
|
|
features: [
|
|
"Alle vorgeschlagenen Leistungen aus Standard.",
|
|
"Eine individuelle Strategie für Essen und Trinken vor, während und nach Wettkämpfen.",
|
|
"Erprobung der Verpflegung im Training und Anpassung an deine Erfahrungen.",
|
|
"Engmaschiger persönlicher Austausch und laufende Anpassungen an deine Trainingsphasen.",
|
|
],
|
|
},
|
|
};
|
|
const dialog = document.querySelector("#package-dialog");
|
|
const select = document.querySelector("#coaching-select");
|
|
let trigger;
|
|
function updateDiscount() {
|
|
const rate = Number(select.value);
|
|
const result = document.querySelector("#discount-result");
|
|
result.replaceChildren();
|
|
if (rate) {
|
|
const strong = document.createElement("strong");
|
|
strong.textContent = rate + " % Rabatt";
|
|
result.append(
|
|
strong,
|
|
document.createTextNode(" auf deine Ernährungsberatung."),
|
|
);
|
|
} else
|
|
result.textContent =
|
|
"Mit Coaching 1zu1: Starter 3 %, Standard 5 %, Premium 10 % Rabatt.";
|
|
}
|
|
function openDetails(key, button) {
|
|
trigger = button;
|
|
const data = packages[key];
|
|
document.querySelector("#dialog-eyebrow").textContent = data
|
|
? "ERNÄHRUNGSBERATUNG · " + data.name.toUpperCase()
|
|
: "COACHING 1ZU1 · BONUSREGELUNG";
|
|
document.querySelector("#dialog-title").textContent = data
|
|
? data.title
|
|
: "Dein Coaching zahlt sich aus.";
|
|
document.querySelector("#dialog-description").textContent = data
|
|
? data.description
|
|
: "Dein bestehendes Coaching-Paket bringt dir einen Preisvorteil bei der Ernährungsberatung. Wähle es aus und entdecke deinen Rabatt.";
|
|
document.querySelector("#detail-section").hidden = !data;
|
|
const list = document.querySelector("#dialog-features");
|
|
list.replaceChildren();
|
|
if (data)
|
|
data.features.forEach((text) => {
|
|
const li = document.createElement("li");
|
|
li.textContent = text;
|
|
list.append(li);
|
|
});
|
|
updateDiscount();
|
|
dialog.showModal();
|
|
}
|
|
document
|
|
.querySelectorAll(".package-open")
|
|
.forEach((button) =>
|
|
button.addEventListener("click", () =>
|
|
openDetails(button.dataset.package, button),
|
|
),
|
|
);
|
|
document
|
|
.querySelector("#bonus-open")
|
|
.addEventListener("click", (event) =>
|
|
openDetails(null, event.currentTarget),
|
|
);
|
|
select.addEventListener("change", updateDiscount);
|
|
document
|
|
.querySelectorAll(".close-dialog,.dialog-done")
|
|
.forEach((button) =>
|
|
button.addEventListener("click", () => dialog.close()),
|
|
);
|
|
dialog.addEventListener("click", (event) => {
|
|
if (event.target === dialog) {
|
|
const r = dialog.getBoundingClientRect();
|
|
if (
|
|
event.clientX < r.left ||
|
|
event.clientX > r.right ||
|
|
event.clientY < r.top ||
|
|
event.clientY > r.bottom
|
|
)
|
|
dialog.close();
|
|
}
|
|
});
|
|
dialog.addEventListener("close", () => trigger?.focus());
|
|
})();
|