ASCII Art ANSI Escape Code Colorizer & Previewer

A professional, browser-based utility designed to transform plain text ASCII art into vibrant, colorized terminal-ready text using ANSI escape codes. This tool empowers developers, system administrators, and artists to style their command-line interfaces.

Core Features

• Live Terminal Preview: Real-time rendering of how the text will appear in a standard terminal emulator.
• ANSI Sequence Generator: Automatically wraps plain text with ANSI escape codes based on selected colors.
• Standard Palette Support: Includes support for standard 16-color ANSI sets (black, red, green, yellow, blue, magenta, cyan, white).
• Copy-to-Clipboard: Seamlessly copy the formatted ANSI output to your buffer with a single click.
• Responsive Design: A clean, fluid layout that adapts perfectly from mobile devices to desktop monitors.

Technical Specification & Constraints

• Architecture: Must be a single, standalone HTML file containing all logic (Vanilla JS), styles (Tailwind CSS via CDN), and structure.
• Storage Directive: Strictly forbid the use of localStorage, sessionStorage, or cookies. All data must reside in memory variables. Do not attempt to persist user data.
• Sandboxed Environment: The app must function perfectly inside a null-origin iframe. Avoid all alert(), prompt(), and confirm() calls; use custom-built modal overlays if user interaction is needed.
• Performance: Use efficient string manipulation to update the ANSI preview without blocking the main thread.

UI Layout Design

• Header: Simple, clean application title with a high-contrast sans-serif font.
• Main Content: A split-screen dashboard.
  • Left Panel (Editor): A large, monospace textarea for raw ASCII input.
  • Right Panel (Preview): A scrollable terminal-style box that renders the final ANSI color output.
• Control Panel: Situated between panels, offering color swatches and style controls (bold, underline, reset).

Color Palette & Aesthetics

• Background: Clean off-white (#F9FAFB) for the application background, with white (#FFFFFF) cards.
• Accents: Professional, vibrant blue (#3B82F6) for primary action buttons and a neutral dark gray (#374151) for typography.
• Terminal Theme: The preview window should emulate a clean, high-contrast terminal feel (e.g., dark background inside the light-mode app container for the preview output).

Animations & Transitions

• Hover Effects: Smooth transition-all on all buttons, increasing shadow depth and scale upon interaction.
• UI Feedback: Subtle fade-in animations when the output is generated or updated.
• Responsiveness: Use CSS Grid/Flexbox to automatically wrap the editor and preview columns into a vertical stack on viewports smaller than 768px.