Time tracking report
A warm weekly time report: stacked bars grow for each day, a live timer ticks and the project legend lists the hours.
Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.
Live preview of the result built from this prompt. Click to pause.
Overview
A cream and amber report page. Five stacked bars (three projects) grow from the baseline, the total counts to 38 hours, project rows slide in and a dark running timer ticks seconds with a blinking record dot. Topic inspired by OpenDesign’s public dashboard prompt list; this prompt and design are written from scratch.
Build it step by step
Sign in to tick steps off-
1
Paste the prompt
The AI builds the chart, legend and timer.
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.
-
2
Check the bars
Segments should grow with a stagger.
-
3
Check the timer
The seconds should tick while the dot blinks.
Done when You can see it working in the browser.
-
4
Make it real
Feed the bars and totals from your tracked time.
Files and links
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.