Obsidian — Dark Analytics Dashboard

<aside class="ob-side">
  <div class="d-flex align-items-center gap-2 text-white fw-bold fs-5 px-2 mb-4"><i class="bi bi-gem" style="color:#8b5cf6"></i> Atlas Analytics</div>
  <a class="active" href="#"><i class="bi bi-speedometer2"></i> Overview</a>
  <a href="#"><i class="bi bi-graph-up-arrow"></i> Reports</a>
  <a href="#"><i class="bi bi-broadcast"></i> Realtime</a>
  <a href="#"><i class="bi bi-funnel"></i> Funnels</a>
  <a href="#"><i class="bi bi-plug"></i> Integrations</a>
  <a href="#"><i class="bi bi-sliders"></i> Settings</a>
</aside>
<main class="ob-main">
  <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4">
    <div><h4 class="fw-bold text-white mb-0">convertatlas.org — analytics</h4><span class="text-dim small">Live data · updated 1 min ago</span></div>
    <div class="d-flex gap-2 align-items-center"><span class="ob-pill"><i class="bi bi-circle-fill me-1" style="color:#22c55e;font-size:.5rem"></i>312 online</span><button class="btn btn-sm text-white" style="background:linear-gradient(90deg,#6d28d9,#4f46e5);border:0"><i class="bi bi-download me-1"></i>Export</button></div>
  </div>
  <div class="row g-3 mb-3">
    <div class="col-6 col-xl-3"><div class="ob-card p-3"><div class="text-dim small mb-1">Page views</div><div class="h4 fw-bold text-white mb-1">182.4k</div><span class="small" style="color:#22c55e"><i class="bi bi-arrow-up-right"></i> 14.2%</span></div></div>
    <div class="col-6 col-xl-3"><div class="ob-card p-3"><div class="text-dim small mb-1">Unique visitors</div><div class="h4 fw-bold text-white mb-1">64.1k</div><span class="small" style="color:#22c55e"><i class="bi bi-arrow-up-right"></i> 8.7%</span></div></div>
    <div class="col-6 col-xl-3"><div class="ob-card p-3"><div class="text-dim small mb-1">Bounce rate</div><div class="h4 fw-bold text-white mb-1">38.2%</div><span class="small" style="color:#f87171"><i class="bi bi-arrow-down-right"></i> 2.1%</span></div></div>
    <div class="col-6 col-xl-3"><div class="ob-card ob-glow p-3"><div class="text-dim small mb-1">Conversion</div><div class="h4 fw-bold text-white mb-1">4.6%</div><span class="small" style="color:#22c55e"><i class="bi bi-arrow-up-right"></i> 0.8%</span></div></div>
  </div>
  <div class="row g-3 mb-3">
    <div class="col-lg-8"><div class="ob-card p-3"><h6 class="fw-bold text-white mb-1">Traffic trend</h6><div id="obLine"></div></div></div>
    <div class="col-lg-4"><div class="ob-card p-3"><h6 class="fw-bold text-white mb-1">Devices</h6><div id="obRadial"></div></div></div>
  </div>
  <div class="ob-card p-3">
    <h6 class="fw-bold text-white mb-2">Top pages</h6>
    <div class="table-responsive"><table class="table align-middle mb-0">
      <thead class="small text-dim"><tr><th>Page</th><th>Views</th><th>Avg. time</th><th>Trend</th></tr></thead>
      <tbody>
        <tr><td>/en/snippets</td><td>24,820</td><td>2m 14s</td><td style="color:#22c55e">▲ 12%</td></tr>
        <tr><td>/en/templates</td><td>18,204</td><td>4m 02s</td><td style="color:#22c55e">▲ 31%</td></tr>
        <tr><td>/en/tools/json-formatter</td><td>12,911</td><td>6m 48s</td><td style="color:#f87171">▼ 3%</td></tr>
      </tbody>
    </table></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:#0b0f1a;color:#e2e8f0;font-family:'Segoe UI',system-ui,sans-serif}
.ob-side{background:#0e1424;border-right:1px solid #1c2438;min-height:100vh;width:230px;position:fixed;inset:0 auto 0 0;padding:20px 12px;z-index:100}
.ob-side a{color:#7c8aa5;text-decoration:none;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;font-size:.9rem;margin-bottom:2px}
.ob-side a:hover{color:#fff;background:#16203a}
.ob-side a.active{color:#fff;background:linear-gradient(90deg,#6d28d9,#4f46e5);box-shadow:0 4px 16px rgba(99,70,229,.35)}
.ob-main{margin-left:230px;padding:24px}
.ob-card{background:#101830;border:1px solid #1c2742;border-radius:16px}
.ob-glow{position:relative}
.ob-glow::before{content:"";position:absolute;inset:-1px;border-radius:16px;padding:1px;background:linear-gradient(135deg,#6d28d9,#06b6d4);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.text-dim{color:#7c8aa5}
.ob-pill{background:#16203a;border-radius:999px;padding:4px 12px;font-size:.78rem}
.table{--bs-table-bg:transparent;--bs-table-color:#cbd5e1;--bs-table-border-color:#1c2742}
@media(max-width:991px){.ob-side{display:none}.ob-main{margin-left:0}}

var grid={borderColor:'#1c2742'},dark={mode:'dark'},fontc='#7c8aa5';
new ApexCharts(document.querySelector('#obLine'),{theme:{mode:'dark'},chart:{type:'line',height:260,toolbar:{show:false},background:'transparent'},series:[{name:'Views',data:[12,19,15,28,24,38,33,45,41,52]},{name:'Visitors',data:[8,12,10,18,15,24,21,30,27,34]}],colors:['#8b5cf6','#06b6d4'],stroke:{curve:'smooth',width:3},grid:grid,dataLabels:{enabled:false},legend:{position:'top',labels:{colors:fontc}},xaxis:{labels:{style:{colors:fontc}}},yaxis:{labels:{style:{colors:fontc}}}}).render();
new ApexCharts(document.querySelector('#obRadial'),{theme:{mode:'dark'},chart:{type:'radialBar',height:260,background:'transparent'},series:[62,28,10],labels:['Mobile','Desktop','Tablet'],colors:['#8b5cf6','#06b6d4','#f59e0b'],plotOptions:{radialBar:{dataLabels:{total:{show:true,label:'Sessions',color:'#fff'}}}},legend:{show:true,position:'bottom',labels:{colors:fontc}}}).render();