Files
xxx-sphere-web/bin/main/static/help/overview.html
Mario 4f2048bdc8
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
Weiter gebaut
2026-04-25 16:56:35 +02:00

227 lines
9.8 KiB
HTML
Raw Permalink 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">
<link rel="icon" href="/img/icon.png" type="image/png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hilfe-Übersicht xXx Sphere</title>
<link rel="stylesheet" href="/css/variables.css">
<link rel="stylesheet" href="/css/style.css">
<style>
.hilfe-header {
margin-bottom: 2rem;
}
.hilfe-header h1 {
font-size: 1.6rem;
margin: 0 0 0.4rem 0;
}
.hilfe-header p {
color: var(--color-muted);
font-size: 0.92rem;
margin: 0;
line-height: 1.6;
}
/* ── Kategorien-Grid ── */
.hilfe-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.hilfe-card {
background: var(--color-card);
border: 1px solid var(--color-secondary);
border-radius: 10px;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.hilfe-card-title {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 1rem;
font-weight: 700;
border-bottom: 1px solid var(--color-secondary);
padding-bottom: 0.6rem;
}
.hilfe-card-desc {
font-size: 0.85rem;
color: var(--color-muted);
line-height: 1.6;
}
.hilfe-card-links {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin-top: 0.25rem;
}
.hilfe-card-links a {
font-size: 0.85rem;
color: var(--color-muted);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.4rem;
transition: color 0.15s;
}
.hilfe-card-links a:hover {
color: var(--color-text);
}
.hilfe-card-links a::before {
content: '';
font-size: 1rem;
color: var(--color-primary);
flex-shrink: 0;
}
/* ── Abschnitt-Überschrift ── */
.hilfe-section-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-muted);
margin: 1.75rem 0 0.75rem;
}
.hilfe-section-label:first-child {
margin-top: 0;
}
</style>
</head>
<body class="app">
<div class="main">
<div class="content">
<div class="hilfe-header">
<h1>❓ Hilfe-Übersicht</h1>
<p>Hier findest du Anleitungen und Erklärungen zu allen Bereichen von xXx Sphere.</p>
</div>
<!-- ── Einstellungen & Konto ── -->
<div class="hilfe-section-label">Einstellungen &amp; Konto</div>
<div class="hilfe-grid">
<div class="hilfe-card">
<div class="hilfe-card-title">⚙️ Allgemeine Einstellungen</div>
<div class="hilfe-card-desc">Profil, Benachrichtigungen, Datenschutz und weitere Kontoeinstellungen.</div>
<div class="hilfe-card-links">
<a href="/help/konto.html#sec-profil">Profil bearbeiten</a>
<a href="/help/konto.html#sec-benachrichtigungen">Benachrichtigungen konfigurieren</a>
<a href="/help/konto.html#sec-passwort">Passwort ändern</a>
<a href="/help/konto.html#sec-datenschutz">Datenschutz-Einstellungen</a>
</div>
</div>
<div class="hilfe-card">
<div class="hilfe-card-title">🔒 TTLock-Integration</div>
<div class="hilfe-card-desc">Verbinde deine physische Schlüsselbox mit xXx Sphere für automatische Code-Verwaltung.</div>
<div class="hilfe-card-links">
<a href="/help/ttlock.html#sec-intro">Was ist TTLock?</a>
<a href="/help/ttlock.html#sec-table">Voraussetzungen</a>
<a href="/help/ttlock.html#sec-howto">TTLock einrichten</a>
<a href="/help/ttlock.html#sec-faq1">Warum nur für Abonnenten?</a>
<a href="/help/ttlock.html#sec-faq2">Notfall-Öffnung</a>
</div>
</div>
<div class="hilfe-card">
<div class="hilfe-card-title">💳 Abonnements</div>
<div class="hilfe-card-desc">Informationen zu Premium-Funktionen und wie du dein Abonnement verwaltest.</div>
<div class="hilfe-card-links">
<a href="/help/abonnements.html#sec-vergleich">Premium-Funktionen im Überblick</a>
<a href="/help/abonnements.html#sec-verwalten">Abonnement verwalten</a>
<a href="/help/abonnements.html#sec-faq1">Was passiert nach einer Kündigung?</a>
</div>
</div>
</div>
<!-- ── Spiele ── -->
<div class="hilfe-section-label">Spiele</div>
<div class="hilfe-grid">
<div class="hilfe-card">
<div class="hilfe-card-title">🔒 Chastity Game</div>
<div class="hilfe-card-desc">Alles rund um Schlösser, Keyholder, Karten und Aufgaben im Chastity Game.</div>
<div class="hilfe-card-links">
<a href="/help/chastity.html#sec-newlock">Neues Lock starten</a>
<a href="/help/chastity.html#sec-keyholder">Die Rolle als Keyholder</a>
<a href="/help/chastity.html#sec-karten">Karten und Aufgaben</a>
<a href="/help/chastity.html#sec-timelock">TimeLock erklärt</a>
</div>
</div>
<div class="hilfe-card">
<div class="hilfe-card-title">⛓️ BDSM Game</div>
<div class="hilfe-card-desc">Sessions erstellen, Spieler einladen und Aufgaben verwalten.</div>
<div class="hilfe-card-links">
<a href="/help/bdsm.html#sec-session">Session starten</a>
<a href="/help/bdsm.html#sec-einladen">Spieler einladen</a>
<a href="/help/bdsm.html#sec-aufgaben">Aufgaben verwalten</a>
</div>
</div>
<div class="hilfe-card">
<div class="hilfe-card-title">⚪ Vanilla Game</div>
<div class="hilfe-card-desc">Leichtere Spiele ohne strenge Regeln für den entspannten Einstieg.</div>
<div class="hilfe-card-links">
<a href="/help/vanilla.html#sec-session">Vanilla-Session starten</a>
<a href="/help/vanilla.html#sec-karten">Karten und Aufgaben</a>
<a href="/help/vanilla.html#sec-faq2">Unterschied zu BDSM Game</a>
</div>
</div>
</div>
<!-- ── Community ── -->
<div class="hilfe-section-label">Community</div>
<div class="hilfe-grid">
<div class="hilfe-card">
<div class="hilfe-card-title">👥 Gruppen</div>
<div class="hilfe-card-desc">Gruppen erstellen, beitreten und verwalten.</div>
<div class="hilfe-card-links">
<a href="/help/community.html#sec-gruppe-erstellen">Gruppe erstellen</a>
<a href="/help/community.html#sec-mitglieder">Mitglieder verwalten</a>
</div>
</div>
<div class="hilfe-card">
<div class="hilfe-card-title">📰 Feed &amp; Profil</div>
<div class="hilfe-card-desc">Beiträge teilen, Profile entdecken und die Community kennenlernen.</div>
<div class="hilfe-card-links">
<a href="/help/community.html#sec-feed">Feed nutzen</a>
<a href="/help/community.html#sec-profil">Profil gestalten &amp; folgen</a>
<a href="/help/community.html#sec-nachrichten">Nachrichten</a>
</div>
</div>
<div class="hilfe-card">
<div class="hilfe-card-title">🏆 Community Votes</div>
<div class="hilfe-card-desc">Verifikationen bewerten und an Community-Abstimmungen teilnehmen.</div>
<div class="hilfe-card-links">
<a href="/help/community.html#sec-votes">Wie funktionieren Votes?</a>
</div>
</div>
</div>
<!-- ── Sonstiges ── -->
<div class="hilfe-section-label">Sonstiges</div>
<div class="hilfe-grid">
<div class="hilfe-card">
<div class="hilfe-card-title">🔐 Sicherheit &amp; Datenschutz</div>
<div class="hilfe-card-desc">Wie deine Daten gespeichert werden und welche Sicherheitsmaßnahmen wir treffen.</div>
<div class="hilfe-card-links">
<a href="/help/datenschutz.html#sec-gespeicherte-daten">Was wird gespeichert?</a>
<a href="/help/datenschutz.html#sec-passwort-hashing">Passwort-Hashing</a>
<a href="/help/datenschutz.html#sec-verbindung">Verbindungssicherheit</a>
</div>
</div>
<div class="hilfe-card">
<div class="hilfe-card-title">🐛 Fehler melden</div>
<div class="hilfe-card-desc">Hast du einen Fehler gefunden oder einen Verbesserungsvorschlag?</div>
<div class="hilfe-card-links">
<a href="/help/kontakt.html">Feedback &amp; Kontakt</a>
</div>
</div>
</div>
</div>
</div>
<script src="/js/icons.js"></script>
<script src="/js/nav.js"></script>
</body>
</html>