fix: update wording for consistency in checkout summary

.dockerignore

@@ -0,0 +1,6 @@
+.git
+.github
+Dockerfile
+docker-compose.yml
+.env
+*.exe

.env.example

@@ -0,0 +1,13 @@
+# Server Port & Configuration
+PORT=8080
+WEB_DIR=public
+
+# SMTP Configuration
+SMTP_HOST=mail.example.com
+SMTP_PORT=587
+SMTP_USER=user@example.com
+SMTP_PASS=secretpassword
+
+# Email Addresses
+TO_EMAIL=destination@example.com
+FROM_EMAIL=sender@example.com

.github/prompts/7-create-docker-microservice.prompt.md

@@ -0,0 +1,20 @@
+I want to add backend functionality to send the survey responses as an email upon submission using Option 1 (a minimalist Go/Golang microservice).
+
+Please complete the following tasks:
+
+1. Go Microservice (`main.go`):
+   - Create a lightweight HTTP server using standard Go library packages (`net/http`, `net/smtp`, `encoding/json`).
+   - Create an endpoint (e.g., `POST /api/submit`) to accept JSON payload survey data from the front end.
+   - Configure SMTP credentials and server settings via environment variables (e.g., `SMTP_HOST`, `SMTP_PORT`, `SMTP_USER`, `SMTP_PASS`, `TO_EMAIL`) via an .env file
+   - Format the incoming JSON survey data into a clean, readable text body and dispatch the email upon request.
+   - Handle CORS preflight (`OPTIONS`) and headers so the HTML/JS front end can POST to it smoothly.
+
+2. Dockerization (`Dockerfile`):
+   - Provide a multi-stage `Dockerfile` (e.g., compile with `golang:alpine`, copy to `scratch` or `alpine`) to ensure the resulting container image is ultra-lightweight (<20MB).
+
+3. Front-End Integration:
+   - Show how to update the existing JavaScript submission handler (using `fetch()`) to send the survey data as JSON to the new Go backend endpoint.
+
+Please keep the code minimalist, robust, and well-commented.
+
+when everything works, please create a simple docker-compose file that builds the project and runs the container. include traefik labels for reverse proxy routing.

.gitignore

@@ -0,0 +1,2 @@
+.env
+*.exe

Dockerfile

@@ -0,0 +1,24 @@
+# Stage 1: Build the Go binary
+FROM golang:1.22-alpine AS builder
+
+WORKDIR /app
+
+COPY go.mod ./
+COPY . .
+
+RUN CGO_ENABLED=0 GOOS=linux go build -ldflags="-w -s" -o server .
+
+# Stage 2: Ultra-lightweight runtime container
+FROM alpine:3.19
+
+RUN apk add --no-cache ca-certificates tzdata
+
+WORKDIR /app
+
+# Copy binary and static front-end assets
+COPY --from=builder /app/server /app/server
+COPY --from=builder /app/public /app/public
+
+EXPOSE 8080
+
+ENTRYPOINT ["/app/server"]

README.md

@@ -0,0 +1,107 @@
+# Date-Wizard 💕
+
+Eine spielerische Web-App ("Choose Your Own Adventure") zum Planen gemeinsamer Dates – mit mobilem Design, dynamischen Aktivitäten & Terminen sowie einem Go-Microservice zum E-Mail-Versand der Reservierung.
+
+---
+
+## 📁 Projektstruktur
+
+```text
+datetest/
+├── public/                 # Statische Webseiten & Assets
+│   ├── appsettings.json    # Konfiguration der Aktivitäten & Termine
+│   ├── index.html          # Startseite ("Willst du mit mir gehen?")
+│   ├── datetime.html/.js   # Datumsauswahl (Kalender)
+│   ├── activity.html/.js   # Aktivitätsauswahl
+│   ├── name.html/.js       # Namensauswahl ("Wer bist du?")
+│   └── checkout.html/.js   # Zusammenfassung & Bestätigung
+├── main.go                 # Go-Microservice (HTTP-Server & SMTP E-Mail)
+├── go.mod                  # Go-Moduldefinition
+├── Dockerfile              # Multi-Stage Dockerfile (Alpine Runtime)
+├── docker-compose.yml      # Docker-Compose mit Traefik Labels
+├── .env.example            # Vorlage für Umgebungsvariablen
+└── .env                    # Lokale/Produktive Umgebungsvariablen (nicht ins Git committen)
+```
+
+---
+
+## ⚙️ Konfiguration
+
+### 1. E-Mail & Server `.env` anlegen
+
+Kopiere `.env.example` zu `.env`:
+
+```bash
+cp .env.example .env
+```
+
+Trage in der `.env` deine Server- und SMTP-Zugangsdaten ein:
+
+| Variable | Beschreibung | Beispiel |
+| :--- | :--- | :--- |
+| `PORT` | HTTP-Port des Go-Servers | `8080` |
+| `WEB_DIR` | Verzeichnis der statischen Assets | `public` |
+| `SMTP_HOST` | Postausgangsserver (SMTP) | `mail.example.com` |
+| `SMTP_PORT` | SMTP-Port (Standard meist 587 oder 465) | `587` |
+| `SMTP_USER` | Benutzername / E-Mail für SMTP-Auth | `absender@example.com` |
+| `SMTP_PASS` | Passwort des SMTP-Kontos | `secretpassword` |
+| `TO_EMAIL` | Ziel-Adresse für eingegangene Date-Anfragen | `ziel@example.com` |
+| `FROM_EMAIL` | Absender-Adresse für die Benachrichtigung | `absender@example.com` |
+
+*(Hinweis: Wenn `SMTP_HOST` oder `TO_EMAIL` leer bleiben, läuft der Server im Testmodus ohne E-Mail-Versand.)*
+
+### 2. Aktivitäten & Termine anpassen (`public/appsettings.json`)
+
+Passe in `public/appsettings.json` die zur Auswahl stehenden Aktivitäten sowie die verfügbaren Tage an:
+
+- **`activities`**: Liste von Objekten mit `name`, `icon` (Unicode Emoji) und `type` (`short` oder `long`).
+- **`availableDates`**: Liste von verfügbaren Tagen mit `date` (`YYYY-MM-DD`) und `type` (`short` oder `long`).
+- **`names`**: Optional vordefinierte Namen zur Auswahl (ist die Liste leer, wird ein Standard-Fallback angeboten).
+
+---
+
+## 🚀 Inbetriebnahme
+
+### Option A: Mit Docker Compose (Empfohlen)
+
+1. `.env` wie oben beschrieben anpassen.
+2. Container erstellen und starten:
+
+   ```bash
+   docker-compose up -d --build
+   ```
+
+3. Die Anwendung ist unter `http://localhost:8080` erreichbar.
+
+#### Traefik / Reverse Proxy
+
+`docker-compose.yml` enthält bereits Traefik-Labels. Passe bei Bedarf die Domain an:
+
+```yaml
+- "traefik.http.routers.date-wizard.rule=Host(`date.deine-domain.de`)"
+```
+
+---
+
+### Option B: Direkt mit Go (Lokal)
+
+#### Voraussetzungen
+- Installed Go SDK (Version 1.22 oder neuer)
+
+1. Abhängigkeiten prüfen & kompilieren:
+
+   ```bash
+   go run main.go
+   ```
+
+2. Die Anwendung startet auf dem in `.env` definierten Port (z. B. `http://localhost:8080`).
+
+---
+
+## 📱 Ablauf der Anwendung
+
+1. **Startseite (`index.html`)**: Spielerische Frage mit Ja/Nein-Interaktion.
+2. **Datumsauswahl (`datetime.html`)**: Interaktiver Kalender mit Markierung von verfügbaren Tagen (`short`/`long`).
+3. **Aktivitätsauswahl (`activity.html`)**: Auswahl passender Aktivitäten je nach verbleibender Zeit am gewählten Tag.
+4. **Namensauswahl (`name.html`)**: Abfrage "Wer bist du?".
+5. **Checkout & Bestätigung (`checkout.html`)**: Finale Übersicht und Absenden der Reservierung (überträgt Daten an `/api/submit` und löst den E-Mail-Versand aus).

docker-compose.yml

@@ -0,0 +1,20 @@
+version: '3.8'
+
+services:
+  date-wizard:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: date-wizard
+    restart: unless-stopped
+    ports:
+      - "8080:8080"
+    env_file:
+      - .env
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.date-wizard.rule=Host(`date.example.com`)"
+      - "traefik.http.routers.date-wizard.entrypoints=websecure"
+      - "traefik.http.routers.date-wizard.tls=true"
+      - "traefik.http.routers.date-wizard.tls.certresolver=letsencrypt"
+      - "traefik.http.services.date-wizard.loadbalancer.server.port=8080"

go.mod

@@ -0,0 +1,3 @@
+module date-wizard
+
+go 1.22

main.go

@@ -0,0 +1,186 @@
+package main
+
+import (
+	"bufio"
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"log"
+	"net/http"
+	"net/smtp"
+	"os"
+	"strings"
+)
+
+type Activity struct {
+	Name string `json:"name"`
+	Icon string `json:"icon"`
+	Type string `json:"type"`
+}
+
+type SurveyPayload struct {
+	Activity   string     `json:"activity"`
+	Activities []Activity `json:"activities"`
+	Date       string     `json:"date"`
+	DateType   string     `json:"dateType"`
+	Name       string     `json:"name"`
+}
+
+type Response struct {
+	Success bool   `json:"success"`
+	Message string `json:"message"`
+}
+
+func main() {
+	loadEnv(".env")
+
+	port := os.Getenv("PORT")
+	if port == "" {
+		port = "8080"
+	}
+
+	webDir := os.Getenv("WEB_DIR")
+	if webDir == "" {
+		webDir = "public"
+	}
+
+	http.HandleFunc("/api/submit", handleSubmit)
+
+	// Serve static files from webDir directory
+	fs := http.FileServer(http.Dir(webDir))
+	http.Handle("/", fs)
+
+	log.Printf("Server starting on port %s (serving static files from %s)...", port, webDir)
+	if err := http.ListenAndServe(":"+port, nil); err != nil {
+		log.Fatalf("Server failed to start: %v", err)
+	}
+}
+
+func handleSubmit(w http.ResponseWriter, r *http.Request) {
+	if enableCORS(w, r) {
+		return
+	}
+
+	if r.Method != http.MethodPost {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	var payload SurveyPayload
+	err := json.NewDecoder(r.Body).Decode(&payload)
+	if err != nil {
+		w.Header().Set("Content-Type", "application/json")
+		w.WriteHeader(http.StatusBadRequest)
+		json.NewEncoder(w).Encode(Response{
+			Success: false,
+			Message: "Ungültige Anfragedaten.",
+		})
+		return
+	}
+
+	log.Printf("Received survey submission from %s for date %s (%s)", payload.Name, payload.Date, payload.Activity)
+
+	err = sendEmail(payload)
+	if err != nil {
+		log.Printf("Error sending email: %v", err)
+		w.Header().Set("Content-Type", "application/json")
+		w.WriteHeader(http.StatusInternalServerError)
+		json.NewEncoder(w).Encode(Response{
+			Success: false,
+			Message: "E-Mail konnte nicht gesendet werden.",
+		})
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode(Response{
+		Success: true,
+		Message: "Reservierung erfolgreich übermittelt!",
+	})
+}
+
+func enableCORS(w http.ResponseWriter, r *http.Request) bool {
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+	w.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
+	w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
+
+	if r.Method == http.MethodOptions {
+		w.WriteHeader(http.StatusOK)
+		return true
+	}
+	return false
+}
+
+func sendEmail(payload SurveyPayload) error {
+	smtpHost := os.Getenv("SMTP_HOST")
+	smtpPort := os.Getenv("SMTP_PORT")
+	if smtpPort == "" {
+		smtpPort = "587"
+	}
+	smtpUser := os.Getenv("SMTP_USER")
+	smtpPass := os.Getenv("SMTP_PASS")
+	toEmail := os.Getenv("TO_EMAIL")
+	fromEmail := os.Getenv("FROM_EMAIL")
+	if fromEmail == "" {
+		fromEmail = smtpUser
+	}
+
+	if smtpHost == "" || toEmail == "" {
+		log.Println("HINWEIS: SMTP_HOST oder TO_EMAIL nicht konfiguriert. E-Mail-Versand übersprungen.")
+		return nil
+	}
+
+	var bodyBuilder bytes.Buffer
+	bodyBuilder.WriteString(fmt.Sprintf("From: %s\r\n", fromEmail))
+	bodyBuilder.WriteString(fmt.Sprintf("To: %s\r\n", toEmail))
+	bodyBuilder.WriteString(fmt.Sprintf("Subject: Neue Date-Reservierung von %s! 💕\r\n", payload.Name))
+	bodyBuilder.WriteString("MIME-Version: 1.0\r\n")
+	bodyBuilder.WriteString("Content-Type: text/plain; charset=UTF-8\r\n\r\n")
+
+	bodyBuilder.WriteString("Hallo!\r\n\r\n")
+	bodyBuilder.WriteString("Es gibt eine neue Date-Reservierung über deinen Date-Planer:\r\n\r\n")
+	bodyBuilder.WriteString(fmt.Sprintf("👤 Name: %s\r\n", payload.Name))
+	bodyBuilder.WriteString(fmt.Sprintf("📅 Datum: %s (%s)\r\n", payload.Date, payload.DateType))
+	bodyBuilder.WriteString(fmt.Sprintf("💌 Aktivität(en): %s\r\n\r\n", payload.Activity))
+
+	if len(payload.Activities) > 0 {
+		bodyBuilder.WriteString("Details der Aktivitäten:\r\n")
+		for _, act := range payload.Activities {
+			bodyBuilder.WriteString(fmt.Sprintf(" - %s %s (%s)\r\n", act.Icon, act.Name, act.Type))
+		}
+		bodyBuilder.WriteString("\r\n")
+	}
+
+	bodyBuilder.WriteString("Viel Spaß beim gemeinsamen Date! 💕\r\n")
+
+	auth := smtp.PlainAuth("", smtpUser, smtpPass, smtpHost)
+	addr := fmt.Sprintf("%s:%s", smtpHost, smtpPort)
+
+	return smtp.SendMail(addr, auth, fromEmail, []string{toEmail}, bodyBuilder.Bytes())
+}
+
+func loadEnv(filename string) {
+	file, err := os.Open(filename)
+	if err != nil {
+		return
+	}
+	defer file.Close()
+
+	scanner := bufio.NewScanner(file)
+	for scanner.Scan() {
+		line := strings.TrimSpace(scanner.Text())
+		if line == "" || strings.HasPrefix(line, "#") {
+			continue
+		}
+		parts := strings.SplitN(line, "=", 2)
+		if len(parts) == 2 {
+			key := strings.TrimSpace(parts[0])
+			val := strings.TrimSpace(parts[1])
+			val = strings.Trim(val, `"'`)
+			if os.Getenv(key) == "" {
+				os.Setenv(key, val)
+			}
+		}
+	}
+}

public/activity.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
-  <title>Wähle eure Aktivität – Date-Planer</title>
+  <title>Wähle unsere Aktivität – 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" />
@@ -15,11 +15,11 @@
     <a class="back-link" href="datetime.html">‹ Zurück</a>
     <div class="intro">
       <h1>Worauf hast du Lust? 🥰</h1>
-      <p id="dateSummary">Wähle eure gemeinsame Aktivität für das Date aus.</p>
+      <p id="dateSummary">Wähle unsere 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.
+      💡 An diesem Tag haben wir reichlich Zeit! Wenn du möchtest, kannst du noch eine zweite kurze Aktivität auswählen.
     </div>
 
     <div class="activity-grid" id="activityGrid"></div>

public/activity.js

@@ -21,7 +21,7 @@
     month: "long",
     year: "numeric",
   });
-  dateSummary.textContent = `Für euer Date am ${formattedDate}.`;
+  dateSummary.textContent = `Für unser Date am ${formattedDate}.`;
 
   let availableActivities = [];
   let selectedList = [];
@@ -96,12 +96,16 @@
       // Short activity
       if (isAlreadySelected) {
         selectedList = selectedList.filter((a) => a.name !== activity.name);
+      } else if (selectedDateType === "short") {
+        // An kurzen Tagen ist nur maximal eine kurze Aktivität erlaubt
+        selectedList = [activity];
       } else {
-        // If a long activity was selected, replace it
+        // An langen Tagen:
+        // Falls vorher eine lange Aktivität gewählt war, ersetzen
         if (selectedList.some((a) => a.type === "long")) {
           selectedList = [activity];
         } else if (selectedList.length >= 2) {
-          // Max 2 short activities, replace the second one
+          // Maximal 2 kurze Aktivitäten, die zweite ersetzen
           selectedList = [selectedList[0], activity];
         } else {
           selectedList.push(activity);
@@ -118,10 +122,10 @@
 
     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.";
+        "💡 An diesem Tag haben wir reichlich Zeit! Wenn du möchtest, kannst du noch eine zweite 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.textContent = "🎉 Perfekt! Du hast 2 kurze Aktivitäten für unseren Tag ausgewählt.";
       timeNotice.classList.remove("hidden");
     } else {
       timeNotice.classList.add("hidden");

public/appsettings.json

@@ -1,16 +1,17 @@
 {
   "activities": [
-    { "name": "Untersetzer aus Ton", "icon": "🪨", "type": "long" },
     { "name": "Picknick auf der Wiese", "icon": "🧺", "type": "short" },
     { "name": "Cocktailabend zu zweit", "icon": "🍸", "type": "long" },
     { "name": "Massage zu Hause", "icon": "💆", "type": "short" },
     { "name": "Ausgedehnte Wanderung", "icon": "🥾", "type": "long" },
-    { "name": "Ins Kino", "icon": "🎬", "type": "short" },
+    { "name": "Kinofilm", "icon": "🎬", "type": "short" },
     { "name": "Sushi selber machen", "icon": "🍣", "type": "short" },
+    { "name": "Untersetzer aus Ton basteln", "icon": "🪨", "type": "long" },
     { "name": "Freizeitpark", "icon": "🎢", "type": "long" },
     { "name": "Spaziergang im Wald", "icon": "🌲", "type": "short" },
+    { "name": "Kirschbier Tasting", "icon": "🍒", "type": "short" },
     { "name": "Nudeln selber machen", "icon": "🍜", "type": "long" },
-    { "name": "Ab ins Freibad", "icon": "🏊", "type": "short" },
+    { "name": "Chillen im 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" },

public/checkout.css

@@ -29,7 +29,7 @@
 
 .summary-item {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 16px;
   padding-bottom: 12px;
   border-bottom: 1px solid var(--color-rose-light);
@@ -42,7 +42,10 @@
 
 .summary-icon {
   font-size: 1.8rem;
-  line-height: 1;
+  line-height: 1.2;
+  flex-shrink: 0;
+  width: 44px;
+  text-align: center;
 }
 
 .summary-details {

public/checkout.html

@@ -21,7 +21,7 @@
     <div id="summarySection">
       <div class="intro">
         <h1>Fast geschafft! ✨</h1>
-        <p>Überprüfe noch einmal eure Angaben für das perfekt geplante Date.</p>
+        <p>Überprüfe noch einmal deine Angaben für unser perfekt geplantes Date.</p>
       </div>
 
       <div class="summary-card">

public/checkout.js

@@ -52,11 +52,49 @@
   }
 
   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");
+    checkoutBtn.disabled = true;
+    const originalText = checkoutBtn.textContent;
+    checkoutBtn.textContent = "Wird übermittelt... 💌";
+
+    const payload = {
+      activity: selectedActivity,
+      activities: storedActivities,
+      date: selectedDate,
+      dateType: localStorage.getItem("selectedDateType") || "long",
+      name: selectedName,
+    };
+
+    fetch("/api/submit", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
+    })
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error("Fehler beim Übermitteln.");
+        }
+        return res.json();
+      })
+      .then((data) => {
+        if (data.success) {
+          summarySection.classList.add("hidden");
+          if (backLink) {
+            backLink.classList.add("hidden");
+          }
+          confirmationSection.classList.remove("hidden");
+        } else {
+          alert(data.message || "Es gab ein Problem bei der Übermittlung.");
+          checkoutBtn.disabled = false;
+          checkoutBtn.textContent = originalText;
+        }
+      })
+      .catch((err) => {
+        console.error("Submission error:", err);
+        alert("Übermittlung fehlgeschlagen. Bitte versuche es erneut.");
+        checkoutBtn.disabled = false;
+        checkoutBtn.textContent = originalText;
+      });
   });
 })();

public/datetime.html

@@ -19,7 +19,7 @@
     <a class="back-link" href="index.html">‹ Zurück</a>
     <div class="intro">
       <h1>Wann soll es losgehen? 💌</h1>
-      <p id="activitySummary">Wähle das passende Datum für euer Date aus.</p>
+      <p id="activitySummary">Wähl das passende Datum für unser Date aus.</p>
     </div>
 
     <section class="calendar-card" aria-label="Kalender">

public/index.html

@@ -16,7 +16,7 @@
   </div>
 
   <main class="content">
-    <h1 class="question">Hättest du Lust,<br />mit mir auszugehen? 💕</h1>
+    <h1 class="question">Hallo, ich bin dein Ehemann.<br>Hättest du Lust, mit mir auszugehen? 💕</h1>
     <p class="subtitle">Eine kleine Frage mit hoffentlich großer Antwort …</p>
 
     <div class="button-group">