Okay, the user wants a single-page web app that renders the Mandelbrot set with a smooth color gradient. They also want interactivity: click-and-drag to pan and mouse-wheel to zoom. All in one HTML file with no external resources.

First, I need to create an HTML file that includes everything inline—CSS in a style tag and JS in a script tag. The canvas element will be used for rendering. 

For the Mandelbrot set, the core is the mathematical calculation. I'll need to generate the fractal using JavaScript. The color gradient can be achieved by mapping the number of iterations to a color value. Maybe using HSL colors for smooth transitions.

Next, handling user interactions. For panning, I'll track mouse down events, calculate the delta, and adjust the view. For zooming, the mouse wheel event will change the scale. I'll need to keep track of the current zoom level and pan offset.

I should structure the JS code to handle the rendering loop, the interaction events, and the Mandelbrot calculation. The canvas size should be full screen, so I'll set its width and height to the window's inner dimensions.

Wait, but when the window resizes, the canvas might not resize properly. Maybe add an event listener for resize to adjust the canvas size. However, since the user didn't mention responsiveness, maybe it's okay to have it fixed once.

Now, the Mandelbrot calculation. The standard formula is z = z² + c, iterating for each pixel. The maximum iterations determine the color. To make it smooth, I can use the iteration count divided by the maximum to get a fractional value, then map that to a color.

For the color gradient, perhaps using a hue rotation based on the iteration count. HSL color space allows for smooth transitions by varying the hue. So, for each pixel, compute the hue based on the iteration count, and set the color.

Putting it all together: the HTML structure with a canvas, CSS for full screen, and JS for rendering and interaction. Let me outline the steps:

1. Create the HTML file with a canvas element.
2. Add CSS to make the canvas full screen.
3. Write JavaScript to:
   a. Handle mouse events for panning and zooming.
   b. Calculate the Mandelbrot set.
   c. Apply a smooth color gradient.
   d. Render the image on the canvas.

Testing the code: Need to ensure that the calculations are efficient enough for real-time rendering. Since it's a single page, performance might be an issue, but for a basic demo, it should work.

Potential issues: The Mandelbrot calculation can be slow if not optimized. Using WebGL or WebAssembly could help, but the user wants everything inline. So, stick with plain JS for simplicity.

Now, writing the code. Start with the HTML structure. Then, in the script tag, define variables for the canvas, context, zoom level, pan offset, etc. Then, set up event listeners for mouse down, mouse move, mouse up, and wheel.

For the rendering function, calculate each pixel's complex number, iterate, determine the color, and set the pixel on the canvas. Use requestAnimationFrame for smooth rendering.

Make sure to handle the color gradient correctly. Maybe use a function that maps the iteration count to a hue value, then creates an RGB color from that.

Testing the code in my mind: When the user clicks and drags, the pan offset changes. Zooming with the wheel adjusts the scale. The color gradient should look smooth without abrupt changes.

I think that's the plan. Now, write the code accordingly.

Okay, let me check what the user asked for. They wanted a single-page web app to render the Mandelbrot set with a smooth color gradient, allowing click-and-drag panning and mouse-wheel zooming. All in one HTML file with no external resources.

First, I created the HTML structure with a canvas element. The CSS makes the canvas full screen. Then, the JavaScript handles the rendering and interactions. 

For the Mandelbrot calculation, I used the standard iterative formula. The color gradient is achieved using HSL colors, where the hue varies based on the iteration count, creating a smooth transition. 

Handling panning: I tracked mouse down, move, and up events. When dragging, the offset is adjusted based on the mouse movement, which shifts the view. For zooming, the wheel event changes the zoom level, adjusting the scale factor. 

I also added a resize event listener to handle window resizing, ensuring the canvas adjusts accordingly. The initial render sets up the canvas size and starts the rendering loop.

Testing this code should show the Mandelbrot set with smooth colors, and users can interact by dragging to pan and scrolling to zoom. Everything is contained in one file, meeting the user's requirements.