神秘禮物交換派對 (Mystery Gift Exchange)

這是一個專為 8 人設計的禮物交換網頁應用程式。它不僅僅是簡單的抽籤，而是將禮物交換過程分為三個角色：送禮者 (A)、繪圖者 (B) 和 購買者 (C)，增加了活動的趣味性和互動性。

功能特色

• 自動分配角色：輸入 8 位參加者的名字，系統會自動為每個人分配 A、B、C 三種角色。
• 獨特規則：確保每位參加者在 A、B、C 三個角色中分別對應到不同的組別（例如：某人是第 1 組的 A，就不會是第 1 組的 B 或 C）。
• 雙重視角：
  • 依組別檢視：查看每一組 (1-8) 的 A、B、C 分別是誰。
  • 依個人檢視：查看每位參加者分別擔任了哪些組別的 A、B、C 角色。
• 精美介面：採用現代化的深色玻璃擬態 (Glassmorphism) 設計，搭配流暢的動畫效果。
• 一鍵範例：提供「帶入範例名字」功能，方便快速測試。

如何使用

1. 直接使用瀏覽器開啟 index.html 檔案。
2. 在 8 個輸入框中分別輸入參加者的名字。
3. 點擊「開始分配角色」按鈕。
4. 往下滑動查看分配結果。

技術說明

• HTML5: 語意化標籤結構。
• CSS3: 使用 CSS Variables 管理顏色，Flexbox 和 Grid 佈局，以及 CSS Animations。
• JavaScript (Vanilla):
  • 使用隨機演算法進行角色分配。
  • 透過 while 迴圈確保產生的分配結果符合規則（每人的 A, B, C 組別編號不重複）。
  • 動態生成 DOM 元素展示結果。

檔案結構

• index.html: 主頁面結構。
• css/style.css: 樣式表。
• js/app.js: 邏輯控制與演算法。