**Creating fireworks display**

I'm working on building a single index.html file in the current directory using the "write" tool. The user asked for a fireworks display on a full-screen canvas, where clicks launch shells that explode into gravity-affected, fading particle bursts. I'll include all the CSS and JS inline without external assets. The display needs to handle high DPI, have features for multiple shells, and reset on spacebar or click. This should run smoothly in a browser!**Implementing fireworks structure**

I'm planning to implement the fireworks display with an HTML canvas element set to full screen, possibly overlaying some information, though that's not strictly necessary. The CSS will ensure there's no margin on the body with a black background, and the canvas will completely fill the screen. 

In JavaScript, I'll define two classes: Shell and Particle. The Shell class will track properties like position, velocity, and color. Shells will ascend, explode near their apex, or after a certain time, which I think I’ll set to 1.6 to 2 seconds.**Implementing shell explosions**

The shell should explode near its apex, so I'm thinking of setting it to explode when its vertical velocity (vy) is zero and its position is below 30% of the height. That might get tricky, though. A simpler approach is to use a timer for each shell, randomly set between 1.2 and 2.0 seconds for the explosion. When it explodes, I’ll create several particles with varying speeds and uniform directions around a circle, applying gravity to them.

During the animation loop, I'll clear the canvas to create trails by using a semi-transparent rectangle. Each particle will have properties like position, velocity, life, and color. I’ll also update the canvas size on window resize. When the user clicks on the canvas, a new shell will launch from the bottom center!**Launching shells on click**

I'm thinking we should create shells that launch from the position where the user clicks. Since the user requested that clicks launch shells, I’ll set the shell’s x position to the click's x coordinate and the y position to just above the bottom of the screen. 

I want the shell to move upwards with some power, using a small random initial velocity. To make it feel intuitive, the shell will arc toward a target height between 40-60% of the canvas height. I'll handle the potential oddness if the user clicks near the top—launching from the bottom keeps it consistent!**Implementing shell creation**

On click, I’ll set up the shell's properties as follows: its x position will equal the click’s x coordinate, and its y will be slightly above the bottom of the canvas. The initial upward velocities will be random, using values from -40 to 40 for vx and -240 to -320 for vy, with gravity set at 1800 px/s². 

The shell will explode after a time between 1.4 and 2.0 seconds. When it pops, I’ll create 60-120 particles with varying speeds and colors from a palette. Each particle will have a life span, fade out, and experience gravity too. I’ll organize everything in “shells” and “particles” arrays while keeping the code self-contained in the index.html file. I'll also add a glow effect and a key press function to clear the display!**Crafting the final index.html**

I'm ready to put together the complete index.html for the fireworks display. First, I'll ensure it starts with the necessary HTML structure, including the canvas styling. I’ll use an Immediately Invoked Function Expression (IIFE) to keep everything neat and avoid global scope pollution.

Inside, I'll define the arrays for shells and particles, and I'll set up the mousedown event to launch shells. In the animation loop, I'll calculate the delta time (dt), updating and rendering the state while also integrating the autoDemo function. 

The explosion function in the Shell class will remain intact, creating particles whenever necessary. I’ll ensure the code is clean and functional!**Finalizing the index.html code**

I'm wrapping up the creation of index.html! The update function will remove shells after they've exploded, keeping the code clean. Each particle's color will be defined by a random hue, while I've added a trailing effect with a translucent black rectangle to create a visual trail. 

I’ll implement automatic shell launching and ensure proper styling for the canvas. Ultimately, I need to make sure I write this code as a complete self-contained HTML file. Once it's done, I’ll confirm that index.html has been created and remind users to open it in a browser to run it!**Preparing the HTML for Fireworks**

I'm setting up the HTML for a fireworks animation in a fullscreen canvas. The style includes a black background to enhance visibility. I'm defining the resizing function for the canvas dimensions based on the window, including device pixel ratio adjustments for better clarity.

While I'm ready to launch shells that create particle explosions, there's a minor consideration about gravity application during particle death, and how the canvas fills should respect the DPR scaling for precise visualization. I've ensured the auto-fire mechanism works smoothly, sending up shells randomly. Overall, it looks solid!**Preparing to write index.html**

I’m considering the use of 'shadowBlur' on many particles, which could be a bit resource-intensive. However, it's a necessary effect for the shells. I need to ensure that "index.html" is created after using the write function. 

I’ll prepare the content string carefully now. Since reading the entire file content isn’t required, I’ll call the write tool with the correct path and content. I’ll remember to escape characters where needed. Alright, let’s proceed with writing!

**Confirming fireworks app creation**

I've created a full `index.html` for the user. They wanted a fireworks display on a full-screen canvas where clicks launch shells that explode into gravity-affected, fading particles. I've included everything in a single-file HTML setup. 

I’ll respond confirming the creation and mention it’s located at `/tmp/ws/index.html`. I'll also provide guidance on how to run it in a browser and offer tips on customization. No external resources are needed, ensuring it's self-contained!**Finalizing app details**

I can suggest improvements, such as adapting colors or gravity settings, and I might want to mention how to disable auto-fire if the user prefers. The user needs a concise confirmation that `index.html` is present. 

I'll confirm success and describe the app features, like how to run it by opening the file in a browser without needing a server. Customization options will also be clear: adjusting constants in the Shell and Particle classes for particles or gravity. 

So, I'll say: "All set! `index.html` created at `/tmp/ws/index.html` containing a self-contained fullscreen canvas fireworks demo. Click to launch shells that explode into gravity-affected, fading particles."**Providing app instructions**

The app auto-launches shells periodically for a continuous fireworks display. To get started, the user can simply open `index.html` in a modern browser and click anywhere to launch a shell. I might mention pressing F11 for fullscreen if they want that option.

Key code points include: shells with gravity at 980 px/s², explosions spawning 60-110 particles, and particles fading away after their lifespan. I can also mention optional customizations, like changing gravity, particle count, lifespan, and colors. 

Lastly, I’ll ask, "Would you like me to adjust for touch support, introduce trails, or add sound?" Keeping it brief is important!