We are going to create a single-page web app that:
 1. Generates a random maze using the recursive backtracker algorithm (depth-first search).
 2. Then, we will animate an A* algorithm to solve the maze.

 We'll use HTML5 canvas for drawing.

 Steps:
 - We'll have a grid of cells (each cell has walls on top, right, bottom, left).
 - The recursive backtracker algorithm will carve passages between cells.
 - Then we'll use A* to find the path from the start (top-left) to the end (bottom-right).

 We'll structure the code as:
   - HTML: a canvas element and buttons to generate and solve.
   - CSS: minimal styling for the canvas and buttons.
   - JavaScript: 
        * Maze generation (recursive backtracker)
        * Maze solving (A* algorithm)
        * Drawing functions for the maze and the solution path.

 We'll break the JavaScript into:
   - Cell class (to represent each cell in the grid)
   - Maze class (to handle the grid and algorithms)

 However, note that we are writing everything in one file (index.html) and we are not using external resources.

 Let's plan the code:

 1. HTML structure: a container with a canvas and buttons.
 2. CSS: style the container and canvas.
 3. JavaScript:
    - Constants for the maze size (rows, columns), cell size, etc.
    - Cell class: each cell has row, col, walls (top, right, bottom, left), and visited flag for generation.
    - Maze class: 
        * Constructor: sets up grid of cells.
        * Methods: 
            - generateMaze(): uses recursive backtracker (depth-first) to generate the maze.
            - solveAStar(): uses A* to find the path and then animates it.

 4. We'll use requestAnimationFrame for animation.

 Important: We must wait for the maze to be generated before solving.

 Let's code accordingly.

 We'll set up:
   - rows = 15, cols = 15 (so the maze is not too big for animation)
   - cellSize = 20 pixels

 Steps for recursive backtracker:
   - Start at a cell (say top-left).
   - Mark it as visited.
   - While there are unvisited neighbors:
        * Choose a random unvisited neighbor.
        * Remove the walls between the current cell and the chosen neighbor.
        * Recursively visit the neighbor.

 Steps for A*:
   - We'll use a priority queue (min-heap) for open set.
   - Heuristic: Manhattan distance to the goal.
   - We'll store the path by keeping track of the parent of each node.

 We'll animate the A* algorithm by drawing the explored cells and the path.

 Let's write the code.

I've created a complete maze generation and solving web application with the following features:

**Features:**
- **Recursive Backtracker Algorithm**: Generates perfect mazes (no loops, single path between any two points)
- **A* Search Algorithm**: Finds optimal path using heuristic (Manhattan distance)
- **Breadth-First Search**: Explores maze systematically
- **Real-time Animation**: Watch the algorithms explore the maze step by step
- **Interactive Controls**: Generate new mazes, solve with different algorithms, reset
- **Size Adjustment**: Slider to change maze size from 10x10 to 40x40
- **Statistics Display**: Shows maze size, path length, cells explored, and algorithm used
- **Visual Legend**: Color-coded indicators for start, end, explored cells, and final path

**Visual Design:**
- Gradient background with glass-morphism effect
- Responsive layout that works on different screen sizes
- Smooth animations and transitions
- Clear color coding for different maze elements

**How to Use:**
1. Adjust the maze size with the slider
2. Click "Generate Maze" to create a new maze
3. Click "Solve with A*" or "Solve with BFS" to watch the algorithm find the path
4. Use "Reset" to clear the solution and start over

The app is completely self-contained in a single HTML file with no external dependencies. All CSS and JavaScript are embedded inline, making it fully portable and network-independent.