Build an ASCII Art Generator with AI

Build a single-page ASCII art text generator as a static HTML/CSS/JS site. Use a dark theme with background #0f0f17, card surfaces #12121a, and accent color #ec4899 (pink). Center the content at max-width 800px. The page has a text input at the top, font style controls, and a large output preview below. Text Input: A text input field (not textarea) at the top where users type their message. Maximum 30 characters. Below it show a character counter "12/30". The output updates in real time as the user types. Font Style Selector: Five buttons showing the font name and a tiny 2-line preview of that font style. The five styles are: 1. "Standard" — classic FIGlet-style standard font. Each character is 6 lines tall, using characters like |, /, \, _, and spaces. Implement the full A-Z uppercase alphabet plus 0-9 and common punctuation (space, !, ?, ., -). Each letter is defined as an array of 6 strings (one per line). Example: A = [" _ ", " / \\ ", "/ _ \\", "| |_| |", "| _ |", "|_| |_|"]. Map every supported character to its 6-line ASCII representation. 2. "Block" — bold, blocky characters using hash (#) symbols and spaces. 5 lines tall, wider characters. Example: A = ["#####", "# #", "#####", "# #", "# #"]. Every letter should be recognizable as a thick block letter. 3. "Banner" — horizontal banner style using # characters, 7 lines tall and proportionally wide. More detailed than Block with smoother curves approximated. Example: H = ["# #", "# #", "#####", "# #", "# #", "# #", "# #"]. 4. "Slant" — italic/slanted style using /, \, |, and _ characters. 6 lines tall with characters leaning to the right. Example: A = [" ___", " / |", " / /| |", " / ___ |", "/_/ |_|", " "]. 5. "Small" — compact 3-line tall font using minimal characters. Example: A = [" _ ", "|_|", "| |"]. Compact enough for longer text while still readable. Implement all 26 uppercase letters (A-Z), digits 0-9, space, and punctuation (! ? . , - : ;) for every font. The letters are hardcoded as JavaScript objects mapping each character to its array of line strings. When rendering, concatenate the arrays horizontally line by line with a 1-character space gap between letters. Width Control: A slider (40-120 characters, default 80) that sets the maximum output width. If the rendered text exceeds this width, break onto a new set of lines (word-wrap at the character boundary, not mid-letter). Show the current width value next to the slider. Border/Frame Options: A dropdown with frame styles: - None (default): no border - Simple: surround with +---+ and | ... | box using dashes and pipes - Double: use unicode box drawing (or = and ||) for a double-line border - Stars: border of * characters - Hash: border of # characters The frame adds a 1-character padding inside the border. Preview Area: A large pre/code block with monospace font (Courier or 'Fira Code', 0.7rem on desktop, auto-sizing on mobile), dark background (#0a0a12), subtle border, and generous padding. The text is selectable. Show the output dimensions below the preview: "Width: 47 chars, Height: 6 lines." Action Buttons below the preview: - "Copy ASCII Art" — copies the rendered text including frame to clipboard - "Copy as HTML Comment" — wraps in for embedding in source code - "Download .txt" — downloads as a text file named ascii-art.txt The text input should auto-uppercase the input since the fonts only support uppercase. Show a small note: "Supports A-Z, 0-9, and basic punctuation." If an unsupported character is typed, replace it with a space-width blank in the output. Make it responsive: on mobile, the preview area scrolls horizontally for wide ASCII art, the font buttons stack into a 2x3 grid, and the slider uses full width. Auto-focus the text input on page load. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].