行程規劃頁面
將每日行程計畫轉換成單一 HTML 檔案：每個日期都有黏性標籤頁、倒數橫幅、時間軸風格的活動卡片（附有標籤：免費 / 需預訂 / 價格 / 交通 / 適合獨旅 / 重點）、準備清單和必備資訊面板。無需建置步驟，無外部依賴 — 單一檔案，可在手機上運作，輕鬆部屬在任何地方（Vercel、Netlify、GitHub Pages，或直接在本地開啟）。
請從 assets/template.html 開始。不要從頭建立 — 範本已包含針對兩個最棘手部分（下方提到的導覽自動捲動和倒數/日期邏輯）經過測試的 JavaScript，重新設計它們往往會重新引入在此已修復的錯誤。
工作流程
1. 收集所需資訊（如果對話中尚未提供，請主動詢問）
- 誰要旅行，誰接待（如果有的話）— 名字就足夠
- 目的地和日期範圍
- 確切的抵達和離開日期+時間，以及這些時間是根據哪個時區寫的。 這是錯誤最常見的單一來源 — 在您寫死任何東西之前，請參閱下方的陷阱。
- 每日計畫（如果已經討論過）— 從對話中提取，而不是重新詢問
- 任何會顯示在頁面上的基地地址、私人地址或會合點
- 主題偏好（請參閱下方的主題）— 如果使用者不在乎，預設為
kawaii-pink，這是測試最完善的主題
不要因為缺少每個細節就卡住。使用佔位符（[填寫]）草擬任何遺漏的部分，並在您的回覆中清楚標記它們，而不是因為一個未知數就停滯整個頁面。
2. 隱私檢查 — 在寫入任何地址之前執行此步驟
如果旅行者住在旅館、Airbnb 或其他有名稱的住宿場所，直接寫下物業名稱和社區是可以的 — 它已經是公開的商業資訊，寫出來確實有用（對於共乘司機、對於來會合的朋友）。只需省略房間/單元號碼。
如果旅行者住在某人的私人住宅（朋友或家人的住處），絕對不要將實際地址、確切建築物名稱或精確的住宅社區寫入檔案中 — 即使使用者直接在聊天中給了您這些資訊 — 如果頁面可能會被截圖、分享、託管在可猜測的 URL，或變成公開的。
適用於私人住宅案例的良好模式：將特定位置替換為類似 「我發送給你的地址」 或 「我們的老地方」 之類的內容 — 對於真正需要此資訊的人來說，它讀起來像是一個自然的內部笑話，但對外部讀者不透露任何資訊。保留地鐵線路名稱和大致區域（例如「X線上的某個站」），因為這確實有用，且本身不會洩露身分。
一致地套用此規則：如果一個特定地名出現在多個地方（例如，在「必備資訊」卡片和路線描述中都有提到某個住宅社區，像是「乘坐火車到 X」），則需以相同方式全部清理。一個被修改過的卡片旁邊有三處隨意提及的真實名稱，就失去了意義。
3. 選擇主題
範本附帶兩個完整主題，透過一個屬性切換：
<html data-theme="kawaii-pink"> <!-- 或 -->
<html data-theme="neutral-modern">
其他所有東西 — 字體、顏色、裝飾性頁首形狀 — 都會根據這單一值自動跟隨；您不需要為了切換主題而接觸 CSS 的其他部分。若要新增第三個主題，請複製檔案頂部附近的其中一個 [data-theme="..."] CSS 區塊，重新命名，並調整變數 — 請參閱 examples/demo-lisbon-trip.html 以查看一個實際範例（一個以這種方式建構的自訂 lisbon-tile 主題，使用藍色瓷磚和赭色，而非兩個預設值）。
頁首已包含一個帶有柔和點狀紋理的漸層背景、一個波浪形分隔線進入下方頁面、一個統計「晶片」行，以及一個可選的裝飾性角落裝飾（.corner-orb）和小圖示（如 kawaii-pink 主題的 .bow），每個主題可以選擇開啟或關閉 — 您不需要重新建構這些，只需填入晶片文字，並為新主題切換顯示哪些裝飾元素（請參閱 CSS 頂部附近，.bow/.tile-ornament/.corner-orb 如何根據 data-theme 設定範圍）。
4. 建構每日卡片
每一天是一個 <section class="day">，包含 data-date（ISO 格式，供導覽建構腳本使用）和 data-title（顯示在標籤頁中的簡短標籤）。內部是一個帶有彩色徽章的標題，然後是 .timeline，包含多個 .item 區塊：時間、粗體標題、一兩句話和可選標籤。
開箱即用的可用標籤：free、book（需要提前預訂）、price（在標籤文字中放入實際費用，例如「¥500」或「$12」— 貨幣因行程而異）、transit（值得提出的交通指示）、solo（適合獨自進行 / 適合獨自旅行的時段）、highlight（一個通用強調標籤，用於行程的任何個人風格 — 粉絲圈、內部笑話、「不容錯過」的標誌）。如果行程需要這些未涵蓋的類別，請以相同方式新增新的標籤類別。
將描述文字控制在每個項目一兩句話 — 這是一個便於快速瀏覽的手機參考資料，而不是一篇部落格文章。
5. 連接倒數功能 — 在設定日期之前請閱讀此內容
在檔案底部附近：
var arrive = new Date('2026-07-18T15:05:00+09:00');
var depart = new Date('2026-07-25T18:00:00+09:00');
頁首會在旅程開始前顯示一個即時跳動的天數/小時/分鐘/秒倒數，然後在旅程期間自動切換為「旅程第 N 天」，之後顯示「旅程完成」— 這由每秒執行一次的 tick() 函數處理，您不需要建構這部分。
需要主動檢查的常見錯誤： 訂房確認函的出發日期是旅行者離開出發城市的日期，而不是他們降落的日期。在長途或夜間航班上，當地的抵達時間通常是目的地的下一個日曆日 — 行程表會在抵達時間旁邊用一個小「+1 天」標記，這很容易被忽略。在寫死抵達時間戳之前，明確確認：出發日期 + 飛行時間，並根據目的地時區偏移量進行檢查，實際降落在您即將寫下的日期上。弄錯這個意味著整個倒數（以及日期導覽的「今天」高亮顯示）會差了一天，通常只有在某人在機場等待尚未降落的航班時才會發現。
另外，請仔細檢查 ISO 字串中的 UTC 偏移量是否與目的地的時區相符，而不是旅行者的家鄉時區。
6. 黏性日期導覽
這是根據存在的任何 .day 區段自動建構的 — 您不需要手動編寫。有兩個值得了解的行為，都已經實作：
- 活動標籤頁是根據捲動位置決定的，並在使用者捲動時高亮顯示
- 標籤條會自動水平捲動以保持活動標籤頁可見。沒有這個功能，當使用者捲動超過第 6 或第 7 天時，會發現對應的標籤頁已經捲動到導覽列的顯示邊緣之外，必須手動捲動它 — 這是早期版本中的一個實際錯誤，修復方法是
syncActive()中的scrollTo區塊。自訂時請勿移除它。
7. 填寫檢查清單和必備資訊面板
- 檢查清單（
#checklist）：預訂和準備任務，每個都是一個核取方塊。在 UI 副本中註明核取方塊在重新載入後會重置（沒有後端）— 不要讓使用者認為它是持久的。 - 必備資訊：他們的住宿地點（請參閱上方關於飯店與私人住宅措辭的隱私檢查）、如果走散時的會合點、目的地國家的緊急電話號碼（不要預設為某個國家的電話號碼）、天氣/避暑或防寒計畫、現金/支付常規，以及任何在輕微混亂時刻（火車延誤、手機沒電）真正有用的其他資訊。此面板應保持簡短 — 五六張卡片，而不是一本完整的旅遊指南。
8. 在交付之前，請檢查
- 抵達/離開日期和時區是正確的（重新閱讀第 5 步）
- 檔案中任何地方都沒有實際的住宅地址或確切的私人位置，包括路線描述中，不僅是必備資訊卡片
- 主題屬性符合使用者的要求
- 如果您修改了腳本，導覽自動捲動仍然有效
- 核取方塊勾選時可明顯劃掉其標籤
- 儲存到輸出/交付位置並向使用者呈現檔案（使用此環境中可用的任何檔案傳遞工具；如果不存在，直接告訴使用者檔案路徑）
9. 預期會持續編輯
行程計畫不斷變化 — 航班延誤、天氣惡劣、餐廳訂滿、日期調換。當使用者帶著變更回來時，請透過有針對性的替換來編輯特定區段，而不是重新產生整個檔案；使用者可能已經在其他地方自訂了副本，完全重寫會無聲地丟棄這些內容。重新部署（如果已託管）只是重新上傳同一個檔案 — 如果使用者提到了像 Vercel 或 Netlify 這樣的託管服務，請在編輯後提醒他們這樣做，因為此處所做的編輯不會自動推送。
此技能中的檔案
assets/template.html— 起點。複製它，然後依照上述步驟操作。