# Story 1-8 Contact Page - UX Pixel-Perfect Specifications

> **UX Expert Review Document**
> 參考來源: `research/www.enchun.tw/contact-us.html`
> 設計系統: `apps/frontend/src/styles/theme.css`
> 目標視覺保真度: 100%

---

## 🎨 Design Token 驗證

### 色彩系統

| 用途 | 變數名稱 | Hex Color | CSS Variable | 驗證狀態 |
|------|----------|-----------|--------------|----------|
| 主品牌色 | Primary Blue | `#3898ec` | `--color-primary` | ✅ 已定義 |
| 主品牌色 | Enchun Blue | `#23608c` | `--color-enchunblue` | ✅ 已定義 |
| 深品牌色 | Enchun Blue Dark | `#3083bf` | `--color-enchunblue-dark` | ✅ 已定義 |
| 主文字 | Text Primary | `#333333` | `--color-text-primary` | ✅ 已定義 |
| 次要文字 | Text Secondary | `#666666` | `--color-gray-600` | ✅ 需確認 |
| 背景色 | White | `#ffffff` | `--color-white` | ✅ 已定義 |
| 卡片背景 | Surface | `#f3f3f3` | `--color-surface2` | ✅ 已定義 |
| 邊框色 | Border | `#e2e8f0` | `--color-border` | ✅ 已定義 |
| 成功訊息 | Success Green | `#d4edda` | -- | ⚠️ 需新增 |
| 錯誤訊息 | Error Red | `#f8d7da` | -- | ⚠️ 需新增 |
| 錯誤文字 | Error Text | `#721c24` | -- | ⚠️ 需新增 |

---

## 📐 Section 詳細規格

### 1. Hero Section

#### 現有頁面: `contact-us.astro`

#### 佈局結構
```css
.contact-section {
    padding: 4rem 0;
    background: var(--color-background);
}

.contactus_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
```

#### 表單標題
```css
.contact_head {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

.contact_parafraph {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}

.contact_reminder {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}
```

---

### 2. 表單區塊

#### 表單容器
```css
.contact_form {
    padding: 2rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.contact_field_wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

.contact_field_name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
    display: block;
}

.contact_field_name span {
    color: var(--color-primary);
}
```

#### 輸入框規格
```css
.input_field {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1rem;
    line-height: 1.5;
    background: var(--color-background);
    transition: all var(--transition-fast);
    font-family: inherit;
}

.input_field:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(56, 152, 236, 0.1);
}

.input_field::placeholder {
    color: var(--color-text-muted);
}

#Message {
    min-height: 120px;
    resize: vertical;
}
```

---

### 3. 提交按鈕

```css
.submit-button {
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    width: 100%;
}

.submit-button:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.submit-button:active {
    transform: translateY(0);
}

.submit-button[data-wait="送出中"] {
    background: var(--color-gray-400);
    cursor: not-allowed;
    opacity: 0.8;
}
```

---

### 4. 成功/錯誤訊息

```css
.w-form-done,
.w-form-fail {
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    margin-top: 1rem;
    text-align: center;
    font-weight: 500;
    animation: slideUp 0.3s ease-out;
}

.w-form-done {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.w-form-fail {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
```

---

### 5. 欄位錯誤狀態

```css
.input_field.error {
    border-color: #dc3545 !important;
    background-color: #fff5f5;
}

.error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}
```

---

## 📱 響應式斷點總結

### 主要斷點
```css
/* Desktop (預設) */
html { font-size: 16px; }

/* Tablet */
@media (max-width: 991px) {
    html { font-size: 19px; }
    .contactus_wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Mobile Landscape */
@media (max-width: 767px) {
    html { font-size: 16px; }
    .contact_form { padding: 1.5rem; }
    .contact-form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Mobile Portrait */
@media (max-width: 479px) {
    html { font-size: 13px; }
    .contact_form { padding: 1rem; }
    .contact_head { font-size: 1.5rem; }
}
```

---

## 🎯 互動效果規格

### 輸入框聚焦
```css
.input_field:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(56, 152, 236, 0.1);
    transform: translateY(-1px);
}
```

### 平滑滾動
```css
html {
    scroll-behavior: smooth;
}

.contact-section {
    scroll-margin-top: 80px;
}
```

---

## 🏗️ 組件實現清單

### ✅ 已實現
- [x] `contact-us.astro` - 基礎框架存在

### ⏳ 需修改/新增
- [ ] 更新表單樣式符合 pixel-perfect 規格
- [ ] 新增欄位驗證 JavaScript
- [ ] 新增成功/錯誤訊息處理

---

## 📋 驗收標準

### 視覺保真度檢查
- [ ] Hero section 佈局與原網站一致
- [ ] 標題字體大小和顏色匹配
- [ ] 表單欄位排列與間距一致
- [ ] 按鈕樣式和 hover 效果匹配

### 功能檢查
- [ ] 表單欄位驗證正常
- [ ] Email 格式驗證正確
- [ ] 提交按鈕 loading 狀態顯示
- [ ] 成功/錯誤訊息顯示
- [ ] 表單重置功能正常

### 可訪問性檢查
- [ ] 所有輸入框有正確 label
- [ ] ARIA 屬性正確設置
- [ ] 鍵盤導航正常
- [ ] 錯誤訊息可被螢幕閱讀器讀取

---

## 📝 表單欄位規格

### 必填欄位驗證

| 欄位 ID | 名稱 | 類型 | 必填 | 驗證規則 |
|---------|------|------|------|----------|
| Name | 姓名 | text | ✅ | 2-256 字元，中文/英文 |
| Phone | 聯絡電話 | tel | ✅ | 數字、連字號、加號 |
| Email | Email | email | ✅ | 有效 Email 格式 |
| Message | 聯絡訊息 | textarea | ✅ | 10-5000 字元 |

### HTML5 驗證屬性示例
```html
<input
    type="text"
    id="Name"
    name="Name"
    required
    minlength="2"
    maxlength="256"
    pattern="[\u4e00-\u9fa5a-zA-Z\s]+"
    title="請輸入有效的姓名"
>

<input
    type="tel"
    id="Phone"
    name="Phone"
    required
    pattern="[0-9\-\s\+]+"
    title="請輸入有效的電話號碼"
>

<input
    type="email"
    id="Email"
    name="Email"
    required
    pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
    title="請輸入有效的 Email"
>

<textarea
    id="Message"
    name="Message"
    required
    minlength="10"
    maxlength="5000"
    title="請輸入至少 10 個字元的訊息"
></textarea>
```

---

*此文件由 UX Expert 創建，最後更新：2026-02-10*