Inventory management table
Copy this prompt into Claude, Cursor or Lovable.
Build a single-file HTML inventory management screen, 1280x720, dark slate background #111827, panels #1a2336, border #263250, text #e5e9f2, green #34d399, red #f87171, blue #2b6cff. System fonts, no libraries.
Top: three KPI tiles - Units in stock (counts to 1284), Low stock items (7), Fill rate (96%) - using CSS @property integer counters.
Table: columns Product, SKU, Stock level, action. Six rows: Oak desk 140cm, Ergo chair Pro, Standing mat, Monitor arm dual (low, 12 percent), USB-C dock, Cable tray kit. Stock level is a 220px rounded bar plus a small status badge (green In stock, red Low stock).
Motion (8 second loop): rows rise in, bars grow to their value. The Monitor arm row flashes a faint red twice, its bar is red. A blue Reorder button on that row is pressed (scale .9), then the bar grows to 92 percent and turns green and the badge switches to green Restocked. A green toast "Purchase order #PO-2291 sent to supplier" slides up bottom right. Fade out at the end and restart.
Respect prefers-reduced-motion. Return only the complete HTML.Source, 11 lines
# Inventory management table Copy this prompt into Claude, Cursor or Lovable. ```text Build a single-file HTML inventory management screen, 1280x720, dark slate background #111827, panels #1a2336, border #263250, text #e5e9f2, green #34d399, red #f87171, blue #2b6cff. System fonts, no libraries. Top: three KPI tiles - Units in stock (counts to 1284), Low stock items (7), Fill rate (96%) - using CSS @property integer counters. Table: columns Product, SKU, Stock level, action. Six rows: Oak desk 140cm, Ergo chair Pro, Standing mat, Monitor arm dual (low, 12 percent), USB-C dock, Cable tray kit. Stock level is a 220px rounded bar plus a small status badge (green In stock, red Low stock). Motion (8 second loop): rows rise in, bars grow to their value. The Monitor arm row flashes a faint red twice, its bar is red. A blue Reorder button on that row is pressed (scale .9), then the bar grows to 92 percent and turns green and the badge switches to green Restocked. A green toast "Purchase order #PO-2291 sent to supplier" slides up bottom right. Fade out at the end and restart. Respect prefers-reduced-motion. Return only the complete HTML. ```