# CRM contact profile

> A teal CRM contact screen: a profile slides in, a health-score ring fills to 82 and the activity timeline stacks up.

- Kind: Plan
- Page: https://ownlyplans.com/bhaskar/crm-contact-profile/
- Licence: CC BY 4.0 (reuse with credit)

## Steps

### 1. Paste the prompt

The AI builds the contact list and the profile card.

Prompt:

```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.
```

### 2. Check the health ring

It should fill to 82 as the number counts up.

### 3. Check the timeline

Three events should appear one at a time.

Done when: You can see it working in the browser.

### 4. Make it real

Load contacts and events from your CRM instead of the sample text.

## Files

- prompt.md: https://ownlyplans.com/bhaskar/crm-contact-profile/prompt/ (The full prompt.)
- index.html.md: https://ownlyplans.com/bhaskar/crm-contact-profile/index-html/ (Complete code of the result in the video.)

## About

A calm customer profile page with a contact list on the left. Priya Sharma opens with a ring that fills to a health score of 82, three timeline events rise in one by one and a "Next step" button appears. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch.

---
Also available as JSON: https://ownlyplans.com/bhaskar/crm-contact-profile/?format=json
MCP server: https://ownlyplans.com/mcp