Fireworks · north-mini-code

The user wants me to create a single-page web app that displays a fireworks show. The requirements are:
1. Full-screen canvas
2. Click to launch shells
3. Shells explode into gravity-affected, fading particle bursts

I need to create a single self-contained HTML file named `index.html` that includes:
- CSS for styling in a `<style>` tag
- JavaScript for the fireworks logic in a `<script>` tag
- No external resources, CDNs, or network requests

Let me break down what I need to implement:
1. Set up a full-screen canvas
2. Add click event handling
3. Create shell launch logic
4. Create particle explosion with gravity and fading effects

I'll create the complete HTML file directly.

I've created a self-contained HTML file that implements a fireworks display. The code includes:

1. A full-screen canvas element
2. CSS styling for full-screen display and black background
3. JavaScript that:
   - Sets up a canvas and resizes it to fill the window
   - Handles mouse clicks and touch events to launch shells at the clicked/touched position
   - Creates shells that fly upward with gravity and friction, then explode
   - Creates particles for the explosion that have gravity, fade out over time, and trail
   - Manages the entire fireworks display with an animation loop
   - Includes a timeout to launch an initial shell if the user doesn't click first

The implementation uses modern JavaScript features, clean code organization with classes and event handling, and is completely self-contained without any external resources. The colors are vibrant and the particles have a glowing, fading effect as they fall back to the ground.