52 lines
2.7 KiB
XML
52 lines
2.7 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="420" height="780" viewBox="0 0 420 780" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif">
|
|
<defs>
|
|
<linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stop-color="#0d0f24"/>
|
|
<stop offset="1" stop-color="#1c1140"/>
|
|
</linearGradient>
|
|
<linearGradient id="titleGrad" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0" stop-color="#22d3ee"/>
|
|
<stop offset="1" stop-color="#f472b6"/>
|
|
</linearGradient>
|
|
<filter id="blob" x="-80%" y="-80%" width="260%" height="260%">
|
|
<feGaussianBlur stdDeviation="55"/>
|
|
</filter>
|
|
<filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
|
|
<feGaussianBlur stdDeviation="5" result="blur"/>
|
|
<feMerge>
|
|
<feMergeNode in="blur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<rect width="420" height="780" fill="url(#bgGrad)"/>
|
|
<circle cx="70" cy="170" r="130" fill="#22d3ee" opacity="0.22" filter="url(#blob)"/>
|
|
<circle cx="350" cy="580" r="150" fill="#f472b6" opacity="0.18" filter="url(#blob)"/>
|
|
|
|
<!-- header -->
|
|
<text x="210" y="120" text-anchor="middle" font-size="28" font-weight="800" fill="url(#titleGrad)">Invite a friend</text>
|
|
<text x="210" y="152" text-anchor="middle" font-size="14" fill="#ffffff" opacity="0.5">Share this link to start playing</text>
|
|
|
|
<!-- link card -->
|
|
<rect x="50" y="200" width="320" height="70" rx="16" fill="#ffffff" fill-opacity="0.06" stroke="#ffffff" stroke-opacity="0.16"/>
|
|
<text x="210" y="232" text-anchor="middle" font-size="14" fill="#22d3ee" font-family="monospace">https://game1.app/?token=a3f9c21b7e4d08f5</text>
|
|
<text x="210" y="254" text-anchor="middle" font-size="11" fill="#ffffff" opacity="0.4">Your invite link</text>
|
|
|
|
<!-- copy button -->
|
|
<rect x="110" y="300" width="200" height="50" rx="25" fill="url(#titleGrad)"/>
|
|
<text x="210" y="331" text-anchor="middle" font-size="15" font-weight="700" fill="#0d1025">Copy link</text>
|
|
|
|
<!-- waiting indicator -->
|
|
<g>
|
|
<circle cx="185" cy="430" r="8" fill="#22d3ee" filter="url(#glow)" opacity="0.9"/>
|
|
<circle cx="210" cy="430" r="8" fill="#22d3ee" filter="url(#glow)" opacity="0.55"/>
|
|
<circle cx="235" cy="430" r="8" fill="#22d3ee" filter="url(#glow)" opacity="0.3"/>
|
|
</g>
|
|
<text x="210" y="472" text-anchor="middle" font-size="15" fill="#ffffff" opacity="0.65">Waiting for opponent to join...</text>
|
|
|
|
<!-- back button -->
|
|
<rect x="130" y="640" width="160" height="48" rx="24" fill="#ffffff" fill-opacity="0.05" stroke="#ffffff" stroke-opacity="0.18"/>
|
|
<text x="210" y="670" text-anchor="middle" font-size="14" font-weight="600" fill="#ffffff" opacity="0.7">Back to menu</text>
|
|
</svg>
|