{
    "id": "bhaskar/data-import-mapping",
    "kind": "plan",
    "title": "Data import mapping",
    "summary": "A light import wizard: columns from a CSV are matched to our fields with drawn connector lines, then Import is pressed.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/data-import-mapping/",
    "stack": [
        "CSS",
        "Dashboard",
        "HTML"
    ],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "intermediate",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "Two cards face each other, your file columns on the left and the product fields on the right. Blue lines draw between matching columns, matched fields turn green, a confirmation shows 248 contacts ready and the Import button is pressed. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch.",
    "steps": [
        {
            "title": "Paste the prompt",
            "body": "The AI builds both cards and the connector lines.",
            "prompt": "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.\nHeader: title \"Import contacts\" and subtitle \"Match the columns from your CSV to our fields\".\nLeft 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).\nBetween 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).\nMotion (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.\nRespect prefers-reduced-motion. Return only the complete HTML.",
            "done": "",
            "files": []
        },
        {
            "title": "Check the lines",
            "body": "Three lines should draw one after another.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Check the matches",
            "body": "Matched fields should turn green and the chip should appear.",
            "prompt": "",
            "done": "You can see it working in the browser.",
            "files": []
        },
        {
            "title": "Make it real",
            "body": "Let people drag a column onto a field and save the mapping.",
            "prompt": "",
            "done": "",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "prompt.md",
            "note": "The full prompt.",
            "file": "prompt",
            "url": "https://ownlyplans.com/bhaskar/data-import-mapping/prompt/"
        },
        {
            "type": "markdown",
            "name": "index.html.md",
            "note": "Complete code of the result in the video.",
            "file": "index-html",
            "url": "https://ownlyplans.com/bhaskar/data-import-mapping/index-html/"
        }
    ],
    "install": "",
    "how_to_use": "Call get_step with step 1, do it, check \"done when\", then continue."
}