{
    "id": "bhaskar/invoice-builder-with-live-preview",
    "kind": "plan",
    "title": "Invoice builder with live preview",
    "summary": "A split-screen invoice builder: details are typed on the left while the printed invoice builds line by line on the right and gets a PAID stamp.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/invoice-builder-with-live-preview/",
    "stack": [
        "CSS",
        "Dashboard",
        "HTML"
    ],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "intermediate",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "A form and a live invoice preview side by side. Client and project fields type themselves, three line items appear on the invoice, the total counts up to $4,280.00 and a green PAID stamp slams down. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch.",
    "steps": [
        {
            "title": "Paste the prompt",
            "body": "One prompt builds the form and the invoice preview.",
            "prompt": "Build a single-file HTML invoice builder, 1280x720, soft grey-blue background #eceef4, two white rounded panels (22px radius) with a large soft shadow. Accent indigo #4f46e5. System fonts, no libraries.\nLeft panel \"Invoice details\": a Client field and a Project field styled as inputs (44px tall, 1.5px border, 12px radius), then a \"Line items\" group with three rows (description, quantity, price): Brand strategy 1 $1,800 / Logo system 1 $1,480 / Guidelines PDF 1 $1,000, and an indigo \"Send invoice\" button.\nRight panel is the invoice document: large heading \"Invoice #0142\" with the number in indigo, \"Billed to Harbor & Finch\" and \"Due Dec 1, 2026\" on a meta row, a table of the three items that appear one at a time (fade and rise), and a big \"Total due\" figure (44px) that counts from $0 to $4,280.00 using a CSS @property integer animation.\nMotion (8 second loop): the Client field types \"Harbor & Finch\" with a steps() width animation and a blinking indigo caret, then the Project field types \"Brand identity refresh\". The invoice rows appear, the total counts up, the Send button does a press animation (scale .94), and finally a green rotated \"PAID\" stamp scales from 2.2 to 1 at the bottom right. Fade everything out at the end and restart.\nRespect prefers-reduced-motion. Return only the complete HTML.",
            "done": "",
            "files": []
        },
        {
            "title": "Check the typing",
            "body": "The two fields should type themselves with a caret.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Check the invoice",
            "body": "Rows should appear, the total should count to $4,280.00 and the PAID stamp should land.",
            "prompt": "",
            "done": "You can see it working in the browser.",
            "files": []
        },
        {
            "title": "Wire it up",
            "body": "Connect the inputs to the preview with a few lines of JavaScript when you make it real.",
            "prompt": "",
            "done": "",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "prompt.md",
            "note": "The full prompt.",
            "file": "prompt",
            "url": "https://ownlyplans.com/bhaskar/invoice-builder-with-live-preview/prompt/"
        },
        {
            "type": "markdown",
            "name": "index.html.md",
            "note": "Complete code of the result in the video.",
            "file": "index-html",
            "url": "https://ownlyplans.com/bhaskar/invoice-builder-with-live-preview/index-html/"
        }
    ],
    "install": "",
    "how_to_use": "Call get_step with step 1, do it, check \"done when\", then continue."
}