Customer support inbox
Copy this prompt into Claude, Cursor or Lovable.
Create a single-file HTML customer support inbox, 1280x720, light grey background #f4f5f8, ink #1a1d29, accent blue #4f6bff. White rounded panels (22px) with soft shadows. System fonts, no libraries.
Left panel: heading "Inbox" with an open ticket counter, then five ticket rows (subject, customer and time, blue unread dot on the first three). The second ticket "Can't export invoices to CSV" is selected with a pale blue background.
Right panel: the ticket title with a yellow "Open" status pill, the customer message in a grey bubble, then a reply bubble in blue aligned right, and a dark "Send reply" button bottom right.
Motion (8 second loop): the customer bubble fades up, a three dot typing indicator bounces, a small "AI suggested reply" tag appears, then the blue reply bubble rises in. The Send button presses (scale .92). Then the status pill cross-fades from yellow Open to green Solved and the inbox counter changes from 12 to 11 (CSS @property integer). Fade everything out at the end and restart.
Respect prefers-reduced-motion. Return only the complete HTML.Source, 11 lines
# Customer support inbox Copy this prompt into Claude, Cursor or Lovable. ```text Create a single-file HTML customer support inbox, 1280x720, light grey background #f4f5f8, ink #1a1d29, accent blue #4f6bff. White rounded panels (22px) with soft shadows. System fonts, no libraries. Left panel: heading "Inbox" with an open ticket counter, then five ticket rows (subject, customer and time, blue unread dot on the first three). The second ticket "Can't export invoices to CSV" is selected with a pale blue background. Right panel: the ticket title with a yellow "Open" status pill, the customer message in a grey bubble, then a reply bubble in blue aligned right, and a dark "Send reply" button bottom right. Motion (8 second loop): the customer bubble fades up, a three dot typing indicator bounces, a small "AI suggested reply" tag appears, then the blue reply bubble rises in. The Send button presses (scale .92). Then the status pill cross-fades from yellow Open to green Solved and the inbox counter changes from 12 to 11 (CSS @property integer). Fade everything out at the end and restart. Respect prefers-reduced-motion. Return only the complete HTML. ```