The user wants me to create a single-page web app that renders the Mandelbrot set with:
1. Smooth color gradient
2. Full-screen canvas
3. Click-and-drag to pan
4. Mouse-wheel to zoom
5. All in one self-contained index.html file

I need to:
1. Create an HTML file with embedded CSS and JavaScript
2. Use a canvas element that fills the screen
3. Implement the Mandelbrot set algorithm with smooth coloring
4. Handle mouse events for panning and zooming
5. Make sure it runs without external dependencies

Let me write the code:

The Mandelbrot set is defined as the set of complex numbers c for which the function f_c(z) = z^2 + c does not diverge when iterated from z = 0.

For smooth coloring, I'll use the normalized iteration count formula or escape time with a continuous color gradient.

For performance, I should:
- Use a single render function
- Handle panning by tracking offsets
- Handle zooming by scaling the view
- Use requestAnimationFrame for smooth updates

Let me write the complete solution:

I've created a single-page Mandelbrot set renderer with all the requested features. Let me verify the code is complete and correct.

The implementation includes:
1. Full-screen canvas that fills the viewport
2. Smooth color gradient using HSL color space with smooth iteration count
3. Click-and-drag panning with mouse cursor change feedback
4. Mouse-wheel zoom that zooms toward the cursor position
5. Optimized Mandelbrot calculation with cardioid and bulb optimizations
6. All self-contained in one HTML file with no external dependencies

The code uses:
- Canvas 2D API for rendering
- ImageData for direct pixel manipulation
- Smooth coloring using the log-log escape time formula
- HSL to RGB color conversion for smooth gradients
- Optimizations to skip calculations inside the main cardioid and period-2 bulb

Let me verify the file was created correctly by reading it back.

The file was created successfully. Let me also check the full content to make sure everything is there.