Analytics overview dashboard
Copy this prompt into Claude, Cursor or Lovable.
Create a single-file HTML analytics overview dashboard, 1280x720, lavender background #f3f1ff, ink #1c1840, accent violet #8b5cf6. White cards with 18-20px radius and a soft violet shadow. System fonts only, no libraries.
Layout: an 84px dark sidebar (#1c1840) with five rounded icon squares (the first uses a violet-to-pink gradient, the second is highlighted). Main area: H1 "Analytics overview", subtitle "Last 30 days - all channels".
KPI row of four cards: Visitors 48210 (+12.4%), Signups 9380 (+8.1%), Paying teams 312 (+21%), Churn 68 bps (-0.3% in red). Each number counts up with a CSS @property integer animation.
Below, a two column grid: left card "Revenue growth" with an inline SVG area chart (smooth cubic path, violet 4px stroke, gradient fill fading to transparent, white ring marker at the last point); right card "Signups by channel" with six vertical bars (rounded top, violet gradient, different heights).
Bottom: a dark rounded ticker bar that cycles three messages (a new signup, a milestone, a churn alert), each sliding up in and out.
Motion (8 second loop): cards rise in staggered, the line draws with stroke-dashoffset then the area fades in and the ring pops, bars scale up from the bottom with staggered delays. Fade everything out at the end and restart.
Respect prefers-reduced-motion. Return only the complete HTML.Source, 13 lines
# Analytics overview dashboard Copy this prompt into Claude, Cursor or Lovable. ```text Create a single-file HTML analytics overview dashboard, 1280x720, lavender background #f3f1ff, ink #1c1840, accent violet #8b5cf6. White cards with 18-20px radius and a soft violet shadow. System fonts only, no libraries. Layout: an 84px dark sidebar (#1c1840) with five rounded icon squares (the first uses a violet-to-pink gradient, the second is highlighted). Main area: H1 "Analytics overview", subtitle "Last 30 days - all channels". KPI row of four cards: Visitors 48210 (+12.4%), Signups 9380 (+8.1%), Paying teams 312 (+21%), Churn 68 bps (-0.3% in red). Each number counts up with a CSS @property integer animation. Below, a two column grid: left card "Revenue growth" with an inline SVG area chart (smooth cubic path, violet 4px stroke, gradient fill fading to transparent, white ring marker at the last point); right card "Signups by channel" with six vertical bars (rounded top, violet gradient, different heights). Bottom: a dark rounded ticker bar that cycles three messages (a new signup, a milestone, a churn alert), each sliding up in and out. Motion (8 second loop): cards rise in staggered, the line draws with stroke-dashoffset then the area fades in and the ring pops, bars scale up from the bottom with staggered delays. Fade everything out at the end and restart. Respect prefers-reduced-motion. Return only the complete HTML. ```