旅遊規劃 — 行程 · 分帳 · 打包清單
一個不用註冊、不用安裝、打開就能用的旅遊規劃網頁。
線上版本： https://yilinapan.github.io/travel/
使用說明： https://yilinapan.github.io/travel/guide.html
有什麼功能
| 分頁 | 做什麼 |
|---|
| 🧳 我的旅程 | 管理多趟旅行、設定同行成員、設定外幣匯率、備份與還原 |
| 🗺 行程 | 按天分頁的時間軸。每個行程點可記時間、地點、類型、備註、連結、圖片、金額 |
| 💰 分帳 | 記錄誰付了什麼、這筆分給誰，自動算出「誰要轉給誰多少」，而且筆數最少 |
| 🎒 打包清單 | 內建五大分類的預設清單，可勾選、可增刪、有完成進度 |
另外還有：
- ☁️ 雲端同步 — 接上你自己的 Google 試算表，手機和電腦就能接續編輯同一份資料（設定步驟，約 10 分鐘，只做一次）
- 🔗 分享連結 — 產生一串網址傳給同行的人，他們點開就能看到行程和自己的分帳金額（唯讀，不含打包清單）。有開雲端同步的話，連結會自動更新，只要傳一次
- 指定項目分帳 — 午餐 1000 元，其中生魚片 100 只有小明吃？可以把那 100 單獨算給他，剩下的 900 再均分
- 先結清 — 旅途中有人先還了錢（還可以用當地幣別），按一下「已結清」記下來，結算會自動扣掉。只還一部分也可以
- 外幣換算 — 設定匯率後，記帳時直接填外幣，結算自動換算成基準幣別
- 行程示意圖 — 每個行程點可以放一張示意圖（貼網址，或放進
images/ 資料夾用短路徑）
- 分頭行動 — 下午分組各走各的？每個行程點可以標「誰參加」，還能用「只看某人」篩出個人路線
- 行程金額一鍵帶到分帳 — 行程點填了金額，按一下就變成一筆支出（分攤對象會自動帶入參加者）
資料存在哪裡（重要）
預設：資料只存在你這台裝置的瀏覽器裡，不會上傳到任何伺服器。
這代表：
- ✅ 隱私最好，沒有人看得到你的行程
- ✅ 不用註冊帳號，沒有任何費用
- ⚠️ 換一台裝置、或清除瀏覽器資料，資料就會不見
所以請定期到「我的旅程 → 備份與還原 → 下載備份檔」存一份。備份檔是一個 .json 檔，可以存到雲端硬碟，也可以傳給同行的人讓他們匯入。
想在手機和電腦接續編輯 → 開啟雲端同步
照 docs/setup-google-sheets.md 設定一次（約 10 分鐘），
資料就會存在你自己的 Google 試算表裡，兩台裝置看到同一份。
試算表的欄位你看得懂也能直接改，格式說明在 docs/hermes-guide.md
（那份同時可以整份貼給 Hermes 之類的 AI 助理，讓它幫你填資料）。
⚠️ 雲端同步沒有帳號登入，安全性靠「那串網址很難猜」加上一組同步密碼。
不要填護照號碼、信用卡號、訂房密碼。
分享連結的隱私
分享連結有兩種，工具會自動選：
有開雲端同步（並設了同步密碼）→ 自動更新的連結
https://yilinapan.github.io/travel/#live=AKfycb....分享代號
旅伴打開時，網頁才去你的 Google 試算表讀那一趟的行程、支出、還款（打包清單和其他旅程一律不給，也不能修改）。
你改了行程，旅伴重新打開同一個連結就是最新的。不想再分享時，在分享視窗按「停用連結」。
沒開雲端同步 → 快照連結
https://yilinapan.github.io/travel/#view=H4sIAAAA...
# 後面那段是壓縮過的行程資料。依照網路標準，# 後面的內容不會被送到伺服器，所以連 GitHub 也看不到你的行程內容。
這是當下的快照：之後改了行程，要重新產生一次新的連結傳給大家。
怎麼用
線上用（推薦）
直接開 https://yilinapan.github.io/travel/ ，手機電腦都可以。加到手機主畫面就像一個 App。
在自己電腦跑
因為沒有用任何框架或套件，不需要安裝任何東西。不過瀏覽器對本機檔案有安全限制，建議用一個簡單的本機伺服器打開：
python -m http.server 8777
然後開 http://127.0.0.1:8777/
驗證分帳算得對不對
算錢的東西不能錯，所以分帳的計算有一整組自動測試。
最簡單的方式： 雙擊打開 tests/test.html，全部綠色就代表計算正常。
用終端機跑：
node tests/run.js
兩種方式跑的是同一份測試（tests/settle.tests.js），不會有兩套互相矛盾的結果。
想改這個工具（給 AI 助理）
接手的 AI 請先讀 AGENTS.md —— 裡面有架構、資料結構、
設計系統、測試方式，以及幾個容易踩的坑（例如改完程式要把版本號加 1）。
程式檔案在哪
travel/
├── index.html 網頁主體
├── guide.html 使用說明（給使用者看的一頁）
├── css/style.css 外觀樣式（顏色都在檔案最上面的 :root）
├── js/
│ ├── settle.js 分帳計算（純計算，不碰畫面）
│ ├── store.js 資料存取、備份匯出匯入
│ ├── cloud.js Google Sheets 同步、資料⇄表格的轉換
│ ├── share.js 產生 / 讀取分享連結（自動更新的、快照的）
│ ├── ui.js 共用元件：表單視窗、提示、複製、下載
│ ├── trips.js 「我的旅程」分頁
│ ├── itinerary.js 「行程」分頁
│ ├── expenses.js 「分帳」分頁
│ ├── checklist.js 「打包清單」分頁
│ ├── settings.js ⚙️ 設定面板（雲端同步、備份還原）
│ └── app.js 分頁切換、分享、唯讀模式
├── apps-script/Code.gs 要貼到 Google Apps Script 的程式
├── images/ 行程示意圖放這裡
├── tests/
│ ├── test.html 測試頁（雙擊打開）
│ ├── settle.tests.js 分帳計算的測試
│ ├── cloud.tests.js 試算表格式轉換的測試
│ ├── structure.tests.js 程式結構檢查（函式有沒有被誤刪、按鈕有沒有對應處理）
│ └── run.js 終端機版測試
├── AGENTS.md 交接說明（給接手的 AI）
└── docs/
├── design.md 設計說明與當初的取捨
├── setup-google-sheets.md 雲端同步設定步驟
└── hermes-guide.md 試算表欄位說明（給 AI 助理或手動編輯用）
刻意不做的事
| 不做 | 原因 |
|---|
| 嵌入地圖 | 需要申請 Google 金鑰、會產生費用。改成貼 Google Maps 連結，手機點了用原生地圖開更好用 |
| 直接上傳照片 | 圖片檔會同時撐爆瀏覽器儲存空間、試算表欄位和分享連結。改成放網址或放進 images/ 資料夾 |
| 自動抓匯率 | 要依賴外部服務，哪天對方關掉或改規則就壞了。改成自己填，穩定可靠 |
| 登入帳號 | 資料存在本機，不需要 |
| 拖曳排序 | 手機上容易誤觸。改用上移／下移箭頭，手機電腦都好按 |
| 分組的平行時間軸 | 手機寬度放不下並排的欄位。改用「標參加者 + 篩選」，九成的好處、十分之一的複雜度 |
技術說明
純 HTML + CSS + JavaScript，沒有用任何框架或套件，也沒有建置流程。
把檔案放進 GitHub 就直接是一個能用的網站，不會因為某個套件更新而壞掉。
支援淺色與深色模式（跟著系統設定走）。手機、平板、電腦都能用。
