Spaces:
Running
Running
File size: 3,899 Bytes
cf6c0e0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Analytics</title></head>
<body style="margin:0; background:#f8fafc">
<nav style="background:#fff; padding:14px 28px; align-items:center">
<div style="display:flex; gap:24px">
<span style="font-weight:700; color:#4f46e5">Analytics</span>
<div style="display:flex; background:#f1f5f9; padding:3px">
<button style="padding:5px 14px; border:none; font-size:13px; box-shadow:0 1px 3px rgba(0,0,0,.1)">7d</button>
<button style="padding:5px 14px; border:none; cursor:pointer">30d</button>
<button style="padding:5px 14px; border:none; cursor:pointer">90d</button>
</div>
</div>
<button style="padding:8px 16px; color:#fff; border-radius:6px; cursor:pointer">Export CSV</button>
</nav>
<div style="padding:28px">
<div style="display:grid; gap:16px">
<div style="background:#fff; border-radius:10px"><p style="margin:0 0 6px; font-weight:600; text-transform:uppercase">Total Revenue</p><p style="margin:0; font-weight:700">$84,231</p><p style="margin:6px 0 0; color:#16a34a">↑ 18.2% vs last period</p></div>
<div style="background:#fff; border-radius:10px"><p style="margin:0 0 6px; font-weight:600; text-transform:uppercase">Visitors</p><p style="margin:0; font-weight:700">24,891</p><p style="margin:6px 0 0; color:#16a34a">↑ 7.4%</p></div>
<div style="background:#fff; border-radius:10px"><p style="margin:0 0 6px; font-weight:600; text-transform:uppercase">Conversion</p><p style="margin:0; font-weight:700">3.6%</p><p style="margin:6px 0 0; color:#ef4444">↓ 0.4%</p></div>
<div style="background:#fff; border-radius:10px"><p style="margin:0 0 6px; font-weight:600; text-transform:uppercase">Avg Order</p><p style="margin:0; font-weight:700">$94.30</p><p style="margin:6px 0 0; color:#16a34a">↑ 10.1%</p></div>
</div>
<div style="display:grid; gap:16px">
<div style="background:#fff; border-radius:10px">
<h3 style="margin:0 0 20px">Revenue Over Time</h3>
<div style="display:flex; gap:8px">
<div style="flex:1; border-radius:4px 4px 0 0"></div>
<div style="flex:1; border-radius:4px 4px 0 0"></div>
<div style="flex:1; border-radius:4px 4px 0 0"></div>
<div style="flex:1; border-radius:4px 4px 0 0"></div>
<div style="flex:1; border-radius:4px 4px 0 0"></div>
<div style="flex:1; border-radius:4px 4px 0 0"></div>
<div style="flex:1; border-radius:4px 4px 0 0"></div>
</div>
<div style="display:flex; margin-top:8px; color:#94a3b8">
<span style="flex:1">Mon</span><span style="flex:1">Tue</span><span style="flex:1">Wed</span><span style="flex:1">Thu</span><span style="flex:1">Fri</span><span style="flex:1">Sat</span><span style="flex:1">Sun</span>
</div>
</div>
<div style="background:#fff; border-radius:10px">
<h3 style="margin:0 0 16px">Top Sources</h3>
<div style="font-size:13px">
<div style="display:flex; align-items:center"><span>Google</span><div style="display:flex; gap:8px"><div style="width:80px; background:#e2e8f0; overflow:hidden"><div style="width:62%; background:#4f46e5"></div></div><span style="color:#888">62%</span></div></div>
<div style="display:flex; align-items:center"><span>Direct</span><div style="display:flex; gap:8px"><div style="width:80px; background:#e2e8f0; overflow:hidden"><div style="width:22%; background:#818cf8"></div></div><span style="color:#888">22%</span></div></div>
<div style="display:flex; align-items:center"><span>Social</span><div style="display:flex; gap:8px"><div style="width:80px; background:#e2e8f0; overflow:hidden"><div style="width:16%; background:#c4b5fd"></div></div><span style="color:#888">16%</span></div></div>
</div>
</div>
</div>
</div>
</body>
</html>
|