The user wants me to create a single-page web app that renders the Mandelbrot set with:
1. Smooth color gradient on a full-screen canvas
2. Click-and-drag to pan
3. Mouse-wheel to zoom

I need to create this as a single self-contained HTML file with all CSS in a <style> tag and JS in a <script> tag, with no external resources.

Let me plan the implementation:

1. HTML structure:
   - Full-screen canvas element
   - Maybe some UI controls (zoom level, reset button, etc.)

2. CSS:
   - Reset margins/padding
   - Canvas fills the screen
   - UI styling

3. JavaScript:
   - Mandelbrot set algorithm: z = z^2 + c
   - Smooth coloring using continuous potential function
   - Pan functionality with mouse drag
   - Zoom functionality with mouse wheel
   - Performance optimization (maybe Web Workers or optimized rendering)
   - RequestAnimationFrame for smooth rendering

Let me write this code:

I've created a complete single-page Mandelbrot set explorer with:

1. Full-screen canvas rendering the Mandelbrot set
2. Smooth coloring using the continuous potential function
3. Click-and-drag to pan around the set
4. Mouse wheel to zoom (with smooth, multi-scroll speedup)
5. Double-click to reset the view
6. Touch support for mobile devices (pinch to zoom)
7. A UI panel showing current zoom level, center coordinates, and iterations
8. A reset button

The rendering is optimized with:
- Direct pixel manipulation using ImageData
- Smooth coloring algorithm that avoids banding
- Iteration count that increases with zoom level
- Efficient escape-time algorithm

Let me verify the file was created successfully.