vision-coder-openenv / data /tests /12 /variants /no_layout.html
amaljoe88's picture
deploy: sync 712e5bc -> HF
cf6c0e0
<!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>