前面把主畫面、TODAY'S GOALS 和番茄鐘慢慢接起來之後，目前已經可以從新增任務一路進入番茄鐘，完成一次基本的專注流程。
做到這裡，其實還少了一個很重要的東西：完成一次番茄鐘後，進度 +10%。
主畫面雖然已經有進度條的設計，但目前它還只是一個靜態的畫面，並沒有真的隨著完成任務增加。
如果少了這個機制，其實就還沒真正接回原本的遊戲化設計，所以今天就先把這條進度條真正做起來。

以下是這次給 Cline 的 Prompt：

請在目前已完成的《時間就是金錢》專案基礎上繼續修改。
目前主畫面、TODAY'S GOALS 與番茄鐘已經可以正常串接，任務資料也已使用瀏覽器本機儲存。
這次只處理「進度條」功能，不要加入抽卡或其他新功能。
【目標】
目前主畫面已經有設計好的進度條區塊，但只有靜態視覺，沒有實際功能。
請在保留目前進度條外觀的前提下，加入以下功能：
完整完成一次 25 分鐘番茄鐘
→ 進度 +10%
→ 回到主畫面後更新進度條
進度從 0% 開始，最高為 100%。
只有完整倒數至 00:00 才能 +10%。
如果中途放棄、重置、返回主畫面、重新整理頁面，或沒有完整完成番茄鐘，都不能增加進度。
同一次番茄鐘完成只能增加一次 10%，不能重複計算。
【進度條視覺】
請沿用目前主畫面已經設計好的進度條，不要重新設計。
進度條的變化方式：
*0%：

• 進度條內部維持透明
• 沒有白色填滿區域
• 顯示 0%
  *10%：
• 從進度條左側開始出現白色區域
• 白色區域佔整條的 10%
• 10% 顯示在白色區域尾端附近
  *20%：
• 白色區域繼續向右延伸至 20%
• 20% 跟著移動到白色區域尾端附近
  之後依照相同方式增加。
  *100%：
• 白色區域填滿整條進度條
• 顯示 100%
  這不是分成 10 格的進度條，而是同一個連續的白色區域隨著進度向右延伸。
  百分比文字也要跟著目前進度的位置移動，並確保 0%～100% 都不會超出進度條範圍。
  【資料保存】
  目前累積的進度需要使用瀏覽器本機儲存保存。
  例如目前為 30%，重新整理主畫面或在主畫面與番茄鐘之間切換後，仍然要維持 30%。
  目前不需要後端或資料庫。
  【限制】
• 維持目前 HTML、CSS、JavaScript 的專案結構
• 不需要另外建立進度條資料夾
• 優先修改目前既有檔案
• 不要重新建立、刪除或大範圍重寫現有檔案
• 不要影響目前已正常運作的 TODAY'S GOALS 與番茄鐘
• 在新增的重要程式碼旁加入簡單中文註解
• 如果找不到預期的修改位置，請先停止，不要自行刪除或重建檔案
  【修改前】
  請先讀取目前相關的 HTML、CSS、JavaScript 檔案。
  先不要修改，請先告訴我：

1. 準備修改哪些檔案
2. 每個檔案準備修改什麼
3. 進度準備如何保存
4. 如何判斷完整完成番茄鐘後才 +10%
5. 進度條的白色區域與百分比文字準備如何更新
   等我確認後再開始修改。

完成一次番茄鐘，才可以 +10%

原本《時間就是金錢》的核心機制是：

填寫任務
↓
開始番茄鐘
↓
完整完成一次專注
↓
進度 +10%
↓
累積至 100%
↓
獲得一次抽卡機會

今天要接上的，就是中間這一步：

讓完成番茄鐘這件事，真的可以影響主畫面的進度。

先把需求拆小

前面已經遇過一次 Cline 在修改既有程式時反覆出錯，所以這次不打算一次把後面的功能全部丟給它。
先確認這一段真的可以正常運作，再繼續往後接。

除了增加進度之外，這次還有一個條件：進度要被保存下來。
如果已經累積到 20%，重新整理頁面之後又回到 0%，那前面的累積就沒有意義了。
所以這次除了要讓進度條真的動起來，也要讓目前的百分比能夠被保留下來。