99 lines
5.6 KiB
Plaintext
99 lines
5.6 KiB
Plaintext
<svg width="1200" height="700" viewBox="0 0 1200 700" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Background -->
|
|
<rect width="1200" height="700" fill="#f9fafb"/>
|
|
|
|
<!-- Browser window mockup -->
|
|
<rect x="100" y="80" width="1000" height="540" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
|
|
|
|
<!-- Browser header -->
|
|
<rect x="100" y="80" width="1000" height="40" rx="12" fill="#f3f4f6"/>
|
|
<circle cx="125" cy="100" r="6" fill="#ef4444"/>
|
|
<circle cx="145" cy="100" r="6" fill="#fbbf24"/>
|
|
<circle cx="165" cy="100" r="6" fill="#10b981"/>
|
|
|
|
<!-- Address bar -->
|
|
<rect x="200" y="90" width="600" height="20" rx="10" fill="#e5e7eb"/>
|
|
<text x="220" y="104" fill="#9ca3af" font-size="12" font-family="system-ui, sans-serif">yourstore.myshopify.com/thank-you</text>
|
|
|
|
<!-- Thank you page content -->
|
|
<text x="350" y="170" fill="#111827" font-size="32" font-weight="bold" font-family="system-ui, sans-serif">Thank you for your order!</text>
|
|
|
|
<!-- Order confirmation -->
|
|
<rect x="250" y="200" width="700" height="80" rx="8" fill="#ecfdf5" stroke="#10b981" stroke-width="1"/>
|
|
<circle cx="280" cy="240" r="20" fill="#10b981"/>
|
|
<path d="M273 240 L278 245 L288 235" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<text x="315" y="235" fill="#065f46" font-size="18" font-weight="600" font-family="system-ui, sans-serif">Order #1234 confirmed</text>
|
|
<text x="315" y="255" fill="#065f46" font-size="14" font-family="system-ui, sans-serif">We've sent a confirmation email to customer@example.com</text>
|
|
|
|
<!-- SEPA Payment section (highlight) -->
|
|
<rect x="250" y="310" width="700" height="280" rx="12" fill="white" stroke="#0A66C2" stroke-width="2"/>
|
|
|
|
<!-- Header -->
|
|
<rect x="250" y="310" width="700" height="50" rx="12" fill="#e6f1ff"/>
|
|
<text x="280" y="342" fill="#0A66C2" font-size="18" font-weight="bold" font-family="system-ui, sans-serif">Complete Your Payment via Bank Transfer</text>
|
|
|
|
<!-- Content area -->
|
|
<text x="280" y="385" fill="#374151" font-size="14" font-family="system-ui, sans-serif">Scan this QR code with your banking app to complete the payment:</text>
|
|
|
|
<!-- QR Code -->
|
|
<rect x="300" y="405" width="180" height="180" rx="8" fill="white" stroke="#e5e7eb" stroke-width="1"/>
|
|
<g transform="translate(320, 425)">
|
|
<rect width="140" height="140" fill="white"/>
|
|
<!-- Simplified QR pattern -->
|
|
<rect x="5" y="5" width="25" height="25" fill="black"/>
|
|
<rect x="40" y="5" width="8" height="8" fill="black"/>
|
|
<rect x="55" y="5" width="8" height="8" fill="black"/>
|
|
<rect x="110" y="5" width="25" height="25" fill="black"/>
|
|
|
|
<rect x="5" y="40" width="8" height="8" fill="black"/>
|
|
<rect x="40" y="40" width="8" height="8" fill="black"/>
|
|
<rect x="70" y="40" width="8" height="8" fill="black"/>
|
|
<rect x="110" y="40" width="8" height="8" fill="black"/>
|
|
|
|
<rect x="5" y="55" width="8" height="8" fill="black"/>
|
|
<rect x="25" y="55" width="8" height="8" fill="black"/>
|
|
<rect x="55" y="55" width="8" height="8" fill="black"/>
|
|
<rect x="130" y="55" width="8" height="8" fill="black"/>
|
|
|
|
<rect x="40" y="70" width="8" height="8" fill="black"/>
|
|
<rect x="70" y="70" width="8" height="8" fill="black"/>
|
|
<rect x="100" y="70" width="8" height="8" fill="black"/>
|
|
|
|
<rect x="5" y="110" width="25" height="25" fill="black"/>
|
|
<rect x="40" y="110" width="8" height="8" fill="black"/>
|
|
<rect x="70" y="110" width="8" height="8" fill="black"/>
|
|
<rect x="110" y="110" width="25" height="25" fill="black"/>
|
|
|
|
<!-- Corner markers -->
|
|
<rect x="10" y="10" width="15" height="15" fill="white"/>
|
|
<rect x="115" y="10" width="15" height="15" fill="white"/>
|
|
<rect x="10" y="115" width="15" height="15" fill="white"/>
|
|
</g>
|
|
|
|
<!-- Payment details -->
|
|
<rect x="510" y="405" width="410" height="180" rx="8" fill="#f9fafb"/>
|
|
|
|
<text x="530" y="430" fill="#6b7280" font-size="12" font-weight="600" font-family="system-ui, sans-serif">PAYMENT DETAILS</text>
|
|
|
|
<text x="530" y="455" fill="#374151" font-size="14" font-weight="600" font-family="system-ui, sans-serif">Amount:</text>
|
|
<text x="850" y="455" fill="#374151" font-size="14" font-family="system-ui, sans-serif">€125.00</text>
|
|
|
|
<text x="530" y="480" fill="#374151" font-size="14" font-weight="600" font-family="system-ui, sans-serif">IBAN:</text>
|
|
<text x="650" y="480" fill="#374151" font-size="14" font-family="Courier New, monospace">DE89 3704 0044 0532 0130 00</text>
|
|
|
|
<text x="530" y="505" fill="#374151" font-size="14" font-weight="600" font-family="system-ui, sans-serif">Recipient:</text>
|
|
<text x="850" y="505" fill="#374151" font-size="14" font-family="system-ui, sans-serif">Your Store</text>
|
|
|
|
<text x="530" y="530" fill="#374151" font-size="14" font-weight="600" font-family="system-ui, sans-serif">Reference:</text>
|
|
<text x="850" y="530" fill="#374151" font-size="14" font-family="Courier New, monospace">ORDER-1234</text>
|
|
|
|
<text x="530" y="560" fill="#6b7280" font-size="12" font-style="italic" font-family="system-ui, sans-serif">Please include the reference in your transfer</text>
|
|
|
|
<!-- Info banner -->
|
|
<rect x="280" y="600" width="640" height="50" rx="6" fill="#fef3c7" stroke="#f59e0b" stroke-width="1" opacity="0.8"/>
|
|
<text x="300" y="630" fill="#92400e" font-size="13" font-family="system-ui, sans-serif">💡 Your order will be processed once we receive your payment (usually 1-2 business days)</text>
|
|
|
|
<!-- Placeholder text -->
|
|
<text x="600" y="680" fill="#9ca3af" font-size="12" text-anchor="middle" font-family="system-ui, sans-serif">Replace: assets/checkout.png</text>
|
|
</svg>
|