The user wants me to create a single-page web app that:
1. Generates a maze using the recursive-backtracker algorithm
2. Displays it on a canvas
3. Animates a pathfinding algorithm (A-star or BFS) solving the maze

I'll create a self-contained index.html file with:
- HTML structure
- CSS in a <style> tag
- JavaScript in a <script> tag
- No external resources

Let me plan the implementation:

1. **Maze Generation (Recursive Backtracker)**:
   - Create a grid of cells
   - Start at a random cell
   - Mark it as visited
   - While there are unvisited neighbors:
     - Choose a random unvisited neighbor
     - Remove the wall between current and chosen neighbor
     - Recursively call on the chosen neighbor

2. **Pathfinding (A* or BFS)**:
   - I'll use BFS since it's simpler to implement and guarantees the shortest path
   - Use a queue for BFS
   - Keep track of visited nodes and parent pointers
   - Animate the search process

3. **Canvas rendering**:
   - Draw walls and paths
   - Draw start and end points
   - Animate the search process by drawing visited nodes

Let me write this code:

I've created a complete single-page web application that generates a maze using the recursive backtracker algorithm and animates a BFS solver finding the path from start to finish.

The application includes:
1. A canvas-based maze display
2. Controls for maze size and animation speed
3. Generate button for creating a new maze
4. Solve button to animate the BFS pathfinding
5. Clear button to reset
6. A legend explaining the colors
7. Stats showing cells generated, visited nodes, and path length
8. Responsive design with gradient background
9. Smooth animations for both generation and solving

The code is fully self-contained with no external dependencies.