Sieve of Eratosthenes Interactive Visualizer

This application is a highly optimized, interactive educational tool designed to visualize the Sieve of Eratosthenes algorithm. It enables users to observe the prime number finding process in real-time, providing clear insights into number theory and algorithmic efficiency.

Core Features

• Interactive Grid System: A responsive grid that generates numbers based on user input (up to a defined limit).
• Playback Controls: Play, Pause, Reset, and Step-by-Step execution to control the animation flow.
• Variable Speed Control: Adjust the algorithm speed (Slow, Medium, Fast, Turbo) to balance learning and efficiency.
• Educational Side-Panel: A dedicated information area that explains the logic behind the current step (e.g., 'Current prime is 3, marking all multiples of 3 as composite').
• Real-time Stats: Track the number of primes found, the current number being evaluated, and completion percentage.
• Responsive Design: The grid automatically reframes based on the viewport width for seamless usage on desktop, tablet, or mobile devices.

UI Layout Specification

• Header: Contains the tool title and a brief instruction subtitle. Clean, sans-serif typography.
• Toolbar (Top Section):
  • Input Field: Number limit selection (e.g., 1-500).
  • Play/Pause Button: Large, clear icon-based button.
  • Reset Button: To restart the algorithm.
  • Speed Slider/Dropdown: For playback velocity.
• Main Content Area: A container centered in the viewport holding a flex/grid layout of tiles. Each tile represents a number.
• Sidebar/Bottom Dashboard: A clearly separated area showing the "Step Logic" explanation, current progress, and total prime count.

Visual Design & Aesthetics

• Palette: Clean Light-Mode aesthetic.
  • Primary: Crisp white background (#ffffff).
  • Text: Dark gray (#333333) for high readability.
  • Accent: Vibrant Cobalt Blue (#007bff) for highlighting the current prime being evaluated.
  • State - Prime: Soft Green (#28a745) for numbers confirmed as prime.
  • State - Composite: Muted Light Gray (#e9ecef) for crossed-out numbers.
  • State - Pending: Neutral White/Gray for unvisited numbers.
• Animations:
  • Use CSS transitions for tile background color changes (e.g., .3s ease-in-out fade).
  • Use a pulse animation for the 'Current Number' being evaluated.
  • Smooth entry animation when the grid generates numbers.

Technical Implementation Notes

• Architecture: Single HTML file containing embedded <style> and <script> blocks.
• State Management:
  • Strictly in-memory JavaScript variables. Do not use localStorage or sessionStorage.
  • State includes: currentLimit, currentNumberIndex, statusArray (array of booleans or states per index), playbackSpeed.
• Performance: Use requestAnimationFrame or setTimeout for the animation loop to ensure smooth performance without locking the main thread.
• Responsiveness: Use CSS Grid or Flexbox to allow tiles to reflow gracefully without requiring manual scrollbars.

Critical Constraints Checklist

• No Branding/Logos: Use purely functional naming (e.g., "Sieve of Eratosthenes Visualizer").
• Light Mode Only: No dark mode toggle.
• No Storage: No cookies, localStorage, or DB access.
• No Popups: Implement any modals (like 'About' or 'Instructions') as standard HTML elements overlaying the main content.
• Sandboxed: Ensure all external library resources are loaded via secure HTTPS CDN links.
• Accessible: Use semantic HTML5 elements for screen readers.