Files
cyper-nix/nixos/roles/matrix/index.html
T
2026-05-22 22:11:33 +02:00

618 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Matrix Guide - cyperpunk.de</title>
<link
rel="icon"
type="image/png"
href="https://img.icons8.com/glyph-neue/64/trinity.png"
/>
<link rel="stylesheet" href="style.css" />
<!-- SEO & Meta -->
<meta
name="description"
content="Einstiegspunkt für den cyperpunk.de Matrix-Server. Hier kannst du einen Account beantragen und erfährst alles über Clients, mobile Apps und Server-Funktionen."
/>
<meta name="robots" content="index, follow" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://matrix.cyperpunk.de/" />
<meta property="og:title" content="Matrix Guide - cyperpunk.de" />
<meta
property="og:description"
content="Einstiegspunkt für den cyperpunk.de Matrix-Server. Hier kannst du einen Account beantragen und erfährst alles über Clients, mobile Apps und Server-Funktionen."
/>
<meta property="og:locale" content="de_DE" />
</head>
<body>
<a href="#main-content" class="skip-link">Zum Inhalt springen</a>
<canvas id="matrix-bg" aria-hidden="true"></canvas>
<main class="container" id="main-content">
<!-- Header -->
<header>
<h1>Matrix Guide</h1>
<p class="subtitle">Systemstatus: Aktiv auf Host cyperpunk.de</p>
<p class="admin-tag">Grid-Operator: @dergrumpf:cyperpunk.de</p>
</header>
<!-- Abstract -->
<div class="abstract" role="note" aria-label="Was ist Matrix?">
<p>
<strong>Was ist Matrix?</strong> Matrix ist ein offenes,
verschlüsseltes Kommunikationsnetzwerk wie WhatsApp oder Discord,
aber ohne zentrales Unternehmen dahinter. Jeder Nutzer hat eine eigene
Adresse (z.&nbsp;B. <code class="code--white">@name:cyperpunk.de</code>), Nachrichten
sind Ende-zu-Ende-verschlüsselt, und verschiedene Server können
miteinander kommunizieren. Dieser Server wird privat betrieben und
ist kostenlos nutzbar.
</p>
</div>
<!-- Sektion 1: Registrierung -->
<section id="registration" aria-labelledby="heading-registration">
<h2 id="heading-registration">1. Identitäts-Allokation (Registrierung)</h2>
<p>
Zugangsdaten für diesen Server werden exklusiv durch den
Administrator <code class="code--white">@dergrumpf:cyperpunk.de</code> vergeben. Das untenstehende Formular sendet eine
Anfrage direkt in den internen Koordinationskanal.
</p>
<form class="reg-form" id="reg-form" novalidate aria-label="Registrierungsanfrage">
<label for="reg-username">Gewünschter Benutzername</label>
<input
type="text"
id="reg-username"
name="username"
placeholder="z.B. neo"
autocomplete="off"
spellcheck="false"
required
aria-required="true"
/>
<label for="reg-email">E-Mail-Adresse (für Login-Daten)</label>
<input
type="email"
id="reg-email"
name="email"
placeholder="z.B. neo@example.com"
autocomplete="off"
required
aria-required="true"
/>
<!-- Honeypot: muss leer bleiben -->
<label for="reg-website" class="honeypot" aria-hidden="true">Website</label>
<input
type="text"
id="reg-website"
name="website"
class="honeypot"
tabindex="-1"
autocomplete="off"
aria-hidden="true"
/>
<button
type="button"
class="reg-submit"
id="reg-btn"
onclick="submitRegistration()"
>
Zugang anfordern
</button>
<div
class="reg-status"
id="reg-status"
role="status"
aria-live="polite"
aria-atomic="true"
></div>
</form>
</section>
<!-- Sektion 2: App oder Browser wählen -->
<section id="clients" aria-labelledby="heading-clients">
<h2 id="heading-clients">2. App oder Browser wählen</h2>
<p>
Du kannst Matrix entweder direkt im Browser nutzen oder eine App auf
deinem Smartphone installieren. Sobald dein Login abgeschlossen ist,
findest du den Homeserver unter
<code class="code--white">#cyperpunk:cyperpunk.de</code>.
</p>
<h3>Im Browser starten</h3>
<p>Wähle eine der drei gehosteten Web-Schnittstellen:</p>
<div class="linktree-container">
<a
href="https://element.cyperpunk.de/"
target="_blank"
rel="noopener"
aria-label="Element starten (öffnet neuen Tab)"
class="linktree-btn"
>
<img src="https://img.icons8.com/keek-line/96/physics.png" alt="" aria-hidden="true" />
Terminal: Element starten
</a>
<a
href="https://cinny.cyperpunk.de/"
target="_blank"
rel="noopener"
aria-label="Cinny starten (öffnet neuen Tab)"
class="linktree-btn"
>
<img src="https://img.icons8.com/ios/100/bird--v1.png" alt="" aria-hidden="true" />
Terminal: Cinny starten
</a>
<a
href="https://fluffy.cyperpunk.de/"
target="_blank"
rel="noopener"
aria-label="FluffyChat starten (öffnet neuen Tab)"
class="linktree-btn"
>
<img src="https://img.icons8.com/pastel-glyph/64/cat--v3.png" alt="" aria-hidden="true" />
Terminal: FluffyChat starten
</a>
</div>
<h3>Welches Programm soll ich wählen?</h3>
<div class="cards-grid">
<div class="card">
<h3 class="card-title">
<img src="https://img.icons8.com/keek-line/96/physics.png" alt="" aria-hidden="true" class="card-icon" />
Element
</h3>
<p class="card-text">
Der mächtige <strong>Allrounder</strong>. Klassisches Interface mit
vollem Funktionsumfang. Geeignet für alle, die Räume selbst
verwalten möchten.
<strong>Unterstützt Sprach- und Videoanrufe</strong> direkt im
Browser.
</p>
</div>
<div class="card">
<h3 class="card-title">
<img src="https://img.icons8.com/ios/100/bird--v1.png" alt="" aria-hidden="true" class="card-icon" />
Cinny
</h3>
<p class="card-text">
Der <strong>moderne Chat</strong>. Schnell, übersichtlich, am
Design von Discord und Slack orientiert. Empfohlen für alle, die
einfach schreiben möchten.
<strong>Unterstützt Sprach- und Videoanrufe</strong> direkt im
Browser.
</p>
</div>
<div class="card card--highlight">
<h3 class="card-title card-title--highlight">
<img src="https://img.icons8.com/pastel-glyph/64/cat--v3.png" alt="" aria-hidden="true" class="card-icon" />
FluffyChat
</h3>
<p class="card-text">
Der <strong>einfache Messenger</strong>. Bunt und unkompliziert,
vergleichbar mit WhatsApp oder Signal.
<strong class="text--danger">Achtung:</strong>
Diese Web-Version unterstützt <strong>keinen Sprach-Chat</strong>.
</p>
</div>
</div>
<h3>Auf dem Smartphone nutzen</h3>
<p>
Möchtest du von unterwegs auf Matrix zugreifen? Lade dir eine
passende App herunter:
</p>
<div class="app-download-box">
<div class="app-row">
<div class="app-info">
<span class="app-name">FluffyChat</span>
<p>Bunt, einsteigerfreundlich und ideal für das Smartphone.</p>
</div>
<div class="app-buttons">
<a
href="https://play.google.com/store/apps/details?id=chat.fluffy.fluffychat&hl=de_DE"
target="_blank"
rel="noopener"
aria-label="FluffyChat im Google Play Store herunterladen (öffnet neuen Tab)"
class="app-btn"
><img src="https://img.icons8.com/ios/100/google-play--v1.png" alt="" aria-hidden="true" />Google Play</a
>
<a
href="https://apps.apple.com/us/app/fluffychat/id1551469600"
target="_blank"
rel="noopener"
aria-label="FluffyChat im App Store herunterladen (öffnet neuen Tab)"
class="app-btn"
><img src="https://img.icons8.com/ios/100/apple-app-store--v2.png" alt="" aria-hidden="true" />App Store</a
>
</div>
</div>
<div class="app-row">
<div class="app-info">
<span class="app-name">Element X</span>
<p>Die App der nächsten Generation: Extrem schnell, modern und sicher.</p>
</div>
<div class="app-buttons">
<a
href="https://play.google.com/store/apps/details?id=io.element.android.x&hl=de_DE"
target="_blank"
rel="noopener"
aria-label="Element X im Google Play Store herunterladen (öffnet neuen Tab)"
class="app-btn"
><img src="https://img.icons8.com/ios/100/google-play--v1.png" alt="" aria-hidden="true" />Google Play</a
>
<a
href="https://apps.apple.com/us/app/element-x-secure-chat-call/id1631335820"
target="_blank"
rel="noopener"
aria-label="Element X im App Store herunterladen (öffnet neuen Tab)"
class="app-btn"
><img src="https://img.icons8.com/ios/100/apple-app-store--v2.png" alt="" aria-hidden="true" />App Store</a
>
</div>
</div>
</div>
<p class="mt-28"><strong>Wichtig beim ersten App-Start:</strong></p>
<ul>
<li>Überspringe die automatische Registrierung in der App.</li>
<li>
Suche nach der Option <strong>„Heimserver ändern"</strong>
(oder Homeserver wechseln).
</li>
<li>
Trage dort die Server-Adresse ein:
<code class="code--white">cyperpunk.de</code>
</li>
<li>
Logge dich erst danach wie gewohnt mit deinen Zugangsdaten oder
per SSO ein.
</li>
</ul>
</section>
<!-- Sektion 3: Erster Login & Sicherheit -->
<section id="first-login" aria-labelledby="heading-first-login">
<h2 id="heading-first-login">3. Erster Login &amp; Sicherheitsschlüssel</h2>
<div class="matrix-alert" role="alert" aria-label="Sicherheitswarnung">
<h3>⚠️ WARNUNG: Kryptografische Schlüssel sichern</h3>
<p>
Diese Matrix Instanz erzwingt standardmäßig eine vollständige
Ende-zu-Ende-Verschlüsselung (E2EE). Bei der ersten Verbindung
generiert dein Client eine
<strong>Passphrase als Sicherheitsschlüssel</strong>.
Sichere diesen Schlüssel extern! Solltest du dich abmelden
oder das Gerät wechseln und diesen Schlüssel verlieren, sind deine
Daten unwiderruflich verschlüsselt. Die
Administration hat keinerlei Backdoors, um deine Daten
wiederherzustellen.
</p>
</div>
<h3>Schritt-für-Schritt-Protokoll:</h3>
<ol>
<li>Wähle einen Client aus dem vorherigen Abschnitt.</li>
<li>
Der Zugriff ist entweder über klassische
<strong>User-Credentials (Nutzername & Passwort)</strong> oder über das
<strong>Single-Sign-On-Protokoll (SSO)</strong> möglich.
</li>
<li>
Bei der Nutzung von SSO wirst du automatisch zum zentralen
Identitäts-Server unter
<a
href="https://auth.cyperpunk.de/"
target="_blank"
rel="noopener"
aria-label="auth.cyperpunk.de (öffnet neuen Tab)"
><strong>auth.cyperpunk.de</strong></a
>
(powered by Kanidm) umgeleitet.
</li>
<li>
Nach erfolgreicher Authentifizierung wird deine Session für Matrix freigeschaltet.
</li>
</ol>
</section>
<!-- Sektion 4: Wie ist Matrix aufgebaut? -->
<section id="server-structures" aria-labelledby="heading-server-structures">
<h2 id="heading-server-structures">4. Wie ist Matrix aufgebaut?</h2>
<p>
Damit alles ordentlich bleibt und du dich gut zurechtfindest, ist
Matrix logisch aufgeteilt. Es gibt im Grunde zwei Ebenen:
</p>
<ol>
<li>
<strong>Spaces (Bereiche / Ordner):</strong> Der übergeordnete
Bereich wie ein kompletter Server bei Discord. Ein Space sammelt
verschiedene Rooms (Chats) an einem Ort.
</li>
<li>
<strong>Rooms (Räume / Chats):</strong> Die eigentlichen Text- oder
Sprachkanäle innerhalb eines Bereichs. Hier wird geschrieben,
telefoniert und Material geteilt.
</li>
</ol>
<p><strong>Tipps für Admins und Moderatoren:</strong></p>
<ul>
<li>
Erstelle zuerst einen <strong>Space (Bereich)</strong>, dann packst
du die einzelnen Chats geordnet dort hinein.
</li>
<li>
Verwende klare, einfache Namen für deine Räume das erleichtert
allen die Übersicht in der Seitenleiste.
</li>
</ul>
</section>
<!-- Sektion 5: Sprachkanäle & Dateilimits -->
<section id="infrastructure" aria-labelledby="heading-infrastructure">
<h2 id="heading-infrastructure">5. Sprachkanäle &amp; Speicherplatzlimits</h2>
<p>
Der Server stellt Kanäle bereit, mit denen du direkt über das
Internet mit anderen Mitgliedern sprechen oder Dateien austauschen
kannst.
</p>
<div class="cards-grid">
<div class="card">
<h3 class="card-title">Anrufe in Gruppen</h3>
<p class="card-text">
Bei Gruppengesprächen in einem Raum übernimmt der Server im
Hintergrund automatisch die Audio- und Bildübertragung für eine
stabile Verbindung.
</p>
</div>
<div class="card">
<h3 class="card-title">Direktanrufe (1:1)</h3>
<p class="card-text">
Telefonate mit nur einer Person werden sicher und direkt
aufgebaut. Ein integrierter Hilfsdienst (Coturn) sorgt dafür, dass die
Verbindung auch durch Firewalls hinweg klappt.
</p>
</div>
<div class="card full-width-card card--warning">
<h3 class="card-title card-title--warning">Dateigröße &amp; faires Teilen</h3>
<p class="card-text">
Das Hochladen von Bildern, Videos oder Dokumenten ist auf maximal
<strong>50 MB pro Datei</strong> begrenzt. Der verfügbare
Festplattenplatz ist begrenzt ein sparsamer Umgang mit großen
Dateien wird empfohlen.
</p>
</div>
</div>
</section>
<!-- Sektion 6: FAQ -->
<section id="faq" aria-labelledby="heading-faq">
<h2 id="heading-faq">6. FAQ Häufige Fragen</h2>
<h3>Was ist Matrix?</h3>
<p>
Matrix ist ein offenes, dezentrales Kommunikationsprotokoll ähnlich
wie E-Mail, aber für Echtzeit-Chat und Anrufe. Jeder kann seinen
eigenen Server betreiben, und Server können miteinander kommunizieren.
</p>
<h3>Warum kein Discord?</h3>
<p>
Discord ist ein zentralisierter Dienst, der Nutzerdaten speichert und
auswerten kann. Matrix ist Open Source, selbst gehostet und
Ende-zu-Ende-verschlüsselt du behältst die Kontrolle über deine
Daten.
</p>
<h3>Kann ich meinen bestehenden Matrix-Account verwenden?</h3>
<p>
Ja. Von jedem Matrix-Server aus lässt sich dem Raum
<code class="code--white">#cyperpunk:cyperpunk.de</code> beitreten einfach die eigene
Adresse <code class="code--white">@deinname:deinserver.de</code> verwenden.
</p>
<h3>Wie bekomme ich einen Account auf diesem Server?</h3>
<p>
Fülle das Registrierungsformular oben aus. Der Administrator prüft
deine Anfrage und schickt dir die Zugangsdaten per E-Mail.
</p>
<h3>Sind meine Nachrichten verschlüsselt?</h3>
<p>
Ja. Dieser Server erzwingt Ende-zu-Ende-Verschlüsselung (E2EE) in
allen privaten Chats. Stelle sicher, dass du deinen
Sicherheitsschlüssel beim ersten Login sicherst.
</p>
<h3>Was kostet das?</h3>
<p>Nichts. Der Server wird privat betrieben und ist kostenlos nutzbar.</p>
</section>
<!-- Trennbereich: Für Fortgeschrittene -->
<div
class="advanced-separator"
role="note"
aria-label="Beginn des Fortgeschrittenen-Bereichs"
>
<h2>Für Fortgeschrittene</h2>
<p>
Die folgenden Abschnitte richten sich an Nutzer, die den Server aktiv
mitgestalten oder erweitern möchten z.&nbsp;B. Bots einbinden,
Discord-Kanäle verbinden oder Matrix-Begriffe mit Discord vergleichen.
Als normaler Nutzer brauchst du das nicht.
</p>
</div>
<!-- Sektion 7: Maubots -->
<section id="maubots" aria-labelledby="heading-maubots">
<h2 id="heading-maubots">7. Aktive Automatisierungs-Bots (Maubot)</h2>
<p>
Das <strong>Maubot</strong>-Framework ermöglicht die Integration
automatisierter Skripte in das Raum-Netzwerk. Die Instanz dieses
Servers ist erreichbar unter:
<code class="code--white">@maubot:cyperpunk.de</code>.
</p>
<p>
<strong>Bedienung:</strong> Die Entität kann
<strong>in jeden beliebigen Raum eingeladen</strong> werden, um die
geladenen Module per Textbefehl zu aktivieren. Aktive Subroutinen:
</p>
<div class="cards-grid">
<div class="card">
<h3 class="card-title">Urban Dictionary</h3>
<p class="card-text">
Analysiert Slang-Begriffe, Definitionen und sprachliche Variablen
direkt im Raum-Feed.<br />
<a
href="https://github.com/dvdgsng/UrbanMaubot/blob/master/README.md"
target="_blank"
rel="noopener"
aria-label="Urban Dictionary Maubot Dokumentation (öffnet neuen Tab)"
>Dokumentation</a
>
</p>
</div>
<div class="card">
<h3 class="card-title">RSS News-Feeds</h3>
<p class="card-text">
Abonniert externe Informations-Feeds und speist Updates
vollautomatisch in den Chat-Stream ein.<br />
<a
href="https://github.com/maubot/rss/blob/master/README.md"
target="_blank"
rel="noopener"
aria-label="RSS Maubot Dokumentation (öffnet neuen Tab)"
>Dokumentation</a
>
</p>
</div>
<div class="card">
<h3 class="card-title">Reminder</h3>
<p class="card-text">
Ermöglicht das Setzen von Timern, Cron-Triggern und
zeitgesteuerten Alarmen im Raum.<br />
<a
href="https://github.com/maubot/reminder/blob/master/README.md"
target="_blank"
rel="noopener"
aria-label="Reminder Maubot Dokumentation (öffnet neuen Tab)"
>Dokumentation</a
>
</p>
</div>
<div class="card">
<h3 class="card-title">Wetter-Array</h3>
<p class="card-text">
Fragt aktuelle Klimadaten und meteorologische Berichte für globale
Koordinaten ab.<br />
<a
href="https://github.com/kellya/maubot-weather/blob/main/README.md"
target="_blank"
rel="noopener"
aria-label="Weather Maubot Dokumentation (öffnet neuen Tab)"
>Dokumentation</a
>
</p>
</div>
</div>
</section>
<!-- Sektion 8: Discord Bridge -->
<section id="discord-bridge" aria-labelledby="heading-discord-bridge">
<h2 id="heading-discord-bridge">8. Discord Bridge</h2>
<p>
Die Mautrix Discord Bridge spiegelt Nachrichten nahtlos zwischen Matrix
und externen Discord-Gilden.
</p>
<p>
<strong>Ident-ID der Discord-Bridge:</strong>
<code class="code--white">@discordbot:cyperpunk.de</code>
</p>
<h3>Befehlssatz:</h3>
<ul>
<li>
Öffne eine Direktnachricht (DM) mit dem Bridge-Bot, um Befehle
einzuspeisen.
</li>
<li>
Im DM-Kanal versteht der Bot das Kommando
<code class="code--white">help</code> direkt.
</li>
<li>
In geteilten Räumen muss das Präfix vorangestellt werden:
<code class="code--white">!discord help</code>.
</li>
</ul>
</section>
<!-- Sektion 9: Discord-zu-Matrix Referenz -->
<section id="codex" aria-labelledby="heading-codex">
<h2 id="heading-codex">9. Discord-zu-Matrix Referenz-Codex</h2>
<p>
Diese Tabelle zeigt, wie bekannte Discord-Konzepte in Matrix heißen:
</p>
<table class="codex-table" aria-label="Discord-zu-Matrix Vergleichstabelle">
<thead>
<tr>
<th scope="col">Discord-Konstrukt</th>
<th scope="col">Matrix-Spezifikation</th>
<th scope="col">Funktion im Netz</th>
</tr>
</thead>
<tbody>
<tr>
<td>Server / Gilde</td>
<td><strong>Space</strong></td>
<td>Ein virtueller Container, der Räume unter einem Thema bündelt.</td>
</tr>
<tr>
<td>Text- / Sprachkanal</td>
<td><strong>Room</strong></td>
<td>Der Endpunkt für Textnachrichten, Bilddaten oder Telefonie.</td>
</tr>
<tr>
<td>Direktnachricht (DM)</td>
<td><strong>Direkt-Chat</strong></td>
<td>Ein kryptografisch isolierter 1:1-Kanal zwischen zwei Accounts.</td>
</tr>
<tr>
<td>Rollen &amp; Rechte</td>
<td><strong>Power Levels</strong></td>
<td>Ein numerischer Berechtigungswert (0100) zur Steuerung von Moderations-Rechten.</td>
</tr>
<tr>
<td>Nitro Emojis</td>
<td><strong>Emote-Packs</strong></td>
<td>Serverweite Sticker- und Emoji-Bibliotheken dezentral und kostenfrei.</td>
</tr>
</tbody>
</table>
</section>
</main>
<!-- Footer -->
<footer>
<p class="footer-line">[ EOF ] /////// TRANSMISSION COMPLETE ///////</p>
<p class="footer-credit">GENERATED BY <span>CLAUDE</span> // ANTHROPIC &middot; <span>claude-sonnet-4-6</span></p>
</footer>
<script src="app.js"></script>
</body>
</html>