Spaces:
Running
Running
| <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> | |