112 lines
7.2 KiB
XML
112 lines
7.2 KiB
XML
|
<svg width="800" height="500" viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="headerGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
|
|
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="cardGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#f8f9ff;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#ffffff;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||
|
|
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000000" flood-opacity="0.1"/>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<!-- Main Background -->
|
||
|
|
<rect width="800" height="500" fill="#f5f7fa" rx="12"/>
|
||
|
|
|
||
|
|
<!-- Header Bar -->
|
||
|
|
<rect x="0" y="0" width="800" height="60" fill="url(#headerGrad)" rx="12"/>
|
||
|
|
<rect x="0" y="48" width="800" height="12" fill="url(#headerGrad)"/>
|
||
|
|
|
||
|
|
<!-- Header Content -->
|
||
|
|
<text x="24" y="32" font-family="Inter, -apple-system, sans-serif" font-size="20" font-weight="700" fill="white">Property Investment Dashboard</text>
|
||
|
|
<text x="24" y="48" font-family="Inter, -apple-system, sans-serif" font-size="12" font-weight="400" fill="rgba(255,255,255,0.8)">Real-time market intelligence & investment opportunities</text>
|
||
|
|
|
||
|
|
<!-- Status Indicator -->
|
||
|
|
<circle cx="720" cy="25" r="6" fill="#00ff88"/>
|
||
|
|
<text x="735" y="30" font-family="Inter, -apple-system, sans-serif" font-size="12" font-weight="600" fill="white">LIVE</text>
|
||
|
|
|
||
|
|
<!-- Refresh Icon -->
|
||
|
|
<circle cx="760" cy="25" r="12" fill="rgba(255,255,255,0.2)" stroke="rgba(255,255,255,0.3)" stroke-width="1"/>
|
||
|
|
<path d="M 755 20 A 5 5 0 1 1 765 20 M 765 18 L 767 20 L 765 22" stroke="white" stroke-width="1.5" fill="none"/>
|
||
|
|
|
||
|
|
<!-- Market Overview Section -->
|
||
|
|
<rect x="20" y="80" width="360" height="180" fill="white" stroke="#e2e8f0" stroke-width="1" rx="8" filter="url(#shadow)"/>
|
||
|
|
<rect x="20" y="80" width="360" height="40" fill="url(#cardGrad)" rx="8"/>
|
||
|
|
<rect x="20" y="112" width="360" height="8" fill="url(#cardGrad)"/>
|
||
|
|
|
||
|
|
<text x="32" y="100" font-family="Inter, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#1e293b">London Investment Hotspots</text>
|
||
|
|
<text x="32" y="115" font-family="Inter, -apple-system, sans-serif" font-size="11" fill="#64748b">Price growth & opportunity analysis</text>
|
||
|
|
|
||
|
|
<!-- Map Area -->
|
||
|
|
<rect x="32" y="130" width="200" height="120" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1" rx="4"/>
|
||
|
|
|
||
|
|
<!-- Simplified London Map -->
|
||
|
|
<path d="M 80 160 Q 100 150 120 155 Q 140 160 160 155 Q 180 150 200 160 Q 210 180 200 200 Q 180 210 160 205 Q 140 200 120 205 Q 100 210 80 200 Q 70 180 80 160 Z"
|
||
|
|
fill="#ddd6fe" stroke="#8b5cf6" stroke-width="1"/>
|
||
|
|
|
||
|
|
<!-- Location Markers -->
|
||
|
|
<circle cx="120" cy="175" r="8" fill="#ef4444"/>
|
||
|
|
<text x="116" y="180" font-family="Inter, -apple-system, sans-serif" font-size="10" font-weight="700" fill="white">1</text>
|
||
|
|
|
||
|
|
<circle cx="160" cy="185" r="6" fill="#f59e0b"/>
|
||
|
|
<text x="157" y="189" font-family="Inter, -apple-system, sans-serif" font-size="9" font-weight="700" fill="white">2</text>
|
||
|
|
|
||
|
|
<circle cx="140" cy="200" r="5" fill="#10b981"/>
|
||
|
|
<text x="138" y="204" font-family="Inter, -apple-system, sans-serif" font-size="8" font-weight="700" fill="white">3</text>
|
||
|
|
|
||
|
|
<!-- Legend -->
|
||
|
|
<rect x="250" y="140" width="120" height="90" fill="#fafbfc" stroke="#e2e8f0" stroke-width="1" rx="4"/>
|
||
|
|
<text x="260" y="155" font-family="Inter, -apple-system, sans-serif" font-size="12" font-weight="600" fill="#334155">Growth Zones</text>
|
||
|
|
|
||
|
|
<circle cx="265" cy="170" r="4" fill="#ef4444"/>
|
||
|
|
<text x="275" y="174" font-family="Inter, -apple-system, sans-serif" font-size="10" fill="#475569">High (>15%)</text>
|
||
|
|
|
||
|
|
<circle cx="265" cy="185" r="4" fill="#f59e0b"/>
|
||
|
|
<text x="275" y="189" font-family="Inter, -apple-system, sans-serif" font-size="10" fill="#475569">Medium (8-15%)</text>
|
||
|
|
|
||
|
|
<circle cx="265" cy="200" r="4" fill="#10b981"/>
|
||
|
|
<text x="275" y="204" font-family="Inter, -apple-system, sans-serif" font-size="10" fill="#475569">Emerging (<8%)</text>
|
||
|
|
|
||
|
|
<text x="260" y="220" font-family="Inter, -apple-system, sans-serif" font-size="9" font-weight="500" fill="#10b981">📈 156 opportunities</text>
|
||
|
|
|
||
|
|
<!-- Top Opportunities Section -->
|
||
|
|
<rect x="400" y="80" width="380" height="180" fill="white" stroke="#e2e8f0" stroke-width="1" rx="8" filter="url(#shadow)"/>
|
||
|
|
<rect x="400" y="80" width="380" height="40" fill="url(#cardGrad)" rx="8"/>
|
||
|
|
<rect x="400" y="112" width="380" height="8" fill="url(#cardGrad)"/>
|
||
|
|
|
||
|
|
<text x="412" y="100" font-family="Inter, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#1e293b">Investment Opportunities</text>
|
||
|
|
<text x="412" y="115" font-family="Inter, -apple-system, sans-serif" font-size="11" fill="#64748b">AI-ranked by potential ROI</text>
|
||
|
|
|
||
|
|
<!-- Property Cards -->
|
||
|
|
<rect x="412" y="130" width="175" height="55" fill="#fefefe" stroke="#667eea" stroke-width="1" rx="6"/>
|
||
|
|
<rect x="412" y="130" width="175" height="20" fill="url(#headerGrad)" rx="6"/>
|
||
|
|
<rect x="412" y="144" width="175" height="6" fill="url(#headerGrad)"/>
|
||
|
|
|
||
|
|
<text x="420" y="143" font-family="Inter, -apple-system, sans-serif" font-size="11" font-weight="600" fill="white">3 Bed House • SE1 4AA</text>
|
||
|
|
<text x="420" y="165" font-family="Inter, -apple-system, sans-serif" font-size="13" font-weight="700" fill="#1e293b">£485,000</text>
|
||
|
|
<text x="420" y="178" font-family="Inter, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#059669">ROI: 12.3% • Score: 9.2/10</text>
|
||
|
|
|
||
|
|
<rect x="595" y="130" width="175" height="55" fill="#fefefe" stroke="#667eea" stroke-width="1" rx="6"/>
|
||
|
|
<rect x="595" y="130" width="175" height="20" fill="url(#headerGrad)" rx="6"/>
|
||
|
|
<rect x="595" y="144" width="175" height="6" fill="url(#headerGrad)"/>
|
||
|
|
|
||
|
|
<text x="603" y="143" font-family="Inter, -apple-system, sans-serif" font-size="11" font-weight="600" fill="white">2 Bed Flat • E14 9SN</text>
|
||
|
|
<text x="603" y="165" font-family="Inter, -apple-system, sans-serif" font-size="13" font-weight="700" fill="#1e293b">£325,000</text>
|
||
|
|
<text x="603" y="178" font-family="Inter, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#059669">ROI: 11.8% • Score: 8.9/10</text>
|
||
|
|
|
||
|
|
<rect x="412" y="195" width="175" height="55" fill="#fefefe" stroke="#667eea" stroke-width="1" rx="6"/>
|
||
|
|
<rect x="412" y="195" width="175" height="20" fill="url(#headerGrad)" rx="6"/>
|
||
|
|
<rect x="412" y="209" width="175" height="6" fill="url(#headerGrad)"/>
|
||
|
|
|
||
|
|
<text x="420" y="208" font-family="Inter, -apple-system, sans-serif" font-size="11" font-weight="600" fill="white">1 Bed Flat • SW3 6LB</text>
|
||
|
|
<text x="420" y="230" font-family="Inter, -apple-system, sans-serif" font-size="13" font-weight="700" fill="#1e293b">£625,000</text>
|
||
|
|
<text x="420" y="243" font-family="Inter, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#059669">ROI: 9.2% • Score: 8.1/10</text>
|
||
|
|
|
||
|
|
<rect x="595" y="195" width="175" height="55" fill="#fefefe" stroke="#667eea" stroke-width="1" rx="6"/>
|
||
|
|
<rect x="595" y="195" width="175" height="20" fill="url(#headerGrad)" rx="6"/>
|
||
|
|
<rect x="595" y="209" width="175" height="6" fill="url(#headerGrad)"/>
|
||
|
|
|
||
|
|
<text x="603" y="208" font-family="Inter, -apple-
|