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>Inventory management table</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:#111827;color:#e5e9f2}
.top{position:absolute;left:44px;right:44px;top:30px;display:flex;gap:16px}
.k{flex:1;background:#1a2336;border:1px solid #263250;border-radius:16px;padding:16px 20px;animation:rs 8s infinite both}.k:nth-child(2){animation-delay:.1s}.k:nth-child(3){animation-delay:.2s}
@keyframes rs{0%,3%{opacity:0;transform:translateY(12px)}10%,100%{opacity:1;transform:none}}
.k small{font-size:12px;color:#8a97b5;text-transform:uppercase;letter-spacing:.08em}.k b{display:block;font-size:32px;letter-spacing:-.03em;margin-top:4px}
.a1{animation:a1 8s infinite both}.a2{animation:a2 8s infinite both}.a3{animation:a3 8s infinite both}
@keyframes a1{0%,6%{--n:0}32%,100%{--n:1284}}@keyframes a2{0%,6%{--n:0}32%,100%{--n:7}}@keyframes a3{0%,6%{--n:0}32%,100%{--n:96}}
table{position:absolute;left:44px;right:44px;top:150px;border-collapse:collapse;width:calc(100% - 88px)}
th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7684a4;text-align:left;padding:10px 14px;border-bottom:1.5px solid #263250}
td{padding:0 14px;height:62px;font-size:15px;border-bottom:1px solid #1e283d}
tr{opacity:0;animation:tr 8s infinite both}
@keyframes tr{0%,8%{opacity:0;transform:translateY(10px)}16%,100%{opacity:1;transform:none}}
.bar{width:220px;height:10px;border-radius:9px;background:#1e283d;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:10px}.bar i{display:block;height:100%;border-radius:9px;background:#34d399;width:var(--w);animation:gb 8s infinite both}
@keyframes gb{0%,14%{width:0}36%,100%{width:var(--w)}}
.lo .bar i{background:#f87171;animation:lo 8s infinite both}@keyframes lo{0%,14%{width:0}36%,54%{width:var(--w)}66%,100%{width:92%;background:#34d399}}
.lo{animation:tr 8s infinite both,fl 8s infinite both}
@keyframes fl{0%,40%{background:transparent}46%{background:#f8717122}52%{background:transparent}58%{background:#f8717122}64%{background:transparent}}
.bd{font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;background:#16352a;color:#34d399}.bd.r{background:#3a1d1d;color:#f87171;position:absolute;animation:b1 8s infinite both}.bd.g{background:#16352a;color:#34d399;animation:b2 8s infinite both}
@keyframes b1{0%,62%{opacity:1}68%,100%{opacity:0}}@keyframes b2{0%,62%{opacity:0}68%,100%{opacity:1}}
.rbt{font-size:13px;font-weight:700;padding:9px 14px;border-radius:10px;background:#2b6cff;color:#fff;animation:pr 8s infinite both;display:inline-block}
@keyframes pr{0%,56%{transform:none}60%{transform:scale(.9)}64%,100%{transform:none}}
.toast{position:absolute;right:44px;bottom:36px;background:#0f3d2e;border:1px solid #34d399;color:#6ee7b7;border-radius:14px;padding:14px 20px;font-weight:700;opacity:0;animation:ts 8s infinite both}
@keyframes ts{0%,62%{opacity:0;transform:translateY(12px)}68%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
td:nth-child(3){position:relative}
</style></head><body><div class="stage"><div class="top"><div class="k"><small>Units in stock</small><b><span class="cnt a1"></span></b></div><div class="k"><small>Low stock items</small><b><span class="cnt a2"></span></b></div><div class="k"><small>Fill rate</small><b><span class="cnt a3"></span>%</b></div></div>
<table><thead><tr><th>Product</th><th>SKU</th><th>Stock level</th><th></th></tr></thead><tbody><tr style="animation-delay:0.0s"><td>Oak desk - 140cm</td><td>OD-140</td><td><span class="bar"><i style="--w:78%"></i></span><span class="bd">In stock</span></td><td></td></tr><tr style="animation-delay:0.06s"><td>Ergo chair Pro</td><td>EC-PRO</td><td><span class="bar"><i style="--w:64%"></i></span><span class="bd">In stock</span></td><td></td></tr><tr style="animation-delay:0.12s"><td>Standing mat</td><td>SM-020</td><td><span class="bar"><i style="--w:88%"></i></span><span class="bd">In stock</span></td><td></td></tr><tr class="lo" style="animation-delay:0.18s,0s"><td>Monitor arm - dual</td><td>MA-D2</td><td><span class="bar"><i style="--w:12%"></i></span><span class="bd r">Low stock</span><span class="bd g">Restocked</span></td><td><span class="rbt">Reorder</span></td></tr><tr style="animation-delay:0.24s"><td>USB-C dock</td><td>UD-C9</td><td><span class="bar"><i style="--w:55%"></i></span><span class="bd">In stock</span></td><td></td></tr><tr style="animation-delay:0.3s"><td>Cable tray kit</td><td>CT-300</td><td><span class="bar"><i style="--w:71%"></i></span><span class="bd">In stock</span></td><td></td></tr></tbody></table><div class="toast">Purchase order #PO-2291 sent to supplier</div></div><script>window.start=function(){document.body.classList.add("go")};if(!/[?&]rec/.test(location.search))start();</script></body></html>
```