index.html.md

# index.html

The finished result as one file. Save it as index.html and open it.

```html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Time tracking report</title><style>*{box-sizing:border-box;margin:0;padding:0}
html,body{width:1280px;height:720px;overflow:hidden}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
.stage{position:absolute;inset:0;animation:cyc 8s linear infinite both}
@keyframes cyc{0%{opacity:0}4%{opacity:1}94%{opacity:1}100%{opacity:0}}
body:not(.go) *,body:not(.go) *::before,body:not(.go) *::after{animation-play-state:paused!important}
.cnt::after{content:counter(n)}.cnt{counter-reset:n var(--n)}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}


body{background:#fdf6ec;color:#2b1d0e}
.top{position:absolute;left:48px;right:48px;top:32px;display:flex;align-items:center}
.top h1{font-size:28px;letter-spacing:-.03em}.top small{display:block;color:#9a8466;font-size:14px;margin-top:4px}
.tm{margin-left:auto;background:#2b1d0e;color:#fff;border-radius:18px;padding:14px 22px;font:700 30px ui-monospace,Menlo,monospace;display:flex;align-items:center;gap:12px}
.tm i{width:12px;height:12px;border-radius:50%;background:#f43f5e;animation:bl 1s infinite}@keyframes bl{50%{opacity:.2}}
.sec{animation:sc 8s steps(1) infinite both}@keyframes sc{0%{--n:37}12.5%{--n:38}25%{--n:39}37.5%{--n:40}50%{--n:41}62.5%{--n:42}75%{--n:43}87.5%,100%{--n:44}}
.sec{counter-reset:n var(--n)}.sec::after{content:counter(n,decimal-leading-zero)}
.ch{position:absolute;left:48px;top:130px;width:760px;height:540px;background:#fff;border-radius:24px;padding:26px;box-shadow:0 18px 40px -30px #6b4a14}
.ch h3{font-size:16px}.ch p{font-size:13px;color:#9a8466;margin-top:3px}
.bars{position:absolute;left:36px;right:36px;bottom:56px;height:360px;display:flex;gap:26px;align-items:flex-end;border-bottom:2px solid #f0e3cd}
.col{flex:1;display:flex;flex-direction:column-reverse;gap:3px;height:100%;justify-content:flex-start;align-items:stretch}
.col{justify-content:flex-start}
.seg{border-radius:8px;transform-origin:bottom;animation:g 8s infinite both}
@keyframes g{0%,10%{transform:scaleY(0);opacity:0}38%,100%{transform:scaleY(1);opacity:1}}
.lab{position:absolute;left:36px;right:36px;bottom:22px;display:flex;gap:26px;font-size:13px;color:#9a8466}.lab span{flex:1;text-align:center}
.side{position:absolute;left:832px;right:48px;top:130px;bottom:50px;background:#fff;border-radius:24px;padding:26px;box-shadow:0 18px 40px -30px #6b4a14}
.side h3{font-size:16px;margin-bottom:16px}.pr{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-size:15px;opacity:0;animation:pi 8s infinite both}
.pr:nth-of-type(2){animation-delay:.12s}.pr:nth-of-type(3){animation-delay:.24s}.pr:nth-of-type(4){animation-delay:.36s}
@keyframes pi{0%,26%{opacity:0;transform:translateX(16px)}34%,100%{opacity:1;transform:none}}
.pr i{width:14px;height:14px;border-radius:5px}.pr b{margin-left:auto}
.tot{position:absolute;left:26px;right:26px;bottom:26px;border-top:2px solid #f0e3cd;padding-top:18px;font-size:14px;color:#9a8466}.tot b{display:block;font-size:42px;letter-spacing:-.04em;color:#2b1d0e}
.th{animation:th 8s infinite both}@keyframes th{0%,10%{--n:0}40%,100%{--n:38}}
</style></head><body><div class="stage"><div class="top"><div><h1>Time report</h1><small>This week - Nov 3 to Nov 9</small></div><div class="tm"><i></i>02:14:<span class="sec"></span></div></div>
<div class="ch"><h3>Hours per day</h3><p>Stacked by project</p><div class="bars"><div class="col"><div class="seg" style="height:90px;background:#f59e0b;animation-delay:0.0s"></div><div class="seg" style="height:60px;background:#6366f1;animation-delay:0.05s"></div><div class="seg" style="height:40px;background:#10b981;animation-delay:0.1s"></div></div><div class="col"><div class="seg" style="height:60px;background:#f59e0b;animation-delay:0.1s"></div><div class="seg" style="height:110px;background:#6366f1;animation-delay:0.15000000000000002s"></div><div class="seg" style="height:30px;background:#10b981;animation-delay:0.2s"></div></div><div class="col"><div class="seg" style="height:110px;background:#f59e0b;animation-delay:0.2s"></div><div class="seg" style="height:50px;background:#6366f1;animation-delay:0.25s"></div><div class="seg" style="height:70px;background:#10b981;animation-delay:0.30000000000000004s"></div></div><div class="col"><div class="seg" style="height:70px;background:#f59e0b;animation-delay:0.30000000000000004s"></div><div class="seg" style="height:90px;background:#6366f1;animation-delay:0.35000000000000003s"></div><div class="seg" style="height:90px;background:#10b981;animation-delay:0.4s"></div></div><div class="col"><div class="seg" style="height:50px;background:#f59e0b;animation-delay:0.4s"></div><div class="seg" style="height:40px;background:#6366f1;animation-delay:0.45s"></div><div class="seg" style="height:20px;background:#10b981;animation-delay:0.5s"></div></div></div><div class="lab"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span></div></div>
<div class="side"><h3>Projects</h3><div class="pr"><i style="background:#f59e0b"></i>Website redesign<b>15.5 h</b></div><div class="pr"><i style="background:#6366f1"></i>Mobile app<b>14.2 h</b></div><div class="pr"><i style="background:#10b981"></i>Client support<b>8.3 h</b></div><div class="tot">Total tracked<b><span class="cnt th"></span> h</b></div></div></div><script>window.start=function(){document.body.classList.add("go")};if(!/[?&]rec/.test(location.search))start();</script></body></html>
```