RC Car Tire Shore Durometer Comparison Tool

Overview

A clean, professional, and highly responsive single-file web application that allows RC car enthusiasts to visualize and compare various Shore A tire compound ratings. This tool simplifies the complex relationship between rubber hardness, tire grip, and expected tread wear, providing instant feedback based on the user's selected hardness value.

Technical Directives

• Architecture: Must be a single, standalone HTML file. All CSS and JS must be embedded within the <style> and <script> tags.
• Storage Constraints: ABSOLUTELY NO usage of localStorage, sessionStorage, or cookies. The application state must be maintained entirely in memory using JavaScript variables.
• Compatibility: Must be fully functional within a sandboxed iframe. Avoid using any functions like alert(), confirm(), or prompt().
• Aesthetics: Light-mode only. Use a modern, SaaS-inspired design language (clean white backgrounds, subtle shadows, crisp typography like Inter or system-ui).

Features

• Interactive Shore Slider: A high-precision range slider allowing users to select a Shore A rating (e.g., 20A to 60A).
• Visual Performance Gauge: A circular or bar-based visualization that dynamically changes color (Red for high grip/soft, Blue for low grip/hard) based on the slider value.
• Dynamic Performance Data: An info section that updates instantly, showing:
  • Grip Level: [Low/Medium/High]
  • Wear Rate: [Slow/Medium/Fast]
  • Ideal Surface: [Carpet, Asphalt, Concrete, Dirt]
• Comparative Reference Table: A static, readable summary table below the visualizer that displays the full range of Shore ratings and their general performance characteristics for quick scanning.

UI Layout

1. Header: Clean, centered title with a brief subtitle explaining the purpose of the tool.
2. Interaction Zone: Centered slider control with clear numeric display of the current Shore rating.
3. Visualizer Section: A responsive "Performance Meter" showing a gauge that shifts appearance based on selected hardness.
4. Info Panel: A card-based area below the gauge displaying specific performance insights (Grip vs. Wear).
5. Reference Section: A clean, striped table layout below the main interactive area providing the full hardness scale breakdown.

Color Palette

• Background: #FFFFFF (White) and #F8FAFC (Very Light Gray) for containers.
• Primary Accent: #2563EB (Vibrant Blue - for the UI/Sliders).
• Warning/Soft Warning: #EA580C (Orange - for soft tire warnings).
• Text: #1E293B (Dark Blue-Gray) for primary text; #64748B (Muted Gray) for secondary text.

Animations & Micro-interactions

• Smooth Transitions: Use transition: all 0.3s ease-in-out for the gauge needle movement and color shifts.
• Hover Effects: Subtle shadow lifting (box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1)) on interactive components when hovered.
• Responsive Scaling: The entire layout must flex to a single column on mobile devices and expand to a clean centered card layout on desktops.