106 lines
6.1 KiB
Plaintext
106 lines
6.1 KiB
Plaintext
<svg width="1200" height="800" viewBox="0 0 1200 800" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Background gradient -->
|
|
<rect width="1200" height="800" fill="url(#heroGradient)"/>
|
|
<defs>
|
|
<linearGradient id="heroGradient" x1="0" y1="0" x2="1200" y2="800">
|
|
<stop offset="0%" stop-color="#e6f1ff"/>
|
|
<stop offset="100%" stop-color="#ffffff"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Dashboard mockup -->
|
|
<rect x="100" y="100" width="1000" height="600" rx="16" fill="white" stroke="#e5e7eb" stroke-width="2"/>
|
|
|
|
<!-- Header bar -->
|
|
<rect x="100" y="100" width="1000" height="60" rx="16" fill="#0A66C2"/>
|
|
<text x="140" y="140" fill="white" font-size="24" font-weight="bold" font-family="system-ui, sans-serif">EzSepa Bank Payment</text>
|
|
|
|
<!-- Navigation tabs -->
|
|
<rect x="140" y="180" width="120" height="40" rx="8" fill="#0A66C2" opacity="0.1"/>
|
|
<text x="160" y="205" fill="#0A66C2" font-size="16" font-weight="600" font-family="system-ui, sans-serif">Dashboard</text>
|
|
|
|
<rect x="280" y="180" width="100" height="40" rx="8" fill="#f3f4f6"/>
|
|
<text x="300" y="205" fill="#6b7280" font-size="16" font-family="system-ui, sans-serif">Analytics</text>
|
|
|
|
<rect x="400" y="180" width="100" height="40" rx="8" fill="#f3f4f6"/>
|
|
<text x="420" y="205" fill="#6b7280" font-size="16" font-family="system-ui, sans-serif">Settings</text>
|
|
|
|
<!-- Stats cards -->
|
|
<rect x="140" y="250" width="280" height="120" rx="12" fill="#f9fafb" stroke="#e5e7eb" stroke-width="1"/>
|
|
<text x="160" y="280" fill="#6b7280" font-size="14" font-family="system-ui, sans-serif">QR Codes Generated</text>
|
|
<text x="160" y="330" fill="#111827" font-size="42" font-weight="bold" font-family="system-ui, sans-serif">1,247</text>
|
|
|
|
<rect x="450" y="250" width="280" height="120" rx="12" fill="#f9fafb" stroke="#e5e7eb" stroke-width="1"/>
|
|
<text x="470" y="280" fill="#6b7280" font-size="14" font-family="system-ui, sans-serif">Total Scans</text>
|
|
<text x="470" y="330" fill="#111827" font-size="42" font-weight="bold" font-family="system-ui, sans-serif">892</text>
|
|
|
|
<rect x="760" y="250" width="280" height="120" rx="12" fill="#f9fafb" stroke="#e5e7eb" stroke-width="1"/>
|
|
<text x="780" y="280" fill="#6b7280" font-size="14" font-family="system-ui, sans-serif">Success Rate</text>
|
|
<text x="780" y="330" fill="#00875A" font-size="42" font-weight="bold" font-family="system-ui, sans-serif">71.5%</text>
|
|
|
|
<!-- QR Code preview -->
|
|
<rect x="140" y="400" width="450" height="270" rx="12" fill="white" stroke="#e5e7eb" stroke-width="1"/>
|
|
<text x="160" y="430" fill="#111827" font-size="18" font-weight="600" font-family="system-ui, sans-serif">Latest QR Code</text>
|
|
|
|
<!-- QR code pattern -->
|
|
<g transform="translate(220, 460)">
|
|
<rect width="150" height="150" fill="white"/>
|
|
<!-- QR pattern (simplified) -->
|
|
<rect x="10" y="10" width="30" height="30" fill="black"/>
|
|
<rect x="50" y="10" width="10" height="10" fill="black"/>
|
|
<rect x="70" y="10" width="10" height="10" fill="black"/>
|
|
<rect x="110" y="10" width="30" height="30" fill="black"/>
|
|
|
|
<rect x="10" y="50" width="10" height="10" fill="black"/>
|
|
<rect x="50" y="50" width="10" height="10" fill="black"/>
|
|
<rect x="90" y="50" width="10" height="10" fill="black"/>
|
|
<rect x="110" y="50" width="10" height="10" fill="black"/>
|
|
|
|
<rect x="10" y="70" width="10" height="10" fill="black"/>
|
|
<rect x="30" y="70" width="10" height="10" fill="black"/>
|
|
<rect x="70" y="70" width="10" height="10" fill="black"/>
|
|
<rect x="130" y="70" width="10" height="10" fill="black"/>
|
|
|
|
<rect x="10" y="110" width="30" height="30" fill="black"/>
|
|
<rect x="50" y="110" width="10" height="10" fill="black"/>
|
|
<rect x="90" y="110" width="10" height="10" fill="black"/>
|
|
<rect x="110" y="110" width="30" height="30" fill="black"/>
|
|
|
|
<!-- Corner markers -->
|
|
<rect x="15" y="15" width="20" height="20" fill="white"/>
|
|
<rect x="115" y="15" width="20" height="20" fill="white"/>
|
|
<rect x="15" y="115" width="20" height="20" fill="white"/>
|
|
</g>
|
|
|
|
<text x="400" y="635" fill="#6b7280" font-size="14" text-anchor="middle" font-family="system-ui, sans-serif">Order #1234</text>
|
|
<text x="400" y="655" fill="#6b7280" font-size="14" text-anchor="middle" font-family="system-ui, sans-serif">€125.00</text>
|
|
|
|
<!-- Recent activity -->
|
|
<rect x="620" y="400" width="420" height="270" rx="12" fill="white" stroke="#e5e7eb" stroke-width="1"/>
|
|
<text x="640" y="430" fill="#111827" font-size="18" font-weight="600" font-family="system-ui, sans-serif">Recent Activity</text>
|
|
|
|
<!-- Activity items -->
|
|
<circle cx="660" cy="475" r="8" fill="#00875A"/>
|
|
<text x="685" y="480" fill="#374151" font-size="14" font-family="system-ui, sans-serif">QR code scanned - Order #1245</text>
|
|
<text x="950" y="480" fill="#9ca3af" font-size="12" font-family="system-ui, sans-serif">2m ago</text>
|
|
|
|
<circle cx="660" cy="520" r="8" fill="#0A66C2"/>
|
|
<text x="685" y="525" fill="#374151" font-size="14" font-family="system-ui, sans-serif">New QR generated - Order #1244</text>
|
|
<text x="950" y="525" fill="#9ca3af" font-size="12" font-family="system-ui, sans-serif">5m ago</text>
|
|
|
|
<circle cx="660" cy="565" r="8" fill="#00875A"/>
|
|
<text x="685" y="570" fill="#374151" font-size="14" font-family="system-ui, sans-serif">QR code scanned - Order #1243</text>
|
|
<text x="950" y="570" fill="#9ca3af" font-size="12" font-family="system-ui, sans-serif">12m ago</text>
|
|
|
|
<circle cx="660" cy="610" r="8" fill="#0A66C2"/>
|
|
<text x="685" y="615" fill="#374151" font-size="14" font-family="system-ui, sans-serif">New QR generated - Order #1242</text>
|
|
<text x="950" y="615" fill="#9ca3af" font-size="12" font-family="system-ui, sans-serif">18m ago</text>
|
|
|
|
<!-- Decorative elements -->
|
|
<circle cx="1050" cy="250" r="60" fill="#0A66C2" opacity="0.05"/>
|
|
<circle cx="150" cy="680" r="40" fill="#0A66C2" opacity="0.05"/>
|
|
|
|
<!-- Placeholder text -->
|
|
<text x="600" y="750" fill="#9ca3af" font-size="14" text-anchor="middle" font-family="system-ui, sans-serif">Replace this image: assets/hero.png (or link to ../../client/src/assets/images/hero.png)</text>
|
|
</svg>
|