Reach the crest of every mile.
The official website and privacy policy for Milecrest, a ranked running game where you log runs, earn XP, climb competitive tiers, and share stylized rank cards.
- Overview
- Live Preview
- Tech Stack
- Project Structure
- Getting Started
- Pages & Routes
- Sections
- Design System
- Assets
- Accessibility
- SEO & Metadata
- Deployment
- Customization
- Browser Support
- Roadmap
- License
This repository contains the official static website for the Milecrest running app. It is a fast, dependency-free, fully responsive single-page landing site plus a dedicated, professionally structured privacy policy required for app-store distribution.
The design takes the gamified, dark "competitive rank" aesthetic as inspiration and rebuilds it entirely around Milecrest's own brand — the bunny mascot, the blue/violet/cyan gradient theme, and the seven-tier rank ladder (Bronze → Elite). No third-party screenshots or assets are used; all phone mockups are hand-built in CSS.
Highlights
- ⚡ Zero build, zero dependencies — plain HTML, CSS and a small vanilla-JS file.
- 🌑 Dark-first design system driven by CSS custom properties (matches the app's tokens).
- 📱 Fully responsive — mobile-first, with a hamburger menu and reflowing layouts.
- 🎬 Tasteful motion — scroll reveals, floating mascot, marquee, animated rank emblems (all respect
prefers-reduced-motion). - ♿ Accessible — skip links, semantic landmarks, keyboard-friendly nav, labelled controls.
- 📄 App-store-ready privacy policy at a clean
/privacy-policy/route.
Open the site locally (see Getting Started) or deploy it to any static host (see Deployment).
index.html → Landing page
privacy-policy/ → Privacy policy (clean route)
| Concern | Choice |
|---|---|
| Markup | Semantic HTML5 |
| Styling | CSS3 with custom properties, clip-path, gradients, color-mix() |
| Interactivity | Vanilla JavaScript (IntersectionObserver, no framework) |
| Fonts | Sora (display) + Inter (body) via Google Fonts |
| Media | PNG mascot stills + MP4 mascot loop |
| Build tooling | None — files are served as-is |
Milecrest-site/
├── index.html # Landing page (hero, features, ranks, mascot, CTA, FAQ)
├── privacy-policy.html # Redirect → /privacy-policy/ (back-compat)
├── privacy-policy/
│ └── index.html # Privacy policy (clean route, full legal content)
├── css/
│ ├── styles.css # Global design system + landing-page styles
│ └── legal.css # Long-form legal/content-page styles
├── js/
│ └── main.js # Sticky nav, mobile menu, scroll reveals
├── assets/
│ ├── images/ # App icon, adaptive icon, splash, favicon
│ └── mascot/ # Mascot stills (PNG) + loops (MP4)
├── Milecrest-README.md # The Milecrest app README (reference)
└── README.md # You are here
No installation or build is required — it's a static site.
A server makes the clean /privacy-policy/ route resolve exactly as it will in production:
# Any one of these, from the project root:
npx serve .
# or
python -m http.server 8000
# or
php -S localhost:8000Then open http://localhost:8000.
You can also double-click index.html to open it via file://. All internal links
(including the privacy policy) use relative paths and work without a server.
Tip: When served over HTTP,
https://your-domain/privacy-policy/resolves to the policy automatically. Overfile://, useprivacy-policy/index.html.
| Route | File | Purpose |
|---|---|---|
/ |
index.html |
Official landing page |
/privacy-policy/ |
privacy-policy/index.html |
Full privacy policy (app-store ready) |
/privacy-policy.html |
privacy-policy.html |
Redirect to the clean route (back-compat) |
The landing page is composed of the following sections:
- Navigation — sticky, blurs on scroll, collapses to a hamburger on mobile.
- Hero — headline, dual store badges, animated mascot with floating stat chips, key stats.
- Marquee — scrolling brand keywords.
- Feature showcase — four core pillars (rank, compete, track, earn XP).
- Alternating feature rows — three CSS phone mockups: rank card, leaderboard podium, live run.
- Rank ladder — the seven competitive tiers with glowing emblems.
- Mascot band — looping mascot video + supporting stills.
- Share cards — stylized rank-card showcases.
- Download CTA — store badges + platform note.
- FAQ — accessible
<details>accordions. - Footer — product/company links, support email, privacy link.
All tokens live as CSS custom properties at the top of css/styles.css and mirror the
Milecrest app's design system.
| Token | Value |
|---|---|
| Background | #0A0B0F |
| Surface / Raised | #14161D / #1C1F29 |
| Primary gradient | #3B82F6 → #8B5CF6 |
| Accent (cyan) | #22D3EE |
| Orange accent | #F08A3C |
| Success / Warning / Danger | #34D399 / #FBBF24 / #F43F5E |
| Text primary / secondary / muted | #F5F7FA / #9AA3B2 / #5B6473 |
Rank tiers: Bronze #CD7F32 · Silver #C0C0C0 · Gold #FFD700 · Platinum #5BC0EB
· Diamond #B9F2FF · Master & Elite (animated gradients).
- Display / headings: Sora · Body / UI: Inter
- Fluid headline sizing via
clamp().
- Radii: 16 (cards) · 24 (hero/CTA) · 999 (pills).
- Motion: scroll-reveal, floating mascot, marquee, animated tier emblems — all disabled under
prefers-reduced-motion: reduce.
Mascot and brand assets live in assets/. The bunny mascot is the brand mark; the app icon
is generated from the mascot head. See the app README for full asset provenance and generation prompts.
All shipped assets are original/licensed — no third-party stock art or competitor screenshots.
- Skip-to-content link on every page.
- Semantic landmarks (
header,nav,main,footer,article,section). - Keyboard-operable navigation and accordions; visible focus styles.
aria-label/aria-expandedon interactive controls; decorative media markedaria-hidden.- Motion gated behind
prefers-reduced-motion.
- Descriptive
<title>and meta descriptions per page. - Open Graph tags for rich link previews.
theme-color, favicon, and Apple touch icon.canonical+robotson the privacy policy.
This is a static site — deploy the folder to any static host.
- Connect the repository (or drag-and-drop the folder).
- Build command: none · Publish directory: project root (
.). - The clean route
https://your-domain/privacy-policy/works automatically.
- Push to a repo and enable Pages on the default branch (root).
- Visit
https://<user>.github.io/<repo>/.
Upload the files as-is. Directory index resolution serves /privacy-policy/ → privacy-policy/index.html.
Update the privacy policy's
<link rel="canonical">to your real domain before launch.
- Colors / theme: edit the
:roottokens incss/styles.css— a single-file restyle. - Copy: edit the relevant section in
index.html. - Store links: replace the placeholder
href="#"/href="#download"on the store badges with the real App Store and Google Play URLs once the app is live. - Privacy policy: edit
privacy-policy/index.html; update the company details, jurisdiction/governing-law and dates as needed. - Domain: update
canonicaland Open Graph URLs to your production domain.
Targets evergreen browsers (Chrome, Edge, Firefox, Safari). Uses modern CSS
(color-mix(), clip-path, backdrop-filter); these degrade gracefully in older engines.
- Wire real App Store / Google Play URLs into the store badges.
- Add a dedicated Open Graph share image (
og:image) sized 1200×630. - Add
sitemap.xmlandrobots.txtfor launch. - Optional: Terms of Service page alongside the privacy policy.
- Optional: analytics (privacy-friendly) once live.
Released under the MIT License — see the app repository for details. © 2026 Muhammad Waqar (Milecrest.io).
The MIT license covers the source code. The Milecrest name, logo mark, and mascot artwork are brand assets and are not granted under it.
Reach the crest of every mile · support@milecrest.io