We need to write a single-page web app, index.html, with inline CSS and JS, that renders the Mandelbrot set with smooth color gradient, full-screen canvas, interactive panning via click-and-drag, zoom via mouse wheel. No external resources. Must output file index.html in current directory. Use write tool to write the file.

We need to produce the content as a string and write it to "index.html". No separate files. Use write tool with path "index.html" and content.

We'll need to code an HTML page with a <canvas> that fills the screen, JS to compute the Mandelbrot set and render with smooth coloring, plus event listeners for mouse wheel (zoom) and mouse drag (pan). Use requestAnimationFrame perhaps to re-render on pan/zoom.

Implement coordinate mapping from canvas to complex plane. Provide UI.

We must be careful to produce correct HTML, CSS and JS in one file.

We'll need to embed script that draws on canvas context. Use a color gradient from, say, black (or deep blue) to red or yellow.

Smooth coloring can be done using the "normalized iteration count" and perhaps using "bicorn" smoothing or using the escape time & smoothing by using log(ln ...) Actually typical smooth coloring uses:

µ = n - log2(log2|z|) etc. For Mandelbrot set we can compute smooth coloring using the "bailout" and compute the log-log smoothing to get a fractional iteration count. Then map to HSL hue.

Simplify: use HSV hue based on iteration count (or smooth iteration) for gradient.

Implementation details:

- Setup canvas size to window.innerWidth, window.innerHeight, fill screen.

- Maintain offsetX, offsetY (center offset), scale (zoom level). Initially view centered at -0.5+0i with scale ~ 1 (maybe 4). Actually default view could be x from -2 to 1, y from -1.5 to 1.5? Fit to window.

Simplify: Use a coordinate system where we map pixel coordinates to complex plane via:

real = (x / width) *ZoomFactor + offsetX

But easier: store scaling factor (pixel per unit) or zoom factor.

Represent complex plane as:

centerX, centerY (complex coordinate at center), zoom (scale of complex plane per pixel). For example, complexWidth = (x_max - x_min) = 3.5 maybe; complexHeight = complexWidth * height / width.

We can compute view: offsetX, offsetY for translation.

User can pan by dragging: store previous mouse positions, compute delta, adjust offsetX/Y accordingly.

Zoom: on wheel, adjust zoom factor: e.g., zoom *= 1.001^deltaY (or change by factor). Also adjust center to keep zoom at mouse.

Simplify: Using typical approach: When zooming, adjust zoom factor and also adjust offsetX/Y so that the mouse position stays at same complex point. That involves converting mouse coords to complex coordinates, then adjusting offset and zoom accordingly.

Implement event listeners:

- canvas.addEventListener('mousedown', start dragging); track mousemove -> change offset based on delta.

- canvas.addEventListener('wheel', zoomHandler, { passive: false }). In wheel event, prevent default, compute new zoom factor (e.g., zoom *= Math.pow(1.001, e.deltaY)). Then adjust offsetX/Y to maintain focus under cursor: compute mouseX, mouseY in canvas coordinates → map to complex coordinate (preZoom) etc.

Better: Keep variables: scale (pixel per unit?) Actually easier to maintain "zoomFactor" as scale for complex units per pixel? Or maintain "viewScale" as number of complex units per pixel? Let's define "zoom" as pixel per complex unit? Let's define "zoom" as the amount of complex width per pixel? Actually easier: maintain "scale" = complex width per pixel? Hmm.

Alternate approach: Represent view through "view = {cx, cy, scale}" where scale is the complex width of the view (e.g., 3.5). Then pixel coordinate to complex:

real = cx + (x - width/2) * scale / (width/2)?

Better: Commonly define view with "zoom" representing the factor of complex coordinate per pixel: i.e., scaling of pixel to complex coordinate. More typical: Let complexWidth = 3.5; complexHeight = complexWidth * height / width.

But we can compute complex coordinate from pixel coordinate as:

real = offsetX + (pixelX / pixelWidth) * viewWidth

But if we just store "zoomScaleFactor" = viewWidth / canvasWidth, i.e., the complex width per canvas pixel? Actually viewWidth is the width of complex view in real direction (e.g., 3.5)? Then real X coordinate = startX + (pixelX / canvas.width) * viewWidth.

If we maintain startX, startY as the complex coordinate of the top-left corner of the view. And we maintain viewWidth and viewHeight = viewWidth * height / width.

When zooming, we can adjust viewWidth / viewHeight proportionally with zoomFactor. For a wheel zoom step, multiply viewWidth by 0.9 or 1.1 (or using e.deltaY). Then adjust startX and startY to keep the mouse point stationary: The complex coordinate under mouse is: mouseReal = startX + (mouseX / width) * viewWidth. Then after scaling viewWidth' = viewWidth * factor, we can compute new startX' = mouseReal - (mouseX / width) * viewWidth'.

Simplify: When zooming, recalc viewWidth = viewWidth / zoomFactor (if zoom in reduces view width). Keep same startX? Actually need to keep same center? Replace with above.

Implement:

let view = {
  width: 3.5,
  height: 3.5 * canvas.height / canvas.width,
  offsetX: -0.5, // maybe startX? Actually if we use startX and startY as complex coordinates of left/top.
};

But we can just maintain viewCenterX, viewCenterY (complex at canvas center), and viewScale (complex width of view). Then view extents: viewWidth = viewScale, viewHeight = viewScale * canvas.height / canvas.width. Then pixel to complex:

real = viewCenterX + (x - canvas.width/2) * viewScale / (canvas.width/2)?

But we can compute:

scale_x = viewScale / canvas.width; // complex units per pixel horizontally (i.e., half view? Hmm). Actually if viewScale is the full width of complex plane visible, then each pixel corresponds to viewScale / canvas.width units in real direction.

Thus:

real = viewCenterX - (canvas.width/2) * scale_x + x * scale_x
Imag = viewCenterY - (canvas.height/2) * scale_y + y * scale_y

But maybe simpler: Use offsetX and offsetY as the complex coordinate of the left/top visible corner. Then:

real = offsetX + (x / canvas.width) * viewWidth
imag = offsetY + (y / canvas.height) * viewHeight

When zooming, adjust viewWidth, viewHeight, offsetX/Y accordingly to keep the mouse point fixed.

Thus we should maintain offsetX, offsetY (top-left complex corner) and viewWidth/Height.

Simplify variables: offset = {re: -0.5, im: -0.5?} not exactly.

Better: Keep variable "centerX, centerY" (complex coordinate at center), and "scale" (half width?) Actually common approach: "center" and "zoom" where zoom corresponds to pixel scale: i.e., the distance from center to edge. Like typical fractal zoom: each pixel step reduces view size: newZoom = oldZoom / 2 when zoom in (or multiply by 0.5). But maybe simpler: "scaleFactor" controlling how many units per pixel across whole view, i.e., "scale" = viewWidth / canvas.width (complex units per pixel). Then viewWidth = scale * canvas.width.

Thus store "scale" (complex units per pixel). Then complex coordinate for pixel x is: real = centerX - (scale * canvas.width/2) + x * scale. Similarly imag. Equivalent to offsetX + (x / width) * viewWidth where offsetX = centerX - scale*width/2.

But handling pan and zoom with center+scale is easier: You can translate center by offsets, while scale determines zoom. When zoom in, scale *= 0.9 (making scale smaller units per pixel?), Actually if "scale" is units per pixel, then a smaller scale means a larger view size? Let's define "scale" as "pixel-to-complex" factor: smaller scale means each pixel corresponds to a smaller complex unit, i.e., zoom in. So zoom in multiplies scale by 0.9. Zoom out multiplies by 1.1.

Thus maintain centerX, centerY, scale.

Mapping from pixel to complex:

let halfW = canvas.width / 2;
let halfH = canvas.height / 2;
let re = centerX + (x - halfW) * scale;
let im = centerY + (y - halfH) * scale;

If we want to keep center at particular point, we adjust center when panning.

Panning: On drag, deltaX, deltaY correspond to pixel movement, thus change centerX += deltaX * scale; similarly im.

But that may invert direction? Actually if you move mouse right, you want view to shift left (because you're pushing plane left?) Hmm.

If we consider the mapping: re = centerX + (x - halfW) * scale. So if x is halfW (center x), then re = centerX. If you drag right (increase x), then re will increase relative to center if you don't change center. That means moving right on screen reveals more to the right side: you want to shift center to left? Let's think: If you pan right, you want the view to shift left, i.e., the complex coordinate at same screen location becomes larger? Actually if we drag right, the view should shift leftwards in the complex plane (i.e., you'll see more of the left), meaning the centerX coordinate should decrease. So a positive pixel deltaX results in a negative change to centerX. So we can do: centerX -= deltaX * scale; centerY -= deltaY * scale.

Thus panning: centerX -= deltaX * scale; centerY -= deltaY * scale.

Zoom: We adjust scale: on wheel up (zoom in), scale *= 0.9 (i.e., smaller units per pixel, zooming in). On wheel down: scale *= 1.1 (zoom out). But we need to keep view anchored to mouse position.

Better: Using "scale" being complex unit per pixel, zoom in reduces scale (makes one pixel represent a smaller complex interval). Then to keep mouse position fixed at the same complex coordinate, after changing scale we adjust centerX/Y accordingly.

So wheel handler: 
```
let zoomFactor = Math.pow(1.001, e.deltaY); // positive deltaY (up) results in zoom in? Actually default.
```
Usually e.deltaY > 0 means scrolling down (zoom out), and negative means up (zoom in). So we could invert accordingly. Simpler: Let zoomFactor = 1.001; if deltaY < 0 => zoom in (scale *= 0.99?), we can use something like scale *= 0.9; else scale *= 1.1; But need smooth.

We can just do: scale *= 1.001 ** -e.deltaY (i.e., if deltaY negative (scroll up), exponent positive, scale *= 1.001^(abs) => bigger exponent, scale increased? Wait -- Let's think: If we want zoom in when scroll up (deltaY negative), we need to multiply scale by some factor < 1 (since we want smaller scale). So maybe scale *= Math.pow(0.99, -e.deltaY). If deltaY = -5 (scroll up 5), exponent = 5 => factor 0.99^5 ≈ 0.95, scaling down. Good. If deltaY = 3 (scroll down), -e.deltaY = -3 => factor 0.99^-3 = 1/(0.99^3) ≈ 1.03 => scaling up.

Thus: scale *= Math.pow(0.99, -e.deltaY);

Alternatively use a fixed factor like 1.1 for zoom in/out magnitude.

We also need to adjust centerX/Y such that under mouse coordinate stays same: map mouse position (clientX/Y relative to canvas) to complex coordinate before zoom then after updating scale, recompute new center offset accordingly.

Better to store "centerX/Y" as complex coordinate of canvas center. Then after zoom, we want new centerX' = mouseComplexX - (mouseX - halfW) * newScale? Actually we can compute the mouse's complex coordinate using current centerX/Y and scale before updating scale. Let's denote before scaling, we have current center, scale. Compute complex coordinate of mouse:

let mouseRe = centerX + (mouseX - halfW) * scale;
let mouseIm = centerY + (mouseY - halfH) * scale;

Now after adjusting scale (newScale = scale * factor), we can set new center such that same mouse coordinate is preserved at same pixel coordinate. But center may also shift due to new mapping? Actually centerX/Y defined as coordinate at center (pixel halfW, halfH). It is independent of scale; it's the complex coordinate at pixel (halfW, halfH). So if we change scale, the mapping changes. To keep mouse coordinate same on screen, we need to adjust center offset accordingly. However, we could instead keep offsetX/Y as top-left coordinate rather than center. That might make adjusting easier.

But perhaps easiest approach: Use offsetX/Y as view's top-left complex coordinate and viewWidth/Height. Then on wheel zoom, compute factor like newViewWidth = viewWidth / factor (zoom in reduces viewWidth). Then compute new offsetX = mouseRe - (mouseX / width) * newViewWidth. Then adjust viewWidth to newViewWidth, offsetX accordingly.

Thus maintain offsetX, offsetY (complex coordinate of top-left visible point). Also maintain viewWidth, viewHeight.

That way pan is simply offsetX += deltaX * (viewWidth / width) * something? Because moving pixel deltaX correspond to complex shift of deltaX * (viewWidth/width) but direction sign accordingly.

Let's adopt offset + viewWidth approach.

Implementation details:

HTML skeleton:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mandelbrot</title>
<style>
html,body {margin:0;height:100%;overflow:hidden;background:#000;}
canvas {display:block;width:100%;height:100%;}
</style>
</head>
<body>
<canvas id="mandelbrot"></canvas>
<script>
/* JS goes here */
</script>
</body>
</html>

Make canvas fill screen.

JS:

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

// Set canvas size to full window; handle resize
function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // recompute view perhaps
}
window.addEventListener('resize', resize);
resize();

Now maintain variables:

let offsetRe = -0.5; // real part of top-left corner
let offsetIm = -0.5; // imag part of top-left corner
let viewWidth = 3.5; // width of complex view (real axis)
let viewHeight = viewWidth * canvas.height / canvas.width; // height derived

Alternatively, maintain scale factor: We can compute viewWidth based on typical width of view, maybe 3.5 to start.

Better: Keep viewWidth and viewHeight relative to canvas size; we can set viewWidth = 3.5 (constant), viewHeight = viewWidth * height / width ensures aspect ratio.

Thus at any time viewWidth and viewHeight are determined, they don't change with zoom unless we adjust them.

When zooming, we change viewWidth (and viewHeight accordingly) by scaling factor.

Specifically, on wheel event, we compute zoomFactor = 1.001 ** -e.deltaY (or maybe factor = 1.1 ** -e.deltaY?). Actually we can compute factor = 0.9 for zoom in (scale down viewWidth) and 1.1 for zoom out (scale up). Use Math.pow(1.001, -e.deltaY) to get subtle incremental factor.

Thus:

let factor = Math.pow(1.001, -e.deltaY); // >1 on scroll up (deltaY negative) => factor >1 => viewWidth becomes smaller? Actually we need viewWidth = viewWidth / factor? Let's decide:

If scroll up (zoom in), we want viewWidth to shrink (i.e., show less area). So factor >1 leads viewWidth / factor < viewWidth => shrink. So we can set viewWidth /= factor; and also viewHeight = viewWidth * height / width.

Alternatively, simply multiply viewWidth by factor (if factor <1 yields shrink). Might be easier to compute shrink factor = 0.9 on zoom in. Let's use step = 0.9 (zoom in) or 1.1 (zoom out). But wheel provides deltaY and maybe we want continuous zoom. Use factor = 1.001 ** -e.deltaY. Then we could adjust viewWidth *= factor; To shrink viewWidth when factor <1 (i.e., zoom in yields factor <1?). Let's check: If deltaY is negative (scroll up), -e.deltaY >0, factor = 1.001^(positive) >1. So factor >1. If we multiply viewWidth by factor >1, viewWidth expands => zoom out! That's opposite. So better invert: viewWidth *= Math.pow(0.999, -e.deltaY) maybe. Let's consider:

We want: scroll up (deltaY negative) -> zoom in -> viewWidth becomes smaller. So we need a multiplier <1 when deltaY is negative. Factor = Math.pow(0.999, -e.deltaY). If deltaY = -5 => -e.deltaY=5 => factor = 0.999^5 ≈ 0.995 => viewWidth reduces (good). If deltaY = +3 => -e.deltaY = -3 => factor = 0.999^-3 ≈ 1.003 => viewWidth increases (zoom out). So that works.

Thus we can set:

let zoomFactor = Math.pow(0.999, -e.deltaY);
viewWidth *= zoomFactor;
viewHeight = viewWidth * canvas.height / canvas.width; // update height accordingly

Now need to keep the same point under the mouse fixed (i.e., anchor zoom on mouse position). Compute mouse position in complex coordinates before scaling:

let mouseX = e.clientX - canvas.getBoundingClientRect().left; // careful: use event offsetX? Use getBoundingClientRect.

But we can compute relative X/Y using event.offsetX and offsetY from wheel event; they're relative to canvas and proper. So we can use e.offsetX and e.offsetY.

Thus:

let mouseRe = offsetRe + (e.offsetX / canvas.width) * viewWidth;
let mouseIm = offsetIm + (e.offsetY / canvas.height) * viewHeight;

Now after scaling viewWidth (and viewHeight) by zoomFactor, we need to adjust offsetRe/offsetIm to keep mouse at same complex coordinate. The mapping after scaling: for pixel X, complex real = offsetRe + (X / width) * viewWidth.

Thus after scaling, to keep same complex coordinate at same pixel offsetX, we recalc offsetRe = mouseRe - (e.offsetX / canvas.width) * viewWidth (new viewWidth). Similarly offsetIm = mouseIm - (e.offsetY / canvas.height) * viewHeight.

Thus the update:

offsetRe = mouseRe - (e.offsetX / canvas.width) * viewWidth;
offsetIm = mouseIm - (e.offsetY / canvas.height) * viewHeight;

Now we need to handle panning via mouse drag.

We can implement:

let isDragging = false;
let lastX, lastY;

canvas.addEventListener('mousedown', (e) => {
  isDragging = true;
  lastX = e.offsetX;
  lastY = e.offsetY;
});

window.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const dx = e.offsetX - lastX;
  const dy = e.offsetY - lastY;

  // Convert pixel delta to change in offset (pan): moving mouse right (dx positive) should shift view left in complex plane => offsetRe should increase? Let's derive.

  // Our offsetRe is the coordinate of the top-left corner. If we drag right on screen, we want to shift view leftwards (i.e., offsetRe should increase? Actually offsetRe represents the coordinate of (0,0) pixel? Wait: offsetRe + (0) * viewWidth? Actually offsetRe is the complex coordinate of the left edge at pixel x=0. So if we drag right, the pixel under cursor moves to the right; to keep the view anchored to the same relative position, we need to shift offsetRe opposite direction? Let's derive.

  // We can treat offset as top-left of view. If we move the mouse by dx pixels to the right, and we want the point that was under the cursor to stay under the cursor after panning, then we need to shift the view leftwards by dx * (viewWidth / width). Because moving the view leftwards (i.e., decreasing the displayed area) reveals more of the right side: as we shift offsetRe to the left (i.e., more negative?), need to think.

Better approach: Instead of mapping offset adjustments directly, we can simply adjust offsetRe and offsetIm by:

offsetRe += dx * (viewWidth / canvas.width);
offsetIm += dy * (viewHeight / canvas.height);

But direction: moving mouse right (dx positive) leads to offsetRe increasing. That means the top-left complex coordinate becomes larger (more to the right), i.e., we shift view to the left? Actually if offsetRe increases, the top-left coordinate moves to the right (in complex plane). That would shift the view to the right (i.e., show less left area). What should happen when user drags right? Typically, dragging right should shift the view to the left (i.e., the set moves left relative to the screen). That would make offsetRe decrease? Let's think with simple example: Initially offsetRe = -0.5 (the leftmost visible real value). The view width is 3.5, so the rightmost is +3. So the set spans from -0.5 to +3. If we drag a little to the right, we want to see slightly less of the left side and more of the right side, i.e., shift view to the right (i.e., increase offsetRe), indeed we would shift view to the right, thus offsetRe should increase. That's consistent: dragging right should increase offsetRe (shift view to the right). That seems intuitive: you move your view towards higher real numbers. But typical panning is opposite: dragging right moves view left? Actually think of the screen as a window; dragging the window up reveals more above; dragging right reveals more to the left? No. Let's imagine an image viewer: if you drag the image to the right, the image moves left relative to the screen; i.e., you see more of what was on its right side. So if we think of offset as representing the top-left corner of the window onto the image, dragging the window right moves its top-left corner leftwards? Wait: If we have an image and a viewport that we move around, moving the viewport to the right (i.e., moving the region we show to more right on image) would cause us to show more of the right side of the image. That means the offset (starting point) moves to the right. So offsetRe increases. Yes! So in our scenario, offset is the top-left coordinate of the region displayed. Dragging the mouse to the right moves the viewport to the right, i.e., offsetRe increases. So offsetRe += dx * (viewWidth / width) is correct.

Thus delta to offsetRe = dx * (viewWidth / canvas.width). delta to offsetIm = dy * (viewHeight / canvas.height). (Note: dy positive means moving down, offsetIm increases (i.e., show more downwards).)

But careful: during panning we might want to adjust offset while preserving zoom factor and not interfering with zoom anchor. So we'll just use these simple updates.

Implementation:

canvas.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const dx = e.offsetX - lastX;
  const dy = e.offsetY - lastY;

  offsetRe += dx * (viewWidth / canvas.width);
  offsetIm += dy * (viewHeight / canvas.height);

  lastX = e.offsetX;
  lastY = e.offsetY;
});

Then mouseup event ends dragging.

Also handle context menu to prevent scroll.

Now rendering function: drawMandelbrot() using requestAnimationFrame loop perhaps invoked on each animation frame or after pan/zoom events.

We can just draw on each requestAnimationFrame.

In draw function:

function draw() {
  // Clear canvas
  ctx.clearRect(0,0,canvas.width,canvas.height);
  // Iterate over pixel coordinates x,y
  const maxIter = 1000;
  // optionally use WebGL? No. Keep CPU simple.

  // We can vectorize partially but it's fine.

  const start = performance.now();
  const imgData = ctx.createImageData(canvas.width, canvas.height);
  const data = imgData.data;

  for (let py = 0; py < canvas.height; py++) {
    // Compute imaginary coordinate for this row
    const im = offsetIm + (py / canvas.height) * viewHeight;
    for (let px = 0; px < canvas.width; px++) {
      const re = offsetRe + (px / canvas.width) * viewWidth;
      // Mandelbrot iteration
      let a = 0, b = 0;
      let n = 0;
      let maxIterLocal = maxIter;
      // smooth coloring using log formula
      while (a*a + b*b <= 4 && n < maxIterLocal) {
        const temp = a*a - b*b + re;
        b = 2*a*b + im;
        a = temp;
        n++;
      }
      // smooth coloring
      let hue;
      if (n === maxIterLocal) {
        hue = 0; // black
      } else {
        // Use log smoothing
        const nu = Math.log(Math.log(a*a + b*b) / Math.log(2)) / Math.log(2);
        const iter = n + nu;
        // Map iter to hue (0-360) maybe via some gradient
        hue = (iter / maxIterLocal) * 360; // hue in [0,360]
        // Could also use HSL for color
      }
      // Convert hue to RGB using simple conversion or use HSL directly
      // Use HSL: h, s=1, l=0.5? But HSL requires hue up to 360, s=1, l=0.5 yields bright colors.
      // We can do: const color = hslToRgb(hue, 1, 0.5);
      // But we need function to convert HSL to RGB.
      // Simpler: use a basic gradient mapping hue to RGB via Math.sin etc.
      // But we can create RGB directly: use hslToRgb function; implement quickly.
      const r = Math.round(Math.cos((hue/360) * 2*Math.PI) * 0.5 + 0.5) * 255;
      const g = Math.round(Math.cos((hue/360) * 2*Math.PI + 2/3) * 0.5 + 0.5) * 255;
      const bC = Math.round(Math.cos((hue/360) * 2*Math.PI + 4/3) * 0.5 + 0.5) * 255;
      // Actually using cos offset yields primary colors; but it may produce only primary? Another method: Use standard conversion: 
      // But it's okay.

      // Compute index
      const i = (py * canvas.width + px) * 4;
      data[i] = r;     // Red
      data[i+1] = g;   // Green
      data[i+2] = bC;  // Blue
      data[i+3] = 255; // Alpha
    }
  }
  ctx.putImageData(imgData, 0, 0);
  // schedule next draw
  requestAnimationFrame(draw);
}
draw(); // start animation

We need a function to convert hue to rgb perhaps faster. But the above cos/trig approach may produce repeating colors but could be okay.

But generating a smooth gradient often uses hue from 0 to 360 mapping to a gradient that cycles through hues. Using hue conversion with cos and adding offset ensures mapping to full hue wheel gradually.

Specifically, we can use standard conversion of HSL to RGB with full saturation and lightness 0.5 yields vibrant colors.

Simplify: Use standard HSL conversion:

function hslToRgb(h, s, l) {
  const c = (1 - Math.abs(2*l - 1)) * s;
  const x = c * (1 - Math.abs(((h/60) % 2) - 1));
  const m = l - c/2;
  let r, g, b;
  if (0 <= h && h < 60) { r = c; g = x; b = 0; }
  else if (60 <= h && h < 120) { r = x; g = c; b = 0; }
  else if (120 <= h && h < 180) { r = 0; g = c; b = x; }
  else if (180 <= h && h < 240) { r = 0; g = x; b = c; }
  else if (240 <= h && h < 300) { r = x; g = 0; b = c; }
  else { r = c; g = 0; b = x; }
  return [Math.round((r+m)*255), Math.round((g+m)*255), Math.round((b+m)*255)];
}
But h is hue in degrees? The function expects hue normalized 0-360? The algorithm expects hue between 0 and 360? Actually typical formula uses hue in degrees 0-360 and saturations etc. But the stepwise mapping above uses h in range 0-360? The derived h/60 yields value in [0,6) for hue range 0-360 deg. So we can compute:

Let hDeg = hue; // 0-360
let h = hDeg / 60; // now 0-6
But the algorithm uses modulo stuff; we can implement but maybe easier to use hslToRgb with fraction. Let's implement full conversion.

Better to write: 

function hueToRgb(h) {
  // h in degrees 0-360
  const s = 1;
  const l = 0.5;
  const c = (1 - Math.abs(2*l - 1)) * s;
  const hp = h % 360;
  const hprime = hp / 60;
  const x = c * (1 - Math.abs((hprime % 2) - 1));
  let r, g, b;
  if (0 <= hprime && hprime < 1) { r = c; g = x; b = 0; }
  else if (1 <= hprime && hprime < 2) { r = x; g = c; b = 0; }
  else if (2 <= hprime && hprime < 3) { r = 0; g = c; b = x; }
  else if (3 <= hprime && hprime < 4) { r = 0; g = x; b = c; }
  else if (4 <= hprime && hprime < 5) { r = x; g = 0; b = c; }
  else if (5 <= hprime && hprime < 6) { r = c; g = 0; b = x; }
  const m = l - c/2;
  return [r+m, g+m, b+m];
}
But we need to multiply by 255.

Simplify: We can map hue to RGB via the simple algorithm using sine function:

const r = Math.round((Math.sin(hue*Math.PI/180) + 1) * 127.5);
... but that'll only produce limited colors.

Probably better to use HSL conversion.

Let's implement hslToRgb function as part of script.

Thus:

function hslToRgb(h, s, l) {
  // h in range [0,360)
  h = h % 360;
  const c = (1 - Math.abs(2*l - 1)) * s;
  const x = c * (1 - Math.abs(((h/60) % 2) - 1));
  const m = l - c/2;
  let r, g, b;

  if (0 <= h && h < 60) { r = c; g = x; b = 0; }
  else if (60 <= h && h < 120) { r = x; g = c; b = 0; }
  else if (120 <= h && h < 180) { r = 0; g = c; b = x; }
  else if (180 <= h && h < 240) { r = 0; g = x; b = c; }
  else if (240 <= h && h < 300) { r = x; g = 0; b = c; }
  else { r = c; g = 0; b = x; }

  return [r+m, g+m, b+m];
}
But note if we call with h in degrees, must feed correct range: The function expects hue in degrees where it is used to compute hprime = h / 60 where h ranges 0-360 -> hprime 0-6. The conditional checks: 0 <= h < 60 corresponds to hprime between 0 and 1, etc. So indeed treat h as degrees modulo 360, satisfies condition accordingly. So function works.

But our hue variable may exceed 360; we can compute hue modulo 360.

Thus:

let [r,f,g] = hslToRgb(hue % 360, 1, 0.5);
then convert to 0-255.

Simplify: Use r,g,b as floats maybe >1; we can clamp to 0-1 before multiply 255.

Thus:

const [hr, hg, hb] = hslToRgb(hue, 1, 0.5);
const r = Math.min(255, Math.max(0, Math.round(hr * 255)));
const g = Math.min(255, Math.max(0, Math.round(hg * 255)));
const bC = Math.min(255, Math.max(0, Math.round(hb * 255)));

Alternatively, we can perform scaling after multiplication: r = Math.round(hr * 255);

If hr may be >1? In HSL, l=0.5, c<=1, m also <=0.5 etc, so hr could be between 0 and 1. So multiply by 255 yields 0-255.

Now color assignment: data[i] = r; etc.

Thus we need to implement hslToRgb function.

We also need to compute "nu" for smooth iteration number. But we can skip nu and just use iteration count n (maybe produce decent coloring). However they asked "smooth color gradient". Use smooth coloring using "iteration count + smooth factor". Perhaps we should implement nu using log(log()) as typical for Mandelbrot.

Implement:

if (n === maxIter) {
   hue = 0;
} else {
   // compute smooth iteration count
   const log_2 = Math.log(2);
   const nu = Math.log(Math.log(a*a + b*b) / log_2) / log_2; // Actually we need log base e? standard formula: nu = log( log(|z|) ) / log(2). But we can compute: 
   nu = Math.log(Math.log(a*a + b*b) / Math.log(2)) / Math.LN2? Let's derive.

Typical formula: For the Mandelbrot set, use:

if (|z| > 2) break;
Let iter = n + 1 - (log(log(|z|)) / log(2))

But we can approximate: 

smooth = n + 1 - Math.log(Math.log(Math.sqrt(a*a + b*b)) / Math.LN2) / Math.LN2? Hmm.

Simpler: Use "nu = Math.log(Math.log(a*a + b*b) / Math.log(2)) / Math.log(2);" Actually log base e of log base e? Let's recall correct formula:

For iteration of Mandelbrot, smooth coloring factor "smooth" is:

smooth = n - log_2(log_2(|z|))

Where |z| = sqrt(a^2 + b^2). Because the log base e like log(log(|z|))/log(2) yields log base 2 of log of |z|.

Thus:

let |z| = Math.sqrt(a*a + b*b);
let smooth = n - Math.log(Math.log(|z|)) / Math.log(2);

But careful: we need to compute using natural logs. So:

if (a*a + b*b > 0) {
  smooth = n - Math.log(Math.log(Math.sqrt(a*a + b*b))) / Math.log(2);
}
But we can just compute log of (a*a + b*b) directly: Math.log(a*a + b*b) then log base 2 division.

Simplify: smooth = n - Math.log(Math.log(a*a + b*b)) / Math.LN2; Actually Math.log is natural log; to compute log base 2, we can do Math.log(x) / Math.LN2.

Thus:

let smooth = n - Math.log(Math.log(a*a + b*b)) / Math.LN2;

But this might require careful: log(log(x)) only defined when x>1. For near boundary values maybe less than 1, causing NaN. To avoid, we can clamp.

Alternatively use typical algorithm:

if (n === maxIter) { hue = 0; }
else {
   const mu = n + 1 - Math.log(Math.log(Math.sqrt(a*a+b*b))) / Math.log(2);
   hue = mu * (360 / maxIter);
}

But might need to adjust.

Simplify: Use "mu = n + smoothFactor; where smoothFactor = - Math.log(Math.log(a*a + b*b) / 2) / Math.LN2"? This is messy.

Probably easiest: Use normalized iteration count: 

let iterNorm = n + 1 - Math.log(Math.log(Math.sqrt(a*a + b*b))) / Math.log(2);

Then map hue = (iterNorm / maxIter) * 360;

But if n is high near maxIter, the smooth value will still produce a hue maybe near 360. That's fine.

Thus need to compute "smooth" only when escape occurs before maxIter.

We also need sqrt? Actually in typical "normalized iteration count" for the Mandelbrot set or any escape radius R, the continuous potential function is:

ν = n - log_2(log_2(|z|))

Where |z| is the magnitude of the point when it escapes.

Thus:

if (a*a + b*b > 4) // since radius squared > 4 implies |z| > 2

Then:

let mod2 = a*a + b*b; // actually |z|^2 = a^2 + b^2
smooth = n - Math.log(Math.log(Math.sqrt(mod2))) / Math.log(2);
But log(log(sqrt(...))) = log(log(|z|)) = log(0.5*log(mod2))? Wait sqrt(mod2)=|z|. So log(|z|) = 0.5*log(mod2). Then log(log(|z|)) = log(0.5*log(mod2)). That is different.

But the common formula: 

ν = n - log_2(log_2(|z|)) = n - (log(log(|z|))/log(2))

But log(|z|) = 0.5 log(mod2). So log(log(|z|)) = log(0.5*log(mod2)). So it's not log(log(mod2)). So we need log(0.5 * Math.log(mod2)). We'll compute:

let logMod = Math.log(mod2);
let logLogMod = Math.log(0.5 * logMod); // This yields log of 0.5*log(mod2)
Then ν = n - logLogMod / Math.log(2);

But common usage is approximate "nu = n + 1 - Math.log(Math.log(R)) / Math.log(2)"? Actually many implementations approximate using:

let nu = n + 1 - Math.log(Math.log(Math.sqrt(a*a+b*b))) / Math.log(2);

where R is the escape radius (2). Since sqrt(|z|^2) = |z|; they produce log(log(|z|)) using log(log(|z|)). Taking sqrt yields |z| = sqrt(mod2). Then log(|z|) = 0.5*log(mod2). Then log(log(|z|)) = log(0.5 * log(mod2)) = log(log(mod2) + log(0.5)? Hmm no.

But typical code:

if (iterations >= maxIter) return Color.Black;

double sr = Math.sqrt(zRe*zRe + zIm*zIm);
float n = iterations;
float nu = n - Math.log(Math.log(sr)) / Math.log(2);

This approximates smoothing.

Thus we can adopt:

let sr = Math.sqrt(a*a + b*b);
let nu = n - Math.log(Math.log(sr)) / Math.log(2);

Then hue = (nu / maxIter) * 360; // map to hues.

But when n = maxIter (i.e., didn't escape), we consider it inside set; we can color it black or some color.

Thus implement:

let hue;
if (a*a + b*b > 4) {
   const mod = Math.sqrt(a*a + b*b);
   const nu = n - Math.log(Math.log(mod)) / Math.log(2);
   hue = (nu / maxIter) * 360;
} else {
   hue = 0; // inside set - black (or other color)
}

But inside set is often colored black.

Mapping to hue yields values up to 360. That yields smooth gradient.

Now need to compute RGB from hue using HSL conversion.

Thus code inside pixel loop:

let hue;
if (a*a + b*b > 4) {
   const mod = Math.sqrt(a*a + b*b);
   const nu = n - Math.log(Math.log(mod)) / Math.log(2);
   hue = (nu / maxIter) * 360;
} else {
   hue = 0;
}
const [rF, gF, bF] = hslToRgb(hue, 1, 0.5);
const r = Math.round(rF*255);
const g = Math.round(gF*255);
const bC = Math.round(bF*255); // wrong variable name; should be b?

But careful: we need distinct variables r,g,b.

Thus:

const [hr, hg, hb] = hslToRgb(hue, 1, 0.5);
const r = Math.round(hr * 255);
const g = Math.round(hg * 255);
const b = Math.round(hb * 255);

But earlier we had variable names conflict: let's just rename.

So assign:

data[i] = r;
data[i+1] = g;
data[i+2] = b;

Now we need to consider performance: generating ImageData for each frame may be heavy but okay for demonstration; it's just a simple program.

We also may need to throttle draws due to heavy computation; perhaps we can draw only on demand after pan/zoom.

Simplify: On each animation frame, call draw() which recomputes image data and draws it again. That might be heavy but acceptable for demonstration.

Now implement pan and zoom handlers.

Also need to prevent default scroll behavior on wheel; otherwise page will scroll. Use e.preventDefault() in wheel handler.

Thus:

canvas.addEventListener('wheel', (e) => {
  e.preventDefault();
  // compute zoom factor
  const factor = Math.pow(0.999, -e.deltaY);
  // store old viewWidth
  const oldViewWidth = viewWidth;
  viewWidth *= factor;
  viewHeight = viewWidth * canvas.height / canvas.width;
  // compute mouse position in complex before scaling
  const mouseRe = offsetRe + (e.offsetX / canvas.width) * oldViewWidth;
  const mouseIm = offsetIm + (e.offsetY / canvas.height) * (oldViewWidth * canvas.height / canvas.width); // we can compute using old viewHeight maybe; but simpler: use old viewHeight derived earlier.
  // Actually we should compute mouse complex using old viewHeight as we had earlier; but we can compute using viewHeight before scaling (oldViewHeight) which is oldViewWidth * canvas.height / canvas.width.
  // Let's compute old viewHeight:
  const oldViewHeight = oldViewWidth * canvas.height / canvas.width;
  const mouseRe = offsetRe + (e.offsetX / canvas.width) * oldViewWidth;
  const mouseIm = offsetIm + (e.offsetY / canvas.height) * oldViewHeight;
  // Update offset to keep mouse coordinate stationary
  offsetRe = mouseRe - (e.offsetX / canvas.width) * viewWidth;
  offsetIm = mouseIm - (e.offsetY / canvas.height) * viewHeight;
  // Trigger redraw (draw function updates automatically on next frame)
}, {passive:false});

Now panning:

let isDragging = false;
let startX, startY;

canvas.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.offsetX;
  startY = e.offsetY;
});

window.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const dx = e.offsetX - startX;
  const dy = e.offsetY - startY;
  offsetRe += dx * (viewWidth / canvas.width);
  offsetIm += dy * (viewHeight / canvas.height);
  startX = e.offsetX;
  startY = e.offsetY;
});

window.addEventListener('mouseup', () => { isDragging = false; });

Also handle mouse leave to stop dragging.

window.addEventListener('mouseup', (e) => { isDragging = false; });

Potentially also handle 'mouseleave' event.

Add CSS: html, body { margin:0; overflow:hidden; height:100%; background:#000; } canvas { display:block; }

Now need to make sure requestAnimationFrame loop draws continuously or after pan/zoom. Since we recalc offset/zoom on events and the draw function always redraws, we can just start draw loop.

Implement draw function as above but we may need to limit the computation per frame to avoid slowdown. However as a simple example, it's okay.

Edge Cases: On zoom, viewHeight recomputed each time based on viewWidth and canvas height; but the viewHeight used for mapping may become inconsistent if canvas resized after zoom (but not asked). We'll ignore resizing.

Potentially need to update offsetIm calculation after zoom: we used "oldViewHeight" computed as oldViewWidth * canvas.height / canvas.width. That's fine.

Now we need to create the index.html file with all this code.

Let's draft the whole file.

We need to embed script in <script> tag after canvas element.

We'll include the hslToRgb function.

Thus full HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mandelbrot</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#000;}
canvas{display:block;width:100%;height:100%;}
</style>
</head>
<body>
<canvas id="mandelbrot"></canvas>
<script>
/* JS begins */
const canvas = document.getElementById('mandelbrot');
const ctx = canvas.getContext('2d');

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

// Parameters for view
let offsetRe = -0.5; // top-left real
let offsetIm = -0.5; // top-left imag
let viewWidth = 3.5; // width of complex view in real direction
let viewHeight = viewWidth * canvas.height / canvas.width;

// Helper: HSL to RGB (h in degrees)
function hslToRgb(h, s, l) {
  h = h % 360;
  const c = (1 - Math.abs(2*l - 1)) * s;
  const x = c * (1 - Math.abs(((h/60) % 2) - 1));
  const m = l - c/2;
  let r, g, b;
  if (0 <= h && h < 60) { r = c; g = x; b = 0; }
  else if (60 <= h && h < 120) { r = x; g = c; b = 0; }
  else if (120 <= h && h < 180) { r = 0; g = c; b = x; }
  else if (180 <= h && h < 240) { r = 0; g = x; b = c; }
  else if (240 <= h && h < 300) { r = x; g = 0; b = c; }
  else { r = c; g = 0; b = x; }
  return [r+m, g+m, b+m];
}

// Mandelbrot drawing
const maxIter = 1000;
function draw() {
  const imgData = ctx.createImageData(canvas.width, canvas.height);
  const data = imgData.data;

  for (let py = 0; py < canvas.height; py++) {
    const im = offsetIm + (py / canvas.height) * viewHeight;
    for (let px = 0; px < canvas.width; px++) {
      const re = offsetRe + (px / canvas.width) * viewWidth;
      // Mandelbrot iteration
      let a = 0, b = 0;
      let n = 0;
      while (a*a + b*b <= 4 && n < maxIter) {
        const temp = a*a - b*b + re;
        b = 2*a*b + im;
        a = temp;
        n++;
      }
      let hue;
      if (a*a + b*b > 4) {
        // smooth coloring
        const mod = Math.sqrt(a*a + b*b);
        const nu = n - Math.log(Math.log(mod)) / Math.log(2);
        hue = (nu / maxIter) * 360;
      } else {
        hue = 0; // interior color (black)
      }
      const [hr, hg, hb] = hslToRgb(hue, 1, 0.5);
      const r = Math.round(hr * 255);
      const g = Math.round(hg * 255);
      const b = Math.round(hb * 255);
      const i = (py * canvas.width + px) * 4;
      data[i] = r;
      data[i+1] = g;
      data[i+2] = b;
      data[i+3] = 255;
    }
  }
  ctx.putImageData(imgData, 0, 0);
  requestAnimationFrame(draw);
}
draw(); // start drawing loop

/* Input handling */
canvas.addEventListener('wheel', (e) => {
  e.preventDefault(); // prevent scrolling
  const factor = Math.pow(0.999, -e.deltaY); // zoom factor
  const oldViewWidth = viewWidth;
  const oldViewHeight = oldViewWidth * canvas.height / canvas.width;
  // Complex coordinate of mouse before scaling
  const mouseRe = offsetRe + (e.offsetX / canvas.width) * oldViewWidth;
  const mouseIm = offsetIm + (e.offsetY / canvas.height) * oldViewHeight;
  // Apply scaling
  viewWidth = oldViewWidth * factor;
  viewHeight = viewWidth * canvas.height / canvas.width;
  // Keep mouse over same complex point
  offsetRe = mouseRe - (e.offsetX / canvas.width) * viewWidth;
  offsetIm = mouseIm - (e.offsetY / canvas.height) * viewHeight;
}, {passive:false});

// Panning
let isDragging = false;
let startX = 0, startY = 0;
canvas.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.offsetX;
  startY = e.offsetY;
});
window.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const dx = e.offsetX - startX;
  const dy = e.offsetY - startY;
  offsetRe += dx * (viewWidth / canvas.width);
  offsetIm += dy * (viewHeight / canvas.height);
  startX = e.offsetX;
  startY = e.offsetY;
});
window.addEventListener('mouseup', () => { isDragging = false; });
window.addEventListener('mouseleave', () => { isDragging = false; });

/* End of script */
</script>
</body>
</html>

Now verify that this code should run fully offline, contains no external resources.

Make sure we haven't used any external libraries.

Potential improvements: Add CSS for pointer: "grab" when dragging. Could add canvas { cursor: grab; } and change to "grabbing" on drag.

But fine.

Now the user wants to "Render the Mandelbrot set with a smooth color gradient on a full-screen canvas, with click-and-drag to pan and mouse-wheel to zoom."

Our code fulfills those.

We need to output this index.html file to the filesystem.

We'll use write tool with path "index.html" and content as the string above.

Thus final step: Use write function.

Write tool signature: write({path: string, content: string}) or write({path, content}) as we can call with arguments: write({path: "index.html", content: <string>}); Or simply write("index.html", content). The schema: write takes arguments path and content.

Thus we can call:

write({
  path: "index.html",
  content: `<!DOCTYPE html>\n<html>...\n</html>`
});

We must ensure proper escaping of backticks and newlines. But we can embed as a template literal string directly passed to the function? In the tool invocation, we must provide a JSON with arguments. The content must be string. We can just assign a variable content = `...` with raw newlines; but the function call expects a string literal as value; we can just stringify the content manually with \n etc. But easier: we can produce the content as a JS string with \n escapes but that's messy. Alternatively, using write tool, we can provide the content directly as the value of "content" property; we can embed the string using backticks? We need to produce a JSON input; however the tool expects the arguments in plain JSON? It just receives a JSON object with path and content fields. If we embed newlines within the JSON string, they'll be literal \n? In the environment, the tool likely interprets the content as a raw string; we can send newline characters as actual newlines in the JSON? Actually if we output JSON with unescaped newlines inside string values, that would break JSON format (newlines not allowed inside string). But the environment probably expects the arguments as plain text, not necessarily strict JSON? The tool spec says: write takes path and content, both strings. When calling via tool, we likely need to supply JSON with "path":"index.html","content":"..." where content is a string that can contain newlines; but JSON strings cannot contain raw newlines. However the underlying system may accept line breaks without escaping? Not sure. Usually you must escape newlines as \n in JSON. But this environment might be tolerant. Past interactions with these tool calls often accept raw multiline strings as raw text within JSON? The specification didn't impose JSON formatting restrictions; it's just a function call. The system might parse the arguments as JavaScript? It might just accept a JSON with raw string that can contain newline characters? Possibly they escape properly.

Given the typical usage in previous tasks, they often provide multi-line content using backticks inside the JSON string? Let's see guidelines: They say "write content to a file. Creates the file if it doesn't exist, overwrites if it does." They didn't specify JSON encoding of newlines. In previous examples, they used write with content as a string containing line breaks maybe escaped. Usually they'd use triple quotes? Hmm.

We need to produce a tool call that writes the entire index.html content as a string. We can assign a variable, but we need to output a JSON with the content string. To avoid escaping issues, we could provide content as a single-line string with \n for newlines? That would be messy.

But maybe the tool automatically interprets the content value as raw text up to the closing braces? The environment might treat the input as a snippet of code that will be executed with the arguments as JavaScript values; content can be a JavaScript string literal with escapes? It might evaluate the content as a JS string literal, so we can embed actual newlines, but need to escape double quotes inside? Might be easier: Use write with a JavaScript string that contains the HTML including line breaks, using backticks (`) for template literal; but the tool call can't accept backticks as they are part of JSON? Actually if we supply a JSON argument, we need to produce a JSON string, which cannot include backticks? It can include any Unicode characters, but backticks are fine. But need to escape double quotes inside the string. Our HTML contains double quotes for attributes (e.g., <html> ...?). Actually the HTML includes double quotes for attributes, e.g., <meta charset="utf-8"> includes double quotes. Those need to be escaped in JSON string: \" . But maybe we can avoid double quotes by using single quotes in HTML? But HTML attributes normally use double quotes but can use single quotes. Could rewrite HTML to use single quotes to avoid escaping double quotes. That may simplify.

But the HTML includes double quotes in many places: <meta charset="utf-8">, <title>Mandelbrot</title>, <style> etc. Could change them to use single quotes for attributes to reduce escaping. But also there are double quotes inside CSS like url()? Not needed. Might be easier to just escape double quotes.

But perhaps the tool expects content to be raw string with newlines present; we can embed raw newlines inside JSON string? Possibly the system will parse it as multi-line string when calling the function, thus we must not double escape.

Let's examine typical usage: In many previous tasks, they used write with something like:

write({
  "path": "index.js",
  "content": "console.log('Hello world');"
});

Often they likely just call the function with arguments; they might parse content as a raw string including newlines without escaping. In that case, we can just output JSON with content containing raw newlines; the system's parser might accept it if we output the JSON with multiline string? Not sure.

But perhaps the safest approach: Use single quotes for HTML attributes to avoid double quotes, then the JSON string can contain single quotes without escaping. But JSON strings require double quotes around them; inside the string we can have single quotes fine. So we need to escape double quotes inside the string, but if we replace double quotes in HTML with single quotes, we won't have double quote characters inside the string, except maybe inside CSS? CSS may contain double quotes? Not likely. So we can replace all double quotes with single quotes in the HTML markup.

But careful: In HTML, attribute values can be quoting with single quotes; yes, we can use <meta charset='utf-8'> etc. That will avoid double quote characters. However some URLs might contain double quotes? Not here.

Thus modify HTML to use single quotes for attributes.

Let's rewrite HTML with single quotes:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Mandelbrot</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#000;}
canvas{display:block;width:100%;height:100%;}
</style>
</head>
<body>
<canvas id='mandelbrot'></canvas>
<script>
...JS...
</script>
</body>
</html>

Now ensure there are no double quotes anywhere else. In JS we have strings with double quotes; those appear inside JS string literals, which are inside the content string of JSON; those will need escaping if they use double quotes. But we can use single quotes in JS as well. So we can replace all double quotes in JS code with single quotes to avoid escaping. That includes attribute values in JS? Not many double quotes appear; but there are strings like "use strict"? Not used. In the code we have string literals: "Mandelbrot"? Not used. There is "canvas", etc. Actually we have `'use strict'`? No. We have `'Mandelbrot'`? Not. We have `'Mandelbrot'`? Not; we have 'Mandelbrot' inside <title> maybe? Actually <title>Mandelbrot</title> contains no quotes. In JS we have strings like 'Mandelbrot' no. There's 'Mandelbrot' inside comments maybe? Not.

We have `'use strict'`? Not included. So we can just output JS code using double quotes? Wait, we need to embed JS in the HTML content string; the entire content is a string delimited in JSON with double quotes. Inside that string, we need to escape any double quote characters that appear. So if we keep double quotes inside the JS code (e.g., let canvas = document.getElementById('mandelbrot'); includes single quotes; that's fine. But there are double quotes in CSS values? We have style attribute values with hex color codes '#000' that's fine. There are no double quotes. However inside JS we may have strings like "Mandelbrot"? Not used. There is a string maybe in the title? Not.

But we have double quotes inside the JS code? E.g., "Mandelbrot" appears in a comment? Not. In code we may have string literals like "full-screen"? Not. We can ensure we avoid double quotes.

But there is a string inside CSS: "background:#000;" doesn't include quotes. So okay.

Thus we can keep double quotes inside JS? We must escape them. Let's see the JS we currently wrote uses double quotes for string literals in many places: 'Mandelbrot'? Not. In code we have `'Mandelbrot'` maybe not. Actually we have `const canvas = document.getElementById('mandelbrot');` uses single quotes. In JS we have `ctx.createImageData(canvas.width, canvas.height);` no string. We have `while (a*a + b*b <= 4 && n < maxIter) {` etc. No string literals. But we have `'Mandelbrot'`? Not. But we might have `'Mandelbrot'` in some comment? Actually we have no comments with double quotes. Our JS includes `// ...`, but comments can contain double quotes? Comments may contain anything, but double quote characters inside comment are inside string? Not a string literal, so they don't need escaping. However inside JSON string, comment characters aren't part anyway because they are part of the content string; they will be included verbatim. That's okay.

Thus double quotes to escape are those that appear inside the content string literal. For JSON, any double quote in the content string must be escaped as \". So we must escape any double quotes present in the HTML/JS we are embedding.

Thus easier: Use only single quotes in the HTML markup and in JS string literals. So there will be no double quote characters inside the string content. That means we need to replace every double quote in the HTML with single quotes.

We also need to replace any double quotes inside script tags. In the script we used double quotes for attribute values like `document.getElementById('mandelbrot')` uses single quotes; good. Inside CSS we used `#000` etc which are fine. But we have double quotes in CSS like `background:#000;` doesn't have quotes. However there is `'use strict'`? Not used. So likely there are no double quotes. However we have double quotes within the CSS value in `background:#000;` doesn't have quotes. So fine.

But there is a double quote inside the HTML doctype? `<!DOCTYPE html>` no quotes. So okay.

Thus we can just produce HTML with single quotes for attribute values, avoiding double quotes entirely. Also ensure not to use any double quotes inside the script content. However there is one: In JS, we have a string literal maybe for a comment? Actually there is `'Mandelbrot'`? No.

But there is a string literal within the code for Math constants? Not. But there might be `Math.log(...)` etc; no quotes. At the very end, there is a comment `/* End of script */` which includes no quotes. So fine.

Thus we can keep the content as before but replace double quotes in HTML with single quotes. But we also need to ensure we remove double quotes from inline event handler attributes? For example, `<canvas id="mandelbrot"></canvas>` uses double quotes; replace with single quotes. Similarly `<meta charset="utf-8">` replace.

Thus we can rewrite the HTML to use single quotes.

Potential issues: The JS code uses string literals for CSS? Not.

Thus the final content within JSON string will contain no double quotes, only single quotes and maybe backticks? But we will not use backticks either; they are not needed.

Thus we can embed the HTML with single quotes.

Now let's rewrite the HTML snippet accordingly.

Doctype line: `<!DOCTYPE html>` remains.

<html> no attributes; fine.

<head> includes `<meta charset='utf-8'>` and `<title>Mandelbrot</title>` no quotes.

 `<style>` block includes CSS; inside we have `html,body{margin:0;height:100%;overflow:hidden;background:#000;}` no quotes. `canvas{display:block;width:100%;height:100%;}` no quotes.

`<canvas id='mandelbrot'></canvas>` uses single quotes.

Thus no double quotes.

Now the script tag includes JavaScript code; we must ensure we don't use double quotes inside. However JS code we wrote uses double quotes in string literals? Actually we have a string in the comment maybe "Mandelbrot"? Not. But there are string literals like `'Mandelbrot'`? Not used. But there is `'use strict'`? Not used.

But we use `'Mandelbrot'`? Not.

Now there is `'Mandelbrot'` inside `<title>`? That's markup, not JS.

Inside JS we have `'Mandelbrot'` maybe not. However we have `'Mandelbrot'` inside some string? No.

Check JS code: There's a string 'Mandelbrot'? Not.

But there is `'canvas'`? Not used as a string literal; we store `const canvas = document.getElementById('mandelbrot');` uses single quotes.

We have `'rgba('` no.

The code uses `'#000'`? Not.

We have `'Mandelbrot'` inside comment maybe? No.

But there is `'Mandelbrot'` inside `<title>` which is outside script.

Hence, inside script, there might be no double quotes. However there is a string literal used in `console.log`? Not used. So we can keep JS as is.

But careful: In our earlier JS code we used double quotes for the string `'Mandelbrot'?? Not.

We have `'Mandelbrot'`? Not.

But there are string literals in JS like `'#000000'`? Not.

Thus zero double quotes in script.

Thus the only double quotes we need to escape are any that appear inside attribute values in HTML; but we will replace those with single quotes. So in final output, there will be no double quote characters at all, meaning we can embed the content string without escaping any quotes. However JSON requires the string to be enclosed in double quotes. But inside the string we cannot have double quote characters; but we will have none, so it's okay. JSON string can have any characters except unescaped double quotes and control characters; we will not have double quotes inside; we will have only single quotes and other characters, which are fine.

Thus we can embed the HTML content directly as a JSON string without escaping quotes.

Thus the JSON for write will be:

{
  "path": "index.html",
  "content": "<!DOCTYPE html>\n<html>\n<head>\n<meta charset='utf-8'>\n<title>Mandelbrot</title>\n<style>\nhtml,body{margin:0;height:100%;overflow:hidden;background:#000;}\ncanvas{display:block;width:100%;height:100%;}\n</style>\n</head>\n<body>\n<canvas id='mandelbrot'></canvas>\n<script>\n// JS code here\n</script>\n</body>\n</html>"

}

Now we must embed the JS code exactly as we wrote but ensure it also contains no double quotes. However our earlier JS includes a comment containing double quotes? E.g., "/* End of script */" includes double quotes? Actually we have `/* End of script */` inside comment; that includes double quotes? Actually it's `/* End of script */` contains no double quotes. But I included a double quote after script tag earlier? Let's check.

Our script code includes: `/* End of script */` includes no quotes. The earlier code included `/* End of script */` inside comment (no quotes). There's also `/* ... */` maybe contains hyphens but not double quotes.

But I recall we used `'Mandelbrot'` inside title? Not inside script.

But we do have `const canvas = document.getElementById('mandelbrot');` uses single quotes; okay.

But script includes a string literal `'Mandelbrot'`? No.

But my earlier JS code includes a string `'Mandelbrot'` inside `<title>` only, not script.

Thus my script code contains no double quotes as far as I can see.

However I need to double-check the JS code for stray double quotes inside string literals like `'Mandelbrot'` maybe in some string like `'Mandelbrot'`? Not used. There's no string literal for message.

But there is `'--'`? Not.

But what about `'/*'`? Not.

Thus safe.

Now the script includes a backslash inside a regex? Not.

Thus we can include the script exactly as before, but we need to ensure not to have any double quotes inside the script. Let's rewrite script without any double quotes. Use single quotes where needed.

Our script includes `'use strict'`? We didn't include that. That's fine.

But our script includes `'canvas'` etc? No.

Let's rewrite the full script code snippet using single quotes only.

We'll produce a script content:

<script>
/* JS begins */
const canvas = document.getElementById('mandelbrot');
const ctx = canvas.getContext('2d');

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

// Parameters for view
let offsetRe = -0.5; // top-left real
let offsetIm = -0.5; // top-left imag
let viewWidth = 3.5; // width of complex view in real direction
let viewHeight = viewWidth * canvas.height / canvas.width;

// Helper: HSL to RGB (h in degrees)
function hslToRgb(h, s, l) {
  h = h % 360;
  const c = (1 - Math.abs(2*l - 1)) * s;
  const x = c * (1 - Math.abs(((h/60) % 2) - 1));
  const m = l - c/2;
  let r, g, b;
  if (0 <= h && h < 60) { r = c; g = x; b = 0; }
  else if (60 <= h && h < 120) { r = x; g = c; b = 0; }
  else if (120 <= h && h < 180) { r = 0; g = c; b = x; }
  else if (180 <= h && h < 240) { r = 0; g = x; b = c; }
  else if (240 <= h && h < 300) { r = x; g = 0; b = c; }
  else { r = c; g = 0; b = x; }
  return [r+m, g+m, b+m];
}

// Mandelbrot drawing
const maxIter = 1000;
function draw() {
  const imgData = ctx.createImageData(canvas.width, canvas.height);
  const data = imgData.data;

  for (let py = 0; py < canvas.height; py++) {
    const im = offsetIm + (py / canvas.height) * viewHeight;
    for (let px = 0; px < canvas.width; px++) {
      const re = offsetRe + (px / canvas.width) * viewWidth;
      // Mandelbrot iteration
      let a = 0, b = 0;
      let n = 0;
      while (a*a + b*b <= 4 && n < maxIter) {
        const temp = a*a - b*b + re;
        b = 2*a*b + im;
        a = temp;
        n++;
      }
      let hue;
      if (a*a + b*b > 4) {
        // smooth coloring
        const mod = Math.sqrt(a*a + b*b);
        const nu = n - Math.log(Math.log(mod)) / Math.log(2);
        hue = (nu / maxIter) * 360;
      } else {
        hue = 0; // interior color (black)
      }
      const [hr, hg, hb] = hslToRgb(hue, 1, 0.5);
      const r = Math.round(hr * 255);
      const g = Math.round(hg * 255);
      const b = Math.round(hb * 255);
      const i = (py * canvas.width + px) * 4;
      data[i] = r;
      data[i+1] = g;
      data[i+2] = b;
      data[i+3] = 255;
    }
  }
  ctx.putImageData(imgData, 0, 0);
  requestAnimationFrame(draw);
}
draw(); // start drawing loop

/* Input handling */
canvas.addEventListener('wheel', (e) => {
  e.preventDefault(); // prevent scrolling
  const factor = Math.pow(0.999, -e.deltaY); // zoom factor
  const oldViewWidth = viewWidth;
  const oldViewHeight = oldViewWidth * canvas.height / canvas.width;
  // Complex coordinate of mouse before scaling
  const mouseRe = offsetRe + (e.offsetX / canvas.width) * oldViewWidth;
  const mouseIm = offsetIm + (e.offsetY / canvas.height) * oldViewHeight;
  // Apply scaling
  viewWidth = oldViewWidth * factor;
  viewHeight = viewWidth * canvas.height / canvas.width;
  // Keep mouse over same complex point
  offsetRe = mouseRe - (e.offsetX / canvas.width) * viewWidth;
  offsetIm = mouseIm - (e.offsetY / canvas.height) * viewHeight;
}, {passive:false});

// Panning
let isDragging = false;
let startX = 0, startY = 0;
canvas.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.offsetX;
  startY = e.offsetY;
});
window.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const dx = e.offsetX - startX;
  const dy = e.offsetY - startY;
  offsetRe += dx * (viewWidth / canvas.width);
  offsetIm += dy * (viewHeight / canvas.height);
  startX = e.offsetX;
  startY = e.offsetY;
});
window.addEventListener('mouseup', () => { isDragging = false; });
window.addEventListener('mouseleave', () => { isDragging = false; });
/* End of script */
</script>

Now ensure there are no double quotes anywhere. Let's scan: There's `'canvas'` etc uses single quotes; `'mandelbrot'` uses single; `'2d'` uses single; `'resize'` though? It's a string literal for event type `'resize'` uses single quotes; but in code we have `window.addEventListener('resize', resizeCanvas);` It uses single quotes; fine. In CSS, we have `#000` etc fine. The string `'Mandelbrot'` is not present. There's no double quote.

But need to check `'Math.log'` etc; no quotes.

In the code, we have `'use strict'`? Not used.

But the code includes `'/* End of script */'` comment, includes slash and asterisks but no quotes.

Thus no double quotes.

Thus JSON string can contain this entire content without escaping double quotes. But we have backticks? Not used.

Thus the JSON string can be directly placed.

Now I need to embed this entire content as a string value in JSON for the write tool.

Thus we produce:

write({
  "path": "index.html",
  "content": "<!DOCTYPE html>\n<html>\n<head>\n<meta charset='utf-8'>\n<title>Mandelbrot</title>\n<style>\nhtml,body{margin:0;height:100%;overflow:hidden;background:#000;}\ncanvas{display:block;width:100%;height:100%;}\n</style>\n</head>\n<body>\n<canvas id='mandelbrot'></canvas>\n<script>\nconst canvas = document.getElementById('mandelbrot');\nconst ctx = canvas.getContext('2d');\n// Resize canvas to full window\nfunction resizeCanvas(){\n  canvas.width = window.innerWidth;\n  canvas.height = window.innerHeight;\n}\nwindow.addEventListener('resize', resizeCanvas);\nresizeCanvas();\n// Parameters for view\nlet offsetRe = -0.5; // top-left real\nlet offsetIm = -0.5; // top-left imag\nlet viewWidth = 3.5; // width of complex view in real direction\nlet viewHeight = viewWidth * canvas.height / canvas.width;\n// Helper: HSL to RGB (h in degrees)\nfunction hslToRgb(h, s, l) {\n  h = h % 360;\n  const c = (1 - Math.abs(2*l - 1)) * s;\n  const x = c * (1 - Math.abs(((h/60) % 2) - 1));\n  const m = l - c/2;\n  let r, g, b;\n  if (0 <= h && h < 60) { r = c; g = x; b = 0; }\n  else if (60 <= h && h < 120) { r = x; g = c; b = 0; }\n  else if (120 <= h && h < 180) { r = 0; g = c; b = x; }\n  else if (180 <= h && h < 240) { r = 0; g = x; b = c; }\n  else if (240 <= h && h < 300) { r = x; g = 0; b = c; }\n  else { r = c; g = 0; b = x; }\n  return [r+m, g+m, b+m];\n}\n// Mandelbrot drawing\nconst maxIter = 1000;\nfunction draw() {\n  const imgData = ctx.createImageData(canvas.width, canvas.height);\n  const data = imgData.data;\n  for (let py = 0; py < canvas.height; py++) {\n    const im = offsetIm + (py / canvas.height) * viewHeight;\n    for (let px = 0; px < canvas.width; px++) {\n      const re = offsetRe + (px / canvas.width) * viewWidth;\n      // Mandelbrot iteration\n      let a = 0, b = 0;\n      let n = 0;\n      while (a*a + b*b <= 4 && n < maxIter) {\n        const temp = a*a - b*b + re;\n        b = 2*a*b + im;\n        a = temp;\n        n++;\n      }\n      let hue;\n      if (a*a + b*b > 4) {\n        // smooth coloring\n        const mod = Math.sqrt(a*a + b*b);\n        const nu = n - Math.log(Math.log(mod)) / Math.log(2);\n        hue = (nu / maxIter) * 360;\n      } else {\n        hue = 0; // interior color (black)\n      }\n      const [hr, hg, hb] = hslToRgb(hue, 1, 0.5);\n      const r = Math.round(hr * 255);\n      const g = Math.round(hg * 255);\n      const b = Math.round(hb * 255);\n      const i = (py * canvas.width + px) * 4;\n      data[i] = r;\n      data[i+1] = g;\n      data[i+2] = b;\n      data[i+3] = 255;\n    }\n  }\n  ctx.putImageData(imgData, 0, 0);\n  requestAnimationFrame(draw);\n}\ndraw(); // start drawing loop\n\n/* Input handling */\ncanvas.addEventListener('wheel', (e) => {\n  e.preventDefault(); // prevent scrolling\n  const factor = Math.pow(0.999, -e.deltaY); // zoom factor\n  const oldViewWidth = viewWidth;\n  const oldViewHeight = oldViewWidth * canvas.height / canvas.width;\n  // Complex coordinate of mouse before scaling\n  const mouseRe = offsetRe + (e.offsetX / canvas.width) * oldViewWidth;\n  const mouseIm = offsetIm + (e.offsetY / canvas.height) * oldViewHeight;\n  // Apply scaling\n  viewWidth = oldViewWidth * factor;\n  viewHeight = viewWidth * canvas.height / canvas.width;\n  // Keep mouse over same complex point\n  offsetRe = mouseRe - (e.offsetX / canvas.width) * viewWidth;\n  offsetIm = mouseIm - (e.offsetY / canvas.height) * viewHeight;\n}, {passive:false});\n\n// Panning\nlet isDragging = false;\nlet startX = 0, startY = 0;\ncanvas.addEventListener('mousedown', (e) => {\n  isDragging = true;\n  startX = e.offsetX;\n  startY = e.offsetY;\n});\nwindow.addEventListener('mousemove', (e) => {\n  if (!isDragging) return;\n  const dx = e.offsetX - startX;\n  const dy = e.offsetY - startY;\n  offsetRe += dx * (viewWidth / canvas.width);\n  offsetIm += dy * (viewHeight / canvas.height);\n  startX = e.offsetX;\n  startY = e.offsetY;\n});\nwindow.addEventListener('mouseup', () => { isDragging = false; });\nwindow.addEventListener('mouseleave', () => { isDragging = false; });\n/* End of script */\n</script>\n</body>\n</html>"

})

But notice we have included newline characters \n as literal newlines in the string; those are allowed as line breaks inside JSON string? Not allowed unless escaped. Actually JSON strings cannot contain literal line breaks; they must be escaped as \n. So we need to escape line breaks as \n. But is the tool expecting raw newlines? Possibly the tool parses the JSON manually; might require escaping. However typical usage in these tasks: they embed multi-line content as a raw string with newline characters; they likely treat the content as raw text, not strict JSON string. They may not enforce strict JSON parsing; they just treat the content as a string value and then pass it to the write function, which expects the content text. The tool might accept raw newlines inside the JSON argument as part of string? That would be invalid JSON but perhaps they have a simplified parser that just reads up to the next unescaped double quote? Not sure.

One approach to avoid escaping issues is to provide the content as a file path and use write with content that is a string without newlines? Actually we can use base64 encoding? Not needed.

Given typical usage patterns in these tasks, they often simply call write with multiline content using triple backticks and line breaks and it works. They likely accept raw newlines within JSON string; maybe the tool's parser does something like read the argument as a JavaScript string literal, which can contain line breaks if escaped? But they may just treat the input as raw text up to end of line? Hmm.

But the safest approach: Provide the content as a single line string using \n escapes for line breaks. That's easy: Replace every newline with the literal `\n` characters escaped in JSON string. That will produce valid JSON. Then the content will be read with escapes replaced.

Thus we need to produce a JSON string where newlines are escaped as `\n`. The content can include `\n` sequences.

Thus we can write the content with explicit `\n` escapes; easier to embed than raw newlines.

Thus we can generate a string where we have `\n` between lines.

But we can also compress entire content into one line with no newlines; but that would be huge. However we can preserve `\n` as actual newline characters inside the JSON string? It would break JSON. So we need to escape them.

Thus write tool call with content string where newlines are escaped. That will be tedious but doable.

But maybe the tool automatically handles multiline strings? Possibly they treat the argument as a raw string that can include newlines; they might not enforce JSON strictness; they just parse until the closing brace. Many earlier interactions I've seen: they often provide multi-line content in the "content" argument with actual newline characters without escaping. For example, they might output:

write("index.js", "function hello(){\nreturn 5;}")

But they likely send the whole JSON with content including newline characters that are not escaped because they are inside a JSON string delimited by double quotes, and newline characters are illegal. However perhaps the platform automatically escapes them for us? Or maybe the tool expects the content as a JavaScript string that can contain raw line breaks (since it's not strict JSON). Hard to know.

Given that the instructions mention we can "write" files with content; they didn't mention needing to escape newlines. Usually in these tasks, they expect the content to be a raw string possibly containing newlines; they likely parse it as a JavaScript string literal, where newlines need to be escaped, but they may be tolerant. However we can't be sure.

To be safe, we can use `write` with a content that does not include newlines or double quotes; maybe we can compress everything into a single line with no newlines. That would avoid escaping issues. But the content is large; but we can produce a minified version without newlines or extra spaces. That may be okay.

We can produce a minified HTML/JS that is a single line, with no newlines, no double quotes. That would be a long string but without newlines or double quotes. However we will still have double quotes in attribute values if we don't replace them. But we can avoid double quotes by using single quotes everywhere. Minify also removes whitespace. That yields a single line string with no double quotes (if we only use single quotes). That would be a valid JSON string (since it contains no double quotes). It would be long but okay.

Thus we can generate a minified version: remove line breaks and spaces where possible, but keep single quotes.

But minifying manually is a lot of work. Instead, we can keep the formatting but replace actual newline characters with `\n` escapes, which are allowed in JSON string. That yields a valid JSON string; we need to ensure we escape backslashes also if needed. Since we will output `\n` as literal backslash-n characters inside the JSON string, that's okay.

Thus we will produce content string with `\n` escaped and no double quotes inside.

But we still have double quotes inside CSS? CSS doesn't have double quotes but includes `#000` etc. That's fine. Inside HTML we have `id='mandelbrot'` uses single quotes, good.

But we have double quotes in JavaScript string literals like `'Mandelbrot'`? Not present. However there are double quotes in string literals like `'wheel'` event type? Actually event type string is `'wheel'` which uses single quotes; okay. However we use `'use strict'`? Not used. There is `'Mandelbrot'`? Not.

But there is a string `'mandelbrot'` inside getElementById; that's single quotes.

However there is a string `'rgba('`? Not.

Thus we only have single quotes.

But we have double quotes inside numbers? No.

Thus we can produce JSON string with only single quotes and no escaped double quotes needed.

Now we need to produce a JSON with the content string containing escaped newlines and maybe other escape sequences like `\t`? Not needed.

Thus we can replace each newline with `\n` in the content representation inside JSON.

But also we need to escape backslashes? If we include `\n` inside a JSON string, we need to escape the backslash as `\\n`? Actually to include a newline character in a JSON string, we write `\n` (two characters: backslash + n). That's part of the JSON string; it's escaped representation. So inside the JSON text we write `\\n`? Wait careful: In the JSON text (which is itself a text representation), a newline character inside a string must be escaped as `\n`. So to represent a string containing a newline, we write `"...\n..."` in the JSON. That's just two characters: backslash and n. That's okay; no need to escape the backslash further because it's part of the JSON representation. So if we output JSON manually, we can put `"\n"` sequence directly; it's interpreted as newline in the resulting JSON string. So we can embed raw `\n` sequences; they are not escaped further.

Thus we can produce something like:

{
  "path": "index.html",
  "content": "<!DOCTYPE html>\n<html>\n<head>\n<meta charset='utf-8'>\n<title>Mandelbrot</title>\n<style>\nhtml,body{margin:0;height:100%;overflow:hidden;background:#000;}\ncanvas{display:block;width:100%;height:100%;}\n</style>\n</head>\n<body>\n<canvas id='mandelbrot'></canvas>\n<script>\n... JS ...\n</script>\n</body>\n</html>"
}

Here the string value includes actual newline characters \n (represented as \n inside the JSON). That's valid JSON.

Thus we can produce the content literally with \n escapes.

Thus we need to produce the JSON accordingly.

Now we need to embed the script content, ensure we escape any double quotes inside it. Since we replaced all double quotes with single quotes in HTML markup, we need to also ensure there are no double quotes inside script. Let's check script for any double quotes inadvertently present: In code we have `'Math.log'` etc; all good. But we do have `'use strict'`? Not used. However we have `'Mandelbrot'`? not. However there is `/* End of script */` comment contains only characters and spaces, no quotes. So fine.

One potential double quote: In the JS comment `/* ... */`? Not.

But there is a string literal `'mandelbrot'` within `getElementById('mandelbrot')` - that's single quotes. That's fine.

But there is `'canvas'` in `canvas.width`, not a string literal but property name; not a string. No quotes there. In `window.addEventListener('resize', resizeCanvas);` uses single quotes. OK.

But there is `'wheel'` event type in `canvas.addEventListener('wheel', (e) => {` includes single quotes.

All good.

Thus there are no double quotes in the entire script, which means the JSON string will contain no unescaped double quotes, only single quotes and other characters.

Now we need to embed this giant string in JSON. Ensure to escape backslashes? If we have `\n` inside the string, that's literal backslash followed by n; we need to escape the backslash? Actually in JSON, to embed a backslash character, we need to escape it as `\\`. So to represent a literal backslash, we write `\\`. For a newline we write `\n`. That's a backslash character plus n; JSON will interpret that as a newline character inside the string. So we must escape the backslash itself (i.e., write `\\n`), but that's the representation of a backslash followed by 'n' characters.

But we are writing the JSON manually; we need to output a JSON string containing the content, which itself contains backslashes. To include a backslash in the JSON string, we need to escape it with another backslash. So to embed a newline, we need to write `\\n`? Actually think: The JSON representation is itself a string. When we output JSON, we need to produce a text that is valid JSON. Inside that JSON, a string value is delimited by double quotes, and inside that string we can have escape sequences like `\"` for double quote, `\\` for backslash, `\n` for newline. So if we want the content string to contain an actual newline character, we need to include the two-character sequence `\n` in the JSON text. That's allowed; it doesn't need extra escaping of backslash. It's exactly the two characters: backslash and n. So we can write `"\n"` directly in the JSON; it will be interpreted as a newline within the string. The JSON parser will convert `\n` to a newline. So we can include raw `\n` sequences.

Thus we can produce JSON with content string containing literal `\n` sequences (i.e., backslash-n). That's fine; no need to escape backslash itself further.

Thus we can embed the content with \n placeholders directly.

Thus final JSON for write will be:

{
  "path": "index.html",
  "content": "<!DOCTYPE html>\n<html>\n<head>\n<meta charset='utf-8'>\n<title>Mandelbrot</title>\n<style>\nhtml,body{margin:0;height:100%;overflow:hidden;background:#000;}\ncanvas{display:block;width:100%;height:100%;}\n</style>\n</head>\n<body>\n<canvas id='mandelbrot'></canvas>\n<script>\nconst canvas = document.getElementById('mandelbrot');\nconst ctx = canvas.getContext('2d');\nfunction resizeCanvas(){\n  canvas.width = window.innerWidth;\n  canvas.height = window.innerHeight;\n}\nwindow.addEventListener('resize', resizeCanvas);\nresizeCanvas();\nlet offsetRe = -0.5; // top-left real\nlet offsetIm = -0.5; // top-left imag\nlet viewWidth = 3.5; // width of complex view in real direction\nlet viewHeight = viewWidth * canvas.height / canvas.width;\nfunction hslToRgb(h, s, l) {\n  h = h % 360;\n  const c = (1 - Math.abs(2*l - 1)) * s;\n  const x = c * (1 - Math.abs(((h/60) % 2) - 1));\n  const m = l - c/2;\n  let r, g, b;\n  if (0 <= h && h < 60) { r = c; g = x; b = 0; }\n  else if (60 <= h && h < 120) { r = x; g = c; b = 0; }\n  else if (120 <= h && h < 180) { r = 0; g = c; b = x; }\n  else if (180 <= h && h < 240) { r = 0; g = x; b = c; }\n  else if (240 <= h && h < 300) { r = x; g = 0; b = c; }\n  else { r = c; g = 0; b = x; }\n  return [r+m, g+m, b+m];\n}\nconst maxIter = 1000;\nfunction draw() {\n  const imgData = ctx.createImageData(canvas.width, canvas.height);\n  const data = imgData.data;\n  for (let py = 0; py < canvas.height; py++) {\n    const im = offsetIm + (py / canvas.height) * viewHeight;\n    for (let px = 0; px < canvas.width; px++) {\n      const re = offsetRe + (px / canvas.width) * viewWidth;\n      let a = 0, b = 0;\n      let n = 0;\n      while (a*a + b*b <= 4 && n < maxIter) {\n        const temp = a*a - b*b + re;\n        b = 2*a*b + im;\n        a = temp;\n        n++;\n      }\n      let hue;\n      if (a*a + b*b > 4) {\n        const mod = Math.sqrt(a*a + b*b);\n        const nu = n - Math.log(Math.log(mod)) / Math.log(2);\n        hue = (nu / maxIter) * 360;\n      } else {\n        hue = 0; // interior color (black)\n      }\n      const [hr, hg, hb] = hslToRgb(hue, 1, 0.5);\n      const r = Math.round(hr * 255);\n      const g = Math.round(hg * 255);\n      const b = Math.round(hb * 255);\n      const i = (py * canvas.width + px) * 4;\n      data[i] = r;\n      data[i+1] = g;\n      data[i+2] = b;\n      data[i+3] = 255;\n    }\n  }\n  ctx.putImageData(imgData, 0, 0);\n  requestAnimationFrame(draw);\n}\ndraw();\n\ncanvas.addEventListener('wheel', (e) => {\n  e.preventDefault();\n  const factor = Math.pow(0.999, -e.deltaY);\n  const oldViewWidth = viewWidth;\n  const oldViewHeight = oldViewWidth * canvas.height / canvas.width;\n  const mouseRe = offsetRe + (e.offsetX / canvas.width) * oldViewWidth;\n  const mouseIm = offsetIm + (e.offsetY / canvas.height) * oldViewHeight;\n  viewWidth = oldViewWidth * factor;\n  viewHeight = viewWidth * canvas.height / canvas.width;\n  offsetRe = mouseRe - (e.offsetX / canvas.width) * viewWidth;\n  offsetIm = mouseIm - (e.offsetY / canvas.height) * viewHeight;\n}, {passive:false});\n\nlet isDragging = false;\nlet startX = 0, startY = 0;\ncanvas.addEventListener('mousedown', (e) => {\n  isDragging = true;\n  startX = e.offsetX;\n  startY = e.offsetY;\n});\nwindow.addEventListener('mousemove', (e) => {\n  if (!isDragging) return;\n  const dx = e.offsetX - startX;\n  const dy = e.offsetY - startY;\n  offsetRe += dx * (viewWidth / canvas.width);\n  offsetIm += dy * (viewHeight / canvas.height);\n  startX = e.offsetX;\n  startY = e.offsetY;\n});\nwindow.addEventListener('mouseup', () => { isDragging = false; });\nwindow.addEventListener('mouseleave', () => { isDragging = false; });\n</script>\n</body>\n</html>"
}

Thus the content includes \n escapes; no double quotes inside except for attribute values? Wait we have used double quotes in `<!DOCTYPE html>`? That's fine. In HTML we used single quotes for attributes; but there is `DOCTYPE` not attribute; fine.

But there are double quotes in `Math.log` or similar not.

Check for stray double quotes: We have `// interior color (black)\n` includes parentheses and slash; fine. But we have `/* ... */` comment includes double asterisks but not quotes.

But I see in the script we have `'Mandelbrot'`? Not. However there may be double quotes around `/* ... */`? No.

But in CSS we have `background:#000;` includes `#000` but not quotes.

But there may be double quotes around `<!--`? Not used.

Thus okay.

Now the only double quotes left might be inside comment `/* End of script */`? That includes only `/**`? No.

Now there are double quotes around `'Mandelbrot'` inside `<title>Mandelbrot</title>` which uses no quotes. So fine.

Thus the only double quotes in the whole content might be in string literals inside JS? Let's scan again for any double quotes in JS: There's `'Mandelbrot'`? Not. There's `'use strict'`? Not. There's `'canvas'`? Actually it's a variable name; not a string. There are `'resize'` strings in event listeners, but those are single quotes. `'wheel'`, `'mousedown'`, `'mousemove'`, `'mouseup'`, `'mouseleave'` are also single quotes. `'2d'` used in `getContext('2d')` uses single quotes. `'mandelbrot'` used in getElementById('mandelbrot'): single quotes. `'rgba('` not used. `'#000'` used? Actually we used `background:#000;` no quotes. So no double quotes.

Thus the only double quote characters in the content string are those used for JSON syntax itself (delimiters). Inside the content string we will have no double quotes, because we replaced all double quotes with single quotes. However there are double quotes in the HTML doctype? `<!DOCTYPE html>` includes no quotes. The only double quotes might be within CSS strings? Not. But there might be double quotes in the `<meta charset='utf-8'>` attribute value uses single quotes. Good.

But in the script we have `/* ... */` includes `/*` and `*/` but not quotes. So fine.

Thus we can safely embed the content string without escaping double quotes.

Thus final step: Use write tool with path "index.html" and content string exactly as above (including \n escapes). That will create the file.

Now I will produce a tool call.

Given the large content, I will produce the JSON with path and content.

Thus call:

write({
  "path": "index.html",
  "content": "<!DOCTYPE html>\n<html>\n<head>\n<meta charset='utf-8'>\n<title>Mandelbrot</title>\n<style>\nhtml,body{margin:0;height:100%;overflow:hidden;background:#000;}\ncanvas{display:block;width:100%;height:100%;}\n</style>\n</head>\n<body>\n<canvas id='mandelbrot'></canvas>\n<script>\nconst canvas = document.getElementById('mandelbrot');\nconst ctx = canvas.getContext('2d');\nfunction resizeCanvas(){\n  canvas.width = window.innerWidth;\n  canvas.height = window.innerHeight;\n}\nwindow.addEventListener('resize', resizeCanvas);\nresizeCanvas();\nlet offsetRe = -0.5; // top-left real\nlet offsetIm = -0.5; // top-left imag\nlet viewWidth = 3.5; // width of complex view in real direction\nlet viewHeight = viewWidth * canvas.height / canvas.width;\nfunction hslToRgb(h, s, l) {\n  h = h % 360;\n  const c = (1 - Math.abs(2*l - 1)) * s;\n  const x = c * (1 - Math.abs(((h/60) % 2) - 1));\n  const m = l - c/2;\n  let r, g, b;\n  if (0 <= h && h < 60) { r = c; g = x; b = 0; }\n  else if (60 <= h && h < 120) { r = x; g = c; b = 0; }\n  else if (120 <= h && h < 180) { r = 0; g = c; b = x; }\n  else if (180 <= h && h < 240) { r = 0; g = x; b = c; }\n  else if (240 <= h && h < 300) { r = x; g = 0; b = c; }\n  else { r = c; g = 0; b = x; }\n  return [r+m, g+m, b+m];\n}\nconst maxIter = 1000;\nfunction draw() {\n  const imgData = ctx.createImageData(canvas.width, canvas.height);\n  const data = imgData.data;\n  for (let py = 0; py < canvas.height; py++) {\n    const im = offsetIm + (py / canvas.height) * viewHeight;\n    for (let px = 0; px < canvas.width; px++) {\n      const re = offsetRe + (px / canvas.width) * viewWidth;\n      let a = 0, b = 0;\n      let n = 0;\n      while (a*a + b*b <= 4 && n < maxIter) {\n        const temp = a*a - b*b + re;\n        b = 2*a*b + im;\n        a = temp;\n        n++;\n      }\n      let hue;\n      if (a*a + b*b > 4) {\n        const mod = Math.sqrt(a*a + b*b);\n        const nu = n - Math.log(Math.log(mod)) / Math.log(2);\n        hue = (nu / maxIter) * 360;\n      } else {\n        hue = 0; // interior color (black)\n      }\n      const [hr, hg, hb] = hslToRgb(hue, 1, 0.5);\n      const r = Math.round(hr * 255);\n      const g = Math.round(hg * 255);\n      const b = Math.round(hb * 255);\n      const i = (py * canvas.width + px) * 4;\n      data[i] = r;\n      data[i+1] = g;\n      data[i+2] = b;\n      data[i+3] = 255;\n    }\n  }\n  ctx.putImageData(imgData, 0, 0);\n  requestAnimationFrame(draw);\n}\ndraw();\n\ncanvas.addEventListener('wheel', (e) => {\n  e.preventDefault();\n  const factor = Math.pow(0.999, -e.deltaY);\n  const oldViewWidth = viewWidth;\n  const oldViewHeight = oldViewWidth * canvas.height / canvas.width;\n  const mouseRe = offsetRe + (e.offsetX / canvas.width) * oldViewWidth;\n  const mouseIm = offsetIm + (e.offsetY / canvas.height) * oldViewHeight;\n  viewWidth = oldViewWidth * factor;\n  viewHeight = viewWidth * canvas.height / canvas.width;\n  offsetRe = mouseRe - (e.offsetX / canvas.width) * viewWidth;\n  offsetIm = mouseIm - (e.offsetY / canvas.height) * viewHeight;\n}, {passive:false});\n\nlet isDragging = false;\nlet startX = 0, startY = 0;\ncanvas.addEventListener('mousedown', (e) => {\n  isDragging = true;\n  startX = e.offsetX;\n  startY = e.offsetY;\n});\nwindow.addEventListener('mousemove', (e) => {\n  if (!isDragging) return;\n  const dx = e.offsetX - startX;\n  const dy = e.offsetY - startY;\n  offsetRe += dx * (viewWidth / canvas.width);\n  offsetIm += dy * (viewHeight / canvas.height);\n  startX = e.offsetX;\n  startY = e.offsetY;\n});\nwindow.addEventListener('mouseup', () => { isDragging = false; });\nwindow.addEventListener('mouseleave', () => { isDragging = false; });\n</script>\n</body>\n</html>"

})

Now note we need to escape any double quotes in the content string. But as we determined there are none. However we need to check for stray double quotes in the content string like `</script>` contains `</script>` which includes a less-than sign and slash and the word script; no double quotes. However there may be double quotes inside the string for attribute values of `<canvas id='mandelbrot'></canvas>` uses single quotes. Good.

But there may be double quotes in `data[i+3] = 255;` etc no.

Thus no double quotes appear.

However I just noticed that in the content string I included `/* End of script */`? Actually I omitted that comment at the end of script; I didn't include the comment. That line had no quotes.

But there might be double quotes in `/* interior color (black)\n` comment includes parentheses but not quotes. That's fine.

Thus fine.

Now there is a stray double quote character inside `/* interior color (black)\n` maybe not.

Now check for any stray double quotes in the script lines: There's `/* ... */` section but no quotes. Also there is `/* ... */` used for comment closure, but no quotes.

Now there is `'Mandelbrot'` inside `<title>Mandelbrot</title>` does not have quotes.

Thus safe.

One more check: Inside CSS we have `background:#000;` includes `#000` but not quotes. So no double quotes.

Thus content string contains no double quotes. So it's safe to embed as is.

Thus final tool call is valid.

Now we call write with this JSON.

Thus we produce a function call to write.

Now shall we provide final answer? According to guidelines, we have to only use tools to do actions; we need to output a tool call. So we need to call write.

Thus we will produce a JSON pattern for the write tool.

Thus final response: Use tool call.

We have successfully written index.html with the full content. The task is complete: we have rendered the Mandelbrot set with smooth color gradient on a full-screen canvas, with click-and-drag to pan and mouse-wheel to zoom. The file index.html is present. We can respond to the user confirming that the file has been created, maybe with a brief message.

Given instructions: "End with index.html present." They likely want just the file creation; no extra output needed? Usually they want just the result; but we can respond with a short confirmation.

Thus final answer: "index.html has been created." Probably no additional steps needed.

Thus final message: :)