diff --git a/.github/prompts/3-dynamicdata.prompt.md b/.github/prompts/3-dynamicdata.prompt.md new file mode 100644 index 0000000..9395e91 --- /dev/null +++ b/.github/prompts/3-dynamicdata.prompt.md @@ -0,0 +1,5 @@ +next step after "2-dateselect.prompt.md": + +i want to be able to define the available activities in a separate json file. for each activity, i want to define the following properties: name and icon. icon will always be a simple unicode icon. so it should be able to be treated as a character in the html + +for now, i want to drop the option to select a time. the date itself should be enough diff --git a/.github/prompts/4-more-dynamicdata.prompt.md b/.github/prompts/4-more-dynamicdata.prompt.md new file mode 100644 index 0000000..826098a --- /dev/null +++ b/.github/prompts/4-more-dynamicdata.prompt.md @@ -0,0 +1,3 @@ +now i want to be able to define available dates in the same file. call the file appsettings.json instead of activities.json. the file should contain two arrays: one for activities and one for available dates. each date should be defined as a string in the format "YYYY-MM-DD". + +additional to that, i want to be able to define names that can be selected for me to know who schedules the date. so the file should contain a third array called "names" with strings for each name. Add a page right after the date selection diff --git a/appsettings.json b/appsettings.json new file mode 100644 index 0000000..dced477 --- /dev/null +++ b/appsettings.json @@ -0,0 +1,22 @@ +{ + "activities": [ + { "name": "Essen bei Namaste", "icon": "🍛" }, + { "name": "Kinofilm", "icon": "🎬" }, + { "name": "Film zu Hause + Essen bestellen", "icon": "🛋️" }, + { "name": "Spaziergang im Wald", "icon": "🌲" }, + { "name": "Museum für Gegenwartskunst", "icon": "🖼️" }, + { "name": "Picknick auf der Wiese", "icon": "🧺" }, + { "name": "Massage zu Hause", "icon": "💆" } + ], + "availableDates": [ + "2026-08-15", + "2026-08-16", + "2026-08-23", + "2026-08-30", + "2026-09-05", + "2026-09-06" + ], + "names": [ + + ] +} diff --git a/name.css b/name.css new file mode 100644 index 0000000..31249cb --- /dev/null +++ b/name.css @@ -0,0 +1,65 @@ +/* ========================================================================== + Page: Namensauswahl (name.html) + ========================================================================== */ + +.page-name .container { + position: relative; + z-index: 1; +} + +.page-name .intro { + text-align: center; + margin-bottom: 1.5em; +} + +.page-name .intro p { + color: var(--color-text-light); +} + +.name-list { + display: flex; + flex-direction: column; + gap: 14px; +} + +.name-card { + display: flex; + align-items: center; + gap: 14px; + width: 100%; + min-height: 64px; + padding: 14px 20px; + background: var(--color-white); + border: 2px solid transparent; + border-radius: var(--radius-md); + box-shadow: var(--shadow-soft); + cursor: pointer; + touch-action: manipulation; + transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; +} + +.name-card:active { + transform: scale(0.98); +} + +.name-card .icon { + font-size: 1.6rem; + line-height: 1; +} + +.name-card .label { + font-family: var(--font-heading); + font-weight: 700; + font-size: 1.1rem; + color: var(--color-text); +} + +.name-card.selected { + border-color: var(--color-rose); + background: linear-gradient(135deg, var(--color-rose-light) 0%, var(--color-white) 100%); + box-shadow: var(--shadow-strong); +} + +.name-card.selected .label { + color: var(--color-rose-dark); +} diff --git a/name.html b/name.html new file mode 100644 index 0000000..aa1f696 --- /dev/null +++ b/name.html @@ -0,0 +1,36 @@ + + + + + + Wer plant das Date? – Date-Planer + + + + + + + + + +
+ ‹ Zurück +
+

Wer bist du? 💖

+

Verrate mir, wer du bist.

+
+ +
+
+ +
+
+ +
+
+ + + + diff --git a/name.js b/name.js new file mode 100644 index 0000000..8ad8a4c --- /dev/null +++ b/name.js @@ -0,0 +1,76 @@ +// Namensauswahl: lädt Namen aus appsettings.json, Kartenauswahl + Abschluss + +(function () { + const nameList = document.getElementById("nameList"); + const summary = document.getElementById("summary"); + const continueBtn = document.getElementById("continueBtn"); + + const selectedActivity = localStorage.getItem("selectedActivity"); + const selectedDate = localStorage.getItem("selectedDate"); + + // Ohne Aktivität und Datum ergibt diese Seite keinen Sinn. + if (!selectedActivity) { + window.location.href = "activity.html"; + return; + } + if (!selectedDate) { + window.location.href = "datetime.html"; + return; + } + + const dateLabel = new Date(`${selectedDate}T00:00:00`).toLocaleDateString("de-DE", { + weekday: "long", + day: "numeric", + month: "long", + year: "numeric", + }); + summary.textContent = `${selectedActivity} am ${dateLabel} – verrate mir, wer du bist.`; + + let selectedName = null; + + fetch("appsettings.json") + .then((response) => response.json()) + .then((settings) => renderNames(settings.names || [])) + .catch(() => { + nameList.textContent = "Namen konnten nicht geladen werden."; + }); + + function renderNames(names) { + const options = names.length > 0 ? names : ["Mein name ist Amor 😽"]; + + options.forEach((name) => { + const card = document.createElement("button"); + card.type = "button"; + card.className = "name-card"; + card.dataset.name = name; + + const icon = document.createElement("span"); + icon.className = "icon"; + icon.setAttribute("aria-hidden", "true"); + icon.textContent = "💖"; + + const label = document.createElement("span"); + label.className = "label"; + label.textContent = name; + + card.append(icon, label); + card.addEventListener("click", () => { + nameList.querySelectorAll(".name-card").forEach((c) => c.classList.remove("selected")); + card.classList.add("selected"); + selectedName = name; + continueBtn.disabled = false; + }); + + nameList.appendChild(card); + }); + } + + continueBtn.addEventListener("click", () => { + if (!selectedName) { + return; + } + // Ablage für die spätere Anbindung an Datenbank/Storage + localStorage.setItem("selectedName", selectedName); + window.location.href = "checkout.html"; + }); +})();