Cyrillic to Latin Transliteration Utility

Overview

A high-performance, single-file browser-based tool designed to convert Cyrillic-based scripts into Latin (Roman) alphabet characters in real-time. This application is designed to be the go-to utility for data processing, localization, and quick script conversion without external dependencies.

Core Features

• Real-Time Conversion: Instantaneous character-by-character mapping as the user types or pastes text.
• Multi-Language Support: Preset mapping schemes for Russian, Ukrainian, Bulgarian, Serbian, and Belarusian.
• Standard Compliance: Toggle-able modes between ICAO, ISO 9, and simplified (common usage) transliteration standards.
• Batch Processing: Support for large text blocks with efficient string manipulation.
• One-Click Copy: Dedicated button to copy converted text to the clipboard.
• Statistics Module: Real-time display of character and word counts for both input and output.
• Reset Functionality: Quick clear action to reset the workspace.

UI/UX Layout

• Header: Minimalist navigation bar with the tool title and a language mode selector.
• Workspace: A split-pane layout (stacked vertically on mobile devices, horizontal on desktop) featuring a large text area for input (left/top) and a read-only output area (right/bottom).
• Toolbar: Located between the input and output panes, housing settings, standard selection, and utility buttons (Copy, Clear, Swap).
• Feedback: Subtle micro-interactions (e.g., "Copied!" toast notification, button hover states).

Aesthetic & Style

• Palette:
  • Background: #FFFFFF (Pure White)
  • Primary: #2563EB (Vibrant Blue for Actions)
  • Text: #1F2937 (Dark Slate)
  • Borders: #E5E7EB (Soft Gray)
  • Shadows: Subtle, soft elevation on the input/output containers.
• Typography: Sans-serif, human-readable fonts (e.g., Inter or system default) with ample whitespace for readability.
• Transitions: All state changes (buttons, tab switching) must use transition: all 0.2s ease-in-out.

Developer Directives & Constraints

• Single File: Deliver the solution as a single HTML file containing CSS in <style> tags and JS in <script> tags.
• Sandbox Compatibility: Do NOT use localStorage, sessionStorage, or cookies. Maintain application state using internal JavaScript variables only. If the page refreshes, the state will reset.
• No Popups: Do not use alert() or confirm(). Create custom modal elements within the DOM if user interaction is required.
• Light Mode Only: Ensure the CSS forces a light theme. Do not add toggle buttons for Dark Mode.
• Responsive: Use CSS Flexbox/Grid to ensure the split-pane layout stacks gracefully on screens smaller than 768px.
• Performance: Use vanilla JavaScript addEventListener to handle input events efficiently to avoid lag with large text blocks.