222 lines
8.7 KiB
HTML
222 lines
8.7 KiB
HTML
<!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 & 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="#">Profil bearbeiten</a>
|
||
<a href="#">Benachrichtigungen konfigurieren</a>
|
||
<a href="#">Passwort ändern</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="#">Premium-Funktionen im Überblick</a>
|
||
<a href="#">Abonnement kündigen</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="#">Neues Lock starten</a>
|
||
<a href="#">Die Rolle als Keyholder</a>
|
||
<a href="#">Karten und Aufgaben</a>
|
||
<a href="#">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="#">Session starten</a>
|
||
<a href="#">Spieler einladen</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="#">Vanilla-Session starten</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="#">Gruppe erstellen</a>
|
||
<a href="#">Mitglieder verwalten</a>
|
||
<a href="#">Beiträge und Abstimmungen</a>
|
||
</div>
|
||
</div>
|
||
<div class="hilfe-card">
|
||
<div class="hilfe-card-title">📰 Feed & Profil</div>
|
||
<div class="hilfe-card-desc">Beiträge teilen, Profile entdecken und die Community kennenlernen.</div>
|
||
<div class="hilfe-card-links">
|
||
<a href="#">Feed nutzen</a>
|
||
<a href="#">Profil gestalten</a>
|
||
<a href="#">Personen suchen und folgen</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="#">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 & 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="#">Datenspeicherung</a>
|
||
<a href="#">Passwort-Hashing</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="#">Feedback senden</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<script src="/js/icons.js"></script>
|
||
<script src="/js/sidebar.js"></script>
|
||
</body>
|
||
</html>
|