一个基于"反向戒烟"理念设计的iPhone主屏幕应用,通过智能记录和数据分析,让用户自我觉醒产生戒烟动力,而非传统强制戒烟。
反向戒烟:不是强制戒烟,而是通过记录和数据分析,让用户自我觉醒产生戒烟动力。
渐进觉醒:
- 第1-3天:专注记录,培养习惯
- 第3-7天:简单分析,模式显现
- 第7天+:深度洞察,自我觉醒
- 实时数据:今日花费、克制次数、健康警告
- 趋势分析:本周趋势变化,上升/下降一目了然
- 快速操作:大按钮设计,一键记录或查看分析
- 最近记录:时间线展示,情绪标签清晰
- 3秒记录:一键点击 + 情绪选择,快速完成
- 8种情绪:焦虑、无聊、习惯、压力、低落、思考、庆祝、社交
- 多媒体支持:语音备注、文字记录、拍照功能
- 智能定位:自动记录位置信息(可选)
- 时间分布:24小时吸烟热力图,发现时间模式
- 情绪触发:饼图显示情绪分布,找出主要诱因
- 地点分析:常去地点排名,识别高风险区域
- 模式识别:AI发现吸烟模式,提供改善建议
- 财务影响:实时计算节省金额,展示替代选择
- 身体影响:可视化器官受损程度,颜色渐变显示
- 替代选择:"如果不吸烟,你可以..."的现实对比
- 烟迹地图:粒子效果展示吸烟影响范围
- 觉醒日历:颜色日历记录觉醒进度
- 觉醒语录:每日激励,强化内在动力
- PWA应用:支持离线使用,可添加到主屏幕
- 触摸优化:大按钮设计,最小44px触摸目标
- 单手操作:重要功能放在屏幕下半部分
- 流畅动画:Anime.js实现微交互效果
- 原生风格:遵循iOS Human Interface Guidelines
- 配色方案:深灰蓝主色 + 红色强调 + 绿色成功色
- 字体系统:SF Pro Display系统字体
- 卡片布局:圆角卡片组织信息,层次分明
- 响应式设计:完美适配iPhone各种屏幕尺寸
- HTML5 + CSS3 + JavaScript (ES6+)
- Tailwind CSS:快速样式开发
- Anime.js:流畅动画效果
- ECharts.js:专业数据可视化
- p5.js:创意烟迹粒子效果
- IndexedDB:浏览器本地数据库
- localStorage:设置和临时数据
- JSON格式:便于数据导出导入
- 隐私保护:所有数据本地存储
- Web App Manifest:支持添加到主屏幕
- Service Worker:离线功能和缓存策略
- 响应式设计:完美适配移动设备
- 触摸优化:专为手指操作设计
- 添加到主屏幕:Safari中打开 → 分享 → 添加到主屏幕
- 快速设置:填写基本信息(烟价等)
- 第一次记录:完成首次吸烟记录
- 获得成就:解锁"开始觉醒"徽章
- 快速记录:点击大按钮,选择情绪,3秒完成
- 查看分析:数据自动分析,发现吸烟模式
- 获得洞察:通过反向激励产生戒烟动力
- 持续觉醒:每日记录,逐步减少吸烟
- 语音备注:30秒语音记录当时情况
- 拍照记录:记录吸烟场景和环境
- 位置记录:自动记录吸烟地点
- 数据导出:完整数据备份和导出
- Fork或下载代码
- 上传到GitHub仓库
- Settings → Pages → Deploy from branch
- 选择main分支,等待部署完成
# 使用Python HTTP服务器
python -m http.server 8000
# 或使用Node.js
npx serve .
# 访问 http://localhost:8000- 本地存储:所有数据存储在用户设备
- 无服务器:不需要后端,完全离线可用
- 数据控制:用户可随时导出或删除数据
- 隐私保护:不收集任何个人敏感信息
- 社交分享功能
- 数据同步备份
- 更多图表类型
- AI智能分析
- 健康数据集成
- 个性化主题
MIT License - 自由使用、修改和分发
💡 核心理念:不是烟在控制你,而是你在记录烟。当你看清了模式,你就获得了选择的自由。
立即体验:烟迹终结者应用