Weiter gebaut
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
This commit is contained in:
181
bin/main/static/help/abonnements.html
Normal file
181
bin/main/static/help/abonnements.html
Normal file
@@ -0,0 +1,181 @@
|
||||
<!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 Abonnements – 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; }
|
||||
|
||||
.hilfe-section { background: var(--color-card); border: 1px solid var(--color-secondary); border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden; }
|
||||
.hilfe-section-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; cursor: pointer; user-select: none; transition: background 0.15s; }
|
||||
.hilfe-section-header:hover { background: rgba(255,255,255,0.03); }
|
||||
.hilfe-section-title { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 600; }
|
||||
.hilfe-section-arrow { font-size: 0.75rem; color: var(--color-muted); transition: transform 0.2s; }
|
||||
.hilfe-section.open .hilfe-section-arrow { transform: rotate(90deg); }
|
||||
.hilfe-section-body { display: none; padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--color-secondary); }
|
||||
.hilfe-section.open .hilfe-section-body { display: block; }
|
||||
.hilfe-section-body p { font-size: 0.9rem; color: var(--color-muted); line-height: 1.7; margin: 0.9rem 0 0; }
|
||||
.hilfe-section-body p:first-child { margin-top: 1rem; }
|
||||
|
||||
.hilfe-hint { background: rgba(var(--color-primary-rgb, 120,80,200), 0.08); border-left: 3px solid var(--color-primary); border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-hint strong { color: var(--color-text); }
|
||||
.hilfe-warn { background: rgba(231,76,60,0.08); border-left: 3px solid #e74c3c; border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-warn strong { color: #e74c3c; }
|
||||
.hilfe-info { background: var(--color-secondary); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
|
||||
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem; }
|
||||
@media (max-width: 520px) { .feature-grid { grid-template-columns: 1fr; } }
|
||||
.feature-col { background: var(--color-secondary); border-radius: 8px; padding: 0.85rem 1rem; }
|
||||
.feature-col-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.6rem; }
|
||||
.feature-col-title.free { color: var(--color-muted); }
|
||||
.feature-col-title.premium { color: var(--color-primary); }
|
||||
.feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
|
||||
.feature-list li { font-size: 0.85rem; color: var(--color-muted); display: flex; align-items: flex-start; gap: 0.5rem; }
|
||||
.feature-list li::before { content: '•'; color: var(--color-primary); flex-shrink: 0; }
|
||||
|
||||
.hilfe-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 1rem; }
|
||||
.hilfe-table th { text-align: left; color: var(--color-text); font-weight: 600; padding: 0.4rem 0.75rem 0.4rem 0; border-bottom: 1px solid var(--color-secondary); }
|
||||
.hilfe-table td { color: var(--color-muted); padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; line-height: 1.5; }
|
||||
.hilfe-table tr:last-child td { border-bottom: none; }
|
||||
.hilfe-badge { display: inline-block; background: var(--color-secondary); border-radius: 4px; padding: 0.1rem 0.45rem; font-size: 0.78rem; font-weight: 600; color: var(--color-muted); vertical-align: middle; }
|
||||
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-muted); text-decoration: none; margin-bottom: 1.25rem; transition: color 0.15s; }
|
||||
.back-link:hover { color: var(--color-text); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
|
||||
<a href="/help/overview.html" class="back-link">‹ Zurück zur Hilfe-Übersicht</a>
|
||||
|
||||
<div class="hilfe-header">
|
||||
<h1>💳 Abonnements</h1>
|
||||
<p>Informationen zu Premium-Funktionen und wie du dein Abonnement verwaltest.</p>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section open" id="sec-philosophy">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-philosophy')">
|
||||
<span class="hilfe-section-title">💡 Unser Ansatz</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
xXx Sphere soll niemanden reich machen. Die Abonnements dienen ausschließlich dazu, laufende Kosten wie Server, Datenbanken und externe API-Dienste zu decken.
|
||||
</p>
|
||||
<p>
|
||||
Die wesentlichen Funktionen der Plattform – Community, Spiele, Feed und Profile – sind kostenlos nutzbar. Premium-Funktionen betreffen vor allem Hardware-Integrationen und erweiterte Automatisierungen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-vergleich">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-vergleich')">
|
||||
<span class="hilfe-section-title">📋 Free vs. Premium</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<div class="feature-grid">
|
||||
<div class="feature-col">
|
||||
<div class="feature-col-title free">Kostenlos</div>
|
||||
<ul class="feature-list">
|
||||
<li>Chastity, BDSM und Vanilla Game</li>
|
||||
<li>Unbegrenzte Aufgaben und Karten</li>
|
||||
<li>Community, Gruppen, Feed</li>
|
||||
<li>Direktnachrichten</li>
|
||||
<li>Dating-Funktionen</li>
|
||||
<li>Profil und Freunde</li>
|
||||
<li>Community Votes</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-col">
|
||||
<div class="feature-col-title premium">Premium</div>
|
||||
<ul class="feature-list">
|
||||
<li>TTLock-Integration (automatische Code-Verwaltung)</li>
|
||||
<li>Automatische Lock-Öffnung via API</li>
|
||||
<li>Erweiterte Spielstatistiken</li>
|
||||
<li>Priorität beim Community-Support</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hilfe-hint">
|
||||
<strong>Hinweis:</strong> Der Funktionsumfang der Abonnements befindet sich noch im Aufbau und wird laufend erweitert.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-verwalten">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-verwalten')">
|
||||
<span class="hilfe-section-title">⚙️ Abonnement verwalten</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Dein aktives Abonnement findest und verwaltest du unter <strong>Community → Abonnements</strong>.
|
||||
</p>
|
||||
<table class="hilfe-table">
|
||||
<thead><tr><th>Aktion</th><th>Beschreibung</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><span class="hilfe-badge">Abschließen</span></td><td>Neues Abonnement aktivieren.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Verlängern</span></td><td>Laufzeit manuell verlängern.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Kündigen</span></td><td>Abonnement zum Ende der aktuellen Laufzeit kündigen.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-faq1">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq1')">
|
||||
<span class="hilfe-section-title">❓ Was passiert nach einer Kündigung?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Nach einer Kündigung bleibt dein Premium-Zugang bis zum Ende der bezahlten Laufzeit aktiv. Danach fallen die Premium-Funktionen weg – deine Daten und dein Account bleiben erhalten.
|
||||
</p>
|
||||
<div class="hilfe-warn">
|
||||
<strong>Achtung:</strong> Aktive TTLock-Verbindungen werden nach Ablauf des Abonnements deaktiviert. Laufende Locks werden davon nicht sofort beeinflusst, können aber nach dem Ablauf nicht mehr automatisch geöffnet werden.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-faq2">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq2')">
|
||||
<span class="hilfe-section-title">❓ Gibt es eine Testphase?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Derzeit gibt es keine automatische Testphase. Wende dich über <a href="/help/kontakt.html">Kontakt & Feedback</a> an uns, wenn du Premium-Funktionen testen möchtest – wir helfen gerne weiter.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/icons.js"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
<script>
|
||||
function toggleSection(id) {
|
||||
document.getElementById(id).classList.toggle('open');
|
||||
}
|
||||
function openFromHash() {
|
||||
const hash = window.location.hash.slice(1);
|
||||
if (!hash) return;
|
||||
const el = document.getElementById(hash);
|
||||
if (el && el.classList.contains('hilfe-section')) {
|
||||
el.classList.add('open');
|
||||
setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'start' }), 50);
|
||||
}
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', openFromHash);
|
||||
window.addEventListener('hashchange', openFromHash);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
180
bin/main/static/help/bdsm.html
Normal file
180
bin/main/static/help/bdsm.html
Normal file
@@ -0,0 +1,180 @@
|
||||
<!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 BDSM Game – 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; }
|
||||
|
||||
.hilfe-section { background: var(--color-card); border: 1px solid var(--color-secondary); border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden; }
|
||||
.hilfe-section-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; cursor: pointer; user-select: none; transition: background 0.15s; }
|
||||
.hilfe-section-header:hover { background: rgba(255,255,255,0.03); }
|
||||
.hilfe-section-title { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 600; }
|
||||
.hilfe-section-arrow { font-size: 0.75rem; color: var(--color-muted); transition: transform 0.2s; }
|
||||
.hilfe-section.open .hilfe-section-arrow { transform: rotate(90deg); }
|
||||
.hilfe-section-body { display: none; padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--color-secondary); }
|
||||
.hilfe-section.open .hilfe-section-body { display: block; }
|
||||
.hilfe-section-body p { font-size: 0.9rem; color: var(--color-muted); line-height: 1.7; margin: 0.9rem 0 0; }
|
||||
.hilfe-section-body p:first-child { margin-top: 1rem; }
|
||||
|
||||
.hilfe-steps { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
|
||||
.hilfe-steps li { list-style: none; display: flex; align-items: flex-start; gap: 0.85rem; font-size: 0.9rem; color: var(--color-muted); line-height: 1.6; }
|
||||
.hilfe-steps li::before { display: none; }
|
||||
.hilfe-steps li .step-num { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; }
|
||||
|
||||
.hilfe-hint { background: rgba(var(--color-primary-rgb, 120,80,200), 0.08); border-left: 3px solid var(--color-primary); border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-hint strong { color: var(--color-text); }
|
||||
.hilfe-warn { background: rgba(231,76,60,0.08); border-left: 3px solid #e74c3c; border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-warn strong { color: #e74c3c; }
|
||||
.hilfe-info { background: var(--color-secondary); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 1rem; }
|
||||
.hilfe-table th { text-align: left; color: var(--color-text); font-weight: 600; padding: 0.4rem 0.75rem 0.4rem 0; border-bottom: 1px solid var(--color-secondary); }
|
||||
.hilfe-table td { color: var(--color-muted); padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; line-height: 1.5; }
|
||||
.hilfe-table tr:last-child td { border-bottom: none; }
|
||||
.hilfe-badge { display: inline-block; background: var(--color-secondary); border-radius: 4px; padding: 0.1rem 0.45rem; font-size: 0.78rem; font-weight: 600; color: var(--color-muted); vertical-align: middle; }
|
||||
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-muted); text-decoration: none; margin-bottom: 1.25rem; transition: color 0.15s; }
|
||||
.back-link:hover { color: var(--color-text); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
|
||||
<a href="/help/overview.html" class="back-link">‹ Zurück zur Hilfe-Übersicht</a>
|
||||
|
||||
<div class="hilfe-header">
|
||||
<h1>⛓️ BDSM Game</h1>
|
||||
<p>Sessions erstellen, Spieler einladen und Aufgaben verwalten.</p>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section open" id="sec-intro">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-intro')">
|
||||
<span class="hilfe-section-title">📖 Was ist das BDSM Game?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Das BDSM Game ermöglicht strukturierte Spielsessions zwischen einem <strong>Dom</strong> (Dominant) und einem oder mehreren <strong>Subs</strong> (Submissive). Der Dom erstellt die Session, legt Regeln und Aufgaben fest und überwacht den Verlauf.
|
||||
</p>
|
||||
<p>
|
||||
Aufgaben können zufällig aus dem Aufgaben-Pool gezogen oder manuell vergeben werden. Jede Session hat einen definierten Anfang und ein definiertes Ende.
|
||||
</p>
|
||||
<div class="hilfe-hint">
|
||||
<strong>Safe Word:</strong> Lege vor jeder Session ein Safe Word fest. Das Safe Word beendet die Session sofort und unbedingt – unabhängig vom Spielstand.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-session">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-session')">
|
||||
<span class="hilfe-section-title">🚀 Session starten</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>Als Dom startest du eine neue Session so:</p>
|
||||
<ol class="hilfe-steps">
|
||||
<li><span class="step-num">1</span><span>Navigiere zu <strong>BDSM → Neue Session</strong>.</span></li>
|
||||
<li><span class="step-num">2</span><span>Vergib einen Session-Namen und lege die Intensität fest (<span class="hilfe-badge">Leicht</span> / <span class="hilfe-badge">Mittel</span> / <span class="hilfe-badge">Intensiv</span>).</span></li>
|
||||
<li><span class="step-num">3</span><span>Wähle die Aufgaben-Sets, die während der Session aktiv sein sollen.</span></li>
|
||||
<li><span class="step-num">4</span><span>Lade Mitspieler per Nutzername oder Einladungslink ein (siehe unten).</span></li>
|
||||
<li><span class="step-num">5</span><span>Starte die Session. Alle eingeladenen Subs erhalten eine Benachrichtigung.</span></li>
|
||||
</ol>
|
||||
<div class="hilfe-warn">
|
||||
<strong>Achtung:</strong> Eine laufende Session kann nur vom Dom beendet werden oder wenn das Safe Word ausgelöst wird.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-einladen">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-einladen')">
|
||||
<span class="hilfe-section-title">👥 Spieler einladen</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Spieler können auf zwei Wegen in eine Session eingeladen werden:
|
||||
</p>
|
||||
<table class="hilfe-table">
|
||||
<thead><tr><th>Methode</th><th>Beschreibung</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><span class="hilfe-badge">Nutzername</span></td><td>Gib den Nutzernamen direkt ein. Nur für registrierte Nutzer, die dir folgen oder mit dir befreundet sind.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Einladungslink</span></td><td>Generiere einen einmalig verwendbaren Link. Jede Person mit dem Link kann beitreten (auch Nicht-Freunde).</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="hilfe-hint">
|
||||
<strong>Tipp:</strong> Teile Einladungslinks nur über sichere Kanäle. Ein Link kann nur einmal verwendet werden und verfällt nach 24 Stunden.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-aufgaben">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-aufgaben')">
|
||||
<span class="hilfe-section-title">📋 Aufgaben verwalten</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Aufgaben sind das Herzstück des BDSM Games. Eigene Aufgaben kannst du unter <strong>BDSM → Aufgaben</strong> anlegen und bearbeiten.
|
||||
</p>
|
||||
<p>
|
||||
Während einer aktiven Session kann der Dom jederzeit eine neue Aufgabe vergeben. Der Sub muss die Aufgabe bestätigen oder Einwände erheben. Nicht erfüllte Aufgaben werden protokolliert.
|
||||
</p>
|
||||
<div class="hilfe-info">
|
||||
Aufgaben können öffentlich als Vorlagen geteilt werden. Andere Nutzer können diese Vorlagen in ihre eigenen Sammlungen übernehmen.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-faq1">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq1')">
|
||||
<span class="hilfe-section-title">❓ Was passiert, wenn ein Sub die Session verlässt?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Verlässt ein Sub die Session vorzeitig (ohne Safe Word), wird dies als Verstoß protokolliert. Der Dom kann die Session dennoch fortsetzen, wenn weitere Subs teilnehmen. Bei nur einem Sub endet die Session automatisch.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-faq2">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq2')">
|
||||
<span class="hilfe-section-title">❓ Kann ich Aufgaben aus dem Community-Pool nutzen?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Ja. Unter <strong>BDSM → Entdecken</strong> findest du öffentlich geteilte Aufgaben-Sets der Community. Du kannst diese direkt in deine eigene Sammlung übernehmen und für Sessions verwenden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/icons.js"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
<script>
|
||||
function toggleSection(id) {
|
||||
document.getElementById(id).classList.toggle('open');
|
||||
}
|
||||
function openFromHash() {
|
||||
const hash = window.location.hash.slice(1);
|
||||
if (!hash) return;
|
||||
const el = document.getElementById(hash);
|
||||
if (el && el.classList.contains('hilfe-section')) {
|
||||
el.classList.add('open');
|
||||
setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'start' }), 50);
|
||||
}
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', openFromHash);
|
||||
window.addEventListener('hashchange', openFromHash);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
213
bin/main/static/help/chastity.html
Normal file
213
bin/main/static/help/chastity.html
Normal file
@@ -0,0 +1,213 @@
|
||||
<!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 Chastity Game – 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; }
|
||||
|
||||
.hilfe-section { background: var(--color-card); border: 1px solid var(--color-secondary); border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden; }
|
||||
.hilfe-section-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; cursor: pointer; user-select: none; transition: background 0.15s; }
|
||||
.hilfe-section-header:hover { background: rgba(255,255,255,0.03); }
|
||||
.hilfe-section-title { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 600; }
|
||||
.hilfe-section-arrow { font-size: 0.75rem; color: var(--color-muted); transition: transform 0.2s; }
|
||||
.hilfe-section.open .hilfe-section-arrow { transform: rotate(90deg); }
|
||||
.hilfe-section-body { display: none; padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--color-secondary); }
|
||||
.hilfe-section.open .hilfe-section-body { display: block; }
|
||||
.hilfe-section-body p { font-size: 0.9rem; color: var(--color-muted); line-height: 1.7; margin: 0.9rem 0 0; }
|
||||
.hilfe-section-body p:first-child { margin-top: 1rem; }
|
||||
|
||||
.hilfe-steps { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
|
||||
.hilfe-steps li { list-style: none; display: flex; align-items: flex-start; gap: 0.85rem; font-size: 0.9rem; color: var(--color-muted); line-height: 1.6; }
|
||||
.hilfe-steps li::before { display: none; }
|
||||
.hilfe-steps li .step-num { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; }
|
||||
|
||||
.hilfe-hint { background: rgba(var(--color-primary-rgb, 120,80,200), 0.08); border-left: 3px solid var(--color-primary); border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-hint strong { color: var(--color-text); }
|
||||
.hilfe-warn { background: rgba(231,76,60,0.08); border-left: 3px solid #e74c3c; border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-warn strong { color: #e74c3c; }
|
||||
.hilfe-info { background: var(--color-secondary); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 1rem; }
|
||||
.hilfe-table th { text-align: left; color: var(--color-text); font-weight: 600; padding: 0.4rem 0.75rem 0.4rem 0; border-bottom: 1px solid var(--color-secondary); }
|
||||
.hilfe-table td { color: var(--color-muted); padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; line-height: 1.5; }
|
||||
.hilfe-table tr:last-child td { border-bottom: none; }
|
||||
.hilfe-badge { display: inline-block; background: var(--color-secondary); border-radius: 4px; padding: 0.1rem 0.45rem; font-size: 0.78rem; font-weight: 600; color: var(--color-muted); vertical-align: middle; }
|
||||
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-muted); text-decoration: none; margin-bottom: 1.25rem; transition: color 0.15s; }
|
||||
.back-link:hover { color: var(--color-text); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
|
||||
<a href="/help/overview.html" class="back-link">‹ Zurück zur Hilfe-Übersicht</a>
|
||||
|
||||
<div class="hilfe-header">
|
||||
<h1>🔒 Chastity Game</h1>
|
||||
<p>Alles rund um Locks, Keyholder, Karten und Aufgaben im Chastity Game.</p>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section open" id="sec-intro">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-intro')">
|
||||
<span class="hilfe-section-title">📖 Was ist das Chastity Game?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Das Chastity Game ist ein interaktives Rollenspiel für zwei Personen: eine Person übernimmt die Rolle des <strong>Wearers</strong> (trägt das Gerät), die andere die des <strong>Keyholders</strong> (verwaltet den Schlüssel).
|
||||
</p>
|
||||
<p>
|
||||
Der Keyholder bestimmt, wann das Lock geöffnet wird – entweder nach einem festen Datum, durch das Ziehen von Karten, oder durch Community-Votes. Der Wearer kann Aufgaben erhalten, die den Verlauf des Spiels beeinflussen.
|
||||
</p>
|
||||
<div class="hilfe-hint">
|
||||
<strong>Hinweis:</strong> Für die automatische Steuerung einer physischen TTLock-Schlüsselbox ist ein Premium-Abonnement erforderlich. Mehr dazu unter <a href="/help/ttlock.html">TTLock-Hilfe</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-newlock">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-newlock')">
|
||||
<span class="hilfe-section-title">🚀 Neues Lock starten</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>So startest du als Wearer ein neues Lock:</p>
|
||||
<ol class="hilfe-steps">
|
||||
<li><span class="step-num">1</span><span>Navigiere zu <strong>Chastity → Neues Lock</strong>.</span></li>
|
||||
<li><span class="step-num">2</span><span>Vergib einen Namen für dein Lock (z. B. „Mein erstes Lock").</span></li>
|
||||
<li><span class="step-num">3</span><span>Wähle einen Modus: <span class="hilfe-badge">Keyholder</span>, <span class="hilfe-badge">TimeLock</span> oder <span class="hilfe-badge">Community</span>.</span></li>
|
||||
<li><span class="step-num">4</span><span>Lege optional Aufgaben und Karten fest, die den Verlauf beeinflussen.</span></li>
|
||||
<li><span class="step-num">5</span><span>Bestätige mit <em>Lock starten</em>. Das Lock ist jetzt aktiv.</span></li>
|
||||
</ol>
|
||||
<div class="hilfe-warn">
|
||||
<strong>Achtung:</strong> Ein aktives Lock kann nicht einfach abgebrochen werden. Stelle sicher, dass du und dein Keyholder sich über die Bedingungen einig sind.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-keyholder">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-keyholder')">
|
||||
<span class="hilfe-section-title">🗝️ Die Rolle als Keyholder</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Als Keyholder verwaltest du das Lock einer anderen Person. Du wirst per Einladungslink oder direkt über den Nutzernamen des Wearers zugewiesen.
|
||||
</p>
|
||||
<table class="hilfe-table">
|
||||
<thead><tr><th>Aktion</th><th>Beschreibung</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><span class="hilfe-badge">Öffnen</span></td><td>Gibt den Schlüssel / Öffnungscode frei. Bei TTLock wird der Code automatisch an die Box übermittelt.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Verlängern</span></td><td>Fügt dem Lock zusätzliche Zeit hinzu.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Aufgabe vergeben</span></td><td>Schickt dem Wearer eine neue Aufgabe. Nichterfüllung kann Strafzeit bedeuten.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Verstoß melden</span></td><td>Protokolliert einen Regelverstoß und kann Zeit hinzufügen.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="hilfe-hint">
|
||||
<strong>Tipp:</strong> Unter <strong>Keyholder → Übersicht</strong> siehst du alle Locks, für die du verantwortlich bist, inklusive Laufzeit und offener Aufgaben.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-karten">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-karten')">
|
||||
<span class="hilfe-section-title">🃏 Karten und Aufgaben</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Karten sind ein zufälliges Element im Chastity Game. Beim Einrichten eines Locks kann ein Kartenstapel aktiviert werden. Der Wearer zieht in festgelegten Abständen eine Karte – das Ergebnis kann die Laufzeit verlängern, verkürzen oder eine Aufgabe auslösen.
|
||||
</p>
|
||||
<table class="hilfe-table">
|
||||
<thead><tr><th>Kartentyp</th><th>Auswirkung</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><span class="hilfe-badge">+Zeit</span></td><td>Fügt dem Lock zusätzliche Zeit hinzu (z. B. +1 Tag).</td></tr>
|
||||
<tr><td><span class="hilfe-badge">−Zeit</span></td><td>Verkürzt die verbleibende Laufzeit.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Aufgabe</span></td><td>Löst eine zufällige Aufgabe aus, die erfüllt werden muss.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Freeze</span></td><td>Laufzeit wird für einen definierten Zeitraum eingefroren.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Reset</span></td><td>Setzt die Laufzeit auf den ursprünglichen Wert zurück.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>
|
||||
Eigene Karten und Aufgaben kannst du unter <strong>Chastity → Aufgaben</strong> verwalten und den Vorlagen-Pool nach Belieben erweitern.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-timelock">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-timelock')">
|
||||
<span class="hilfe-section-title">⏱️ TimeLock erklärt</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Ein TimeLock läuft ohne Keyholder – die Öffnung erfolgt automatisch, sobald der eingestellte Endzeitpunkt erreicht ist. Es gibt keinen manuellen Eingriff.
|
||||
</p>
|
||||
<div class="hilfe-warn">
|
||||
<strong>Achtung:</strong> Bei einem TimeLock ohne Keyholder gibt es keine manuelle Freigabe vor Ablauf der Zeit. Plane daher immer eine Notfalloption ein (z. B. physischer Ersatzschlüssel an vertrauenswürdiger Person).
|
||||
</div>
|
||||
<div class="hilfe-hint">
|
||||
<strong>Hinweis:</strong> Für die automatische TTLock-Öffnung zum Ablaufzeitpunkt muss die TTLock-Integration korrekt eingerichtet sein. Weitere Informationen: <a href="/help/ttlock.html">TTLock-Hilfe</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-faq1">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq1')">
|
||||
<span class="hilfe-section-title">❓ Kann ich ein Lock vorzeitig beenden?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Ein Lock kann nur dann vorzeitig beendet werden, wenn der Keyholder die Freigabe erteilt. Bei einem TimeLock ohne Keyholder ist dies nicht möglich – außer über einen physischen Ersatzschlüssel.
|
||||
</p>
|
||||
<div class="hilfe-info">
|
||||
Im Notfall steht die TTLock-Notfallöffnung zur Verfügung. Mehr dazu: <a href="/help/ttlock.html#sec-faq2">TTLock – Notfall-Öffnung</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-faq2">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq2')">
|
||||
<span class="hilfe-section-title">❓ Wie finde ich einen Keyholder?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Unter <strong>Chastity → Keyholder finden</strong> kannst du nach registrierten Keyholdern suchen und eine Anfrage stellen. Der Keyholder muss die Anfrage bestätigen, bevor das Lock aktiv wird.
|
||||
</p>
|
||||
<p>
|
||||
Alternativ kannst du deinen Keyholder direkt über seinen Nutzernamen einladen, wenn ihr euch bereits kennt.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/icons.js"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
<script>
|
||||
function toggleSection(id) {
|
||||
document.getElementById(id).classList.toggle('open');
|
||||
}
|
||||
function openFromHash() {
|
||||
const hash = window.location.hash.slice(1);
|
||||
if (!hash) return;
|
||||
const el = document.getElementById(hash);
|
||||
if (el && el.classList.contains('hilfe-section')) {
|
||||
el.classList.add('open');
|
||||
setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'start' }), 50);
|
||||
}
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', openFromHash);
|
||||
window.addEventListener('hashchange', openFromHash);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
208
bin/main/static/help/community.html
Normal file
208
bin/main/static/help/community.html
Normal file
@@ -0,0 +1,208 @@
|
||||
<!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 Community – 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; }
|
||||
|
||||
.hilfe-section { background: var(--color-card); border: 1px solid var(--color-secondary); border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden; }
|
||||
.hilfe-section-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; cursor: pointer; user-select: none; transition: background 0.15s; }
|
||||
.hilfe-section-header:hover { background: rgba(255,255,255,0.03); }
|
||||
.hilfe-section-title { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 600; }
|
||||
.hilfe-section-arrow { font-size: 0.75rem; color: var(--color-muted); transition: transform 0.2s; }
|
||||
.hilfe-section.open .hilfe-section-arrow { transform: rotate(90deg); }
|
||||
.hilfe-section-body { display: none; padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--color-secondary); }
|
||||
.hilfe-section.open .hilfe-section-body { display: block; }
|
||||
.hilfe-section-body p { font-size: 0.9rem; color: var(--color-muted); line-height: 1.7; margin: 0.9rem 0 0; }
|
||||
.hilfe-section-body p:first-child { margin-top: 1rem; }
|
||||
|
||||
.hilfe-steps { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
|
||||
.hilfe-steps li { list-style: none; display: flex; align-items: flex-start; gap: 0.85rem; font-size: 0.9rem; color: var(--color-muted); line-height: 1.6; }
|
||||
.hilfe-steps li::before { display: none; }
|
||||
.hilfe-steps li .step-num { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; }
|
||||
|
||||
.hilfe-hint { background: rgba(var(--color-primary-rgb, 120,80,200), 0.08); border-left: 3px solid var(--color-primary); border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-hint strong { color: var(--color-text); }
|
||||
.hilfe-warn { background: rgba(231,76,60,0.08); border-left: 3px solid #e74c3c; border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-warn strong { color: #e74c3c; }
|
||||
.hilfe-info { background: var(--color-secondary); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 1rem; }
|
||||
.hilfe-table th { text-align: left; color: var(--color-text); font-weight: 600; padding: 0.4rem 0.75rem 0.4rem 0; border-bottom: 1px solid var(--color-secondary); }
|
||||
.hilfe-table td { color: var(--color-muted); padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; line-height: 1.5; }
|
||||
.hilfe-table tr:last-child td { border-bottom: none; }
|
||||
.hilfe-badge { display: inline-block; background: var(--color-secondary); border-radius: 4px; padding: 0.1rem 0.45rem; font-size: 0.78rem; font-weight: 600; color: var(--color-muted); vertical-align: middle; }
|
||||
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-muted); text-decoration: none; margin-bottom: 1.25rem; transition: color 0.15s; }
|
||||
.back-link:hover { color: var(--color-text); }
|
||||
|
||||
.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-of-type { margin-top: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
|
||||
<a href="/help/overview.html" class="back-link">‹ Zurück zur Hilfe-Übersicht</a>
|
||||
|
||||
<div class="hilfe-header">
|
||||
<h1>🌐 Community</h1>
|
||||
<p>Gruppen, Feed, Profile und Community-Votes – alles, was die xXx-Sphere-Community zusammenhält.</p>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section-label">Gruppen</div>
|
||||
|
||||
<div class="hilfe-section open" id="sec-gruppen-intro">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-gruppen-intro')">
|
||||
<span class="hilfe-section-title">👥 Was sind Gruppen?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Gruppen sind private oder öffentliche Räume für Gleichgesinnte. Mitglieder können Beiträge teilen, Abstimmungen starten und sich austauschen. Jede Gruppe wird von einem oder mehreren Admins verwaltet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-gruppe-erstellen">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-gruppe-erstellen')">
|
||||
<span class="hilfe-section-title">🚀 Gruppe erstellen</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<ol class="hilfe-steps">
|
||||
<li><span class="step-num">1</span><span>Navigiere zu <strong>Community → Gruppen</strong>.</span></li>
|
||||
<li><span class="step-num">2</span><span>Klicke auf <em>Neue Gruppe</em> und vergib Name, Beschreibung und Bild.</span></li>
|
||||
<li><span class="step-num">3</span><span>Wähle die Sichtbarkeit: <span class="hilfe-badge">Öffentlich</span> (jeder kann beitreten) oder <span class="hilfe-badge">Privat</span> (nur auf Einladung).</span></li>
|
||||
<li><span class="step-num">4</span><span>Bestätige mit <em>Erstellen</em>. Du bist automatisch Admin der neuen Gruppe.</span></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-mitglieder">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-mitglieder')">
|
||||
<span class="hilfe-section-title">⚙️ Mitglieder verwalten</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>Als Admin einer Gruppe kannst du:</p>
|
||||
<table class="hilfe-table">
|
||||
<thead><tr><th>Aktion</th><th>Beschreibung</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><span class="hilfe-badge">Einladen</span></td><td>Nutzer per Nutzername direkt einladen.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Entfernen</span></td><td>Mitglieder aus der Gruppe ausschließen.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Moderator</span></td><td>Mitglieder zu Moderatoren befördern (können Beiträge entfernen).</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Admin</span></td><td>Admin-Rechte an ein anderes Mitglied übertragen oder teilen.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="hilfe-warn">
|
||||
<strong>Achtung:</strong> Wenn du als letzter Admin eine Gruppe verlässt, wird die Gruppe aufgelöst.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section-label">Feed & Profil</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-feed">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-feed')">
|
||||
<span class="hilfe-section-title">📰 Feed nutzen</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Der Feed zeigt dir Beiträge von Personen, denen du folgst, sowie Aktivitäten aus deinen Gruppen. Du kannst Beiträge liken, kommentieren und teilen.
|
||||
</p>
|
||||
<p>
|
||||
Eigene Beiträge erstellst du über das ➕-Symbol im Feed. Du kannst Text, Bilder und Links teilen. Beiträge können öffentlich, für Freunde oder nur für Gruppenmitglieder sichtbar sein.
|
||||
</p>
|
||||
<div class="hilfe-hint">
|
||||
<strong>Tipp:</strong> Über die Filter-Option kannst du den Feed auf bestimmte Gruppen oder Personen einschränken.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-profil">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-profil')">
|
||||
<span class="hilfe-section-title">👤 Profil gestalten & Personen folgen</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Dein Profil ist deine öffentliche Visitenkarte in der Community. Du kannst ein Profilbild, einen Anzeigenamen, eine kurze Bio und deine Interessen hinterlegen.
|
||||
</p>
|
||||
<p>
|
||||
Um jemandem zu folgen, besuche sein Profil und klicke auf <em>Folgen</em>. Du siehst dann seine öffentlichen Beiträge in deinem Feed. Alternativ kannst du eine Freundschaftsanfrage senden, um auch nicht-öffentliche Inhalte zu sehen.
|
||||
</p>
|
||||
<div class="hilfe-info">
|
||||
Andere Nutzer findest du über die Suchfunktion oder unter <strong>Community → Nutzer entdecken</strong>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section-label">Community Votes</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-votes">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-votes')">
|
||||
<span class="hilfe-section-title">🏆 Wie funktionieren Community Votes?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Community Votes sind eine besondere Spielmechanik im Chastity Game: Wenn ein Lock im Modus <span class="hilfe-badge">Community</span> läuft, entscheidet die gesamte Community mit, ob das Lock geöffnet wird oder die Zeit verlängert wird.
|
||||
</p>
|
||||
<p>
|
||||
Andere Nutzer können für <em>Öffnen</em> oder <em>Verlängern</em> abstimmen. Nach Ablauf der Abstimmungszeit gewinnt die Mehrheit – das Ergebnis wird automatisch auf das Lock angewandt.
|
||||
</p>
|
||||
<div class="hilfe-hint">
|
||||
<strong>Hinweis:</strong> Nur verifizierte Nutzer können an Community Votes teilnehmen. Die Verifikation erfolgt über dein Profil.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-nachrichten">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-nachrichten')">
|
||||
<span class="hilfe-section-title">✉️ Nachrichten</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Du kannst anderen Nutzern direkte Nachrichten senden. Navigiere dazu zu <strong>Community → Nachrichten</strong> oder klicke auf das Nachrichten-Symbol in einem Nutzerprofil.
|
||||
</p>
|
||||
<p>
|
||||
Nachrichten sind Ende-zu-Ende zwischen dir und dem Empfänger sichtbar. Du kannst Konversationen stummschalten oder blockieren.
|
||||
</p>
|
||||
<div class="hilfe-warn">
|
||||
<strong>Achtung:</strong> Unerwünschte Nachrichten bitte über den <em>Melden</em>-Button melden. Wiederholte Verstöße führen zu einer Account-Sperre.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/icons.js"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
<script>
|
||||
function toggleSection(id) {
|
||||
document.getElementById(id).classList.toggle('open');
|
||||
}
|
||||
function openFromHash() {
|
||||
const hash = window.location.hash.slice(1);
|
||||
if (!hash) return;
|
||||
const el = document.getElementById(hash);
|
||||
if (el && el.classList.contains('hilfe-section')) {
|
||||
el.classList.add('open');
|
||||
setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'start' }), 50);
|
||||
}
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', openFromHash);
|
||||
window.addEventListener('hashchange', openFromHash);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
168
bin/main/static/help/datenschutz.html
Normal file
168
bin/main/static/help/datenschutz.html
Normal file
@@ -0,0 +1,168 @@
|
||||
<!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 Sicherheit & Datenschutz – 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; }
|
||||
|
||||
.hilfe-section { background: var(--color-card); border: 1px solid var(--color-secondary); border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden; }
|
||||
.hilfe-section-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; cursor: pointer; user-select: none; transition: background 0.15s; }
|
||||
.hilfe-section-header:hover { background: rgba(255,255,255,0.03); }
|
||||
.hilfe-section-title { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 600; }
|
||||
.hilfe-section-arrow { font-size: 0.75rem; color: var(--color-muted); transition: transform 0.2s; }
|
||||
.hilfe-section.open .hilfe-section-arrow { transform: rotate(90deg); }
|
||||
.hilfe-section-body { display: none; padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--color-secondary); }
|
||||
.hilfe-section.open .hilfe-section-body { display: block; }
|
||||
.hilfe-section-body p { font-size: 0.9rem; color: var(--color-muted); line-height: 1.7; margin: 0.9rem 0 0; }
|
||||
.hilfe-section-body p:first-child { margin-top: 1rem; }
|
||||
|
||||
.hilfe-hint { background: rgba(var(--color-primary-rgb, 120,80,200), 0.08); border-left: 3px solid var(--color-primary); border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-hint strong { color: var(--color-text); }
|
||||
.hilfe-warn { background: rgba(231,76,60,0.08); border-left: 3px solid #e74c3c; border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-warn strong { color: #e74c3c; }
|
||||
.hilfe-info { background: var(--color-secondary); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 1rem; }
|
||||
.hilfe-table th { text-align: left; color: var(--color-text); font-weight: 600; padding: 0.4rem 0.75rem 0.4rem 0; border-bottom: 1px solid var(--color-secondary); }
|
||||
.hilfe-table td { color: var(--color-muted); padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; line-height: 1.5; }
|
||||
.hilfe-table tr:last-child td { border-bottom: none; }
|
||||
.hilfe-badge { display: inline-block; background: var(--color-secondary); border-radius: 4px; padding: 0.1rem 0.45rem; font-size: 0.78rem; font-weight: 600; color: var(--color-muted); vertical-align: middle; }
|
||||
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-muted); text-decoration: none; margin-bottom: 1.25rem; transition: color 0.15s; }
|
||||
.back-link:hover { color: var(--color-text); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
|
||||
<a href="/help/overview.html" class="back-link">‹ Zurück zur Hilfe-Übersicht</a>
|
||||
|
||||
<div class="hilfe-header">
|
||||
<h1>🔐 Sicherheit & Datenschutz</h1>
|
||||
<p>Wie deine Daten gespeichert werden und welche Sicherheitsmaßnahmen wir treffen.</p>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section open" id="sec-grundsaetze">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-grundsaetze')">
|
||||
<span class="hilfe-section-title">📖 Unsere Grundsätze</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
xXx Sphere verarbeitet nur Daten, die für den Betrieb der Plattform notwendig sind. Es gibt keine Weitergabe an Werbepartner und keine Vermarktung von Nutzerdaten.
|
||||
</p>
|
||||
<p>
|
||||
Alle sensiblen Daten werden verschlüsselt gespeichert oder gehasht. Der Zugriff auf Produktionsdaten ist auf das absolut notwendige Minimum beschränkt.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-gespeicherte-daten">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-gespeicherte-daten')">
|
||||
<span class="hilfe-section-title">🗄️ Was wird gespeichert?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<table class="hilfe-table">
|
||||
<thead><tr><th>Datenkategorie</th><th>Speicherung</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><span class="hilfe-badge">Account-Daten</span></td><td>Nutzername, E-Mail, Registrierungsdatum. E-Mail-Adresse wird nie öffentlich angezeigt.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Profildaten</span></td><td>Anzeigename, Bio, Profilbild, Interessen. Sichtbarkeit ist konfigurierbar.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Spielverläufe</span></td><td>Lock-Verläufe, Aufgabenprotokolle, Session-Daten. Werden nach Beendigung archiviert.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Nachrichten</span></td><td>Direktnachrichten werden in der Datenbank gespeichert. Kein Ende-zu-Ende-Verschlüsselungsstandard aktuell.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">TTLock-Zugangsdaten</span></td><td>Benutzername im Klartext, Passwort als MD5-Hash (Anforderung der TTLock-API).</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Passwort</span></td><td>Wird als BCrypt-Hash gespeichert. Das Klartextpasswort ist für uns nicht einsehbar.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-passwort-hashing">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-passwort-hashing')">
|
||||
<span class="hilfe-section-title">🔒 Passwort-Hashing</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Dein Passwort wird beim Setzen sofort mit <strong>BCrypt</strong> gehasht. BCrypt ist ein adaptiver Hashing-Algorithmus mit integriertem Salt – er macht Brute-Force-Angriffe rechnerisch aufwendig.
|
||||
</p>
|
||||
<p>
|
||||
Das Klartextpasswort verlässt deinen Browser verschlüsselt per HTTPS und wird serverseitig niemals im Klartext gespeichert oder geloggt.
|
||||
</p>
|
||||
<div class="hilfe-hint">
|
||||
<strong>Empfehlung:</strong> Verwende ein einzigartiges Passwort für xXx Sphere. Ein Passwort-Manager hilft dabei, starke Passwörter zu generieren und sicher zu speichern.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-verbindung">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-verbindung')">
|
||||
<span class="hilfe-section-title">🌐 Verbindungssicherheit</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Die gesamte Kommunikation zwischen deinem Browser und den Servern erfolgt ausschließlich über <strong>HTTPS</strong> (TLS). HTTP-Verbindungen werden automatisch auf HTTPS umgeleitet.
|
||||
</p>
|
||||
<div class="hilfe-info">
|
||||
Session-Cookies sind als <em>HttpOnly</em> und <em>Secure</em> gesetzt, wodurch sie nicht per JavaScript ausgelesen werden können.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-faq1">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq1')">
|
||||
<span class="hilfe-section-title">❓ Kann ich meine Daten exportieren?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Ein automatischer Datenexport ist noch nicht verfügbar. Du kannst einen manuellen Export über <a href="/help/kontakt.html">Kontakt & Feedback</a> anfordern – wir stellen dir deine Daten dann im JSON-Format zur Verfügung.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-faq2">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq2')">
|
||||
<span class="hilfe-section-title">❓ Was passiert mit meinen Daten nach einer Konto-Löschung?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Nach einer bestätigten Account-Löschung werden alle personenbezogenen Daten innerhalb von 30 Tagen endgültig aus unseren Datenbanken gelöscht. Dazu gehören Profil, Nachrichten, Spielprotokolle und Einstellungen.
|
||||
</p>
|
||||
<div class="hilfe-warn">
|
||||
<strong>Achtung:</strong> Öffentlich geteilte Inhalte (z. B. Beiträge in Gruppen) können bis zum Ablauf der 30 Tage noch sichtbar sein und werden danach zusammen mit deinem Account gelöscht.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/icons.js"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
<script>
|
||||
function toggleSection(id) {
|
||||
document.getElementById(id).classList.toggle('open');
|
||||
}
|
||||
function openFromHash() {
|
||||
const hash = window.location.hash.slice(1);
|
||||
if (!hash) return;
|
||||
const el = document.getElementById(hash);
|
||||
if (el && el.classList.contains('hilfe-section')) {
|
||||
el.classList.add('open');
|
||||
setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'start' }), 50);
|
||||
}
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', openFromHash);
|
||||
window.addEventListener('hashchange', openFromHash);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
194
bin/main/static/help/konto.html
Normal file
194
bin/main/static/help/konto.html
Normal file
@@ -0,0 +1,194 @@
|
||||
<!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 Konto & Einstellungen – 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; }
|
||||
|
||||
.hilfe-section { background: var(--color-card); border: 1px solid var(--color-secondary); border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden; }
|
||||
.hilfe-section-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; cursor: pointer; user-select: none; transition: background 0.15s; }
|
||||
.hilfe-section-header:hover { background: rgba(255,255,255,0.03); }
|
||||
.hilfe-section-title { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 600; }
|
||||
.hilfe-section-arrow { font-size: 0.75rem; color: var(--color-muted); transition: transform 0.2s; }
|
||||
.hilfe-section.open .hilfe-section-arrow { transform: rotate(90deg); }
|
||||
.hilfe-section-body { display: none; padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--color-secondary); }
|
||||
.hilfe-section.open .hilfe-section-body { display: block; }
|
||||
.hilfe-section-body p { font-size: 0.9rem; color: var(--color-muted); line-height: 1.7; margin: 0.9rem 0 0; }
|
||||
.hilfe-section-body p:first-child { margin-top: 1rem; }
|
||||
|
||||
.hilfe-steps { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
|
||||
.hilfe-steps li { list-style: none; display: flex; align-items: flex-start; gap: 0.85rem; font-size: 0.9rem; color: var(--color-muted); line-height: 1.6; }
|
||||
.hilfe-steps li::before { display: none; }
|
||||
.hilfe-steps li .step-num { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; }
|
||||
|
||||
.hilfe-hint { background: rgba(var(--color-primary-rgb, 120,80,200), 0.08); border-left: 3px solid var(--color-primary); border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-hint strong { color: var(--color-text); }
|
||||
.hilfe-warn { background: rgba(231,76,60,0.08); border-left: 3px solid #e74c3c; border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-warn strong { color: #e74c3c; }
|
||||
.hilfe-info { background: var(--color-secondary); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 1rem; }
|
||||
.hilfe-table th { text-align: left; color: var(--color-text); font-weight: 600; padding: 0.4rem 0.75rem 0.4rem 0; border-bottom: 1px solid var(--color-secondary); }
|
||||
.hilfe-table td { color: var(--color-muted); padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; line-height: 1.5; }
|
||||
.hilfe-table tr:last-child td { border-bottom: none; }
|
||||
.hilfe-badge { display: inline-block; background: var(--color-secondary); border-radius: 4px; padding: 0.1rem 0.45rem; font-size: 0.78rem; font-weight: 600; color: var(--color-muted); vertical-align: middle; }
|
||||
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-muted); text-decoration: none; margin-bottom: 1.25rem; transition: color 0.15s; }
|
||||
.back-link:hover { color: var(--color-text); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
|
||||
<a href="/help/overview.html" class="back-link">‹ Zurück zur Hilfe-Übersicht</a>
|
||||
|
||||
<div class="hilfe-header">
|
||||
<h1>⚙️ Konto & Einstellungen</h1>
|
||||
<p>Profil, Benachrichtigungen, Passwort und Datenschutz-Einstellungen verwalten.</p>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section open" id="sec-profil">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-profil')">
|
||||
<span class="hilfe-section-title">👤 Profil bearbeiten</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Dein Profil erreichst du unter <strong>Konto → Profil</strong>. Du kannst dort Anzeigename, Bio, Profilbild und Interessen anpassen.
|
||||
</p>
|
||||
<table class="hilfe-table">
|
||||
<thead><tr><th>Feld</th><th>Beschreibung</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><span class="hilfe-badge">Anzeigename</span></td><td>Sichtbarer Name in der Community. Kann jederzeit geändert werden.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Bio</span></td><td>Kurze Beschreibung über dich (max. 300 Zeichen).</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Profilbild</span></td><td>JPG oder PNG, max. 5 MB. Wird kreisförmig zugeschnitten.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Interessen</span></td><td>Tags, die anderen zeigen, was dich interessiert.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Sichtbarkeit</span></td><td>Öffentlich, Freunde, oder Privat – steuert, wer dein Profil sehen kann.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="hilfe-hint">
|
||||
<strong>Tipp:</strong> Ein vollständiges Profil erhöht deine Sichtbarkeit in der Community und erleichtert es anderen, dich zu finden.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-benachrichtigungen">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-benachrichtigungen')">
|
||||
<span class="hilfe-section-title">🔔 Benachrichtigungen konfigurieren</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Unter <strong>Einstellungen → Benachrichtigungen</strong> kannst du für jede Kategorie einzeln festlegen, ob du Benachrichtigungen erhalten möchtest.
|
||||
</p>
|
||||
<table class="hilfe-table">
|
||||
<thead><tr><th>Kategorie</th><th>Beispiele</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><span class="hilfe-badge">Spiele</span></td><td>Lock-Ablauf, neue Aufgabe, Keyholder-Aktion</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Community</span></td><td>Neue Follower, Likes, Kommentare, Gruppen-Einladungen</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Nachrichten</span></td><td>Neue Direktnachricht</td></tr>
|
||||
<tr><td><span class="hilfe-badge">System</span></td><td>Sicherheitshinweise, Account-Aktivitäten</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-passwort">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-passwort')">
|
||||
<span class="hilfe-section-title">🔑 Passwort ändern</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>So änderst du dein Passwort:</p>
|
||||
<ol class="hilfe-steps">
|
||||
<li><span class="step-num">1</span><span>Navigiere zu <strong>Einstellungen → Konto → Passwort ändern</strong>.</span></li>
|
||||
<li><span class="step-num">2</span><span>Gib dein aktuelles Passwort ein.</span></li>
|
||||
<li><span class="step-num">3</span><span>Gib dein neues Passwort ein und bestätige es.</span></li>
|
||||
<li><span class="step-num">4</span><span>Klicke auf <em>Speichern</em>. Du wirst automatisch neu angemeldet.</span></li>
|
||||
</ol>
|
||||
<div class="hilfe-hint">
|
||||
<strong>Passwort vergessen?</strong> Auf der Login-Seite findest du den Link <em>Passwort vergessen</em>. Du erhältst dann eine E-Mail mit einem Zurücksetzen-Link.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-datenschutz">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-datenschutz')">
|
||||
<span class="hilfe-section-title">🛡️ Datenschutz-Einstellungen</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Unter <strong>Einstellungen → Datenschutz</strong> kannst du steuern, welche Daten sichtbar sind und wie andere mit dir interagieren können.
|
||||
</p>
|
||||
<table class="hilfe-table">
|
||||
<thead><tr><th>Einstellung</th><th>Beschreibung</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><span class="hilfe-badge">Profil-Sichtbarkeit</span></td><td>Öffentlich, nur Freunde, oder privat.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Nachrichten empfangen</span></td><td>Von allen, nur Freunden, oder niemanden.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Aktivitäts-Status</span></td><td>Zeige anderen, wann du zuletzt aktiv warst.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Im Dating sichtbar</span></td><td>Ob dein Profil in der Dating-Suche erscheint.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-faq1">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq1')">
|
||||
<span class="hilfe-section-title">❓ Wie kann ich meinen Account löschen?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Eine Account-Löschung kannst du über <strong>Einstellungen → Konto → Account löschen</strong> beantragen. Nach der Bestätigung werden alle deine Daten innerhalb von 30 Tagen endgültig gelöscht.
|
||||
</p>
|
||||
<div class="hilfe-warn">
|
||||
<strong>Achtung:</strong> Aktive Locks und laufende Sessions werden beim Löschen sofort beendet. Diese Aktion ist nicht rückgängig zu machen.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-faq2">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq2')">
|
||||
<span class="hilfe-section-title">❓ Ich wurde nicht aktiviert – was tun?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Nach der Registrierung erhältst du eine Aktivierungs-E-Mail. Prüfe zuerst deinen Spam-Ordner. Ist die E-Mail nicht auffindbar, kannst du auf der Login-Seite unter <em>Aktivierungsmail erneut senden</em> eine neue anfordern.
|
||||
</p>
|
||||
<div class="hilfe-info">
|
||||
Aktivierungslinks sind 24 Stunden gültig. Danach muss ein neuer Link angefordert werden.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/icons.js"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
<script>
|
||||
function toggleSection(id) {
|
||||
document.getElementById(id).classList.toggle('open');
|
||||
}
|
||||
function openFromHash() {
|
||||
const hash = window.location.hash.slice(1);
|
||||
if (!hash) return;
|
||||
const el = document.getElementById(hash);
|
||||
if (el && el.classList.contains('hilfe-section')) {
|
||||
el.classList.add('open');
|
||||
setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'start' }), 50);
|
||||
}
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', openFromHash);
|
||||
window.addEventListener('hashchange', openFromHash);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -107,9 +107,10 @@
|
||||
<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>
|
||||
<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">
|
||||
@@ -127,8 +128,9 @@
|
||||
<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>
|
||||
<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>
|
||||
@@ -140,25 +142,28 @@
|
||||
<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>
|
||||
<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="#">Session starten</a>
|
||||
<a href="#">Spieler einladen</a>
|
||||
<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="#">Vanilla-Session starten</a>
|
||||
<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>
|
||||
@@ -170,25 +175,24 @@
|
||||
<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>
|
||||
<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 & 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>
|
||||
<a href="/help/community.html#sec-feed">Feed nutzen</a>
|
||||
<a href="/help/community.html#sec-profil">Profil gestalten & 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="#">Wie funktionieren Votes?</a>
|
||||
<a href="/help/community.html#sec-votes">Wie funktionieren Votes?</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -200,15 +204,16 @@
|
||||
<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>
|
||||
<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="#">Feedback senden</a>
|
||||
<a href="/help/kontakt.html">Feedback & Kontakt</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
163
bin/main/static/help/vanilla.html
Normal file
163
bin/main/static/help/vanilla.html
Normal file
@@ -0,0 +1,163 @@
|
||||
<!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 Vanilla Game – 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; }
|
||||
|
||||
.hilfe-section { background: var(--color-card); border: 1px solid var(--color-secondary); border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden; }
|
||||
.hilfe-section-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; cursor: pointer; user-select: none; transition: background 0.15s; }
|
||||
.hilfe-section-header:hover { background: rgba(255,255,255,0.03); }
|
||||
.hilfe-section-title { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 600; }
|
||||
.hilfe-section-arrow { font-size: 0.75rem; color: var(--color-muted); transition: transform 0.2s; }
|
||||
.hilfe-section.open .hilfe-section-arrow { transform: rotate(90deg); }
|
||||
.hilfe-section-body { display: none; padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--color-secondary); }
|
||||
.hilfe-section.open .hilfe-section-body { display: block; }
|
||||
.hilfe-section-body p { font-size: 0.9rem; color: var(--color-muted); line-height: 1.7; margin: 0.9rem 0 0; }
|
||||
.hilfe-section-body p:first-child { margin-top: 1rem; }
|
||||
|
||||
.hilfe-steps { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
|
||||
.hilfe-steps li { list-style: none; display: flex; align-items: flex-start; gap: 0.85rem; font-size: 0.9rem; color: var(--color-muted); line-height: 1.6; }
|
||||
.hilfe-steps li::before { display: none; }
|
||||
.hilfe-steps li .step-num { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; }
|
||||
|
||||
.hilfe-hint { background: rgba(var(--color-primary-rgb, 120,80,200), 0.08); border-left: 3px solid var(--color-primary); border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-hint strong { color: var(--color-text); }
|
||||
.hilfe-warn { background: rgba(231,76,60,0.08); border-left: 3px solid #e74c3c; border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-warn strong { color: #e74c3c; }
|
||||
.hilfe-info { background: var(--color-secondary); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--color-muted); line-height: 1.6; margin-top: 1rem; }
|
||||
.hilfe-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 1rem; }
|
||||
.hilfe-table th { text-align: left; color: var(--color-text); font-weight: 600; padding: 0.4rem 0.75rem 0.4rem 0; border-bottom: 1px solid var(--color-secondary); }
|
||||
.hilfe-table td { color: var(--color-muted); padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; line-height: 1.5; }
|
||||
.hilfe-table tr:last-child td { border-bottom: none; }
|
||||
.hilfe-badge { display: inline-block; background: var(--color-secondary); border-radius: 4px; padding: 0.1rem 0.45rem; font-size: 0.78rem; font-weight: 600; color: var(--color-muted); vertical-align: middle; }
|
||||
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-muted); text-decoration: none; margin-bottom: 1.25rem; transition: color 0.15s; }
|
||||
.back-link:hover { color: var(--color-text); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
|
||||
<a href="/help/overview.html" class="back-link">‹ Zurück zur Hilfe-Übersicht</a>
|
||||
|
||||
<div class="hilfe-header">
|
||||
<h1>⚪ Vanilla Game</h1>
|
||||
<p>Leichtere, verspielte Sessions ohne strenge Regeln – für den entspannten Einstieg.</p>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section open" id="sec-intro">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-intro')">
|
||||
<span class="hilfe-section-title">📖 Was ist das Vanilla Game?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Das Vanilla Game ist der entspannte Einstieg in die Spielwelt von xXx Sphere. Es gibt keine festen Rollen und keine strikten Regeln – stattdessen ziehen beide Parteien abwechselnd Karten und erfüllen lockere Aufgaben.
|
||||
</p>
|
||||
<p>
|
||||
Das Spiel eignet sich besonders für Paare, die etwas Neues ausprobieren möchten, ohne sich auf ein intensiveres Regelwerk einzulassen.
|
||||
</p>
|
||||
<div class="hilfe-hint">
|
||||
<strong>Tipp:</strong> Du kannst jederzeit eigene Aufgaben erstellen und den Schwierigkeitsgrad für jede Session selbst bestimmen.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-session">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-session')">
|
||||
<span class="hilfe-section-title">🚀 Session starten</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>So startest du eine Vanilla-Session:</p>
|
||||
<ol class="hilfe-steps">
|
||||
<li><span class="step-num">1</span><span>Navigiere zu <strong>Vanilla → Neue Session</strong>.</span></li>
|
||||
<li><span class="step-num">2</span><span>Wähle einen Aufgaben-Pool (eigene Aufgaben oder Community-Vorlagen).</span></li>
|
||||
<li><span class="step-num">3</span><span>Lege fest, ob ihr abwechselnd zieht oder eine Person die Aufgaben stellt.</span></li>
|
||||
<li><span class="step-num">4</span><span>Lade deinen Mitspieler per Nutzername oder Einladungslink ein.</span></li>
|
||||
<li><span class="step-num">5</span><span>Starte die Session – der erste Spieler zieht die erste Karte.</span></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-karten">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-karten')">
|
||||
<span class="hilfe-section-title">🃏 Karten und Aufgaben</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Im Vanilla Game werden Karten aus einem gemeinsam gewählten Pool gezogen. Jede Karte beschreibt eine Aufgabe, die von einer oder beiden Personen erfüllt wird. Nach Erfüllung zieht die andere Person.
|
||||
</p>
|
||||
<table class="hilfe-table">
|
||||
<thead><tr><th>Aufgabentyp</th><th>Beschreibung</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><span class="hilfe-badge">Solo</span></td><td>Nur die ziehende Person führt die Aufgabe aus.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Gemeinsam</span></td><td>Beide Personen führen die Aufgabe zusammen aus.</td></tr>
|
||||
<tr><td><span class="hilfe-badge">Wahl</span></td><td>Die ziehende Person entscheidet, wer die Aufgabe übernimmt.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>
|
||||
Eigene Aufgaben kannst du unter <strong>Vanilla → Aufgaben</strong> verwalten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-faq1">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq1')">
|
||||
<span class="hilfe-section-title">❓ Kann ich eine Session pausieren?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Ja. Eine laufende Session kann von beiden Spielern jederzeit pausiert werden. Sie bleibt für 24 Stunden gespeichert und kann danach fortgesetzt werden. Nach 24 Stunden Inaktivität wird die Session automatisch beendet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-faq2">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq2')">
|
||||
<span class="hilfe-section-title">❓ Unterschied zwischen Vanilla und BDSM Game?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Das Vanilla Game hat keine festen Rollen, kein Protokoll und keine Strafmechanismen. Es eignet sich als Einstieg oder für entspannte Abende. Das BDSM Game hat explizite Rollen (Dom/Sub), ein Aufgaben- und Strafprotokoll sowie striktere Regeln.
|
||||
</p>
|
||||
<div class="hilfe-info">
|
||||
Du kannst beide Spiele unabhängig voneinander nutzen – deine Aufgaben-Sets lassen sich zwischen den Spielen teilen.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/icons.js"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
<script>
|
||||
function toggleSection(id) {
|
||||
document.getElementById(id).classList.toggle('open');
|
||||
}
|
||||
function openFromHash() {
|
||||
const hash = window.location.hash.slice(1);
|
||||
if (!hash) return;
|
||||
const el = document.getElementById(hash);
|
||||
if (el && el.classList.contains('hilfe-section')) {
|
||||
el.classList.add('open');
|
||||
setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'start' }), 50);
|
||||
}
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', openFromHash);
|
||||
window.addEventListener('hashchange', openFromHash);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user