Bicycle Spoke Tension to KgF Conversion Tool

Overview

This single-file application is a precision utility designed for bicycle mechanics and cycling enthusiasts to convert raw spoke tension meter readings into standard kilograms-force (KgF). The tool eliminates the need for physical lookup tables, providing a fast, responsive interface to ensure accurate wheel building and truing.

Technical Requirements

• Architecture: Single HTML5 file containing all CSS and Vanilla JavaScript.
• Storage: No localStorage, sessionStorage, or cookies allowed. All calculations are performed in-memory.
• Compatibility: Must function perfectly within a sandboxed iframe. No popups or external dependencies beyond allowed CDNs (e.g., Tailwind CSS via CDN).
• Design: Modern, clean, "SaaS" aesthetic. Bright light mode, crisp typography, and intuitive spacing.

Core Features

• Dynamic Converter: Input field for raw tensiometer readings with real-time conversion updates.
• Profile Selection: Dropdown menu for Spoke Type (14g, 15g, Bladed, Aero) and Material (Steel, Titanium, Alloy).
• Visual Tension Gauge: A color-coded radial bar or horizontal meter indicating if the resulting tension is Low (Yellow), Optimal (Green), or High (Red).
• Batch Conversion Table: Ability to input a series of readings and generate a table of results for a full wheel build.
• Responsive Design: Optimized for mobile phones (to be used in the workshop) and desktop monitors.

UI Layout

• Header: Clean, centered title with a brief subtitle describing the tool's purpose.
• Input Panel: A card-based layout featuring a large input for the meter reading, a selector for the spoke brand/gauge, and a 'Convert' button.
• Results Section: A prominent display showing the calculated KgF value. Below this, a dynamic table displays converted values for quick reference.
• Reference Sidebar/Section: A non-intrusive section providing general tips on safe tension ranges for different wheel types (Road, MTB, Gravel).

Styling & Aesthetics

• Color Palette: Professional light aesthetic. Uses a base of #FFFFFF (background), #F8FAFC (secondary background), #0F172A (primary text), and a muted vibrant accent color like #3B82F6 (blue) for primary actions.
• Typography: Sans-serif, legible fonts (e.g., Inter or System UI font stack).
• Interactions: Subtle hover effects on inputs and buttons using CSS transitions. Results should fade in gracefully.

Implementation Directives

1. No External Frameworks: Use pure Vanilla JS for all logic.
2. No Popups: Do not use alert() or prompt(). Create custom CSS/JS modals if an error needs to be communicated.
3. Accessibility: Ensure all inputs have proper aria-labels and the contrast ratio meets WCAG 2.1 guidelines.
4. Performance: The app must be lightweight and load instantaneously, even on mobile data connections.