landing: overhaul client listings with accurate March 2026 data
- 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:
@@ -150,9 +150,7 @@
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.step-text a:hover {
|
||||
border-bottom-color: #c44;
|
||||
}
|
||||
.step-text a:hover { border-bottom-color: #c44; }
|
||||
|
||||
.or-divider {
|
||||
display: flex;
|
||||
@@ -255,57 +253,112 @@
|
||||
|
||||
.tag {
|
||||
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;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #eee;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.tag.voice {
|
||||
background: rgba(0, 180, 120, 0.25);
|
||||
border: 1px solid rgba(0, 180, 120, 0.4);
|
||||
background: rgba(0, 180, 120, 0.2);
|
||||
border-color: rgba(0, 180, 120, 0.4);
|
||||
color: #5effc4;
|
||||
}
|
||||
|
||||
.client-group {
|
||||
margin-bottom: 14px;
|
||||
.tag.beta {
|
||||
background: rgba(255, 180, 0, 0.15);
|
||||
border: 1px solid rgba(255, 180, 0, 0.3);
|
||||
color: #ffcc55;
|
||||
}
|
||||
|
||||
.client-group-label {
|
||||
font-size: 0.78rem;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
.tag.rust {
|
||||
background: rgba(80, 140, 255, 0.15);
|
||||
border: 1px solid rgba(80, 140, 255, 0.3);
|
||||
color: #88aaff;
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.client-links a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(152, 0, 0, 0.08);
|
||||
border: 1px solid rgba(152, 0, 0, 0.2);
|
||||
color: #ccc;
|
||||
.client-card-name {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
text-decoration: none;
|
||||
padding: 9px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
transition: all 0.25s ease;
|
||||
border-bottom: 1px solid rgba(204,68,68,0.25);
|
||||
transition: color 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.client-links a:hover {
|
||||
background: rgba(152, 0, 0, 0.18);
|
||||
border-color: rgba(152, 0, 0, 0.45);
|
||||
color: #fff;
|
||||
transform: translateY(-1px);
|
||||
.client-card-name:hover {
|
||||
color: #c44;
|
||||
border-bottom-color: #c44;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -339,6 +392,20 @@
|
||||
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 {
|
||||
margin-top: 14px;
|
||||
}
|
||||
@@ -480,9 +547,8 @@
|
||||
.logo { width: 110px; height: 110px; }
|
||||
h1 { font-size: 1.5rem; }
|
||||
.card { padding: 24px 18px; }
|
||||
.client-links { flex-direction: column; }
|
||||
.client-links a { justify-content: center; }
|
||||
.or-divider, .option-block { margin-left: 0; }
|
||||
.client-card-top { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -523,10 +589,11 @@
|
||||
<div class="client-featured">
|
||||
<a href="https://chat.lotusguild.org" target="_blank" rel="noopener">
|
||||
<span class="client-name">Lotus Guild Chat</span>
|
||||
<span class="client-desc">Cinny — hosted for you, no setup required</span>
|
||||
<span class="client-desc">Cinny v4.11.1 — hosted for you, no setup required</span>
|
||||
<span class="tag-row">
|
||||
<span class="tag">Desktop & Web</span>
|
||||
<span class="tag voice">Voice & Video Calls</span>
|
||||
<span class="tag platform">Desktop & Web</span>
|
||||
<span class="tag voice">Voice & Video Rooms</span>
|
||||
<span class="tag">Discord-like UI</span>
|
||||
<span class="tag">Recommended</span>
|
||||
</span>
|
||||
</a>
|
||||
@@ -544,21 +611,87 @@
|
||||
|
||||
<div class="client-group">
|
||||
<p class="client-group-label">Mobile — iOS & Android</p>
|
||||
<div class="client-links">
|
||||
<a href="https://element.io/element-x" target="_blank" rel="noopener">Element X</a>
|
||||
<a href="https://fluffychat.im/" target="_blank" rel="noopener">FluffyChat</a>
|
||||
<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-cards">
|
||||
<div class="client-card">
|
||||
<div class="client-card-top">
|
||||
<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 & 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 — call support depends on your homeserver.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="client-group">
|
||||
<p class="client-group-label">Desktop alternatives</p>
|
||||
<div class="client-links">
|
||||
<a href="https://element.io/download" target="_blank" rel="noopener">Element</a>
|
||||
<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://schildi.chat/" target="_blank" rel="noopener">SchildiChat</a>
|
||||
<p class="client-group-label">Discord-like — Android, Windows & Linux</p>
|
||||
<div class="client-cards">
|
||||
<div class="client-card">
|
||||
<div class="client-card-top">
|
||||
<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 & 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 class="client-group">
|
||||
<p class="client-group-label">Desktop — Windows, macOS & 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 & 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 & 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 — 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 →</a></p>
|
||||
</div>
|
||||
@@ -582,7 +715,7 @@
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<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 · 1 yr remote</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Federation</div>
|
||||
@@ -596,12 +729,12 @@
|
||||
<div class="privacy-strip">
|
||||
<span class="privacy-badge">No ads or tracking</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 — server cannot read encrypted rooms</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 — 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 class="contact">
|
||||
|
||||
Reference in New Issue
Block a user