# Data import mapping

Copy this prompt into Claude, Cursor or Lovable.

```text
Create a single-file HTML data import mapping screen, 1280x720, pale slate background #f1f5f9, ink #0f172a, accent blue #2563eb, success green #16a34a. System fonts, no libraries.
Header: title "Import contacts" and subtitle "Match the columns from your CSV to our fields".
Left white card "Your file - contacts.csv" with five field boxes (60px tall, 1.5px border, 14px radius): Full Name, E-mail Address, Company / Org, Phone #, Notes, each with a muted sample line. Right white card "Our fields" with Name (required), Company (optional), Email (required - used to dedupe), Phone (optional - skipped).
Between the cards place an inline SVG with three connector paths (Full Name to Name, E-mail Address to Email, Company / Org to Company), drawn with stroke-dasharray and animated with stroke-dashoffset one after another (blue, 3px, round caps, the paths can cross).
Motion (8 second loop): boxes rise in; each connector draws and, when it reaches its target, the target box turns green (border and tint). Then a green confirmation chip "3 columns matched - 248 contacts ready" slides up bottom left, and the blue "Import 248 contacts" button bottom right presses (scale .92). Reset at the end.
Respect prefers-reduced-motion. Return only the complete HTML.
```