作品簡介

這 30 天，我把腦中一直想做的「追劇管理＋心得記錄」變成了可用的網站——DramaWeb。它不靠後端、安裝零門檻，用瀏覽器就能完成「找劇 → 收藏 → 寫心得 → 回看紀錄」的完整流程。整體走霓虹＋玻璃質感，希望在實用之外，也能讓人一打開就有「想逛一會兒」的感覺。

功能總覽（給第一次使用的人）

• 劇集清單：卡片顯示封面、片名、類型、評分，一鍵★加入/移除收藏。
• 類型篩選：愛情 / 喜劇 / 懸疑 / 動作 / 劇情，支援多選、即時過濾。
• 關鍵字搜尋：輸入片名即時篩；容錯做得寬（空白、全形、簡單模糊）。
• 排序：依「片名 / 評分」升降序切換。
• 收藏清單：集中查看已收藏、可直接取消。
• 心得牆：寫觀後感（評分、暱稱、內容），支援即時驗證、草稿自動保存、載入更多、清空。
• 狀態保存：收藏與心得都放在 LocalStorage；重整或關掉再回來都在。
• 小互動：卡片捲動入場、按鈕微光澤、操作 Toast 提示。
• RWD：手機、平板、桌機都能舒服瀏覽。

使用流程（30 秒上手）

1. 開首頁 → 先用類型按鈕與搜尋快速找到想看的。
2. 看到喜歡就按「★ 收藏」。
3. 追完到「心得牆」填表送出（打到一半離開也不怕，草稿會自存）。
4. 之後到「收藏清單」統一管理，或重看過去的心得。

網頁顯示

主畫面

可以按類型找喜歡的劇（可以加入收藏）

可以用關鍵字找電影

心得牆

留下你的評價

會顯示在心得牆供大家參考

技術亮點（無框架、但不陽春）

• 資料與狀態：以 LocalStorage 管理收藏/心得；資料結構平鋪，易維護。
• 互動體驗：IntersectionObserver 做卡片入場、按鈕光帶動畫、通用 toast()。
• 容錯搜尋：正規化字串（去空白、全形→半形）＋簡易模糊比對。
• 可及性（a11y）：aria-* 標註、aria-current、aria-live、focus-visible；支援 prefers-reduced-motion。
• 效能：圖片 loading="lazy"、Google Fonts preconnect、分頁載入所需 JS。

視覺與品牌（霓虹主題）

• 用 CSS Tokens（顏色/陰影/半徑）集中控管，換色只改一處。
• 霓虹漸層＋玻璃質感：卡片外圈 conic-gradient 光暈、內容區 backdrop-filter。
• 字體：Outfit（標題）＋ Space Grotesk（內文），年輕但好讀。
• 小貼紙、星標、徽章等元素做輕量裝飾，不干擾資訊。

我學到的事

• 先把路鋪好：第 1 週只做骨架和功能規格，後面開發真的順很多。
• 小功能也需要設計：例如 Toast 時機、文案語氣、錯誤訊息位置，這些都是「感受分」。
• 寧可簡單，但要完整：沒有把 API 串進來是刻意的選擇，確保無後端也能交付「可分享的成品」。
• 跟自己和解：每天只往前一小步就好；能穩定出成果，比第一天就想完美更重要。
• 設計不是堆效果：Y2K 很容易過頭；這次把霓虹收斂在卡片與按鈕的關鍵場景上，保留呼吸空間。

未來想做的（下一版 Roadmap）

• 串 TMDB 或其他資料源，改成真實海報與資訊。
• 新增「標籤/片單」與「看過 / 想看」兩種狀態。
• 心得牆支援圖片/片段連結、@標註劇名自動帶入。
• 一鍵換主題（深色 Y2K / 亮色 Vaporwave）。

結語

把一個想像中的工具做成「我自己會真的用」的作品，這 30 天值回票價。
如果你也常有「劇好多、我到底要看哪部」的困擾，希望 DramaWeb 能讓你的追劇生活更有儀式感，也更輕鬆。下一站，我們把它接上真實資料，一起升級成實戰項目吧。

網址：file:///Users/nanako/Downloads/DramaWeb-Y2K/index.html