From c2e157c095f427d3f67b69efd125cf64ad24d5f6 Mon Sep 17 00:00:00 2001 From: troogs Date: Wed, 12 Aug 2026 12:09:57 +0200 Subject: [PATCH] feat: add checkout summary and reservation confirmation page --- .github/prompts/5-checkoutpage.prompt.md | 7 ++ checkout.css | 123 +++++++++++++++++++++++ checkout.html | 66 ++++++++++++ checkout.js | 53 ++++++++++ 4 files changed, 249 insertions(+) create mode 100644 .github/prompts/5-checkoutpage.prompt.md create mode 100644 checkout.css create mode 100644 checkout.html create mode 100644 checkout.js diff --git a/.github/prompts/5-checkoutpage.prompt.md b/.github/prompts/5-checkoutpage.prompt.md new file mode 100644 index 0000000..70159cf --- /dev/null +++ b/.github/prompts/5-checkoutpage.prompt.md @@ -0,0 +1,7 @@ +i now want you to create a checkout page that shows the selected activity, date, and name. Besides the summary, the user has the option to checkout (submit the date reservation) or go back to the previous page to change their selection. The checkout page should display the selected activity, date, and name in a clear format. + +when the user hits the checkout button, the page should display a confirmation message that the reservation has been submitted successfully. Laater on, i will add a feature to send an email confirmation notification to myself, create a calendar entry and so on. For now, just display the confirmation message on the page. + +also, move the prompts to the appropriate prompt directory and make sure the prompt files are named correctly. + +also, create an empty git repository and commit all the open changes by grouping them into logical commits. The commit messages should be clear and descriptive, reflecting the changes made in each commit. diff --git a/checkout.css b/checkout.css new file mode 100644 index 0000000..655aee4 --- /dev/null +++ b/checkout.css @@ -0,0 +1,123 @@ +/* ========================================================================== + Page: Checkout / Bestätigung (checkout.html) + ========================================================================== */ + +.page-checkout .container { + position: relative; + z-index: 1; +} + +.page-checkout .intro { + text-align: center; + margin-bottom: 1.5em; +} + +.page-checkout .intro p { + color: var(--color-text-light); +} + +.summary-card { + background: var(--color-white); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-soft); + padding: 20px; + margin-bottom: 24px; + display: flex; + flex-direction: column; + gap: 16px; +} + +.summary-item { + display: flex; + align-items: center; + gap: 16px; + padding-bottom: 12px; + border-bottom: 1px solid var(--color-rose-light); +} + +.summary-item:last-child { + padding-bottom: 0; + border-bottom: none; +} + +.summary-icon { + font-size: 1.8rem; + line-height: 1; +} + +.summary-details { + display: flex; + flex-direction: column; +} + +.summary-label { + font-size: 0.85rem; + color: var(--color-text-light); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.summary-value { + font-family: var(--font-heading); + font-weight: 700; + font-size: 1.1rem; + color: var(--color-text); +} + +.checkout-btn { + margin-top: 8px; +} + +/* Confirmation section --------------------------------------------------- */ + +.confirmation-card { + background: var(--color-white); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-strong); + padding: 32px 24px; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + animation: fadeInScale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.confirmation-icon { + font-size: 3.5rem; + line-height: 1; +} + +.confirmation-card h2 { + margin: 0; + font-size: 1.6rem; + color: var(--color-rose-dark); +} + +.confirmation-card p { + color: var(--color-text); + font-size: 1.05rem; + margin: 0; + line-height: 1.6; +} + +.start-over-btn { + margin-top: 12px; + text-decoration: none; +} + +.hidden { + display: none !important; +} + +@keyframes fadeInScale { + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +} diff --git a/checkout.html b/checkout.html new file mode 100644 index 0000000..221662c --- /dev/null +++ b/checkout.html @@ -0,0 +1,66 @@ + + + + + + Date Bestätigung – Date-Planer + + + + + + + + + +
+ ‹ Zurück + +
+
+

Fast geschafft! ✨

+

Überprüfe noch einmal eure Angaben für das perfekt geplante Date.

+
+ +
+
+ 💌 +
+ Aktivität + - +
+
+ +
+ 📅 +
+ Datum + - +
+
+ +
+ 👤 +
+ Name + - +
+
+
+ + +
+ + +
+ + + + diff --git a/checkout.js b/checkout.js new file mode 100644 index 0000000..4a30127 --- /dev/null +++ b/checkout.js @@ -0,0 +1,53 @@ +// Checkout & Bestätigungsseite + +(function () { + const backLink = document.getElementById("backLink"); + const summarySection = document.getElementById("summarySection"); + const confirmationSection = document.getElementById("confirmationSection"); + const summaryActivity = document.getElementById("summaryActivity"); + const summaryDate = document.getElementById("summaryDate"); + const summaryName = document.getElementById("summaryName"); + const activityIcon = document.getElementById("activityIcon"); + const checkoutBtn = document.getElementById("checkoutBtn"); + + const selectedActivity = localStorage.getItem("selectedActivity"); + const selectedDate = localStorage.getItem("selectedDate"); + const selectedName = localStorage.getItem("selectedName"); + + if (!selectedActivity || !selectedDate || !selectedName) { + window.location.href = "index.html"; + return; + } + + summaryActivity.textContent = selectedActivity; + summaryName.textContent = selectedName; + + const dateObj = new Date(`${selectedDate}T00:00:00`); + const formattedDate = dateObj.toLocaleDateString("de-DE", { + weekday: "long", + day: "numeric", + month: "long", + year: "numeric", + }); + summaryDate.textContent = formattedDate; + + // Icon aus appsettings.json laden, falls verfügbar + fetch("appsettings.json") + .then((res) => res.json()) + .then((settings) => { + const match = (settings.activities || []).find((a) => a.name === selectedActivity); + if (match && match.icon) { + activityIcon.textContent = match.icon; + } + }) + .catch(() => {}); + + checkoutBtn.addEventListener("click", () => { + // Später: API / Mail-Versand / Kalendereintrag ausführen + summarySection.classList.add("hidden"); + if (backLink) { + backLink.classList.add("hidden"); + } + confirmationSection.classList.remove("hidden"); + }); +})();