LotusGuild/matrix
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

landing: overhaul client listings with accurate March 2026 data

Browse Source 
- Replace flat client buttons with descriptive cards showing platforms, features, and caveats
- Cinny featured card: "Voice & Video Rooms" (accurate — not DMs, space rooms only)
- Element X: correct platforms (iOS/Android only), add Rust SDK + Screenshare tags
- FluffyChat: add "Calls Experimental" tag with homeserver caveat
- Commet: fix to Android/Windows/Linux only (remove incorrect iOS listing), add multi-account/GIF/calendar notes
- Element desktop: add Screenshare tag, note resource usage
- Nheko: add as native lightweight desktop alternative
- Remove SchildiChat (unverified/outdated)
- Add encryption security note (Vodozemac Rust SDK vs matrix-js-sdk)
- Add new CSS: .client-card, .tag.rust, .tag.experimental, .tag.platform, .security-note

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-03-19 22:51:07 -04:00
parent ffd51e87bf
commit 907d600999
1 changed files with 182 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
landing/index.html
View File

@@ -150,9 +150,7 @@
transition: border-color 0.2s; transition: border-color 0.2s;
} }
.step-text a:hover { .step-text a:hover { border-bottom-color: #c44; }
border-bottom-color: #c44;
}
.or-divider { .or-divider {
display: flex; display: flex;
@@ -255,57 +253,112 @@
.tag { .tag {
font-size: 0.65rem; font-size: 0.65rem;
background: rgba(255,255,255,0.15); background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.12);
padding: 2px 8px; padding: 2px 8px;
border-radius: 4px; border-radius: 4px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: #eee; color: #ccc;
} }
.tag.voice { .tag.voice {
background: rgba(0, 180, 120, 0.25); background: rgba(0, 180, 120, 0.2);
border: 1px solid rgba(0, 180, 120, 0.4); border-color: rgba(0, 180, 120, 0.4);
color: #5effc4; color: #5effc4;
} }
.client-group { .tag.beta {
margin-bottom: 14px; background: rgba(255, 180, 0, 0.15);
border: 1px solid rgba(255, 180, 0, 0.3);
color: #ffcc55;
} }
.client-group-label { .tag.rust {
font-size: 0.78rem; background: rgba(80, 140, 255, 0.15);
color: #666; border: 1px solid rgba(80, 140, 255, 0.3);
margin-bottom: 8px; color: #88aaff;
line-height: 1.4;
} }
.client-links { .tag.experimental {
background: rgba(255, 140, 0, 0.15);
border: 1px solid rgba(255, 140, 0, 0.3);
color: #ffaa44;
}
.tag.platform {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: #888;
}
/* Secondary client cards */
.client-cards {
display: flex; display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 4px;
}
.client-card {
display: flex;
flex-direction: column;
gap: 6px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
padding: 12px 14px;
text-align: left;
transition: border-color 0.2s;
}
.client-card:hover { border-color: rgba(152,0,0,0.3); }
.client-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px; gap: 10px;
justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
.client-links a { .client-card-name {
display: inline-flex; font-size: 0.95rem;
align-items: center; font-weight: 600;
gap: 6px; color: #e0e0e0;
background: rgba(152, 0, 0, 0.08);
border: 1px solid rgba(152, 0, 0, 0.2);
color: #ccc;
text-decoration: none; text-decoration: none;
padding: 9px 16px; border-bottom: 1px solid rgba(204,68,68,0.25);
border-radius: 8px; transition: color 0.2s, border-color 0.2s;
font-size: 0.85rem;
transition: all 0.25s ease;
} }
.client-links a:hover { .client-card-name:hover {
background: rgba(152, 0, 0, 0.18); color: #c44;
border-color: rgba(152, 0, 0, 0.45); border-bottom-color: #c44;
color: #fff; }
transform: translateY(-1px);
.client-card-tags {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.client-card-desc {
font-size: 0.8rem;
color: #666;
line-height: 1.45;
}
.client-group {
margin-bottom: 18px;
}
.client-group-label {
font-size: 0.75rem;
color: #555;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 8px;
line-height: 1.4;
} }
.space-join { .space-join {
@@ -339,6 +392,20 @@
color: #fff; color: #fff;
} }
.security-note {
margin-top: 14px;
padding: 10px 14px;
background: rgba(80, 140, 255, 0.04);
border: 1px solid rgba(80, 140, 255, 0.12);
border-radius: 8px;
font-size: 0.76rem;
color: #556;
line-height: 1.5;
text-align: left;
}
.security-note strong { color: #88aaff; }
.all-clients { .all-clients {
margin-top: 14px; margin-top: 14px;
} }
@@ -480,9 +547,8 @@
.logo { width: 110px; height: 110px; } .logo { width: 110px; height: 110px; }
h1 { font-size: 1.5rem; } h1 { font-size: 1.5rem; }
.card { padding: 24px 18px; } .card { padding: 24px 18px; }
.client-links { flex-direction: column; }
.client-links a { justify-content: center; }
.or-divider, .option-block { margin-left: 0; } .or-divider, .option-block { margin-left: 0; }
.client-card-top { flex-direction: column; align-items: flex-start; }
} }
</style> </style>
</head> </head>
@@ -523,10 +589,11 @@
<div class="client-featured"> <div class="client-featured">
<a href="https://chat.lotusguild.org" target="_blank" rel="noopener"> <a href="https://chat.lotusguild.org" target="_blank" rel="noopener">
<span class="client-name">Lotus Guild Chat</span> <span class="client-name">Lotus Guild Chat</span>
<span class="client-desc">Cinny &mdash; hosted for you, no setup required</span> <span class="client-desc">Cinny v4.11.1 &mdash; hosted for you, no setup required</span>
<span class="tag-row"> <span class="tag-row">
<span class="tag">Desktop &amp; Web</span> <span class="tag platform">Desktop &amp; Web</span>
<span class="tag voice">Voice &amp; Video Calls</span> <span class="tag voice">Voice &amp; Video Rooms</span>
<span class="tag">Discord-like UI</span>
<span class="tag">Recommended</span> <span class="tag">Recommended</span>
</span> </span>
</a> </a>
@@ -544,22 +611,88 @@
<div class="client-group"> <div class="client-group">
<p class="client-group-label">Mobile &mdash; iOS &amp; Android</p> <p class="client-group-label">Mobile &mdash; iOS &amp; Android</p>
<div class="client-links"> <div class="client-cards">
<a href="https://element.io/element-x" target="_blank" rel="noopener">Element X</a> <div class="client-card">
<a href="https://fluffychat.im/" target="_blank" rel="noopener">FluffyChat</a> <div class="client-card-top">
<a href="https://commet.chat/" target="_blank" rel="noopener">Commet <span class="tag" style="background:rgba(255,180,0,0.15);border:1px solid rgba(255,180,0,0.3);color:#ffcc55;">Beta</span></a> <a href="https://element.io/element-x" target="_blank" rel="noopener" class="client-card-name">Element X</a>
<div class="client-card-tags">
<span class="tag platform">iOS</span>
<span class="tag platform">Android</span>
<span class="tag rust">Rust SDK</span>
<span class="tag voice">Voice &amp; Video</span>
</div>
</div>
<p class="client-card-desc">Fastest Matrix client. Native MatrixRTC calls and screenshare. Modern Rust encryption (Vodozemac). Spaces and Threads in active development.</p>
</div>
<div class="client-card">
<div class="client-card-top">
<a href="https://fluffychat.im/" target="_blank" rel="noopener" class="client-card-name">FluffyChat</a>
<div class="client-card-tags">
<span class="tag platform">iOS</span>
<span class="tag platform">Android</span>
<span class="tag rust">Rust SDK</span>
<span class="tag experimental">Calls Experimental</span>
</div>
</div>
<p class="client-card-desc">Simple, cross-platform, beginner-friendly. Rust encryption (Vodozemac). Voice/video calls are experimental &mdash; call support depends on your homeserver.</p>
</div>
</div> </div>
</div> </div>
<div class="client-group"> <div class="client-group">
<p class="client-group-label">Desktop alternatives</p> <p class="client-group-label">Discord-like &mdash; Android, Windows &amp; Linux</p>
<div class="client-links"> <div class="client-cards">
<a href="https://element.io/download" target="_blank" rel="noopener">Element</a> <div class="client-card">
<a href="https://commet.chat/" target="_blank" rel="noopener">Commet <span class="tag" style="background:rgba(255,180,0,0.15);border:1px solid rgba(255,180,0,0.3);color:#ffcc55;">Beta</span></a> <div class="client-card-top">
<a href="https://schildi.chat/" target="_blank" rel="noopener">SchildiChat</a> <a href="https://commet.chat/" target="_blank" rel="noopener" class="client-card-name">Commet</a>
<div class="client-card-tags">
<span class="tag platform">Android</span>
<span class="tag platform">Windows</span>
<span class="tag platform">Linux</span>
<span class="tag beta">Beta</span>
<span class="tag voice">Voice &amp; Video</span>
</div>
</div>
<p class="client-card-desc">Closest Discord replacement. Multi-account, GIF search (privacy-respecting proxy), shared calendars and photo albums. No iOS or macOS yet.</p>
</div>
</div> </div>
</div> </div>
<div class="client-group">
<p class="client-group-label">Desktop &mdash; Windows, macOS &amp; Linux</p>
<div class="client-cards">
<div class="client-card">
<div class="client-card-top">
<a href="https://element.io/download" target="_blank" rel="noopener" class="client-card-name">Element</a>
<div class="client-card-tags">
<span class="tag platform">Windows</span>
<span class="tag platform">macOS</span>
<span class="tag platform">Linux</span>
<span class="tag platform">Web</span>
<span class="tag voice">Voice, Video &amp; Screenshare</span>
</div>
</div>
<p class="client-card-desc">Most feature-complete Matrix client. Every spec feature supported. Heavier on resources than alternatives.</p>
</div>
<div class="client-card">
<div class="client-card-top">
<a href="https://nheko-reborn.github.io/" target="_blank" rel="noopener" class="client-card-name">Nheko</a>
<div class="client-card-tags">
<span class="tag platform">Windows</span>
<span class="tag platform">macOS</span>
<span class="tag platform">Linux</span>
<span class="tag voice">Voice &amp; Video</span>
</div>
</div>
<p class="client-card-desc">Native C++/Qt client. Lightweight alternative to Electron-based apps. Recommended for Linux/KDE users who want low resource usage.</p>
</div>
</div>
</div>
<div class="security-note">
<strong>Encryption note:</strong> Element X, FluffyChat, and Commet use Vodozemac &mdash; the Rust implementation of Matrix encryption. Element Web/Desktop and Cinny use matrix-js-sdk, which is undergoing a migration to the Rust SDK. Rust-based clients have a stronger cryptographic track record.
</div>
<p class="all-clients"><a href="https://matrix.org/ecosystem/clients/" target="_blank" rel="noopener">View all Matrix clients &rarr;</a></p> <p class="all-clients"><a href="https://matrix.org/ecosystem/clients/" target="_blank" rel="noopener">View all Matrix clients &rarr;</a></p>
</div> </div>
</div> </div>
@@ -582,7 +715,7 @@
</div> </div>
<div class="info-item"> <div class="info-item">
<div class="info-label">Media Retention</div> <div class="info-label">Media Retention</div>
<div class="info-value">3 yr local · 1 yr remote</div> <div class="info-value">3 yr local &middot; 1 yr remote</div>
</div> </div>
<div class="info-item"> <div class="info-item">
<div class="info-label">Federation</div> <div class="info-label">Federation</div>
@@ -596,12 +729,12 @@
<div class="privacy-strip"> <div class="privacy-strip">
<span class="privacy-badge">No ads or tracking</span> <span class="privacy-badge">No ads or tracking</span>
<span class="privacy-badge">No data sold</span> <span class="privacy-badge">No data sold</span>
<span class="privacy-badge">E2EE — server cannot read encrypted rooms</span> <span class="privacy-badge">E2EE &mdash; server cannot read encrypted rooms</span>
</div> </div>
</div> </div>
<div class="legal-note"> <div class="legal-note">
This service is provided "as-is" with no uptime guarantee. Not for emergency use — do not use to contact emergency services (e.g. 911). Use is governed by our <a href="https://wiki.lotusguild.org/en/Legal/terms-of-service" target="_blank" rel="noopener">Terms of Service</a> and <a href="https://wiki.lotusguild.org/en/Legal/privacy-policy" target="_blank" rel="noopener">Privacy Policy</a>. Governing law: State of Ohio, United States. This service is provided "as-is" with no uptime guarantee. Not for emergency use &mdash; do not use to contact emergency services (e.g. 911). Use is governed by our <a href="https://wiki.lotusguild.org/en/Legal/terms-of-service" target="_blank" rel="noopener">Terms of Service</a> and <a href="https://wiki.lotusguild.org/en/Legal/privacy-policy" target="_blank" rel="noopener">Privacy Policy</a>. Governing law: State of Ohio, United States.
</div> </div>
<div class="contact"> <div class="contact">