AdeDeepFishing/trip-itinerary-page

Page d'Itinéraire de Voyage

Transforme un plan de voyage jour par jour en un seul fichier HTML : onglets épinglés par jour, bannière de compte à rebours, cartes d'activités en frise chronologique avec tags (gratuit / réservation nécessaire / prix / transport / solo-friendly / coup de cœur), une checklist de préparation, et un panneau des essentiels. Aucune étape de construction, aucune dépendance — un seul fichier, fonctionne depuis un téléphone, facile à redéployer n'importe où (Vercel, Netlify, GitHub Pages, ou simplement ouvert localement).

Commencez à partir de assets/template.html. Ne construisez pas cela à partir de zéro — le modèle contient déjà du JS testé pour les deux parties les plus délicates (le défilement automatique de la navigation et la logique de compte à rebours/dates ci-dessous), et les réinventer a tendance à réintroduire des bugs déjà corrigés ici.

Flux de travail

1. Rassemblez ce dont vous avez besoin (demandez si ce n'est pas déjà dans la conversation)

• Qui voyage, qui héberge (le cas échéant) — les prénoms suffisent
• Destination(s) et période
• Date et heure exactes d'arrivée et de départ, et le fuseau horaire dans lequel elles sont écrites. C'est la source d'erreur la plus courante — voir l'écueil ci-dessous avant de coder quoi que ce soit en dur.
• Le plan jour par jour, s'il a déjà été discuté — tirez-le de la conversation plutôt que de redemander
• Tout point de chute, adresse privée ou point de rencontre qui apparaîtra sur la page
• Préférence de thème (voir Thèmes ci-dessous) — si l'utilisateur s'en fiche, par défaut utilisez kawaii-pink, c'est le plus testé

Ne bloquez pas sur chaque détail. Rédigez avec des espaces réservés ([à remplir]) pour tout ce qui manque et signalez-les clairement dans votre réponse, plutôt que de bloquer toute la page sur un inconnu.

2. Passe vie privée — faites ceci avant d'écrire une seule adresse

Si le voyageur séjourne dans un hôtel, Airbnb ou autre hébergement nommé, il est acceptable d'écrire le nom de l'établissement et le quartier simplement — c'est déjà une entreprise publique, et le nommer est réellement utile (pour un chauffeur VTC, pour un ami qui rejoint). Laissez simplement de côté le numéro de chambre/appartement.

Si le voyageur séjourne chez quelqu'un dans un domicile privé (chez un ami ou un membre de la famille), n'écrivez jamais l'adresse littérale, le nom exact du bâtiment ou le quartier résidentiel précis dans le fichier — même si l'utilisateur vous l'a donné directement dans le chat — si la page pourrait être capturée d'écran, partagée, hébergée à une URL devinable, ou rendue publique.

Modèle qui fonctionne bien pour le cas du domicile privé : remplacez l'emplacement spécifique par quelque chose comme "l'adresse que je t'ai envoyée" ou "notre endroit habituel" — cela se lit comme une blague interne naturelle entre les personnes qui ont réellement besoin de l'info, et ne révèle rien à un lecteur extérieur. Gardez les noms de lignes de transport et la zone générale ("une station sur la ligne X") car c'est réellement utile et pas identifiant en soi.

Appliquez ceci de manière cohérente : si un nom de lieu spécifique apparaît à plusieurs endroits (par exemple un quartier résidentiel mentionné à la fois dans une carte "essentiels" ET dans une description d'itinéraire comme "prenez le train jusqu'à X"), anonymisez tous de la même manière. Une seule carte anonymisée à côté de trois mentions occasionnelles du vrai nom annule l'intérêt.

3. Choisissez un thème

Le modèle fournit deux thèmes complets, basculés par un attribut :

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

Tout le reste — polices, couleurs, la forme décorative de l'en-tête — suit automatiquement à partir de cette seule valeur ; vous n'avez pas besoin de toucher au reste du CSS pour basculer. Pour ajouter un troisième thème, copiez l'un des blocs CSS [data-theme="..."] près du haut du fichier, renommez-le, et ajustez les variables — voir examples/demo-lisbon-trip.html pour un exemple travaillé (un thème personnalisé lisbon-tile construit de cette manière, bleu azulejo + terre cuite au lieu des deux défauts).

L'en-tête comprend déjà un fond dégradé avec une texture de points doux, un séparateur en vague vers la page en dessous, une rangée de "puces" statistiques, et un accent décoratif optionnel dans le coin (.corner-orb) et une petite icône (comme .bow pour kawaii-pink) que chaque thème peut activer ou laisser de côté — vous n'avez pas besoin de reconstruire tout cela, remplissez simplement le texte des puces et échangez les éléments décoratifs qui s'affichent pour un nouveau thème (voir comment .bow/.tile-ornament/.corner-orb sont délimités par data-theme près du haut du CSS).

4. Construisez les cartes du jour

Chaque jour est une <section class="day"> avec un data-date (format ISO, utilisé par le script de construction de navigation) et un data-title (étiquette courte affichée dans l'onglet). À l'intérieur, un en-tête avec un badge coloré, puis une .timeline de blocs .item : une heure, un titre en gras, une ou deux phrases, et des tags optionnels.

Tags disponibles d'origine : free (gratuit), book (réservation à l'avance nécessaire), price (mettez le coût réel dans le texte du tag, par exemple "¥500" ou "$12" — la devise varie selon le voyage), transit (une instruction de transport qui vaut la peine d'être signalée), solo (bien à faire en solo / une fenêtre compatible solo), highlight (un tag d'accent générique pour la touche personnelle du voyage — un fandom, une blague interne, un drapeau "à ne pas manquer"). Ajoutez de nouvelles classes de tags de la même manière si le voyage a besoin d'une catégorie que celles-ci ne couvrent pas.

Gardez le texte de description à une ou deux phrases par élément — c'est une référence consultable sur téléphone, pas un article de blog.

5. Branchez le compte à rebours — lisez ceci avant de définir les dates

Près du bas du fichier :

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

L'en-tête affiche un compte à rebours en direct et en temps réel des Jours/Heures/Min/Sec avant le début du voyage, puis bascule automatiquement vers "Jour N du voyage" pendant celui-ci, puis "Voyage terminé" après — ceci est géré par la fonction tick() qui s'exécute chaque seconde, vous n'avez pas besoin de construire cette partie.

Erreur courante à vérifier activement : la date de départ d'une confirmation de réservation est la date à laquelle le voyageur quitte la ville d'origine, pas la date à laquelle il atterrit. Sur un vol long-courrier ou de nuit, l'heure d'arrivée locale est très souvent le jour calendaire suivant à destination — les itinéraires le marquent avec un petit "+1 jour" à côté de l'heure d'arrivée, qui est facile à manquer. Avant de coder en dur le timestamp d'arrivée, confirmez explicitement : date de départ + durée du vol, vérifiée par rapport au décalage horaire de la destination, atterrit effectivement à la date que vous êtes sur le point d'écrire. Se tromper là-dessus signifie que tout le compte à rebours (et le surlignage "aujourd'hui" de la navigation de jour) est décalé d'un jour, généralement découvert seulement quand quelqu'un attend dans un aéroport pour un vol qui n'atterrit pas encore.

Vérifiez également que le décalage UTC dans la chaîne ISO correspond au fuseau horaire de la destination, pas au fuseau horaire d'origine du voyageur.

6. Navigation de jours épinglée

Ceci est construit automatiquement à partir des sections .day existantes — vous n'avez pas besoin de l'écrire à la main. Deux comportements utiles à connaître, tous deux déjà implémentés :

• L'onglet actif est déterminé par la position de défilement et mis en surbrillance au fur et à mesure que l'utilisateur fait défiler
• La bande d'onglets se défile automatiquement horizontalement pour garder l'onglet actif visible. Sans cela, un utilisateur qui fait défiler après le jour 6 ou 7 constate que l'onglet correspondant a défilé hors du bord visible de la barre de navigation et doit le faire défiler manuellement — c'était un vrai bug dans une version antérieure, le correctif est le bloc scrollTo à l'intérieur de syncActive(). Ne le supprimez pas lors de la personnalisation.

7. Remplissez les panneaux de checklist et d'essentiels

• Checklist (#checklist) : réservations et tâches de préparation, chaque ligne une case à cocher. Notez dans la copie de l'interface utilisateur que les cases à cocher se réinitialisent au rechargement (il n'y a pas de backend) — ne laissez pas l'utilisateur penser que c'est persistant.
• Essentiels : où ils séjournent (voir le passage vie privée ci-dessus pour le libellé hôtel vs. domicile privé), un point de rencontre en cas de séparation, les numéros d'urgence pour le pays de destination (ne mettez pas par défaut les numéros d'un seul pays), un plan météo (chaleur/froid), les normes de paiement/espèces, et tout ce qui est réellement utile dans un moment de chaos mineur (un train retardé, un téléphone mort). Ce panneau doit rester court — cinq ou six cartes, pas un guide complet.

8. Avant de livrer, vérifiez

• Les dates et fuseaux horaires d'arrivée/départ sont corrects (relisez l'étape 5)
• Aucune adresse personnelle littérale ou emplacement privé exact dans le fichier, y compris dans les descriptions d'itinéraire, pas seulement dans la carte essentiels
• L'attribut de thème correspond à ce que l'utilisateur a demandé
• Le défilement automatique de la navigation fonctionne toujours si vous avez modifié le script
• Les cases à cocher barrent visiblement leur libellé lorsqu'elles sont cochées
• Enregistrez dans l'emplacement de sortie/livrable et présentez le fichier à l'utilisateur (utilisez l'outil de livraison de fichier disponible dans cet environnement ; s'il n'y en a pas, indiquez directement le chemin du fichier à l'utilisateur)

9. Attendez-vous à continuer de le modifier

Les plans de voyage changent constamment — vols retardés, mauvais temps, un restaurant complet, un jour échangé. Lorsque l'utilisateur revient avec un changement, modifiez la section spécifique avec un remplacement ciblé plutôt que de régénérer tout le fichier ; l'utilisateur a peut-être déjà personnalisé du texte ailleurs qu'une réécriture complète supprimerait silencieusement. Redéployer (si hébergé) signifie simplement ré-uploader le même fichier — rappelez à l'utilisateur de faire ceci après les modifications s'il a mentionné un hébergeur comme Vercel ou Netlify, car les modifications faites ici ne se poussent pas toutes seules.

Fichiers dans cette compétence

• assets/template.html — le point de départ. Copiez-le, puis suivez les étapes ci-dessus.