概览
什么是 HEU-keep
HEU-keep 是一个完全在浏览器中运行的生成器，用于创建 Keep 健身 App 风格的跑步摘要卡片——专门适配哈尔滨工程大学（HEU）的三个校园田径场。打开网页，填入你的运动数据，选择背景地图和轨迹样式，然后一键下载一张高清卡片，看起来和 Keep App 里的跑步截图一模一样。
打开后你会看到什么
页面由左右两个面板组成：
- 左侧面板——卡片的实时预览。你在右侧修改任何参数，左侧的卡片预览会即时更新。预览展示了 Keep 风格的完整卡片布局：背景地图、叠加在地图上的跑步轨迹、你的头像、天气图标、用户名、运动标题、里程数、日期和时间、温度、湿度、配速、总时长和消耗的卡路里
- 右侧面板——所有可调节的表单控件，按类别分组排列：运动数据（距离、配速、标题）、时间与环境（日期、时间、温度、湿度、风速）、地图与轨迹（选择校园场地、轨迹样式、是否使用渐变色、是否随机生成轨迹）、输出设置（导出图片的宽度）
页面上方有三个操作按钮："保存高清图片"（将当前预览卡片下载为 PNG 文件）、"预览"（在新标签页打开全分辨率的大图预览）、"备份"（另一种下载方式，用于浏览器兼容性回退）。
页面下方有两个数据管理按钮："保存配置"（将你当前的所有表单设置保存到浏览器的本地存储中，下次打开页面时自动恢复）、"重置"（清除所有已保存的数据，恢复为默认设置）。
两种视觉主题
HEU-keep 提供两个入口页面，分别对应不同的视觉风格：
- Classic（经典主题，入口文件 index.html）——毛玻璃风格的卡片设计，使用
backdrop-filter: blur()实现磨砂玻璃的半透明效果。卡片下方的背景是低多边形的环境光渐变叠加一层细腻的噪声纹理 - Liquid（液态主题，入口文件 liquid.html）——另一种视觉风格，卡片布局更宽、留白更多、配色方案偏冷色调。控制面板的排列方式也不同
两个主题共享所有的底层 JavaScript 逻辑和 IndexedDB 数据库——你在 Classic 主题中保存的配置，切换到 Liquid 主题后同样可以使用。它们只是 CSS 不同。
功能概览
| 功能 | 说明 |
|---|---|
| Keep 风格卡片 | 高保真还原 Keep App 的运动摘要卡片外观 |
| HEU 校园地图 | 内置 3 个校园田径场的卫星底图：南体育场、军工操场、北体育场 |
| 轨迹生成 | 5 种预设轨迹样式 + 自动随机生成轨迹（带 GPS 漂移模拟） |
| 实时预览 | 所有参数修改在左侧卡片上即时渲染，所见即所得 |
| 随机数据 | 设置距离和配速的最小/最大值范围，系统在范围内随机填充数值 |
| 高清导出 | 通过 html2canvas 以可自定义的宽度下载为 PNG 图片 |
| 本地持久化 | IndexedDB 保存你的配置、头像照片和自定义背景地图 |
| 自定义背景 | 上传你自己的地图图片替代内置的校园场地背景 |
| 手动绘制 | 用手指在 Canvas 上自由绘制跑步轨迹，替代自动生成 |
技术说明
HEU-keep 是一个纯浏览器端应用——不需要安装任何软件，不需要后端服务器（Flask 后端是可选的，仅用于在某些低性能手机上加速轨迹坐标的计算），不依赖任何前端框架。打开 HTML 文件即可使用。数据存储在浏览器的 IndexedDB 中，不会上传到任何服务器。