Project workspace dashboard
Copy this prompt into Claude, Cursor or Lovable.
Build a single-file HTML project workspace dashboard, 1280x720, pale blue background #eef3fb, ink #14233f, accent blue #3b82f6 to indigo #6366f1. System fonts, no libraries.
Left: a 230px dark navy sidebar (#14233f) with the product name "Northstar" and six menu items (Projects highlighted, My tasks, Inbox, Team, Reports, Settings).
Main: H1 "Project workspace" with a blue pill "Q4 planning". Three white stat cards (Avg progress 68%, Open tasks 14, Due this week 5) whose numbers count up with a CSS @property integer animation.
Below, one white card listing four projects in a grid row each: name and due date, a 10px rounded progress bar, an overlapping avatar stack and a status pill (green On track, amber At risk, blue Planning): Website redesign 82%, Mobile app v2 54%, Billing migration 91%, Partner portal 23%.
Motion (8 second loop): stat cards rise in, project rows slide in from the right with staggered delays, progress bars grow to their values, then everything fades out and restarts.
Respect prefers-reduced-motion. Return only the complete HTML.Source, 12 lines
# Project workspace dashboard Copy this prompt into Claude, Cursor or Lovable. ```text Build a single-file HTML project workspace dashboard, 1280x720, pale blue background #eef3fb, ink #14233f, accent blue #3b82f6 to indigo #6366f1. System fonts, no libraries. Left: a 230px dark navy sidebar (#14233f) with the product name "Northstar" and six menu items (Projects highlighted, My tasks, Inbox, Team, Reports, Settings). Main: H1 "Project workspace" with a blue pill "Q4 planning". Three white stat cards (Avg progress 68%, Open tasks 14, Due this week 5) whose numbers count up with a CSS @property integer animation. Below, one white card listing four projects in a grid row each: name and due date, a 10px rounded progress bar, an overlapping avatar stack and a status pill (green On track, amber At risk, blue Planning): Website redesign 82%, Mobile app v2 54%, Billing migration 91%, Partner portal 23%. Motion (8 second loop): stat cards rise in, project rows slide in from the right with staggered delays, progress bars grow to their values, then everything fades out and restarts. Respect prefers-reduced-motion. Return only the complete HTML. ```