feat(web): add product website with i18n and privacy policy

Static HTML product site for MeeYao with violet brand theme.
Supports EN/简中/繁體 via client-side i18n with localStorage persistence.
Includes index.html (landing page) and privacy.html (App Store compliance).
Hosted on meeyao.com, deployed to ~/deploy/web on EC2.

.trellis/tasks/04-30-product-website/prd.md

@@ -0,0 +1,150 @@
+# PRD: Product Website & Privacy Policy for App Store
+
+## 1. 需求概述
+
+为 MeeYao Divination (觅爻签问) iOS 应用创建一个产品技术网站，满足 Apple App Store 审核对 Support URL 和 Privacy Policy URL 的要求。
+
+**核心目标**:
+- 提供 App Store 审核所需的公开网站（Support URL + Privacy Policy URL）
+- 展示产品信息，建立可信度
+- 隐私政策页面完整、合规
+
+## 2. 背景与合规要求
+
+### App Store 审核要求
+- **Guideline 1.5**: app 和 Support URL 必须包含方便用户联系的方式
+- **Guideline 2.1**: 提交审核时所有 URL 必须完整可用，不接受占位内容或空网站
+- **Guideline 5.1**: 涉及个人数据收集的 app 必须提供隐私政策，且链接在 App Store Connect 中填写
+- **App Store Connect**: 自 2018 年 10 月起，所有新 app 和更新必须填写 Privacy Policy URL
+
+### 当前状态
+- 应用隐私政策文本已存在: `apps/assets/legal/{en,zh,zh_Hant}/privacy_policy.md`
+- 应用服务条款已存在: `apps/assets/legal/{en,zh,zh_Hant}/terms_of_service.md`
+- 关于我们已存在: `apps/assets/legal/{en,zh,zh_Hant}/about_us.md`
+- 但尚无公开可访问的网站托管这些内容
+
+## 3. 技术方案
+
+### 3.1 技术栈
+
+- **纯静态 HTML/CSS/JS** (无需构建工具或框架)
+- **Tailwind CSS** via CDN（快速样式开发）
+- **单页面应用**：两个路由通过 hash 路由或简单文件切换实现
+- 部署为静态文件，可托管在任何静态托管服务上
+
+### 3.2 文件结构
+
+```
+web/
+├── index.html              # 产品主页 (Support URL 指向此页面)
+├── privacy.html            # 隐私政策页 (Privacy Policy URL 指向此页面)
+├── assets/
+│   ├── logo.png            # 应用 Logo (从 apps/assets/images/logo.png 复制)
+│   ├── icon-1024.png       # App Store 图标 (从 iOS AppIcon 复制)
+│   ├── css/
+│   │   └── style.css       # 自定义样式覆盖
+│   └── js/
+│       └── main.js         # 交互逻辑（语言切换等）
+└── README.md               # 部署说明
+```
+
+### 3.3 路由设计
+
+| 路由 | 对应 App Store 字段 | 用途 |
+|------|---------------------|------|
+| `/` (index.html) | Support URL | 产品介绍、功能说明、联系方式 |
+| `/privacy.html` | Privacy Policy URL | 完整隐私政策文档 |
+
+## 4. 页面设计要求
+
+### 4.1 产品主页 (index.html)
+
+**定位**: Support URL 落地页，用户从 App Store 点击"支持"后到达此页。
+
+**内容板块**:
+1. **Hero 区域**: 应用名称、Logo、一句话描述
+2. **产品介绍**: MeeYao 是什么 - AI 辅助六爻文化参考工具
+3. **核心功能**: 手动起卦、自动起卦、AI 解读、历史记录
+4. **文化背景**: 六爻与易经文化简介
+5. **免责声明**: 娱乐和文化参考用途声明
+6. **联系方式**: 开发者邮箱 ann@xunmee.com
+7. **页脚**: 版权信息、隐私政策链接、服务条款链接
+
+**设计风格**:
+- 与 App 视觉语言一致：紫色品牌色系 (#673AB7, #9C27B0)
+- 安静、可信、温暖的视觉基调
+- 响应式设计，移动端优先
+- 无多余动画，保持简洁专业
+
+### 4.2 隐私政策页 (privacy.html)
+
+**定位**: Privacy Policy URL 落地页，满足 App Store Connect 要求。
+
+**内容**:
+- 直接使用已有的英文隐私政策文本（面向全球用户）
+- 结构化展示：信息收集、使用方式、数据存储、用户权利等
+- 包含最后更新日期
+- 顶部导航回到主页
+
+**设计风格**:
+- 干净的文档阅读体验
+- 清晰的标题层级
+- 与主页一致的配色和字体
+
+## 5. 素材来源
+
+| 素材 | 来源路径 | 目标路径 |
+|------|----------|----------|
+| 应用 Logo | `apps/assets/images/logo.png` | `web/assets/logo.png` |
+| App Store 图标 | `apps/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png` | `web/assets/icon-1024.png` |
+| 隐私政策文本 (EN) | `apps/assets/legal/en/privacy_policy.md` | 转为 HTML 内容 |
+| 隐私政策文本 (ZH) | `apps/assets/legal/zh/privacy_policy.md` | 参考用 |
+| 服务条款 (EN) | `apps/assets/legal/en/terms_of_service.md` | 参考用 |
+| 关于我们 (EN) | `apps/assets/legal/en/about_us.md` | 参考用 |
+
+## 6. 品牌配色 (来自 visual_design_language.md)
+
+- Primary Purple: `#673AB7`
+- Accent Purple: `#9C27B0`
+- Light Purple Surface: `#F0E6FF`
+- Background Gray: `#F8F8F8`
+- Text Dark: `#333333`
+- Text Medium: `#666666`
+- Text Light: `#999999`
+- Tag Gold: bg `#FFF8E1`, text `#FFB300`
+
+## 7. 实现步骤
+
+### Phase 1: 项目初始化
+- [ ] 创建 `web/` 目录结构
+- [ ] 复制素材资源（logo、图标）
+- [ ] 准备隐私政策 HTML 内容
+
+### Phase 2: 设计与实现
+- [ ] 使用 UI skill 设计主页布局
+- [ ] 实现 index.html 产品主页
+- [ ] 实现 privacy.html 隐私政策页
+- [ ] 实现响应式适配
+
+### Phase 3: 验证
+- [ ] 浏览器测试页面渲染
+- [ ] 移动端响应式验证
+- [ ] 验证所有链接可点击
+- [ ] 确认隐私政策内容完整
+
+## 8. 验收标准
+
+1. 两个 HTML 文件均可直接在浏览器中打开，无构建依赖
+2. 产品主页包含：应用名称、Logo、功能描述、免责声明、联系方式
+3. 隐私政策页包含：完整的英文隐私政策文本、更新日期、联系方式
+4. 移动端和桌面端均可正常浏览
+5. 配色与 App 视觉语言一致
+6. 所有图片资源本地可用（无外部依赖）
+
+## 9. 不做的事
+
+- 不做多语言切换（英文为主，满足 App Store 全球审核）
+- 不做后端服务、表单提交
+- 不做 SEO 优化（仅满足 App Store 审核）
+- 不做域名配置/部署（仅产出静态文件）
+- 不做服务条款独立页面（在主页底部简要链接即可）

.trellis/tasks/04-30-product-website/task.json

@@ -0,0 +1,44 @@
+{
+  "id": "04-30-product-website",
+  "name": "04-30-product-website",
+  "title": "Product Website & Privacy Policy for App Store",
+  "description": "",
+  "status": "planning",
+  "dev_type": null,
+  "scope": null,
+  "priority": "P2",
+  "creator": "zl-q",
+  "assignee": "zl-q",
+  "createdAt": "2026-04-30",
+  "completedAt": null,
+  "branch": null,
+  "base_branch": "dev",
+  "worktree_path": null,
+  "current_phase": 0,
+  "next_action": [
+    {
+      "phase": 1,
+      "action": "implement"
+    },
+    {
+      "phase": 2,
+      "action": "check"
+    },
+    {
+      "phase": 3,
+      "action": "finish"
+    },
+    {
+      "phase": 4,
+      "action": "create-pr"
+    }
+  ],
+  "commit": null,
+  "pr_url": null,
+  "subtasks": [],
+  "children": [],
+  "parent": null,
+  "relatedFiles": [],
+  "notes": "",
+  "meta": {}
+}

web/index.html

@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MeeYao - AI-Powered I Ching Cultural Reference</title>
+  <meta name="description" content="MeeYao is an AI-assisted cultural reference app focused on traditional Six-Line I Ching culture. Explore ancient wisdom with modern AI technology.">
+  <link rel="icon" type="image/png" href="assets/logo.png">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            brand: {
+              50: '#F5F3FF',
+              100: '#EDE9FE',
+              200: '#DDD6FE',
+              300: '#C4B5FD',
+              400: '#A78BFA',
+              500: '#8B5CF6',
+              600: '#7C3AED',
+              700: '#6D28D9',
+              800: '#5B21B6',
+              900: '#4C1D95',
+            },
+            surface: {
+              bg: '#FAFAF9',
+              card: '#FFFFFF',
+            },
+            text: {
+              dark: '#1C1917',
+              medium: '#57534E',
+              light: '#A8A29E',
+            }
+          }
+        }
+      }
+    }
+  </script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Serif:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    body {
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    }
+    .font-serif-display {
+      font-family: 'Noto Serif', 'Georgia', serif;
+    }
+    .hero-bg {
+      background-color: #4C1D95;
+      background-image:
+        radial-gradient(ellipse at 30% 60%, rgba(139,92,246,0.12) 0%, transparent 50%),
+        linear-gradient(160deg, #2E1065 0%, #4C1D95 50%, #5B21B6 100%);
+    }
+    .feature-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 30px rgba(124,58,237,0.08);
+    }
+    .feature-card {
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+    .lang-select {
+      appearance: none;
+      -webkit-appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 8px center;
+      padding: 5px 28px 5px 10px;
+      border: 1px solid #E2E8F0;
+      border-radius: 8px;
+      font-size: 13px;
+      font-weight: 500;
+      color: #475569;
+      background-color: #FFFFFF;
+      cursor: pointer;
+      transition: border-color 0.15s ease;
+    }
+    .lang-select:hover {
+      border-color: #7C3AED;
+    }
+    .lang-select:focus {
+      outline: none;
+      border-color: #7C3AED;
+      box-shadow: 0 0 0 2px rgba(124,58,237,0.15);
+    }
+  </style>
+</head>
+<body class="bg-surface-bg text-text-dark antialiased">
+
+  <!-- Navigation -->
+  <nav class="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100">
+    <div class="max-w-5xl mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <img src="assets/logo.png" alt="MeeYao" class="w-8 h-8 rounded-lg">
+        <span class="font-semibold text-lg text-brand-700">MeeYao</span>
+      </div>
+      <div class="flex items-center gap-2 md:gap-4 text-sm">
+        <a href="#features" class="hidden md:inline text-text-medium hover:text-brand-600 transition-colors" data-i18n="nav.features">Features</a>
+        <a href="#about" class="hidden md:inline text-text-medium hover:text-brand-600 transition-colors" data-i18n="nav.about">About</a>
+        <a href="privacy.html" class="hidden md:inline text-text-medium hover:text-brand-600 transition-colors" data-i18n="nav.privacy">Privacy Policy</a>
+        <select id="lang-select" class="lang-select" aria-label="Language">
+          <option value="en">English</option>
+          <option value="zh">简体中文</option>
+          <option value="zh_Hant">繁體中文</option>
+        </select>
+        <a href="mailto:ann@xunmee.com" class="bg-brand-600 text-white px-3 md:px-4 py-2 rounded-lg hover:bg-brand-700 transition-colors" data-i18n="nav.contact">Contact</a>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Hero -->
+  <section class="hero-bg pt-32 pb-20 md:pt-40 md:pb-28">
+    <div class="max-w-5xl mx-auto px-6 text-center">
+      <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm rounded-full px-4 py-1.5 mb-8 border border-white/10">
+        <span class="w-2 h-2 bg-violet-300 rounded-full"></span>
+        <span class="text-violet-200 text-sm" data-i18n="hero.badge">AI-Powered Cultural Wisdom</span>
+      </div>
+      <h1 class="font-serif-display text-4xl md:text-6xl font-bold text-white leading-tight mb-6" data-i18n-html="hero.title">
+        Ancient I Ching Wisdom<br>Meets Modern AI
+      </h1>
+      <p class="text-lg md:text-xl text-violet-200/80 max-w-2xl mx-auto mb-10 leading-relaxed" data-i18n="hero.subtitle">
+        MeeYao Divination brings the profound tradition of Six-Line hexagram culture to your fingertips. Explore life's questions through the lens of ancient Eastern philosophy, enhanced by AI-powered interpretation.
+      </p>
+    </div>
+  </section>
+
+  <!-- About -->
+  <section id="about" class="py-20 md:py-28">
+    <div class="max-w-5xl mx-auto px-6">
+      <div class="max-w-3xl mx-auto text-center">
+        <h2 class="font-serif-display text-3xl md:text-4xl font-bold text-text-dark mb-6" data-i18n="about.title">
+          What is MeeYao Divination?
+        </h2>
+        <p class="text-text-medium text-lg leading-relaxed mb-6" data-i18n="about.p1">
+          MeeYao Divination is an AI-assisted cultural reference app focused on traditional Six-Line culture and the timeless wisdom of the I Ching. Rooted in Eastern philosophical traditions, it helps users explore cultural connotations and gain diverse perspectives on everyday life.
+        </p>
+        <p class="text-text-medium text-lg leading-relaxed" data-i18n="about.p2">
+          By combining hexagram culture, traditional Five-Element theories, and GanZhi calendrical concepts, MeeYao offers a unique way to broaden your thinking and approach daily choices with clarity and a peaceful mindset.
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Features -->
+  <section id="features" class="py-20 md:py-28 bg-white">
+    <div class="max-w-5xl mx-auto px-6">
+      <div class="text-center mb-16">
+        <h2 class="font-serif-display text-3xl md:text-4xl font-bold text-text-dark mb-4" data-i18n="features.title">
+          Core Features
+        </h2>
+        <p class="text-text-medium text-lg" data-i18n="features.subtitle">Explore traditional divination culture with modern tools</p>
+      </div>
+      <div class="grid md:grid-cols-2 gap-6">
+        <div class="feature-card bg-surface-bg rounded-2xl p-8 border border-gray-100">
+          <div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center mb-5">
+            <svg class="w-6 h-6 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2m0 2a2 2 0 110 4m0-4a2 2 0 100 4m10-4V2m0 2a2 2 0 110 4m0-4a2 2 0 100 4M3 20h18M3 10h18M3 14h18"/>
+            </svg>
+          </div>
+          <h3 class="text-xl font-semibold text-text-dark mb-3" data-i18n="features.f1_title">Manual Coin Divination</h3>
+          <p class="text-text-medium leading-relaxed" data-i18n="features.f1_desc">
+            Perform traditional Six-Line hexagram casting with the classic coin method. Follow guided steps to build your hexagram authentically, preserving the ceremonial tradition.
+          </p>
+        </div>
+        <div class="feature-card bg-surface-bg rounded-2xl p-8 border border-gray-100">
+          <div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center mb-5">
+            <svg class="w-6 h-6 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+            </svg>
+          </div>
+          <h3 class="text-xl font-semibold text-text-dark mb-3" data-i18n="features.f2_title">Quick Auto Divination</h3>
+          <p class="text-text-medium leading-relaxed" data-i18n="features.f2_desc">
+            Generate a hexagram instantly when you need quick cultural reference. The app derives the hexagram based on traditional timing principles for a rapid interpretation.
+          </p>
+        </div>
+        <div class="feature-card bg-surface-bg rounded-2xl p-8 border border-gray-100">
+          <div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center mb-5">
+            <svg class="w-6 h-6 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
+            </svg>
+          </div>
+          <h3 class="text-xl font-semibold text-text-dark mb-3" data-i18n="features.f3_title">AI-Powered Interpretation</h3>
+          <p class="text-text-medium leading-relaxed" data-i18n="features.f3_desc">
+            Receive thoughtful, structured analysis combining traditional Six-Line theory with AI-generated cultural insights. Each reading includes sign level, focus points, and practical advice.
+          </p>
+        </div>
+        <div class="feature-card bg-surface-bg rounded-2xl p-8 border border-gray-100">
+          <div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center mb-5">
+            <svg class="w-6 h-6 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </div>
+          <h3 class="text-xl font-semibold text-text-dark mb-3" data-i18n="features.f4_title">Session History</h3>
+          <p class="text-text-medium leading-relaxed" data-i18n="features.f4_desc">
+            Review all your past divination sessions with complete hexagram details and AI interpretations. Follow up on previous readings for deeper exploration through conversational follow-up questions.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Cultural Context -->
+  <section class="py-20 md:py-28">
+    <div class="max-w-5xl mx-auto px-6">
+      <div class="max-w-3xl mx-auto text-center">
+        <h2 class="font-serif-display text-3xl md:text-4xl font-bold text-text-dark mb-6" data-i18n="culture.title">
+          Rooted in Tradition
+        </h2>
+        <p class="text-text-medium text-lg leading-relaxed mb-8" data-i18n="culture.desc">
+          Six-Line culture originates from the I Ching, one of the oldest Chinese classics. It embodies the traditional understanding of the connection between personal thoughts, timing, and natural changes. Through Five-Element theory and GanZhi calendrical systems, users can explore Eastern cultural wisdom in a modern context.
+        </p>
+        <div class="grid grid-cols-3 gap-6 md:gap-10 max-w-lg mx-auto">
+          <div class="text-center">
+            <div class="font-serif-display text-2xl font-bold text-brand-300 mb-1">&nbsp;</div>
+            <div class="font-serif-display text-2xl md:text-3xl font-bold text-brand-600 mb-1.5" data-i18n="culture.iching_title">I Ching</div>
+            <div class="text-sm text-text-light" data-i18n="culture.iching_label">Classic Foundation</div>
+          </div>
+          <div class="text-center">
+            <div class="font-serif-display text-2xl font-bold text-brand-300 mb-1">5</div>
+            <div class="font-serif-display text-2xl md:text-3xl font-bold text-brand-600 mb-1.5" data-i18n="culture.elements_title">Elements</div>
+            <div class="text-sm text-text-light" data-i18n="culture.elements_label">Wood Fire Earth Metal Water</div>
+          </div>
+          <div class="text-center">
+            <div class="font-serif-display text-2xl font-bold text-brand-300 mb-1">64</div>
+            <div class="font-serif-display text-2xl md:text-3xl font-bold text-brand-600 mb-1.5" data-i18n="culture.hexagrams_title">Hexagrams</div>
+            <div class="text-sm text-text-light" data-i18n="culture.hexagrams_label">Symbolic Patterns</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Disclaimer -->
+  <section class="py-16 bg-brand-50/60">
+    <div class="max-w-5xl mx-auto px-6">
+      <div class="max-w-3xl mx-auto">
+        <div class="bg-white rounded-2xl p-8 border border-brand-100">
+          <h3 class="font-semibold text-text-dark mb-3 flex items-center gap-2">
+            <svg class="w-5 h-5 text-brand-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+            <span data-i18n="disclaimer.title">Important Disclaimer</span>
+          </h3>
+          <div class="text-text-medium text-sm leading-relaxed" data-i18n-html="disclaimer.text">
+            All AI-generated content and cultural interpretation materials are for <strong>entertainment, cultural appreciation, and personal reference only</strong>. This app does not provide professional advice of any kind, including but not limited to business, finance, investment, medical, psychological, legal, career, or life decision-making guidance. All generated content shall not be regarded as factual basis or decision-making direction. Please approach traditional culture rationally.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Contact / Support -->
+  <section id="contact" class="py-20 md:py-28 bg-white">
+    <div class="max-w-5xl mx-auto px-6">
+      <div class="max-w-3xl mx-auto text-center">
+        <h2 class="font-serif-display text-3xl md:text-4xl font-bold text-text-dark mb-6" data-i18n="contact_section.title">
+          Get in Touch
+        </h2>
+        <p class="text-text-medium text-lg leading-relaxed mb-8" data-i18n="contact_section.desc">
+          Have questions, feedback, or need support? We'd love to hear from you.
+        </p>
+        <a href="mailto:ann@xunmee.com" class="inline-flex items-center gap-2 bg-brand-600 text-white px-8 py-4 rounded-xl text-lg font-medium hover:bg-brand-700 transition-colors">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+          </svg>
+          ann@xunmee.com
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="py-12 border-t border-gray-200">
+    <div class="max-w-5xl mx-auto px-6">
+      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
+        <div class="flex items-center gap-3">
+          <img src="assets/logo.png" alt="MeeYao" class="w-6 h-6 rounded">
+          <span class="font-medium text-text-dark">MeeYao</span>
+        </div>
+        <div class="flex items-center gap-6 text-sm text-text-medium">
+          <a href="privacy.html" class="hover:text-brand-600 transition-colors" data-i18n="footer.privacy">Privacy Policy</a>
+          <a href="mailto:ann@xunmee.com" class="hover:text-brand-600 transition-colors" data-i18n="footer.support">Support</a>
+        </div>
+      </div>
+      <div class="mt-8 pt-6 border-t border-gray-100 text-center text-sm text-text-light">
+        <p data-i18n="footer.developer">Developer: Ann Lee</p>
+        <p class="mt-2" data-i18n="footer.copyright">&copy; 2026 Ann Lee. All Rights Reserved.</p>
+      </div>
+    </div>
+  </footer>
+
+  <script src="assets/js/i18n.js"></script>
+</body>
+</html>

web/privacy.html

@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Privacy Policy - MeeYao Divination</title>
+  <meta name="description" content="Privacy Policy for MeeYao Divination App. Learn how we collect, use, and protect your personal information.">
+  <link rel="icon" type="image/png" href="assets/logo.png">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            brand: {
+              50: '#F5F3FF',
+              100: '#EDE9FE',
+              200: '#DDD6FE',
+              300: '#C4B5FD',
+              400: '#A78BFA',
+              500: '#8B5CF6',
+              600: '#7C3AED',
+              700: '#6D28D9',
+              800: '#5B21B6',
+              900: '#4C1D95',
+            },
+            surface: {
+              bg: '#FAFAF9',
+              card: '#FFFFFF',
+            },
+            text: {
+              dark: '#1C1917',
+              medium: '#57534E',
+              light: '#A8A29E',
+            }
+          }
+        }
+      }
+    }
+  </script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Serif:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    body {
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    }
+    .font-serif-display {
+      font-family: 'Noto Serif', 'Georgia', serif;
+    }
+    .lang-select {
+      appearance: none;
+      -webkit-appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 8px center;
+      padding: 5px 28px 5px 10px;
+      border: 1px solid #E2E8F0;
+      border-radius: 8px;
+      font-size: 13px;
+      font-weight: 500;
+      color: #475569;
+      background-color: #FFFFFF;
+      cursor: pointer;
+      transition: border-color 0.15s ease;
+    }
+    .lang-select:hover {
+      border-color: #7C3AED;
+    }
+    .lang-select:focus {
+      outline: none;
+      border-color: #7C3AED;
+      box-shadow: 0 0 0 2px rgba(124,58,237,0.15);
+    }
+    .policy-content h2 {
+      font-family: 'Noto Serif', 'Georgia', serif;
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: #333333;
+      margin-top: 2.5rem;
+      margin-bottom: 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid #E5E7EB;
+    }
+    .policy-content h3 {
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: #333333;
+      margin-top: 1.5rem;
+      margin-bottom: 0.75rem;
+    }
+    .policy-content p {
+      margin-bottom: 1rem;
+      line-height: 1.75;
+    }
+    .policy-content ul {
+      list-style-type: disc;
+      padding-left: 1.5rem;
+      margin-bottom: 1rem;
+    }
+    .policy-content ul li {
+      margin-bottom: 0.5rem;
+      line-height: 1.75;
+    }
+    .policy-content ol {
+      list-style-type: decimal;
+      padding-left: 1.5rem;
+      margin-bottom: 1rem;
+    }
+    .policy-content ol li {
+      margin-bottom: 0.5rem;
+      line-height: 1.75;
+    }
+    .policy-content strong {
+      font-weight: 600;
+      color: #333333;
+    }
+    .policy-content hr {
+      border: none;
+      border-top: 1px solid #E5E7EB;
+      margin: 2rem 0;
+    }
+    .policy-content a {
+      color: #7C3AED;
+      text-decoration: underline;
+    }
+    .policy-content a:hover {
+      color: #6D28D9;
+    }
+  </style>
+</head>
+<body class="bg-surface-bg text-text-dark antialiased">
+
+  <!-- Navigation -->
+  <nav class="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100">
+    <div class="max-w-4xl mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <img src="assets/logo.png" alt="MeeYao" class="w-8 h-8 rounded-lg">
+        <span class="font-semibold text-lg text-brand-700">MeeYao</span>
+      </div>
+      <div class="flex items-center gap-2 md:gap-4 text-sm">
+        <a href="index.html" class="text-text-medium hover:text-brand-600 transition-colors" data-i18n="nav.home">Home</a>
+        <select id="lang-select" class="lang-select" aria-label="Language">
+          <option value="en">English</option>
+          <option value="zh">简体中文</option>
+          <option value="zh_Hant">繁體中文</option>
+        </select>
+        <a href="mailto:ann@xunmee.com" class="bg-brand-600 text-white px-3 md:px-4 py-2 rounded-lg hover:bg-brand-700 transition-colors" data-i18n="nav.contact">Contact</a>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Header -->
+  <section class="pt-28 pb-12 md:pt-32 md:pb-16">
+    <div class="max-w-4xl mx-auto px-6 text-center">
+      <h1 class="font-serif-display text-3xl md:text-4xl font-bold text-text-dark mb-4" data-i18n="privacy.title">Privacy Policy</h1>
+      <p class="text-text-medium"><span data-i18n="privacy.updated">Last Updated: April 27, 2026</span> &nbsp;|&nbsp; <span data-i18n="privacy.effective">Effective Date: April 27, 2026</span></p>
+    </div>
+  </section>
+
+  <!-- Policy Content -->
+  <section class="pb-20 md:pb-28">
+    <div class="max-w-4xl mx-auto px-6">
+      <div class="bg-white rounded-2xl p-8 md:p-12 shadow-sm border border-gray-100">
+        <div id="privacy-content" class="policy-content text-text-medium">
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="py-12 border-t border-gray-200 bg-white">
+    <div class="max-w-4xl mx-auto px-6">
+      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
+        <div class="flex items-center gap-3">
+          <img src="assets/logo.png" alt="MeeYao" class="w-6 h-6 rounded">
+          <span class="font-medium text-text-dark">MeeYao</span>
+        </div>
+        <div class="flex items-center gap-6 text-sm text-text-medium">
+          <a href="index.html" class="hover:text-brand-600 transition-colors" data-i18n="footer.support">Home</a>
+          <a href="mailto:ann@xunmee.com" class="hover:text-brand-600 transition-colors" data-i18n="nav.contact">Contact</a>
+        </div>
+      </div>
+      <div class="mt-8 pt-6 border-t border-gray-100 text-center text-sm text-text-light">
+        <p data-i18n="footer.developer">Developer: Ann Lee</p>
+        <p class="mt-2" data-i18n="footer.copyright">&copy; 2026 Ann Lee. All Rights Reserved.</p>
+      </div>
+    </div>
+  </footer>
+
+  <script src="assets/js/i18n.js"></script>
+</body>
+</html>