我的 Workouts Page 借着 AI 的东风又进行了重新改版，全部采用亮色主题，实现了以下功能：

  1. 网站导航悬浮在顶端
  2. 跑步的年份也悬浮在顶端
  3. 展示每年新增的 Workout 地点，并附带首次此地点的活动详情
  4. 地图右下角显示运动的详细信息，选中运动详情会在地图区域显示运动轨迹，并在标题显示百分比
  5. 全新隐私模式：地图轨迹会自动偏移一定的角度和距离，且在代码中js文件也记录的是偏移的轨迹，原始的轨迹仍然保留，但是不对外展示
  6. total 年份标签会显示所有的运动城市，虽然轨迹隐藏了，但是仍然可以准确统计城市，并且地图区域显示经历的城市高亮显示。
  7. Summary 页面亮色展示统计信息
  8. Total 页面展示所有的统计，以及 Wonderful Workouts 轨迹，点击卡片会翻转出奖牌或者其他图片
  9. Luck 页面记录的是我的大象周边跑轨迹
  10. Daily 页面记录的每天的运动轨迹，并统计当年最长连续运动时间

thanks running_page

github 提交记录：

image-20250915142650362

附：网站截图
24991757816443_.pic

原文作者: liups.com

原文链接: http://liups.com/posts/workouts_page/

许可协议: 知识共享署名-非商业性使用 4.0 国际许可协议