做出自己的網頁與管理後台

請讀 product-brief.md 的「核心流程」和「做到什麼程度算及格」，再讀 AGENTS.md。
這一課要做出使用者的網頁和管理後台，順序是：1. 使用者的網頁 2. 像樣又好用 3. 管理後台 4. 不改程式也能改設定 5. 防止同一個名額或時段被搶兩次（Redis） 6. 通知信（Mailpit）。
請告訴我，照我的及格線，這六段哪些要做、哪些用不到可以跳過，各用一句白話說原因。先不要改檔案。

請照 AGENTS.md，在 web/ 資料夾用 React 做出（換成使用者是誰，例如：家長）用的網頁，接上第 20 課做好的 API，走完 product-brief.md 的核心流程：
1. （換成第一步，例如：列出課程，讓家長選一門）
2. （換成第二步，例如：列出這門課的場次和剩下的名額，讓家長選一場）
3. （換成填資料那一步，例如：填學生姓名、家長電話、Email，按「確認報名」）
4. 送出後，在畫面上用一行字告訴使用者已經送出。
讓網頁跟著 Docker 一起跑，打開 http://localhost:3000 就能用。外觀先不用管，下一段再做。
做好後你自己用內建瀏覽器走一次，告訴我怎麼打開。

$imagegen 請替「（換成你的產品名）」畫 3 款 logo 給我挑。
（換成一兩句產品介紹，例如：社區裡的小型數學教室，給國中生上課，感覺認真、明亮、親切。）
圖案用簡單的線條，縮小放在手機畫面左上角也要看得清楚。
logo 裡不要放任何文字，名稱我會用網頁上的文字排；背景用白色。

請把我選的（換成第幾款）logo 存進 web/ 資料夾，放在網頁左上角，旁邊用文字寫「（換成你的產品名）」。沒有 logo 圖的話，改用文字和顏色排一個簡單的 logo。
從 logo 的顏色挑一個主色、一個輔助色，整個網頁的按鈕、標題和連結都用這兩個顏色，全站統一用一種好讀的中文字體。
再做到這三件事：
1. 填錯有提示：（換成必填的欄位，例如：學生姓名、家長電話、Email）沒填或格式不對時，不要送出，在那一格下面用紅字寫出哪裡要改。
2. 不能選的看得出來：（換成你的情況，例如：名額已滿的場次）改成灰色、寫「額滿」、不能點。
3. 送出後有成功畫面：列出這次的內容，再放一個回到首頁的按鈕。
改完請用內建瀏覽器，用電腦寬度和 390 像素寬各走一次，告訴我結果。

請做出（換成管理的人，例如：補習班老師）用的管理後台，畫面放在 admin/ 資料夾，用瀏覽器打開 http://localhost:3001。
1. 登入：建立一個管理帳號，帳號是 owner，密碼是「（換成你想好的練習用密碼）」。資料庫裡不要存密碼原文，只存雜湊過的值。
2. 登入後列出（換成要看的資料，例如：每一場的報名名單），顯示（換成要看的欄位，例如：學生姓名、家長電話、課程、場次、狀態）。
3. 每一筆旁邊加上（換成要做的動作，例如：「取消」和「標記已到課」）按鈕，取消前先跳出確認，狀態改完列表上要看得出來。
4. 沒登入的人打開後台，只看得到登入畫面。
後端的登入和管理功能放在 backend/app/routers/admin.py，API 放在 /api/admin/ 底下，照 AGENTS.md 的規矩。做好後跑起來，告訴我怎麼打開。

請在管理後台加上「設定」頁，讓管理的人不改程式就能調整：（換成要能改的設定，例如：課程名稱、學費、每場名額、上課時間、停課日）。
改完存進資料庫，使用者的網頁要馬上跟著變，不用重新啟動。
設定用的 API 放在 /api/admin/ 底下，只有登入的人能用。改完告訴我怎麼試。

我的產品裡，（換成會被搶的東西，例如：每一場的最後一個名額）可能同時被兩個人搶。請用 Redis 防止重複：
1. 送出時，先用 Redis 把它夾住，夾住的人才能存進資料庫。
2. 沒夾到的人，網頁顯示「（換成你要的說明，例如：這一場剛額滿，請選別的場次）」。
3. 夾子最多夾 30 秒，萬一沒完成會自動放開。
Docker 裡已經有 Redis，直接用它。改完你自己用兩個同時送出的請求試一次，告訴我是不是只有一個成功。

請在（換成寄信的時機，例如：報名成功）時，寄一封信到使用者填的 Email。信一律寄到 Docker 裡的測試收信匣 Mailpit，不要設定任何真實的寄信帳號或密碼。
1. 主旨寫「（換成主旨，例如：晨光數學教室 報名確認）」。
2. 內容寫（換成信裡要有的資料，例如：學生姓名、課程、場次時間、學費）。
3. 最後附一個取消連結：每一筆產生一組別人猜不到的取消碼，只放在這封信的連結裡；取消後，管理後台看得到狀態變成已取消。
4. 寄信失敗時，原本的動作照樣成立，但要記下錯誤。
改完重新啟動服務，告訴我改了哪些檔案、怎麼在 http://localhost:8025 看到信。

請對照 product-brief.md 的「做到什麼程度算及格」，逐項告訴我現在「做到了」還是「還沒做到」；還沒做到的，說明還差什麼。這一課跳過的段落，請標「這一課跳過」。先不要改檔案。

請列出這一課你新增和修改了哪些檔案，每個用一句白話說它在做什麼。
再對照 AGENTS.md，告訴我有沒有哪個檔案管了不只一件事，或使用者的網頁和管理後台混在同一個資料夾。
列完請幫我存一個版本，說明寫「第 21 課：網頁與管理後台達到及格線」。