Create Air Writing Website With Help Of Google Gemini

Описание: Prompt for AI Code Generator:

Create a Single-File HTML application named "Golden Air Writing" that functions as an Air Canvas using the MediaPipe Hands library.

Core Functionality:

Hand Tracking: Use MediaPipe Hands to track the user's Index Finger tip and Thumb tip.

Pinch-to-Draw: Calculate the distance between the Index and Thumb. If the distance is below a threshold (e.g., 60px), enable drawing mode. If they are apart, show a "Hover" cursor circle without drawing.

Mouse and Trackpad Support: Crucial. Add event listeners for mousedown, mousemove, and mouseup. The user must be able to draw by clicking and dragging on the screen, just like they do with the hand pinch.

Visual Style (The Golden Theme):

Background: Dark color code #111.

UI Text: Gold color code #D4AF37 using Segoe UI font.

Webcam Feed: Positioned at the bottom-left corner, small size (200x150px), mirrored (flipped horizontally), with a glowing gold border.

The Drawing Effect (Advanced):

Stroke Style: The drawing line must NOT be a solid color. It must use a Linear Gradient (Colors: GoldenRod to Gold to Cornsilk) to look like liquid gold.

Glow: Add a shadowBlur to make the line glow.

Particle System: Implement a custom particle system. Whenever a line is drawn (via Hand OR Mouse), spawn small "spark" particles.

Particle Behavior: They should have random gold HSL colors, move slightly and fall down with a gravity effect, and fade out shrinking over time.

Technical Requirements:

Use a full-screen Canvas for drawing.

Create a separate layer or logic for particles so they animate smoothly.

Include a "Clear Canvas" button in the top-right corner.

Show a loading status badge.

Unified Logic: Ensure the drawStroke function is shared between the Hand tracking logic and the Mouse events so the visual style is identical for both.