Bicycle Chain Length & Drivetrain Capacity Calculator

Overview

A precision, browser-based tool designed to help cyclists and mechanics determine the exact chain length required for a drivetrain assembly. By inputting specific drivetrain geometry and component tooth counts, users can safely size their chains, preventing drivetrain damage and ensuring crisp, reliable shifting.

Core Features

• Precision Calculator: Inputs for Chainstay Length (mm), Largest Chainring (teeth), Smallest Chainring (teeth), Largest Cassette Cog (teeth), and Smallest Cassette Cog (teeth).
• Result Logic: Calculates exact link count, including rounding rules for standard chain links (pins).
• Capacity Checker: Calculates total drivetrain capacity to help users verify if their current rear derailleur can handle the gear range.
• Dynamic Visual Feedback: Shows a simplified diagram or text-based guidance on how to physically verify the length.
• Mobile-First Responsive Design: Large, touch-friendly inputs for use in a workshop or garage environment.

UI/UX Layout

• Header: Clean title area with a brief instructional sub-header.
• Input Section: A two-column grid (on desktop) or single column (mobile) with clear input fields using floating labels for a modern SaaS look.
• Result Section: A prominent, high-contrast 'Result Card' that displays the recommended chain length in large, bold typography.
• Instructional Footer (Non-Sticky): A section below the results explaining how to measure chainstay length safely.

Aesthetic & Style

• Color Palette: A clean, professional palette featuring a crisp white background (#FFFFFF), slate grey text (#334155) for readability, and a vibrant primary accent color (e.g., #0ea5e9 - Sky Blue) for buttons and key results.
• Typography: Sans-serif, human-readable fonts (Inter or System UI) with generous whitespace.
• Micro-interactions: Smooth CSS transitions on hover states for buttons (subtle lift and shadow increase). Instant calculations using oninput listeners for a seamless, lag-free experience.

Developer Constraints & Directives

• Single File: All HTML, CSS, and JS must reside in one file. Use standard <style> and <script> blocks.
• No Storage: Due to the sandboxed iframe environment, do NOT use localStorage, sessionStorage, or cookies. All calculations must be stateless and performed on-the-fly.
• Safety: Do not use alert() or prompt(). If an error occurs (e.g., impossible gear ratios), display a styled message within a dedicated UI <div>.
• Links: All external references (if any) must include target="_blank" rel="noopener noreferrer".
• Light Mode Only: Strictly adhere to the light-mode color palette. Do not implement toggles for dark mode.
• Performance: Ensure zero dependencies where possible; if needed, use CDN links for Tailwind CSS for rapid styling.