AdeDeepFishing/trip-itinerary-page

Reise-Seite mit Tagesübersicht

Verwandelt einen Reiseplan mit Tagesaufteilung in eine einzelne HTML-Datei: klebrige Tabs pro Tag, ein Countdown-Banner, zeitlinienartige Aktivitätskarten mit Tags (kostenlos / Buchung nötig / Preis / Transit / solo-geeignet / Highlight), eine Packliste und ein Übersichts-Panel für wichtige Infos. Kein Build-Schritt, keine Abhängigkeiten – eine Datei, die auf dem Handy funktioniert und überall einfach bereitgestellt werden kann (Vercel, Netlify, GitHub Pages oder lokal geöffnet).

Beginne mit assets/template.html. Erstelle dies nicht von Grund auf neu – die Vorlage enthält bereits getestetes JavaScript für die beiden schwierigsten Teile (das automatische Scrollen der Navigation und die Countdown-/Datumslogik unten), und deren Neuerfindung führt oft zu Fehlern, die hier bereits behoben sind.

Arbeitsablauf

1. Sammle, was du brauchst (frage nach, wenn es nicht bereits im Gespräch ist)

• Wer reist, wer empfängt (falls jemand) – Vornamen reichen
• Reiseziel(e) und Zeitraum
• Genaues Ankunfts- und Abreisedatum + Uhrzeit, und in welcher Zeitzone sie angegeben sind. Dies ist die häufigste Fehlerquelle – lies die unten stehende Falle, bevor du etwas fest codierst.
• Der Tagesplan, falls bereits besprochen – ziehe ihn aus der Unterhaltung, anstatt erneut zu fragen
• Jeglicher Aufenthaltsort, private Adresse oder Treffpunkt, die auf der Seite erscheinen sollen
• Themenpräferenz (siehe Themen unten) – falls der Benutzer keine Präferenz hat, verwende standardmäßig kawaii-pink, es ist das am meisten getestete

Halte den Prozess nicht auf, wenn nicht jedes Detail vorhanden ist. Erstelle einen Entwurf mit Platzhaltern ([ausfüllen]) für alles Fehlende und kennzeichne sie deutlich in deiner Antwort, anstatt die ganze Seite wegen einer Unbekannten aufzuhalten.

2. Datenschutzprüfung – führe dies durch, bevor du eine einzige Adresse notierst

Wenn der Reisende in einem Hotel, Airbnb oder einer anderen benannten Unterkunft wohnt, ist es in Ordnung, den Namen der Unterkunft und das Viertel klar anzugeben – es handelt sich bereits um ein öffentliches Geschäft, und die Nennung ist wirklich nützlich (für einen Fahrer eines Mitfahrdienstes, für einen Freund, der sich trifft). Lasse einfach die Zimmer-/Einheitsnummer weg.

Wenn der Reisende im Privathaus eines anderen wohnt (bei Freunden oder Familie), schreibe niemals die genaue Adresse, den genauen Gebäudenamen oder das genaue Wohnviertel in die Datei – selbst wenn der Benutzer es dir direkt im Chat gegeben hat – falls die Seite jemals gescreenshottet, geteilt, unter einer erratbaren URL gehostet oder öffentlich gemacht werden könnte.

Ein Muster, das für den Privathaus-Fall gut funktioniert: Ersetze den genauen Standort durch etwas wie „die Adresse, die ich dir geschickt habe“ oder „unser üblicher Treffpunkt“ – es klingt wie ein natürlicher Insider-Witz zwischen den Personen, die die Info tatsächlich brauchen, und verrät einem externen Leser nichts. Behalte die Namen der Verkehrslinien und die allgemeine Gegend bei („eine Station der Linie X“), da dies wirklich nützlich ist und für sich allein nicht identifizierend ist.

Wende dies konsequent an: Wenn ein bestimmter Ortsname an mehreren Stellen vorkommt (z. B. ein Wohnviertel sowohl in einer „Essentials“-Karte als auch in einer Routenbeschreibung wie „nimm den Zug nach X“), bereinige alle auf die gleiche Weise. Eine einzelne geschwärzte Karte neben drei beiläufigen Erwähnungen des echten Namens macht den Zweck zunichte.

3. Wähle ein Thema

Die Vorlage enthält zwei vollständige Themen, die durch ein Attribut umgeschaltet werden:

<html data-theme="kawaii-pink">   <!-- oder -->
<html data-theme="neutral-modern">

Alles andere – Schriftarten, Farben, die dekorative Kopfzeilenform – folgt automatisch aus diesem einen Wert; du musst den Rest des CSS nicht anfassen, um umzuschalten. Um ein drittes Thema hinzuzufügen, kopiere einen der [data-theme="..."] CSS-Blöcke in der Nähe des Dateianfangs, benenne ihn um und passe die Variablen an – siehe examples/demo-lisbon-trip.html für ein funktionierendes Beispiel (ein benutzerdefiniertes lisbon-tile-Thema, das auf diese Weise erstellt wurde, Azulejo-Blau + Terrakotta anstelle der beiden Standardfarben).

Die Kopfzeile enthält bereits einen Farbverlaufshintergrund mit einer weichen Punktstruktur, einen wellenförmigen Teiler zur Seite darunter, eine Zeile mit „Statistik“-Chips und einen optionalen dekorativen Eckakzent (.corner-orb) und ein kleines Symbol (wie .bow für kawaii-pink), das jedes Thema ein- oder ausschalten kann – du musst nichts davon neu erstellen, fülle einfach den Chip-Text aus und tausche aus, welche dekorativen Elemente für ein neues Thema angezeigt werden (siehe, wie .bow/.tile-ornament/.corner-orb pro data-theme in der Nähe des CSS-Anfangs definiert sind).

4. Erstelle die Tageskarten

Jeder Tag ist ein <section class="day"> mit einem data-date (ISO-Format, verwendet vom Navigationserstellungs-Skript) und einem data-title (kurzes Label, das im Tab angezeigt wird). Darin befinden sich eine Kopfzeile mit einem farbigen Badge, dann eine .timeline aus .item-Blöcken: eine Uhrzeit, ein fett gedruckter Titel, ein oder zwei Sätze und optionale Tags.

Verfügbare Tags von Haus aus: free (kostenlos), book (Vorab-Buchung nötig), price (setze die tatsächlichen Kosten in den Tag-Text, z. B. „¥500“ oder „$12“ – die Währung variiert pro Reise), transit (ein Transporthinweis, der hervorgehoben werden sollte), solo (gut alleine machbar / ein solo-freundliches Zeitfenster), highlight (ein generischer Akzent-Tag für das persönliche Extra der Reise – ein Fandom, ein Insider-Witz, eine „Nicht verpassen“-Markierung). Füge auf die gleiche Weise neue Tag-Klassen hinzu, falls die Reise eine Kategorie erfordert, die diese nicht abdecken.

Halte den Beschreibungstext auf ein oder zwei Sätze pro Eintrag – dies ist eine schnell erfassbare Handy-Referenz, kein Blogbeitrag.

5. Richte den Countdown ein – lies dies, bevor du die Daten setzt

In der Nähe des Dateiendes:

var arrive = new Date('2026-07-18T15:05:00+09:00');
var depart = new Date('2026-07-25T18:00:00+09:00');

Die Kopfzeile zeigt einen live aktualisierten Countdown in Tagen/Stunden/Min/Sek bis zum Reisebeginn an, wechselt dann automatisch zu „Tag N der Reise“ während der Reise und danach zu „Reise abgeschlossen“ – dies wird von der Funktion tick() gesteuert, die jede Sekunde läuft. Du musst diesen Teil nicht erstellen.

Häufiger Fehler, den du aktiv überprüfen solltest: Das Abreisedatum einer Buchungsbestätigung ist das Datum, an dem der Reisende die Abflugstadt verlässt, nicht das Datum, an dem er ankommt. Bei einem Langstrecken- oder Nachtflug ist die lokale Ankunftszeit sehr oft der nächste Kalendertag am Zielort – Reisepläne kennzeichnen dies mit einem kleinen „+1 Tag“ neben der Ankunftszeit, was leicht übersehen werden kann. Bevor du den Ankunftszeitstempel fest codierst, bestätige explizit: Abflugdatum + Flugdauer, überprüft mit dem Zeitzonen-Offset des Zielorts, landet tatsächlich an dem Datum, das du gleich notieren wirst. Ein Fehler hier führt dazu, dass der gesamte Countdown (und die „Heute“-Hervorhebung der Tagesnavigation) um einen Tag verschoben ist, was in der Regel erst bemerkt wird, wenn jemand am Flughafen auf einen Flug wartet, der noch nicht landet.

Überprüfe auch, ob der UTC-Offset im ISO-String mit der Zeitzone des Zielorts übereinstimmt, nicht mit der Heimatzeitzone des Reisenden.

6. Klebrige Tagesnavigation

Diese wird automatisch aus den vorhandenen .day-Abschnitten erstellt – du musst sie nicht von Hand schreiben. Zwei Verhaltensweisen, die du kennen solltest, beide bereits implementiert:

• Der aktive Tab wird durch die Scrollposition bestimmt und beim Scrollen hervorgehoben
• Die Tab-Leiste scrollt sich automatisch horizontal, um den aktiven Tab sichtbar zu halten. Ohne dies würde ein Benutzer, der an Tag 6 oder 7 vorbeiscrollt, feststellen, dass der entsprechende Tab aus dem sichtbaren Bereich der Navigationsleiste gescrollt ist und ihn manuell scrollen müsste – dies war ein echter Fehler in einer früheren Version, die Lösung ist der scrollTo-Block innerhalb syncActive(). Entferne ihn nicht, wenn du Anpassungen vornimmst.

7. Fülle die Checkliste und das Übersichts-Panel aus

• Checkliste (#checklist): Buchungen und Vorbereitungsaufgaben, jede als Kontrollkästchen. Weise im UI-Text darauf hin, dass sich die Kontrollkästchen beim Neuladen zurücksetzen (es gibt kein Backend) – lasse den Benutzer nicht glauben, dass dies dauerhaft gespeichert wird.
• Essentials (Übersicht): wo sie wohnen (siehe den Datenschutzabschnitt oben für Hotel vs. Privathaus-Formulierung), ein Treffpunkt, falls sie getrennt werden, Notrufnummern für das Zielland (verwende nicht standardmäßig die Nummern eines Landes), einen Plan für Wetter/Hitze/Kälte, Bargeld/Zahlungsgepflogenheiten und alles andere, das in einem Moment kleinerer Chaossituationen wirklich nützlich ist (ein verspäteter Zug, ein leeres Telefon). Dieses Panel sollte kurz bleiben – fünf oder sechs Karten, kein voller Reiseführer.

8. Bevor du auslieferst, überprüfe

• Ankunfts-/Abreisedaten und Zeitzonen sind korrekt (lies Schritt 5 erneut)
• Keine wörtliche Wohnadresse oder genauer privater Standort irgendwo in der Datei, einschließlich in Routenbeschreibungen, nicht nur in der Essentials-Karte
• Das Themenattribut entspricht dem, was der Benutzer verlangt hat
• Das automatische Scrollen der Navigation funktioniert noch, wenn du das Skript geändert hast
• Kontrollkästchen streichen ihr Label sichtbar durch, wenn sie aktiviert sind
• Speichere am Ausgabe-/Lieferort und präsentiere die Datei dem Benutzer (verwende das verfügbare Dateiübertragungswerkzeug in dieser Umgebung; falls keines vorhanden ist, teile dem Benutzer direkt den Dateipfad mit)

9. Erwarte, dass du sie weiter bearbeiten musst

Reisepläne ändern sich ständig – verspätete Flüge, schlechtes Wetter, ein ausgebuchtes Restaurant, ein vertauschter Tag. Wenn der Benutzer mit einer Änderung zurückkommt, bearbeite den spezifischen Abschnitt mit einer gezielten Ersetzung, anstatt die gesamte Datei neu zu generieren; der Benutzer hat möglicherweise bereits Text an anderer Stelle angepasst, den eine vollständige Neuerstellung stillschweigend verwerfen würde. Eine erneute Bereitstellung (falls gehostet) bedeutet einfach, dieselbe Datei erneut hochzuladen – erinnere den Benutzer daran, dies nach Bearbeitungen zu tun, wenn er einen Host wie Vercel oder Netlify erwähnt hat, da hier vorgenommene Änderungen sich nicht von selbst ausliefern.

Dateien in diesem Skill

• assets/template.html – der Ausgangspunkt. Kopiere es, befolge dann die obigen Schritte.