The user wants a single-page web app in one self-contained file named `index.html`. The app should render fireworks on a full-screen canvas. Clicking (or tapping) launches a shell that travels upward, then explodes into a particle burst where particles are affected by gravity and fade over time.

Let me design this:

1. Full-screen canvas that resizes.
2. Background: dark night sky (black) with maybe twinkling stars for ambiance.
3. Shells: launched from bottom (mouse click position at the bottom) upward to a target height, then explode.
4. Explosion particles with gravity, fading opacity, color.
5. Use requestAnimationFrame.

Let me write the code carefully in one file.

Key aspects:
- Canvas fills the viewport.
- `window.requestAnimationFrame` loop.
- Shell object: x, y, vx, vy, targetY, fuse (time until explosion), color.
- On launch: spawn shell from click position, compute velocity to reach targetY (a height based on click or random).
- On explosion: create many particles with velocity in a circle, color based on shell.
- Particles: gravity accelerates downward, drag slows horizontal, fade.
- Particles removed when alpha <= 0.

Let me add nice touches:
- Shell trail (draw line or fading dots).
- Stars twinkling in background.
- Multiple particle types (some sparkles).

Let me keep it efficient but pretty. I'll write the file.

Let me consider the physics for the shell launch velocity. We want the shell to reach a target height. Using projectile motion: targetY = startY + 0.5 * a * t^2, where a = -gravity (gravity constant for shell). So if we set gravity for shell, vy = -sqrt(2 * g * (startY - targetY)). Actually we want to go UP so vy negative. Let g_shell be positive gravity. We want to rise to target. vy0 = -sqrt(2 * g * (startY - targetY)) assuming startY > targetY (startY is at bottom, targetY at top, startY - targetY is positive distance). Then flight time t = (startY - targetY)/vy_avg... Let me just compute vy0 = -sqrt(2 * g * distanceUp) and timeToApex = sqrt(2*distanceUp/g). Then fuse = timeToApex.

Actually simpler: I'll just give the shell a velocity and simulate until it reaches near target or time passes, then explode. Let me set a target height = random between 0.3 to 0.7 of canvas height.

Let me write the code with a clean structure.

I'll use a gravity value for particles of, say, 0.08, and shell gravity maybe same.

Let me write the HTML file.