Hugging Face's logo

Spaces:
amaljoe88
/
vision-coder-openenv
Running

App Files Community
vision-coder-openenv
File size: 5,648 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;font-family:sans-serif;background:#f8fafc;color:#1e293b;">
  <nav style="background:#fff;border-bottom:1px solid #e2e8f0;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;">
    <div style="display:flex;align-items:center;gap:24px;">
      <span style="font-weight:700;font-size:17px;color:#4f46e5;">Analytics</span>
      <div style="display:flex;gap:4px;background:#f1f5f9;border-radius:6px;padding:3px;">
        <button style="padding:5px 14px;background:#fff;border:none;border-radius:4px;font-size:13px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.1);">7d</button>
        <button style="padding:5px 14px;background:transparent;border:none;font-size:13px;cursor:pointer;color:#64748b;">30d</button>
        <button style="padding:5px 14px;background:transparent;border:none;font-size:13px;cursor:pointer;color:#64748b;">90d</button>
      </div>
    </div>
    <button style="padding:8px 16px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;">Export CSV</button>
  </nav>
  <div style="padding:28px;">
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;">
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;"><p style="margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;">Total Revenue</p><p style="margin:0;font-size:26px;font-weight:700;">$84,231</p><p style="margin:6px 0 0;font-size:12px;color:#16a34a;">↑ 18.2% vs last period</p></div>
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;"><p style="margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;">Visitors</p><p style="margin:0;font-size:26px;font-weight:700;">24,891</p><p style="margin:6px 0 0;font-size:12px;color:#16a34a;">↑ 7.4%</p></div>
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;"><p style="margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;">Conversion</p><p style="margin:0;font-size:26px;font-weight:700;">3.6%</p><p style="margin:6px 0 0;font-size:12px;color:#ef4444;">↓ 0.4%</p></div>
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;"><p style="margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;">Avg Order</p><p style="margin:0;font-size:26px;font-weight:700;">$94.30</p><p style="margin:6px 0 0;font-size:12px;color:#16a34a;">↑ 10.1%</p></div>
    </div>
    <div style="display:grid;grid-template-columns:2fr 1fr;gap:16px;">
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:24px;">
        <h3 style="margin:0 0 20px;font-size:15px;">Revenue Over Time</h3>
        <div style="display:flex;align-items:flex-end;gap:8px;height:120px;">
          <div style="flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:40%;"></div>
          <div style="flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:55%;"></div>
          <div style="flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:48%;"></div>
          <div style="flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:72%;"></div>
          <div style="flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:60%;"></div>
          <div style="flex:1;background:#4f46e5;border-radius:4px 4px 0 0;height:85%;"></div>
          <div style="flex:1;background:#4f46e5;border-radius:4px 4px 0 0;height:100%;"></div>
        </div>
        <div style="display:flex;gap:8px;margin-top:8px;font-size:11px;color:#94a3b8;">
          <span style="flex:1;text-align:center;">Mon</span><span style="flex:1;text-align:center;">Tue</span><span style="flex:1;text-align:center;">Wed</span><span style="flex:1;text-align:center;">Thu</span><span style="flex:1;text-align:center;">Fri</span><span style="flex:1;text-align:center;">Sat</span><span style="flex:1;text-align:center;">Sun</span>
        </div>
      </div>
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:24px;">
        <h3 style="margin:0 0 16px;font-size:15px;">Top Sources</h3>
        <div style="font-size:13px;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;"><span>Google</span><div style="display:flex;align-items:center;gap:8px;"><div style="width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;"><div style="width:62%;height:100%;background:#4f46e5;border-radius:3px;"></div></div><span style="color:#888;font-size:12px;">62%</span></div></div>
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;"><span>Direct</span><div style="display:flex;align-items:center;gap:8px;"><div style="width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;"><div style="width:22%;height:100%;background:#818cf8;border-radius:3px;"></div></div><span style="color:#888;font-size:12px;">22%</span></div></div>
          <div style="display:flex;justify-content:space-between;align-items:center;"><span>Social</span><div style="display:flex;align-items:center;gap:8px;"><div style="width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;"><div style="width:16%;height:100%;background:#c4b5fd;border-radius:3px;"></div></div><span style="color:#888;font-size:12px;">16%</span></div></div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>