troogs/date-wizard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: troogs/date-wizard:c2e157c095f427d3f67b69efd125cf64ad24d5f6
Branches Tags
troogs/date-wizard:main
..
compare: troogs/date-wizard:617d906d3e7c09b0eb5f337ab0cf315e4ce12d84
Branches Tags
troogs/date-wizard:main
8 Commits
c2e157c095 .. 617d906d3e
Author SHA1 Message Date
troogs 617d906d3e style: update fallback name in renderNames function 2026-08-12 14:16:55 +02:00
troogs ae330aeae8 style: randomize activities order in appsettings.json 2026-08-12 14:02:24 +02:00
troogs 192933c9b6 fix: disallow selecting dates in the past or today 2026-08-12 13:38:08 +02:00
troogs 54420cf25a feat: grey out long activities when a short activity is selected 2026-08-12 13:17:02 +02:00
troogs fc01c503b7 feat: restructure flow to date-first and add support for long/short days and activities 2026-08-12 13:13:54 +02:00
troogs 3d7da6c8da style: position continue button inline below content on desktop screens 2026-08-12 12:55:45 +02:00
troogs b230918903 fix: optimize mobile vertical layout and bottom clearance for continue bar 2026-08-12 12:52:45 +02:00
troogs 28f402674a fix: ensure bottom content is not obscured by fixed continue bar when scrolling 2026-08-12 12:50:36 +02:00
11 changed files with 284 additions and 75 deletions
Expand all files Collapse all files
.github/prompts/6-longandshortdates.prompt.md
+10
View File
@@ -0,0 +1,10 @@
i want to perform a little logical restructure
there are long and short acitivies and there are long activitiees
there are days where we have more time and days where we have less time
on days where there is more time, we can do one long activity or two short activities
on days where there is less time, we can only do one short activity
so in the appsettings.json file i need to be able to define which days are long days and which days are short days.
and i need to be able to define which activities are long and which activities are short.
from now on, the date-selection comes first, then the activity selection. IF the user selected a long day AND a short activity, the user needs to be informed that on that day, there is still more time for another activity and have the option to select another short activity. If the user selects a short day, he will only have the option to select a short activity but doesnt need to be informed that there were options for long activities in the first place
activity.css
+45 -7
View File
@@ -4,7 +4,7 @@
.page-activity .intro { .page-activity .intro {
text-align: center; text-align: center;
margin-bottom: 1.5em; margin-bottom: 1.2em;
} }
.page-activity .intro p { .page-activity .intro p {
@@ -14,12 +14,13 @@
.activity-grid { .activity-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 16px; gap: 12px;
} }
@media (min-width: 600px) { @media (min-width: 600px) {
.activity-grid { .activity-grid {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 16px;
} }
} }
@@ -29,9 +30,9 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10px; gap: 8px;
min-height: 140px; min-height: 115px;
padding: 16px 10px; padding: 12px 8px;
background: var(--color-white); background: var(--color-white);
border: 2px solid transparent; border: 2px solid transparent;
border-radius: var(--radius-md); border-radius: var(--radius-md);
@@ -46,14 +47,14 @@
} }
.activity-card .icon { .activity-card .icon {
font-size: 2.6rem; font-size: 2.2rem;
line-height: 1; line-height: 1;
} }
.activity-card .label { .activity-card .label {
font-family: var(--font-heading); font-family: var(--font-heading);
font-weight: 700; font-weight: 700;
font-size: 0.95rem; font-size: 0.9rem;
text-align: center; text-align: center;
color: var(--color-text); color: var(--color-text);
} }
@@ -72,3 +73,40 @@
color: var(--color-rose-dark); color: var(--color-rose-dark);
font-weight: 700; font-weight: 700;
} }
.activity-card.is-disabled,
.activity-card:disabled {
opacity: 0.4;
cursor: not-allowed;
filter: grayscale(0.4);
box-shadow: none;
background: #f7e8ec;
}
.time-notice {
background: var(--color-white);
border: 2px solid var(--color-peach);
border-radius: var(--radius-md);
padding: 12px 16px;
margin-bottom: 16px;
font-size: 0.95rem;
color: var(--color-rose-dark);
text-align: center;
box-shadow: var(--shadow-soft);
animation: fadeIn 0.3s ease;
}
.hidden {
display: none !important;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
activity.html
+6 -2
View File
@@ -12,10 +12,14 @@
</head> </head>
<body class="page-activity has-continue-bar"> <body class="page-activity has-continue-bar">
<main class="container"> <main class="container">
<a class="back-link" href="index.html">‹ Zurück</a> <a class="back-link" href="datetime.html">‹ Zurück</a>
<div class="intro"> <div class="intro">
<h1>Worauf hast du Lust? 🥰</h1> <h1>Worauf hast du Lust? 🥰</h1>
<p>Wähle eure gemeinsame Aktivität für das Date aus.</p> <p id="dateSummary">Wähle eure gemeinsame Aktivität für das Date aus.</p>
</div>
<div id="timeNotice" class="time-notice hidden">
💡 An diesem Tag haben wir reichlich Zeit! Wenn du möchtest, kannst du noch eine 2. kurze Aktivität auswählen.
</div> </div>
<div class="activity-grid" id="activityGrid"></div> <div class="activity-grid" id="activityGrid"></div>
activity.js
+101 -12
View File
@@ -2,24 +2,66 @@
(function () { (function () {
const activityGrid = document.getElementById("activityGrid"); const activityGrid = document.getElementById("activityGrid");
const dateSummary = document.getElementById("dateSummary");
const timeNotice = document.getElementById("timeNotice");
const continueBtn = document.getElementById("continueBtn"); const continueBtn = document.getElementById("continueBtn");
let selectedActivity = null; const selectedDate = localStorage.getItem("selectedDate");
const selectedDateType = localStorage.getItem("selectedDateType") || "long";
if (!selectedDate) {
window.location.href = "datetime.html";
return;
}
const dateObj = new Date(`${selectedDate}T00:00:00`);
const formattedDate = dateObj.toLocaleDateString("de-DE", {
weekday: "long",
day: "numeric",
month: "long",
year: "numeric",
});
dateSummary.textContent = `Für euer Date am ${formattedDate}.`;
let availableActivities = [];
let selectedList = [];
fetch("appsettings.json") fetch("appsettings.json")
.then((response) => response.json()) .then((response) => response.json())
.then((settings) => renderActivities(settings.activities || [])) .then((settings) => {
const allActivities = settings.activities || [];
if (selectedDateType === "short") {
availableActivities = allActivities.filter((a) => a.type === "short");
} else {
availableActivities = allActivities;
}
renderActivities();
})
.catch(() => { .catch(() => {
activityGrid.textContent = "Aktivitäten konnten nicht geladen werden."; activityGrid.textContent = "Aktivitäten konnten nicht geladen werden.";
}); });
function renderActivities(activities) { function renderActivities() {
activities.forEach((activity) => { activityGrid.innerHTML = "";
const hasShortSelected = selectedList.some((a) => a.type === "short");
availableActivities.forEach((activity) => {
const card = document.createElement("button"); const card = document.createElement("button");
card.type = "button"; card.type = "button";
card.className = "activity-card"; card.className = "activity-card";
card.dataset.activity = activity.name; card.dataset.activity = activity.name;
const isSelected = selectedList.some((a) => a.name === activity.name);
if (isSelected) {
card.classList.add("selected");
}
const isLongDisabled = hasShortSelected && activity.type === "long";
if (isLongDisabled) {
card.classList.add("is-disabled");
card.disabled = true;
}
const icon = document.createElement("span"); const icon = document.createElement("span");
icon.className = "icon"; icon.className = "icon";
icon.setAttribute("aria-hidden", "true"); icon.setAttribute("aria-hidden", "true");
@@ -30,23 +72,70 @@
label.textContent = activity.name; label.textContent = activity.name;
card.append(icon, label); card.append(icon, label);
card.addEventListener("click", () => { card.addEventListener("click", () => {
activityGrid.querySelectorAll(".activity-card").forEach((c) => c.classList.remove("selected")); handleCardClick(activity);
card.classList.add("selected");
selectedActivity = activity.name;
continueBtn.disabled = false;
}); });
activityGrid.appendChild(card); activityGrid.appendChild(card);
}); });
updateNoticeAndContinue();
}
function handleCardClick(activity) {
const isAlreadySelected = selectedList.some((a) => a.name === activity.name);
if (activity.type === "long") {
if (isAlreadySelected) {
selectedList = [];
} else {
selectedList = [activity];
}
} else {
// Short activity
if (isAlreadySelected) {
selectedList = selectedList.filter((a) => a.name !== activity.name);
} else {
// If a long activity was selected, replace it
if (selectedList.some((a) => a.type === "long")) {
selectedList = [activity];
} else if (selectedList.length >= 2) {
// Max 2 short activities, replace the second one
selectedList = [selectedList[0], activity];
} else {
selectedList.push(activity);
}
}
}
renderActivities();
}
function updateNoticeAndContinue() {
const shortCount = selectedList.filter((a) => a.type === "short").length;
const hasLong = selectedList.some((a) => a.type === "long");
if (selectedDateType === "long" && shortCount === 1 && !hasLong) {
timeNotice.textContent =
"💡 An diesem Tag haben wir reichlich Zeit! Wenn du möchtest, kannst du noch eine 2. kurze Aktivität auswählen.";
timeNotice.classList.remove("hidden");
} else if (selectedDateType === "long" && shortCount === 2) {
timeNotice.textContent = "🎉 Perfekt! Du hast 2 kurze Aktivitäten für euren langen Tag ausgewählt.";
timeNotice.classList.remove("hidden");
} else {
timeNotice.classList.add("hidden");
}
continueBtn.disabled = selectedList.length === 0;
} }
continueBtn.addEventListener("click", () => { continueBtn.addEventListener("click", () => {
if (!selectedActivity) { if (selectedList.length === 0) {
return; return;
} }
// Ablage für die spätere Anbindung an Datenbank/Storage localStorage.setItem("selectedActivities", JSON.stringify(selectedList));
localStorage.setItem("selectedActivity", selectedActivity); localStorage.setItem("selectedActivity", selectedList.map((a) => a.name).join(" + "));
window.location.href = "datetime.html"; window.location.href = "name.html";
}); });
})(); })();
appsettings.json
+46 -16
View File
@@ -1,22 +1,52 @@
{ {
"activities": [ "activities": [
{ "name": "Essen bei Namaste", "icon": "🍛" }, { "name": "Untersetzer aus Ton", "icon": "🪨", "type": "long" },
{ "name": "Kinofilm", "icon": "🎬" }, { "name": "Picknick auf der Wiese", "icon": "🧺", "type": "short" },
{ "name": "Film zu Hause + Essen bestellen", "icon": "🛋️" }, { "name": "Cocktailabend zu zweit", "icon": "🍸", "type": "long" },
{ "name": "Spaziergang im Wald", "icon": "🌲" }, { "name": "Massage zu Hause", "icon": "💆", "type": "short" },
{ "name": "Museum für Gegenwartskunst", "icon": "🖼️" }, { "name": "Ausgedehnte Wanderung", "icon": "🥾", "type": "long" },
{ "name": "Picknick auf der Wiese", "icon": "🧺" }, { "name": "Ins Kino", "icon": "🎬", "type": "short" },
{ "name": "Massage zu Hause", "icon": "💆" } { "name": "Sushi selber machen", "icon": "🍣", "type": "short" },
{ "name": "Freizeitpark", "icon": "🎢", "type": "long" },
{ "name": "Spaziergang im Wald", "icon": "🌲", "type": "short" },
{ "name": "Nudeln selber machen", "icon": "🍜", "type": "long" },
{ "name": "Ab ins Freibad", "icon": "🏊", "type": "short" },
{ "name": "Film zu Hause + Essen bestellen", "icon": "🛋️", "type": "long" },
{ "name": "Squash spielen", "icon": "🏸", "type": "short" },
{ "name": "Essen im Namaste", "icon": "🍛", "type": "short" },
{ "name": "Museum für Gegenwartskunst", "icon": "🖼️", "type": "short" },
{ "name": "Playstation Co-Op", "icon": "🎮", "type": "short" }
], ],
"availableDates": [ "availableDates": [
"2026-08-15", { "date": "2026-08-11", "type": "short" },
"2026-08-16", { "date": "2026-08-15", "type": "short" },
"2026-08-23", { "date": "2026-08-18", "type": "short" },
"2026-08-30", { "date": "2026-08-20", "type": "short" },
"2026-09-05", { "date": "2026-08-20", "type": "short" },
"2026-09-06" { "date": "2026-08-22", "type": "long" },
], { "date": "2026-08-23", "type": "long" },
"names": [ { "date": "2026-08-24", "type": "short" },
{ "date": "2026-08-26", "type": "short" },
{ "date": "2026-08-27", "type": "short" },
{ "date": "2026-08-28", "type": "short" },
{ "date": "2026-08-29", "type": "long" },
{ "date": "2026-08-31", "type": "short" },
{ "date": "2026-09-01", "type": "short" },
{ "date": "2026-09-07", "type": "short" },
{ "date": "2026-09-08", "type": "short" },
{ "date": "2026-09-14", "type": "short" },
{ "date": "2026-09-15", "type": "short" },
{ "date": "2026-09-17", "type": "short" },
{ "date": "2026-09-18", "type": "short" },
{ "date": "2026-09-25", "type": "short" },
{ "date": "2026-09-26", "type": "long" },
{ "date": "2026-09-27", "type": "short" },
{ "date": "2026-09-28", "type": "short" },
{ "date": "2026-09-29", "type": "short" },
{ "date": "2026-09-30", "type": "short" }
]
],
"names": []
} }
ask.js
+1 -1
View File
@@ -22,6 +22,6 @@
}); });
yesBtn.addEventListener("click", () => { yesBtn.addEventListener("click", () => {
window.location.href = "activity.html"; window.location.href = "datetime.html";
}); });
})(); })();
checkout.js
+19 -10
View File
@@ -31,16 +31,25 @@
}); });
summaryDate.textContent = formattedDate; summaryDate.textContent = formattedDate;
// Icon aus appsettings.json laden, falls verfügbar // Icons aus selectedActivities oder appsettings.json laden
fetch("appsettings.json") let storedActivities = [];
.then((res) => res.json()) try {
.then((settings) => { storedActivities = JSON.parse(localStorage.getItem("selectedActivities") || "[]");
const match = (settings.activities || []).find((a) => a.name === selectedActivity); } catch (e) {}
if (match && match.icon) {
activityIcon.textContent = match.icon; if (storedActivities.length > 0) {
} activityIcon.textContent = storedActivities.map((a) => a.icon).join(" ");
}) } else {
.catch(() => {}); 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", () => { checkoutBtn.addEventListener("click", () => {
// Später: API / Mail-Versand / Kalendereintrag ausführen // Später: API / Mail-Versand / Kalendereintrag ausführen
datetime.html
+2 -2
View File
@@ -16,10 +16,10 @@
</div> </div>
<main class="container"> <main class="container">
<a class="back-link" href="activity.html">‹ Zurück</a> <a class="back-link" href="index.html">‹ Zurück</a>
<div class="intro"> <div class="intro">
<h1>Wann soll es losgehen? 💌</h1> <h1>Wann soll es losgehen? 💌</h1>
<p id="activitySummary">Wähle das Datum für euer Date.</p> <p id="activitySummary">Wähle das passende Datum für euer Date aus.</p>
</div> </div>
<section class="calendar-card" aria-label="Kalender"> <section class="calendar-card" aria-label="Kalender">
datetime.js
+19 -16
View File
@@ -7,7 +7,6 @@
"Juli", "August", "September", "Oktober", "November", "Dezember", "Juli", "August", "September", "Oktober", "November", "Dezember",
]; ];
const activitySummary = document.getElementById("activitySummary");
const monthLabel = document.getElementById("monthLabel"); const monthLabel = document.getElementById("monthLabel");
const weekdayRow = document.getElementById("weekdayRow"); const weekdayRow = document.getElementById("weekdayRow");
const dayGrid = document.getElementById("dayGrid"); const dayGrid = document.getElementById("dayGrid");
@@ -15,21 +14,14 @@
const nextMonthBtn = document.getElementById("nextMonthBtn"); const nextMonthBtn = document.getElementById("nextMonthBtn");
const continueBtn = document.getElementById("continueBtn"); const continueBtn = document.getElementById("continueBtn");
// Ohne gewählte Aktivität ergibt diese Seite keinen Sinn.
const selectedActivity = localStorage.getItem("selectedActivity");
if (!selectedActivity) {
window.location.href = "activity.html";
return;
}
activitySummary.textContent = `Für unser Date: „${selectedActivity}“`;
const today = new Date(); const today = new Date();
today.setHours(0, 0, 0, 0); today.setHours(0, 0, 0, 0);
let availableDates = new Set(); let availableDatesMap = new Map();
let viewYear = today.getFullYear(); let viewYear = today.getFullYear();
let viewMonth = today.getMonth(); let viewMonth = today.getMonth();
let selectedDate = null; let selectedDate = null;
let selectedDateType = "long";
WEEKDAYS.forEach((day) => { WEEKDAYS.forEach((day) => {
const span = document.createElement("span"); const span = document.createElement("span");
@@ -47,11 +39,18 @@
fetch("appsettings.json") fetch("appsettings.json")
.then((response) => response.json()) .then((response) => response.json())
.then((settings) => { .then((settings) => {
availableDates = new Set(settings.availableDates || []); const datesList = settings.availableDates || [];
datesList.forEach((item) => {
if (typeof item === "string") {
availableDatesMap.set(item, { type: "long" });
} else if (item && item.date) {
availableDatesMap.set(item.date, { type: item.type || "long" });
}
});
const upcoming = Array.from(availableDates) const upcoming = Array.from(availableDatesMap.keys())
.map((dateKey) => new Date(`${dateKey}T00:00:00`)) .map((dateKey) => new Date(`${dateKey}T00:00:00`))
.filter((date) => date >= today) .filter((date) => date > today)
.sort((a, b) => a - b); .sort((a, b) => a - b);
if (upcoming.length > 0) { if (upcoming.length > 0) {
@@ -82,12 +81,15 @@
for (let day = 1; day <= daysInMonth; day++) { for (let day = 1; day <= daysInMonth; day++) {
const cellDate = new Date(viewYear, viewMonth, day); const cellDate = new Date(viewYear, viewMonth, day);
const key = toDateKey(cellDate);
const button = document.createElement("button"); const button = document.createElement("button");
button.type = "button"; button.type = "button";
button.className = "day-cell"; button.className = "day-cell";
button.textContent = String(day); button.textContent = String(day);
const isAvailable = availableDates.has(toDateKey(cellDate)); const dateInfo = availableDatesMap.get(key);
const isPastOrToday = cellDate <= today;
const isAvailable = Boolean(dateInfo) && !isPastOrToday;
const isToday = cellDate.getTime() === today.getTime(); const isToday = cellDate.getTime() === today.getTime();
const isSelected = selectedDate && cellDate.getTime() === selectedDate.getTime(); const isSelected = selectedDate && cellDate.getTime() === selectedDate.getTime();
@@ -104,6 +106,7 @@
button.addEventListener("click", () => { button.addEventListener("click", () => {
selectedDate = cellDate; selectedDate = cellDate;
selectedDateType = dateInfo ? dateInfo.type : "long";
renderCalendar(); renderCalendar();
updateContinueState(); updateContinueState();
}); });
@@ -141,9 +144,9 @@
if (!selectedDate) { if (!selectedDate) {
return; return;
} }
// Ablage für die spätere Anbindung an Datenbank/Storage
localStorage.setItem("selectedDate", toDateKey(selectedDate)); localStorage.setItem("selectedDate", toDateKey(selectedDate));
window.location.href = "name.html"; localStorage.setItem("selectedDateType", selectedDateType);
window.location.href = "activity.html";
}); });
})(); })();
name.js
+1 -1
View File
@@ -36,7 +36,7 @@
}); });
function renderNames(names) { function renderNames(names) {
const options = names.length > 0 ? names : ["Mein name ist Amor 😽"]; const options = names.length > 0 ? names : ["Du weißt, wer ich bin"];
options.forEach((name) => { options.forEach((name) => {
const card = document.createElement("button"); const card = document.createElement("button");
style.css
+34 -8
View File
@@ -28,14 +28,16 @@
box-sizing: border-box; box-sizing: border-box;
} }
html, html {
body { min-height: 100%;
height: 100%;
} }
body { body {
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
font-family: var(--font-body); font-family: var(--font-body);
font-size: clamp(1rem, 3.6vw, 1.15rem); font-size: clamp(1rem, 3.6vw, 1.15rem);
line-height: 1.5; line-height: 1.5;
@@ -65,7 +67,8 @@ p {
width: 100%; width: 100%;
max-width: 480px; max-width: 480px;
margin: 0 auto; margin: 0 auto;
padding: 24px 20px 40px; padding: 20px 20px 32px;
flex: 1;
} }
/* Buttons -------------------------------------------------------------- */ /* Buttons -------------------------------------------------------------- */
@@ -161,8 +164,8 @@ p {
/* Fixed bottom bar for a primary continue action ------------------------- */ /* Fixed bottom bar for a primary continue action ------------------------- */
body.has-continue-bar { body.has-continue-bar main.container {
padding-bottom: 96px; padding-bottom: calc(110px + env(safe-area-inset-bottom));
} }
.continue-bar { .continue-bar {
@@ -170,8 +173,10 @@ body.has-continue-bar {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); z-index: 100;
background: linear-gradient(0deg, var(--color-bg) 60%, rgba(255, 245, 247, 0)); padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
background: linear-gradient(180deg, rgba(255, 245, 247, 0) 0%, var(--color-bg) 50%);
pointer-events: none;
} }
.continue-bar .container { .continue-bar .container {
@@ -179,6 +184,27 @@ body.has-continue-bar {
max-width: 480px; max-width: 480px;
} }
.continue-bar .btn {
pointer-events: auto;
}
@media (min-width: 768px) {
.container {
flex: none;
}
body.has-continue-bar main.container {
padding-bottom: 12px;
}
.continue-bar {
position: static;
padding: 0 20px 40px;
background: none;
pointer-events: auto;
}
}
/* Back link --------------------------------------------------------------- */ /* Back link --------------------------------------------------------------- */
.back-link { .back-link {