How to Use

Quick start

  1. Open index.html in your browser (or visit the online demo)
  2. Fill in your workout data on the right panel — the left preview updates instantly
  3. Choose a map background and track style
  4. Click Save HD Image to download the card as a PNG file

Step-by-step workflow

1. Enter workout data

Start with the Workout Data section:

  • Title — defaults to "Keep - Outdoor Run". Change to "Outdoor Ride" or "Outdoor Walk" as needed
  • Distance — how far you ran, in kilometers (e.g. 5.20)
  • Pace — your pace per kilometer (e.g. 5'30")
  • Random ranges — set min and max for distance and pace. When filled, the app auto-generates values within those ranges and updates the card automatically

Derived fields (duration, calories) are calculated automatically from distance and pace.

2. Set time and environment

In the Time and Environment section:

  • Date and time — year / month / day / hour / minute of your workout
  • Weather — choose from Sunny, Cloudy, or Overcast. The weather icon on the card updates accordingly
  • Temperature — in Celsius (e.g. 18)
  • Humidity — percentage (e.g. 65)

3. Choose map and track

In the Map and Track section:

  • Background — select a campus venue: South Field, Jungong Field, or North Field. Or upload a custom map image with the Upload Map button
  • Style — pick from 5 preset track styles (Style 1 to 5) or Default (no track). The track appears as a colored path on the map
  • Random — click to generate a unique random running track with realistic GPS-like drift. Each click produces a different path
  • Auto-generate — checkbox: when checked, the track is automatically redrawn whenever you change settings
  • Gradient color — checkbox: when checked, the track color changes along the path for a more dynamic look
  • Color change probability — how often the color shifts along the path (0.0 to 1.0)
  • Color change step — min and max step size for each color transition

4. Configure export size

In the Output Size section:

  • Width — set the export image width in pixels. Height is calculated automatically to maintain the Keep card aspect ratio. Leave blank to use the default preview size

5. Download your card

Click Save HD Image to download the card as a PNG file named "keep[Month][Day]Running.png".

If the main download does not work (some browsers block data URLs), try Preview (opens in a new tab where you can right-click to save) or Backup (alternative download method).

Next

Learn about the track generation system in Track Generation.