International Shoe Size Converter Technical Specification

Overview

This single-file web application serves as a clean, efficient utility for users to convert shoe sizes across multiple international standards (US, UK, EU, CM, JP). Designed for ease of use, it allows users to select their current shoe size system and instantly view the corresponding sizes in other regions. It is fully mobile-responsive and built for speed.

Core Features

1. Gender/Age Mode Toggle: Dedicated tabs or switches for Men, Women, and Kids (Toddler/Youth).
2. Dynamic Conversion Engine: Real-time input handling. As the user changes the source size or region, all other fields update automatically.
3. Multi-Region Support: Provides output for US, UK, EU, CM, and Japanese (JP) standards.
4. Reset Functionality: Clear button to reset all fields to default states without page reload.
5. Instructional Context: Small, unintrusive helper text explaining that brand-specific size charts should be prioritized.

UI/UX Layout

• Header: A clean, centered title "International Shoe Size Converter" with a minimal description below it.
• Main Tool Area: A centered card-based container with a soft shadow effect.
  • Selection Row: Segmented buttons for gender/age group.
  • Input Group: Two dropdowns (or select inputs) for the "From" system and the "To" system, plus a numeric input for the actual size.
  • Result Display: A highly visible, large-font result area that displays the equivalent size clearly.
• Responsiveness: The tool uses a CSS Grid/Flexbox approach. On mobile, the card takes 95% of the screen width; on desktop, it caps at a 600px width with elegant padding.

Color Palette (Light-Mode Only)

• Background: #F9FAFB (Cool gray off-white)
• Card Background: #FFFFFF
• Primary Accent: #2563EB (Vibrant blue for buttons/active states)
• Text Primary: #111827
• Text Secondary: #6B7280
• Borders: #E5E7EB

Technical Implementation Constraints

• Single File: All CSS and JavaScript must be contained within a single HTML file.
• Zero External Storage: No localStorage, sessionStorage, or cookies. Use state variables within the JavaScript scope.
• No Popups: Use CSS-based modal or standard UI element updates for messages/warnings. Never use alert() or confirm().
• Performance: Heavy use of Vanilla JS input event listeners for instant, zero-latency calculation.
• Accessibility: Semantic HTML5 tags (<main>, <header>, <section>). High contrast ratios for all text elements.
• Iframe Compatibility: App must function correctly when served via srcdoc or inside a sandboxed iframe without access to cookies or external storage APIs.

Animations & Micro-interactions

• Transitions: Smooth 0.2s ease-in-out transitions on button hovers and focus states.
• Feedback: A subtle "pulse" or shadow intensity change when the calculated result updates, ensuring the user notices the change without distraction.