admin/smt
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: enhance user experience with onboarding updates

Browse Source 
- 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
This commit is contained in:
你çšnepiedg
2026-03-24 18:25:53 +08:00
parent 219a6f6231
commit cf62ed1a3f
5 changed files with 1814 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
prototypes/PREMIUM-README.md
+149
View File
@@ -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
+147
View File
@@ -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
+791
View File
@@ -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
+727
View File
@@ -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>