feat: enhance user experience with onboarding updates

- Improved onboarding flow by adding user guidance for mode selection
- Updated homepage behavior to better reflect user preferences
- Refined UI elements for a more intuitive navigation experience

prototypes/PREMIUM-README.md

@@ -0,0 +1,149 @@
+# 戒烟助手 Pro - 高级UI设计
+
+## 🎨 设计理念
+
+这是一个采用苹果设计语言的高级UI版本，具有以下特点：
+
+### 核心设计元素
+
+1. **深色主题** - 纯黑背景 (#000) 营造高端感
+2. **毛玻璃效果** - backdrop-filter 实现iOS风格的半透明效果
+3. **精致阴影** - 多层阴影和发光效果
+4. **流畅动画** - cubic-bezier 缓动函数
+5. **渐变色彩** - 高品质的渐变背景和文字
+6. **圆角设计** - 大圆角 (16-24px) 更现代
+
+### 配色方案
+
+**主色调：**
+- 翡翠绿渐变: `#00D4AA → #00B894`
+- 荧光绿: `#00F5D4` (强调色)
+
+**辅助色：**
+- 靛蓝: `#4F46E5 → #6366F1`
+- 琥珀: `#FBBF24 → #F59E0B`
+- 红色: `#FF6B6B → #EE5A6F`
+
+**背景：**
+- 纯黑: `#000`
+- 深灰: `#0a0a0a`
+- 半透明白: `rgba(255,255,255,0.05-0.15)`
+
+## 💎 高级特性
+
+### 1. 毛玻璃导航栏
+```css
+backdrop-filter: blur(40px) saturate(180%);
+background: rgba(28, 28, 30, 0.8);
+```
+
+### 2. 高级卡片
+- 半透明背景
+- 双层边框（外边框 + 内发光）
+- 多层阴影
+- 点击缩放反馈
+
+### 3. 渐变文字
+```css
+background: linear-gradient(135deg, #00D4AA 0%, #00F5D4 100%);
+-webkit-background-clip: text;
+-webkit-text-fill-color: transparent;
+```
+
+### 4. 背景装饰
+- 模糊的径向渐变光晕
+- 动态定位营造空间感
+
+### 5. 按钮交互
+- 悬停光扫效果
+- 点击缩放反馈
+- 发光阴影
+
+## 📱 页面特色
+
+### 模式选择页
+- 大尺寸emoji图标
+- 背景光晕装饰
+- 标签式特性展示
+
+### 首页（戒烟打卡）
+- 72px超大数字显示
+- 渐变文字效果
+- 分栏统计数据
+
+### 首页（记录减量）
+- 等宽字体计时器
+- 双色统计卡片
+- 双按钮布局
+
+### 统计页
+- 渐变柱状图
+- 发光效果
+- 网格布局成就卡
+
+### AI助手页
+- 进度条发光效果
+- 任务完成状态
+- 左边框强调
+
+### 记录页
+- 彩色左边框
+- 半透明按钮
+- 时间轴布局
+
+### 个人中心
+- 大头像设计
+- 清晰的菜单层级
+- 右箭头导航
+
+## 🎯 与普通版对比
+
+| 特性 | 普通版 | 高级版 |
+|------|--------|--------|
+| 背景 | 浅色渐变 | 纯黑 + 光晕 |
+| 卡片 | 白色实心 | 毛玻璃半透明 |
+| 阴影 | 简单阴影 | 多层阴影 + 发光 |
+| 字体 | 常规粗细 | 更粗 (700-800) |
+| 圆角 | 12px | 16-24px |
+| 动画 | 简单过渡 | cubic-bezier |
+| 配色 | 明亮 | 深色 + 霓虹 |
+
+## 💰 高级感体现
+
+1. **视觉层次** - 多层次的透明度和阴影
+2. **精致细节** - 字间距、行高、边框精心调整
+3. **流畅动画** - 所有交互都有平滑过渡
+4. **专业配色** - 深色主题 + 霓虹强调色
+5. **空间感** - 背景光晕营造深度
+6. **品质感** - 毛玻璃、发光、渐变等高级效果
+
+## 🚀 技术实现
+
+### 关键CSS技术
+- `backdrop-filter` - 毛玻璃效果
+- `filter: blur()` - 背景光晕
+- `box-shadow` - 多层阴影
+- `linear-gradient` - 渐变背景
+- `cubic-bezier` - 自定义缓动
+- `-webkit-background-clip` - 渐变文字
+
+### 性能优化
+- 使用 `transform` 而非 `position` 做动画
+- 合理使用 `will-change`
+- 避免过度使用 `backdrop-filter`
+
+## 📝 使用说明
+
+直接在浏览器中打开 `ui-premium.html` 即可查看效果。
+
+建议使用：
+- Chrome/Safari (完整支持 backdrop-filter)
+- 移动设备或开发者工具的移动模式
+- 最大宽度 390px (iPhone 14 Pro)
+
+## 🎨 设计灵感来源
+
+- Apple iOS 设计语言
+- Apple Watch 健康应用
+- 高端订阅类产品 (Calm, Headspace)
+- 现代深色主题设计趋势

prototypes/README.md

@@ -0,0 +1,147 @@
+# 戒烟助手 UI 原型设计
+
+## 📱 原型文件
+
+- **ui-redesign.html** - 完整的移动端UI原型
+
+## 🎨 设计特点
+
+### 双模式设计
+
+1. **戒烟打卡模式**
+   - 适合已决定戒烟的用户
+   - 简单直接的天数计时
+   - 每日打卡激励
+   - 强调成就感
+
+2. **记录减量模式**
+   - 适合逐步减少吸烟的用户
+   - 详细记录每次抽烟
+   - AI 智能分析和建议
+   - 科学递减计划
+
+### 页面结构
+
+#### 1. 模式选择页
+- 首次进入或切换模式时显示
+- 清晰展示两种模式的特点和适用场景
+- 可在个人中心随时切换
+
+#### 2. 首页（双模式）
+**戒烟打卡模式首页：**
+- 戒烟天数大卡片（天/小时/分钟）
+- 今日打卡按钮
+- 健康收益展示（节省金额、未吸烟支数）
+- 激励语
+
+**记录减量模式首页：**
+- AI 智能提示卡片
+- 距上次抽烟计时器
+- 下次建议时间
+- 今日统计（已抽/已忍住）
+- 快速记录按钮
+
+#### 3. 统计页
+- 周/月/年时间范围切换
+- 吸烟趋势柱状图
+- 日均吸烟量和变化百分比
+- 健康收益（节省金额、肺功能恢复）
+- 成就展示（连续记录、已拒绝次数）
+
+#### 4. AI 助手页
+- 30天递减计划进度
+- 每日 AI 分析（昨日表现 + 今日建议）
+- 今日任务清单
+
+#### 5. 历史记录页
+- 筛选标签（全部/已抽烟/已忍住）
+- 按日期分组展示
+- 记录详情（时间、数量、等级、备注、间隔）
+- 编辑和删除功能
+
+#### 6. 个人中心页
+- 用户信息展示
+- 模式切换入口
+- 功能菜单（目标设定、提醒设置、数据导出、基础设置）
+- 帮助和关于
+
+## 🎨 设计规范
+
+### 配色方案
+- **主色调**: #10B981 (翡翠绿) - 代表健康和成长
+- **成功色**: #10B981 (绿色) - 忍住、正向激励
+- **危险色**: #EF4444 (红色) - 抽烟记录
+- **信息色**: #4F46E5 (靛蓝) - AI 助手、编辑
+- **警告色**: #D97706 (琥珀) - 提示、警告
+
+### 渐变背景
+- 首页: `linear-gradient(180deg, #D1FAE5 0%, #F0FDF4 50%, #FFFFFF 100%)`
+- 模式选择: `linear-gradient(135deg, #D1FAE5 0%, #F0FDF4 100%)`
+
+### 字体规范
+- 标题: 24px, 700
+- 副标题: 16-18px, 600
+- 正文: 13-15px, 400
+- 辅助文字: 11-12px, 400
+
+### 圆角规范
+- 卡片: 12px
+- 按钮: 8-12px
+- 标签: 12px
+- 头像: 50%
+
+### 间距规范
+- 页面边距: 16-20px
+- 卡片间距: 12-16px
+- 元素内边距: 12-16px
+
+## 📱 交互说明
+
+### 页面切换
+- 点击底部导航切换主要页面
+- 首页根据当前模式自动显示对应内容
+- 模式选择页隐藏底部导航
+
+### 按钮交互
+- 所有按钮有点击缩放效果
+- 主要操作使用主色调
+- 危险操作使用红色
+
+### 动画效果
+- 卡片淡入动画
+- 按钮点击反馈
+- 页面切换平滑过渡
+
+## 🚀 使用方法
+
+1. 在浏览器中打开 `ui-redesign.html`
+2. 首次进入显示模式选择页
+3. 选择戒烟模式后进入对应首页
+4. 使用底部导航切换不同页面
+5. 在个人中心可以切换模式
+
+## 💡 设计亮点
+
+1. **双模式灵活切换** - 满足不同用户需求
+2. **清晰的视觉层级** - 重要信息突出显示
+3. **友好的配色** - 绿色主调传递健康积极的感觉
+4. **简洁的交互** - 减少操作步骤，提升效率
+5. **数据可视化** - 图表直观展示趋势
+6. **AI 智能辅助** - 个性化建议和任务
+
+## 📝 后续开发建议
+
+1. 使用 uni-app 框架实现跨平台
+2. 集成真实的图表库（如 uCharts）
+3. 实现记录弹框组件
+4. 对接后端 API
+5. 添加更多动画效果
+6. 实现数据持久化
+7. 添加分享功能
+8. 完善通知提醒
+
+## 🔗 相关文档
+
+- [产品需求文档](../docs/PRD.md)
+- [双模式改造方案](../docs/smt双模式改造方案.md)
+- [技术方案](../docs/TECH.md)

prototypes/ui-premium.html

@@ -0,0 +1,791 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>戒烟助手 Pro - 高级版</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', sans-serif;
+      background: #000;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+    }
+
+    .prototype-container {
+      max-width: 390px;
+      margin: 0 auto;
+      background: #000;
+      min-height: 100vh;
+      position: relative;
+      box-shadow: 0 0 60px rgba(0,0,0,0.5);
+    }
+
+    /* 毛玻璃导航栏 */
+    .nav-tabs {
+      position: fixed;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      max-width: 390px;
+      width: 100%;
+      display: flex;
+      background: rgba(28, 28, 30, 0.8);
+      backdrop-filter: blur(40px) saturate(180%);
+      -webkit-backdrop-filter: blur(40px) saturate(180%);
+      border-top: 0.5px solid rgba(255,255,255,0.1);
+      padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
+      z-index: 100;
+    }
+
+    .nav-tab {
+      flex: 1;
+      text-align: center;
+      padding: 6px 0;
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+    }
+
+    .nav-tab.active .nav-icon {
+      transform: scale(1.1);
+      filter: brightness(1.2);
+    }
+
+    .nav-icon {
+      font-size: 26px;
+      margin-bottom: 2px;
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      filter: grayscale(100%);
+    }
+
+    .nav-tab.active .nav-icon {
+      filter: grayscale(0%);
+    }
+
+    .nav-label {
+      font-size: 10px;
+      color: rgba(255,255,255,0.5);
+      font-weight: 500;
+      letter-spacing: 0.3px;
+      transition: color 0.3s;
+    }
+
+    .nav-tab.active .nav-label {
+      color: rgba(255,255,255,0.95);
+    }
+
+    /* 页面容器 */
+    .page {
+      display: none;
+      padding-bottom: 90px;
+      min-height: 100vh;
+    }
+
+    .page.active {
+      display: block;
+      animation: pageSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    @keyframes pageSlideIn {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* 高级卡片 */
+    .premium-card {
+      background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
+      backdrop-filter: blur(20px) saturate(180%);
+      -webkit-backdrop-filter: blur(20px) saturate(180%);
+      border-radius: 24px;
+      padding: 24px;
+      margin: 16px 20px;
+      border: 1px solid rgba(255,255,255,0.1);
+      box-shadow: 0 8px 32px rgba(0,0,0,0.3),
+                  inset 0 1px 0 rgba(255,255,255,0.1);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .premium-card:active {
+      transform: scale(0.98);
+    }
+
+    /* 高级按钮 */
+    .premium-btn {
+      padding: 16px 32px;
+      border-radius: 16px;
+      border: none;
+      font-size: 17px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      letter-spacing: 0.3px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .premium-btn::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+      transition: left 0.5s;
+    }
+
+    .premium-btn:hover::before {
+      left: 100%;
+    }
+
+    .btn-primary {
+      background: linear-gradient(135deg, #00D4AA 0%, #00B894 100%);
+      color: white;
+      box-shadow: 0 8px 24px rgba(0, 212, 170, 0.4);
+    }
+
+    .btn-primary:active {
+      transform: scale(0.96);
+      box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3);
+    }
+
+    .btn-secondary {
+      background: rgba(255,255,255,0.1);
+      color: rgba(255,255,255,0.9);
+      border: 1px solid rgba(255,255,255,0.2);
+    }
+
+    .btn-danger {
+      background: linear-gradient(135deg, #FF6B6B 0%, #EE5A6F 100%);
+      color: white;
+      box-shadow: 0 8px 24px rgba(255, 107, 107, 0.4);
+    }
+
+    /* 文字样式 */
+    .text-primary {
+      color: rgba(255,255,255,0.95);
+    }
+
+    .text-secondary {
+      color: rgba(255,255,255,0.6);
+    }
+
+    .text-tertiary {
+      color: rgba(255,255,255,0.4);
+    }
+
+    /* 渐变文字 */
+    .gradient-text {
+      background: linear-gradient(135deg, #00D4AA 0%, #00F5D4 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+  </style>
+</head>
+<body>
+  <div class="prototype-container">
+    <!-- 模式选择页 -->
+    <div id="page-mode-select" class="page active">
+      <div style="background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); min-height: 100vh; padding: 60px 20px 40px; position: relative; overflow: hidden;">
+        <!-- 背景装饰 -->
+        <div style="position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(0,212,170,0.15) 0%, transparent 70%); border-radius: 50%; filter: blur(60px);"></div>
+        <div style="position: absolute; bottom: -150px; left: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,245,212,0.1) 0%, transparent 70%); border-radius: 50%; filter: blur(80px);"></div>
+
+        <div style="text-align: center; margin-top: 40px; position: relative; z-index: 1;">
+          <div style="font-size: 56px; margin-bottom: 16px; filter: drop-shadow(0 4px 12px rgba(0,212,170,0.3));">🚭</div>
+          <h1 style="font-size: 36px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -0.5px;">选择你的戒烟方式</h1>
+          <p style="color: rgba(255,255,255,0.6); font-size: 16px; font-weight: 500;">科学方法，个性化定制</p>
+        </div>
+
+        <div style="margin-top: 80px; position: relative; z-index: 1;">
+          <!-- 戒烟打卡模式 -->
+          <div class="premium-card" style="margin-bottom: 24px; cursor: pointer;" onclick="selectMode('quit')">
+            <div style="display: flex; align-items: flex-start;">
+              <div style="font-size: 48px; margin-right: 20px; filter: drop-shadow(0 2px 8px rgba(0,212,170,0.3));">✅</div>
+              <div style="flex: 1;">
+                <h3 style="font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -0.3px;">戒烟打卡模式</h3>
+                <p style="font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 16px; font-weight: 500;">
+                  适合已经决定戒烟的你<br>
+                  记录戒烟天数，每天打卡激励
+                </p>
+                <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+                  <span style="background: rgba(79, 70, 229, 0.2); color: #A5B4FC; padding: 6px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid rgba(79, 70, 229, 0.3);">简单直接</span>
+                  <span style="background: rgba(79, 70, 229, 0.2); color: #A5B4FC; padding: 6px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid rgba(79, 70, 229, 0.3);">每日激励</span>
+                  <span style="background: rgba(79, 70, 229, 0.2); color: #A5B4FC; padding: 6px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid rgba(79, 70, 229, 0.3);">成就感强</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 记录减量模式 -->
+          <div class="premium-card" style="cursor: pointer;" onclick="selectMode('record')">
+            <div style="display: flex; align-items: flex-start;">
+              <div style="font-size: 48px; margin-right: 20px; filter: drop-shadow(0 2px 8px rgba(0,212,170,0.3));">📊</div>
+              <div style="flex: 1;">
+                <h3 style="font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -0.3px;">记录减量模式</h3>
+                <p style="font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 16px; font-weight: 500;">
+                  适合想逐步减少吸烟的你<br>
+                  记录每次抽烟，AI 帮你制定递减计划
+                </p>
+                <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+                  <span style="background: rgba(0, 212, 170, 0.2); color: #6EE7B7; padding: 6px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid rgba(0, 212, 170, 0.3);">科学递减</span>
+                  <span style="background: rgba(0, 212, 170, 0.2); color: #6EE7B7; padding: 6px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid rgba(0, 212, 170, 0.3);">数据分析</span>
+                  <span style="background: rgba(0, 212, 170, 0.2); color: #6EE7B7; padding: 6px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid rgba(0, 212, 170, 0.3);">AI 指导</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div style="margin-top: 60px; text-align: center; position: relative; z-index: 1;">
+          <p style="font-size: 13px; color: rgba(255,255,255,0.4); font-weight: 500;">💡 选择后可在个人中心随时切换</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 个人中心页 -->
+    <div id="page-profile" class="page">
+      <div style="background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); min-height: 100vh; position: relative; overflow: hidden;">
+        <div style="position: absolute; top: 0; right: -80px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(0,212,170,0.1) 0%, transparent 70%); border-radius: 50%; filter: blur(70px);"></div>
+
+        <!-- 用户信息 -->
+        <div style="padding: 60px 20px 32px; position: relative; z-index: 1;">
+          <div style="display: flex; align-items: center;">
+            <div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #00D4AA, #00B894); display: flex; align-items: center; justify-content: center; font-size: 36px; color: white; margin-right: 20px; box-shadow: 0 8px 24px rgba(0,212,170,0.3);">
+              👤
+            </div>
+            <div>
+              <div style="font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.5px;">张三</div>
+              <div style="font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 6px; font-weight: 600;">已坚持 15 天</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 模式切换 -->
+        <div class="premium-card">
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <div>
+              <div style="font-size: 17px; font-weight: 700; color: #fff;">当前模式</div>
+              <div style="font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 6px; font-weight: 500;">戒烟打卡模式</div>
+            </div>
+            <button class="premium-btn btn-secondary" style="padding: 10px 20px; font-size: 14px; border-radius: 12px;" onclick="loadPage('mode-select')">
+              切换模式
+            </button>
+          </div>
+        </div>
+
+        <!-- 菜单列表 -->
+        <div class="premium-card">
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05);">
+            <div style="display: flex; align-items: center;">
+              <div style="font-size: 24px; margin-right: 16px;">🎯</div>
+              <div style="font-size: 16px; color: #fff; font-weight: 600;">目标设定</div>
+            </div>
+            <div style="color: rgba(255,255,255,0.3); font-size: 20px;">›</div>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05);">
+            <div style="display: flex; align-items: center;">
+              <div style="font-size: 24px; margin-right: 16px;">🔔</div>
+              <div style="font-size: 16px; color: #fff; font-weight: 600;">提醒设置</div>
+            </div>
+            <div style="color: rgba(255,255,255,0.3); font-size: 20px;">›</div>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05);">
+            <div style="display: flex; align-items: center;">
+              <div style="font-size: 24px; margin-right: 16px;">📊</div>
+              <div style="font-size: 16px; color: #fff; font-weight: 600;">数据导出</div>
+            </div>
+            <div style="color: rgba(255,255,255,0.3); font-size: 20px;">›</div>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 0;">
+            <div style="display: flex; align-items: center;">
+              <div style="font-size: 24px; margin-right: 16px;">⚙️</div>
+              <div style="font-size: 16px; color: #fff; font-weight: 600;">基础设置</div>
+            </div>
+            <div style="color: rgba(255,255,255,0.3); font-size: 20px;">›</div>
+          </div>
+        </div>
+
+        <!-- 关于 -->
+        <div class="premium-card">
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05);">
+            <div style="display: flex; align-items: center;">
+              <div style="font-size: 24px; margin-right: 16px;">❓</div>
+              <div style="font-size: 16px; color: #fff; font-weight: 600;">使用帮助</div>
+            </div>
+            <div style="color: rgba(255,255,255,0.3); font-size: 20px;">›</div>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 0;">
+            <div style="display: flex; align-items: center;">
+              <div style="font-size: 24px; margin-right: 16px;">ℹ️</div>
+              <div style="font-size: 16px; color: #fff; font-weight: 600;">关于我们</div>
+            </div>
+            <div style="display: flex; align-items: center; gap: 12px;">
+              <div style="font-size: 13px; color: rgba(255,255,255,0.4); font-weight: 600;">v1.0.0</div>
+              <div style="color: rgba(255,255,255,0.3); font-size: 20px;">›</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 记录页 -->
+    <div id="page-logs" class="page">
+      <div style="background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); min-height: 100vh; position: relative; overflow: hidden;">
+        <div style="padding: 60px 20px 20px;">
+          <div style="font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -0.5px;">历史记录</div>
+        </div>
+
+        <!-- 筛选标签 -->
+        <div style="padding: 0 20px; margin-top: 24px;">
+          <div style="display: flex; gap: 10px; background: rgba(255,255,255,0.05); padding: 4px; border-radius: 14px; backdrop-filter: blur(20px);">
+            <button class="premium-btn btn-primary" style="padding: 8px 20px; font-size: 14px; border-radius: 10px;">全部</button>
+            <button class="premium-btn btn-secondary" style="padding: 8px 20px; font-size: 14px; border-radius: 10px;">已抽烟</button>
+            <button class="premium-btn btn-secondary" style="padding: 8px 20px; font-size: 14px; border-radius: 10px;">已忍住</button>
+          </div>
+        </div>
+
+        <!-- 今天 -->
+        <div style="padding: 24px 20px 12px;">
+          <div style="font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.5px;">今天 3月24日</div>
+        </div>
+
+        <div class="premium-card" style="margin-top: 8px; border-left: 3px solid #00D4AA;">
+          <div style="display: flex; justify-content: space-between; align-items: start;">
+            <div style="flex: 1;">
+              <div style="display: flex; align-items: center; margin-bottom: 8px;">
+                <div style="font-size: 22px; margin-right: 12px;">💪</div>
+                <div style="font-size: 17px; font-weight: 700; color: #00D4AA;">想抽忍住了</div>
+              </div>
+              <div style="font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 500;">14:30</div>
+              <div style="font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 6px; font-weight: 500;">距上次 2小时15分</div>
+            </div>
+            <div style="display: flex; gap: 8px;">
+              <button style="padding: 6px 14px; background: rgba(79,70,229,0.2); color: #A5B4FC; border: 1px solid rgba(79,70,229,0.3); border-radius: 10px; font-size: 13px; cursor: pointer; font-weight: 600;">编辑</button>
+              <button style="padding: 6px 14px; background: rgba(255,107,107,0.2); color: #FCA5A5; border: 1px solid rgba(255,107,107,0.3); border-radius: 10px; font-size: 13px; cursor: pointer; font-weight: 600;">删除</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="premium-card" style="margin-top: 12px; border-left: 3px solid #FF6B6B;">
+          <div style="display: flex; justify-content: space-between; align-items: start;">
+            <div style="flex: 1;">
+              <div style="display: flex; align-items: center; margin-bottom: 8px;">
+                <div style="font-size: 22px; margin-right: 12px;">🚬</div>
+                <div style="font-size: 17px; font-weight: 700; color: #FF6B6B;">记录抽烟</div>
+              </div>
+              <div style="font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 500;">12:15 · 3支 · 等级2</div>
+              <div style="font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 6px; font-weight: 500;">压力大</div>
+              <div style="font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 4px; font-weight: 500;">距上次 1小时30分</div>
+            </div>
+            <div style="display: flex; gap: 8px;">
+              <button style="padding: 6px 14px; background: rgba(79,70,229,0.2); color: #A5B4FC; border: 1px solid rgba(79,70,229,0.3); border-radius: 10px; font-size: 13px; cursor: pointer; font-weight: 600;">编辑</button>
+              <button style="padding: 6px 14px; background: rgba(255,107,107,0.2); color: #FCA5A5; border: 1px solid rgba(255,107,107,0.3); border-radius: 10px; font-size: 13px; cursor: pointer; font-weight: 600;">删除</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 昨天 -->
+        <div style="padding: 24px 20px 12px;">
+          <div style="font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.5px;">昨天 3月23日</div>
+        </div>
+
+        <div class="premium-card" style="margin-top: 8px; border-left: 3px solid #FF6B6B;">
+          <div style="display: flex; justify-content: space-between; align-items: start;">
+            <div style="flex: 1;">
+              <div style="display: flex; align-items: center; margin-bottom: 8px;">
+                <div style="font-size: 22px; margin-right: 12px;">🚬</div>
+                <div style="font-size: 17px; font-weight: 700; color: #FF6B6B;">记录抽烟</div>
+              </div>
+              <div style="font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 500;">21:45 · 2支 · 等级1</div>
+              <div style="font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 6px; font-weight: 500;">饭后习惯</div>
+            </div>
+            <div style="display: flex; gap: 8px;">
+              <button style="padding: 6px 14px; background: rgba(79,70,229,0.2); color: #A5B4FC; border: 1px solid rgba(79,70,229,0.3); border-radius: 10px; font-size: 13px; cursor: pointer; font-weight: 600;">编辑</button>
+              <button style="padding: 6px 14px; background: rgba(255,107,107,0.2); color: #FCA5A5; border: 1px solid rgba(255,107,107,0.3); border-radius: 10px; font-size: 13px; cursor: pointer; font-weight: 600;">删除</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- AI助手页 -->
+    <div id="page-ai" class="page">
+      <div style="background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); min-height: 100vh; position: relative; overflow: hidden;">
+        <div style="position: absolute; top: 150px; left: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(79,70,229,0.1) 0%, transparent 70%); border-radius: 50%; filter: blur(70px);"></div>
+
+        <div style="padding: 60px 20px 20px;">
+          <div style="font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -0.5px;">AI 戒烟助手</div>
+        </div>
+
+        <!-- 减量计划 -->
+        <div class="premium-card" style="margin-top: 24px; background: linear-gradient(135deg, rgba(79,70,229,0.15) 0%, rgba(99,102,241,0.1) 100%); border: 1px solid rgba(79,70,229,0.3);">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+            <div style="font-size: 20px; font-weight: 700; color: #fff;">30天递减计划</div>
+            <div style="font-size: 13px; color: #818CF8; font-weight: 700; background: rgba(79,70,229,0.2); padding: 6px 12px; border-radius: 8px;">第15天</div>
+          </div>
+          <div style="font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 16px; font-weight: 600;">阶段2 - 减量期</div>
+          <div style="background: rgba(0,0,0,0.3); height: 10px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1);">
+            <div style="width: 50%; height: 100%; background: linear-gradient(90deg, #818CF8 0%, #6366F1 100%); box-shadow: 0 0 12px rgba(129,140,248,0.5);"></div>
+          </div>
+          <div style="margin-top: 16px; font-size: 13px; color: #A5B4FC; font-weight: 600;">🎯 进度 50% · 继续加油！</div>
+        </div>
+
+        <!-- AI 每日分析 -->
+        <div class="premium-card">
+          <div style="display: flex; align-items: center; margin-bottom: 20px;">
+            <div style="font-size: 28px; margin-right: 12px;">🤖</div>
+            <div style="font-size: 20px; font-weight: 700; color: #fff;">今日 AI 分析</div>
+          </div>
+          <div style="background: rgba(0,0,0,0.3); padding: 20px; border-radius: 16px; border-left: 3px solid #00D4AA;">
+            <div style="font-size: 15px; color: rgba(255,255,255,0.9); line-height: 1.7; font-weight: 500;">
+              <strong style="color: #00D4AA;">昨日表现：</strong>你昨天成功控制在5支以内，比目标少了1支，做得很棒！<br><br>
+              <strong style="color: #00D4AA;">今日建议：</strong>今天目标4支。建议在下午3点和晚上8点这两个高峰时段，用喝水或散步替代。
+            </div>
+          </div>
+        </div>
+
+        <!-- 今日任务 -->
+        <div class="premium-card">
+          <div style="font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 20px;">今日任务清单</div>
+          <div style="display: flex; flex-direction: column; gap: 12px;">
+            <div style="display: flex; align-items: center; padding: 16px; background: rgba(0,212,170,0.1); border-radius: 14px; border: 1px solid rgba(0,212,170,0.2);">
+              <div style="font-size: 24px; margin-right: 16px;">✅</div>
+              <div style="flex: 1;">
+                <div style="font-size: 15px; color: rgba(255,255,255,0.5); text-decoration: line-through; font-weight: 500;">早起喝一杯温水</div>
+              </div>
+            </div>
+            <div style="display: flex; align-items: center; padding: 16px; background: rgba(255,255,255,0.05); border-radius: 14px; border: 1px solid rgba(255,255,255,0.1);">
+              <div style="font-size: 24px; margin-right: 16px;">⭕</div>
+              <div style="flex: 1;">
+                <div style="font-size: 15px; color: #fff; font-weight: 500;">下午散步15分钟</div>
+              </div>
+            </div>
+            <div style="display: flex; align-items: center; padding: 16px; background: rgba(255,255,255,0.05); border-radius: 14px; border: 1px solid rgba(255,255,255,0.1);">
+              <div style="font-size: 24px; margin-right: 16px;">⭕</div>
+              <div style="flex: 1;">
+                <div style="font-size: 15px; color: #fff; font-weight: 500;">阅读戒烟激励文章</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 统计页 -->
+    <div id="page-stats" class="page">
+      <div style="background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); min-height: 100vh; position: relative; overflow: hidden;">
+        <div style="position: absolute; top: 100px; right: -80px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(0,212,170,0.08) 0%, transparent 70%); border-radius: 50%; filter: blur(70px);"></div>
+
+        <div style="padding: 60px 20px 20px;">
+          <div style="font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -0.5px;">统计分析</div>
+        </div>
+
+        <!-- 时间范围切换 -->
+        <div style="padding: 0 20px; margin-top: 24px;">
+          <div style="display: flex; gap: 10px; background: rgba(255,255,255,0.05); padding: 4px; border-radius: 14px; backdrop-filter: blur(20px);">
+            <button class="premium-btn btn-primary" style="flex: 1; padding: 10px; font-size: 15px; border-radius: 10px;">周</button>
+            <button class="premium-btn btn-secondary" style="flex: 1; padding: 10px; font-size: 15px; border-radius: 10px;">月</button>
+            <button class="premium-btn btn-secondary" style="flex: 1; padding: 10px; font-size: 15px; border-radius: 10px;">年</button>
+          </div>
+        </div>
+
+        <!-- 趋势图 -->
+        <div class="premium-card" style="margin-top: 20px;">
+          <div style="font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 20px;">本周吸烟趋势</div>
+          <div style="height: 200px; background: rgba(0,0,0,0.3); border-radius: 16px; display: flex; align-items: flex-end; justify-content: space-around; padding: 24px 12px 12px; border: 1px solid rgba(255,255,255,0.05);">
+            <div style="text-align: center;">
+              <div style="width: 36px; height: 140px; background: linear-gradient(180deg, #00D4AA 0%, #00B894 100%); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,212,170,0.3);"></div>
+              <div style="font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600;">周一</div>
+            </div>
+            <div style="text-align: center;">
+              <div style="width: 36px; height: 120px; background: linear-gradient(180deg, #00D4AA 0%, #00B894 100%); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,212,170,0.3);"></div>
+              <div style="font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600;">周二</div>
+            </div>
+            <div style="text-align: center;">
+              <div style="width: 36px; height: 95px; background: linear-gradient(180deg, #00D4AA 0%, #00B894 100%); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,212,170,0.3);"></div>
+              <div style="font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600;">周三</div>
+            </div>
+            <div style="text-align: center;">
+              <div style="width: 36px; height: 105px; background: linear-gradient(180deg, #00D4AA 0%, #00B894 100%); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,212,170,0.3);"></div>
+              <div style="font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600;">周四</div>
+            </div>
+            <div style="text-align: center;">
+              <div style="width: 36px; height: 70px; background: linear-gradient(180deg, #00D4AA 0%, #00B894 100%); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,212,170,0.3);"></div>
+              <div style="font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600;">周五</div>
+            </div>
+            <div style="text-align: center;">
+              <div style="width: 36px; height: 60px; background: linear-gradient(180deg, #00D4AA 0%, #00B894 100%); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,212,170,0.3);"></div>
+              <div style="font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600;">周六</div>
+            </div>
+            <div style="text-align: center;">
+              <div style="width: 36px; height: 48px; background: linear-gradient(180deg, #00F5D4 0%, #00D4AA 100%); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 16px rgba(0,245,212,0.4);"></div>
+              <div style="font-size: 11px; color: #00D4AA; font-weight: 700;">今天</div>
+            </div>
+          </div>
+          <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between;">
+            <div>
+              <div style="font-size: 13px; color: rgba(255,255,255,0.5); font-weight: 600;">日均吸烟</div>
+              <div style="font-size: 28px; font-weight: 800; color: #fff; margin-top: 6px;">4.2 <span style="font-size: 16px; color: rgba(255,255,255,0.5);">支</span></div>
+            </div>
+            <div style="text-align: right;">
+              <div style="font-size: 13px; color: rgba(255,255,255,0.5); font-weight: 600;">较上周</div>
+              <div style="font-size: 28px; font-weight: 800; color: #00D4AA; margin-top: 6px;">-32%</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 健康与储蓄 -->
+        <div class="premium-card">
+          <div style="font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 20px;">健康收益</div>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+            <div style="background: rgba(0,212,170,0.1); padding: 24px; border-radius: 16px; text-align: center; border: 1px solid rgba(0,212,170,0.2);">
+              <div style="font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 600;">节省金额</div>
+              <div style="font-size: 32px; font-weight: 800; color: #00D4AA; margin: 12px 0;">¥680</div>
+              <div style="font-size: 12px; color: #6EE7B7; font-weight: 600;">本周 ¥120</div>
+            </div>
+            <div style="background: rgba(251,191,36,0.1); padding: 24px; border-radius: 16px; text-align: center; border: 1px solid rgba(251,191,36,0.2);">
+              <div style="font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 600;">肺功能恢复</div>
+              <div style="font-size: 32px; font-weight: 800; color: #FBBF24; margin: 12px 0;">28%</div>
+              <div style="font-size: 12px; color: #FCD34D; font-weight: 600;">持续改善中</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 成就 -->
+        <div class="premium-card">
+          <div style="font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 20px;">我的成就</div>
+          <div style="display: flex; gap: 16px;">
+            <div style="flex: 1; background: rgba(79,70,229,0.1); padding: 20px; border-radius: 16px; text-align: center; border: 1px solid rgba(79,70,229,0.2);">
+              <div style="font-size: 32px; margin-bottom: 8px;">🔥</div>
+              <div style="font-size: 28px; font-weight: 800; color: #818CF8;">15</div>
+              <div style="font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 6px; font-weight: 600;">连续记录</div>
+            </div>
+            <div style="flex: 1; background: rgba(0,212,170,0.1); padding: 20px; border-radius: 16px; text-align: center; border: 1px solid rgba(0,212,170,0.2);">
+              <div style="font-size: 32px; margin-bottom: 8px;">💪</div>
+              <div style="font-size: 28px; font-weight: 800; color: #00D4AA;">42</div>
+              <div style="font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 6px; font-weight: 600;">已拒绝</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 记录减量模式首页 -->
+    <div id="page-home-record" class="page">
+      <div style="background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); min-height: 100vh; position: relative; overflow: hidden;">
+        <div style="position: absolute; top: 0; left: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(0,212,170,0.1) 0%, transparent 70%); border-radius: 50%; filter: blur(60px);"></div>
+
+        <div style="padding: 60px 20px 20px; position: relative; z-index: 1;">
+          <div style="font-size: 17px; color: rgba(255,255,255,0.6); margin-bottom: 4px; font-weight: 500;">早上好 👋</div>
+          <div style="font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -0.5px;">张三</div>
+        </div>
+
+        <!-- AI 提示卡片 -->
+        <div class="premium-card" style="margin-top: 24px; background: linear-gradient(135deg, rgba(251,191,36,0.15) 0%, rgba(245,158,11,0.1) 100%); border: 1px solid rgba(251,191,36,0.3);">
+          <div style="display: flex; align-items: start;">
+            <div style="font-size: 28px; margin-right: 16px;">💡</div>
+            <div style="flex: 1;">
+              <div style="font-size: 15px; color: rgba(255,255,255,0.9); line-height: 1.6; font-weight: 500;">
+                发现你在下午3-5点容易抽烟，建议这个时段多喝水或散步
+              </div>
+            </div>
+            <div style="font-size: 24px; color: rgba(255,255,255,0.4); cursor: pointer;">×</div>
+          </div>
+        </div>
+
+        <!-- 计时器 -->
+        <div class="premium-card" style="text-align: center; padding: 36px 24px;">
+          <div style="font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 16px; font-weight: 600; letter-spacing: 1px;">距上次抽烟</div>
+          <div class="gradient-text" style="font-size: 56px; font-weight: 800; font-family: 'SF Mono', 'Courier New', monospace; letter-spacing: 2px;">
+            02:34:18
+          </div>
+          <div style="margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1);">
+            <div style="font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 8px; font-weight: 600;">下次建议时间</div>
+            <div style="font-size: 20px; font-weight: 700; color: #fff;">14:30</div>
+          </div>
+        </div>
+
+        <!-- 今日统计 -->
+        <div class="premium-card">
+          <div style="font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 20px;">今日数据</div>
+          <div style="display: flex; justify-content: space-between; gap: 16px;">
+            <div style="flex: 1; background: rgba(255,107,107,0.1); padding: 20px; border-radius: 16px; border: 1px solid rgba(255,107,107,0.2);">
+              <div style="font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 600;">已抽烟</div>
+              <div style="margin-top: 12px;">
+                <span style="font-size: 36px; font-weight: 800; color: #FF6B6B;">3</span>
+                <span style="font-size: 16px; color: rgba(255,255,255,0.5); font-weight: 600;"> / 5</span>
+              </div>
+              <div style="font-size: 13px; color: #00D4AA; margin-top: 8px; font-weight: 600;">↓ 较昨日 -2</div>
+            </div>
+            <div style="flex: 1; background: rgba(0,212,170,0.1); padding: 20px; border-radius: 16px; border: 1px solid rgba(0,212,170,0.2);">
+              <div style="font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 600;">已忍住</div>
+              <div style="margin-top: 12px;">
+                <span style="font-size: 36px; font-weight: 800; color: #00D4AA;">4</span>
+                <span style="font-size: 16px; color: rgba(255,255,255,0.5); font-weight: 600;"> 次</span>
+              </div>
+              <div style="font-size: 13px; color: #00D4AA; margin-top: 8px; font-weight: 600;">💪 做得好</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 记录按钮 -->
+        <div style="padding: 0 20px; margin-top: 24px; display: flex; gap: 12px;">
+          <button class="premium-btn btn-danger" style="flex: 1; padding: 16px; border-radius: 16px;">
+            🚬 记录抽烟
+          </button>
+          <button class="premium-btn btn-primary" style="flex: 1; padding: 16px; border-radius: 16px;">
+            💪 想抽忍住了
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 戒烟打卡模式首页 -->
+    <div id="page-home-quit" class="page">
+      <div style="background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); min-height: 100vh; position: relative; overflow: hidden;">
+        <!-- 背景装饰 -->
+        <div style="position: absolute; top: 0; right: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(0,212,170,0.1) 0%, transparent 70%); border-radius: 50%; filter: blur(60px);"></div>
+
+        <div style="padding: 60px 20px 20px; position: relative; z-index: 1;">
+          <div style="font-size: 17px; color: rgba(255,255,255,0.6); margin-bottom: 4px; font-weight: 500;">早上好 👋</div>
+          <div style="font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -0.5px;">张三</div>
+        </div>
+
+        <!-- 戒烟天数大卡片 -->
+        <div class="premium-card" style="margin-top: 32px; text-align: center; padding: 40px 24px; background: linear-gradient(135deg, rgba(0,212,170,0.15) 0%, rgba(0,245,212,0.1) 100%); border: 1px solid rgba(0,212,170,0.3);">
+          <div style="font-size: 15px; color: rgba(255,255,255,0.6); margin-bottom: 12px; font-weight: 600; letter-spacing: 1px;">已戒烟</div>
+          <div class="gradient-text" style="font-size: 72px; font-weight: 800; line-height: 1; margin: 16px 0;">15</div>
+          <div style="font-size: 24px; color: rgba(255,255,255,0.8); font-weight: 600; margin-bottom: 32px;">天</div>
+          <div style="padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1);">
+            <div style="display: flex; justify-content: space-around;">
+              <div>
+                <div style="font-size: 28px; font-weight: 700; color: #fff;">360</div>
+                <div style="font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 6px; font-weight: 600;">小时</div>
+              </div>
+              <div style="width: 1px; background: rgba(255,255,255,0.1);"></div>
+              <div>
+                <div style="font-size: 28px; font-weight: 700; color: #fff;">21,600</div>
+                <div style="font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 6px; font-weight: 600;">分钟</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 打卡按钮 -->
+        <div style="padding: 0 20px; margin-top: 24px;">
+          <button class="premium-btn btn-primary" style="width: 100%; padding: 18px; font-size: 18px; border-radius: 18px;">
+            ✅ 今日打卡
+          </button>
+        </div>
+
+        <!-- 成就卡片 -->
+        <div class="premium-card" style="margin-top: 20px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+            <div style="font-size: 18px; font-weight: 700; color: #fff;">健康收益</div>
+            <div style="font-size: 13px; color: #00D4AA; font-weight: 600;">持续恢复中 ↗</div>
+          </div>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+            <div style="background: rgba(0,212,170,0.1); padding: 20px; border-radius: 16px; border: 1px solid rgba(0,212,170,0.2);">
+              <div style="font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 600;">节省金额</div>
+              <div style="font-size: 28px; font-weight: 800; color: #00D4AA; margin-top: 8px;">¥225</div>
+            </div>
+            <div style="background: rgba(251,191,36,0.1); padding: 20px; border-radius: 16px; border: 1px solid rgba(251,191,36,0.2);">
+              <div style="font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 600;">未吸烟支数</div>
+              <div style="font-size: 28px; font-weight: 800; color: #FBBF24; margin-top: 8px;">300</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 激励语 -->
+        <div class="premium-card" style="background: linear-gradient(135deg, rgba(79,70,229,0.15) 0%, rgba(99,102,241,0.1) 100%); border: 1px solid rgba(79,70,229,0.3);">
+          <div style="font-size: 15px; color: rgba(255,255,255,0.9); line-height: 1.7; font-weight: 500;">
+            💪 坚持得很棒！你的肺部功能正在逐步恢复，继续保持！
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航 -->
+    <div class="nav-tabs">
+      <div class="nav-tab active" onclick="switchPage('home')">
+        <div class="nav-icon">🏠</div>
+        <div class="nav-label">首页</div>
+      </div>
+      <div class="nav-tab" onclick="switchPage('stats')">
+        <div class="nav-icon">📊</div>
+        <div class="nav-label">统计</div>
+      </div>
+      <div class="nav-tab" onclick="switchPage('ai')">
+        <div class="nav-icon">🤖</div>
+        <div class="nav-label">AI助手</div>
+      </div>
+      <div class="nav-tab" onclick="switchPage('logs')">
+        <div class="nav-icon">📝</div>
+        <div class="nav-label">记录</div>
+      </div>
+      <div class="nav-tab" onclick="switchPage('profile')">
+        <div class="nav-icon">👤</div>
+        <div class="nav-label">我的</div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    let currentMode = 'quit';
+
+    function selectMode(mode) {
+      currentMode = mode;
+      if (mode === 'quit') {
+        loadPage('home-quit');
+      } else {
+        loadPage('home-record');
+      }
+      document.querySelector('.nav-tabs').style.display = 'flex';
+    }
+
+    function switchPage(page) {
+      document.querySelectorAll('.nav-tab').forEach(tab => tab.classList.remove('active'));
+      event.currentTarget.classList.add('active');
+
+      if (page === 'home') {
+        loadPage(currentMode === 'quit' ? 'home-quit' : 'home-record');
+      } else {
+        loadPage(page);
+      }
+    }
+
+    function loadPage(page) {
+      document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
+      const targetPage = document.getElementById('page-' + page);
+      if (targetPage) {
+        targetPage.classList.add('active');
+      }
+
+      if (page === 'mode-select') {
+        document.querySelector('.nav-tabs').style.display = 'none';
+      } else {
+        document.querySelector('.nav-tabs').style.display = 'flex';
+      }
+    }
+
+    window.addEventListener('DOMContentLoaded', function() {
+      document.querySelector('.nav-tabs').style.display = 'none';
+    });
+  </script>
+</body>
+</html>

prototypes/ui-redesign.html

@@ -0,0 +1,727 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>戒烟助手 - UI 原型设计</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+      background: #f5f5f5;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .prototype-container {
+      max-width: 375px;
+      margin: 0 auto;
+      background: white;
+      min-height: 100vh;
+      position: relative;
+      box-shadow: 0 0 20px rgba(0,0,0,0.1);
+    }
+
+    /* 导航栏 */
+    .nav-tabs {
+      position: fixed;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      max-width: 375px;
+      width: 100%;
+      display: flex;
+      background: white;
+      border-top: 1px solid #e5e7eb;
+      padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
+      z-index: 100;
+    }
+
+    .nav-tab {
+      flex: 1;
+      text-align: center;
+      padding: 4px 0;
+      cursor: pointer;
+      transition: all 0.3s;
+    }
+
+    .nav-tab.active {
+      color: #10B981;
+    }
+
+    .nav-icon {
+      font-size: 24px;
+      margin-bottom: 2px;
+    }
+
+    .nav-label {
+      font-size: 11px;
+      color: #6B7280;
+    }
+
+    .nav-tab.active .nav-label {
+      color: #10B981;
+    }
+
+    /* 页面容器 */
+    .page {
+      display: none;
+      padding-bottom: 70px;
+    }
+
+    .page.active {
+      display: block;
+    }
+
+    /* 通用样式 */
+    .page-header {
+      padding: 16px 20px;
+      background: white;
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    .page-title {
+      font-size: 24px;
+      font-weight: 600;
+      color: #1F2937;
+    }
+
+    .card {
+      background: white;
+      border-radius: 12px;
+      padding: 16px;
+      margin: 12px 16px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+    }
+
+    .btn {
+      padding: 12px 24px;
+      border-radius: 8px;
+      border: none;
+      font-size: 15px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.3s;
+    }
+
+    .btn-primary {
+      background: #10B981;
+      color: white;
+    }
+
+    .btn-secondary {
+      background: #F3F4F6;
+      color: #374151;
+    }
+
+    .btn-danger {
+      background: #EF4444;
+      color: white;
+    }
+
+    .btn:active {
+      transform: scale(0.98);
+      opacity: 0.9;
+    }
+
+    /* 动画 */
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .card {
+      animation: fadeIn 0.3s ease-out;
+    }
+
+    /* 滚动条 */
+    ::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: #D1D5DB;
+      border-radius: 2px;
+    }
+  </style>
+</head>
+<body>
+  <div class="prototype-container">
+    <!-- 模式选择页 -->
+    <div id="page-mode-select" class="page active">
+      <div style="background: linear-gradient(135deg, #D1FAE5 0%, #F0FDF4 100%); min-height: 100vh; padding: 40px 20px;">
+        <div style="text-align: center; margin-top: 60px;">
+          <div style="font-size: 32px; margin-bottom: 8px;">🚭</div>
+          <h1 style="font-size: 28px; font-weight: 700; color: #1F2937; margin-bottom: 8px;">选择你的戒烟方式</h1>
+          <p style="color: #6B7280; font-size: 14px;">根据你的习惯，选择最适合的模式</p>
+        </div>
+
+        <div style="margin-top: 60px;">
+          <!-- 戒烟打卡模式 -->
+          <div class="card" style="margin-bottom: 20px; cursor: pointer; border: 2px solid transparent;" onclick="selectMode('quit')">
+            <div style="display: flex; align-items: flex-start;">
+              <div style="font-size: 40px; margin-right: 16px;">✅</div>
+              <div style="flex: 1;">
+                <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin-bottom: 8px;">戒烟打卡模式</h3>
+                <p style="font-size: 13px; color: #6B7280; line-height: 1.6; margin-bottom: 12px;">
+                  适合已经决定戒烟的你<br>
+                  记录戒烟天数，每天打卡激励
+                </p>
+                <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+                  <span style="background: #DBEAFE; color: #1E40AF; padding: 4px 10px; border-radius: 12px; font-size: 12px;">简单直接</span>
+                  <span style="background: #DBEAFE; color: #1E40AF; padding: 4px 10px; border-radius: 12px; font-size: 12px;">每日激励</span>
+                  <span style="background: #DBEAFE; color: #1E40AF; padding: 4px 10px; border-radius: 12px; font-size: 12px;">成就感强</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 记录减量模式 -->
+          <div class="card" style="cursor: pointer; border: 2px solid transparent;" onclick="selectMode('record')">
+            <div style="display: flex; align-items: flex-start;">
+              <div style="font-size: 40px; margin-right: 16px;">📊</div>
+              <div style="flex: 1;">
+                <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin-bottom: 8px;">记录减量模式</h3>
+                <p style="font-size: 13px; color: #6B7280; line-height: 1.6; margin-bottom: 12px;">
+                  适合想逐步减少吸烟的你<br>
+                  记录每次抽烟，AI 帮你制定递减计划
+                </p>
+                <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+                  <span style="background: #D1FAE5; color: #065F46; padding: 4px 10px; border-radius: 12px; font-size: 12px;">科学递减</span>
+                  <span style="background: #D1FAE5; color: #065F46; padding: 4px 10px; border-radius: 12px; font-size: 12px;">数据分析</span>
+                  <span style="background: #D1FAE5; color: #065F46; padding: 4px 10px; border-radius: 12px; font-size: 12px;">AI 指导</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div style="margin-top: 40px; text-align: center;">
+          <p style="font-size: 12px; color: #9CA3AF;">💡 选择后可在个人中心随时切换</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 戒烟打卡模式首页 -->
+    <div id="page-home-quit" class="page">
+      <div style="background: linear-gradient(180deg, #D1FAE5 0%, #F0FDF4 50%, #FFFFFF 100%); min-height: 100vh;">
+        <div style="padding: 20px 20px 0;">
+          <div style="font-size: 16px; color: #6B7280; margin-bottom: 4px;">早上好 👋</div>
+          <div style="font-size: 24px; font-weight: 700; color: #1F2937;">张三</div>
+        </div>
+
+        <!-- 戒烟天数大卡片 -->
+        <div class="card" style="margin-top: 24px; text-align: center; padding: 32px 20px;">
+          <div style="font-size: 14px; color: #6B7280; margin-bottom: 8px;">已戒烟</div>
+          <div style="font-size: 56px; font-weight: 700; color: #10B981; line-height: 1.2;">15</div>
+          <div style="font-size: 18px; color: #374151; margin-top: 4px;">天</div>
+          <div style="margin-top: 24px; padding-top: 20px; border-top: 1px solid #E5E7EB;">
+            <div style="display: flex; justify-content: space-around;">
+              <div>
+                <div style="font-size: 20px; font-weight: 600; color: #1F2937;">360</div>
+                <div style="font-size: 12px; color: #6B7280; margin-top: 4px;">小时</div>
+              </div>
+              <div>
+                <div style="font-size: 20px; font-weight: 600; color: #1F2937;">21,600</div>
+                <div style="font-size: 12px; color: #6B7280; margin-top: 4px;">分钟</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 打卡按钮 -->
+        <div style="padding: 0 16px; margin-top: 20px;">
+          <button class="btn btn-primary" style="width: 100%; padding: 16px; font-size: 16px; border-radius: 12px;">
+            ✅ 今日打卡
+          </button>
+        </div>
+
+        <!-- 成就卡片 -->
+        <div class="card" style="margin-top: 16px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+            <div style="font-size: 16px; font-weight: 600; color: #1F2937;">健康收益</div>
+            <div style="font-size: 12px; color: #10B981;">持续恢复中 ↗</div>
+          </div>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+            <div style="background: #F0FDF4; padding: 12px; border-radius: 8px;">
+              <div style="font-size: 12px; color: #6B7280;">节省金额</div>
+              <div style="font-size: 20px; font-weight: 600; color: #10B981; margin-top: 4px;">¥225</div>
+            </div>
+            <div style="background: #FEF3C7; padding: 12px; border-radius: 8px;">
+              <div style="font-size: 12px; color: #6B7280;">未吸烟支数</div>
+              <div style="font-size: 20px; font-weight: 600; color: #D97706; margin-top: 4px;">300</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 激励语 -->
+        <div class="card" style="background: linear-gradient(135deg, #DBEAFE 0%, #E0E7FF 100%); border: none;">
+          <div style="font-size: 14px; color: #1E40AF; line-height: 1.6;">
+            💪 坚持得很棒！你的肺部功能正在逐步恢复，继续保持！
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 记录减量模式首页 -->
+    <div id="page-home-record" class="page">
+      <div style="background: linear-gradient(180deg, #D1FAE5 0%, #F0FDF4 50%, #FFFFFF 100%); min-height: 100vh;">
+        <div style="padding: 20px 20px 0;">
+          <div style="font-size: 16px; color: #6B7280; margin-bottom: 4px;">早上好 👋</div>
+          <div style="font-size: 24px; font-weight: 700; color: #1F2937;">张三</div>
+        </div>
+
+        <!-- AI 提示卡片 -->
+        <div class="card" style="margin-top: 20px; background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); border: none;">
+          <div style="display: flex; align-items: start;">
+            <div style="font-size: 24px; margin-right: 12px;">💡</div>
+            <div style="flex: 1;">
+              <div style="font-size: 13px; color: #92400E; line-height: 1.5;">
+                发现你在下午3-5点容易抽烟，建议这个时段多喝水或散步
+              </div>
+            </div>
+            <div style="font-size: 20px; color: #D97706; cursor: pointer;">×</div>
+          </div>
+        </div>
+
+        <!-- 计时器 -->
+        <div class="card" style="text-align: center; padding: 28px 20px;">
+          <div style="font-size: 13px; color: #6B7280; margin-bottom: 12px;">距上次抽烟</div>
+          <div style="font-size: 48px; font-weight: 700; color: #10B981; font-family: 'Courier New', monospace;">
+            02:34:18
+          </div>
+          <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #E5E7EB;">
+            <div style="font-size: 13px; color: #6B7280; margin-bottom: 4px;">下次建议时间</div>
+            <div style="font-size: 16px; font-weight: 600; color: #374151;">14:30</div>
+          </div>
+        </div>
+
+        <!-- 今日统计 -->
+        <div class="card">
+          <div style="font-size: 16px; font-weight: 600; color: #1F2937; margin-bottom: 16px;">今日数据</div>
+          <div style="display: flex; justify-content: space-between; margin-bottom: 12px;">
+            <div style="flex: 1;">
+              <div style="font-size: 12px; color: #6B7280;">已抽烟</div>
+              <div style="margin-top: 8px;">
+                <span style="font-size: 28px; font-weight: 700; color: #EF4444;">3</span>
+                <span style="font-size: 14px; color: #6B7280;"> / 5 支</span>
+              </div>
+              <div style="font-size: 12px; color: #10B981; margin-top: 4px;">↓ 较昨日 -2</div>
+            </div>
+            <div style="flex: 1; text-align: right;">
+              <div style="font-size: 12px; color: #6B7280;">已忍住</div>
+              <div style="margin-top: 8px;">
+                <span style="font-size: 28px; font-weight: 700; color: #10B981;">4</span>
+                <span style="font-size: 14px; color: #6B7280;"> 次</span>
+              </div>
+              <div style="font-size: 12px; color: #10B981; margin-top: 4px;">💪 做得好</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 记录按钮 -->
+        <div style="padding: 0 16px; margin-top: 20px; display: flex; gap: 12px;">
+          <button class="btn btn-danger" style="flex: 1; padding: 14px; border-radius: 10px;">
+            🚬 记录抽烟
+          </button>
+          <button class="btn btn-primary" style="flex: 1; padding: 14px; border-radius: 10px;">
+            💪 想抽忍住了
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 个人中心页 -->
+    <div id="page-profile" class="page">
+      <div style="background: linear-gradient(180deg, #D1FAE5 0%, #FFFFFF 30%); min-height: 100vh;">
+        <!-- 用户信息 -->
+        <div style="padding: 24px 20px;">
+          <div style="display: flex; align-items: center;">
+            <div style="width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #10B981, #059669); display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; margin-right: 16px;">
+              👤
+            </div>
+            <div>
+              <div style="font-size: 20px; font-weight: 600; color: #1F2937;">张三</div>
+              <div style="font-size: 13px; color: #6B7280; margin-top: 4px;">已坚持 15 天</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 模式切换 -->
+        <div class="card">
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <div>
+              <div style="font-size: 15px; font-weight: 600; color: #1F2937;">当前模式</div>
+              <div style="font-size: 13px; color: #6B7280; margin-top: 4px;">戒烟打卡模式</div>
+            </div>
+            <button class="btn btn-secondary" style="padding: 8px 16px; font-size: 13px;" onclick="loadPage('mode-select')">
+              切换模式
+            </button>
+          </div>
+        </div>
+
+        <!-- 菜单列表 -->
+        <div class="card">
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #F3F4F6;">
+            <div style="display: flex; align-items: center;">
+              <div style="font-size: 20px; margin-right: 12px;">🎯</div>
+              <div style="font-size: 15px; color: #1F2937;">目标设定</div>
+            </div>
+            <div style="color: #9CA3AF;">›</div>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #F3F4F6;">
+            <div style="display: flex; align-items: center;">
+              <div style="font-size: 20px; margin-right: 12px;">🔔</div>
+              <div style="font-size: 15px; color: #1F2937;">提醒设置</div>
+            </div>
+            <div style="color: #9CA3AF;">›</div>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #F3F4F6;">
+            <div style="display: flex; align-items: center;">
+              <div style="font-size: 20px; margin-right: 12px;">📊</div>
+              <div style="font-size: 15px; color: #1F2937;">数据导出</div>
+            </div>
+            <div style="color: #9CA3AF;">›</div>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0;">
+            <div style="display: flex; align-items: center;">
+              <div style="font-size: 20px; margin-right: 12px;">⚙️</div>
+              <div style="font-size: 15px; color: #1F2937;">基础设置</div>
+            </div>
+            <div style="color: #9CA3AF;">›</div>
+          </div>
+        </div>
+
+        <!-- 关于 -->
+        <div class="card">
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #F3F4F6;">
+            <div style="display: flex; align-items: center;">
+              <div style="font-size: 20px; margin-right: 12px;">❓</div>
+              <div style="font-size: 15px; color: #1F2937;">使用帮助</div>
+            </div>
+            <div style="color: #9CA3AF;">›</div>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0;">
+            <div style="display: flex; align-items: center;">
+              <div style="font-size: 20px; margin-right: 12px;">ℹ️</div>
+              <div style="font-size: 15px; color: #1F2937;">关于我们</div>
+            </div>
+            <div style="font-size: 13px; color: #9CA3AF; margin-right: 8px;">v1.0.0</div>
+            <div style="color: #9CA3AF;">›</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 记录页 -->
+    <div id="page-logs" class="page">
+      <div class="page-header">
+        <div class="page-title">历史记录</div>
+      </div>
+
+      <div style="background: #f9fafb; min-height: calc(100vh - 70px);">
+        <!-- 筛选标签 -->
+        <div style="padding: 12px 16px; display: flex; gap: 8px; background: white; border-bottom: 1px solid #E5E7EB;">
+          <button class="btn btn-primary" style="padding: 6px 16px; font-size: 13px;">全部</button>
+          <button class="btn btn-secondary" style="padding: 6px 16px; font-size: 13px;">已抽烟</button>
+          <button class="btn btn-secondary" style="padding: 6px 16px; font-size: 13px;">已忍住</button>
+        </div>
+
+        <!-- 今天 -->
+        <div style="padding: 16px 16px 8px;">
+          <div style="font-size: 13px; font-weight: 600; color: #6B7280;">今天 3月24日</div>
+        </div>
+
+        <div class="card" style="margin-top: 8px; border-left: 3px solid #10B981;">
+          <div style="display: flex; justify-content: space-between; align-items: start;">
+            <div style="flex: 1;">
+              <div style="display: flex; align-items: center; margin-bottom: 6px;">
+                <div style="font-size: 18px; margin-right: 8px;">💪</div>
+                <div style="font-size: 15px; font-weight: 600; color: #10B981;">想抽忍住了</div>
+              </div>
+              <div style="font-size: 13px; color: #6B7280;">14:30</div>
+              <div style="font-size: 12px; color: #9CA3AF; margin-top: 4px;">距上次 2小时15分</div>
+            </div>
+            <div style="display: flex; gap: 8px;">
+              <button style="padding: 4px 12px; background: #EEF2FF; color: #4F46E5; border: none; border-radius: 6px; font-size: 12px; cursor: pointer;">编辑</button>
+              <button style="padding: 4px 12px; background: #FEE2E2; color: #DC2626; border: none; border-radius: 6px; font-size: 12px; cursor: pointer;">删除</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="card" style="margin-top: 12px; border-left: 3px solid #EF4444;">
+          <div style="display: flex; justify-content: space-between; align-items: start;">
+            <div style="flex: 1;">
+              <div style="display: flex; align-items: center; margin-bottom: 6px;">
+                <div style="font-size: 18px; margin-right: 8px;">🚬</div>
+                <div style="font-size: 15px; font-weight: 600; color: #EF4444;">记录抽烟</div>
+              </div>
+              <div style="font-size: 13px; color: #6B7280;">12:15 · 3支 · 等级2</div>
+              <div style="font-size: 12px; color: #9CA3AF; margin-top: 4px;">压力大</div>
+              <div style="font-size: 12px; color: #9CA3AF; margin-top: 2px;">距上次 1小时30分</div>
+            </div>
+            <div style="display: flex; gap: 8px;">
+              <button style="padding: 4px 12px; background: #EEF2FF; color: #4F46E5; border: none; border-radius: 6px; font-size: 12px; cursor: pointer;">编辑</button>
+              <button style="padding: 4px 12px; background: #FEE2E2; color: #DC2626; border: none; border-radius: 6px; font-size: 12px; cursor: pointer;">删除</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 昨天 -->
+        <div style="padding: 16px 16px 8px;">
+          <div style="font-size: 13px; font-weight: 600; color: #6B7280;">昨天 3月23日</div>
+        </div>
+
+        <div class="card" style="margin-top: 8px; border-left: 3px solid #EF4444;">
+          <div style="display: flex; justify-content: space-between; align-items: start;">
+            <div style="flex: 1;">
+              <div style="display: flex; align-items: center; margin-bottom: 6px;">
+                <div style="font-size: 18px; margin-right: 8px;">🚬</div>
+                <div style="font-size: 15px; font-weight: 600; color: #EF4444;">记录抽烟</div>
+              </div>
+              <div style="font-size: 13px; color: #6B7280;">21:45 · 2支 · 等级1</div>
+              <div style="font-size: 12px; color: #9CA3AF; margin-top: 4px;">饭后习惯</div>
+            </div>
+            <div style="display: flex; gap: 8px;">
+              <button style="padding: 4px 12px; background: #EEF2FF; color: #4F46E5; border: none; border-radius: 6px; font-size: 12px; cursor: pointer;">编辑</button>
+              <button style="padding: 4px 12px; background: #FEE2E2; color: #DC2626; border: none; border-radius: 6px; font-size: 12px; cursor: pointer;">删除</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- AI助手页 -->
+    <div id="page-ai" class="page">
+      <div class="page-header">
+        <div class="page-title">AI 戒烟助手</div>
+      </div>
+
+      <div style="background: #f9fafb; min-height: calc(100vh - 70px);">
+        <!-- 减量计划 -->
+        <div class="card" style="background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%); border: none;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+            <div style="font-size: 16px; font-weight: 600; color: #1F2937;">30天递减计划</div>
+            <div style="font-size: 12px; color: #4F46E5;">第15天</div>
+          </div>
+          <div style="font-size: 13px; color: #6B7280; margin-bottom: 12px;">阶段2 - 减量期</div>
+          <div style="background: white; height: 8px; border-radius: 4px; overflow: hidden;">
+            <div style="width: 50%; height: 100%; background: #4F46E5;"></div>
+          </div>
+          <div style="margin-top: 12px; font-size: 12px; color: #4F46E5;">🎯 进度 50% · 继续加油！</div>
+        </div>
+
+        <!-- AI 每日分析 -->
+        <div class="card">
+          <div style="display: flex; align-items: center; margin-bottom: 16px;">
+            <div style="font-size: 24px; margin-right: 8px;">🤖</div>
+            <div style="font-size: 16px; font-weight: 600; color: #1F2937;">今日 AI 分析</div>
+          </div>
+          <div style="background: #F9FAFB; padding: 14px; border-radius: 8px; border-left: 3px solid #10B981;">
+            <div style="font-size: 13px; color: #374151; line-height: 1.6;">
+              <strong>昨日表现：</strong>你昨天成功控制在5支以内，比目标少了1支，做得很棒！<br><br>
+              <strong>今日建议：</strong>今天目标4支。建议在下午3点和晚上8点这两个高峰时段，用喝水或散步替代。
+            </div>
+          </div>
+        </div>
+
+        <!-- 今日任务 -->
+        <div class="card">
+          <div style="font-size: 16px; font-weight: 600; color: #1F2937; margin-bottom: 16px;">今日任务清单</div>
+          <div style="display: flex; flex-direction: column; gap: 12px;">
+            <div style="display: flex; align-items: center; padding: 12px; background: #F0FDF4; border-radius: 8px;">
+              <div style="font-size: 20px; margin-right: 12px;">✅</div>
+              <div style="flex: 1;">
+                <div style="font-size: 14px; color: #1F2937; text-decoration: line-through;">早起喝一杯温水</div>
+              </div>
+            </div>
+            <div style="display: flex; align-items: center; padding: 12px; background: #F9FAFB; border-radius: 8px;">
+              <div style="font-size: 20px; margin-right: 12px;">⭕</div>
+              <div style="flex: 1;">
+                <div style="font-size: 14px; color: #1F2937;">下午散步15分钟</div>
+              </div>
+            </div>
+            <div style="display: flex; align-items: center; padding: 12px; background: #F9FAFB; border-radius: 8px;">
+              <div style="font-size: 20px; margin-right: 12px;">⭕</div>
+              <div style="flex: 1;">
+                <div style="font-size: 14px; color: #1F2937;">阅读戒烟激励文章</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 统计页 -->
+    <div id="page-stats" class="page">
+      <div class="page-header">
+        <div class="page-title">统计分析</div>
+      </div>
+
+      <div style="background: #f9fafb; min-height: calc(100vh - 70px);">
+        <!-- 时间范围切换 -->
+        <div style="padding: 16px; display: flex; gap: 8px; background: white;">
+          <button class="btn btn-primary" style="flex: 1; padding: 8px;">周</button>
+          <button class="btn btn-secondary" style="flex: 1; padding: 8px;">月</button>
+          <button class="btn btn-secondary" style="flex: 1; padding: 8px;">年</button>
+        </div>
+
+        <!-- 趋势图 -->
+        <div class="card">
+          <div style="font-size: 16px; font-weight: 600; color: #1F2937; margin-bottom: 16px;">本周吸烟趋势</div>
+          <div style="height: 180px; background: #F9FAFB; border-radius: 8px; display: flex; align-items: flex-end; justify-content: space-around; padding: 20px 10px 10px;">
+            <div style="text-align: center;">
+              <div style="width: 32px; height: 120px; background: #10B981; border-radius: 4px; margin-bottom: 8px;"></div>
+              <div style="font-size: 11px; color: #6B7280;">周一</div>
+            </div>
+            <div style="text-align: center;">
+              <div style="width: 32px; height: 100px; background: #10B981; border-radius: 4px; margin-bottom: 8px;"></div>
+              <div style="font-size: 11px; color: #6B7280;">周二</div>
+            </div>
+            <div style="text-align: center;">
+              <div style="width: 32px; height: 80px; background: #10B981; border-radius: 4px; margin-bottom: 8px;"></div>
+              <div style="font-size: 11px; color: #6B7280;">周三</div>
+            </div>
+            <div style="text-align: center;">
+              <div style="width: 32px; height: 90px; background: #10B981; border-radius: 4px; margin-bottom: 8px;"></div>
+              <div style="font-size: 11px; color: #6B7280;">周四</div>
+            </div>
+            <div style="text-align: center;">
+              <div style="width: 32px; height: 60px; background: #10B981; border-radius: 4px; margin-bottom: 8px;"></div>
+              <div style="font-size: 11px; color: #6B7280;">周五</div>
+            </div>
+            <div style="text-align: center;">
+              <div style="width: 32px; height: 50px; background: #10B981; border-radius: 4px; margin-bottom: 8px;"></div>
+              <div style="font-size: 11px; color: #6B7280;">周六</div>
+            </div>
+            <div style="text-align: center;">
+              <div style="width: 32px; height: 40px; background: #10B981; border-radius: 4px; margin-bottom: 8px;"></div>
+              <div style="font-size: 11px; color: #6B7280;">今天</div>
+            </div>
+          </div>
+          <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #E5E7EB; display: flex; justify-content: space-between;">
+            <div>
+              <div style="font-size: 12px; color: #6B7280;">日均吸烟</div>
+              <div style="font-size: 20px; font-weight: 600; color: #1F2937; margin-top: 4px;">4.2 支</div>
+            </div>
+            <div style="text-align: right;">
+              <div style="font-size: 12px; color: #6B7280;">较上周</div>
+              <div style="font-size: 20px; font-weight: 600; color: #10B981; margin-top: 4px;">-32%</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 健康与储蓄 -->
+        <div class="card">
+          <div style="font-size: 16px; font-weight: 600; color: #1F2937; margin-bottom: 16px;">健康收益</div>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+            <div style="background: #F0FDF4; padding: 16px; border-radius: 8px; text-align: center;">
+              <div style="font-size: 12px; color: #6B7280;">节省金额</div>
+              <div style="font-size: 24px; font-weight: 700; color: #10B981; margin: 8px 0;">¥680</div>
+              <div style="font-size: 11px; color: #059669;">本周 ¥120</div>
+            </div>
+            <div style="background: #FEF3C7; padding: 16px; border-radius: 8px; text-align: center;">
+              <div style="font-size: 12px; color: #6B7280;">肺功能恢复</div>
+              <div style="font-size: 24px; font-weight: 700; color: #D97706; margin: 8px 0;">28%</div>
+              <div style="font-size: 11px; color: #B45309;">持续改善中</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 成就 -->
+        <div class="card">
+          <div style="font-size: 16px; font-weight: 600; color: #1F2937; margin-bottom: 16px;">我的成就</div>
+          <div style="display: flex; gap: 12px;">
+            <div style="flex: 1; background: #EEF2FF; padding: 12px; border-radius: 8px; text-align: center;">
+              <div style="font-size: 24px; margin-bottom: 4px;">🔥</div>
+              <div style="font-size: 20px; font-weight: 600; color: #4F46E5;">15</div>
+              <div style="font-size: 11px; color: #6B7280; margin-top: 2px;">连续记录</div>
+            </div>
+            <div style="flex: 1; background: #F0FDF4; padding: 12px; border-radius: 8px; text-align: center;">
+              <div style="font-size: 24px; margin-bottom: 4px;">💪</div>
+              <div style="font-size: 20px; font-weight: 600; color: #10B981;">42</div>
+              <div style="font-size: 11px; color: #6B7280; margin-top: 2px;">已拒绝</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航 -->
+    <div class="nav-tabs">
+      <div class="nav-tab active" onclick="switchPage('home')">
+        <div class="nav-icon">🏠</div>
+        <div class="nav-label">首页</div>
+      </div>
+      <div class="nav-tab" onclick="switchPage('stats')">
+        <div class="nav-icon">📊</div>
+        <div class="nav-label">统计</div>
+      </div>
+      <div class="nav-tab" onclick="switchPage('ai')">
+        <div class="nav-icon">🤖</div>
+        <div class="nav-label">AI助手</div>
+      </div>
+      <div class="nav-tab" onclick="switchPage('logs')">
+        <div class="nav-icon">📝</div>
+        <div class="nav-label">记录</div>
+      </div>
+      <div class="nav-tab" onclick="switchPage('profile')">
+        <div class="nav-icon">👤</div>
+        <div class="nav-label">我的</div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    let currentMode = 'quit'; // quit 或 record
+
+    function selectMode(mode) {
+      currentMode = mode;
+      if (mode === 'quit') {
+        loadPage('home-quit');
+      } else {
+        loadPage('home-record');
+      }
+      // 显示底部导航
+      document.querySelector('.nav-tabs').style.display = 'flex';
+    }
+
+    function switchPage(page) {
+      // 更新导航状态
+      document.querySelectorAll('.nav-tab').forEach(tab => tab.classList.remove('active'));
+      event.currentTarget.classList.add('active');
+
+      // 根据模式加载不同首页
+      if (page === 'home') {
+        loadPage(currentMode === 'quit' ? 'home-quit' : 'home-record');
+      } else {
+        loadPage(page);
+      }
+    }
+
+    function loadPage(page) {
+      document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
+      const targetPage = document.getElementById('page-' + page);
+      if (targetPage) {
+        targetPage.classList.add('active');
+      }
+
+      // 模式选择页隐藏底部导航
+      if (page === 'mode-select') {
+        document.querySelector('.nav-tabs').style.display = 'none';
+      } else {
+        document.querySelector('.nav-tabs').style.display = 'flex';
+      }
+    }
+
+    // 页面加载时隐藏底部导航
+    window.addEventListener('DOMContentLoaded', function() {
+      document.querySelector('.nav-tabs').style.display = 'none';
+    });
+  </script>
+</body>
+</html>