{
    "id": "bhaskar/kanban-project-board",
    "kind": "plan",
    "title": "Kanban project board",
    "summary": "A warm light kanban board where two cards are dragged between columns by a cursor while the sprint progress rises.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/kanban-project-board/",
    "stack": [
        "CSS",
        "Dashboard",
        "HTML"
    ],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "A friendly project board with three columns. A visible cursor picks up a task, drops it into In progress, then moves another into Done with a green tick, and the sprint percentage climbs from 40 to 73. 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 board with absolute positioned cards.",
            "prompt": "Create a single-file HTML kanban board, desktop 1280x720, warm paper theme (background #f7f3ec, columns #efe8da, white cards, accent vermilion #e0561b). System fonts, no libraries.\nTop: title \"Launch week board\", muted subtitle \"12 tasks - 4 teammates\" and on the right a sprint progress label with a number that counts from 40% to 73% (CSS @property counter) above a rounded progress bar that fills to match.\nThree columns: To do (3 cards), In progress (2), Done (2). Each card: white, 14px radius, soft shadow, bold task title, one or two small pill labels (Design, Backend, QA, Growth in tinted colours) and a coloured avatar dot bottom right.\nUse absolute positioning with explicit coordinates so cards can move cleanly.\nMotion (8 second loop): add a mouse cursor SVG. The cursor moves to the top To do card, the card lifts (scale 1.04, rotate -2.5deg, big shadow), travels into In progress and settles in the first slot. Then the cursor picks up the Set up analytics events card, carries it into Done where a green check badge pops in. Everything fades out at the end and restarts.\nRespect prefers-reduced-motion. Return only the complete HTML.",
            "done": "",
            "files": []
        },
        {
            "title": "Watch the first drag",
            "body": "The webhook card should lift and land in In progress.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Watch the second drag",
            "body": "The analytics card should land in Done with a green tick.",
            "prompt": "",
            "done": "You can see it working in the browser.",
            "files": []
        },
        {
            "title": "Make it real",
            "body": "Replace the animation with real drag and drop if you need to use it live.",
            "prompt": "",
            "done": "",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "prompt.md",
            "note": "The full prompt.",
            "file": "prompt",
            "url": "https://ownlyplans.com/bhaskar/kanban-project-board/prompt/"
        },
        {
            "type": "markdown",
            "name": "index.html.md",
            "note": "Complete code of the result in the video.",
            "file": "index-html",
            "url": "https://ownlyplans.com/bhaskar/kanban-project-board/index-html/"
        }
    ],
    "install": "",
    "how_to_use": "Call get_step with step 1, do it, check \"done when\", then continue."
}