Skip to content

TimWang123/fitness-app

Repository files navigation

💪 天枢智元·智练 (FitFlow)

一款专为健身爱好者打造的跟练计时 PWA 应用,告别训练时在计时器和计划之间来回切换的烦恼。

功能特性

  • 全屏跟练模式 — 鲜艳色彩背景 + 大字计时器 + 当前动作名称,训练时一目了然
  • 颜色过渡动画 — 动作切换时背景色流畅渐变过渡,视觉体验舒适
  • 多种计划来源
    • 手动创建训练计划
    • 导入 JSON / 文本格式计划
    • 根据身体数据(身高、体重、年龄、目标等)智能生成计划
  • 智能计时 — 自动切换训练 / 休息阶段,倒计时声音提醒 + 震动反馈
  • 离线可用 — PWA 技术,安装到主屏幕后无需网络即可使用
  • 跨平台 — iOS / Android / 桌面浏览器均可使用

在线体验

👉 https://timwang123.github.io/fitness-app/

安装到手机

平台 步骤
iOS Safari 打开 → 分享按钮 → "添加到主屏幕"
Android Chrome 打开 → 自动弹出安装提示 / 菜单 → "添加到主屏幕"

安装后以独立 App 形式运行,全屏无地址栏。

导入计划格式

支持 JSON 格式:

{
  "name": "胸肌训练日",
  "exercises": [
    { "name": "平板卧推", "sets": 4, "reps": 12, "duration": 45, "rest": 60 },
    { "name": "哑铃飞鸟", "sets": 3, "reps": 15, "duration": 40, "rest": 45 }
  ]
}

也支持简单文本格式:

胸肌训练日
平板卧推 4组 12次 45秒 休息60秒
哑铃飞鸟 3组 15次 40秒 休息45秒

技术栈

  • 纯 HTML / CSS / JavaScript,零依赖
  • PWA(Service Worker + Web App Manifest)
  • Web Audio API 声音提醒
  • Wake Lock API 屏幕常亮
  • CSS 动画与渐变过渡

更新日志

v1.0.18 — 全新应用图标

  • 替换应用图标为全新设计的 Logo
  • 更新 PWA 图标(192x192 / 512x512)
  • 更新 Android 所有 mipmap 密度图标(mdpi ~ xxxhdpi)

v1.0.17 — 自动深色模式

  • 新增自动深色模式,跟随系统 prefers-color-scheme 切换
  • 使用 CSS 自定义属性(变量)实现主题切换
  • 所有页面、卡片、导航栏、输入框等组件适配深色主题
  • 深色模式下背景、阴影、边框、文字颜色全面优化

v1.0.16 — SVG 按钮 + 语音倒计时 + 训练日历

  • 训练控制按钮从 Emoji 替换为精致 SVG 图标(上一个 / 暂停 / 下一个)
  • 训练最后 3 秒语音倒计时播报(三、二、一),支持中/英/西三语
  • 使用 Web Speech API 实现语音合成
  • 首页新增「训练日历」卡片,日历网格展示当月训练天数
  • 支持月份前后切换,训练日高亮标记

v1.0.15 — 卡片动画优化

  • AI 问答卡片容器改为全透明(无背景 / 无边框 / 无阴影)
  • 每张卡片独立承载视觉样式(毛玻璃背景 + 圆角 + 阴影)
  • 修复"框中内容甩动"的视觉问题,实现真正独立卡片飞入飞出

v1.0.14 — 独立卡片飞入飞出动画

  • AI 智能定制问答流程改为独立 DOM 卡片元素
  • 3D 透视飞入动画(perspective + translate3d + rotateY + rotateZ)
  • 前进/后退方向感知:前进从右侧飞入,后退从左侧飞入
  • 旧卡片退出动画与新卡片进入动画并行播放

v1.0.13 — AI 智能定制 + 导航优化

  • 接入 MiniMax M2.7 大语言模型,AI 智能生成个性化训练计划
  • 多步卡片式问答流程:基本信息 → 经验水平 → 目标 → 器材 → 部位 → 身体状况 → 偏好
  • 卡片切换扑克牌抽出动画(旋转 + 弹性缩放)
  • 导航栏重新布局为两行:品牌名 + 语言/头像在上,页面标签在下
  • 修复手机端语言切换和登录按钮被挤出屏幕的问题

v1.0.12 — Capacitor 原生打包

  • 使用 Capacitor 打包为 Android 原生应用
  • 原生 Google 登录(通过 @capacitor-firebase/authentication)
  • Firebase 配置集成到 Android 原生层
  • 应用已上架 Google Play 内部测试

v1.0.11 — 用户登录与云同步

  • Google 登录(Firebase Authentication)
  • 手机号 + 短信验证码登录
  • 训练数据自动云端同步(Firestore)
  • 用户头像与个人菜单
  • 跳过登录可仅本地使用
  • 完成训练后自动上传数据到云端

v1.0.10 — 多语言支持 (i18n)

  • 支持中文、English、Español 三种语言
  • 导航栏语言切换器,一键切换
  • 所有 UI 文本、按钮、提示、验证消息均已国际化
  • 语言偏好自动保存到本地存储

v1.0.9 — 天枢智元·智练品牌升级

  • 应用更名为「天枢智元·智练」
  • 修复训练中页面闪烁问题(circular reveal 动画竞态修复)
  • 训练时「下一个」显示下一个不同动作名,而非同动作下一组
  • 快速切换步骤时不再出现背景闪烁

v1.0.8 — 训练记录与完成报告

  • 新增「记录」页面,自动保存每次训练记录(计划名、时长、动作详情)
  • 训练完成页面全新设计:白色背景 + 详细训练报告(动作清单、统计数据)
  • 修复完成页面卡死/无法点击的 bug(fireworks canvas 定位冲突修复)
  • 换动作时自动插入休息环节(时长与上一动作组休一致)
  • 侧边进度条加粗加亮,奔跑小人更清晰可见

v1.0.7 — 体验优化与动作提示

  • 修复训练完成后页面下移无法点击的 bug
  • 三个控制按钮融合成庆祝按钮的动画更丝滑(弹性缩放 + 交错过渡)
  • 侧边进度条改为奔跑小人图标,位置反映整体进度
  • 训练画面显示动作提示(支持导入计划中的 💡 提示行 + 内置 30+ 常见动作提示库)

v1.0.6 — 跟练界面大改版

  • 新增侧边竖向进度条
  • 记次数动作(非计时)显示"完成"按钮,不再倒计时
  • 最后一个动作完成后三按钮融合 → 烟花庆祝动画
  • Canvas 粒子烟花系统

v1.0.5 — 白底彩色泡泡主题

  • 首页背景改为白色底 + 彩色浮动泡泡动画
  • 所有卡片和表单统一为半透明毛玻璃风格

v1.0.4 — Apple Liquid Glass 风格

  • 所有按钮改为 Apple Liquid Glass 质感(backdrop-filter 磨砂玻璃)
  • 修复手机端按钮和卡片布局错乱
  • 全新智能导入解析器:支持分节标题、编号动作、em-dash 分隔、范围次数、每侧标注、复合热身、有氧描述等复杂格式

v1.0.3 — 圆形揭示色彩过渡

  • 动作切换时从"下一个"按钮位置展开圆形色彩揭示动画(clip-path GPU 加速)
  • 35 种鲜艳渐变色,Fisher-Yates 洗牌保证整套训练不重复

v1.0.2 — 色彩过渡动画

  • 动作切换时背景色流畅渐变过渡
  • 新增 README 项目说明

v1.0.1 — 初始版本

  • 全屏跟练计时器
  • 手动创建 / JSON 导入 / 智能生成训练计划
  • PWA 离线可用,可安装到主屏幕
  • GitHub Pages 自动部署

License

MIT

About

FitFlow - 健身跟练PWA应用,支持计划创建、导入、智能定制和全屏跟练计时

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors