<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Current Balance — Wallet Card</title> <style> :root{ --bg:#1b1b1d; --card:#050505; --card-line:rgba(255,255,255,0.06); --text:#ffffff; --muted:rgba(255,255,255,0.46); --chip:rgba(255,255,255,0.08); --chip-line:rgba(255,255,255,0.10); --deposit:#242426; --deposit-hover:#2d2d30; --deposit-text:#ffffff; --accent:#0a84ff; --accent-hover:#2a95ff; --accent-text:#ffffff; --sel-bg:#ffffff; --sel-text:#0a0a0a; --green:#32d74b; --shadow:0 30px 60px -20px rgba(0,0,0,0.7); --ring:rgba(255,255,255,0.14); --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Helvetica,Arial,sans-serif; } body.light{ --bg:#eef0f3; --card:#ffffff; --card-line:rgba(0,0,0,0.06); --text:#0a0a0b; --muted:rgba(0,0,0,0.42); --chip:rgba(0,0,0,0.05); --chip-line:rgba(0,0,0,0.07); --deposit:#f1f2f4; --deposit-hover:#e8e9ec; --deposit-text:#0a0a0b; --accent:#0a84ff; --accent-hover:#0a74e0; --accent-text:#ffffff; --sel-bg:#0a0a0b; --sel-text:#ffffff; --green:#1ea94b; --shadow:0 24px 50px -22px rgba(0,0,0,0.28); --ring:rgba(0,0,0,0.12); } *{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); transition:background .4s ease,color .4s ease;-webkit-font-smoothing:antialiased; } /* theme toggle */ .theme{ position:fixed;top:22px;right:22px;width:44px;height:44px;border-radius:50%; border:1px solid var(--ring);background:var(--chip);color:var(--text);cursor:pointer; display:flex;align-items:center;justify-content:center;transition:transform .2s ease,background .3s ease,border-color .3s ease; } .theme:hover{transform:scale(1.08)} .theme:active{transform:scale(.94)} .theme svg{width:20px;height:20px} .theme .moon{display:none} body.light .theme .moon{display:block} body.light .theme .sun{display:none} .card{ position:relative;width:100%;max-width:380px;background:var(--card); border:1px solid var(--card-line);border-radius:24px;padding:20px 20px 18px; box-shadow:var(--shadow);overflow:hidden; transition:background .4s ease,border-color .4s ease; animation:cardIn .7s cubic-bezier(.22,1,.36,1) both; } @keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .label{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.1px} .balance{ margin-top:4px;font-size:clamp(24px,6vw,32px);font-weight:700;letter-spacing:-.7px; line-height:1.05;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;white-space:nowrap; } .balance .sym{opacity:.95;margin-right:2px} /* currency selector */ .cur{position:relative;flex:0 0 auto} .cur-btn{ display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px 0 11px;border:none;cursor:pointer; border-radius:999px;background:var(--sel-bg);color:var(--sel-text);font:inherit;font-size:14px;font-weight:700; transition:transform .18s ease,filter .18s ease; } .cur-btn:hover{filter:brightness(.94)} body.light .cur-btn:hover{filter:brightness(1.6)} .cur-btn:active{transform:scale(.96)} .cur-btn .caret{width:14px;height:14px;transition:transform .25s ease} .cur.open .cur-btn .caret{transform:rotate(180deg)} .menu{ position:absolute;top:44px;right:0;min-width:138px;background:var(--card);border:1px solid var(--card-line); border-radius:14px;padding:5px;box-shadow:var(--shadow);z-index:5; opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;pointer-events:none; transition:opacity .18s ease,transform .18s ease; } .cur.open .menu{opacity:1;transform:none;pointer-events:auto} .menu button{ display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:none; background:none;color:var(--text);font:inherit;font-size:15px;font-weight:600;border-radius:10px;cursor:pointer;transition:background .15s ease; } .menu button:hover{background:var(--chip)} .menu button .code{color:var(--muted);font-weight:500;font-size:13px} .menu button.active .code{color:var(--green)} /* trend pill */ .trend{ display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:5px 10px;border-radius:999px; background:var(--chip);border:1px solid var(--chip-line);font-size:13px;font-weight:600; } .trend .arrow{color:var(--green);display:inline-flex;transition:transform .3s ease} .trend .pct{color:var(--green);font-variant-numeric:tabular-nums} .trend .days{color:var(--muted);font-weight:500} .trend.pulse{animation:pulse .5s ease} @keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}} /* actions */ .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px} .btn{ height:46px;border:none;border-radius:999px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;color:var(--text); transition:transform .16s ease,background .2s ease,box-shadow .2s ease; } .btn:active{transform:scale(.97)} .btn.deposit{background:var(--deposit);color:var(--deposit-text)} .btn.deposit:hover{background:var(--deposit-hover);transform:translateY(-1px)} .btn.withdraw{background:var(--accent);color:var(--accent-text)} .btn.withdraw:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 10px 26px -8px rgba(10,132,255,.6)} .btn.on{outline:2px solid var(--ring);outline-offset:2px} /* entry panel */ .entry{ display:grid;grid-template-rows:0fr;margin-top:0;opacity:0; transition:grid-template-rows .32s cubic-bezier(.22,1,.36,1),opacity .28s ease,margin-top .32s ease; } .entry.show{grid-template-rows:1fr;opacity:1;margin-top:14px} .entry-inner{overflow:hidden} .entry-box{border:1px solid var(--card-line);border-radius:20px;padding:14px} .entry-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .entry-head span{font-size:14px;font-weight:600;color:var(--muted)} .entry-close{border:none;background:var(--chip);color:var(--text);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;transition:transform .15s ease} .entry-close:hover{transform:rotate(90deg)} .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .chips button{ flex:1;min-width:0;padding:11px 8px;border-radius:12px;border:1px solid var(--chip-line);background:var(--chip);color:var(--text); font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:transform .15s ease,background .15s ease;white-space:nowrap; } .chips button:hover{transform:translateY(-1px);background:var(--deposit-hover)} .chips button:active{transform:scale(.95)} .entry-row{display:flex;align-items:center;gap:10px;background:var(--chip);border-radius:14px;padding:6px 6px 6px 16px} .entry-row .esym{font-size:18px;font-weight:700;color:var(--muted)} .entry-row input{flex:1;min-width:0;border:none;background:none;outline:none;color:var(--text);font:inherit;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums} .entry-row input::placeholder{color:var(--muted)} .entry-row .confirm{height:44px;padding:0 20px;border:none;border-radius:11px;background:var(--accent);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s ease,background .2s ease} .entry-row .confirm:hover{background:var(--accent-hover)} .entry-row .confirm:active{transform:scale(.96)} /* floating delta */ .delta{ position:absolute;left:20px;top:52px;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;pointer-events:none; animation:floatUp .95s ease forwards; } .delta.pos{color:var(--green)} .delta.neg{color:var(--accent)} @keyframes floatUp{0%{opacity:0;transform:translateY(6px)}18%{opacity:1}100%{opacity:0;transform:translateY(-26px)}} </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="top"> <div> <div class="label">Available balance</div> <div class="balance"><span class="sym" id="sym">$</span><span id="amount">0.00</span></div> </div> <div class="cur" id="cur"> <button class="cur-btn" id="curBtn" aria-haspopup="listbox"> <svg class="caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg> <span id="curCode">USD</span> </button> <div class="menu" id="menu" role="listbox"></div> </div> </div> <div class="trend" id="trend"> <span class="arrow">↑</span><span class="pct" id="pct">0%</span><span class="days">this week</span> </div> <div class="actions"> <button class="btn deposit" id="depositBtn">Deposit</button> <button class="btn withdraw" id="withdrawBtn">Withdraw</button> </div> <div class="entry" id="entry"> <div class="entry-inner"><div class="entry-box"> <div class="entry-head"><span id="entryTitle">Add funds</span><button class="entry-close" id="entryClose" aria-label="Close">✕</button></div> <div class="chips" id="chips"></div> <div class="entry-row"> <span class="esym" id="esym">$</span> <input id="entryInput" inputmode="decimal" placeholder="0.00" aria-label="Amount"> <button class="confirm" id="entryConfirm">Confirm</button> </div> </div></div> </div> </div> <script> (function(){ var CUR = { USD:{ rate:1, sym:'$' }, EUR:{ rate:0.92, sym:'€' }, GBP:{ rate:0.79, sym:'£' }, JPY:{ rate:156.5, sym:'¥' }, }; var el = function(id){ return document.getElementById(id); }; var amountEl = el('amount'), symEl = el('sym'), curCode = el('curCode'), esym = el('esym'); var usd = 284120.75; // base balance in USD var code = 'USD'; var shown = 0; // currently displayed value (for smooth transitions) function fmt(n){ return n.toLocaleString('en-US',{ minimumFractionDigits:2, maximumFractionDigits:2 }); } function rate(){ return CUR[code].rate; } function animateCount(from, to, dur){ dur = dur || 850; var start = performance.now(); (function frame(now){ var t = Math.min((now-start)/dur, 1), e = 1-Math.pow(1-t,3); amountEl.textContent = fmt(from+(to-from)*e); shown = from+(to-from)*e; if(t<1) requestAnimationFrame(frame); else { amountEl.textContent = fmt(to); shown = to; } })(start); } function refresh(dur){ animateCount(shown, usd*rate(), dur); } // ---- currency menu ---- var menu = el('menu'), cur = el('cur'); Object.keys(CUR).forEach(function(c){ var b = document.createElement('button'); b.setAttribute('role','option'); b.className = c===code ? 'active' : ''; b.innerHTML = '<span>'+CUR[c].sym+' '+c+'</span><span class="code">'+(c===code?'current':'')+'</span>'; b.addEventListener('click', function(){ setCurrency(c); }); b.dataset.code = c; menu.appendChild(b); }); function setCurrency(c){ code = c; symEl.textContent = esym.textContent = CUR[c].sym; curCode.textContent = c; Array.prototype.forEach.call(menu.children, function(x){ var on = x.dataset.code===c; x.className = on?'active':''; x.querySelector('.code').textContent = on?'current':''; }); cur.classList.remove('open'); refresh(650); } el('curBtn').addEventListener('click', function(e){ e.stopPropagation(); cur.classList.toggle('open'); }); document.addEventListener('click', function(){ cur.classList.remove('open'); }); // ---- deposit / withdraw ---- var entry = el('entry'), entryInput = el('entryInput'), entryTitle = el('entryTitle'), chips = el('chips'); var mode = 'deposit'; var CHIP_AMOUNTS = [1000, 10000, 100000]; function openEntry(m){ mode = m; entryTitle.textContent = m==='deposit' ? 'Add funds' : 'Withdraw funds'; el('depositBtn').classList.toggle('on', m==='deposit'); el('withdrawBtn').classList.toggle('on', m==='withdraw'); esym.textContent = CUR[code].sym; chips.innerHTML = ''; CHIP_AMOUNTS.forEach(function(a){ var b = document.createElement('button'); b.textContent = (m==='deposit'?'+':'−') + CUR[code].sym + a.toLocaleString('en-US'); b.addEventListener('click', function(){ apply(a); }); chips.appendChild(b); }); entry.classList.add('show'); entryInput.value = ''; setTimeout(function(){ entryInput.focus(); }, 260); } function closeEntry(){ entry.classList.remove('show'); el('depositBtn').classList.remove('on'); el('withdrawBtn').classList.remove('on'); } function apply(amountDisplay){ if(!amountDisplay || amountDisplay<=0) return; var deltaUsd = amountDisplay/rate() * (mode==='deposit'?1:-1); usd = Math.max(0, usd + deltaUsd); floatDelta((mode==='deposit'?'+':'−') + CUR[code].sym + fmt(amountDisplay), mode==='deposit'); var tr = el('trend'); tr.classList.remove('pulse'); void tr.offsetWidth; tr.classList.add('pulse'); refresh(700); entryInput.value = ''; } function floatDelta(text, positive){ var d = document.createElement('div'); d.className = 'delta ' + (positive?'pos':'neg'); d.textContent = text; el('card').appendChild(d); setTimeout(function(){ d.remove(); }, 950); } el('depositBtn').addEventListener('click', function(){ entry.classList.contains('show') && mode==='deposit' ? closeEntry() : openEntry('deposit'); }); el('withdrawBtn').addEventListener('click', function(){ entry.classList.contains('show') && mode==='withdraw' ? closeEntry() : openEntry('withdraw'); }); el('entryClose').addEventListener('click', closeEntry); el('entryConfirm').addEventListener('click', function(){ apply(parseFloat((entryInput.value||'').replace(/[^0-9.]/g,''))); }); entryInput.addEventListener('keydown', function(e){ if(e.key==='Enter'){ apply(parseFloat((entryInput.value||'').replace(/[^0-9.]/g,''))); } }); // ---- theme ---- el('theme').addEventListener('click', function(){ document.body.classList.toggle('light'); }); // ---- intro animations ---- requestAnimationFrame(function(){ animateCount(0, usd*rate(), 1100); var p = el('pct'), start = performance.now(); (function pf(now){ var t = Math.min((now-start)/1100,1), e = 1-Math.pow(1-t,3); p.textContent = (6*e).toFixed(1) + '%'; if(t<1) requestAnimationFrame(pf); else p.textContent = '6.0%'; })(start); }); })(); </script> </body> </html>

Code & assets

Design System