Overview
What is HEU-keep
HEU-keep is a browser-based generator that creates Keep-style running summary cards, adapted for Harbin Engineering University (HEU). Open the page, fill in your workout data, customize the map and track, and download a high-resolution card that looks just like a real Keep workout screenshot.
What you see when you open it
The page has two panels side by side:
- Left panel — a live preview of your card. Changes appear instantly as you type. Shows the Keep-style layout: background map, running track overlay, your portrait, weather icon, username, workout title, mileage, date and time, temperature, humidity, pace, duration, and calories.
- Right panel — form controls grouped by category: Workout Data, Time and Environment, Map and Track, Output Size.
Top buttons: Save HD Image (download as PNG), Preview (open full-resolution preview), Backup (alternative download method).
Bottom actions: Save Config (persist settings to browser storage), Reset (clear all saved data).
Two visual themes
HEU-keep has two entry pages:
- Classic (index.html) — glassmorphism card with ambient background
- Liquid (liquid.html) — alternative visual treatment with a different card style
Feature overview
| Feature | Description |
|---|---|
| Keep-style card | High-fidelity recreation of the Keep app workout summary card |
| HEU map scenes | 3 campus sports venues: South Field, Jungong Field, North Field |
| Track generation | 5 preset track styles + auto-generated random tracks with GPS drift simulation |
| Live preview | All changes render instantly on the left panel |
| Random data | Set min/max ranges for distance and pace, the app fills in random values |
| High-res export | Download as PNG at your chosen width with html2canvas |
| Local persistence | IndexedDB saves your config, portrait photo, and custom background |
| Custom background | Upload your own map image to use as the card background |
Next
Learn the step-by-step workflow in How to Use.
See also: Technical post: Building HEU-keep — deep dive into elliptical track decomposition, random walk drift algorithms, color gradient state machine, and off-screen export pipeline.