We are going to create a single-page web app that renders the Mandelbrot set with pan and zoom.
 The entire app will be in one file: index.html
 We'll use HTML5 canvas for drawing.

 Steps:
 1. Create an HTML5 structure with a canvas that fills the entire viewport.
 2. Use JavaScript to draw the Mandelbrot set on the canvas.
 3. Implement smooth color gradient for the Mandelbrot set.
 4. Implement panning by dragging the mouse (mousedown, mousemove, mouseup).
 5. Implement zooming with the mouse wheel.

 Important: The Mandelbrot set is defined in the complex plane. We'll define a viewport with:
   - A center (complex number) and a scale (which determines the width in the complex plane).

 Approach:
   - We'll map the canvas pixel coordinates to the complex plane coordinates.
   - For each pixel, we compute the number of iterations until the sequence escapes (or until max iterations).
   - We'll use a color gradient based on the number of iterations.

 Implementation details:
   - We'll use the escape time algorithm.
   - We'll use a fixed maxIterations (e.g., 100) for now.
   - For smooth coloring, we can use the normalized iteration count.

 Smooth coloring formula:
   Let n be the number of iterations at escape (or maxIterations if not escaped).
   We can compute: 
        float nu = n + 1 - Math.log(Math.log(z.abs())) / Math.log(2);
   But note: we need to adjust for the fact that we break when |z| > 2.

   Alternatively, a common method is:
        n = n + 1 - Math.log(Math.log(Math.sqrt(zr*zr + zi*zi))) / Math.log(2.0);
   However, we can use a simpler method: linear interpolation in a color gradient.

   We'll create a color palette that maps a normalized iteration count (from 0 to 1) to a color.

   Steps for each pixel (x, y):
        let cx = minX + (x / canvas.width) * (maxX - minX);
        let cy = minY + (y / canvas.height) * (maxY - minY);
        let [n, zr, zi] = mandelbrot(cx, cy, maxIterations);
        if (n === maxIterations) {
            color = black;
        } else {
            // Normalize n to [0,1] for coloring: n / maxIterations -> but that gives banding.
            // Instead, use smooth coloring: 
            let hue = n + 1 - Math.log(Math.log(Math.sqrt(zr*zr + zi*zi))) / Math.log(2.0);
            let norm = hue / maxIterations;
            color = palette(norm);
        }

   However, note: the above formula for hue uses the magnitude at escape, which requires that we break when |z|>R (with R=2) and then we can compute:
        nu = n - Math.log2(Math.log2(R)) + Math.log2(Math.log2(Math.sqrt(zr*zr+zi*zi)));
   But a simpler approach is to use fractional escape count: 
        let log_zn = Math.log(zr*zr + zi*zi) / 2;
        let nu = Math.log(log_zn / Math.log(2)) / Math.log(2);   // This is not standard.

   Actually, a common formula is:
        n + 1 - Math.log(Math.log(Math.sqrt(zr*zr+zi*zi)) / Math.log(2)) / Math.log(2);
   But note: we break when |z|>2, so let R=2. Then:

        n_smooth = n + 1 - Math.log(Math.log(Math.sqrt(zr*zr+zi*zi)) / Math.log(2)) / Math.log(2);

   However, we can avoid complex math and use a simpler gradient by interpolating in a color array.

   Alternatively, we can use:
        let norm = (n + 1 - Math.log(Math.log2(Math.sqrt(zr*zr+zi*zi)))) / maxIterations;

   But note: we break when |z|>2, so |z| is at least 2. Then log2(|z|) is at least 1.

   Actually, a simpler method is to use:
        let norm = (n + 1 - Math.log(Math.log(Math.sqrt(zr*zr+zi*zi)) / Math.log(2)) / Math.log(2)) / maxIterations;

   However, this might be computationally heavy and we are doing it per pixel.

   We'll use a simpler method: fractional iteration count.

        let fraction = n - Math.log(Math.log(Math.sqrt(zr*zr+zi*zi))) / Math.log(2.0);
        let norm = fraction / maxIterations;

   But note: we break when |z|>2, so we can compute:

        let modulus = Math.sqrt(zr*zr+zi*zi);
        if (modulus < 1e-10) {
            // Avoid log(0) or negative logs
            fraction = n;
        } else {
            fraction = n + 1 - Math.log(Math.log(modulus)) / Math.log(2.0);
        }

   However, modulus might be less than 1? Actually, we break when modulus>2, so modulus>=2 at escape. So log(modulus)>=log(2). So we can do:

        fraction = n + 1 - Math.log(Math.log(modulus)) / Math.log(2.0);

   But note: log(modulus) is natural log? We can use base 2:

        fraction = n + 1 - Math.log2(Math.log2(modulus));

   This is a common formula.

   Steps:

        modulus = Math.sqrt(zr*zr+zi*zi);
        if (modulus <= 2) {
            // This shouldn't happen because we break when modulus>2, but if we break exactly at 2, modulus might be exactly 2?
            // Actually, we break when modulus>2, so modulus at escape is >2.
            fraction = n;
        } else {
            fraction = n + 1 - Math.log2(Math.log2(modulus));
        }

   Then norm = fraction / maxIterations;

   But note: n is the iteration at which we broke, so n is less than maxIterations.

   We'll use this fraction to pick a color from a gradient.

 5. We'll create a color gradient function that maps [0,1] to a color.

 6. For interactivity:
    - We'll store the current view: { xmin, xmax, ymin, ymax } or { centerX, centerY, scale }.
    - We'll handle mouse events:
        - On mousedown: record the starting mouse position and the current view.
        - On mousemove (with button down): calculate the pan offset and update the view.
        - On mouseup: stop panning.
        - On wheel: adjust the scale and center the view at the mouse position.

 7. We'll use requestAnimationFrame to redraw after view changes.

 8. We'll use a Web Worker for rendering? No, because we are in a single file and we want simplicity. We'll do the rendering on the main thread but we'll use an offscreen canvas? Not necessary for now.

 9. We'll optimize by using an imageData array to set pixels.

 Implementation:

   We'll define:
        let view = {
            x: -0.5,   // center x
            y: 0,      // center y
            scale: 3   // width of the view in complex plane: from x - scale/2 to x + scale/2
        };

   Then:
        let width = canvas.width;
        let height = canvas.height;
        let aspect = width / height;
        let xmin = view.x - view.scale / 2;
        let xmax = view.x + view.scale / 2;
        let ymin = view.y - view.scale / (2 * aspect);
        let ymax = view.y + view.scale / (2 * aspect);

   Then for each pixel (i, j):
        let cx = xmin + (xmax-xmin) * (i/width);
        let cy = ymin + (ymax-ymin) * (j/height);

   Then compute the Mandelbrot.

 10. We'll create a function `render()` that draws the Mandelbrot set on the canvas.

 11. We'll attach event listeners to the canvas.

 12. We'll use a maxIterations that we can adjust? For now, fixed at 100.

 13. We'll use a color palette: from black to blue to cyan to green to yellow to red to white.

 14. We'll use HSL or RGB interpolation? We can create an array of colors.

 15. We'll write the entire code in one HTML file.

 Let's structure the HTML:

   <!DOCTYPE html>
   <html>
   <head>
     <title>Mandelbrot Set</title>
     <style>
        body { margin: 0; }
        canvas { display: block; }
     </style>
   </head>
   <body>
     <canvas id="canvas"></canvas>
     <script>
        // JavaScript code here
     </script>
   </body>
   </html>

 16. In the JavaScript:

        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');

        // Set canvas to full window
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        // View state
        let view = {
            x: -0.5,
            y: 0,
            scale: 3
        };

        // Pan state
        let isPanning = false;
        let startX, startY;
        let startView;

        // Event listeners for panning
        canvas.addEventListener('mousedown', (e) => {
            isPanning = true;
            startX = e.clientX;
            startY = e.clientY;
            startView = { ...view }; // shallow copy
        });

        canvas.addEventListener('mousemove', (e) => {
            if (isPanning) {
                let dx = e.clientX - startX;
                let dy = e.clientY - startY;

                // Convert dx,dy from pixels to complex plane units
                let aspect = canvas.width / canvas.height;
                let dxComplex = dx / canvas.width * view.scale;
                let dyComplex = dy / canvas.height * (view.scale / aspect);

                view.x = startView.x - dxComplex;
                view.y = startView.y + dyComplex; // because in canvas, y is down

                render();
            }
        });

        canvas.addEventListener('mouseup', () => {
            isPanning = false;
        });

        canvas.addEventListener('mouseleave', () => {
            isPanning = false;
        });

        // Zoom with wheel
        canvas.addEventListener('wheel', (e) => {
            e.preventDefault();
            let zoomFactor = 1.1;
            if (e.deltaY > 0) {
                zoomFactor = 1/zoomFactor;
            }

            // Get mouse position relative to canvas
            let rect = canvas.getBoundingClientRect();
            let mouseX = e.clientX - rect.left;
            let mouseY = e.clientY - rect.top;

            // Convert mouse position to complex coordinates
            let aspect = canvas.width / canvas.height;
            let xmin = view.x - view.scale/2;
            let xmax = view.x + view.scale/2;
            let ymin = view.y - view.scale/(2*aspect);
            let ymax = view.y + view.scale/(2*aspect);

            let complexX = xmin + (xmax-xmin) * (mouseX / canvas.width);
            let complexY = ymin + (ymax-ymin) * (mouseY / canvas.height);

            // Zoom in: scale decreases by zoomFactor, and adjust center so that the mouse point stays fixed
            view.scale *= zoomFactor;

            // Now adjust the center: the complex point under the mouse should remain the same
            // So we want:
            //   newXmin = view.x - view.scale/2
            //   and at mouseX: complexX = newXmin + (view.scale) * (mouseX / canvas.width)
            //   => view.x = complexX - (view.scale) * (mouseX / canvas.width) + view.scale/2
            //   => view.x = complexX + view.scale * (0.5 - mouseX / canvas.width)

            view.x = complexX - (mouseX / canvas.width - 0.5) * view.scale;
            view.y = complexY + (mouseY / canvas.height - 0.5) * (view.scale / aspect);

            render();
        });

        // Render function
        function render() {
            // We'll use an ImageData to set pixels
            let width = canvas.width;
            let height = canvas.height;
            let imageData = ctx.createImageData(width, height);
            let data = imageData.data;

            let aspect = width / height;
            let xmin = view.x - view.scale/2;
            let xmax = view.x + view.scale/2;
            let ymin = view.y - view.scale/(2*aspect);
            let ymax = view.y + view.scale/(2*aspect);

            let maxIterations = 100;

            // Precompute a color palette? We'll create a function that maps iteration fraction to color
            function getColor(iterFraction) {
                // We'll use HSV: hue from 0 to 360, saturation 100%, value 100% then convert to RGB
                let hue = iterFraction * 360;
                return hsvToRgb(hue, 1, 1);
            }

            // Helper: HSV to RGB
            function hsvToRgb(h, s, v) {
                let c = v * s;
                let k = h / 60;
                let x = c * (1 - Math.abs(k % 2 - 1));
                let r, g, b;
                if (k >= 0 && k < 1) { [r, g, b] = [c, x, 0]; }
                else if (k >= 1 && k < 2) { [r, g, b] = [x, c, 0]; }
                else if (k >= 2 && k < 3) { [r, g, b] = [0, c, x]; }
                else if (k >= 3 && k < 4) { [r, g, b] = [0, x, c]; }
                else if (k >= 4 && k < 5) { [r, g, b] = [x, 0, c]; }
                else { [r, g, b] = [c, 0, x]; }
                let m = v - c;
                return [Math.round((r+m)*255), Math.round((g+m)*255), Math.round((b+m)*255), 255];
            }

            // For each pixel
            for (let y = 0; y < height; y++) {
                for (let x = 0; x < width; x++) {
                    let cx = xmin + (xmax-xmin) * (x/width);
                    let cy = ymin + (ymax-ymin) * (y/height);

                    let zx = 0;
                    let zy = 0;
                    let iter = 0;
                    let modulusSq = 0;
                    while (iter < maxIterations) {
                        // z = z^2 + c
                        let zx_new = zx*zx - zy*zy + cx;
                        let zy_new = 2*zx*zy + cy;
                        zx = zx_new;
                        zy = zy_new;
                        modulusSq = zx*zx + zy*zy;
                        if (modulusSq > 4) {
                            break;
                        }
                        iter++;
                    }

                    let idx = (y * width + x) * 4;
                    if (iter === maxIterations) {
                        // Inside: black
                        data[idx] = 0;
                        data[idx+1] = 0;
                        data[idx+2] = 0;
                        data[idx+3] = 255;
                    } else {
                        // Smooth coloring: using the fractional iteration count
                        // We break when modulusSq > 4, so modulus > 2
                        let modulus = Math.sqrt(modulusSq);
                        // Fractional iteration count: 
                        //   let fraction = iter + 1 - Math.log2(Math.log2(modulus));
                        // But note: modulus is at least 2? Actually, we break when modulusSq>4 -> modulus>2.
                        // However, modulus might be slightly above 2. So:
                        let log_zn = Math.log(modulus) / Math.log(2); // log base 2 of modulus
                        let fraction = iter + 1 - Math.log2(log_zn);
                        // Normalize fraction to [0,1]
                        let norm = fraction / maxIterations;
                        // Clamp to [0,1]
                        norm = Math.max(0, Math.min(1, norm));
                        let color = getColor(norm);
                        data[idx] = color[0];
                        data[idx+1] = color[1];
                        data[idx+2] = color[2];
                        data[idx+3] = 255;
                    }
                }
            }

            ctx.putImageData(imageData, 0, 0);
        }

        // Initial render
        render();

 17. We'll write the entire code in one file.

 18. We'll test it locally.

 19. Note: The rendering might be slow for large canvases. We might need to optimize by using Web Workers or by using a more efficient algorithm (like periodicity checking) but for simplicity we'll leave it as is.

 20. We'll write the entire content to index.html.

 Let's write the file.