148 lines
6.5 KiB
XML
148 lines
6.5 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 800">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="phoneBg" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
|
|
<stop offset="0%" stop-color="#1a1a2e"/>
|
||
|
|
<stop offset="100%" stop-color="#16213e"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="screenBg" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
|
|
<stop offset="0%" stop-color="#0f0f23"/>
|
||
|
|
<stop offset="100%" stop-color="#1a1a3e"/>
|
||
|
|
</linearGradient>
|
||
|
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||
|
|
<feDropShadow dx="0" dy="20" stdDeviation="30" flood-color="#000" flood-opacity="0.4"/>
|
||
|
|
</filter>
|
||
|
|
<filter id="glow">
|
||
|
|
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="blur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<!-- Phone Frame -->
|
||
|
|
<rect x="20" y="20" width="360" height="760" rx="55" fill="url(#phoneBg)" filter="url(#shadow)" stroke="#2a2a4e" stroke-width="3"/>
|
||
|
|
|
||
|
|
<!-- Screen -->
|
||
|
|
<rect x="32" y="32" width="336" height="736" rx="45" fill="url(#screenBg)"/>
|
||
|
|
|
||
|
|
<!-- Dynamic Island -->
|
||
|
|
<rect x="140" y="42" width="120" height="35" rx="17.5" fill="#000"/>
|
||
|
|
<circle cx="200" cy="59.5" r="8" fill="#1a1a3e"/>
|
||
|
|
<circle cx="200" cy="59.5" r="5" fill="#0f3460"/>
|
||
|
|
|
||
|
|
<!-- Status Bar -->
|
||
|
|
<text x="55" y="65" fill="#fff" font-family="-apple-system, sans-serif" font-size="16" font-weight="600">9:41</text>
|
||
|
|
<g transform="translate(300, 52)">
|
||
|
|
<path d="M0,8 L0,4 M4,8 L4,2 M8,8 L8,0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
|
||
|
|
<rect x="12" y="2" width="18" height="10" rx="2.5" fill="none" stroke="#fff" stroke-width="1.5"/>
|
||
|
|
<rect x="14" y="4" width="14" height="6" rx="1.5" fill="#fff"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Map Background -->
|
||
|
|
<rect x="32" y="90" width="336" height="400" fill="#0d1f3c"/>
|
||
|
|
|
||
|
|
<!-- Map Grid Lines -->
|
||
|
|
<g stroke="#1a3a5c" stroke-width="0.5" opacity="0.5">
|
||
|
|
<line x1="32" y1="150" x2="368" y2="150"/>
|
||
|
|
<line x1="32" y1="210" x2="368" y2="210"/>
|
||
|
|
<line x1="32" y1="270" x2="368" y2="270"/>
|
||
|
|
<line x1="32" y1="330" x2="368" y2="330"/>
|
||
|
|
<line x1="32" y1="390" x2="368" y2="390"/>
|
||
|
|
<line x1="32" y1="450" x2="368" y2="450"/>
|
||
|
|
<line x1="100" y1="90" x2="100" y2="490"/>
|
||
|
|
<line x1="168" y1="90" x2="168" y2="490"/>
|
||
|
|
<line x1="236" y1="90" x2="236" y2="490"/>
|
||
|
|
<line x1="304" y1="90" x2="304" y2="490"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Map Streets -->
|
||
|
|
<g stroke="#2a4a7c" stroke-width="2" fill="none" opacity="0.6">
|
||
|
|
<path d="M32,200 Q100,180 168,220 T300,200"/>
|
||
|
|
<path d="M32,300 Q100,280 168,320 T368,300"/>
|
||
|
|
<path d="M100,90 Q120,200 100,490"/>
|
||
|
|
<path d="M236,90 Q220,200 236,490"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- User Location -->
|
||
|
|
<g transform="translate(168, 280)">
|
||
|
|
<circle cx="0" cy="0" r="20" fill="rgba(0,102,255,0.2)" filter="url(#glow)"/>
|
||
|
|
<circle cx="0" cy="0" r="12" fill="rgba(0,102,255,0.3)"/>
|
||
|
|
<circle cx="0" cy="0" r="6" fill="#0066FF" stroke="#fff" stroke-width="2"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Mission Pins -->
|
||
|
|
<g transform="translate(120, 180)">
|
||
|
|
<path d="M0,-20 C-11,-20 -20,-11 -20,0 C-20,14 0,32 0,32 C0,32 20,14 20,0 C20,-11 11,-20 0,-20 Z" fill="#00D4AA" filter="url(#glow)"/>
|
||
|
|
<circle cx="0" cy="0" r="6" fill="#fff"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(260, 240)">
|
||
|
|
<path d="M0,-20 C-11,-20 -20,-11 -20,0 C-20,14 0,32 0,32 C0,32 20,14 20,0 C20,-11 11,-20 0,-20 Z" fill="#FF9500" filter="url(#glow)"/>
|
||
|
|
<circle cx="0" cy="0" r="6" fill="#fff"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(200, 360)">
|
||
|
|
<path d="M0,-20 C-11,-20 -20,-11 -20,0 C-20,14 0,32 0,32 C0,32 20,14 20,0 C20,-11 11,-20 0,-20 Z" fill="#00D4AA" filter="url(#glow)"/>
|
||
|
|
<circle cx="0" cy="0" r="6" fill="#fff"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Bottom Sheet -->
|
||
|
|
<rect x="32" y="520" width="336" height="248" rx="24" fill="#fff"/>
|
||
|
|
<rect x="160" y="532" width="80" height="5" rx="2.5" fill="#E5E5EA"/>
|
||
|
|
|
||
|
|
<!-- Mission Card -->
|
||
|
|
<g transform="translate(52, 555)">
|
||
|
|
<rect x="0" y="0" width="296" height="120" rx="16" fill="#F5F5F7" stroke="#E5E5EA" stroke-width="1"/>
|
||
|
|
|
||
|
|
<!-- Mission Type Badge -->
|
||
|
|
<rect x="16" y="16" width="80" height="24" rx="12" fill="#0066FF"/>
|
||
|
|
<text x="56" y="32" fill="#fff" font-family="-apple-system, sans-serif" font-size="11" font-weight="700" text-anchor="middle">FACADE</text>
|
||
|
|
|
||
|
|
<!-- Price -->
|
||
|
|
<text x="270" y="36" fill="#0066FF" font-family="-apple-system, sans-serif" font-size="24" font-weight="800" text-anchor="end">€5</text>
|
||
|
|
|
||
|
|
<!-- Title -->
|
||
|
|
<text x="16" y="60" fill="#000" font-family="-apple-system, sans-serif" font-size="18" font-weight="700">Facade Inventory</text>
|
||
|
|
|
||
|
|
<!-- Address -->
|
||
|
|
<text x="16" y="82" fill="#8E8E93" font-family="-apple-system, sans-serif" font-size="14">Main Street 14, Stockholm</text>
|
||
|
|
|
||
|
|
<!-- Details -->
|
||
|
|
<g transform="translate(16, 95)">
|
||
|
|
<circle cx="6" cy="6" r="4" fill="#00D4AA"/>
|
||
|
|
<text x="18" y="10" fill="#8E8E93" font-family="-apple-system, sans-serif" font-size="12">3 photos · ~12 min</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Claim Button -->
|
||
|
|
<rect x="200" y="80" width="80" height="32" rx="16" fill="#0066FF"/>
|
||
|
|
<text x="240" y="100" fill="#fff" font-family="-apple-system, sans-serif" font-size="14" font-weight="700" text-anchor="middle">Claim</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Tab Bar -->
|
||
|
|
<rect x="32" y="708" width="336" height="60" rx="0" fill="#fff"/>
|
||
|
|
<line x1="32" y1="708" x2="368" y2="708" stroke="#E5E5EA" stroke-width="1"/>
|
||
|
|
|
||
|
|
<g transform="translate(70, 725)">
|
||
|
|
<rect x="0" y="0" width="24" height="24" rx="6" fill="#0066FF"/>
|
||
|
|
<text x="12" y="40" fill="#0066FF" font-family="-apple-system, sans-serif" font-size="10" font-weight="600" text-anchor="middle">Map</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(150, 725)">
|
||
|
|
<rect x="0" y="0" width="24" height="24" rx="6" fill="#E5E5EA"/>
|
||
|
|
<text x="12" y="40" fill="#8E8E93" font-family="-apple-system, sans-serif" font-size="10" font-weight="600" text-anchor="middle">Missions</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(230, 725)">
|
||
|
|
<rect x="0" y="0" width="24" height="24" rx="6" fill="#E5E5EA"/>
|
||
|
|
<text x="12" y="40" fill="#8E8E93" font-family="-apple-system, sans-serif" font-size="10" font-weight="600" text-anchor="middle">Wallet</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(310, 725)">
|
||
|
|
<rect x="0" y="0" width="24" height="24" rx="6" fill="#E5E5EA"/>
|
||
|
|
<text x="12" y="40" fill="#8E8E93" font-family="-apple-system, sans-serif" font-size="10" font-weight="600" text-anchor="middle">Profile</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Home Indicator -->
|
||
|
|
<rect x="140" y="780" width="120" height="5" rx="2.5" fill="#000"/>
|
||
|
|
</svg>
|