docs: separate documentation and specs into initial commit

Establish baseline for project documentation including BMAD specs, PRD, and system architecture notes.
2026-02-11 11:49:49 +08:00
parent 8c87d71aa2
commit e9897388dc
34 changed files with 11920 additions and 8777 deletions
--- a/specs/001-users-pukpuk-dev/ux-story-1-8-contact-spec.md
+++ b/specs/001-users-pukpuk-dev/ux-story-1-8-contact-spec.md
@@ -0,0 +1,411 @@
+# 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*