Helio — Finance & Crypto Dashboard

<nav class="hl-top px-3 py-2 d-flex flex-wrap align-items-center gap-3 sticky-top">
  <span class="fw-bold fs-5 text-white"><i class="bi bi-sun-fill hl-gold me-1"></i>Atlas Finance</span>
  <div class="d-none d-md-flex gap-3 small"><a class="text-white text-decoration-none" href="#">Portfolio</a><a class="text-dim text-decoration-none" href="#">Markets</a><a class="text-dim text-decoration-none" href="#">Trade</a><a class="text-dim text-decoration-none" href="#">Wallets</a></div>
  <div class="ms-auto d-flex gap-2 align-items-center"><span class="hl-chip"><i class="bi bi-wallet2 me-1 hl-gold"></i>$128,409.22</span><button class="btn btn-sm fw-semibold" style="background:#fbbf24;border:0">Deposit</button></div>
</nav>
<main class="container-xl py-4">
  <div class="row g-3 mb-3">
    <div class="col-12 col-lg-3"><div class="hl-card p-3"><div class="d-flex justify-content-between"><div><div class="text-dim small">Total balance</div><div class="h4 fw-bold text-white">$128,409</div><span class="small hl-up"><i class="bi bi-graph-up-arrow"></i> +6.4% today</span></div></div><div id="hlSpark1"></div></div></div>
    <div class="col-6 col-lg-3"><div class="hl-card p-3"><div class="text-dim small">Invested</div><div class="h5 fw-bold text-white">$96,200</div><div id="hlSpark2"></div></div></div>
    <div class="col-6 col-lg-3"><div class="hl-card p-3"><div class="text-dim small">Profit / Loss</div><div class="h5 fw-bold hl-up">+$32,209</div><div id="hlSpark3"></div></div></div>
    <div class="col-12 col-lg-3"><div class="hl-card p-3"><div class="text-dim small mb-2">Quick actions</div><div class="d-flex gap-2"><button class="btn btn-sm w-100" style="background:#1b2a4a;color:#dbe2f0">Buy</button><button class="btn btn-sm w-100" style="background:#1b2a4a;color:#dbe2f0">Sell</button><button class="btn btn-sm w-100" style="background:#1b2a4a;color:#dbe2f0">Swap</button></div></div></div>
  </div>
  <div class="row g-3">
    <div class="col-lg-8">
      <div class="hl-card p-3 mb-3">
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-1"><h6 class="fw-bold text-white mb-0">BTC / USD</h6><div class="btn-group btn-group-sm"><button class="btn" style="background:#fbbf24;border:0">1D</button><button class="btn text-dim" style="background:#1b2a4a;border:0">1W</button><button class="btn text-dim" style="background:#1b2a4a;border:0">1M</button></div></div>
        <div id="hlCandle"></div>
      </div>
      <div class="hl-card p-3">
        <h6 class="fw-bold text-white mb-2">Assets</h6>
        <div class="d-flex align-items-center gap-3 py-2 border-bottom" style="border-color:#1b2a4a!important"><div class="hl-asset text-dark" style="background:#fbbf24">₿</div><div class="flex-fill"><div class="fw-semibold small text-white">Bitcoin</div><div class="text-dim" style="font-size:.75rem">0.84 BTC</div></div><div class="text-end"><div class="small text-white">$56,200</div><div class="hl-up" style="font-size:.75rem">+4.1%</div></div></div>
        <div class="d-flex align-items-center gap-3 py-2 border-bottom" style="border-color:#1b2a4a!important"><div class="hl-asset text-white" style="background:#6366f1">Ξ</div><div class="flex-fill"><div class="fw-semibold small text-white">Ethereum</div><div class="text-dim" style="font-size:.75rem">12.2 ETH</div></div><div class="text-end"><div class="small text-white">$38,914</div><div class="hl-up" style="font-size:.75rem">+2.8%</div></div></div>
        <div class="d-flex align-items-center gap-3 py-2"><div class="hl-asset text-white" style="background:#10b981">S</div><div class="flex-fill"><div class="fw-semibold small text-white">Stocks ETF</div><div class="text-dim" style="font-size:.75rem">220 shares</div></div><div class="text-end"><div class="small text-white">$33,295</div><div class="hl-down" style="font-size:.75rem">−0.6%</div></div></div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="hl-card p-3 mb-3"><h6 class="fw-bold text-white mb-1">Allocation</h6><div id="hlDonut"></div></div>
      <div class="hl-card p-3"><h6 class="fw-bold text-white mb-2">Recent transactions</h6>
        <div class="d-flex justify-content-between small mb-2"><span class="text-dim"><i class="bi bi-arrow-down-circle hl-up me-1"></i>Bought BTC</span><span class="text-white">+0.05</span></div>
        <div class="d-flex justify-content-between small mb-2"><span class="text-dim"><i class="bi bi-arrow-up-circle hl-down me-1"></i>Sold ETH</span><span class="text-white">−2.0</span></div>
        <div class="d-flex justify-content-between small"><span class="text-dim"><i class="bi bi-arrow-repeat hl-gold me-1"></i>Swap USDT→BTC</span><span class="text-white">$5,000</span></div>
      </div>
    </div>
  </div>
</main>
<div style="text-align:center;padding:18px 12px;font:500 12px system-ui;opacity:.6">Template by <a href="https://convertatlas.org" style="color:inherit;font-weight:700;text-decoration:none">ConvertAtlas</a> · Developer Tools</div>

body{background:#0c1222;color:#dbe2f0;font-family:'Segoe UI',system-ui,sans-serif}
.hl-top{background:#101a33;border-bottom:1px solid #1b2a4a}
.hl-card{background:#111c38;border:1px solid #1b2a4a;border-radius:16px}
.hl-gold{color:#fbbf24}
.hl-chip{background:#1b2a4a;border-radius:10px;padding:6px 12px;font-size:.82rem}
.hl-asset{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.8rem}
.text-dim{color:#7d8db1}
.hl-up{color:#34d399}.hl-down{color:#f87171}

function spark(sel,data,color){new ApexCharts(document.querySelector(sel),{chart:{type:'area',height:50,sparkline:{enabled:true}},series:[{data:data}],colors:[color],stroke:{curve:'smooth',width:2},fill:{type:'gradient',gradient:{opacityFrom:.4,opacityTo:0}},tooltip:{enabled:false}}).render()}
spark('#hlSpark1',[20,28,24,34,30,42,48],'#fbbf24');spark('#hlSpark2',[40,38,42,41,44,43,46],'#6366f1');spark('#hlSpark3',[5,12,9,18,15,24,32],'#34d399');
var day=0;function c(o,h,l,cl){day++;return {x:new Date(2026,5,day),y:[o,h,l,cl]};}
new ApexCharts(document.querySelector('#hlCandle'),{theme:{mode:'dark'},chart:{type:'candlestick',height:280,toolbar:{show:false},background:'transparent'},series:[{data:[c(64,67,62,66),c(66,69,65,68),c(68,70,64,65),c(65,68,63,67),c(67,72,66,71),c(71,74,69,70),c(70,73,68,72),c(72,76,71,75)]}],plotOptions:{candlestick:{colors:{upward:'#34d399',downward:'#f87171'}}},xaxis:{type:'datetime',labels:{style:{colors:'#7d8db1'}}},yaxis:{labels:{style:{colors:'#7d8db1'}}},grid:{borderColor:'#1b2a4a'}}).render();
new ApexCharts(document.querySelector('#hlDonut'),{theme:{mode:'dark'},chart:{type:'donut',height:230,background:'transparent'},series:[44,30,26],labels:['BTC','ETH','Stocks'],colors:['#fbbf24','#6366f1','#10b981'],legend:{position:'bottom',labels:{colors:'#7d8db1'}},dataLabels:{enabled:false}}).render();