Bicycle Spoke Tension Meter Conversion Calculator

Overview

This single-file application acts as a professional-grade conversion utility for bicycle mechanics and wheel builders. It translates raw numerical readings from mechanical spoke tension meters into standardized Kilogram-force (KgF) values. The interface is optimized for rapid use in a workshop environment.

Technical Specification

1. Architecture & Constraints

• Self-Contained: The entire application must exist in one HTML file using <style> and <script> tags.
• Storage: Absolutely no localStorage, sessionStorage, or cookies. Calculations are transient and held in-memory.
• Performance: Zero external dependencies beyond a single CSS framework (Tailwind) and Google Fonts (Inter) linked via CDN.
• Iframe Safe: No alert() or prompt() calls. All UI interactions must be self-contained custom modals or direct DOM manipulation.

2. UI Layout

• Header: A clean, centered title "Spoke Tension Converter" with a brief subtitle explaining the tool's utility.
• Main Tool Area (Two-Column Responsive Grid):
  • Left Column (Inputs):
    • Dropdown: Tension Meter Model (e.g., "Model A", "Model B").
    • Dropdown: Spoke Gauge (12g to 15g) and Shape (Round, Aero).
    • Input: Numerical value from the meter (range 0-40).
  • Right Column (Results):
    • Primary Display: A large, high-contrast digital readout showing the calculated KgF.
    • Secondary Info: A dynamically generated reference table showing "next-step" tension values for standard adjustments (e.g., +1 turn, -1 turn).
• Reference Tab: A static, scrollable table view that displays the full conversion chart for the selected tool/gauge for quick visual reference.

3. Aesthetics & Design

• Color Palette:
  • Background: #f8fafc (Slate 50).
  • Primary: #2563eb (Blue 600) for active buttons and results.
  • Text: #1e293b (Slate 800) for high readability.
  • Accents: #e2e8f0 (Slate 200) for borders and separators.
• Animations:
  • Smooth fade-in for result values when inputs change.
  • Subtle box-shadow transition (from shadow-sm to shadow-md) on input focus.
  • Micro-interactions: Button hover scaling and click feedback using Tailwind transition classes.

4. Core Features

• Real-time Conversion: As the user types in the meter reading, the KgF value updates instantly without requiring a submit button.
• Input Validation: Restrict numeric inputs to the realistic ranges of mechanical tension meters to prevent erroneous calculations.
• Responsive Design: Mobile-first stack; inputs are large enough for touch interaction, and columns stack vertically on screens smaller than 768px.
• Clean UI: No cluttered toolbars or footer junk. The tool should feel like an integrated part of a high-end workshop diagnostic suite.