昨天先把收藏頁建立起來，讓首頁右上角的 ☆ 可以進入收藏頁，也可以正常返回主畫面。
不過昨天完成的還只是收藏頁的基本框架。
頁面有了，接下來要決定的就是：

卡片真的收藏進來之後，到底應該怎麼呈現？

我好像不想做成傳統的圖鑑

一開始想到卡牌收藏，很自然會想到遊戲裡常見的圖鑑。
例如先把所有卡片的位置排好：

已收藏  [卡片]
未收藏  [????]
未收藏  [灰色卡片]

抽到的卡片正常顯示，還沒有抽到的則用灰色、問號或其他方式表示尚未解鎖。
原本也有考慮過這種方式，但想了一下之後，我發現自己好像不太想把收藏頁做成這種「解鎖圖鑑」。
比起先放好固定數量的格子，我比較希望收藏頁真的只出現使用者曾經抽過的卡片。
所以最後決定分成：

MEME CARDS／梗圖卡

CHALLENGE CARDS／生活挑戰卡

兩種類型都會收藏，沒有抽過的卡片就不額外做顯示。

兩種卡片，不代表要做兩個頁面

接著要決定的是，MEME 和 CHALLENGE 到底要怎麼分。
一開始也想過：

是不是乾脆各自做一個頁面？

但目前只打算在同一個收藏頁裡切換兩種類型的內容，好像沒有必要為了分類另外建立兩個 HTML。
所以最後還是保留原本的：

collection.html

直接在同一個收藏頁裡加入兩個 Tab：

<div class="tab-bar">
    <button class="tab-button active" data-tab="meme">MEME</button>
    <button class="tab-button" data-tab="challenge">CHALLENGE</button>
</div>

這次新增了 collection.js，目前負責的事：

點擊 Tab → 判斷是哪個分類 → 切換 active → 顯示對應的收藏區

tabButtons.forEach(btn => {
    btn.addEventListener('click', () => {
        switchTab(btn.dataset.tab);
    });
});

點擊 Tab 後，會把目前選擇的分類傳進 switchTab()，再透過 active 切換對應的收藏區。

memeContent.classList.toggle('active', tabName === 'meme');
challengeContent.classList.toggle('active', tabName === 'challenge');

生活挑戰卡之後可能還會有執行挑戰、照片紀錄等功能，目前也還沒建立其他頁面，打算做到那個功能時，再根據當時的需求增加。

最初的版本，跟我想的不太一樣

最初做出來的時候，MY COLLECTION、返回鍵、MEME／CHALLENGE、收藏內容區都已經有基本的雛形。
但看到畫面的第一個反應卻是： 嗯……這不是我想要的。

雖然後來又陸續把 Tab 切換和基本版型調整好，但在功能已經可以正常使用之後，我還是覺得視覺上有一些地方不太符合原本的設計，所以這次沒有再繼續叫 Cline 整頁重做，而是決定自己接著調。

自己動手改

這次功能本身已經正常，所以我沒有再叫 Cline 把整個頁面重新修改，而是直接打開 collection.css collection.html，從在意的地方一個一個調。

原本選中的 Tab 是：

.tab-button.active {
    background-color: #EEE5AD;
    color: #000;
    border: 1px solid #000;
}

實際放進頁面後，我覺得外面的黑框有點太重，所以把邊框改成和選中狀態相同的黃色。

.tab-button.active {
    background-color: #EEE5AD;
    color: #000;
    border-color: #EEE5AD;
}

接著再調整收藏內容區，包括寬度、高度、padding、圓角、背景顏色和淡色虛線:

.collection-content {
    width: 100%;
    background-color: #FFF9E6;
    border: 1.5px dashed #DDD5B1;
    border-radius: 28px;
}

返回鍵也一起重新調整，不再使用原本比較明顯的黑框方形，而是讓它跟選中的 MEME Tab 使用比較一致的樣式。

原本的顏色，差點被我自己忘記了

調整收藏頁的時候，我又重新打開以前的設計稿，才發現原本其實已經有一套配色：

#FFF9E6  頁面背景
#EEE5AD  選中分類／主要黃色
#DDD5B1  按鈕／輔助元素

其中 #FFF9E6 原本就是設計稿裡的頁面背景，但之前實作首頁時反而沒有真的用到。
所以這次先從收藏頁把原本的配色帶回來，其他已經完成的頁面之後再慢慢調整。

下一步，才要把前面已經完成的抽卡功能和這個收藏頁真正接在一起。
抽到哪張卡 → 記錄下來 → 根據 type → 放進 MEME 或 CHALLENGE。
到那時候，這個現在還空空的收藏頁，才會真的開始有東西。