課程 Demo 總覽

三個零 build 的完整成品,全部雙擊即可開啟。虛構品牌「山霧咖啡 SANWU COFFEE」貫穿,每一個都對應課程模組,看完講義就來這裡對答案。

DEMO 01 · 模組 1+2+3

開幕週活動頁

AI 對話生成的單檔 landing page:星座連線粒子 hero、開幕倒數、活動亮點、置底 CTA、完整 OG tags。

DEMO 02 · 模組 4A

三輪拉霸抽獎:機率表就在程式碼最上方、中獎發優惠碼、localStorage 每日限抽一次、大獎撒彩帶。

DEMO 03 · 模組 4B

五題心理測驗、四種結果型、加權計分;結果頁用 canvas 即時畫出 1080x1350 分享圖卡,一鍵下載。

DEMO 06 · 模組 6

頁面即時呼叫 AI:Worker 代理(正式做法)或貼自己的 Groq key 立即體驗;key 永遠不在頁面程式碼裡。

DEMO 07 · 模組 7

GitHub Actions 排程自動改寫 daily.json,標語自己換,沒有人按任何按鈕。

DEMO 09 · 模組 9

報名頁 → Worker → D1 資料庫真的存起來;附後台(輸密碼看名單、匯 CSV)。行銷人最實用的一個。