Página de Itinerario de Viaje

¿Qué hace Página de Itinerario de Viaje?

Convierte un plan de viaje día por día en un único archivo HTML: pestañas adhesivas por día, un banner de cuenta regresiva, tarjetas de actividad en formato línea de tiempo con etiquetas (gratuito / necesita reserva / precio / transporte / ideal para solitario / destacado), una lista de verificación de preparación y un panel de esenciales. Sin compilación, sin dependencias: un solo archivo, que funciona desde un teléfono y se puede redistribuir fácilmente en cualquier lugar (Vercel, Netlify, GitHub Pages, o simplemente abierto localmente).

Comience desde assets/template.html. No lo construya desde cero: la plantilla ya tiene JavaScript probado para las dos partes más difíciles (el desplazamiento automático de la navegación y la lógica de cuenta regresiva/fechas a continuación). Rehacerlas tiende a reintroducir errores que ya están corregidos aquí.

Flujo de trabajo

1. Reúna lo que necesita (pregunte si no está ya en la conversación)

• Quién viaja, quién recibe (si corresponde) — solo nombres de pila
• Destino(s) y rango de fechas
• Fecha y hora exactas de llegada y salida, y la zona horaria en que están escritas. Esta es la fuente más común de errores: vea la advertencia a continuación antes de codificar algo.
• El plan día por día, si ya se ha discutido — extráigalo de la conversación en lugar de volver a preguntar
• Cualquier base de operaciones, dirección privada o punto de encuentro que aparecerá en la página
• Preferencia de tema (ver Temas a continuación) — si al usuario no le importa, use por defecto kawaii-pink, es el más probado

No se detenga por falta de cada detalle. Redacte con marcadores de posición ([rellenar]) para lo que falte y márquelos claramente en su respuesta, en lugar de retrasar toda la página por un desconocido.

2. Pase de privacidad: hágalo antes de escribir una sola dirección

Si el viajero se aloja en un hotel, Airbnb u otro alojamiento con nombre, está bien escribir el nombre de la propiedad y el barrio claramente — ya es un negocio público, y nombrarlo es genuinamente útil (para un conductor de rideshare, para un amigo que se reúne). Simplemente omita el número de habitación/unidad.

Si el viajero se aloja en la casa privada de alguien (la casa de un amigo o familiar), nunca escriba la dirección literal, el nombre exacto del edificio o el barrio residencial preciso en el archivo — incluso si el usuario se lo dio directamente en el chat — si la página podría ser capturada en pantalla, compartida, alojada en una URL adivinable o hecha pública.

Patrón que funciona bien para el caso de casa privada: reemplace la ubicación específica por algo como "la dirección que te envié" o "nuestro lugar de siempre" — se lee como un chiste interno natural entre las personas que realmente necesitan la información y no revela nada a un lector externo. Mantenga los nombres de las líneas de transporte y el área general ("una estación en la línea X") ya que es genuinamente útil y no identifica por sí solo.

Aplique esto de manera consistente: si un nombre de lugar específico aparece en más de un lugar (por ejemplo, un barrio de una casa mencionado tanto en una tarjeta de "esenciales" como dentro de una descripción de ruta como "toma el tren a X"), sanitice todos de la misma manera. Una sola tarjeta editada al lado de tres menciones casuales del nombre real anula el propósito.

3. Elija un tema

La plantilla incluye dos temas completos, cambiados por un atributo:

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

Todo lo demás — fuentes, colores, la forma decorativa del encabezado — sigue automáticamente de ese único valor; no necesita tocar el resto del CSS para cambiar. Para agregar un tercer tema, copie uno de los bloques CSS [data-theme="..."] cerca de la parte superior del archivo, renómbrelo y ajuste las variables — vea examples/demo-lisbon-trip.html para un ejemplo trabajado (un tema personalizado lisbon-tile construido de esta manera, azulejo azul + terracota en lugar de los dos predeterminados).

El encabezado ya incluye un fondo degradado con una textura de puntos suaves, un divisor ondulado hacia la página debajo, una fila de "chips" de estadísticas y un acento decorativo opcional en la esquina (.corner-orb) y un icono pequeño (como .bow para kawaii-pink) que cada tema puede activar o desactivar — no necesita reconstruir nada de esto, solo complete el texto del chip e intercambie qué elementos decorativos se muestran para un nuevo tema (vea cómo .bow/.tile-ornament/.corner-orb están limitados por data-theme cerca de la parte superior del CSS).

4. Construya las tarjetas de día

Cada día es una <section class="day"> con un data-date (formato ISO, utilizado por el script de construcción de navegación) y un data-title (etiqueta corta mostrada en la pestaña). Dentro, un encabezado con una insignia de color, luego una .timeline de bloques .item: una hora, un título en negrita, una o dos oraciones y etiquetas opcionales.

Etiquetas disponibles de fábrica: free (gratuito), book (necesita reserva anticipada), price (ponga el costo real en el texto de la etiqueta, por ejemplo, "¥500" o "$12" — la moneda varía según el viaje), transit (una instrucción de transporte que vale la pena destacar), solo (bien para hacerlo solo / un momento ideal para viajero solitario), highlight (una etiqueta de acento genérico para cualquier toque personal del viaje: un fandom, un chiste interno, una bandera de "no te pierdas esto"). Agregue nuevas clases de etiqueta de la misma manera si el viaje necesita una categoría que estas no cubran.

Mantenga el texto descriptivo a una o dos oraciones por elemento: esto es una referencia rápida para teléfono, no una entrada de blog.

5. Conecte la cuenta regresiva: lea esto antes de configurar las fechas

Cerca de la parte inferior del archivo:

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

El encabezado muestra una cuenta regresiva en vivo con Días/Horas/Min/Seg que parpadea antes del inicio del viaje, luego cambia automáticamente a "Día N del viaje" durante el mismo, y luego a "Viaje completado" al final — esto lo maneja la función tick() que se ejecuta cada segundo, no necesita construir esta parte.

Error común que debe verificar activamente: la fecha de salida de una confirmación de reserva es la fecha en que el viajero sale de la ciudad de origen, no la fecha en que aterriza. En un vuelo de larga distancia o nocturno, la hora de llegada local suele ser el siguiente día calendario en el destino — los itinerarios marcan esto con un pequeño "+1 día" junto a la hora de llegada, que es fácil pasar por alto. Antes de codificar la marca de tiempo de llegada, confirme explícitamente: fecha de salida + duración del vuelo, verificada contra el desplazamiento de zona horaria del destino, realmente aterriza en la fecha que está a punto de escribir. Si se equivoca, toda la cuenta regresiva (y el resaltado de "hoy" en la navegación de días) estará desfasada por un día, generalmente descubierto solo cuando alguien espera en un aeropuerto por un vuelo que aún no aterriza.

También verifique que el desplazamiento UTC en la cadena ISO coincida con la zona horaria del destino, no con la zona horaria de origen del viajero.

6. Navegación adhesiva de día

Esto se construye automáticamente a partir de las secciones .day que existan — no necesita escribirlo a mano. Dos comportamientos que vale la pena conocer, ambos ya implementados:

• La pestaña activa se determina por la posición de desplazamiento y se resalta mientras el usuario se desplaza
• La barra de pestañas se desplaza automáticamente horizontalmente para mantener la pestaña activa visible. Sin esto, un usuario que se desplaza más allá del día 6 o 7 encuentra que la pestaña correspondiente se ha desplazado fuera del borde visible de la barra de navegación y debe desplazarla manualmente — esto fue un error real en una versión anterior, la solución es el bloque scrollTo dentro de syncActive(). No lo elimine al personalizar.

7. Complete las listas de verificación y los paneles de esenciales

• Lista de verificación (#checklist): reservas y tareas de preparación, cada una con una casilla de verificación. Nota en la copia de la interfaz de usuario que las casillas de verificación se restablecen al recargar (no hay backend) — no permita que el usuario piense que es persistente.
• Esenciales: dónde se alojan (vea la nota de privacidad anterior sobre la redacción de hotel vs. casa privada), un punto de encuentro si se separan, números de emergencia del país de destino (no use por defecto los números de un país), un plan meteorológico (calor/frío), normas de efectivo/pago, y cualquier otra cosa que sea genuinamente útil en un momento de caos menor (un tren retrasado, un teléfono muerto). Este panel debe mantenerse corto: cinco o seis tarjetas, no una guía completa.

8. Antes de entregar, verifique

• Fechas de llegada/salida y zonas horarias son correctas (relea el paso 5)
• No hay dirección de casa literal o ubicación privada exacta en ningún lugar del archivo, incluso dentro de descripciones de ruta, no solo en la tarjeta de esenciales
• El atributo del tema coincide con lo que pidió el usuario
• El desplazamiento automático de la navegación aún funciona si modificó el script
• Las casillas de verificación tachan visiblemente su etiqueta cuando se marcan
• Guarde en la ubicación de salida/entrega y presente el archivo al usuario (use la herramienta de entrega de archivos disponible en este entorno; si no existe, indique al usuario la ruta del archivo directamente)

9. Espere tener que seguir editándolo

Los planes de viaje cambian constantemente: vuelos retrasados, mal clima, un restaurante completamente reservado, un día intercambiado. Cuando el usuario regrese con un cambio, edite la sección específica con un reemplazo dirigido en lugar de regenerar todo el archivo; el usuario puede haber personalizado el texto en otros lugares que una reescritura completa descartaría silenciosamente. Re-desplegar (si está alojado) es simplemente volver a subir el mismo archivo — recuerde al usuario que haga esto después de las ediciones si mencionó un host como Vercel o Netlify, ya que las ediciones realizadas aquí no se envían solas.

Archivos en esta habilidad

• assets/template.html — el punto de partida. Cópielo, luego siga los pasos anteriores.