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"); + }); +})();