Giovanni Harting
f60c866174
- White background with dark slate devices (#1e293b) - Cyan signal bars (#0ea5e9) - Simplified clean design: phone → signal → laptop
66 lines
2.7 KiB
XML
66 lines
2.7 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 500">
|
|
<rect width="1024" height="500" fill="#ffffff"/>
|
|
|
|
<!-- Subtle grid -->
|
|
<g stroke="#e2e8f0" stroke-width="1">
|
|
<line x1="0" y1="125" x2="1024" y2="125"/>
|
|
<line x1="0" y1="250" x2="1024" y2="250"/>
|
|
<line x1="0" y1="375" x2="1024" y2="375"/>
|
|
</g>
|
|
|
|
<!-- Phone - left -->
|
|
<g transform="translate(100, 160)">
|
|
<rect width="70" height="130" rx="12" fill="#1e293b"/>
|
|
<rect x="6" y="10" width="58" height="95" rx="4" fill="#ffffff"/>
|
|
<rect x="22" y="112" width="26" height="5" rx="2" fill="#ffffff"/>
|
|
</g>
|
|
|
|
<!-- Signal bars -->
|
|
<g fill="#0ea5e9" transform="translate(200, 200)">
|
|
<rect x="0" y="55" width="16" height="35" rx="3"/>
|
|
<rect x="24" y="38" width="16" height="52" rx="3"/>
|
|
<rect x="48" y="18" width="16" height="72" rx="3"/>
|
|
</g>
|
|
|
|
<!-- Laptop - center-left -->
|
|
<g transform="translate(290, 190)">
|
|
<rect width="100" height="70" rx="8" fill="#1e293b"/>
|
|
<rect x="6" y="6" width="88" height="52" rx="3" fill="#ffffff"/>
|
|
<rect x="-8" y="72" width="116" height="10" rx="3" fill="#1e293b"/>
|
|
</g>
|
|
|
|
<!-- App name -->
|
|
<text x="480" y="220" font-family="system-ui, -apple-system, sans-serif" font-size="56" font-weight="700" fill="#1e293b">Tether API</text>
|
|
|
|
<!-- Tagline -->
|
|
<text x="480" y="270" font-family="system-ui, -apple-system, sans-serif" font-size="22" fill="#64748b">Phone status on your desktop</text>
|
|
|
|
<!-- Feature chips -->
|
|
<g font-family="system-ui, sans-serif" font-size="14" fill="#1e293b">
|
|
<g transform="translate(480, 310)">
|
|
<rect width="110" height="32" rx="16" fill="#f1f5f9" stroke="#e2e8f0"/>
|
|
<text x="55" y="21" text-anchor="middle">5G / LTE / WiFi</text>
|
|
</g>
|
|
<g transform="translate(600, 310)">
|
|
<rect width="85" height="32" rx="16" fill="#f1f5f9" stroke="#e2e8f0"/>
|
|
<text x="42" y="21" text-anchor="middle">REST API</text>
|
|
</g>
|
|
<g transform="translate(695, 310)">
|
|
<rect width="75" height="32" rx="16" fill="#f1f5f9" stroke="#e2e8f0"/>
|
|
<text x="37" y="21" text-anchor="middle">Waybar</text>
|
|
</g>
|
|
<g transform="translate(780, 310)">
|
|
<rect width="95" height="32" rx="16" fill="#f1f5f9" stroke="#e2e8f0"/>
|
|
<text x="47" y="21" text-anchor="middle">Auto-start</text>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Code snippet -->
|
|
<g transform="translate(480, 370)">
|
|
<rect width="420" height="80" rx="8" fill="#1e293b"/>
|
|
<text x="16" y="28" font-family="monospace" font-size="13" fill="#0ea5e9">$ curl http://phone:8765/status</text>
|
|
<text x="16" y="50" font-family="monospace" font-size="12" fill="#94a3b8">{"type":"LTE","signal":3,"battery":87}</text>
|
|
<text x="16" y="68" font-family="monospace" font-size="12" fill="#22c55e">200 OK</text>
|
|
</g>
|
|
</svg>
|