「Health-Tracer 健康生活追踪器」重磅发布!

107 阅读3分钟

健康生活追踪器 🏃‍♂️💚

一个功能完整的 Web 端健康管理应用,帮助您全面管理运动、饮食、睡眠和习惯养成。

image.png

✨ 主要功能

🏃‍♂️ 运动管理

  • 运动记录: 支持多种运动类型(跑步、健身、游泳、瑜伽等)
  • 运动计划: 设置运动目标和计划
  • 卡路里计算: 自动计算运动消耗的卡路里
  • 运动统计: 可视化运动数据和趋势

image.png

🍎 饮食管理

  • 饮食记录: 按餐次记录每日饮食
  • 营养分析: 计算卡路里和营养成分
  • 食物搜索: 内置食物数据库,快速查找食物信息
  • 饮水追踪: 记录每日饮水量

image.png

😴 睡眠管理

  • 睡眠记录: 记录入睡和起床时间
  • 睡眠质量: 5星评分系统
  • 睡眠分析: 计算睡眠时长和质量趋势
  • 睡眠助手: 放松音乐、冥想指导、白噪音

image.png

✅ 习惯养成

  • 习惯追踪: 创建和跟踪健康习惯
  • 连续记录: 统计连续完成天数
  • 习惯分类: 支持健康、运动、饮食等多种类型
  • 可视化追踪: 7天习惯完成情况一目了然

image.png

📊 数据可视化

  • 健康仪表板: 综合展示各项健康指标
  • 趋势图表: 运动、睡眠、饮食趋势分析
  • 健康雷达图: 多维度健康评估
  • 对比分析: 历史数据对比

image.png

🎯 个性化功能

  • 智能提醒: 运动、饮水、睡眠提醒
  • 护眼提醒: 每小时护眼提醒,自动调节屏幕亮度
  • 主题切换: 支持亮色/暗色主题
  • 数据导出: 本地数据存储和备份

image.png

🚀 技术特性

  • 纯前端实现: HTML5 + CSS3 + JavaScript ES6+
  • 响应式设计: 完美适配桌面端和移动端
  • PWA支持: 可安装为原生应用
  • 本地存储: 使用localStorage保存数据
  • 图表可视化: 集成Chart.js图表库
  • 现代UI: 基于CSS Grid和Flexbox的现代布局

📱 使用方法

打开浏览器访问 https://aicoding.juejin.cn/pens/7510151982553530379

基本操作

  1. 添加记录: 点击右下角的"+"按钮快速添加各类记录
  2. 查看数据: 在仪表板查看今日健康概况
  3. 管理模块: 点击左侧导航切换不同功能模块
  4. 设置习惯: 在习惯养成模块创建和管理健康习惯

移动端使用

  • 在移动设备上使用底部导航栏
  • 支持触摸手势和响应式操作
  • 可添加到主屏幕作为应用使用

🎨 界面特色

设计风格

  • 简约清新: 以健康绿色为主色调
  • 卡片式布局: 信息结构清晰明了
  • 动画效果: 流畅的交互动画
  • 图标语言: 直观的FontAwesome图标

交互体验

  • 一键操作: 大部分功能都可一键完成
  • 即时反馈: 操作后立即显示结果
  • 智能提示: 贴心的使用提示和引导
  • 无障碍: 支持键盘导航和屏幕阅读器

📊 数据管理

数据存储

  • 所有数据存储在浏览器本地
  • 支持数据导出和备份
  • 隐私安全,无需联网

数据类型

  • 运动数据: 类型、时长、强度、卡路里
  • 饮食数据: 食物、分量、营养成分、饮水量
  • 睡眠数据: 时间、时长、质量评分、环境
  • 习惯数据: 名称、类型、完成记录、连续天数

🔧 自定义配置

主题设置

  • 点击右上角月亮/太阳图标切换主题
  • 支持系统主题自动跟随

提醒设置

  • 可开启/关闭各类健康提醒
  • 护眼提醒间隔可调节
  • 习惯提醒时间自定义

🌟 未来规划

  • 数据云端同步
  • 社交分享功能
  • 更多运动类型支持
  • AI健康建议
  • 第三方设备集成
  • 多语言支持

开始您的健康生活管理之旅吧! 💪✨