Update icon and feature graphic to white minimal theme
- White background with dark slate devices (#1e293b) - Cyan signal bars (#0ea5e9) - Simplified clean design: phone → signal → laptop
This commit is contained in:
@@ -1,131 +1,65 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 500">
|
||||
<defs>
|
||||
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#1e293b"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="1024" height="500" fill="#ffffff"/>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1024" height="500" fill="url(#bgGrad)"/>
|
||||
|
||||
<!-- Grid pattern -->
|
||||
<g stroke="#334155" stroke-width="1" opacity="0.3">
|
||||
<line x1="0" y1="100" x2="1024" y2="100"/>
|
||||
<line x1="0" y1="200" x2="1024" y2="200"/>
|
||||
<line x1="0" y1="300" x2="1024" y2="300"/>
|
||||
<line x1="0" y1="400" x2="1024" y2="400"/>
|
||||
<line x1="200" y1="0" x2="200" y2="500"/>
|
||||
<line x1="400" y1="0" x2="400" y2="500"/>
|
||||
<line x1="600" y1="0" x2="600" y2="500"/>
|
||||
<line x1="800" y1="0" x2="800" y2="500"/>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Left side network visualization -->
|
||||
<g transform="translate(120, 250)">
|
||||
<!-- Connection lines -->
|
||||
<g stroke="#0ea5e9" stroke-width="3" opacity="0.6">
|
||||
<line x1="0" y1="0" x2="-60" y2="-80"/>
|
||||
<line x1="0" y1="0" x2="-80" y2="0"/>
|
||||
<line x1="0" y1="0" x2="-60" y2="80"/>
|
||||
<line x1="0" y1="0" x2="80" y2="0"/>
|
||||
</g>
|
||||
|
||||
<!-- Data pulses -->
|
||||
<g fill="#22d3ee">
|
||||
<circle cx="-30" cy="-40" r="3"/>
|
||||
<circle cx="-40" cy="0" r="3"/>
|
||||
<circle cx="-30" cy="40" r="3"/>
|
||||
<circle cx="40" cy="0" r="3"/>
|
||||
</g>
|
||||
|
||||
<!-- Outer nodes -->
|
||||
<g fill="#0f172a" stroke="#0ea5e9" stroke-width="2">
|
||||
<circle cx="-60" cy="-80" r="16"/>
|
||||
<circle cx="-80" cy="0" r="16"/>
|
||||
<circle cx="-60" cy="80" r="16"/>
|
||||
</g>
|
||||
<g fill="#22d3ee">
|
||||
<circle cx="-60" cy="-80" r="6"/>
|
||||
<circle cx="-80" cy="0" r="6"/>
|
||||
<circle cx="-60" cy="80" r="6"/>
|
||||
</g>
|
||||
|
||||
<!-- Center hub -->
|
||||
<circle cx="0" cy="0" r="36" fill="#0f172a" stroke="#0ea5e9" stroke-width="3"/>
|
||||
<circle cx="0" cy="0" r="26" fill="#0ea5e9"/>
|
||||
|
||||
<!-- Signal bars -->
|
||||
<g fill="#0f172a">
|
||||
<rect x="-14" y="4" width="6" height="12" rx="1"/>
|
||||
<rect x="-5" cy="0" y="-2" width="6" height="18" rx="1"/>
|
||||
<rect x="4" y="-8" width="6" height="24" rx="1"/>
|
||||
</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>
|
||||
|
||||
<!-- Flowing data lines to right -->
|
||||
<g stroke="#0ea5e9" stroke-width="2" fill="none" opacity="0.5">
|
||||
<path d="M 200 250 Q 300 200, 400 250 T 600 250"/>
|
||||
<path d="M 200 250 Q 300 300, 400 250 T 600 250"/>
|
||||
<!-- 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>
|
||||
<g fill="#22d3ee">
|
||||
<circle cx="280" cy="220" r="4"/>
|
||||
<circle cx="350" cy="260" r="4"/>
|
||||
<circle cx="450" cy="240" r="4"/>
|
||||
<circle cx="520" cy="255" r="4"/>
|
||||
|
||||
<!-- 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="500" y="180" font-family="system-ui, -apple-system, sans-serif" font-size="64" font-weight="700" fill="#ffffff">Tether API</text>
|
||||
<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="500" y="240" font-family="system-ui, -apple-system, sans-serif" font-size="24" font-weight="400" fill="#94a3b8">Phone status on your desktop</text>
|
||||
<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="#e2e8f0">
|
||||
<g transform="translate(500, 290)">
|
||||
<rect x="0" y="0" width="120" height="32" rx="16" fill="#0ea5e9" opacity="0.2" stroke="#0ea5e9" stroke-width="1"/>
|
||||
<text x="60" y="21" text-anchor="middle">5G / LTE / WiFi</text>
|
||||
<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(635, 290)">
|
||||
<rect x="0" y="0" width="100" height="32" rx="16" fill="#0ea5e9" opacity="0.2" stroke="#0ea5e9" stroke-width="1"/>
|
||||
<text x="50" y="21" text-anchor="middle">REST API</text>
|
||||
<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(750, 290)">
|
||||
<rect x="0" y="0" width="90" height="32" rx="16" fill="#0ea5e9" opacity="0.2" stroke="#0ea5e9" stroke-width="1"/>
|
||||
<text x="45" y="21" text-anchor="middle">Waybar</text>
|
||||
<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(855, 290)">
|
||||
<rect x="0" y="0" width="100" height="32" rx="16" fill="#0ea5e9" opacity="0.2" stroke="#0ea5e9" stroke-width="1"/>
|
||||
<text x="50" y="21" text-anchor="middle">Auto-start</text>
|
||||
<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>
|
||||
|
||||
<!-- Right side: laptop illustration -->
|
||||
<g transform="translate(780, 380)">
|
||||
<!-- Laptop -->
|
||||
<rect x="0" y="50" width="160" height="8" rx="2" fill="#334155"/>
|
||||
<rect x="15" y="-20" width="130" height="75" rx="4" fill="#1e293b" stroke="#334155" stroke-width="2"/>
|
||||
<rect x="22" y="-13" width="116" height="60" rx="2" fill="#0f172a"/>
|
||||
|
||||
<!-- Terminal content -->
|
||||
<text x="28" y="5" font-family="monospace" font-size="10" fill="#22d3ee">$ curl /status</text>
|
||||
<text x="28" y="18" font-family="monospace" font-size="9" fill="#94a3b8">{"type":"LTE"}</text>
|
||||
<text x="28" y="30" font-family="monospace" font-size="9" fill="#94a3b8">{"signal":3}</text>
|
||||
<text x="28" y="42" font-family="monospace" font-size="9" fill="#94a3b8">{"battery":87}</text>
|
||||
</g>
|
||||
|
||||
<!-- Decorative corner nodes -->
|
||||
<g fill="#0ea5e9" opacity="0.3">
|
||||
<circle cx="50" cy="50" r="8"/>
|
||||
<circle cx="974" cy="50" r="8"/>
|
||||
<circle cx="50" cy="450" r="8"/>
|
||||
<circle cx="974" cy="450" r="8"/>
|
||||
</g>
|
||||
<g stroke="#0ea5e9" stroke-width="1" fill="none" opacity="0.2">
|
||||
<line x1="50" y1="50" x2="120" y2="50"/>
|
||||
<line x1="50" y1="50" x2="50" y2="120"/>
|
||||
<line x1="974" y1="50" x2="904" y2="50"/>
|
||||
<line x1="974" y1="50" x2="974" y2="120"/>
|
||||
<!-- 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>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 2.7 KiB |
Reference in New Issue
Block a user