Unicode to Punycode Converter

Objective

Provide a professional, reliable, and high-performance browser-based utility to convert Internationalized Domain Names (Unicode) into their DNS-compatible Punycode format (ASCII). This tool is designed for developers, system administrators, and domain registrars.

Core Features

• Real-time Conversion: Instant translation of input as the user types.
• Bidirectional Support: Easy toggling to decode Punycode back to Unicode.
• Copy to Clipboard: One-click functionality to copy the generated ASCII result.
• Validation Engine: Automatically detects invalid domain formats and provides clear, non-intrusive feedback.
• Lightweight & Fast: Zero-latency execution using pure client-side processing.
• Zero-Persistence: Operates entirely in memory, ensuring absolute security and privacy.

Layout Architecture

• Header: Simple, clean title indicating the function (e.g., "Internationalized Domain Name Converter").
• Main Tool Area:
  • Two-Column Split (Desktop) / Vertical Stack (Mobile): Left panel for Unicode input, Right panel for Punycode output.
  • Transformation Button: A prominent action button to trigger conversion.
  • Copy Button: Integrated into the output container for immediate use.
• Instruction Section: Brief, helpful text below the main tool explaining the 'xn--' prefix and IDN requirements.

Visual Design & Aesthetics

• Theme: Strict Light Mode only.
• Color Palette:
  • Primary Action: #2563EB (Vibrant SaaS Blue)
  • Background: #F9FAFB (Soft Off-White)
  • Container Background: #FFFFFF (Pure White) with subtle #E5E7EB borders and soft shadows.
  • Typography: Inter or System Sans-Serif, 16px base size.
  • Accent: #10B981 (Success Green for copy confirmation).
• Transitions: Smooth fade-in on interactions, 200ms easing for button hover states.

Implementation Directives

• Single File: All HTML, CSS, and JS must be embedded in one file.
• Sandbox Security:
  • No Storage: Absolutely no usage of localStorage, sessionStorage, or cookies. Use only volatile variable-based state.
  • No Popups: Replace alert() or prompt() with custom DOM-based modal overlays.
• External Libraries: Use a CDN-hosted library like punycode.js to handle the conversion logic to ensure robustness.
• Accessibility: Ensure high contrast, semantic HTML5 tags (main, section, button), and responsive meta-viewport settings.
• Iframe Compatibility: The app must render correctly inside a sandboxed iframe with the allow-scripts permission.