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