前幾天已經把《時間就是金錢》的主畫面和番茄鐘分別做出來，但當時兩個頁面還是各自獨立的。
所以今天沒有繼續往後做新的功能，而是先把前面的進度補完：
把主畫面和番茄鐘真正接起來。
除了頁面之間的串接之外，這次也一起把主畫面原本只有畫面的 TODAY'S GOALS 加上互動功能。

以下是我當時下的 Prompt

接下來請在目前已經完成的主畫面與番茄鐘頁面基礎上繼續修改。
這次的主要目標是：
「完成主畫面 index.html 與番茄鐘頁面的互動連接」，並讓 TODAY'S GOALS（今日代辦事項）可以實際新增與
執行任務。
請先讀取目前相關的 HTML、CSS、JavaScript 檔案，確認現有程式碼後再修改，不要重新建立或重新設計整個頁>面。
【一、今日代辦事項新增功能】目前主畫面有 TODAY'S GOALS／今日代辦事項區塊請讓使用者可以：

1. 在此區塊輸入今天想完成的事情。
2. 輸入文字後按下 Enter，才正式新增一筆任務。
3. 新增後，任務文字要實際顯示在今日代辦事項列表中。
   4.可以連續新增多筆不同任務。
   請延續目前主畫面原本的 UI 樣式，不要重新設計 TODAY'S GOALS 區塊。
   【二、從主畫面進入番茄鐘】
   任務新增完成後，不要自動進入番茄鐘。
   只有當使用者按下該筆任務旁邊的三角形「開始」按鈕時，才：
4. 將這一筆任務設定為目前正在執行的任務。
5. 跳轉到目前已經存在的番茄鐘頁面。
6. 進入番茄鐘頁面後，自動開始 25:00 的倒數，不需要再按一次「開始」。
7. 如果可以，請在番茄鐘頁面顯示目前正在進行的任務名稱。
   流程應該是：
   輸入任務
   → 按 Enter 新增
   → 任務出現在列表
   → 按該任務旁的三角形開始按鈕
   → 進入番茄鐘頁面
   → 自動開始 25:00 倒數
   【三、完成番茄鐘後】
   當完整的 25 分鐘倒數到 00:00 時：
8. 將目前這一筆任務記錄為已完成一次番茄鐘。
9. 自動跳轉回 index.html 主畫面。
10. 回到主畫面後，剛才執行的那筆任務旁原本的「空心圓圈」要改成「打勾」符號，表示這筆任務已完成一次番
    茄鐘。
    只有完整倒數到 00:00 才能變成打勾狀態。
    如果使用者中途暫停、重置、放棄或直接返回主畫面，都不能標記為完成。
    【四、資料在頁面跳轉後要保留】
    因為主畫面與番茄鐘是不同 HTML 頁面，請使用適合目前純 HTML、CSS、JavaScript 專案的簡單方式保存：

• 今日新增的任務
• 目前正在執行哪一筆任務
• 任務是否已完成一次番茄鐘
  確保從 index.html 跳到番茄鐘，再回到 index.html 後，剛才新增的任務不會消失。
  目前先以瀏覽器本機儲存即可，不需要後端或資料庫。
  【限制】
• 維持目前使用 HTML、CSS、JavaScript 的方式。
• 不要加入 React、Vue 或其他框架。
• 不要重新設計目前已完成的主畫面與番茄鐘視覺。
• 不要加入抽卡、+10% 進度、卡牌收藏等其他功能。
• 這次只處理「新增今日任務 → 開始任務 → 番茄鐘 → 完成 → 回主畫面並打勾」這條流程。
• 修改前請先讀取現有檔案內容，不要假設檔案是空的，也不要重新覆蓋已經完成的頁面。
  在實際修改以前，請先告訴我：

1. 準備修改哪些現有檔案
2. 每個檔案準備修改什麼
3. 主畫面與番茄鐘之間準備如何傳遞目前任務
4. 任務與完成狀態準備如何保存
   先不要修改，等我確認後再開始，並在程式碼旁註解方便我日後查看。

先讓 TODAY'S GOALS 真的可以使用

原本主畫面的 TODAY'S GOALS 已經設計好版面，但還沒有實際功能。
這次希望它可以讓使用者直接新增今天想完成的事情，再從其中一個任務開始番茄鐘。
目前的流程：

新增任務
↓
輸入任務名稱
↓
任務出現在 TODAY'S GOALS
↓
點擊任務旁的開始按鈕
↓
進入番茄鐘

在把「開始」按鈕連接到番茄鐘頁面的同時，我也希望選擇的任務可以一起被帶過去。
當我選擇其中一個任務進入番茄鐘之後，番茄鐘頁面也會顯示目前正在進行的任務名稱，接著開始 25 分鐘的倒數。
例如今天新增： 寫鐵人賽文章
進入番茄鐘之後，就會知道這次的 25 分鐘是在進行這個任務。

前幾天還各自獨立的主畫面和番茄鐘，到這裡才開始真正有前後關係。

任務資料也要一起跟著過去

做到這裡之後，也開始碰到之前比較沒有處理過的問題：

換到另一個頁面之後，怎麼知道剛剛選的是哪一個任務？

目前的做法是使用 localStorage 儲存任務資料。
每一個新增的任務都會有自己的資料，例如任務名稱、ID，以及目前是否完成。
這些資料會先被保存在瀏覽器裡，進入番茄鐘頁面之後，再讀取剛才選擇的任務。完成番茄鐘之後，也可以再更新它的狀態。

25:00
↓
00:00
↓
顯示「本次專注完成」
↓
更新任務完成狀態
↓
回到主畫面
↓
原本那行的 ○ 變成 ✓

這次對我來說，已經不只是讓按鈕可以點擊或切換頁面，而是第一次比較明確地碰到「不同頁面之間怎麼共用資料」的問題。
雖然程式主要還是由 AI 協助完成，但在實際測試的過程中，我開始比較能理解為什麼這些資料需要被保存，以及它們是怎麼被保存下來，再讓另一個頁面讀取。

今天終於把第一段流程接起來了

到這裡，目前已經可以：

新增 TODAY'S GOALS
↓
選擇一個任務
↓
進入番茄鐘
↓
開始 25 分鐘倒數
↓
完成專注
↓
更新任務狀態

前幾天主畫面和番茄鐘還只是兩個分開完成的頁面，現在終於開始變成一條可以實際操作的流程。
畫面和一些細節之後還要繼續調整，但今天先把前面留下來的這段接起來了。