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>Analytics overview dashboard</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:#f3f1ff;color:#1c1840}
.side{position:absolute;left:0;top:0;bottom:0;width:84px;background:#1c1840;display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:28px}
.side i{width:38px;height:38px;border-radius:12px;background:#2c2760}.side i:first-child{background:linear-gradient(135deg,#8b5cf6,#ec4899)}.side i.on{background:#8b5cf6}
.main{position:absolute;left:116px;right:40px;top:30px}
h1{font-size:26px;letter-spacing:-.03em}.sub{font-size:13px;color:#7a76a8;margin:4px 0 20px}
.kp{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.k{background:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 14px 30px -22px #3b2f9a;animation:rs 8s infinite both}
.k:nth-child(2){animation-delay:.1s}.k:nth-child(3){animation-delay:.2s}.k:nth-child(4){animation-delay:.3s}
@keyframes rs{0%,3%{opacity:0;transform:translateY(14px)}10%,100%{opacity:1;transform:none}}
.k small{font-size:12px;color:#7a76a8}.k b{display:block;font-size:30px;letter-spacing:-.03em;margin:4px 0}.k em{font-style:normal;font-size:12px;font-weight:700;color:#16a34a}.k em.d{color:#e11d48}
.a1{animation:a1 8s infinite both}.a2{animation:a2 8s infinite both}.a3{animation:a3 8s infinite both}.a4{animation:a4 8s infinite both}
@keyframes a1{0%,6%{--n:0}34%,100%{--n:48210}}@keyframes a2{0%,6%{--n:0}34%,100%{--n:9380}}@keyframes a3{0%,6%{--n:0}34%,100%{--n:312}}@keyframes a4{0%,6%{--n:0}34%,100%{--n:68}}
.grid{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;margin-top:16px}
.card{background:#fff;border-radius:20px;padding:20px 22px;height:300px;box-shadow:0 14px 30px -22px #3b2f9a;position:relative}
.card h3{font-size:14px;margin-bottom:6px}.card p{font-size:12px;color:#7a76a8}
svg{position:absolute;left:18px;bottom:14px}
.ln{stroke-dasharray:900;stroke-dashoffset:900;animation:dr 8s infinite both}
@keyframes dr{0%,12%{stroke-dashoffset:900}44%,100%{stroke-dashoffset:0}}
.ar{opacity:0;animation:ar 8s infinite both}@keyframes ar{0%,30%{opacity:0}46%,100%{opacity:1}}
.pt{opacity:0;animation:pt 8s infinite both}@keyframes pt{0%,42%{opacity:0;transform:scale(0)}48%,100%{opacity:1;transform:scale(1)}}
.bars{position:absolute;left:24px;right:24px;bottom:22px;height:190px;display:flex;align-items:flex-end;gap:12px}
.bars i{flex:1;border-radius:9px 9px 3px 3px;background:linear-gradient(#8b5cf6,#c4b5fd);height:var(--h);transform-origin:bottom;animation:bg 8s infinite both}
@keyframes bg{0%,14%{transform:scaleY(0)}40%,100%{transform:scaleY(1)}}
.tkr{position:absolute;left:116px;right:40px;bottom:26px;height:52px;background:#1c1840;color:#e9e5ff;border-radius:16px;overflow:hidden;font-size:14px}
.tkr div{position:absolute;left:22px;top:0;line-height:52px;opacity:0;animation:tk 8s infinite both}
.tkr div:nth-child(2){animation-delay:2.2s}.tkr div:nth-child(3){animation-delay:4.4s}
@keyframes tk{0%{opacity:0;transform:translateY(16px)}5%,22%{opacity:1;transform:none}28%,100%{opacity:0;transform:translateY(-16px)}}
.tkr b{color:#a78bfa}
</style></head><body><div class="stage">
<div class="side"><i></i><i class="on"></i><i></i><i></i><i></i></div>
<div class="main"><h1>Analytics overview</h1><div class="sub">Last 30 days · all channels</div>
<div class="kp"><div class="k"><small>Visitors</small><b><span class="cnt a1"></span></b><em>▲ 12.4%</em></div><div class="k"><small>Signups</small><b><span class="cnt a2"></span></b><em>▲ 8.1%</em></div><div class="k"><small>Paying teams</small><b><span class="cnt a3"></span></b><em>▲ 21%</em></div><div class="k"><small>Churn</small><b><span class="cnt a4"></span><small>bps</small></b><em class="d">▼ 0.3%</em></div></div>
<div class="grid"><div class="card"><h3>Revenue growth</h3><p>Weekly recurring revenue</p>
<svg width="620" height="200" viewBox="0 0 620 200"><defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#8b5cf6" stop-opacity=".35"/><stop offset="1" stop-color="#8b5cf6" stop-opacity="0"/></linearGradient></defs>
<path class="ar" d="M0 170 C60 150 90 160 130 120 S210 130 260 90 S350 100 400 60 S500 70 540 36 L600 24 L600 200 L0 200Z" fill="url(#g)"/>
<path class="ln" d="M0 170 C60 150 90 160 130 120 S210 130 260 90 S350 100 400 60 S500 70 540 36 L600 24" fill="none" stroke="#8b5cf6" stroke-width="4" stroke-linecap="round"/>
<circle class="pt" cx="600" cy="24" r="8" fill="#fff" stroke="#8b5cf6" stroke-width="4" style="transform-origin:600px 24px"/></svg></div>
<div class="card"><h3>Signups by channel</h3><p>Organic leads the pack</p><div class="bars"><i style="--h:60%"></i><i style="--h:92%;animation-delay:.06s"></i><i style="--h:44%;animation-delay:.12s"></i><i style="--h:76%;animation-delay:.18s"></i><i style="--h:34%;animation-delay:.24s"></i><i style="--h:58%;animation-delay:.3s"></i></div></div></div></div>
<div class="tkr"><div><b>●</b> New signup · Priya from Orbit Retail upgraded to Team</div><div><b>●</b> Milestone · 300 paying teams reached</div><div><b>●</b> Alert · Churn is at a 6-month low</div></div></div><script>window.start=function(){document.body.classList.add("go")};if(!/[?&]rec/.test(location.search))start();</script></body></html>
```