Japanese Hiragana, Katakana, and Romaji Transliteration Tool

Overview

A high-performance, single-file browser utility designed to convert Japanese scripts (Hiragana and Katakana) into standard Romaji. This tool is built for students, linguists, and hobbyists who need a fast, private, and reliable way to handle Japanese text transliteration without the clutter of extra features or external dependencies.

Core Features

• Real-Time Transliteration: Instant conversion as the user types or pastes text.
• Script Detection: Automatically identifies Hiragana and Katakana input characters.
• Bulk Processing: Supports large text blocks, including sentences and paragraphs, not just single characters.
• Clipboard Sync: One-click "Copy to Clipboard" button for seamless integration into other apps.
• Clean Aesthetic: A professional, light-mode interface designed to reduce eye strain and improve readability.

UI/UX Layout

• Header: Contains the descriptive title and a brief sub-headline explaining the tool's function.
• Main Interaction Area:
  • A large, responsive textarea for user input (left/top on mobile, left on desktop).
  • An "Action" bar between input and output with clear "Convert," "Clear," and "Copy" buttons.
  • A secondary textarea for the generated Romaji output (right/bottom on mobile, right on desktop).
• Responsive Design: A flexible CSS Grid layout that switches from a stacked vertical layout (mobile) to a side-by-side split view (desktop).

Technical Implementation Directives

• Single File: All HTML, CSS (Tailwind CDN allowed), and JavaScript must be contained in a single file.
• No Persistence: Absolutely no usage of localStorage, sessionStorage, or cookies. The state must be purely held in component variables.
• Sandboxed Compatibility: The app must be compatible with a null-origin iframe. Avoid all external trackers, cookies, or calls to window.parent unless strictly necessary.
• Performance: Use event-driven JavaScript (input listeners) to ensure near-zero latency during conversion.

Design & Aesthetics

• Palette:
  • Background: #FFFFFF (White)
  • Surface: #F8FAFC (Very Light Gray)
  • Primary Text: #1E293B (Slate Gray)
  • Accent: #2563EB (Professional Blue for action buttons)
  • Borders: #E2E8F0 (Light Grayish-Blue)
• Transitions: Smooth CSS ease-in-out transitions for all hover states and UI toggles.
• Micro-interactions: Buttons should provide subtle visual feedback (e.g., slight lift effect or color shift) upon being pressed.

Developer Notes

• Use target="_blank" and rel="noopener noreferrer" for any external links (e.g., source code repository).
• Strictly forbid the use of alert(), confirm(), or prompt(). Use custom HTML modal elements if user notifications are required.
• Optimize for speed by pre-loading the mapping object for Japanese characters to Romaji in the JS initialization phase.