CRM contact profile
Copy this prompt into Claude, Cursor or Lovable.
Build a single-file HTML CRM contact profile screen, 1280x720, soft teal background #eef6f5, ink #10302d, accent teal #14b8a6, indigo #6366f1. White cards with 22px radius and a soft teal shadow. System fonts, no libraries.
Left card "Contacts": five rows (coloured circle avatar, name, company line). The second row, "Priya Sharma - Acme Corp - Champion", is the selected one and gets a pale teal background.
Right card (profile): large gradient avatar, name "Priya Sharma", subtitle "VP Operations - Acme Corp", two pills (green "Customer", indigo "Renewal Q1"). On the right a 104px health score ring (SVG circle, stroke-dasharray 289) with a number in the centre that counts up to 82 using a CSS @property integer animation. Below, a vertical timeline with a teal line and dot markers: "Opened pricing proposal", "Call: renewal terms", "Signed 12-month contract", each with a small grey detail line.
Bottom right: a dark rounded button "Next step: send renewal quote".
Motion (8 second loop): the profile card slides in from the right, the ring fills and the number counts, timeline events fade up one after another, the Next step button scales in last. Everything fades out at the end and restarts.
Respect prefers-reduced-motion. Return only the complete HTML.Source, 12 lines
# CRM contact profile Copy this prompt into Claude, Cursor or Lovable. ```text Build a single-file HTML CRM contact profile screen, 1280x720, soft teal background #eef6f5, ink #10302d, accent teal #14b8a6, indigo #6366f1. White cards with 22px radius and a soft teal shadow. System fonts, no libraries. Left card "Contacts": five rows (coloured circle avatar, name, company line). The second row, "Priya Sharma - Acme Corp - Champion", is the selected one and gets a pale teal background. Right card (profile): large gradient avatar, name "Priya Sharma", subtitle "VP Operations - Acme Corp", two pills (green "Customer", indigo "Renewal Q1"). On the right a 104px health score ring (SVG circle, stroke-dasharray 289) with a number in the centre that counts up to 82 using a CSS @property integer animation. Below, a vertical timeline with a teal line and dot markers: "Opened pricing proposal", "Call: renewal terms", "Signed 12-month contract", each with a small grey detail line. Bottom right: a dark rounded button "Next step: send renewal quote". Motion (8 second loop): the profile card slides in from the right, the ring fills and the number counts, timeline events fade up one after another, the Next step button scales in last. Everything fades out at the end and restarts. Respect prefers-reduced-motion. Return only the complete HTML. ```