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)
+- 现代深色主题设计趋势