Free Online Running Pace Calculator Technical Specification

Overview

A high-performance, single-file browser utility designed to help runners calculate pace, time, and distance. The app features a clean, professional aesthetic and requires no backend processing.

Core Features

• Tri-Mode Calculation Engine: Users can calculate Pace (given Time/Distance), Time (given Pace/Distance), or Distance (given Pace/Time).
• Unit Flexibility: Seamless toggling between Imperial (miles/min per mile) and Metric (km/min per km).
• Dynamic Split Table: Automatically generates a table of split times (e.g., every 1km or 1mi) based on the calculated pace.
• Real-Time Calculation: Results update instantly as the user types, using event listeners on input fields.
• Responsive Interface: Optimised for mobile devices, tablets, and desktops using CSS Flexbox/Grid.

UI/UX Design

• Aesthetic: Modern, light-mode interface using a crisp white/light gray background. High-contrast typography for readability.
• Input Section: Grouped inputs using clearly labeled radio buttons to switch between calculation modes.
• Results Section: A visually distinct card section with large, bold text for the primary result (e.g., "Your Pace: 5:30 min/km").
• Animations: Subtle fade-in animations for results and responsive transitions for input fields.

Technical Directives (Strict Compliance)

• Single File: All HTML, CSS, and JS must reside in one .html file. Use CDN links for any external assets (e.g., Google Fonts, Tailwind CSS).
• Stateless Operation: NO localStorage, sessionStorage, or cookies. The application must not save any user data.
• Iframe Compatibility: The tool will run in a sandboxed iframe. Do not use alert(), confirm(), or prompt(). Create custom CSS modals if interactivity is required.
• No External Dependencies: Do not use frameworks that require npm or build steps. Use standard DOM manipulation.
• Browser Support: Ensure the code runs correctly on current versions of Chrome, Firefox, Safari, and Edge.

Color Palette

• Primary: #2563eb (Blue - Call to Action)
• Background: #f8fafc (Very light grey)
• Surface: #ffffff (White cards)
• Text: #1e293b (Dark slate for high readability)
• Borders/Dividers: #e2e8f0 (Soft grey)

Development Roadmap

1. Setup: Create HTML5 structure with container-based layout.
2. Styling: Implement Tailwind CSS via CDN for rapid, consistent layout creation.
3. Logic: Write modular Vanilla JS functions to handle calculations based on mode selection.
4. UI Refinement: Add CSS transitions for smooth state changes.
5. Accessibility: Ensure all inputs have labels and correct aria attributes for screen readers.