Product Specification: Binary to Decimal Converter

1. Overview

A high-performance, single-file browser utility that converts binary strings (base-2) into decimal numbers (base-10). The primary value proposition is the "Step-by-Step Math" view, which helps students and developers understand the conversion mechanics.

2. Core Features

• Real-time Conversion: Instant calculation as the user types.
• Input Validation: Restrict inputs strictly to '0' and '1' characters.
• Mathematical Breakdown: A visual breakdown section that displays the formula: (bit * 2^position) + ... for every bit.
• Copy Functionality: Single-click button to copy the decimal result.
• Clear/Reset: One-click functionality to clear the workspace.
• Responsive UI: Elegant, fluid layout for mobile, tablet, and desktop.

3. UI/UX Specification

Layout Structure

• Header: Simple, centered title ("Binary to Decimal Converter") with a clean, sans-serif typeface.
• Input Section: A prominent, large text input field with clear error feedback if non-binary characters are entered.
• Result Display: A primary large-text card showing the calculated decimal result.
• Educational Expansion: A collapsible or persistent table section showing the position, binary value, calculation (e.g., 1 * 2^3), and product for each bit.

Aesthetic Guidelines

• Color Palette: Clean, professional light mode.
  • Background: #F9FAFB (Soft Gray)
  • Card Background: #FFFFFF (White)
  • Primary Accent: #2563EB (Blue-600)
  • Text: #111827 (Gray-900)
  • Border/Subtle elements: #E5E7EB (Gray-200)
• Transitions: Smooth fade-in effects for the explanation table. Use CSS transition on all interactive elements (hover states).
• Typography: Inter or system-default sans-serif, with tabular figures enabled for the math section to ensure column alignment.

4. Technical Implementation Directives

• Architecture: One single .html file. CSS in <style> tag, JS in <script> tag.
• Sandboxed Constraints:
  • No localStorage, sessionStorage, or cookies. Use variable state only.
  • No alert()/prompt(). Use clean <div> based overlays or inline error messages for notifications.
  • All external assets (e.g., Lucide icons, Tailwind via CDN) must be included securely.
• Performance: Use oninput event listeners for instantaneous reactivity. Optimize the math rendering to avoid layout shifts (use fixed-width containers for math rows).
• Error Handling: If the user pastes an invalid string (containing characters other than 0 or 1), the UI must immediately highlight the error and provide a "Clean Input" helper button.