# 🎭 Drama Ling HTML 原型系統

## 📖 概述

這是 Drama Ling 項目的 HTML 原型系統，用於在正式開發前確認頁面設計、交互流程和視覺效果。

## 🎯 使用目的

### ✅ 優勢
- **視覺化確認**: 直接在瀏覽器中查看實際效果
- **快速迭代**: HTML/CSS 修改比 Vue 組件更快速
- **跨團隊溝通**: 設計師、產品經理、開發者都能直觀理解
- **規格明確**: 避免開發階段的猜測和重工
- **組件識別**: 清楚了解需要開發的可重用組件
- **交互演示**: 展示表單驗證、動畫效果等互動功能

## 📁 目錄結構

```
html-prototypes/
├── index.html              # 原型導航頁面
├── assets/
│   └── style.css           # 全局樣式和設計系統
├── pages/                  # 主要頁面原型
│   ├── home.html          # 首頁
│   ├── register.html      # 註冊頁面 ✅
│   ├── login.html         # 登入頁面
│   ├── dashboard.html     # 學習儀表板
│   ├── vocabulary.html    # 詞彙學習
│   ├── dialogue.html      # 對話練習
│   ├── roleplay.html      # 角色扮演
│   └── ...
├── components/             # UI 組件展示
│   ├── buttons.html       # 按鈕組件
│   ├── forms.html         # 表單組件
│   ├── cards.html         # 卡片組件
│   └── modals.html        # 彈窗組件
└── specs/                  # 設計規格展示
    ├── colors.html        # 色彩規範
    ├── typography.html    # 字體規範
    ├── spacing.html       # 間距規範
    └── icons.html         # 圖示規範
```

## 🚀 開始使用

### 1. 打開導航頁面
```bash
open docs/02_design/html-prototypes/index.html
```

### 2. 瀏覽頁面原型
- 點擊導航卡片查看各個頁面原型
- 每個頁面都有完整的樣式和基礎交互功能
- 右上角有原型狀態標記

### 3. 測試交互功能
- 表單驗證（即時反饋）
- 密碼強度檢查
- 響應式布局
- 動畫效果

## 🎨 設計系統

### 色彩規範
- **主要色**: `#00E5CC` (青綠色)
- **輔助色**: `#8E44AD` (紫色)
- **功能色**: 錯誤、警告、成功、資訊
- **深色主題**: 完整的深色配色方案

### 字體系統
- **主字體**: Inter, PingFang TC
- **等寬字體**: JetBrains Mono
- **尺寸階層**: xs, sm, base, lg, xl, 2xl, 3xl, 4xl

### 間距系統
- **基礎單位**: 0.25rem (4px)
- **階層**: 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20

## 📝 原型狀態管理

### 狀態標記
- 🟡 **Draft**: 草稿階段，待完善
- 🟣 **Review**: 審查階段，等待反饋
- 🟢 **Final**: 最終確認，可用於開發

### 更新流程
1. 創建/修改 HTML 原型
2. 測試所有交互功能
3. 標記適當的狀態
4. 團隊審查和反饋
5. 最終確認後用於 Vue 開發

## 🔧 開發轉換指南

### 從 HTML 到 Vue 的轉換步驟

#### 1. 組件拆分
```html
<!-- HTML 原型中的卡片 -->
<div class="card">
  <h3>標題</h3>
  <p>內容</p>
</div>
```

```vue
<!-- 轉換為 Vue 組件 -->
<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
  </div>
</template>
```

#### 2. 樣式提取
- 將 CSS 轉換為 SCSS
- 使用設計 token (CSS 變量)
- 組件化樣式管理

#### 3. 交互邏輯
- JavaScript 函數轉換為 Vue 方法
- 表單驗證轉換為 Vue 響應式數據
- 事件處理整合 Vue 生命周期

#### 4. 數據流
- 靜態內容轉換為響應式數據
- 整合 API 調用
- 狀態管理 (Pinia)

## 📋 檢查清單

### 新頁面原型創建時
- [ ] 使用統一的樣式系統
- [ ] 實現基礎交互功能
- [ ] 響應式設計測試
- [ ] 無障礙訪問考量
- [ ] 瀏覽器兼容性測試
- [ ] 添加原型狀態標記

### 準備轉換為 Vue 時
- [ ] 識別可重用組件
- [ ] 確認設計規格完整
- [ ] 測試所有用戶流程
- [ ] 整理設計 token
- [ ] 準備資產文件 (圖片、圖標)

## 🌟 最佳實踐

### 1. 保持一致性
- 使用統一的 CSS 變量
- 遵循命名規範
- 保持視覺風格一致

### 2. 注重細節
- 微交互和動畫
- 錯誤狀態處理
- 載入狀態展示
- 空狀態設計

### 3. 考慮實際場景
- 真實數據長度
- 網絡延遲情況
- 錯誤處理流程
- 邊界條件測試

### 4. 文檔記錄
- 交互說明
- 特殊需求註記
- 技術實現提醒

## 🚀 下一步計劃

### 即將完成的頁面
1. **登入頁面** - 用戶認證流程
2. **首頁** - 產品展示和導航
3. **學習儀表板** - 主要學習界面
4. **詞彙學習** - 核心學習模組

### 未來擴展
- 移動端特化版本
- 深色/淺色主題切換
- 多語言版本展示
- 組件庫完整化

---

## 📞 聯絡資訊

如有問題或建議，請：
- 查看具體頁面的註解說明
- 參考設計規格文檔
- 提出改進建議

**記住：原型的目標是確認需求，避免開發階段的大幅修改！** ✨