{
    "id": "bhaskar/sales-pipeline-dashboard",
    "kind": "plan",
    "title": "Sales pipeline dashboard",
    "summary": "A dark sales pipeline board: KPI counters roll up, and a deal card is dragged from Qualified to Won with a celebratory toast.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/sales-pipeline-dashboard/",
    "stack": [
        "CSS",
        "Dashboard",
        "HTML"
    ],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "intermediate",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "A CRM-style pipeline you can paste into Claude, Cursor or Lovable. Three KPI tiles count up, four stage columns hold deal cards and one highlighted deal glides stage to stage until the Won column total updates. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch.",
    "steps": [
        {
            "title": "Paste the prompt",
            "body": "Paste into your AI tool. It builds the whole dashboard in one go.",
            "prompt": "Build a single-file HTML sales pipeline dashboard, 1280x720 desktop layout, dark navy theme (background #0a1020, panels #0e1730, cards #16213d, accent blue #2563eb, success green #10b981). System fonts only, no libraries.\nHeader: gradient square logo, title \"Sales pipeline\", a pill \"Q4 - EMEA\", three overlapping avatar circles on the right.\nKPI row: three tiles (Open value, Win rate, Avg cycle). Numbers count up from 0 using a CSS @property integer animation (no JavaScript): $1840k, 34%, 21 days.\nBoard: four columns Lead, Qualified, Proposal, Won, each with a header (name and count), 2-3 deal cards (company, source line, value on the right) and a thin gradient progress bar pinned to the bottom of the column.\nMotion (one 8 second loop, everything fades out at the end and restarts): one highlighted deal card \"Acme renewal $48k\" in Qualified lifts (scale 1.04, slight rotation, blue glow), slides into Proposal, pauses, then slides into Won. When it lands, a green toast \"+$48,000 won\" pops in and the Won total cross-fades from $212k to $260k. The progress bars grow in at the start.\nRespect prefers-reduced-motion. Return only the complete HTML.",
            "done": "",
            "files": []
        },
        {
            "title": "Check the KPI counters",
            "body": "The three tiles should roll up from zero without any script.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Check the deal moving",
            "body": "The Acme card should glide Qualified, Proposal, Won and the Won total should change.",
            "prompt": "",
            "done": "You can see it working in the browser.",
            "files": []
        },
        {
            "title": "Reuse it",
            "body": "Swap the company names, currency and stage names for your own pipeline.",
            "prompt": "",
            "done": "",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "prompt.md",
            "note": "The full prompt.",
            "file": "prompt",
            "url": "https://ownlyplans.com/bhaskar/sales-pipeline-dashboard/prompt/"
        },
        {
            "type": "markdown",
            "name": "index.html.md",
            "note": "Complete code of the result in the video.",
            "file": "index-html",
            "url": "https://ownlyplans.com/bhaskar/sales-pipeline-dashboard/index-html/"
        }
    ],
    "install": "",
    "how_to_use": "Call get_step with step 1, do it, check \"done when\", then continue."
}