# Community moderation queue > A dark moderation queue: one report is removed, another approved, the rest move up and the open count drops from 12 to 10. - Category: Developer tools - Version: 1.0 - Source: https://ownlyplans.com/bhaskar/community-moderation-queue/ ## 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. ## Tech stack - CSS - Dashboard - HTML ## Build steps ### 1. Paste the prompt The AI builds the three report cards and the counter. Prompt: ```text 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. Header: H1 "Moderation queue" and a right aligned big number with the label "Open reports" that counts down 12, 11, 10 (CSS @property integer). Three 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). Motion (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. Respect prefers-reduced-motion. Return only the complete HTML. ``` ### 2. Check the remove The first card should get a red stamp and leave. ### 3. Check the approve The second card should get a green stamp and leave. **Done when:** You can see it working in the browser. ### 4. Make it real Connect the buttons to your moderation actions. ## Assets ### prompt.md — The full prompt. ~~~~ # Community moderation queue Copy this prompt into Claude, Cursor or Lovable. ```text 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. Header: H1 "Moderation queue" and a right aligned big number with the label "Open reports" that counts down 12, 11, 10 (CSS @property integer). Three 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). Motion (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. Respect prefers-reduced-motion. Return only the complete HTML. ``` ~~~~ ### index.html.md — Complete code of the result in the video. ~~~~ # index.html The finished result as one file. Save it as index.html and open it. ```html Community moderation queue

Moderation queue

Open reports
REMOVED
mark_d2m agoSpam
Get rich fast!! click bit.ly/free-money and DM me for the secret
ApproveRemoveBan user
APPROVED
lena.k6m agoHarassment
You clearly have no idea what you are doing, just quit. Everyone here knows it.
ApproveRemoveBan user
o_ramirez9m agoOff topic
Anyone selling used bikes in the area? Selling mine, message for photos.
ApproveRemoveBan user
``` ~~~~ ## Build instructions by tool ### Claude Code Open a terminal in an empty folder, run `claude`, then paste the prompt. ```text Build the "Community moderation queue" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/community-moderation-queue/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the remove → Check the approve → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Claude Code.) ``` ### Cursor Open an empty folder in Cursor, start an Agent chat, then paste the prompt. ```text Build the "Community moderation queue" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/community-moderation-queue/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the remove → Check the approve → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Cursor.) ``` ### Lovable Start a new Lovable project and paste the prompt as your first message. ```text Build the "Community moderation queue" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/community-moderation-queue/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the remove → Check the approve → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Lovable.) ``` ## Definition of done - Every build step is complete and the app runs locally. - The main user flow works end to end. - Share your build on OwnlyPlans with a demo link, build time and tool.