Files
matrix/landing/index.html
Jared Vititoe 907d600999 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>
2026-03-19 22:51:07 -04:00

757 lines
27 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lotus Guild Matrix</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #0a0a0a;
color: #e0e0e0;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
body::before {
content: '';
position: fixed;
top: 50%;
left: 50%;
width: 900px;
height: 900px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(152, 0, 0, 0.07) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
.container {
position: relative;
z-index: 1;
text-align: center;
padding: 20px;
max-width: 560px;
width: 100%;
}
.logo {
width: 140px;
height: 140px;
margin: 0 auto 28px;
border-radius: 50%;
filter: drop-shadow(0 0 24px rgba(152, 0, 0, 0.35));
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
h1 {
font-size: 2rem;
font-weight: 300;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #fff;
margin-bottom: 4px;
}
h1 span {
color: #980000;
font-weight: 600;
}
.subtitle {
font-size: 0.85rem;
color: #555;
letter-spacing: 0.3em;
text-transform: uppercase;
margin-bottom: 36px;
}
.card {
background: linear-gradient(145deg, rgba(22, 22, 22, 0.95), rgba(14, 14, 14, 0.98));
border: 1px solid rgba(152, 0, 0, 0.2);
border-radius: 16px;
padding: 32px;
}
.card h2 {
font-size: 0.9rem;
font-weight: 500;
color: #980000;
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 20px;
}
.steps {
list-style: none;
text-align: left;
margin-bottom: 28px;
}
.steps li {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.steps li:last-child { border-bottom: none; }
.step-num {
flex-shrink: 0;
width: 28px;
height: 28px;
background: rgba(152, 0, 0, 0.12);
border: 1px solid rgba(152, 0, 0, 0.35);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 600;
color: #c44;
}
.step-text {
padding-top: 3px;
font-size: 0.95rem;
line-height: 1.5;
color: #bbb;
}
.step-text strong { color: #e0e0e0; }
.homeserver {
display: inline-block;
background: rgba(152, 0, 0, 0.1);
border: 1px solid rgba(152, 0, 0, 0.25);
color: #e88;
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
font-size: 0.85rem;
padding: 3px 10px;
border-radius: 6px;
margin-top: 2px;
}
.step-text a {
color: #c44;
text-decoration: none;
border-bottom: 1px solid rgba(204, 68, 68, 0.3);
transition: border-color 0.2s;
}
.step-text a:hover { border-bottom-color: #c44; }
.or-divider {
display: flex;
align-items: center;
gap: 10px;
margin: 4px 0 10px 42px;
color: #444;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.or-divider::before, .or-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(255,255,255,0.06);
}
.option-block {
margin-left: 42px;
padding: 12px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
text-align: left;
font-size: 0.88rem;
color: #888;
line-height: 1.5;
}
.option-block a {
color: #c44;
text-decoration: none;
border-bottom: 1px solid rgba(204, 68, 68, 0.3);
transition: border-color 0.2s;
}
.option-block a:hover { border-bottom-color: #c44; }
.divider {
height: 1px;
background: rgba(152, 0, 0, 0.15);
margin: 24px 0;
}
.clients-section h3 {
font-size: 0.8rem;
font-weight: 500;
color: #666;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 14px;
}
.client-featured {
margin-bottom: 20px;
}
.client-featured a {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, rgba(152, 0, 0, 0.25), rgba(120, 0, 0, 0.15));
border: 1px solid rgba(152, 0, 0, 0.55);
color: #fff;
text-decoration: none;
padding: 18px 24px;
border-radius: 12px;
transition: all 0.25s ease;
box-shadow: 0 0 20px rgba(152, 0, 0, 0.1);
}
.client-featured a:hover {
background: linear-gradient(135deg, rgba(152, 0, 0, 0.38), rgba(120, 0, 0, 0.25));
border-color: rgba(152, 0, 0, 0.8);
box-shadow: 0 0 32px rgba(152, 0, 0, 0.25);
transform: translateY(-2px);
}
.client-featured .client-name {
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 0.05em;
}
.client-featured .client-desc {
font-size: 0.82rem;
color: #ccc;
}
.client-featured .tag-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
margin-top: 2px;
}
.tag {
font-size: 0.65rem;
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: #ccc;
}
.tag.voice {
background: rgba(0, 180, 120, 0.2);
border-color: rgba(0, 180, 120, 0.4);
color: #5effc4;
}
.tag.beta {
background: rgba(255, 180, 0, 0.15);
border: 1px solid rgba(255, 180, 0, 0.3);
color: #ffcc55;
}
.tag.rust {
background: rgba(80, 140, 255, 0.15);
border: 1px solid rgba(80, 140, 255, 0.3);
color: #88aaff;
}
.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;
flex-wrap: wrap;
}
.client-card-name {
font-size: 0.95rem;
font-weight: 600;
color: #e0e0e0;
text-decoration: none;
border-bottom: 1px solid rgba(204,68,68,0.25);
transition: color 0.2s, border-color 0.2s;
}
.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 {
margin-top: 20px;
padding: 16px 20px;
background: rgba(152, 0, 0, 0.06);
border: 1px solid rgba(152, 0, 0, 0.2);
border-radius: 10px;
}
.space-join p {
font-size: 0.82rem;
color: #666;
margin-bottom: 10px;
}
.space-join a {
display: inline-block;
background: rgba(152, 0, 0, 0.15);
border: 1px solid rgba(152, 0, 0, 0.35);
color: #c44;
text-decoration: none;
padding: 8px 20px;
border-radius: 8px;
font-size: 0.88rem;
transition: all 0.25s ease;
}
.space-join a:hover {
background: rgba(152, 0, 0, 0.25);
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;
}
.all-clients a {
font-size: 0.78rem;
color: #555;
text-decoration: none;
border-bottom: 1px solid rgba(85, 85, 85, 0.3);
transition: color 0.2s, border-color 0.2s;
}
.all-clients a:hover {
color: #888;
border-bottom-color: #888;
}
.contact {
margin-top: 24px;
padding: 16px;
background: linear-gradient(145deg, rgba(22, 22, 22, 0.95), rgba(14, 14, 14, 0.98));
border: 1px solid rgba(152, 0, 0, 0.2);
border-radius: 12px;
text-align: center;
}
.footer {
margin-top: 20px;
font-size: 0.72rem;
color: #383838;
letter-spacing: 0.04em;
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.footer a {
color: #444;
text-decoration: none;
transition: color 0.2s;
}
.footer a:hover { color: #777; }
.server-info {
margin-top: 24px;
background: linear-gradient(145deg, rgba(22, 22, 22, 0.95), rgba(14, 14, 14, 0.98));
border: 1px solid rgba(152, 0, 0, 0.2);
border-radius: 12px;
overflow: hidden;
}
.server-info-title {
font-size: 0.78rem;
font-weight: 500;
color: #980000;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: 14px 20px 10px;
border-bottom: 1px solid rgba(152, 0, 0, 0.1);
}
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.info-item {
padding: 12px 18px;
border-bottom: 1px solid rgba(255,255,255,0.03);
border-right: 1px solid rgba(255,255,255,0.03);
text-align: left;
}
.info-item:nth-child(even) { border-right: none; }
.info-item:nth-last-child(-n+2) { border-bottom: none; }
.info-label {
font-size: 0.7rem;
color: #555;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 3px;
}
.info-value {
font-size: 0.88rem;
color: #ccc;
}
.info-value.green { color: #5effc4; }
.privacy-strip {
margin-top: 12px;
padding: 10px 18px;
border-top: 1px solid rgba(152, 0, 0, 0.1);
display: flex;
gap: 18px;
justify-content: center;
flex-wrap: wrap;
}
.privacy-badge {
font-size: 0.75rem;
color: #5effc4;
display: flex;
align-items: center;
gap: 5px;
}
.privacy-badge::before {
content: '✓';
font-weight: 700;
}
.legal-note {
margin-top: 24px;
padding: 12px 18px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
font-size: 0.75rem;
color: #444;
line-height: 1.6;
text-align: left;
}
.legal-note a {
color: #555;
text-decoration: none;
border-bottom: 1px solid rgba(85,85,85,0.3);
}
.legal-note a:hover { color: #888; }
@media (max-width: 480px) {
.logo { width: 110px; height: 110px; }
h1 { font-size: 1.5rem; }
.card { padding: 24px 18px; }
.or-divider, .option-block { margin-left: 0; }
.client-card-top { flex-direction: column; align-items: flex-start; }
}
</style>
</head>
<body>
<div class="container">
<img class="logo" src="https://photos.lotusguild.org/api/assets/3c4eb2da-0d06-407f-bdb7-c9e4cf795f0a/thumbnail?key=4aoZxX5-FHE3m_Ywwz1uGo3iNW53kmFztxfUw91PdOgphPNxayLFicNuxPvit1OYTpY&size=preview&c=jUqDBQAWF9iId3J%2FyAeIcIAICEd4d3BzSA%3D%3D" alt="Lotus Guild">
<h1><span>Lotus</span> Guild</h1>
<p class="subtitle">Private Communications</p>
<div class="card">
<h2>How to Join</h2>
<ol class="steps">
<li>
<span class="step-num">1</span>
<span class="step-text">Open <a href="https://chat.lotusguild.org" target="_blank" rel="noopener">chat.lotusguild.org</a> &mdash; your homeserver is pre-configured</span>
</li>
<li>
<span class="step-num">2</span>
<span class="step-text">Register with a <strong>token from Jared</strong> &mdash; <code class="homeserver">@jared:matrix.lotusguild.org</code></span>
</li>
<li>
<span class="step-num">3</span>
<span class="step-text">Join the <a href="https://matrix.to/#/!-1ZBnAH-JiCOV8MGSKN77zDGTuI3pgSdy8Unu_DrDyc?via=matrix.lotusguild.org&via=matrix.org" target="_blank" rel="noopener">Lotus Guild Space</a> to access all rooms</span>
</li>
</ol>
<div class="or-divider">or join from another server</div>
<div class="option-block">
Already have a Matrix account? Sign up free at <a href="https://app.element.io/#/register?hs_url=https://mozilla.modular.im" target="_blank" rel="noopener">mozilla.org</a> or <a href="https://app.element.io/#/register" target="_blank" rel="noopener">matrix.org</a>, then <a href="https://matrix.to/#/!-1ZBnAH-JiCOV8MGSKN77zDGTuI3pgSdy8Unu_DrDyc?via=matrix.lotusguild.org&via=matrix.org" target="_blank" rel="noopener">join our space</a>.
</div>
<div class="divider"></div>
<div class="clients-section">
<h3>Recommended Client</h3>
<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 v4.11.1 &mdash; hosted for you, no setup required</span>
<span class="tag-row">
<span class="tag platform">Desktop &amp; Web</span>
<span class="tag voice">Voice &amp; Video Rooms</span>
<span class="tag">Discord-like UI</span>
<span class="tag">Recommended</span>
</span>
</a>
</div>
<div class="space-join">
<p>Already signed in? Jump straight into the community:</p>
<a href="https://matrix.to/#/!-1ZBnAH-JiCOV8MGSKN77zDGTuI3pgSdy8Unu_DrDyc?via=matrix.lotusguild.org&via=matrix.org" target="_blank" rel="noopener">Join Lotus Guild Space &rarr;</a>
</div>
<div class="divider"></div>
<div class="clients-section">
<h3>Other Clients</h3>
<div class="client-group">
<p class="client-group-label">Mobile &mdash; iOS &amp; Android</p>
<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 &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 class="client-group">
<p class="client-group-label">Discord-like &mdash; Android, Windows &amp; 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 &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 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>
</div>
</div>
</div>
<div class="server-info">
<p class="server-info-title">Server Details</p>
<div class="info-grid">
<div class="info-item">
<div class="info-label">Access</div>
<div class="info-value">Invite-only</div>
</div>
<div class="info-item">
<div class="info-label">Max Upload</div>
<div class="info-value">200 MB / file</div>
</div>
<div class="info-item">
<div class="info-label">Message History</div>
<div class="info-value">Kept indefinitely</div>
</div>
<div class="info-item">
<div class="info-label">Media Retention</div>
<div class="info-value">3 yr local &middot; 1 yr remote</div>
</div>
<div class="info-item">
<div class="info-label">Federation</div>
<div class="info-value">Fully federated</div>
</div>
<div class="info-item">
<div class="info-label">Minimum Age</div>
<div class="info-value">13+ (COPPA)</div>
</div>
</div>
<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 &mdash; 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 &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 class="contact">
<p style="font-size: 0.85rem; color: #777; margin-bottom: 4px;">Questions or need a registration token?</p>
<p>Reach out to <code class="homeserver">@jared:matrix.lotusguild.org</code></p>
</div>
<p class="footer">
<a href="https://wiki.lotusguild.org/en/Services/service-matrix" target="_blank" rel="noopener">Wiki &amp; Setup Guide</a>
<span>&middot;</span>
<a href="https://wiki.lotusguild.org/en/Legal/privacy-policy" target="_blank" rel="noopener">Privacy Policy</a>
<span>&middot;</span>
<a href="https://wiki.lotusguild.org/en/Legal/terms-of-service" target="_blank" rel="noopener">Terms of Service</a>
<span>&middot;</span>
<span>Powered by Matrix &middot; E2E Encrypted</span>
</p>
</div>
</body>
</html>