Technical Specification: Online Text Sorter & Alphabetizer

Overview

This application is a highly optimized, client-side utility designed to alphabetize text, lists, or paragraphs. It prioritizes speed, accessibility, and a clean, clutter-free user interface. All processing occurs locally in the user's browser, ensuring privacy and zero latency.

Core Features

• Dual Sorting Modes: Sort lines or paragraphs A-Z (Ascending) or Z-A (Descending).
• Duplicate Removal: Optional toggle to automatically strip duplicate lines.
• Whitespace Cleanup: Optional toggle to trim leading/trailing whitespace from each line.
• Case Insensitivity: Intelligent sorting toggle that treats 'a' and 'A' as equal.
• Smart Input Detection: Handles newlines, comma-separated values, and standard paragraphs.
• Instant Copy: One-click copy button for the sorted result.
• Word/Line Counter: Live statistics indicating how many lines are currently being processed.

UI/UX Design

• Theme: Strict light mode aesthetic. Use #FFFFFF backgrounds with #F8FAFC for card surfaces. Primary actions should use a professional blue (#2563EB).
• Layout:
  • Header: Simple, clean, centered heading describing the tool function.
  • Main Area: A two-column grid (desktop) or stacked (mobile) layout. Left: Input textarea. Right/Bottom: Output textarea.
  • Controls: A dedicated control panel between the text areas containing switches for sorting options (A-Z, Z-A, Remove Duplicates, etc.) and the primary 'Sort Text' button.
  • Typography: Sans-serif, human-readable fonts (e.g., Inter, system-ui). 16px base font size.
• Animations:
  • Subtle fade-in for results.
  • Scale-up animation on button hover states.
  • Click feedback (color brightness shifts) on active buttons.

Developer Guidelines (Strict Enforcement)

• Architecture: Must be a Single File (.html). Embed all CSS in <style> tags and JavaScript in <script> tags.
• Sandbox Environment:
  • NO STORAGE: Do not use localStorage, sessionStorage, or cookies. Application state must be volatile and in-memory only.
  • NO ALERTS: Use custom CSS/JS-based modal components for user feedback (e.g., "Copied to clipboard!").
  • NO EXTERNAL TRACKING: Only include essential libraries (e.g., Tailwind via CDN, or zero dependencies).
• Performance: Ensure processing is non-blocking (async) if handling large blocks of text to keep the UI responsive.
• Responsive: Use Tailwind CSS utility classes (or pure CSS Flex/Grid) to ensure the text areas adjust width on mobile devices (100% width on small screens, split-pane on desktop).
• Branding: No logos, no external links to author sites, no footer, no "powered by" tags.