https://laihao.vaserver.com/lucky.html

只有前端

route的地方

這是一個「本週幸運度調查」的單頁互動網頁，用 HTML + CSS + 原生 JavaScript 實作，核心流程是：顯示 3 題選擇題 → 根據選擇進度切換題目 → 最後隨機顯示一個幸運結果，並提供「再測一次」與「複製祝福文案」功能。
整體結構
使用 宣告為 HTML5，語言設為繁體中文 lang="zh-Hant"。
頁面主要內容包在 裡，再包一層 .card 作為視覺卡片。
內容分為兩大部分：
.hero：標題、副標、裝飾文字（粉粉好運、朋友環繞、幸福發光）。
.content：進度條、三個問題區塊（.question）、結果區塊（.result）。
CSS 設計重點
使用 CSS 自訂屬性（--color-、--radius-、--space-、--text-）統一管理色彩、圓角、間距、字級，方便維護與換主題。
背景使用多層 radial-gradient + linear-gradient 做出粉嫩漸層與光暈感。
字體透過 Google Fonts 引入 Kosugi Maru（標題感）與 Zen Maru Gothic（內文），並在 :root 中設定為 --font-display 與 --font-body。
.question 預設 display: none，只有加上 .active 才會顯示，搭配 @keyframes fade 做淡入上移動畫。
按鈕 .option-btn 使用 hover / focus-visible 狀態做微上移、陰影加深、背景變色，提升互動感。
進度條 .progress 用一個 的寬度來表示當前進度，JS 會動態修改 width。
針對手機（max-width: 640px）有簡單的 RWD 調整：padding 變小、圓角略減。
HTML 內容結構
標題區：
.badge：小標籤「✨ 本週幸運度調查」。
h1：主標題「三個小問題，測出你是不是被幸福偷偷抱住的人」。
.lead：副標說明「選你喜歡的小東西就好……」。
.sparkles：三個裝飾性小文字（粉粉好運、朋友環繞、幸福發光）。
問題區：
三個 .question，分別對應第 1～3 題，每個都有：
.step：顯示「第 X 題 / 3」。
h2：題目文字。
.hint：提示語。
.options：多個 .option-btn 按鈕作為選項。
結果區：
.result 內有一個 .result-box，包含：
結果標題「幸運無比 100% ✨」（.big）。
#fortuneText：主要幸運文字。
#detailText：補充小語（.love-note）。
兩個按鈕：「再測一次」（.primary）、「複製祝福文案」（.secondary）。
底部小字 .footer-note。
JavaScript 邏輯
關鍵變數與選取：
const questions = [...document.querySelectorAll('.question')];
const progressBar = document.getElementById('progressBar');
const result = document.getElementById('result');
const fortuneText = document.getElementById('fortuneText');
const detailText = document.getElementById('detailText');
const restartBtn = document.getElementById('restartBtn');
const copyBtn = document.getElementById('copyBtn');
questions：把所有 .question 放進陣列，用來切換顯示哪一題。
fortunes：一個陣列，裡面有三個可能的結果物件，每個有 main（主要文案）與 detail（補充文案）。
題目切換流程
current 記錄目前做到第幾題（從 0 開始）。
showQuestion(index)：
遍歷 questions，只讓 index 對應的那題加上 .active，其他移除。
更新進度條寬度：((index + 1) / questions.length) * 100%。
所有 .option-btn 綁定 click：
每按一次，current += 1。
若 current < questions.length，呼叫 showQuestion(current) 顯示下一題。
否則（三題都答完），呼叫 showResult()。
結果顯示
showResult()：
把所有 .question 的 .active 移除（隱藏題目）。
進度條設為 100%。
從 fortunes 隨機選一個：
const picked = fortunes[Math.floor(Math.random() * fortunes.length)];
把 picked.main 寫進 #fortuneText。
把 picked.detail 寫進 #detailText。
給 .result 加上 .active，讓結果區塊顯示。
再測一次
restartBtn 點擊：
把 current 重置為 0。
移除 .result 的 .active（隱藏結果）。
呼叫 showQuestion(0)，回到第一題。
複製祝福文案
copyBtn 點擊：
組合一段文字：
const text = 本周幸運度調查結果：幸運無比 100%！${fortuneText.textContent} ${detailText.textContent};
使用 navigator.clipboard.writeText(text) 寫入剪貼簿。
成功時把按鈕文字改成「已複製成功」，1.5 秒後恢復為「複製祝福文案」。
失敗時顯示「複製失敗」，同樣 1.5 秒後恢復。
互動流程總結
進入頁面 → 看到第 1 題，進度條 33.33%。
點選任一顏色 → 進入第 2 題，進度條 66.66%。
點選任一寵物 → 進入第 3 題，進度條 100%（但題目還沒結束）。
點選任一音樂類型 → 題目全部隱藏，顯示結果區塊，隨機出現一段幸運文案。
可點「再測一次」重來，或點「複製祝福文案」把結果文字複製到剪貼簿。

code的內容~明天再來寫