Tower of Hanoi

Prompt

Project Goal: Create a responsive, single-page mobile website that provides an animated simulation of the Tower of Hanoi puzzle. The user must be able to customize the simulation's parameters. Target Platform: Mobile web browsers. The layout must be responsive and functional in both portrait and landscape orientations. Key Features * Tower of Hanoi Simulation: * Visually represent three pegs and a set of disks. * The simulation must correctly solve the Tower of Hanoi puzzle using the standard recursive algorithm for a given number of disks. * The solution must be animated, showing one disk moving at a time from one peg to another. * User Controls: * Number of Disks: Implement a slider that allows the user to select from 3 to 10 disks. The default value should be 5. * Simulation Speed: Implement a slider for speed with three settings: Slow, Normal, and Fast. These settings should correspond to move durations of 500ms, 300ms, and 100ms, respectively. * Action Buttons: Include three distinct buttons: "Start," "Pause/Resume," and "Reset." * "Start" begins the animation. It should be disabled while a simulation is actively running. * "Pause/Resume" toggles the animation's execution. * "Reset" immediately stops the simulation and returns the disks to their initial state on the starting peg, according to the current settings. * Display Information: * Move Counter: Display the current move number during the simulation, showing progress (e.g., "Move: 15 / 31"). Technical & Design Specifications * Technology Stack: Use only vanilla HTML, CSS, and JavaScript. No external libraries or frameworks (e.g., no jQuery, React, Vue.js, etc.) are permitted. * Layout & Responsiveness: * The three pegs should be centered horizontally on the screen. * All user controls (sliders and buttons) should be grouped together in a clean, intuitive panel at the bottom of the screen. * The entire layout must adapt gracefully to both portrait and landscape views on mobile devices without any loss of functionality or visual clarity. * Visual Style: * Employ a modern, flat design aesthetic. * Disks should have distinct colors and decrease in size uniformly. The pegs should be simple vertical bars. * Animation Details: * The animation for moving a disk must be fluid and smooth. * A disk's movement must follow a clear path: it lifts vertically from its starting peg, moves horizontally to a position directly above the target peg, and then lowers vertically onto the peg. Use CSS transitions or JavaScript-based animations to achieve this effect. Code Quality Requirements * Structure: The code must be well-structured and organized into three separate files: index.html for structure, style.css for styling, and script.js for logic. * Clarity: JavaScript code should be well-commented, especially to explain the Tower of Hanoi algorithm implementation and the animation control logic. * Final Output: The complete submission should consist of the three required files (index.html, style.css, script.js).

A system prompt was added to support web rendering