前一天先把原本的卡牌整理成比較完整的資料,讓程式不只知道「這是一張圖片」,也開始知道每張卡片各自的 id、type 和 image。
原本打算準備開始做收藏,但與其一開始就急著處理「抽到的卡怎麼存」,不如先把收藏頁本身做出來。
原本主畫面的右上角一直有一個 ☆,但之前它就只是畫面上的裝飾,沒有任何實際功能。
既然現在準備開始做收藏,剛好可以把它利用起來,正式變成進入收藏頁的入口。
所以今天的目標其實很單純:
主畫面
↓
點擊右上角 ☆
↓
進入收藏頁
↓
可以返回主畫面
先做到:
☆ 可以按 → 收藏頁打得開 → 頁面長相確定 → 可以正常回首頁
至於哪些卡片已經抽過、收藏資料怎麼儲存,今天都先不處理。
這次下的 prompt:
請先讀取目前《時間就是金錢》專案中與主畫面相關的 HTML、CSS、JavaScript,確認首頁右上角「☆」的 HTML 結構,以及目前首頁的版型與 CSS 樣式。
先不要修改任何檔案,先分析目前程式結構。
這次要建立一個獨立的「收藏頁面」,目前只處理頁面與跳轉,不製作真正的收藏功能。
目標流程
主畫面 → 點擊右上角「☆」→ 進入收藏頁 → 可以返回主畫面。
收藏頁需求
- 建立獨立的收藏頁。
- 視覺延續目前《時間就是金錢》的設計風格,例如奶油黃/米色、黑色線條、圓角元素與現有字體風格。
- 頁面加入
COLLECTION/我的收藏標題。- 預留兩個收藏區域:
MEME CARDS/梗圖卡CHALLENGE CARDS/生活挑戰卡- 目前不用放真正的卡片,可以先顯示「還沒有收藏任何梗圖卡」、「還沒有收藏任何生活挑戰卡」等空白狀態。
- 收藏頁需要有返回主畫面的方式。
- 首頁原本的「☆」外觀盡量保持不變,只增加前往收藏頁的功能。
這次不要處理
不要新增收藏資料或 localStorage,也不要修改
cardList、抽卡、進度條、番茄鐘、任務等既有功能,更不要先放入真正的收藏卡片。如果單純使用 HTML 連結就能完成頁面跳轉,請不要額外增加 JavaScript。
修改前請先告訴我
- 「☆」目前位於哪個檔案、使用什麼 HTML 結構。
- 預計修改哪些現有檔案。
- 收藏頁需要新增哪些檔案。
- 收藏頁準備如何延續目前首頁的視覺風格。
- 頁面跳轉與返回準備如何實作。
目前只讀取與分析,不要修改、刪除或重構任何現有檔案。等我確認後再開始實作。
完成之後,首頁右上角的 ☆ 保留原本的位置和外觀,只增加進入收藏頁的功能。
收藏頁也加入返回主畫面的方式,現在已經可以完成:
主畫面 → ☆ → 收藏頁 → 返回主畫面
原本一直放在那裡當裝飾的 ☆,到今天終於正式找到工作了。
目前完成的還只是收藏功能的入口和頁面本身。
哪些卡片已經收藏、收藏資料怎麼儲存,以及怎麼跟真正的抽卡紀錄串接,今天都還沒有處理。
而且在真的把資料接進來之前,還有一件事情得先決定:
卡片真的放進收藏頁之後,到底應該怎麼呈現?