File size: 3,791 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="font-family:sans-serif; background:#f8fafc; color:#1e293b">
  <nav style="background:#fff; border-bottom:1px solid #e2e8f0">
    <div style="gap:24px">
      <span style="font-weight:700; font-size:17px; color:#4f46e5">Analytics</span>
      <div style="gap:4px; background:#f1f5f9">
        <button style="background:#fff; border:none; font-size:13px; cursor:pointer">7d</button>
        <button style="background:transparent; border:none; font-size:13px; cursor:pointer; color:#64748b">30d</button>
        <button style="background:transparent; border:none; font-size:13px; cursor:pointer; color:#64748b">90d</button>
      </div>
    </div>
    <button style="background:#4f46e5; color:#fff; border:none; font-size:13px; cursor:pointer">Export CSV</button>
  </nav>
  <div style="">
    <div style="gap:16px">
      <div style="background:#fff; border:1px solid #e2e8f0"><p style="font-size:12px; font-weight:600; color:#64748b; text-transform:uppercase">Total Revenue</p><p style="font-size:26px; font-weight:700">$84,231</p><p style="font-size:12px; color:#16a34a">↑ 18.2% vs last period</p></div>
      <div style="background:#fff; border:1px solid #e2e8f0"><p style="font-size:12px; font-weight:600; color:#64748b; text-transform:uppercase">Visitors</p><p style="font-size:26px; font-weight:700">24,891</p><p style="font-size:12px; color:#16a34a">↑ 7.4%</p></div>
      <div style="background:#fff; border:1px solid #e2e8f0"><p style="font-size:12px; font-weight:600; color:#64748b; text-transform:uppercase">Conversion</p><p style="font-size:26px; font-weight:700">3.6%</p><p style="font-size:12px; color:#ef4444">↓ 0.4%</p></div>
      <div style="background:#fff; border:1px solid #e2e8f0"><p style="font-size:12px; font-weight:600; color:#64748b; text-transform:uppercase">Avg Order</p><p style="font-size:26px; font-weight:700">$94.30</p><p style="font-size:12px; color:#16a34a">↑ 10.1%</p></div>
    </div>
    <div style="gap:16px">
      <div style="background:#fff; border:1px solid #e2e8f0">
        <h3 style="font-size:15px">Revenue Over Time</h3>
        <div style="gap:8px">
          <div style="background:#ede9fe"></div>
          <div style="background:#ede9fe"></div>
          <div style="background:#ede9fe"></div>
          <div style="background:#ede9fe"></div>
          <div style="background:#ede9fe"></div>
          <div style="background:#4f46e5"></div>
          <div style="background:#4f46e5"></div>
        </div>
        <div style="gap:8px; font-size:11px; color:#94a3b8">
          <span style="text-align:center">Mon</span><span style="text-align:center">Tue</span><span style="text-align:center">Wed</span><span style="text-align:center">Thu</span><span style="text-align:center">Fri</span><span style="text-align:center">Sat</span><span style="text-align:center">Sun</span>
        </div>
      </div>
      <div style="background:#fff; border:1px solid #e2e8f0">
        <h3 style="font-size:15px">Top Sources</h3>
        <div style="font-size:13px">
          <div style=""><span>Google</span><div style="gap:8px"><div style="background:#e2e8f0"><div style="background:#4f46e5"></div></div><span style="color:#888; font-size:12px">62%</span></div></div>
          <div style=""><span>Direct</span><div style="gap:8px"><div style="background:#e2e8f0"><div style="background:#818cf8"></div></div><span style="color:#888; font-size:12px">22%</span></div></div>
          <div style=""><span>Social</span><div style="gap:8px"><div style="background:#e2e8f0"><div style="background:#c4b5fd"></div></div><span style="color:#888; font-size:12px">16%</span></div></div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>