健康生活追踪器 🏃♂️💚
一个功能完整的 Web 端健康管理应用,帮助您全面管理运动、饮食、睡眠和习惯养成。
✨ 主要功能
🏃♂️ 运动管理
- 运动记录: 支持多种运动类型(跑步、健身、游泳、瑜伽等)
- 运动计划: 设置运动目标和计划
- 卡路里计算: 自动计算运动消耗的卡路里
- 运动统计: 可视化运动数据和趋势
🍎 饮食管理
- 饮食记录: 按餐次记录每日饮食
- 营养分析: 计算卡路里和营养成分
- 食物搜索: 内置食物数据库,快速查找食物信息
- 饮水追踪: 记录每日饮水量
😴 睡眠管理
- 睡眠记录: 记录入睡和起床时间
- 睡眠质量: 5星评分系统
- 睡眠分析: 计算睡眠时长和质量趋势
- 睡眠助手: 放松音乐、冥想指导、白噪音
✅ 习惯养成
- 习惯追踪: 创建和跟踪健康习惯
- 连续记录: 统计连续完成天数
- 习惯分类: 支持健康、运动、饮食等多种类型
- 可视化追踪: 7天习惯完成情况一目了然
📊 数据可视化
- 健康仪表板: 综合展示各项健康指标
- 趋势图表: 运动、睡眠、饮食趋势分析
- 健康雷达图: 多维度健康评估
- 对比分析: 历史数据对比
🎯 个性化功能
- 智能提醒: 运动、饮水、睡眠提醒
- 护眼提醒: 每小时护眼提醒,自动调节屏幕亮度
- 主题切换: 支持亮色/暗色主题
- 数据导出: 本地数据存储和备份
🚀 技术特性
- 纯前端实现: HTML5 + CSS3 + JavaScript ES6+
- 响应式设计: 完美适配桌面端和移动端
- PWA支持: 可安装为原生应用
- 本地存储: 使用localStorage保存数据
- 图表可视化: 集成Chart.js图表库
- 现代UI: 基于CSS Grid和Flexbox的现代布局
📱 使用方法
打开浏览器访问 https://aicoding.juejin.cn/pens/7510151982553530379
基本操作
- 添加记录: 点击右下角的"+"按钮快速添加各类记录
- 查看数据: 在仪表板查看今日健康概况
- 管理模块: 点击左侧导航切换不同功能模块
- 设置习惯: 在习惯养成模块创建和管理健康习惯
移动端使用
- 在移动设备上使用底部导航栏
- 支持触摸手势和响应式操作
- 可添加到主屏幕作为应用使用
🎨 界面特色
设计风格
- 简约清新: 以健康绿色为主色调
- 卡片式布局: 信息结构清晰明了
- 动画效果: 流畅的交互动画
- 图标语言: 直观的FontAwesome图标
交互体验
- 一键操作: 大部分功能都可一键完成
- 即时反馈: 操作后立即显示结果
- 智能提示: 贴心的使用提示和引导
- 无障碍: 支持键盘导航和屏幕阅读器
📊 数据管理
数据存储
- 所有数据存储在浏览器本地
- 支持数据导出和备份
- 隐私安全,无需联网
数据类型
- 运动数据: 类型、时长、强度、卡路里
- 饮食数据: 食物、分量、营养成分、饮水量
- 睡眠数据: 时间、时长、质量评分、环境
- 习惯数据: 名称、类型、完成记录、连续天数
🔧 自定义配置
主题设置
- 点击右上角月亮/太阳图标切换主题
- 支持系统主题自动跟随
提醒设置
- 可开启/关闭各类健康提醒
- 护眼提醒间隔可调节
- 习惯提醒时间自定义
🌟 未来规划
- 数据云端同步
- 社交分享功能
- 更多运动类型支持
- AI健康建议
- 第三方设备集成
- 多语言支持
开始您的健康生活管理之旅吧! 💪✨