鐵人檔案
《拖延怪日記》是一個結合 Modern Web 與 AI 的互動網頁作品，以「記錄沒做到的事」為核心，專為想改善拖延的人設計。使用者每天只需輸入「今天沒做什麼」與「原因」，系統會回覆一則溫暖或打趣的語錄，讓紀錄不再是壓力，而是陪伴與幽默。
專案涵蓋表單紀錄、LocalStorage 保存、Undo、排序篩選、情緒追蹤、任務安排、互動動畫、AI 語錄生成、背景主題切換、雲端同步等功能，並支援 RWD 響應式設計，確保手機與桌機都能流暢使用。
此作品不追求一次治癒拖延，而是透過日常紀錄、數據回顧與 AI 陪伴，讓使用者逐步觀察自己的模式、累積成就感，進而找回改變的動機。
摘要延續 Day 20 的長條圖統計，我們今天要繼續延伸 Chart.js 的應用： 圓餅圖：用來顯示各精神狀態的「比例分布」。 折線圖：改成計算「每日有效...
摘要Day 21 我們完成了圖表統計（長條／圓餅／趨勢）。今天把重點放回「資料主權」：把瀏覽器裡的紀錄 匯出到電腦。 JSON 匯出：原樣保存，方便再次匯入...
摘要承接 Day 22 的「資料主權」，今天把資料送到「你自己的小後端」： 用 Express 在本機開一個 POST /backup API； 用 ngr...
摘要承接 Day 23 的「小後端 + ngrok」，今天把 AI 即時回覆接進來： 在後端新增 /gen-quote 代理路由（Server 端安全保存...
摘要承接 Day 24 的即時生成，今天把 Gemini 回覆存進本機，做出「語錄清單」：支援收藏、排序、搜尋、刪除、複製。透過 localStorage 陣...
摘要今天用 Flexbox 與 CSS Grid 重新整理頁面結構：工具列橫向排好、任務安排區塊與歷史頁更清晰，加入基本 RWD 與一致的按鈕/表單外觀，讓作...
摘要今天把 Day 26 的全站樣式變數升級為「可切換主題」：支援 Light/Dark 與 色彩主題（專注藍／活力橘／治癒綠），並把使用者偏好存進 loca...
摘要讓操作「看起來就對」。本日替 showPage() 加入過場動畫（淡入/淡出、滑入）、任務卡拖曳時的高亮與壓下感，以及主要按鈕的 Ripple 波紋與按壓...
摘要讓你的資料「帶得走」。今天我們做一個最小可用的雲端同步：前端維持離線可用（localStorage），需要時一鍵「備份到雲端」、另一台裝置一鍵「從雲端載入...
摘要走到 Day 30，我們完成了「拖延怪日記 Procrastinator」網頁。從最初的輸入表單，到 LocalStorage 保存、歷史清單、Undo、...
