Technical Specification: Universal Base Converter for Programmers

1. Overview

A high-performance, single-file browser application designed to help developers and students perform real-time conversions between Binary, Octal, Decimal, and Hexadecimal number systems. The interface prioritizes speed, accuracy, and clear presentation for bitwise operations.

2. Shared Constraints & Compliance

• Architecture: Single-file HTML5/CSS3/Vanilla JS. No external build steps.
• Storage: ABSOLUTELY NO usage of localStorage, sessionStorage, or cookies. The application relies exclusively on transient JavaScript state.
• Aesthetic: Clean, professional "SaaS" light-mode design. No dark mode toggle.
• UI/UX: No browser-native prompts. All alerts and interactions must use custom HTML modals.
• Dependencies: Tailwind CSS via CDN for styling; Lucide icons for UI elements.

3. Feature Set

• Real-Time Multi-Base Conversion: Instant translation between inputs (Bin, Hex, Octal, Dec).
• Input Validation: Real-time highlighting of invalid characters (e.g., entering '9' in binary mode).
• Bit Grouping: Option to group binary digits by 4 (nibbles) or 8 (bytes) for better readability.
• Error Reporting: Clear, non-intrusive UI messages for invalid mathematical inputs.
• Copy-to-Clipboard: Single-click copy buttons for each output format.
• Clear Action: Quick reset functionality.

4. UI/UX Specification

• Layout:
  • Header: Simple, descriptive H1 title with a brief explanation subtext.
  • Main Area: A grid of input fields where changing one automatically updates all others.
  • Configuration Panel: A secondary section for display settings (padding, bit grouping toggle).
• Color Palette:
  • Primary Background: #FFFFFF (White)
  • Card Background: #F8FAFC (Slate 50)
  • Border/Accents: #E2E8F0 (Slate 200)
  • Text: #1E293B (Slate 800)
  • Primary Action Buttons: #2563EB (Blue 600)
• Animations: Subtle transition effects (150ms ease-in-out) on focus states and button hover states. No jarring transitions.

5. Implementation Directives

• Use BigInt for all calculations to ensure support for large integers, as standard JS Numbers are limited.
• Ensure mobile responsiveness using Tailwind's grid-cols and flex-col utilities. The layout should stack cleanly on small screens.
• Avoid any library that modifies the global prototype chain.
• All labels and inputs must follow W3C accessibility standards for screen readers.