{
    "id": "bhaskar/learning-progress-dashboard",
    "kind": "plan",
    "title": "Learning progress dashboard",
    "summary": "A dark indigo course dashboard: three progress rings fill to 72, 45 and 90 percent while a weekly study chart grows.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/learning-progress-dashboard/",
    "stack": [
        "CSS",
        "Dashboard",
        "HTML"
    ],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "A learner overview with a day-streak badge. Three coloured rings fill and count up, then seven study-time bars grow for the week. 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 rings and the bar chart.",
            "prompt": "Create a single-file HTML learning progress dashboard, 1280x720, deep indigo background #120f2a, cards #1b1640 with 1px #2b2461 border and 22px radius, accent violet #a78bfa, green #34d399, amber #fbbf24, text #ece9ff. System fonts, no libraries.\nHeader: H1 \"Learning progress\", muted \"Your three active courses this week\" and a right aligned card \"Day streak 12\".\nRow of three course cards, each with a 150px ring made with conic-gradient (hole 118px) whose percentage is a CSS @property integer counter shown in the centre: UX Foundations 72% (violet, 18 of 25 lessons), Intro to SQL 45% (green, 9 of 20), Brand Writing 90% (amber, 27 of 30).\nBelow: a wide card \"Minutes studied this week\" with seven gradient bars (Mon to Sun) of different heights.\nMotion (8 second loop): cards rise in with a stagger, rings fill from 0 and the numbers count up, then the bars grow from 6px to their heights. Everything fades and restarts.\nRespect prefers-reduced-motion. Return only the complete HTML.",
            "done": "",
            "files": []
        },
        {
            "title": "Check the rings",
            "body": "Rings and numbers should fill together.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Check the bars",
            "body": "Bars should grow after the rings.",
            "prompt": "",
            "done": "You can see it working in the browser.",
            "files": []
        },
        {
            "title": "Make it real",
            "body": "Load progress from your course platform.",
            "prompt": "",
            "done": "",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "prompt.md",
            "note": "The full prompt.",
            "file": "prompt",
            "url": "https://ownlyplans.com/bhaskar/learning-progress-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/learning-progress-dashboard/index-html/"
        }
    ],
    "install": "",
    "how_to_use": "Call get_step with step 1, do it, check \"done when\", then continue."
}