<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Watchlist — Empty State</title> <style> :root{ --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Helvetica,Arial,sans-serif; --bg:#050505; --card:#0f0f11; --line:rgba(255,255,255,.08); --text:#f4f4f6; --muted:#8b8b93; --hover:rgba(255,255,255,.04); --sk1:rgba(255,255,255,.045); --sk2:rgba(255,255,255,.14); --menu:#161619; --cta-bg:#fff; --cta-text:#0b0b0d; --cta-glow:rgba(255,255,255,.42); --addbtn:rgba(255,255,255,.04); --addbtn-h:rgba(255,255,255,.09); --grad-mid:rgba(15,15,17,.86); --card-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 60px -20px rgba(120,120,140,.12); --up:#34d399; --down:#f87171; } body.light{ --bg:#eceef1; --card:#ffffff; --line:rgba(0,0,0,.09); --text:#0c0c0e; --muted:#6b6c72; --hover:rgba(0,0,0,.04); --sk1:rgba(0,0,0,.05); --sk2:rgba(0,0,0,.12); --menu:#ffffff; --cta-bg:#111214; --cta-text:#ffffff; --cta-glow:rgba(0,0,0,.16); --addbtn:rgba(0,0,0,.04); --addbtn-h:rgba(0,0,0,.08); --grad-mid:rgba(255,255,255,.86); --card-shadow:0 30px 60px -30px rgba(0,0,0,.22); --up:#16a34a; --down:#dc2626; } *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px; background:var(--bg);font-family:var(--font);color:var(--text);-webkit-font-smoothing:antialiased; transition:background .35s ease,color .35s ease} .theme{position:fixed;top:20px;right:20px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line); background:var(--addbtn);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center; transition:transform .18s ease,background .3s ease,border-color .3s ease;z-index:50} .theme:hover{transform:scale(1.08)} .theme:active{transform:scale(.94)} .theme svg{width:19px;height:19px} .theme .moon{display:none} body.light .theme .moon{display:block} body.light .theme .sun{display:none} .card{ position:relative;width:100%;max-width:372px;background:var(--card);border:1px solid var(--line); border-radius:22px;overflow:hidden;box-shadow:var(--card-shadow); transition:background .35s ease,border-color .35s ease,box-shadow .35s ease; animation:cardIn .7s cubic-bezier(.22,1,.36,1) both; } @keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}} .head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)} .head .t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600} .head .dot{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 var(--up);animation:live 1.8s ease infinite} @keyframes live{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}} .head .cnt{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .addbtn{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--addbtn); color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .12s} .addbtn:hover{background:var(--addbtn-h)} .addbtn:active{transform:scale(.92)} .body{position:relative;min-height:288px} .list{padding:6px 8px} .row{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:12px;transition:background .15s} .row:hover{background:var(--hover)} .row.in{animation:rowIn .38s cubic-bezier(.22,1,.36,1) both} @keyframes rowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .star{border:none;background:none;cursor:pointer;color:#4a4a52;font-size:16px;line-height:1;padding:2px;transition:transform .12s,color .15s} .star:hover{color:#6a6a72} .star.on{color:#f5c518} .star:active{transform:scale(.8)} .star.on{animation:pop .3s ease} @keyframes pop{40%{transform:scale(1.3)}} .coin{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)} .meta{flex:1;min-width:0} .name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .name .sym{color:var(--muted);font-weight:500;font-size:12px;margin-left:6px} .right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px} .price{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;transition:color .1s} .price.flashup{color:var(--up)} .price.flashdn{color:var(--down)} .chg{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;padding:2px 7px;border-radius:999px;display:inline-flex;align-items:center;gap:3px} .chg.up{color:var(--up);background:rgba(52,211,153,.12)} .chg.down{color:var(--down);background:rgba(248,113,113,.12)} .remove{border:none;background:none;color:#5a5a62;cursor:pointer;font-size:17px;line-height:1;padding:2px 4px;opacity:0;transition:opacity .15s,color .15s,transform .12s;margin-left:-2px} .row:hover .remove{opacity:1} .remove:hover{color:var(--down)} .remove:active{transform:scale(.85)} /* skeleton (empty) — an infinite upward-scrolling stream of shimmering rows */ .skelmask{position:absolute;inset:0;overflow:hidden; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%); mask-image:linear-gradient(to bottom,transparent 0,#000 14%)} .skeltrack{animation:scrollUp 11s linear infinite;will-change:transform} .skel .row{pointer-events:none;padding:9px 16px} .sk{border-radius:999px;height:9px; background:linear-gradient(90deg,var(--sk1) 25%,var(--sk2) 42%,var(--sk1) 60%); background-size:300% 100%;animation:shimmer 3.4s linear infinite} .sk.c{width:30px;height:30px;border-radius:50%} .sk.n1{width:78px} .sk.n2{width:120px;margin-top:6px;height:7px;opacity:.6} .sk.p{width:56px;height:22px;border-radius:999px} @keyframes shimmer{0%{background-position:150% 0}100%{background-position:-150% 0}} @keyframes scrollUp{from{transform:translateY(0)}to{transform:translateY(-50%)}} /* empty overlay */ .empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end; text-align:center;padding:0 26px 26px;pointer-events:none; background:linear-gradient(to bottom,transparent 30%,var(--grad-mid) 62%,var(--card) 82%); transition:opacity .35s ease,background .35s ease} .empty.hide{opacity:0;pointer-events:none} .empty h2{font-size:18px;font-weight:700;letter-spacing:-.01em} .empty p{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:30ch} .cta{pointer-events:auto;margin-top:18px;display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border:none;border-radius:999px; background:var(--cta-bg);color:var(--cta-text);font:inherit;font-size:14px;font-weight:600;cursor:pointer; box-shadow:0 0 22px -2px var(--cta-glow),0 8px 24px -6px var(--cta-glow); transition:transform .16s ease,box-shadow .25s ease,background .3s ease,color .3s ease} .cta:hover{transform:translateY(-1px);box-shadow:0 0 36px 0 var(--cta-glow),0 10px 28px -6px var(--cta-glow)} .cta:active{transform:scale(.97)} .cta svg{width:15px;height:15px} /* add menu */ .menu{position:absolute;top:50px;right:12px;width:224px;max-height:236px;overflow-y:auto;z-index:20; background:var(--menu);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 20px 50px -12px rgba(0,0,0,.45); opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;pointer-events:none;transition:opacity .16s,transform .16s} .menu.open{opacity:1;transform:none;pointer-events:auto} .menu::-webkit-scrollbar{width:7px} .menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:8px} .mi{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;border:none;background:none;color:var(--text); font:inherit;border-radius:9px;cursor:pointer;text-align:left;transition:background .12s} .mi:hover{background:var(--hover)} .mmeta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2} .mmeta b{font-size:12.5px;font-weight:600} .mmeta span{font-size:11px;color:var(--muted)} .mprice{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .mnote{padding:16px;text-align:center;color:var(--muted);font-size:12.5px} @media (prefers-reduced-motion:reduce){.head .dot,.row.in,.skel .row,.sk,.skeltrack{animation:none}} </style> </head> <body> <button class="theme" id="theme" aria-label="Toggle theme"> <svg class="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg> <svg class="moon" viewBox="0 0 24 24" fill="currentColor"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg> </button> <div class="card" id="card"> <div class="head"> <span class="t"><span class="dot"></span>Watchlist</span> <span style="display:flex;align-items:center;gap:10px"> <span class="cnt" id="cnt"></span> <button class="addbtn" id="addBtn" aria-label="Add asset"> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg> </button> </span> </div> <div class="body"> <div class="list" id="list"></div> <div class="empty" id="empty"> <h2>Nothing on your radar yet</h2> <p>Add a few coins to start tracking prices and momentum, live.</p> <button class="cta" id="cta"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg> Add asset </button> </div> </div> <div class="menu" id="menu" role="listbox"></div> </div> <script> (function(){ var CATALOG = [ { sym:'BTC', name:'Bitcoin', color:'#f7931a', price:64230.50, chg:2.4 }, { sym:'ETH', name:'Ethereum', color:'#627eea', price:3340.12, chg:1.1 }, { sym:'SOL', name:'Solana', color:'#9945ff', price:148.77, chg:-0.8 }, { sym:'ADA', name:'Cardano', color:'#2f6fdb', price:0.4520, chg:3.2 }, { sym:'AVAX', name:'Avalanche', color:'#e84142', price:36.90, chg:-1.5 }, { sym:'DOT', name:'Polkadot', color:'#e6007a', price:7.210, chg:0.6 }, { sym:'LINK', name:'Chainlink', color:'#2a5ada', price:14.30, chg:4.1 }, { sym:'MATIC',name:'Polygon', color:'#8247e5', price:0.7200, chg:-2.1 }, ]; var el = function(id){ return document.getElementById(id); }; var list = el('list'), empty = el('empty'), menu = el('menu'), cnt = el('cnt'); var assets = []; // added: {sym,name,color,price,chg,fav} var justAdded = null; function fmt(n){ return '$' + (n >= 1 ? n.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2}) : n.toFixed(4)); } function chgHtml(c){ var up = c >= 0; return '<span class="chg '+(up?'up':'down')+'">'+(up?'▲':'▼')+' '+Math.abs(c).toFixed(2)+'%</span>'; } function skeleton(){ var row = '<div class="row"><span class="star">☆</span><span class="sk c"></span>' + '<span class="meta"><span class="sk n1"></span><span class="sk n2" style="display:block"></span></span>' + '<span class="sk p"></span></div>'; var set = ''; for (var i=0;i<6;i++) set += row; // Two identical stacked sets so the upward scroll (translateY -50%) loops seamlessly. return '<div class="skelmask"><div class="skeltrack skel">' + set + set + '</div></div>'; } function rowHtml(a){ return '<div class="row'+(a.sym===justAdded?' in':'')+'" data-sym="'+a.sym+'">' + '<button class="star'+(a.fav?' on':'')+'" aria-label="Favourite">'+(a.fav?'★':'☆')+'</button>' + '<span class="coin" style="background:'+a.color+'">'+a.sym.charAt(0)+'</span>' + '<span class="meta"><div class="name">'+a.name+'<span class="sym">'+a.sym+'</span></div></span>' + '<span class="right"><span class="price">'+fmt(a.price)+'</span>'+chgHtml(a.chg)+'</span>' + '<button class="remove" aria-label="Remove">×</button></div>'; } function render(){ if (!assets.length){ list.innerHTML = skeleton(); empty.classList.remove('hide'); cnt.textContent = ''; } else { list.innerHTML = assets.map(rowHtml).join(''); empty.classList.add('hide'); cnt.textContent = assets.length + (assets.length > 1 ? ' assets' : ' asset'); } justAdded = null; if (menu.classList.contains('open')) fillMenu(); } function addAsset(sym){ if (assets.find(function(a){ return a.sym === sym; })) return; var src = CATALOG.find(function(a){ return a.sym === sym; }); if (!src) return; justAdded = sym; assets.push({ sym:src.sym, name:src.name, color:src.color, price:src.price, chg:src.chg, fav:false }); render(); } function removeAsset(sym){ assets = assets.filter(function(a){ return a.sym !== sym; }); render(); } function toggleFav(sym){ var a = assets.find(function(x){ return x.sym === sym; }); if (a){ a.fav = !a.fav; render(); } } // row interactions (delegated) list.addEventListener('click', function(e){ var s = e.target.closest('.star'); if (s && s.closest('[data-sym]')){ toggleFav(s.closest('[data-sym]').dataset.sym); return; } var r = e.target.closest('.remove'); if (r){ removeAsset(r.closest('[data-sym]').dataset.sym); return; } }); // ---- add menu ---- function fillMenu(){ var avail = CATALOG.filter(function(a){ return !assets.find(function(x){ return x.sym === a.sym; }); }); if (!avail.length){ menu.innerHTML = '<div class="mnote">Every asset is on your list.</div>'; return; } menu.innerHTML = avail.map(function(a){ return '<button class="mi" data-sym="'+a.sym+'"><span class="coin" style="background:'+a.color+'">'+a.sym.charAt(0)+'</span>' + '<span class="mmeta"><b>'+a.name+'</b><span>'+a.sym+'</span></span><span class="mprice">'+fmt(a.price)+'</span></button>'; }).join(''); } function openMenu(){ fillMenu(); menu.classList.add('open'); } function closeMenu(){ menu.classList.remove('open'); } menu.addEventListener('click', function(e){ var mi = e.target.closest('.mi'); if (mi){ addAsset(mi.dataset.sym); } }); el('addBtn').addEventListener('click', function(e){ e.stopPropagation(); menu.classList.contains('open') ? closeMenu() : openMenu(); }); el('cta').addEventListener('click', function(e){ e.stopPropagation(); openMenu(); }); document.addEventListener('click', function(e){ if (!menu.contains(e.target)) closeMenu(); }); // ---- live ticking ---- setInterval(function(){ if (!assets.length) return; assets.forEach(function(a){ var drift = (Math.random() - 0.47) * a.price * 0.0045; var up = drift >= 0; a.price = Math.max(0.0001, a.price + drift); a.chg = Math.max(-99, a.chg + (drift / a.price) * 100 * 0.6); var row = list.querySelector('[data-sym="' + a.sym + '"]'); if (!row) return; var pe = row.querySelector('.price'); pe.textContent = fmt(a.price); pe.classList.remove('flashup','flashdn'); void pe.offsetWidth; pe.classList.add(up ? 'flashup' : 'flashdn'); var ce = row.querySelector('.chg'); ce.outerHTML = chgHtml(a.chg); }); }, 1500); el('theme').addEventListener('click', function(){ document.body.classList.toggle('light'); }); render(); })(); </script> </body> </html>

Code & assets

Design System