73 lines
4.3 KiB
Plaintext
73 lines
4.3 KiB
Plaintext
<svg width="800" height="600" viewBox="0 0 800 600" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Background -->
|
|
<rect width="800" height="600" fill="white"/>
|
|
|
|
<!-- Dashboard card -->
|
|
<rect x="50" y="50" width="700" height="500" rx="12" fill="#f9fafb" stroke="#e5e7eb" stroke-width="2"/>
|
|
|
|
<!-- Header -->
|
|
<rect x="50" y="50" width="700" height="60" rx="12" fill="white"/>
|
|
<text x="80" y="88" fill="#111827" font-size="24" font-weight="bold" font-family="system-ui, sans-serif">Analytics Dashboard</text>
|
|
|
|
<!-- Date range selector -->
|
|
<rect x="580" y="65" width="140" height="30" rx="6" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1"/>
|
|
<text x="600" y="85" fill="#6b7280" font-size="13" font-family="system-ui, sans-serif">Last 30 days ▼</text>
|
|
|
|
<!-- Stats grid -->
|
|
<rect x="80" y="140" width="200" height="100" rx="8" fill="white" stroke="#e5e7eb" stroke-width="1"/>
|
|
<text x="100" y="170" fill="#6b7280" font-size="13" font-family="system-ui, sans-serif">QR Codes Generated</text>
|
|
<text x="100" y="215" fill="#0A66C2" font-size="36" font-weight="bold" font-family="system-ui, sans-serif">1,247</text>
|
|
|
|
<rect x="300" y="140" width="200" height="100" rx="8" fill="white" stroke="#e5e7eb" stroke-width="1"/>
|
|
<text x="320" y="170" fill="#6b7280" font-size="13" font-family="system-ui, sans-serif">Total Scans</text>
|
|
<text x="320" y="215" fill="#00875A" font-size="36" font-weight="bold" font-family="system-ui, sans-serif">892</text>
|
|
|
|
<rect x="520" y="140" width="200" height="100" rx="8" fill="white" stroke="#e5e7eb" stroke-width="1"/>
|
|
<text x="540" y="170" fill="#6b7280" font-size="13" font-family="system-ui, sans-serif">Conversion Rate</text>
|
|
<text x="540" y="215" fill="#f59e0b" font-size="36" font-weight="bold" font-family="system-ui, sans-serif">71.5%</text>
|
|
|
|
<!-- Chart area -->
|
|
<rect x="80" y="270" width="640" height="250" rx="8" fill="white" stroke="#e5e7eb" stroke-width="1"/>
|
|
<text x="100" y="300" fill="#111827" font-size="16" font-weight="600" font-family="system-ui, sans-serif">Usage Over Time</text>
|
|
|
|
<!-- Simple bar chart -->
|
|
<g transform="translate(120, 340)">
|
|
<!-- X-axis -->
|
|
<line x1="0" y1="150" x2="560" y2="150" stroke="#e5e7eb" stroke-width="2"/>
|
|
|
|
<!-- Bars -->
|
|
<rect x="20" y="70" width="40" height="80" fill="#0A66C2" opacity="0.8"/>
|
|
<text x="40" y="170" fill="#6b7280" font-size="11" text-anchor="middle" font-family="system-ui, sans-serif">Week 1</text>
|
|
|
|
<rect x="100" y="50" width="40" height="100" fill="#0A66C2" opacity="0.8"/>
|
|
<text x="120" y="170" fill="#6b7280" font-size="11" text-anchor="middle" font-family="system-ui, sans-serif">Week 2</text>
|
|
|
|
<rect x="180" y="30" width="40" height="120" fill="#0A66C2" opacity="0.8"/>
|
|
<text x="200" y="170" fill="#6b7280" font-size="11" text-anchor="middle" font-family="system-ui, sans-serif">Week 3</text>
|
|
|
|
<rect x="260" y="40" width="40" height="110" fill="#0A66C2" opacity="0.8"/>
|
|
<text x="280" y="170" fill="#6b7280" font-size="11" text-anchor="middle" font-family="system-ui, sans-serif">Week 4</text>
|
|
|
|
<!-- Y-axis labels -->
|
|
<text x="-10" y="30" fill="#9ca3af" font-size="10" text-anchor="end" font-family="system-ui, sans-serif">400</text>
|
|
<text x="-10" y="70" fill="#9ca3af" font-size="10" text-anchor="end" font-family="system-ui, sans-serif">300</text>
|
|
<text x="-10" y="110" fill="#9ca3af" font-size="10" text-anchor="end" font-family="system-ui, sans-serif">200</text>
|
|
<text x="-10" y="150" fill="#9ca3af" font-size="10" text-anchor="end" font-family="system-ui, sans-serif">100</text>
|
|
|
|
<!-- Trend line -->
|
|
<polyline points="40,90 120,70 200,50 280,60" fill="none" stroke="#00875A" stroke-width="2" stroke-dasharray="4,4"/>
|
|
</g>
|
|
|
|
<!-- Legend -->
|
|
<g transform="translate(450, 330)">
|
|
<rect width="12" height="12" fill="#0A66C2"/>
|
|
<text x="20" y="10" fill="#6b7280" font-size="12" font-family="system-ui, sans-serif">QR Generated</text>
|
|
|
|
<line x1="0" y1="30" x2="12" y2="30" stroke="#00875A" stroke-width="2" stroke-dasharray="4,4"/>
|
|
<text x="20" y="34" fill="#6b7280" font-size="12" font-family="system-ui, sans-serif">Trend</text>
|
|
</g>
|
|
|
|
<!-- Placeholder text -->
|
|
<text x="400" y="580" fill="#9ca3af" font-size="11" text-anchor="middle" font-family="system-ui, sans-serif">Replace: assets/analytics.png</text>
|
|
</svg>
|