Reiseplan-Visualisierung

Was macht Reiseplan-Visualisierung?

Verwandle eine Reise in eine einzige HTML-Datei: interaktive Karte, tägliche Zeitleiste und Checkliste mit Erinnerungen (z.B. Vorverkauf von Tickets). Die technische Logik wird von den integrierten Modulen (assets/map.js, assets/reminders.js) übernommen, die Ästhetik überlasse man den Design-Schritten (frontend-design / huashu-design oder den internen Richtlinien als Fallback).

Schritt 1: Modus bestimmen

• Der Benutzer hat nur Zielort + Anzahl der Tage angegeben (z.B. „Hongkong 4 Tage 3 Nächte“) → Modus A (Planung von Grund auf).
• Der Benutzer hat bereits einen Reiseplan (Text oder alte HTML-Datei) → Modus B (Vorhandenen Plan parsen).

Modus A: Planung von Grund auf

1. Lies references/research-guide.md und recherchiere online über das Reiseziel.
2. Erstelle im Chat einen detaillierten, tagesweisen Vorschlag im Markdown-Format (Morgen/Mittag/Abend, Sehenswürdigkeiten, Verkehr, Unterkunft).
3. Iteriere mit dem Benutzer, bis dieser explizit zustimmt.
4. Gehe zu „Recherche vervollständigen + Generieren“.

Modus B: Vorhandener Plan

1. Parse den vom Benutzer bereitgestellten Reiseplan (bei alter HTML-Datei extrahiere strukturierte Daten daraus).
2. Mach beiläufig Vorschläge (Agent-Mehrwert, aber nicht aufdringlich): Überprüfe den Plan des Benutzers auf die Dimensionen eines „vollständigen Reiseplans“ (Reisehinweise/Wettervorsorge, vorzubuchende Aktivitäten, Punkt-zu-Punkt-Verkehr, Rhythmus und Puffer, lokale Essenspflichten, ob die Unterkunftsgegend sinnvoll ist usw.) und gib im Chat maximal 3–4 konkrete, optionale Optimierungsvorschläge. Grundsätze:
   • Wähle nur tatsächliche Lücken aus; ist der Plan bereits vollständig, sag einfach „Sieht gut aus“, keine erzwungenen Vorschläge, keine Belehrungen, nicht den gesamten Plan des Benutzers umschreiben.
   • Ein Satz, der das Problem benennt, + ein Satz für die Richtung reicht; die Vorschläge bleiben knapp und standardmäßig mündlich, damit die finale HTML-Ausgabe sauber bleibt (der Benutzer kann sie später bei Bedarf einfügen lassen).
   • Das ist unser Unterschied zu „reiner Prompt-to-HTML“ – der Agent nutzt sein Urteilsvermögen, aber nur dezent.
3. Gehe zu „Recherche vervollständigen + Generieren“ (das Generieren wird nicht durch Vorschläge blockiert; die Annahme liegt beim Benutzer).

Recherche vervollständigen + Generieren

1. Recherchiere gemäß references/research-guide.md online: Koordinaten, echte Bild-URLs, Bewertungen, Rezensionen, Öffnungszeiten / Ruhetage, Ticketpreise (Richtpreise), vorzubuchende Aktivitäten inkl. leadDays; Reisehinweise (Wetter/Taifun/Kleidung/Zahlung/Apps/optimaler Buchungszeitpunkt), Punkt-zu-Punkt-Verkehr (Verkehrsmittel/Preis/Dauer), saisonale Events, empfohlene Gerichte + Richtpreis für jede Mahlzeit; für Flüge 3–5 Auswahlflüge, Hotels nach Gegend + Preiskategorie empfehlen, und bereite einen Haftungsausschluss sowie Tipps für die gesamte Reise vor. Der Zeitplan berücksichtigt Wetter-/Jahreszeitlogik (Aktivitäten im Freien in kühlere Tageszeiten legen). Keine Echtzeit-Ticketpreise recherchieren.
2. Organisiere die Daten in die im assets/page-contract.md definierte trip-Datenstruktur.
3. Generiere mit den Design-Schritten eine gestaltete HTML-Datei: Bevorzuge einen professionellen Design-Skill – frontend-design oder huashu-design (Hua Shu Design); falls eines installiert ist, verwende es; falls keines vorhanden, folge den internen ästhetischen Richtlinien in references/design-guidelines.md. Halte dich in jedem Fall strikt an die Blöcke und Einschränkungen von assets/page-contract.md:
   • Binde assets/map.js und assets/reminders.js direkt in die HTML ein (sichert die Einzeldatei).
   • Verwende computeReminders + renderChecklistHTML für die Checkliste am Seitenanfang.
   • Zeige den Abschnitt „Reisehinweise“; im Flugbereich die Auswahlflüge (bereits gebuchte hervorheben), Hotels nach Gegend + Preiskategorie, mit gut sichtbarem Haftungsausschluss in der Nähe.
   • Zeitleistenkarten zeigen optionale Felder wie Öffnungszeiten/Ticketrichtpreise/Verkehr/saisonale Events; zeige tägliche Mahlzeiten (empfohlene Gerichte + Preise), Tipps für den Tag und die gesamte Reise, sowie Alternativoptionen für einzelne Tage (falls vorhanden).
   • Verwende initTravelMap für die Karte mit Leaflet CDN (CSS/JS).
   • Füge bei Elementen mit needsBooking einen reminderBadgeHTML(leadDays) in der Zeitleiste ein.
   • Jede Reise erhält ein eigenes Farbschema.
4. Speichere die Datei als <Reisename>-Reiseplan.html im Arbeitsverzeichnis.
5. Teile dem Benutzer mit: Er kann diese HTML-Datei später zurückgeben und sagen „Verschiebe Tag 3 X auf Tag 4“ – die Struktur wird dann direkt geändert.

Nicht tun

Echtzeit-Flugpreise/Ticketpreise, Ticketbuchungen, mehrsprachiges UI, Backend. Alles statisch, alles in einer Datei.