{
    "id": "bhaskar/project-workspace-dashboard",
    "kind": "plan",
    "title": "Project workspace dashboard",
    "summary": "A navy project workspace: KPI counters roll up and four project rows slide in with progress bars filling.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/project-workspace-dashboard/",
    "stack": [
        "CSS",
        "Dashboard",
        "HTML"
    ],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "A team workspace overview with a dark sidebar. Three stat tiles count up, four projects slide in with avatar stacks and status pills while their progress bars fill to 82, 54, 91 and 23 percent. 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 sidebar, stats and project list.",
            "prompt": "Build a single-file HTML project workspace dashboard, 1280x720, pale blue background #eef3fb, ink #14233f, accent blue #3b82f6 to indigo #6366f1. System fonts, no libraries.\nLeft: a 230px dark navy sidebar (#14233f) with the product name \"Northstar\" and six menu items (Projects highlighted, My tasks, Inbox, Team, Reports, Settings).\nMain: H1 \"Project workspace\" with a blue pill \"Q4 planning\". Three white stat cards (Avg progress 68%, Open tasks 14, Due this week 5) whose numbers count up with a CSS @property integer animation.\nBelow, one white card listing four projects in a grid row each: name and due date, a 10px rounded progress bar, an overlapping avatar stack and a status pill (green On track, amber At risk, blue Planning): Website redesign 82%, Mobile app v2 54%, Billing migration 91%, Partner portal 23%.\nMotion (8 second loop): stat cards rise in, project rows slide in from the right with staggered delays, progress bars grow to their values, then everything fades out and restarts.\nRespect prefers-reduced-motion. Return only the complete HTML.",
            "done": "",
            "files": []
        },
        {
            "title": "Check the counters",
            "body": "All three numbers should roll up from zero.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Check the bars",
            "body": "Progress bars should grow after the rows slide in.",
            "prompt": "",
            "done": "You can see it working in the browser.",
            "files": []
        },
        {
            "title": "Make it real",
            "body": "Load projects and progress from your own data.",
            "prompt": "",
            "done": "",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "prompt.md",
            "note": "The full prompt.",
            "file": "prompt",
            "url": "https://ownlyplans.com/bhaskar/project-workspace-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/project-workspace-dashboard/index-html/"
        }
    ],
    "install": "",
    "how_to_use": "Call get_step with step 1, do it, check \"done when\", then continue."
}