Roman Numeral Converter Technical Specification

Overview

A high-performance, single-file browser application designed for instantaneous translation between standard integers (Arabic numerals) and Roman numerals. The application focuses on clarity, speed, and ease of use.

Core Features

• Bi-directional Conversion: Switch between 'Number to Roman' and 'Roman to Number' with a single click.
• Real-Time Processing: Conversion happens instantly as the user types, without needing to click a button.
• Error Handling: Validates inputs in real-time, highlighting errors if invalid characters (in Roman mode) or out-of-range numbers are detected.
• Clipboard Functionality: One-click copy for the conversion result.
• Zero-Storage Logic: All logic is purely in-memory; no data is saved or retrieved, complying with sandboxed environments.

UI/UX Specification

• Header: Clean, centered navigation-less header with the app title.
• Main Tool Area: A large, centered card containing:
  • Mode Toggle: A stylish segmented button control to switch input modes.
  • Input Field: Large, high-contrast text input with focus rings.
  • Result Area: Large, prominent typography for the output, clearly separated from the input.
• Color Palette:
  • Background: bg-slate-50 (soft light gray/white).
  • Primary Action: indigo-600 for buttons and highlights.
  • Text: slate-900 for readability, slate-500 for labels.
  • Error States: Subtle red-500 text indicators.
• Animations: Smooth opacity transitions when toggling modes and subtle scaling on input focus to enhance the "SaaS" feel.

Technical Implementation Directives

• Single File: All HTML, Tailwind CSS (via CDN), and Vanilla JavaScript must reside in a single HTML file.
• Sandboxed Compatibility:
  • Do not use localStorage or sessionStorage.
  • Do not use alert(), prompt(), or confirm(). Create custom modal divs if user feedback is needed.
• Responsive Design: Use Tailwind CSS utility classes to ensure a fluid layout that scales from mobile devices to widescreen desktops.
• Performance: Use event listeners for input changes to ensure zero-latency feedback.
• Security: Ensure all external links are target="_blank" rel="noopener noreferrer". Do not execute any external scripts beyond CDNs.