Technical Specification: Wordle Clone & Solver Utility

Overview

A comprehensive, browser-based word puzzle application that combines a playable word-guessing game with an algorithmic solver. The application is designed to be lightweight, fast, and highly accessible.

Core Features

1. Word Guessing Game Engine:
   • 6-row, 5-column grid system.
   • Real-time feedback via color-coded tiles (Green: correct position, Yellow: wrong position, Gray: letter not in word).
   • On-screen touch-friendly keyboard with state tracking.
   • Dictionary validation to ensure only real words are guessed.
2. Algorithm Solver Tool:
   • Dedicated input section where users define known constraints.
   • Filters: 'Green' letters (position specific), 'Yellow' letters (present but wrong position), and 'Gray' letters (excluded).
   • Results list that updates dynamically to show all valid dictionary matches based on the constraints.

User Interface Design

• Layout:
  • Header: Application title and simple 'Game' vs 'Solver' tab toggle.
  • Main Area: Centered responsive grid that resizes based on viewport.
  • Input: Bottom-anchored virtual keyboard for the game; specific input form fields for the solver mode.
  • Results: A scrolling list displaying filtered results for the solver mode.
• Aesthetic:
  • Color Palette: Clean, high-contrast light mode. White background (#FFFFFF), dark text (#121213), with standard feedback colors: Green (#6AAA64), Yellow (#C9B458), and Gray (#787C7E).
  • Style: Minimalist, card-based layout with subtle shadows for the input fields and grid.
• No Dark Mode: This application is strictly limited to light mode.
• No Footer: The page will not contain a footer element to maximize screen real estate for the game grid.

Technical Implementation

• Architecture: Single HTML file containing all HTML5, CSS3, and Vanilla JavaScript.
• Responsive Design: Uses CSS Flexbox/Grid to ensure the layout adapts to any mobile or desktop screen size.
• Self-Contained: No external dependencies or CDNs. All assets, dictionary data, and logic are embedded directly in the source code.
• Animations: CSS transitions for tile flip effects (3D rotation) and subtle scale animations when letters are entered.
• Performance: High-efficiency filtering logic ensures the solver updates instantly as the user types, providing a smooth user experience even on low-end mobile devices.
• Execution Environment: Must be fully compatible with sandboxed iframe environments (no insecure cookies or local storage usage required).