AdeDeepFishing/página-de-roteiro-de-viagem

Página de Roteiro de Viagem

Transforma um plano de viagem dia a dia em um único arquivo HTML: abas fixas por dia, uma faixa de contagem regressiva, cards de atividades em estilo linha do tempo com tags (grátis / precisa reservar / preço / transporte / ideal para solo / destaque), uma lista de verificação de preparação e um painel de itens essenciais. Sem etapa de build, sem dependências — um arquivo, funciona em um celular, fácil de reimplantar em qualquer lugar (Vercel, Netlify, GitHub Pages ou apenas aberto localmente).

Comece a partir de assets/template.html. Não construa isso do zero — o modelo já tem JavaScript testado para as duas partes mais complicadas (a rolagem automática da navegação e a lógica da contagem regressiva/data abaixo), e reinventá-las tende a reintroduzir bugs que já estão corrigidos aqui.

Fluxo de Trabalho

1. Reúna o que você precisa (pergunte se já não estiver na conversa)

• Quem está viajando, quem está hospedando (se houver) — apenas os primeiros nomes são suficientes
• Destino(s) e período
• Data e hora exatas de chegada e partida, e em qual fuso horário elas estão escritas. Esta é a fonte mais comum de erros — veja a armadilha abaixo antes de codificar qualquer coisa.
• O plano dia a dia, se já foi discutido — extraia da conversa em vez de perguntar novamente
• Qualquer base, endereço particular ou ponto de encontro que aparecerá na página
• Preferência de tema (veja Temas abaixo) — se o usuário não se importar, o padrão é kawaii-pink, é o mais testado

Não pare por falta de cada detalhe. Esboce com placeholders ([preencher]) para o que estiver faltando e sinalize claramente na sua resposta, em vez de travar a página inteira por um desconhecido.

2. Passo de privacidade — faça isso antes de escrever qualquer endereço

Se o viajante estiver hospedado em um hotel, Airbnb ou outra acomodação nomeada, tudo bem escrever o nome da propriedade e o bairro claramente — já é um negócio público, e nomeá-lo é genuinamente útil (para um motorista de carona, para um amigo se encontrar). Apenas omita o número do quarto/unidade.

Se o viajante estiver hospedado na casa particular de alguém (casa de amigo ou familiar), nunca escreva o endereço literal, o nome exato do prédio ou o bairro residencial preciso no arquivo — mesmo que o usuário tenha fornecido diretamente no chat — se a página puder ser capturada de tela, compartilhada, hospedada em uma URL adivinhável ou tornada pública.

Padrão que funciona bem para o caso de casa particular: substitua a localização específica por algo como "o endereço que te enviei" ou "nosso lugar de sempre" — soa como uma piada interna natural entre as pessoas que realmente precisam da informação e não revela nada para um leitor externo. Mantenha os nomes das linhas de transporte e a área geral ("uma estação na linha X"), pois isso é genuinamente útil e não identificável por si só.

Aplique isso de forma consistente: se um nome de lugar específico aparecer em mais de um local (por exemplo, um bairro residencial mencionado tanto em um card de "itens essenciais" QUANTO dentro de uma descrição de rota como "pegue o trem para X"), higienize todos da mesma forma. Um único card editado ao lado de três menções casuais do nome real anula o propósito.

3. Escolha um tema

O modelo vem com dois temas completos, alternados por um atributo:

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

Todo o resto — fontes, cores, a forma decorativa do cabeçalho — segue automaticamente a partir desse único valor; você não precisa tocar no resto do CSS para alternar. Para adicionar um terceiro tema, copie um dos blocos CSS [data-theme="..."] perto do topo do arquivo, renomeie-o e ajuste as variáveis — veja examples/demo-lisbon-trip.html para um exemplo funcional (um tema personalizado lisbon-tile construído dessa forma, azul azulejo + terracota em vez dos dois padrões).

O cabeçalho já inclui um fundo gradiente com uma textura suave de pontos, um divisor em forma de onda para a página abaixo, uma linha de "chips" de estatísticas e um acento decorativo opcional no canto (.corner-orb) e um pequeno ícone (como .bow para kawaii-pink) que cada tema pode ativar ou deixar de fora — você não precisa reconstruir nada disso, apenas preencha o texto dos chips e troque quais elementos decorativos aparecem para um novo tema (veja como .bow/.tile-ornament/.corner-orb são escopados por data-theme perto do topo do CSS).

4. Construa os cards de dia

Cada dia é uma <section class="day"> com um data-date (formato ISO, usado pelo script de construção da navegação) e um data-title (rótulo curto mostrado na aba). Dentro, um cabeçalho com um badge colorido, depois uma .timeline de blocos .item: uma hora, um título em negrito, uma ou duas frases e tags opcionais.

Tags disponíveis prontas para uso: free (grátis), book (precisa de reserva antecipada), price (coloque o custo real no texto da tag, ex. "¥500" ou "$12" — a moeda varia conforme a viagem), transit (uma instrução de transporte que vale a pena destacar), solo (ok para fazer sozinho / uma janela amigável para solo), highlight (uma tag de destaque genérica para qualquer toque pessoal da viagem — um fandom, uma piada interna, uma bandeira "não perca isso"). Adicione novas classes de tag da mesma forma se a viagem precisar de uma categoria que estas não cobrem.

Mantenha o texto de descrição em uma ou duas frases por item — esta é uma referência rápida para celular, não um post de blog.

5. Configure a contagem regressiva — leia isso antes de definir as datas

Perto do final do arquivo:

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

O cabeçalho mostra uma contagem regressiva ao vivo e em movimento de Dias/Horas/Min/Seg antes do início da viagem, depois alterna automaticamente para "Dia N da viagem" durante ela e, em seguida, "Viagem concluída" após — isso é tratado pela função tick() executada a cada segundo, você não precisa construir esta parte.

Erro comum a verificar ativamente: a data de partida de uma confirmação de reserva é a data em que o viajante sai da cidade de origem, não a data em que ele pousa. Em um voo de longa distância ou noturno, a hora de chegada local é muito frequentemente o próximo dia calendário no destino — os itinerários marcam isso com um pequeno "+1 dia" ao lado da hora de chegada, que é fácil de perder. Antes de codificar o timestamp de chegada, confirme explicitamente: data de partida + duração do voo, verificada com o deslocamento do fuso horário do destino, realmente pousa na data que você está prestes a anotar. Errar isso significa que toda a contagem regressiva (e o destaque de "hoje" na navegação do dia) estará errada por um dia, geralmente descoberta apenas quando alguém está esperando em um aeroporto por um voo que ainda não está pousando.

Também verifique se o deslocamento UTC na string ISO corresponde ao fuso horário do destino, não ao fuso horário da cidade natal do viajante.

6. Navegação fixa do dia

Isso é construído automaticamente a partir de quaisquer seções .day que existam — você não precisa escrever manualmente. Dois comportamentos que vale a pena conhecer, ambos já implementados:

• A aba ativa é determinada pela posição de rolagem e destacada conforme o usuário rola
• A faixa de abas rola automaticamente horizontalmente para manter a aba ativa visível. Sem isso, um usuário rolando após o dia 6 ou 7 descobre que a aba correspondente rolou para fora da borda visível da barra de navegação e precisa rolá-la manualmente — isso foi um bug real em uma versão anterior, a correção é o bloco scrollTo dentro de syncActive(). Não o remova ao personalizar.

7. Preencha os painéis de lista de verificação e itens essenciais

• Lista de verificação (#checklist): reservas e tarefas de preparação, cada uma com uma caixa de seleção. Observe na cópia da interface que as caixas de seleção são reiniciadas ao recarregar (não há backend) — não deixe o usuário pensar que é persistente.
• Itens essenciais: onde estão hospedados (veja o passo de privacidade acima para redação de hotel vs. casa particular), um ponto de encontro se separados, números de emergência para o país de destino (não use o padrão de números de um país), um plano para clima/calor/frio, normas de dinheiro/pagamento e qualquer outra coisa que seja genuinamente útil em um momento de pequeno caos (um trem atrasado, um telefone descarregado). Este painel deve ser curto — cinco ou seis cards, não um guia completo.

8. Antes de entregar, verifique

• As datas de chegada/partida e fusos horários estão corretos (releia o passo 5)
• Nenhum endereço residencial literal ou localização privada exata em qualquer lugar do arquivo, inclusive dentro de descrições de rota, não apenas no card de itens essenciais
• O atributo do tema corresponde ao que o usuário pediu
• A rolagem automática da navegação ainda funciona se você modificou o script
• As caixas de seleção riscam visivelmente seu rótulo quando marcadas
• Salve no local de saída/entrega e apresente o arquivo ao usuário (use a ferramenta de entrega de arquivos disponível neste ambiente; se nenhuma existir, informe ao usuário o caminho do arquivo diretamente)

9. Espere continuar editando

Planos de viagem mudam constantemente — voos atrasados, mau tempo, um restaurante totalmente reservado, um dia trocado. Quando o usuário voltar com uma alteração, edite a seção específica com uma substituição direcionada em vez de regenerar o arquivo inteiro; o usuário pode já ter personalizado textos em outros lugares que uma reescrita completa descartaria silenciosamente. Reimplantar (se hospedado) é apenas reenviar o mesmo arquivo — lembre o usuário de fazer isso após as edições se ele mencionou um host como Vercel ou Netlify, pois as edições feitas aqui não se publicam sozinhas.

Arquivos nesta habilidade

• assets/template.html — o ponto de partida. Copie-o e siga os passos acima.