你çnepiedg
cf62ed1a3f
- 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
728 lines
32 KiB
HTML
728 lines
32 KiB
HTML
<!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>
|