一款专为健身爱好者打造的跟练计时 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 动画与渐变过渡
- 替换应用图标为全新设计的 Logo
- 更新 PWA 图标(192x192 / 512x512)
- 更新 Android 所有 mipmap 密度图标(mdpi ~ xxxhdpi)
- 新增自动深色模式,跟随系统
prefers-color-scheme切换 - 使用 CSS 自定义属性(变量)实现主题切换
- 所有页面、卡片、导航栏、输入框等组件适配深色主题
- 深色模式下背景、阴影、边框、文字颜色全面优化
- 训练控制按钮从 Emoji 替换为精致 SVG 图标(上一个 / 暂停 / 下一个)
- 训练最后 3 秒语音倒计时播报(三、二、一),支持中/英/西三语
- 使用 Web Speech API 实现语音合成
- 首页新增「训练日历」卡片,日历网格展示当月训练天数
- 支持月份前后切换,训练日高亮标记
- AI 问答卡片容器改为全透明(无背景 / 无边框 / 无阴影)
- 每张卡片独立承载视觉样式(毛玻璃背景 + 圆角 + 阴影)
- 修复"框中内容甩动"的视觉问题,实现真正独立卡片飞入飞出
- AI 智能定制问答流程改为独立 DOM 卡片元素
- 3D 透视飞入动画(perspective + translate3d + rotateY + rotateZ)
- 前进/后退方向感知:前进从右侧飞入,后退从左侧飞入
- 旧卡片退出动画与新卡片进入动画并行播放
- 接入 MiniMax M2.7 大语言模型,AI 智能生成个性化训练计划
- 多步卡片式问答流程:基本信息 → 经验水平 → 目标 → 器材 → 部位 → 身体状况 → 偏好
- 卡片切换扑克牌抽出动画(旋转 + 弹性缩放)
- 导航栏重新布局为两行:品牌名 + 语言/头像在上,页面标签在下
- 修复手机端语言切换和登录按钮被挤出屏幕的问题
- 使用 Capacitor 打包为 Android 原生应用
- 原生 Google 登录(通过 @capacitor-firebase/authentication)
- Firebase 配置集成到 Android 原生层
- 应用已上架 Google Play 内部测试
- Google 登录(Firebase Authentication)
- 手机号 + 短信验证码登录
- 训练数据自动云端同步(Firestore)
- 用户头像与个人菜单
- 跳过登录可仅本地使用
- 完成训练后自动上传数据到云端
- 支持中文、English、Español 三种语言
- 导航栏语言切换器,一键切换
- 所有 UI 文本、按钮、提示、验证消息均已国际化
- 语言偏好自动保存到本地存储
- 应用更名为「天枢智元·智练」
- 修复训练中页面闪烁问题(circular reveal 动画竞态修复)
- 训练时「下一个」显示下一个不同动作名,而非同动作下一组
- 快速切换步骤时不再出现背景闪烁
- 新增「记录」页面,自动保存每次训练记录(计划名、时长、动作详情)
- 训练完成页面全新设计:白色背景 + 详细训练报告(动作清单、统计数据)
- 修复完成页面卡死/无法点击的 bug(fireworks canvas 定位冲突修复)
- 换动作时自动插入休息环节(时长与上一动作组休一致)
- 侧边进度条加粗加亮,奔跑小人更清晰可见
- 修复训练完成后页面下移无法点击的 bug
- 三个控制按钮融合成庆祝按钮的动画更丝滑(弹性缩放 + 交错过渡)
- 侧边进度条改为奔跑小人图标,位置反映整体进度
- 训练画面显示动作提示(支持导入计划中的 💡 提示行 + 内置 30+ 常见动作提示库)
- 新增侧边竖向进度条
- 记次数动作(非计时)显示"完成"按钮,不再倒计时
- 最后一个动作完成后三按钮融合 → 烟花庆祝动画
- Canvas 粒子烟花系统
- 首页背景改为白色底 + 彩色浮动泡泡动画
- 所有卡片和表单统一为半透明毛玻璃风格
- 所有按钮改为 Apple Liquid Glass 质感(backdrop-filter 磨砂玻璃)
- 修复手机端按钮和卡片布局错乱
- 全新智能导入解析器:支持分节标题、编号动作、em-dash 分隔、范围次数、每侧标注、复合热身、有氧描述等复杂格式
- 动作切换时从"下一个"按钮位置展开圆形色彩揭示动画(clip-path GPU 加速)
- 35 种鲜艳渐变色,Fisher-Yates 洗牌保证整套训练不重复
- 动作切换时背景色流畅渐变过渡
- 新增 README 项目说明
- 全屏跟练计时器
- 手动创建 / JSON 导入 / 智能生成训练计划
- PWA 离线可用,可安装到主屏幕
- GitHub Pages 自动部署
MIT