The user wants a single-page web app (`index.html`) that implements a fireworks display on a full-screen canvas.
Key features:
1. Full-screen canvas.
2. Clicks launch shells.
3. Shells explode into particles.
4. Particles are affected by gravity.
5. Particles fade over time.
6. Self-contained (CSS/JS inline, no external resources/CDNs).

Plan:
- HTML structure: `<canvas>` element.
- CSS: Reset margins, hide overflow, black background.
- JS:
    - Particle class: Position, velocity, color, opacity, size.
    - Firework class: Position, target height, velocity, color, exploded state.
    - Animation loop: Clear canvas (with trailing effect), update and draw fireworks and particles.
    - Click event listener: Trigger firework launch from bottom to click coordinates.

Let's refine the physics:
- Fireworks move upward.
- When they reach the peak or a target, they spawn many particles.
- Particles move in random directions with initial velocity.
- Gravity constant added to y-velocity every frame.
- Opacity decreases every frame.
- Use `globalCompositeOperation = 'lighter'` or similar for glow effect? Or just simple alpha. Actually, a semi-transparent black rectangle fill on the canvas each frame creates a nice trail effect.

Implementation details:
- `window.innerWidth`, `window.innerHeight` for canvas size.
- `requestAnimationFrame` for smooth animation.
- Color: Random HSL colors for variety.

Let's write the code.

I've created the `index.html` file. I used a canvas with a trail effect (semi-transparent black fill) to make the fireworks look more realistic. Fireworks launch from the bottom center to the mouse click position and explode into particles with physics (gravity, friction, fade).

Wait, I noticed a small bug in the `Firework` distance check: `this.distanceTraveled = Math.hypot(this.x - (width/2), this.y - height);` is not quite right since the shell doesn't always start at `width/2` if I were to change the start point, and it doesn't correctly track progress toward the target. I used `if (this.y <= this.targetY)` which works for upward launches, but maybe not if the user clicks very low? 

Actually, the current logic:
1. Start at `(width/2, height)`.
2. Target `(e.clientX, e.clientY)`.
3. `this.angle = Math.atan2(targetY - startY, targetX - startX)`.
4. `if (this.y <= this.targetY) { this.explode(); }`.

If the user clicks at the bottom, it explodes immediately. If they click above, it moves toward it. This is generally fine.

One improvement: the firework should probably explode when it gets close to the target point, not just when it passes the Y coordinate, especially for clicks that are not perfectly vertical.

Let's refine the `Firework.update` method to check distance to target.

Also, I should make sure the firework starts from the bottom, but maybe centered horizontally or from a random spot? The request says "clicks launch shells", and usually that means from bottom to click point.

Let's adjust the `update` method to check distance to target.