chore: continued redesign readme

This commit is contained in:
LukeGus
2026-05-20 16:48:42 -05:00
parent 2c5f7d1e66
commit b91c8c3dd4
12 changed files with 236 additions and 193 deletions
+2 -148
View File
@@ -55,122 +55,7 @@ Termix is an open-source, forever-free, self-hosted all-in-one server management
<img src="./repo-images/header-features.svg" alt="Features" /> <img src="./repo-images/header-features.svg" alt="Features" />
<br /> <img src="./repo-images/features.svg" alt="Features" />
<table>
<tr>
<td width="50%" valign="top">
**SSH Terminal Access**
Full-featured terminal with split-screen support (up to 4 panels) with a browser-like tab system. Includes support for customizing the terminal including common terminal themes, fonts, and other components.
</td>
<td width="50%" valign="top">
**Remote Desktop Access**
RDP, VNC, and Telnet support over the browser with complete customization and split screening.
</td>
</tr>
<tr>
<td width="50%" valign="top">
**SSH Tunnel Management**
Create and manage server-to-server SSH tunnels with automatic reconnection, health monitoring, and local, remote, or dynamic SOCKS forwarding. Desktop client-to-server tunnel settings are stored locally per desktop install, optional C2S preset snapshots can be saved to the server, renamed, loaded, or deleted when you want to move a local tunnel configuration between clients.
</td>
<td width="50%" valign="top">
**Remote File Manager**
Manage files directly on remote servers with support for viewing and editing code, images, audio, and video. Upload, download, rename, delete, and move files seamlessly with sudo support.
</td>
</tr>
<tr>
<td width="50%" valign="top">
**Docker Management**
Start, stop, pause, remove containers. View container stats. Control container using docker exec terminal. It was not made to replace Portainer or Dockge but rather to simply manage your containers compared to creating them.
</td>
<td width="50%" valign="top">
**SSH Host Manager**
Save, organize, and manage your SSH connections with tags and folders, and easily save reusable login info while being able to automate the deployment of SSH keys.
</td>
</tr>
<tr>
<td width="50%" valign="top">
**Server Stats**
View CPU, memory, and disk usage along with network, uptime, system information, firewall, port monitor, on most Linux based servers.
</td>
<td width="50%" valign="top">
**User Authentication**
Secure user management with admin controls and OIDC (with access control) and 2FA (TOTP) support. View active user sessions across all platforms and revoke permissions. Link your OIDC/Local accounts together.
</td>
</tr>
<tr>
<td width="50%" valign="top">
**RBAC**
Create roles and share hosts across users/roles.
</td>
<td width="50%" valign="top">
**Database Encryption**
Backend stored as encrypted SQLite database files. View [docs](https://docs.termix.site/security) for more.
</td>
</tr>
<tr>
<td width="50%" valign="top">
**Network Graph**
Customize your Dashboard to visualize your homelab based off your SSH connections with status support.
</td>
<td width="50%" valign="top">
**SSH Tools**
Create reusable command snippets that execute with a single click. Run one command simultaneously across multiple open terminals.
</td>
</tr>
<tr>
<td width="50%" valign="top">
**Persistent Tabs**
SSH sessions and tabs stay open across devices/refreshes if enabled in user profile.
</td>
<td width="50%" valign="top">
**Languages**
Built-in support ~30 languages (managed by [Crowdin](https://docs.termix.site/translations)).
</td>
</tr>
</table>
<br /> <br />
@@ -194,38 +79,7 @@ Built-in support ~30 languages (managed by [Crowdin](https://docs.termix.site/tr
<img src="./repo-images/header-platform-support.svg" alt="Platform Support" /> <img src="./repo-images/header-platform-support.svg" alt="Platform Support" />
<br /> <img src="./repo-images/platform-support.svg" alt="Platform Support" />
<table align="center">
<tr>
<th align="center">Platform</th>
<th align="center">Distribution</th>
</tr>
<tr>
<td align="center"><b>Web</b></td>
<td>Any modern browser (Chrome, Safari, Firefox) · PWA support</td>
</tr>
<tr>
<td align="center"><b>Windows</b> <sub>x64/ia32</sub></td>
<td>Portable · MSI Installer · Chocolatey</td>
</tr>
<tr>
<td align="center"><b>Linux</b> <sub>x64/ia32</sub></td>
<td>Portable · AUR · AppImage · Deb · Flatpak</td>
</tr>
<tr>
<td align="center"><b>macOS</b> <sub>x64/ia32, v12.0+</sub></td>
<td>Apple App Store · DMG · Homebrew</td>
</tr>
<tr>
<td align="center"><b>iOS/iPadOS</b> <sub>v15.1+</sub></td>
<td>Apple App Store · IPA</td>
</tr>
<tr>
<td align="center"><b>Android</b> <sub>v7.0+</sub></td>
<td>Google Play Store · APK</td>
</tr>
</table>
<br /> <br />
+132
View File
@@ -0,0 +1,132 @@
<svg xmlns="http://www.w3.org/2000/svg" width="860" height="1064" viewBox="0 0 860 1064">
<defs>
<style>
.card-bg { fill: #161b22; }
.card-border { fill: none; stroke: #F39044; stroke-opacity: 0.22; stroke-width: 1; }
.card-accent { fill: #F39044; }
.feat-title { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; fill: #F39044; }
.feat-body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 11.5px; fill: #8b949e; }
</style>
</defs>
<rect width="860" height="1064" fill="none"/>
<!-- Row 1, Col 1: SSH Terminal Access -->
<rect x="0" y="0" width="418" height="136" rx="6" class="card-bg"/>
<rect x="0" y="0" width="418" height="136" rx="6" class="card-border"/>
<rect x="0" y="0" width="3" height="136" rx="1" class="card-accent"/>
<text x="18" y="22" class="feat-title">SSH Terminal Access</text>
<text x="18" y="40" class="feat-body">Full-featured terminal with split-screen support (up to 4 panels)</text>
<text x="18" y="55" class="feat-body">with a browser-like tab system. Includes support for customizing</text>
<text x="18" y="70" class="feat-body">the terminal including common terminal themes, fonts, and other</text>
<text x="18" y="85" class="feat-body">components.</text>
<!-- Row 1, Col 2: Remote Desktop Access -->
<rect x="442" y="0" width="418" height="136" rx="6" class="card-bg"/>
<rect x="442" y="0" width="418" height="136" rx="6" class="card-border"/>
<rect x="442" y="0" width="3" height="136" rx="1" class="card-accent"/>
<text x="460" y="22" class="feat-title">Remote Desktop Access</text>
<text x="460" y="40" class="feat-body">RDP, VNC, and Telnet support over the browser with complete</text>
<text x="460" y="55" class="feat-body">customization and split screening.</text>
<!-- Row 2, Col 1: SSH Tunnel Management -->
<rect x="0" y="148" width="418" height="136" rx="6" class="card-bg"/>
<rect x="0" y="148" width="418" height="136" rx="6" class="card-border"/>
<rect x="0" y="148" width="3" height="136" rx="1" class="card-accent"/>
<text x="18" y="170" class="feat-title">SSH Tunnel Management</text>
<text x="18" y="188" class="feat-body">Create and manage server-to-server SSH tunnels with automatic</text>
<text x="18" y="203" class="feat-body">reconnection, health monitoring, and local, remote, or dynamic</text>
<text x="18" y="218" class="feat-body">SOCKS forwarding. C2S preset snapshots can be saved, renamed,</text>
<text x="18" y="233" class="feat-body">loaded, or deleted across clients.</text>
<!-- Row 2, Col 2: Remote File Manager -->
<rect x="442" y="148" width="418" height="136" rx="6" class="card-bg"/>
<rect x="442" y="148" width="418" height="136" rx="6" class="card-border"/>
<rect x="442" y="148" width="3" height="136" rx="1" class="card-accent"/>
<text x="460" y="170" class="feat-title">Remote File Manager</text>
<text x="460" y="188" class="feat-body">Manage files directly on remote servers with support for viewing</text>
<text x="460" y="203" class="feat-body">and editing code, images, audio, and video. Upload, download,</text>
<text x="460" y="218" class="feat-body">rename, delete, and move files seamlessly with sudo support.</text>
<!-- Row 3, Col 1: Docker Management -->
<rect x="0" y="296" width="418" height="136" rx="6" class="card-bg"/>
<rect x="0" y="296" width="418" height="136" rx="6" class="card-border"/>
<rect x="0" y="296" width="3" height="136" rx="1" class="card-accent"/>
<text x="18" y="318" class="feat-title">Docker Management</text>
<text x="18" y="336" class="feat-body">Start, stop, pause, remove containers. View container stats.</text>
<text x="18" y="351" class="feat-body">Control containers using docker exec terminal. Not a replacement</text>
<text x="18" y="366" class="feat-body">for Portainer or Dockge — built for managing, not creating.</text>
<!-- Row 3, Col 2: SSH Host Manager -->
<rect x="442" y="296" width="418" height="136" rx="6" class="card-bg"/>
<rect x="442" y="296" width="418" height="136" rx="6" class="card-border"/>
<rect x="442" y="296" width="3" height="136" rx="1" class="card-accent"/>
<text x="460" y="318" class="feat-title">SSH Host Manager</text>
<text x="460" y="336" class="feat-body">Save, organize, and manage your SSH connections with tags and</text>
<text x="460" y="351" class="feat-body">folders. Save reusable login info and automate the deployment</text>
<text x="460" y="366" class="feat-body">of SSH keys.</text>
<!-- Row 4, Col 1: Server Stats -->
<rect x="0" y="444" width="418" height="136" rx="6" class="card-bg"/>
<rect x="0" y="444" width="418" height="136" rx="6" class="card-border"/>
<rect x="0" y="444" width="3" height="136" rx="1" class="card-accent"/>
<text x="18" y="466" class="feat-title">Server Stats</text>
<text x="18" y="484" class="feat-body">View CPU, memory, and disk usage along with network, uptime,</text>
<text x="18" y="499" class="feat-body">system information, firewall, and port monitor on most Linux</text>
<text x="18" y="514" class="feat-body">based servers.</text>
<!-- Row 4, Col 2: User Authentication -->
<rect x="442" y="444" width="418" height="136" rx="6" class="card-bg"/>
<rect x="442" y="444" width="418" height="136" rx="6" class="card-border"/>
<rect x="442" y="444" width="3" height="136" rx="1" class="card-accent"/>
<text x="460" y="466" class="feat-title">User Authentication</text>
<text x="460" y="484" class="feat-body">Secure user management with admin controls and OIDC (with</text>
<text x="460" y="499" class="feat-body">access control) and 2FA (TOTP) support. View active sessions</text>
<text x="460" y="514" class="feat-body">across all platforms and link OIDC/Local accounts together.</text>
<!-- Row 5, Col 1: RBAC -->
<rect x="0" y="592" width="418" height="136" rx="6" class="card-bg"/>
<rect x="0" y="592" width="418" height="136" rx="6" class="card-border"/>
<rect x="0" y="592" width="3" height="136" rx="1" class="card-accent"/>
<text x="18" y="614" class="feat-title">RBAC</text>
<text x="18" y="632" class="feat-body">Create roles and share hosts across users and roles.</text>
<!-- Row 5, Col 2: Database Encryption -->
<rect x="442" y="592" width="418" height="136" rx="6" class="card-bg"/>
<rect x="442" y="592" width="418" height="136" rx="6" class="card-border"/>
<rect x="442" y="592" width="3" height="136" rx="1" class="card-accent"/>
<text x="460" y="614" class="feat-title">Database Encryption</text>
<text x="460" y="632" class="feat-body">Backend stored as encrypted SQLite database files.</text>
<!-- Row 6, Col 1: Network Graph -->
<rect x="0" y="740" width="418" height="136" rx="6" class="card-bg"/>
<rect x="0" y="740" width="418" height="136" rx="6" class="card-border"/>
<rect x="0" y="740" width="3" height="136" rx="1" class="card-accent"/>
<text x="18" y="762" class="feat-title">Network Graph</text>
<text x="18" y="780" class="feat-body">Customize your Dashboard to visualize your homelab based off</text>
<text x="18" y="795" class="feat-body">your SSH connections with status support.</text>
<!-- Row 6, Col 2: SSH Tools -->
<rect x="442" y="740" width="418" height="136" rx="6" class="card-bg"/>
<rect x="442" y="740" width="418" height="136" rx="6" class="card-border"/>
<rect x="442" y="740" width="3" height="136" rx="1" class="card-accent"/>
<text x="460" y="762" class="feat-title">SSH Tools</text>
<text x="460" y="780" class="feat-body">Create reusable command snippets that execute with a single</text>
<text x="460" y="795" class="feat-body">click. Run one command simultaneously across multiple terminals.</text>
<!-- Row 7, Col 1: Persistent Tabs -->
<rect x="0" y="888" width="418" height="136" rx="6" class="card-bg"/>
<rect x="0" y="888" width="418" height="136" rx="6" class="card-border"/>
<rect x="0" y="888" width="3" height="136" rx="1" class="card-accent"/>
<text x="18" y="910" class="feat-title">Persistent Tabs</text>
<text x="18" y="928" class="feat-body">SSH sessions and tabs stay open across devices and refreshes</text>
<text x="18" y="943" class="feat-body">if enabled in user profile.</text>
<!-- Row 7, Col 2: Languages -->
<rect x="442" y="888" width="418" height="136" rx="6" class="card-bg"/>
<rect x="442" y="888" width="418" height="136" rx="6" class="card-border"/>
<rect x="442" y="888" width="3" height="136" rx="1" class="card-accent"/>
<text x="460" y="910" class="feat-title">Languages</text>
<text x="460" y="928" class="feat-body">Built-in support for ~30 languages, managed by Crowdin.</text>
</svg>

After

Width:  |  Height:  |  Size: 8.6 KiB

+4 -5
View File
@@ -1,6 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="860" height="52" viewBox="0 0 860 52"> <svg xmlns="http://www.w3.org/2000/svg" width="860" height="44" viewBox="0 0 860 44">
<rect width="860" height="52" fill="none"/> <rect width="860" height="44" fill="none"/>
<rect x="0" y="36" width="860" height="1" fill="#F39044" opacity="0.25"/> <text x="0" y="26" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Features</text>
<rect x="0" y="36" width="106" height="2" fill="#F39044"/> <rect x="0" y="32" width="860" height="1" fill="#F39044" opacity="0.2"/>
<text x="0" y="28" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Features</text>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 451 B

After

Width:  |  Height:  |  Size: 389 B

+4 -5
View File
@@ -1,6 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="860" height="52" viewBox="0 0 860 52"> <svg xmlns="http://www.w3.org/2000/svg" width="860" height="44" viewBox="0 0 860 44">
<rect width="860" height="52" fill="none"/> <rect width="860" height="44" fill="none"/>
<rect x="0" y="36" width="860" height="1" fill="#F39044" opacity="0.25"/> <text x="0" y="26" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Installation</text>
<rect x="0" y="36" width="154" height="2" fill="#F39044"/> <rect x="0" y="32" width="860" height="1" fill="#F39044" opacity="0.2"/>
<text x="0" y="28" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Installation</text>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 455 B

After

Width:  |  Height:  |  Size: 393 B

+4 -5
View File
@@ -1,6 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="860" height="52" viewBox="0 0 860 52"> <svg xmlns="http://www.w3.org/2000/svg" width="860" height="44" viewBox="0 0 860 44">
<rect width="860" height="52" fill="none"/> <rect width="860" height="44" fill="none"/>
<rect x="0" y="36" width="860" height="1" fill="#F39044" opacity="0.25"/> <text x="0" y="26" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">License</text>
<rect x="0" y="36" width="92" height="2" fill="#F39044"/> <rect x="0" y="32" width="860" height="1" fill="#F39044" opacity="0.2"/>
<text x="0" y="28" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">License</text>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 449 B

After

Width:  |  Height:  |  Size: 388 B

+4 -5
View File
@@ -1,6 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="860" height="52" viewBox="0 0 860 52"> <svg xmlns="http://www.w3.org/2000/svg" width="860" height="44" viewBox="0 0 860 44">
<rect width="860" height="52" fill="none"/> <rect width="860" height="44" fill="none"/>
<rect x="0" y="36" width="860" height="1" fill="#F39044" opacity="0.25"/> <text x="0" y="26" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Overview</text>
<rect x="0" y="36" width="120" height="2" fill="#F39044"/> <rect x="0" y="32" width="860" height="1" fill="#F39044" opacity="0.2"/>
<text x="0" y="28" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Overview</text>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 451 B

After

Width:  |  Height:  |  Size: 389 B

+4 -5
View File
@@ -1,6 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="860" height="52" viewBox="0 0 860 52"> <svg xmlns="http://www.w3.org/2000/svg" width="860" height="44" viewBox="0 0 860 44">
<rect width="860" height="52" fill="none"/> <rect width="860" height="44" fill="none"/>
<rect x="0" y="36" width="860" height="1" fill="#F39044" opacity="0.25"/> <text x="0" y="26" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Planned Features</text>
<rect x="0" y="36" width="222" height="2" fill="#F39044"/> <rect x="0" y="32" width="860" height="1" fill="#F39044" opacity="0.2"/>
<text x="0" y="28" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Planned Features</text>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 459 B

After

Width:  |  Height:  |  Size: 397 B

+4 -5
View File
@@ -1,6 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="860" height="52" viewBox="0 0 860 52"> <svg xmlns="http://www.w3.org/2000/svg" width="860" height="44" viewBox="0 0 860 44">
<rect width="860" height="52" fill="none"/> <rect width="860" height="44" fill="none"/>
<rect x="0" y="36" width="860" height="1" fill="#F39044" opacity="0.25"/> <text x="0" y="26" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Platform Support</text>
<rect x="0" y="36" width="224" height="2" fill="#F39044"/> <rect x="0" y="32" width="860" height="1" fill="#F39044" opacity="0.2"/>
<text x="0" y="28" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Platform Support</text>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 459 B

After

Width:  |  Height:  |  Size: 397 B

+4 -5
View File
@@ -1,6 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="860" height="52" viewBox="0 0 860 52"> <svg xmlns="http://www.w3.org/2000/svg" width="860" height="44" viewBox="0 0 860 44">
<rect width="860" height="52" fill="none"/> <rect width="860" height="44" fill="none"/>
<rect x="0" y="36" width="860" height="1" fill="#F39044" opacity="0.25"/> <text x="0" y="26" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Screenshots</text>
<rect x="0" y="36" width="152" height="2" fill="#F39044"/> <rect x="0" y="32" width="860" height="1" fill="#F39044" opacity="0.2"/>
<text x="0" y="28" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Screenshots</text>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 454 B

After

Width:  |  Height:  |  Size: 392 B

+4 -5
View File
@@ -1,6 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="860" height="52" viewBox="0 0 860 52"> <svg xmlns="http://www.w3.org/2000/svg" width="860" height="44" viewBox="0 0 860 44">
<rect width="860" height="52" fill="none"/> <rect width="860" height="44" fill="none"/>
<rect x="0" y="36" width="860" height="1" fill="#F39044" opacity="0.25"/> <text x="0" y="26" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Sponsors</text>
<rect x="0" y="36" width="112" height="2" fill="#F39044"/> <rect x="0" y="32" width="860" height="1" fill="#F39044" opacity="0.2"/>
<text x="0" y="28" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Sponsors</text>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 451 B

After

Width:  |  Height:  |  Size: 389 B

+4 -5
View File
@@ -1,6 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="860" height="52" viewBox="0 0 860 52"> <svg xmlns="http://www.w3.org/2000/svg" width="860" height="44" viewBox="0 0 860 44">
<rect width="860" height="52" fill="none"/> <rect width="860" height="44" fill="none"/>
<rect x="0" y="36" width="860" height="1" fill="#F39044" opacity="0.25"/> <text x="0" y="26" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Support</text>
<rect x="0" y="36" width="98" height="2" fill="#F39044"/> <rect x="0" y="32" width="860" height="1" fill="#F39044" opacity="0.2"/>
<text x="0" y="28" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="22" font-weight="700" fill="#F39044">Support</text>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 449 B

After

Width:  |  Height:  |  Size: 388 B

+66
View File
@@ -0,0 +1,66 @@
<svg xmlns="http://www.w3.org/2000/svg" width="860" height="340" viewBox="0 0 860 340">
<defs>
<style>
.card-bg { fill: #161b22; }
.card-border { fill: none; stroke: #F39044; stroke-opacity: 0.22; stroke-width: 1; }
.card-accent { fill: #F39044; }
.plat-name { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; fill: #e6edf3; }
.plat-sub { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 11px; fill: #F39044; opacity: 0.75; }
.plat-dist { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 11.5px; fill: #8b949e; }
</style>
</defs>
<rect width="860" height="340" fill="none"/>
<!-- Row 1, Col 1: Web -->
<rect x="0" y="0" width="272" height="100" rx="6" class="card-bg"/>
<rect x="0" y="0" width="272" height="100" rx="6" class="card-border"/>
<rect x="0" y="0" width="272" height="3" rx="1" class="card-accent"/>
<text x="136" y="32" text-anchor="middle" class="plat-name">Web</text>
<text x="136" y="56" text-anchor="middle" class="plat-dist">Any modern browser</text>
<text x="136" y="72" text-anchor="middle" class="plat-dist">(Chrome, Safari, Firefox) · PWA</text>
<!-- Row 1, Col 2: Windows -->
<rect x="294" y="0" width="272" height="100" rx="6" class="card-bg"/>
<rect x="294" y="0" width="272" height="100" rx="6" class="card-border"/>
<rect x="294" y="0" width="272" height="3" rx="1" class="card-accent"/>
<text x="430" y="28" text-anchor="middle" class="plat-name">Windows</text>
<text x="430" y="44" text-anchor="middle" class="plat-sub">x64 / ia32</text>
<text x="430" y="64" text-anchor="middle" class="plat-dist">Portable · MSI Installer</text>
<text x="430" y="80" text-anchor="middle" class="plat-dist">Chocolatey</text>
<!-- Row 1, Col 3: Linux -->
<rect x="588" y="0" width="272" height="100" rx="6" class="card-bg"/>
<rect x="588" y="0" width="272" height="100" rx="6" class="card-border"/>
<rect x="588" y="0" width="272" height="3" rx="1" class="card-accent"/>
<text x="724" y="28" text-anchor="middle" class="plat-name">Linux</text>
<text x="724" y="44" text-anchor="middle" class="plat-sub">x64 / ia32</text>
<text x="724" y="64" text-anchor="middle" class="plat-dist">Portable · AUR · AppImage</text>
<text x="724" y="80" text-anchor="middle" class="plat-dist">Deb · Flatpak</text>
<!-- Row 2, Col 1: macOS -->
<rect x="0" y="120" width="272" height="100" rx="6" class="card-bg"/>
<rect x="0" y="120" width="272" height="100" rx="6" class="card-border"/>
<rect x="0" y="120" width="272" height="3" rx="1" class="card-accent"/>
<text x="136" y="148" text-anchor="middle" class="plat-name">macOS</text>
<text x="136" y="164" text-anchor="middle" class="plat-sub">x64 / ia32 · v12.0+</text>
<text x="136" y="184" text-anchor="middle" class="plat-dist">Apple App Store · DMG</text>
<text x="136" y="200" text-anchor="middle" class="plat-dist">Homebrew</text>
<!-- Row 2, Col 2: iOS/iPadOS -->
<rect x="294" y="120" width="272" height="100" rx="6" class="card-bg"/>
<rect x="294" y="120" width="272" height="100" rx="6" class="card-border"/>
<rect x="294" y="120" width="272" height="3" rx="1" class="card-accent"/>
<text x="430" y="148" text-anchor="middle" class="plat-name">iOS / iPadOS</text>
<text x="430" y="164" text-anchor="middle" class="plat-sub">v15.1+</text>
<text x="430" y="184" text-anchor="middle" class="plat-dist">Apple App Store · IPA</text>
<!-- Row 2, Col 3: Android -->
<rect x="588" y="120" width="272" height="100" rx="6" class="card-bg"/>
<rect x="588" y="120" width="272" height="100" rx="6" class="card-border"/>
<rect x="588" y="120" width="272" height="3" rx="1" class="card-accent"/>
<text x="724" y="148" text-anchor="middle" class="plat-name">Android</text>
<text x="724" y="164" text-anchor="middle" class="plat-sub">v7.0+</text>
<text x="724" y="184" text-anchor="middle" class="plat-dist">Google Play Store · APK</text>
</svg>

After

Width:  |  Height:  |  Size: 4.0 KiB