Time tracking report
Copy this prompt into Claude, Cursor or Lovable.
Create a single-file HTML time tracking report, 1280x720, cream background #fdf6ec, ink #2b1d0e, accents amber #f59e0b, indigo #6366f1, green #10b981. System fonts, no libraries.
Header: H1 "Time report", subtitle "This week - Nov 3 to Nov 9" and on the right a dark rounded timer pill showing a blinking red dot and a monospace "02:14:" followed by seconds that tick up (CSS @property counter with steps()).
Main white card "Hours per day - Stacked by project": five columns Mon to Fri, each a stack of three rounded segments (amber, indigo, green) with different heights; day labels underneath.
Right white card "Projects": three rows with a colour square, name and hours (Website redesign 15.5 h, Mobile app 14.2 h, Client support 8.3 h) and at the bottom a big "Total tracked" number that counts to 38 h.
Motion (8 second loop): segments scale up from the baseline with staggered delays, project rows slide in one by one, the total counts up, the timer seconds tick. Fade out at the end and restart.
Respect prefers-reduced-motion. Return only the complete HTML.Source, 12 lines
# Time tracking report Copy this prompt into Claude, Cursor or Lovable. ```text Create a single-file HTML time tracking report, 1280x720, cream background #fdf6ec, ink #2b1d0e, accents amber #f59e0b, indigo #6366f1, green #10b981. System fonts, no libraries. Header: H1 "Time report", subtitle "This week - Nov 3 to Nov 9" and on the right a dark rounded timer pill showing a blinking red dot and a monospace "02:14:" followed by seconds that tick up (CSS @property counter with steps()). Main white card "Hours per day - Stacked by project": five columns Mon to Fri, each a stack of three rounded segments (amber, indigo, green) with different heights; day labels underneath. Right white card "Projects": three rows with a colour square, name and hours (Website redesign 15.5 h, Mobile app 14.2 h, Client support 8.3 h) and at the bottom a big "Total tracked" number that counts to 38 h. Motion (8 second loop): segments scale up from the baseline with staggered delays, project rows slide in one by one, the total counts up, the timer seconds tick. Fade out at the end and restart. Respect prefers-reduced-motion. Return only the complete HTML. ```