{
    "id": "bhaskar/community-moderation-queue",
    "kind": "plan",
    "title": "Community moderation queue",
    "summary": "A dark moderation queue: one report is removed, another approved, the rest move up and the open count drops from 12 to 10.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/community-moderation-queue/",
    "stack": [
        "CSS",
        "Dashboard",
        "HTML"
    ],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "intermediate",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "Three flagged posts with highlighted words. Remove is pressed on the first (red REMOVED stamp, card leaves), Approve on the second (green stamp, card leaves) and the Open reports counter counts down. 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 three report cards and the counter.",
            "prompt": "Make a single-file HTML community moderation queue, 1280x720, near-black blue background #14181f, cards #1c222c with 1px #2a3240 border and 18px radius, text #e6ebf5. System fonts, no libraries.\nHeader: H1 \"Moderation queue\" and a right aligned big number with the label \"Open reports\" that counts down 12, 11, 10 (CSS @property integer).\nThree absolutely positioned report cards (158px tall). Each shows username, age, a red reason pill (Spam, Harassment, Off topic), the post text with offending words highlighted in a red tinted mark, and three buttons: Approve (dark green), Remove (dark red) and Ban user (grey).\nMotion (8 second loop): cards rise in. On card 1 the Remove button presses, a red REMOVED stamp appears top right, the card slides right and fades; the other cards move up one slot and the counter drops to 11. Then card 2 gets Approve pressed, a green APPROVED stamp, slides away, card 3 moves up, counter drops to 10. Reset at the end.\nRespect prefers-reduced-motion. Return only the complete HTML.",
            "done": "",
            "files": []
        },
        {
            "title": "Check the remove",
            "body": "The first card should get a red stamp and leave.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Check the approve",
            "body": "The second card should get a green stamp and leave.",
            "prompt": "",
            "done": "You can see it working in the browser.",
            "files": []
        },
        {
            "title": "Make it real",
            "body": "Connect the buttons to your moderation actions.",
            "prompt": "",
            "done": "",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "prompt.md",
            "note": "The full prompt.",
            "file": "prompt",
            "url": "https://ownlyplans.com/bhaskar/community-moderation-queue/prompt/"
        },
        {
            "type": "markdown",
            "name": "index.html.md",
            "note": "Complete code of the result in the video.",
            "file": "index-html",
            "url": "https://ownlyplans.com/bhaskar/community-moderation-queue/index-html/"
        }
    ],
    "install": "",
    "how_to_use": "Call get_step with step 1, do it, check \"done when\", then continue."
}