{
    "id": "bhaskar/analytics-overview-dashboard",
    "kind": "plan",
    "title": "Analytics overview dashboard",
    "summary": "A violet analytics dashboard: KPI numbers roll up, a revenue line draws itself, bars grow and a live activity ticker rotates.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/analytics-overview-dashboard/",
    "stack": [
        "CSS",
        "Dashboard",
        "HTML"
    ],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "intermediate",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "A polished SaaS overview screen with a dark sidebar. Four KPI tiles count up, the revenue area chart draws its line and ends on a ring marker, six bars grow and a dark ticker at the bottom cycles through activity messages. 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 layout, chart and ticker.",
            "prompt": "Create a single-file HTML analytics overview dashboard, 1280x720, lavender background #f3f1ff, ink #1c1840, accent violet #8b5cf6. White cards with 18-20px radius and a soft violet shadow. System fonts only, no libraries.\nLayout: an 84px dark sidebar (#1c1840) with five rounded icon squares (the first uses a violet-to-pink gradient, the second is highlighted). Main area: H1 \"Analytics overview\", subtitle \"Last 30 days - all channels\".\nKPI row of four cards: Visitors 48210 (+12.4%), Signups 9380 (+8.1%), Paying teams 312 (+21%), Churn 68 bps (-0.3% in red). Each number counts up with a CSS @property integer animation.\nBelow, a two column grid: left card \"Revenue growth\" with an inline SVG area chart (smooth cubic path, violet 4px stroke, gradient fill fading to transparent, white ring marker at the last point); right card \"Signups by channel\" with six vertical bars (rounded top, violet gradient, different heights).\nBottom: a dark rounded ticker bar that cycles three messages (a new signup, a milestone, a churn alert), each sliding up in and out.\nMotion (8 second loop): cards rise in staggered, the line draws with stroke-dashoffset then the area fades in and the ring pops, bars scale up from the bottom with staggered delays. Fade everything out at the end and restart.\nRespect prefers-reduced-motion. Return only the complete HTML.",
            "done": "",
            "files": []
        },
        {
            "title": "Check the counters",
            "body": "All four KPI numbers should roll up from zero.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Check the charts",
            "body": "The line should draw itself and the bars should grow.",
            "prompt": "",
            "done": "You can see it working in the browser.",
            "files": []
        },
        {
            "title": "Connect your data",
            "body": "Replace the sample numbers and path with your real metrics.",
            "prompt": "",
            "done": "",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "prompt.md",
            "note": "The full prompt.",
            "file": "prompt",
            "url": "https://ownlyplans.com/bhaskar/analytics-overview-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/analytics-overview-dashboard/index-html/"
        }
    ],
    "install": "",
    "how_to_use": "Call get_step with step 1, do it, check \"done when\", then continue."
}