{
    "id": "bhaskar/bulk-edit-review-table",
    "kind": "plan",
    "title": "Bulk edit review table",
    "summary": "A light product table: three rows are ticked, a bar appears, 10% is applied and the new prices replace the old ones.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/bulk-edit-review-table/",
    "stack": [
        "CSS",
        "Dashboard",
        "HTML"
    ],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "intermediate",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "A bulk-edit screen. Three checkboxes tick one after another, a dark action bar slides up, Apply is pressed, old prices are struck through and green new prices appear with a success chip. 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 the table, the action bar and the chip.",
            "prompt": "Build a single-file HTML bulk edit review screen, 1280x720, pale background #f4f6fb, ink #1b2540, accent blue #4f7cff, success green #12875a. System fonts, no libraries.\nHeader: H1 \"Bulk edit\" and a muted line \"Select products, change a field once, review before you apply\".\nA white rounded table (20px radius, soft shadow) with columns Product (name + SKU), Stock, Price, Group and five rows: Linen shirt $48.00, Canvas tote $29.00, Wool beanie $22.00, Leather belt $64.00, Cotton socks $12.00. Each row starts with a 22px checkbox.\nBottom centre: a dark navy action bar (600px wide) saying \"3 selected\", \"Price: increase by 10%\" and a blue \"Apply changes\" button.\nMotion (8 second loop): rows rise in with a stagger. The first three checkboxes fill blue with a white tick one after another. The action bar slides up. The Apply button presses (scale .9). The three old prices get a strike-through and fade, and new prices $52.80, $31.90 and $24.20 fade in beside them in green. A green chip \"3 products updated\" appears top right, then everything fades and restarts.\nRespect prefers-reduced-motion. Return only the complete HTML.",
            "done": "",
            "files": []
        },
        {
            "title": "Check the ticks",
            "body": "Three checkboxes should tick one after another.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Check the prices",
            "body": "Old prices should be struck through and new ones appear.",
            "prompt": "",
            "done": "You can see it working in the browser.",
            "files": []
        },
        {
            "title": "Make it real",
            "body": "Apply the change to your products and add an undo.",
            "prompt": "",
            "done": "",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "prompt.md",
            "note": "The full prompt.",
            "file": "prompt",
            "url": "https://ownlyplans.com/bhaskar/bulk-edit-review-table/prompt/"
        },
        {
            "type": "markdown",
            "name": "index.html.md",
            "note": "Complete code of the result in the video.",
            "file": "index-html",
            "url": "https://ownlyplans.com/bhaskar/bulk-edit-review-table/index-html/"
        }
    ],
    "install": "",
    "how_to_use": "Call get_step with step 1, do it, check \"done when\", then continue."
}