一個為我媽設計的旅行打包清單 PWA，純靜態網頁，不需後端、不需帳號，打開就能用。
每次出門旅遊，東西總是少帶、忘帶。這個小工具原本只是給自己家人用的，後來覺得也許對其他人有用，就整理成這個樣子放上來。
-
勾選清單：點一下物品即可標記「已放入行李」，勾選後自動沉到底部，讓沒打包的東西一直保持在視線最上方
-
分類群組：物品以分類區塊呈現，整組全部打包完後，整個群組會自動淡出，視覺上更清爽
-
多模板管理：可以建立多份清單（例如短途旅行、長途旅行），切換模板時清單狀態互不干擾
-
複製模板：不用每次從頭建，直接複製現有模板來改，複製時所有勾選狀態會自動重置
-
編輯模式：點「編輯清單」可新增、刪除、修改項目名稱，完成後再點一次關閉
-
離線可用（PWA）：第一次載入後即使沒網路也能正常使用，可安裝到手機主畫面
-
本地儲存：所有資料存在瀏覽器的 localStorage，清空快取才會消失，不會上傳到任何伺服器
| 項目 | 說明 |
|---|---|
| 架構 | 純 HTML + Vanilla JS（無框架） |
| 樣式 | Tailwind CSS（CDN） |
| 動畫 | FLIP 技術，勾選時滑動位移自然流暢 |
| 離線 | Service Worker，Network First 策略 |
| 儲存 | localStorage |
| 安裝 | Web App Manifest，支援 Android / iOS 加入主畫面 |
不需要 Node、不需要打包工具，直接用瀏覽器打開 index.html 就能跑。
git clone https://github.com/你的帳號/PackMom.git
cd PackMom
# 用任意靜態伺服器起服務（Service Worker 需要 http/https，不能直接用 file://）
npx serve .然後開 http://localhost:3000 就好了。
PackMom/
├── index.html # 主程式，所有邏輯都在這裡
├── manifest.json # PWA 設定
├── sw.js # Service Worker
├── icon-192.png # App 圖示（小）
└── icon-512.png # App 圖示（大）
初次使用會載入一份基礎模板，分三個分類：
- 醫療與身體防護：脖圍、電解質粉、暈車藥、過敏咳藥、氧木斯、蘆薈
- 個人護理：乳液、修護霜／精華液、卸妝面紙
- 生活雜項：洗衣袋、拖鞋、行李確認、VPN 帳號截圖
這份清單可以自由修改，改動會自動存到瀏覽器，重新整理也不會消失。
- 資料存在 localStorage，換瀏覽器或清除快取後需重新設定
- 目前沒有匯出/匯入功能，多裝置之間的同步要手動複製
- 手機版 Safari 加入主畫面後，Service Worker 的快取行為與 Android 略有不同
MIT