Technical Specification: Text-Based Pricing Menu Generator

Overview

A browser-based utility designed to help content creators generate structured, copy-pasteable pricing menus using ASCII characters. This tool resolves the common issue of text formatting being lost in social media bios and automated messaging systems.

Core Features

• Dynamic List Management: Users can add, delete, and re-order unlimited pricing items (Service Name + Price).
• Instant Live Preview: A real-time rendering window shows exactly how the text will appear once copied.
• Style Presets: Toggle between different ASCII framing styles (e.g., Simple Box, Minimalist Divider, Double-line Border).
• Intelligent Padding: Automatically calculates the necessary spacing and alignment to ensure a clean, block-like appearance.
• One-Click Copy: A dedicated button to copy the final ASCII block to the system clipboard.

UI/UX Layout

• Header: Clean, minimalist title with a short helper text description.
• Main Interaction Area:
  • Left/Top Pane: A card-based form for adding menu items (two inputs: 'Service Name' and 'Price'). Includes buttons for 'Add Item' and 'Clear All'.
  • Right/Bottom Pane: A dedicated 'Preview & Copy' box. This box will contain the raw generated text. The background of this box should be a light, neutral gray to contrast with the white page background.
• Global Styles: No dark mode. Focus on high-contrast black text on white backgrounds, soft shadows for card depth, and a primary accent color (e.g., a vibrant blue or indigo) for buttons.

Technical Constraints & Directives

• Single File Architecture: All HTML, CSS (Tailwind via CDN), and Vanilla JavaScript must be contained in a single file.
• Sandboxed Execution:
  • DO NOT use localStorage, sessionStorage, or cookies. All data must be handled in-memory using JavaScript variables/arrays.
  • No Popups: Replace alert() or prompt() with custom in-app notifications (e.g., a small "Copied!" toast message).
• Performance: Use efficient event listeners to update the preview only when necessary, keeping the interface fluid.
• Accessibility: Ensure all inputs have proper labels for screen readers. The 'Copy' button must provide visual and aria-label feedback.