AdeDeepFishing/trip-itinerary-page

旅行日程ページ

日々の旅行計画を1つのHTMLファイルに変換します：日ごとの固定タブ、カウントダウンバナー、タイムライン形式のアクティビティカード（無料、予約必要、価格、交通機関、ソロ向け、ハイライトのタグ付き）、準備チェックリスト、必須情報パネル。ビルド不要、依存関係なし — 1ファイルで動作し、スマートフォンからも使用可能。Vercel、Netlify、GitHub Pages、またはローカルで簡単に再デプロイできます。

assets/template.htmlから開始してください。ゼロから構築しないでください — テンプレートにはすでに、最も難しい2つの部分（ナビゲーションの自動スクロールと以下のカウントダウン/日付ロジック）のテスト済みJSが含まれており、再発明すると既に修正済みのバグを再導入する傾向があります。

ワークフロー

1. 必要な情報を収集する（会話にまだない場合は質問する）

• 誰が旅行するのか、誰がホストするのか（いる場合） — ファーストネームで十分
• 目的地と日程
• 正確な到着と出発の日時、およびそれらが記述されているタイムゾーン。 これが最も一般的なエラーの原因です — 以下の落とし穴を読んでから何かをハードコードしてください。
• 日ごとの計画（既に議論されている場合） — 再質問するのではなく、会話から取得する
• ページに表示される拠点、プライベートアドレス、待ち合わせ場所
• テーマの好み（以下のテーマを参照） — ユーザーが気にしない場合は、デフォルトの kawaii-pink を使用してください。これが最もテストされています。

すべての詳細が揃っていなくてもブロックしないでください。不足しているものにはプレースホルダー（[fill in]）を使用して下書きし、返信でそれらを明確に示してください。不明な点があればページ全体を止めないでください。

2. プライバシーパス — アドレスを書く前に行う

旅行者がホテル、Airbnb、またはその他の名称のある宿泊施設に滞在する場合、物件名とエリア名をそのまま書いても問題ありません — それは既に公開されているビジネスであり、名前を記載することは実際に役立ちます（ライドシェアの運転手や待ち合わせの友人にとって）。部屋番号やユニット番号は省略してください。

旅行者が誰かのプライベートホームに滞在する場合（友人や家族の家）、ファイルに実際の住所、正確な建物名、または詳細な住宅エリアを決して書かないでください — たとえユーザーがチャットで直接教えてくれた場合でも、ページがスクリーンショットされたり、共有されたり、推測可能なURLでホストされたり、公開される可能性がある場合には避けてください。

プライベートホームの場合にうまく機能するパターン：特定の場所を「送ったアドレス」や「いつもの場所」のような表現に置き換えます — これは実際に情報を必要とする人々の間では自然な内輪のジョークとして読まれ、外部の読者には何も明かしません。交通路線名や大まかなエリア（「X線の駅」）は、実際に役立ち、それ自体では個人を特定できないため、そのままにしておきます。

これを一貫して適用してください：特定の場所の名前が複数の場所に現れる場合（たとえば、家のエリアが「必需品」カードと「Xまで電車に乗る」のようなルート説明の両方で言及されている場合）、すべてを同じ方法で難読化してください。1つの編集済みカードの隣に実際の名前が3回もカジュアルに言及されていては意味がありません。

3. テーマを選ぶ

テンプレートには2つの完全なテーマが付属しており、1つの属性で切り替えられます：

<html data-theme="kawaii-pink">   <!-- または -->
<html data-theme="neutral-modern">

フォント、色、装飾的なヘッダー形状など、その他すべてはその1つの値から自動的に決定されます。テーマを切り替えるために残りのCSSを触る必要はありません。3つ目のテーマを追加するには、ファイルの先頭近くにある [data-theme="..."] CSSブロックの1つをコピーし、名前を変更し、変数を調整します — 動作例については examples/demo-lisbon-trip.html を参照してください（この方法で構築されたカスタム lisbon-tile テーマ、2つのデフォルトの代わりにアズレージョブルーとテラコッタ）。

ヘッダーには、ソフトなドットテクスチャのグラデーション背景、その下のページへの波状の区切り、統計情報の「チップ」行、およびオプションの装飾的なコーナーアクセント（.corner-orb）と小さなアイコン（kawaii-pinkの場合は.bowなど）が既に含まれています。これらを再構築する必要はなく、チップテキストを入力し、新しいテーマで表示する装飾要素を切り替えるだけです（CSSの先頭近くで .bow/.tile-ornament/.corner-orb が data-theme ごとにどのようにスコープされているかを参照）。

4. デイカードを構築する

各日は、data-date（ISO形式、ナビビルダースクリプトで使用）と data-title（タブに表示される短いラベル）を持つ <section class="day"> です。内部には、色付きバッジのヘッダー、次に .item ブロックの .timeline：時間、太字のタイトル、1〜2文、およびオプションのタグ。

標準で利用可能なタグ：free（無料）、book（事前予約が必要）、price（タグテキストに実際の費用を入れてください、例：「¥500」や「$12」 — 通貨は旅行ごとに異なります）、transit（特筆すべき交通手段の指示）、solo（一人でも大丈夫 / ソロ向けの時間帯）、highlight（旅行の個人的なタッチ — ファンダム、内輪のジョーク、「見逃せない」フラグなど — のための汎用アクセントタグ）。これらのカテゴリでカバーされていない旅行のカテゴリが必要な場合は、同じ方法で新しいタグクラスを追加してください。

説明テキストはアイテムごとに1〜2文に抑えてください — これはスマートフォンで一目でわかるリファレンスであり、ブログ記事ではありません。

5. カウントダウンを設定する — 日付を設定する前にこれを読む

ファイルの下部近く：

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

ヘッダーは、旅行開始前のライブの刻々と変化する Days/Hours/Min/Sec カウントダウンを表示し、旅行中は自動的に「Day N of the trip」に切り替わり、その後は「Trip complete」に切り替わります — これは毎秒実行される tick() 関数によって処理されており、この部分を構築する必要はありません。

積極的に確認すべき一般的なミス： 予約確認書の出発日は、旅行者が出発都市を出発する日付であり、到着する日付ではありません。長距離または夜間飛行の場合、現地到着時間は非常に頻繁に目的地の翌暦日になります — 旅程では到着時間の横に小さな「+1日」と表示されることがあり、見落としがちです。到着タイムスタンプをハードコードする前に、明示的に確認してください：出発日 + フライト時間、目的地のタイムゾーンオフセットと照合して、実際に書き込もうとしている日付に到着することを確認してください。これを間違えると、カウントダウン全体（およびデイナビの「今日」のハイライト）が1日ずれ、通常は誰かがまだ到着していない飛行機を空港で待っているときに発覚します。

また、ISO文字列のUTCオフセットが旅行者の自宅タイムゾーンではなく、目的地のタイムゾーンと一致していることを再確認してください。

6. 固定デイナビ

これは、存在する .day セクションから自動的に構築されます — 手動で記述する必要はありません。知っておくべき2つの動作（両方とも既に実装済み）：

• アクティブなタブはスクロール位置によって決定され、ユーザーがスクロールするにつれてハイライトされます
• タブストリップは自動的に水平スクロールして、アクティブなタブを表示し続けます。これがないと、ユーザーが6日目や7日目を過ぎてスクロールすると、対応するタブがナビゲーションバーの表示端からスクロールアウトし、手動でスクロールする必要があります — これは以前のバージョンで実際にあったバグであり、修正は syncActive() 内の scrollTo ブロックです。カスタマイズする際に削除しないでください。

7. チェックリストと必須情報パネルを埋める

• チェックリスト（#checklist）：予約と準備タスク、それぞれチェックボックス付き。UIコピーで、チェックボックスは再読み込みでリセットされることに注意してください（バックエンドはありません） — ユーザーに永続的だと思わせないでください。
• 必須情報：滞在先（上記のプライバシーパスを参照、ホテルとプライベートホームの表記について）、はぐれた場合の待ち合わせ場所、目的地の国の緊急電話番号（1か国の番号をデフォルトにしないでください）、天候/暑さ寒さ対策、現金/支払いの習慣、および軽微な混乱（電車の遅延、バッテリー切れ）の際に真に役立つその他の情報。このパネルは短く保つべきです — 5〜6枚のカードで、完全なガイドブックではありません。

8. 提供する前に確認する

• 到着/出発日時とタイムゾーンが正しい（ステップ5を再確認）
• ルート説明内を含め、ファイル内のどこにも実際の自宅住所や正確なプライベートロケーションがないこと（必須情報カードだけでなく）
• テーマ属性がユーザーの要求と一致している
• スクリプトを変更した場合でも、ナビの自動スクロールが機能する
• チェックボックスをオンにすると、ラベルに取り消し線が表示される
• 出力/配信可能な場所に保存し、ユーザーにファイルを提示する（この環境で利用可能なファイル配信ツールを使用；ない場合は、ファイルパスをユーザーに直接伝える）

9. 編集を続けることを想定する

旅行計画は常に変更されます — フライトの遅延、悪天候、満席のレストラン、日の入れ替え。ユーザーが変更を持ち帰った場合は、ファイル全体を再生成するのではなく、特定のセクションを対象とした置換で編集してください。ユーザーがすでに他の場所でコピーをカスタマイズしている可能性があり、完全な書き換えで静かに破棄される可能性があります。再デプロイ（ホストされている場合）は、同じファイルを再アップロードするだけです — 編集後にこれを行うようユーザーに注意してください。VercelやNetlifyなどのホストについて言及した場合、ここでの編集は自動的にプッシュされないためです。

このスキルのファイル

• assets/template.html — 開始地点。コピーして、上記の手順に従ってください。