ASCII Art Emoticon & Kaomoji Combiner Specification

1. Overview

A browser-based, high-performance tool for browsing, filtering, and copying Japanese-style Kaomoji and ASCII art emoticons. The tool provides a clean, searchable, and responsive library of thousands of emoticons.

2. Core Features

• Live Filtering: Instant search as the user types, filtering by category (Happy, Sad, Angry, Action) or keyword.
• One-Click Copy: Click-to-copy functionality using the Clipboard API with a non-intrusive 'Copied!' toast notification.
• Responsive Grid: A masonry-style or flexbox grid that adjusts from 1 to 5 columns depending on screen size.
• Transient State Management: All state (search queries, filtered lists) managed strictly in-memory.
• Zero External Dependencies (except CDN): Uses a single JS file and Tailwind CSS from CDN for styling.

3. UI/UX Specification

Layout

• Header: Sticky header with a search bar prominent in the center, and category navigation links below it.
• Main Content: A centered, constrained-width container containing a grid of cards.
• Cards: Each card displays the kaomoji in a large font with a subtle hover effect (scale + slight drop shadow). Clicking copies the text.
• Toast Notification: A small, floating 'Copied' label that appears briefly above the cursor or at the bottom center of the screen.

Aesthetics & Color Palette (Light-Mode Only)

• Background: #F9FAFB (Cool Gray 50)
• Card Background: #FFFFFF (White)
• Text Color: #111827 (Gray 900)
• Primary Accent: #3B82F6 (Blue 500) for borders and buttons.
• Border Color: #E5E7EB (Gray 200)
• Transitions: All hover states must use transition-all duration-200 ease-in-out.

4. Technical Guidelines

• Single File: All HTML, CSS, and JS in index.html. CSS inside <style>, JS inside <script>.
• Storage Rules: STRICTLY NO localStorage, sessionStorage, IndexedDB, or cookies. Use an array in JS to store the emoticon library.
• Performance: Use document.createDocumentFragment or Virtual DOM-like injection if the list is large to maintain 60fps rendering during search/filtering.
• Responsiveness: Use Tailwind utility classes (md:, lg:) to ensure cards look good on iPhone (1 column) vs. Desktop (4-5 columns).
• Accessibility: Use proper ARIA labels for search inputs and clickable buttons. Ensure high contrast ratios.
• Security: Run inside a sandboxed environment; ensure no eval() or dangerous JS practices. Use rel="noopener noreferrer" for all links.