144 lines
6.5 KiB
XML
144 lines
6.5 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
|
|
<defs>
|
|
<!-- Gradient for the wall background -->
|
|
<linearGradient id="wallGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:1" />
|
|
<stop offset="50%" style="stop-color:#3b82f6;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#1d4ed8;stop-opacity:1" />
|
|
</linearGradient>
|
|
|
|
<!-- Gradient for the screen glow -->
|
|
<radialGradient id="screenGlow" cx="50%" cy="50%" r="60%">
|
|
<stop offset="0%" style="stop-color:#60a5fa;stop-opacity:0.8" />
|
|
<stop offset="70%" style="stop-color:#3b82f6;stop-opacity:0.4" />
|
|
<stop offset="100%" style="stop-color:#1e40af;stop-opacity:0" />
|
|
</radialGradient>
|
|
|
|
<!-- Gradient for the screen -->
|
|
<linearGradient id="screenGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#f8fafc;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#e2e8f0;stop-opacity:1" />
|
|
</linearGradient>
|
|
|
|
<!-- Drop shadow filter -->
|
|
<filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feDropShadow dx="2" dy="4" stdDeviation="3" flood-color="#1e293b" flood-opacity="0.3"/>
|
|
</filter>
|
|
|
|
<!-- Inner shadow for depth -->
|
|
<filter id="innerShadow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feOffset dx="0" dy="2"/>
|
|
<feGaussianBlur stdDeviation="2" result="offset-blur"/>
|
|
<feFlood flood-color="#334155" flood-opacity="0.2"/>
|
|
<feComposite in2="offset-blur" operator="in"/>
|
|
<feMerge>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
<feMergeNode/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Background circle -->
|
|
<circle cx="100" cy="100" r="95" fill="url(#wallGradient)" filter="url(#dropShadow)"/>
|
|
|
|
<!-- Wall texture lines -->
|
|
<g opacity="0.1">
|
|
<line x1="20" y1="40" x2="180" y2="40" stroke="#fff" stroke-width="1"/>
|
|
<line x1="20" y1="80" x2="180" y2="80" stroke="#fff" stroke-width="1"/>
|
|
<line x1="20" y1="120" x2="180" y2="120" stroke="#fff" stroke-width="1"/>
|
|
<line x1="20" y1="160" x2="180" y2="160" stroke="#fff" stroke-width="1"/>
|
|
<line x1="40" y1="20" x2="40" y2="180" stroke="#fff" stroke-width="1"/>
|
|
<line x1="80" y1="20" x2="80" y2="180" stroke="#fff" stroke-width="1"/>
|
|
<line x1="120" y1="20" x2="120" y2="180" stroke="#fff" stroke-width="1"/>
|
|
<line x1="160" y1="20" x2="160" y2="180" stroke="#fff" stroke-width="1"/>
|
|
</g>
|
|
|
|
<!-- Screen glow effect -->
|
|
<ellipse cx="100" cy="85" rx="45" ry="55" fill="url(#screenGlow)" opacity="0.6"/>
|
|
|
|
<!-- Main screen/tablet -->
|
|
<rect x="65" y="35" width="70" height="100" rx="8" ry="8"
|
|
fill="url(#screenGradient)"
|
|
stroke="#cbd5e1"
|
|
stroke-width="2"
|
|
filter="url(#innerShadow)"/>
|
|
|
|
<!-- Screen bezel -->
|
|
<rect x="68" y="38" width="64" height="94" rx="4" ry="4"
|
|
fill="#1e293b"
|
|
opacity="0.9"/>
|
|
|
|
<!-- Active screen content area -->
|
|
<rect x="72" y="45" width="56" height="80" rx="2" ry="2"
|
|
fill="#f1f5f9"/>
|
|
|
|
<!-- Calendar icon representation -->
|
|
<g transform="translate(75, 48)">
|
|
<!-- Calendar header -->
|
|
<rect x="0" y="0" width="20" height="4" rx="1" fill="#3b82f6"/>
|
|
<!-- Calendar body -->
|
|
<rect x="0" y="4" width="20" height="16" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="0.5"/>
|
|
<!-- Calendar grid lines -->
|
|
<line x1="5" y1="4" x2="5" y2="20" stroke="#94a3b8" stroke-width="0.3"/>
|
|
<line x1="10" y1="4" x2="10" y2="20" stroke="#94a3b8" stroke-width="0.3"/>
|
|
<line x1="15" y1="4" x2="15" y2="20" stroke="#94a3b8" stroke-width="0.3"/>
|
|
<line x1="0" y1="8" x2="20" y2="8" stroke="#94a3b8" stroke-width="0.3"/>
|
|
<line x1="0" y1="12" x2="20" y2="12" stroke="#94a3b8" stroke-width="0.3"/>
|
|
<line x1="0" y1="16" x2="20" y2="16" stroke="#94a3b8" stroke-width="0.3"/>
|
|
<!-- Today highlight -->
|
|
<rect x="5" y="8" width="5" height="4" fill="#3b82f6" opacity="0.7"/>
|
|
</g>
|
|
|
|
<!-- Notes icon -->
|
|
<g transform="translate(100, 48)">
|
|
<rect x="0" y="0" width="16" height="20" rx="1" fill="#f8fafc" stroke="#cbd5e1" stroke-width="0.5"/>
|
|
<!-- Note lines -->
|
|
<line x1="2" y1="4" x2="14" y2="4" stroke="#94a3b8" stroke-width="0.4"/>
|
|
<line x1="2" y1="7" x2="12" y2="7" stroke="#94a3b8" stroke-width="0.4"/>
|
|
<line x1="2" y1="10" x2="14" y2="10" stroke="#94a3b8" stroke-width="0.4"/>
|
|
<line x1="2" y1="13" x2="10" y2="13" stroke="#94a3b8" stroke-width="0.4"/>
|
|
</g>
|
|
|
|
<!-- Shopping list icon -->
|
|
<g transform="translate(75, 75)">
|
|
<rect x="0" y="0" width="20" height="24" rx="1" fill="#f8fafc" stroke="#cbd5e1" stroke-width="0.5"/>
|
|
<!-- Shopping list items -->
|
|
<circle cx="3" cy="4" r="1" fill="#10b981"/>
|
|
<line x1="6" y1="4" x2="16" y2="4" stroke="#64748b" stroke-width="0.4"/>
|
|
<circle cx="3" cy="8" r="1" fill="#10b981"/>
|
|
<line x1="6" y1="8" x2="14" y2="8" stroke="#64748b" stroke-width="0.4"/>
|
|
<circle cx="3" cy="12" r="1" fill="#e5e7eb" stroke="#9ca3af" stroke-width="0.4"/>
|
|
<line x1="6" y1="12" x2="15" y2="12" stroke="#9ca3af" stroke-width="0.4"/>
|
|
<circle cx="3" cy="16" r="1" fill="#e5e7eb" stroke="#9ca3af" stroke-width="0.4"/>
|
|
<line x1="6" y1="16" x2="12" y2="16" stroke="#9ca3af" stroke-width="0.4"/>
|
|
</g>
|
|
|
|
<!-- Smart home connectivity dots -->
|
|
<g transform="translate(100, 75)">
|
|
<!-- WiFi/connectivity symbol -->
|
|
<circle cx="8" cy="12" r="1.5" fill="#10b981" opacity="0.8"/>
|
|
<circle cx="14" cy="8" r="1" fill="#3b82f6" opacity="0.6"/>
|
|
<circle cx="12" cy="16" r="0.8" fill="#8b5cf6" opacity="0.7"/>
|
|
<circle cx="18" cy="12" r="1.2" fill="#f59e0b" opacity="0.6"/>
|
|
|
|
<!-- Connection lines -->
|
|
<line x1="8" y1="12" x2="14" y2="8" stroke="#10b981" stroke-width="0.5" opacity="0.4"/>
|
|
<line x1="8" y1="12" x2="12" y2="16" stroke="#10b981" stroke-width="0.5" opacity="0.4"/>
|
|
<line x1="14" y1="8" x2="18" y2="12" stroke="#3b82f6" stroke-width="0.5" opacity="0.4"/>
|
|
</g>
|
|
|
|
<!-- Home base indicator -->
|
|
<g transform="translate(100, 145)">
|
|
<!-- Simple house shape -->
|
|
<polygon points="0,8 8,0 16,8 16,16 0,16" fill="#64748b" opacity="0.7"/>
|
|
<rect x="6" y="10" width="4" height="6" fill="#475569"/>
|
|
<rect x="2" y="8" width="3" height="3" fill="#1e293b" opacity="0.6"/>
|
|
<rect x="11" y="8" width="3" height="3" fill="#1e293b" opacity="0.6"/>
|
|
</g>
|
|
|
|
<!-- Power/status indicator -->
|
|
<circle cx="100" cy="170" r="3" fill="#10b981" opacity="0.8">
|
|
<animate attributeName="opacity" values="0.4;0.8;0.4" dur="2s" repeatCount="indefinite"/>
|
|
</circle>
|
|
</svg>
|
