feat: add checkout summary and reservation confirmation page
This commit is contained in:
@@ -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.
|
||||||
+123
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||||
|
<title>Date Bestätigung – Date-Planer</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Quicksand:wght@600;700&display=swap" rel="stylesheet" />
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<link rel="stylesheet" href="checkout.css" />
|
||||||
|
</head>
|
||||||
|
<body class="page-checkout">
|
||||||
|
<div class="heart-background" aria-hidden="true">
|
||||||
|
<div class="heart-shape"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main class="container">
|
||||||
|
<a id="backLink" class="back-link" href="name.html">‹ Zurück</a>
|
||||||
|
|
||||||
|
<div id="summarySection">
|
||||||
|
<div class="intro">
|
||||||
|
<h1>Fast geschafft! ✨</h1>
|
||||||
|
<p>Überprüfe noch einmal eure Angaben für das perfekt geplante Date.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="summary-card">
|
||||||
|
<div class="summary-item">
|
||||||
|
<span class="summary-icon" id="activityIcon">💌</span>
|
||||||
|
<div class="summary-details">
|
||||||
|
<span class="summary-label">Aktivität</span>
|
||||||
|
<span class="summary-value" id="summaryActivity">-</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="summary-item">
|
||||||
|
<span class="summary-icon">📅</span>
|
||||||
|
<div class="summary-details">
|
||||||
|
<span class="summary-label">Datum</span>
|
||||||
|
<span class="summary-value" id="summaryDate">-</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="summary-item">
|
||||||
|
<span class="summary-icon">👤</span>
|
||||||
|
<div class="summary-details">
|
||||||
|
<span class="summary-label">Name</span>
|
||||||
|
<span class="summary-value" id="summaryName">-</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button id="checkoutBtn" class="btn btn-primary checkout-btn" type="button">Date verbindlich buchen 🎉</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="confirmationSection" class="confirmation-card hidden">
|
||||||
|
<div class="confirmation-icon">🎉</div>
|
||||||
|
<h2>Reservierung bestätigt!</h2>
|
||||||
|
<p id="confirmationMessage">Deine Date-Reservierung wurde erfolgreich übermittelt. Ich freue mich schon riesig auf uns!</p>
|
||||||
|
<a href="index.html" class="btn btn-primary start-over-btn">Zur Startseite</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="checkout.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+53
@@ -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");
|
||||||
|
});
|
||||||
|
})();
|
||||||
Reference in New Issue
Block a user