Verschiebung nach anderem RePo - nun pro Projekt getrennt
This commit is contained in:
108
bin/main/static/help/impressum.html
Normal file
108
bin/main/static/help/impressum.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!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>Impressum – 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;
|
||||
}
|
||||
|
||||
.impressum-block {
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.impressum-block h2 {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-muted);
|
||||
margin: 0 0 0.75rem 0;
|
||||
}
|
||||
.impressum-block p,
|
||||
.impressum-block address {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-muted);
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
}
|
||||
.impressum-block a {
|
||||
color: var(--color-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.impressum-block a:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
.impressum-block + .impressum-block {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
|
||||
<div class="hilfe-header">
|
||||
<h1>📄 Impressum</h1>
|
||||
<p>Angaben gemäß § 5 TMG</p>
|
||||
</div>
|
||||
|
||||
<div class="impressum-block">
|
||||
<h2>Verantwortlich</h2>
|
||||
<address>
|
||||
Vorname Nachname<br>
|
||||
Musterstraße 1<br>
|
||||
12345 Musterstadt<br>
|
||||
Deutschland
|
||||
</address>
|
||||
</div>
|
||||
|
||||
<div class="impressum-block">
|
||||
<h2>Kontakt</h2>
|
||||
<p>
|
||||
E-Mail: <a href="mailto:kontakt@xxx-sphere.de">kontakt@xxx-sphere.de</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="impressum-block">
|
||||
<h2>Hinweis</h2>
|
||||
<p>
|
||||
xXx Sphere ist ein privat betriebenes Projekt ohne kommerzielle Absicht.
|
||||
Die Plattform richtet sich ausschließlich an volljährige Personen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="impressum-block">
|
||||
<h2>Haftungsausschluss</h2>
|
||||
<p>
|
||||
Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links.
|
||||
Für den Inhalt verlinkter Seiten sind ausschließlich deren Betreiber verantwortlich.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/icons.js"></script>
|
||||
<script src="/js/sidebar.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
265
bin/main/static/help/kontakt.html
Normal file
265
bin/main/static/help/kontakt.html
Normal file
@@ -0,0 +1,265 @@
|
||||
<!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>Kontakt & Feedback – 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;
|
||||
}
|
||||
|
||||
/* ── E-Mail-Hinweis ── */
|
||||
.mail-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-bottom: 1.5rem;
|
||||
}
|
||||
.mail-hint strong { color: var(--color-text); }
|
||||
.mail-hint a { color: var(--color-text); }
|
||||
|
||||
/* ── Formular-Card ── */
|
||||
.feedback-card {
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
.form-group:last-of-type {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.form-group label {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
background: var(--color-secondary);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 0.65rem 0.9rem;
|
||||
color: var(--color-text);
|
||||
font-size: 0.92rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.form-group input[readonly],
|
||||
.form-group input:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: default;
|
||||
}
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 130px;
|
||||
}
|
||||
.form-group select option {
|
||||
background: var(--color-card);
|
||||
}
|
||||
|
||||
.char-counter {
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-muted);
|
||||
text-align: right;
|
||||
}
|
||||
.char-counter.warn { color: #e74c3c; }
|
||||
|
||||
.btn-send {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.7rem 1.5rem;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.btn-send:hover { opacity: 0.85; }
|
||||
.btn-send:disabled { opacity: 0.45; cursor: default; }
|
||||
|
||||
.feedback-success {
|
||||
display: none;
|
||||
background: rgba(39,174,96,0.1);
|
||||
border-left: 3px solid #27ae60;
|
||||
border-radius: 0 8px 8px 0;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-muted);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.feedback-success strong { color: #27ae60; }
|
||||
.feedback-error {
|
||||
display: none;
|
||||
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.9rem;
|
||||
color: var(--color-muted);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.feedback-error strong { color: #e74c3c; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
|
||||
<div class="hilfe-header">
|
||||
<h1>✉️ Kontakt & Feedback</h1>
|
||||
<p>Hast du Fragen, Ideen oder einen Fehler gefunden? Schreib uns!</p>
|
||||
</div>
|
||||
|
||||
<div class="mail-hint">
|
||||
<strong>Alternativ per E-Mail:</strong> Du kannst uns auch direkt schreiben –
|
||||
<a href="mailto:kontakt@xxx-sphere.de">kontakt@xxx-sphere.de</a>
|
||||
</div>
|
||||
|
||||
<div class="feedback-card">
|
||||
<div class="form-group">
|
||||
<label for="fb-name">Name</label>
|
||||
<input type="text" id="fb-name" readonly placeholder="Wird geladen…">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="fb-seite">Seite</label>
|
||||
<input type="text" id="fb-seite" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="fb-grund">Kontaktgrund</label>
|
||||
<select id="fb-grund">
|
||||
<option value="Fehlermeldung">🐛 Fehlermeldung</option>
|
||||
<option value="Feedback">💬 Feedback</option>
|
||||
<option value="Idee & Verbesserungsvorschlag">💡 Idee & Verbesserungsvorschlag</option>
|
||||
<option value="Nachfrage">❓ Nachfrage</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="fb-text">Nachricht</label>
|
||||
<textarea id="fb-text" maxlength="1000" placeholder="Beschreibe dein Anliegen…"></textarea>
|
||||
<span class="char-counter" id="fb-counter">0 / 1000</span>
|
||||
</div>
|
||||
<button class="btn-send" id="fb-send" onclick="sendFeedback()">✉️ Absenden</button>
|
||||
<div class="feedback-success" id="fb-success">
|
||||
<strong>Vielen Dank!</strong> Deine Nachricht wurde erfolgreich übermittelt.
|
||||
</div>
|
||||
<div class="feedback-error" id="fb-error">
|
||||
<strong>Fehler:</strong> Die Nachricht konnte nicht gesendet werden. Bitte versuche es später erneut.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/icons.js"></script>
|
||||
<script src="/js/sidebar.js"></script>
|
||||
<script>
|
||||
// Name vorausfüllen
|
||||
fetch('/login/me')
|
||||
.then(r => r.ok ? r.json() : null)
|
||||
.then(user => {
|
||||
const field = document.getElementById('fb-name');
|
||||
if (user && user.name) {
|
||||
field.value = user.name;
|
||||
} else {
|
||||
field.value = 'Gast';
|
||||
}
|
||||
})
|
||||
.catch(() => { document.getElementById('fb-name').value = 'Gast'; });
|
||||
|
||||
// Seite vorausfüllen
|
||||
(function () {
|
||||
const field = document.getElementById('fb-seite');
|
||||
try {
|
||||
const ref = document.referrer;
|
||||
if (ref) {
|
||||
const url = new URL(ref);
|
||||
field.value = url.pathname;
|
||||
} else {
|
||||
field.value = 'Direkt aufgerufen';
|
||||
}
|
||||
} catch (_) {
|
||||
field.value = 'Unbekannt';
|
||||
}
|
||||
})();
|
||||
|
||||
// Zeichenzähler
|
||||
document.getElementById('fb-text').addEventListener('input', function () {
|
||||
const len = this.value.length;
|
||||
const counter = document.getElementById('fb-counter');
|
||||
counter.textContent = len + ' / 1000';
|
||||
counter.className = 'char-counter' + (len > 900 || len < 10 ? ' warn' : '');
|
||||
});
|
||||
|
||||
async function sendFeedback() {
|
||||
const btn = document.getElementById('fb-send');
|
||||
const text = document.getElementById('fb-text').value.trim();
|
||||
if (text.length < 10) { document.getElementById('fb-text').focus(); return; }
|
||||
|
||||
btn.disabled = true;
|
||||
document.getElementById('fb-success').style.display = 'none';
|
||||
document.getElementById('fb-error').style.display = 'none';
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/feedback', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: document.getElementById('fb-name').value,
|
||||
seite: document.getElementById('fb-seite').value,
|
||||
grund: document.getElementById('fb-grund').value,
|
||||
text: text
|
||||
})
|
||||
});
|
||||
if (res.ok) {
|
||||
document.getElementById('fb-success').style.display = 'block';
|
||||
document.getElementById('fb-text').value = '';
|
||||
document.getElementById('fb-counter').textContent = '0 / 1000';
|
||||
} else {
|
||||
document.getElementById('fb-error').style.display = 'block';
|
||||
btn.disabled = false;
|
||||
}
|
||||
} catch (_) {
|
||||
document.getElementById('fb-error').style.display = 'block';
|
||||
btn.disabled = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
221
bin/main/static/help/overview.html
Normal file
221
bin/main/static/help/overview.html
Normal file
@@ -0,0 +1,221 @@
|
||||
<!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>
|
||||
345
bin/main/static/help/template.html
Normal file
345
bin/main/static/help/template.html
Normal file
@@ -0,0 +1,345 @@
|
||||
<!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>SEITENTITEL – xXx Sphere</title>
|
||||
<link rel="stylesheet" href="/css/variables.css">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<style>
|
||||
/* ── Hilfe-Seite Basis ── */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── Abschnitte (Accordion) ── */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── Fließtext in Abschnitten ── */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── Schritt-für-Schritt Liste ── */
|
||||
.hilfe-steps {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1rem 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.hilfe-steps li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.85rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── Hinweis-Box ── */
|
||||
.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);
|
||||
}
|
||||
|
||||
/* ── Warn-Box ── */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── Info-Box (neutral) ── */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── Einfache Tabelle ── */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── Trennlinie ── */
|
||||
.hilfe-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
margin: 1.25rem 0 0;
|
||||
}
|
||||
|
||||
/* ── Inline-Badge ── */
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
|
||||
<!-- ── Kopfzeile ─────────────────────────────────────── -->
|
||||
<div class="hilfe-header">
|
||||
<h1>🔒 SEITENTITEL</h1>
|
||||
<p>Kurze Beschreibung, worum es auf dieser Hilfeseite geht.</p>
|
||||
</div>
|
||||
|
||||
<!-- ── Abschnitt: Einfacher Fließtext ───────────────── -->
|
||||
<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?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Hier steht ein einleitender Text. Du kannst mehrere Absätze verwenden,
|
||||
um das Thema zu erklären.
|
||||
</p>
|
||||
<p>
|
||||
Zweiter Absatz mit weiteren Informationen. Links gehen so:
|
||||
<a href="/games/chastity/neulock.html">neues Lock starten</a>.
|
||||
</p>
|
||||
|
||||
<!-- Hinweis-Box (lila) -->
|
||||
<div class="hilfe-hint">
|
||||
<strong>Hinweis:</strong> Hier steht ein wichtiger, aber freundlicher Hinweis.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Abschnitt: Schritt-für-Schritt ───────────────── -->
|
||||
<div class="hilfe-section" id="sec-howto">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-howto')">
|
||||
<span class="hilfe-section-title">🚀 So funktioniert es</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>Führe diese Schritte der Reihe nach aus:</p>
|
||||
<ol class="hilfe-steps">
|
||||
<li>
|
||||
<span class="step-num">1</span>
|
||||
<span>Erster Schritt – was der Nutzer hier tun muss.</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="step-num">2</span>
|
||||
<span>Zweiter Schritt – weitere Aktion mit Erklärung.</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="step-num">3</span>
|
||||
<span>Dritter Schritt – Abschluss oder Ergebnis.</span>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<!-- Warn-Box (rot) -->
|
||||
<div class="hilfe-warn">
|
||||
<strong>Achtung:</strong> Hier steht eine Warnung, z. B. dass eine Aktion nicht rückgängig gemacht werden kann.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Abschnitt: Tabelle ────────────────────────────── -->
|
||||
<div class="hilfe-section" id="sec-table">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-table')">
|
||||
<span class="hilfe-section-title">📋 Übersicht</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<table class="hilfe-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Funktion</th>
|
||||
<th>Beschreibung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="hilfe-badge">Beispiel A</span></td>
|
||||
<td>Erklärung zu Funktion A.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="hilfe-badge">Beispiel B</span></td>
|
||||
<td>Erklärung zu Funktion B.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="hilfe-badge">Beispiel C</span></td>
|
||||
<td>Erklärung zu Funktion C.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Abschnitt: FAQ ────────────────────────────────── -->
|
||||
<div class="hilfe-section" id="sec-faq1">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq1')">
|
||||
<span class="hilfe-section-title">❓ Häufige Frage 1?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Antwort auf die erste häufige Frage. Kann auch mehrere Absätze haben.
|
||||
</p>
|
||||
<div class="hilfe-info">
|
||||
Neutrale Info-Box für ergänzende Details ohne Wertung.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-faq2">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq2')">
|
||||
<span class="hilfe-section-title">❓ Häufige Frage 2?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Antwort auf die zweite häufige Frage.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/icons.js"></script>
|
||||
<script src="/js/sidebar.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>
|
||||
360
bin/main/static/help/ttlock.html
Normal file
360
bin/main/static/help/ttlock.html
Normal file
@@ -0,0 +1,360 @@
|
||||
<!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 TTLock – xXx Sphere</title>
|
||||
<link rel="stylesheet" href="/css/variables.css">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<style>
|
||||
/* ── Hilfe-Seite Basis ── */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── Abschnitte (Accordion) ── */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── Fließtext in Abschnitten ── */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── Schritt-für-Schritt Liste ── */
|
||||
.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-steps li strong,
|
||||
.hilfe-steps li em {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* ── Hinweis-Box ── */
|
||||
.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);
|
||||
}
|
||||
|
||||
/* ── Warn-Box ── */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── Info-Box (neutral) ── */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── Einfache Tabelle ── */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── Trennlinie ── */
|
||||
.hilfe-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
margin: 1.25rem 0 0;
|
||||
}
|
||||
|
||||
/* ── Inline-Badge ── */
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
|
||||
<!-- ── Kopfzeile ─────────────────────────────────────── -->
|
||||
<div class="hilfe-header">
|
||||
<h1>🔒 TTLock</h1>
|
||||
<p>Hilfe zur Einrichtung der Kommunikation mit einer TTLock-Schlüsselbox</p>
|
||||
</div>
|
||||
|
||||
<!-- ── Abschnitt: Einfacher Fließtext ───────────────── -->
|
||||
<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?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
<a href="https://ttlock.com/#/">TTLock</a> ist ein weit verbreitetes System für die Verwaltung von smarten Schlössern und Schlüsselboxen. Die Hardware kommuniziert in der Regel via Bluetooth, lässt sich aber über ein G2-Gateway auch aus der Ferne steuern.
|
||||
</p>
|
||||
<p>
|
||||
Für Entwickler und Unternehmen bietet die TTLock Open Platform eine leistungsstarke REST-API. Damit lässt sich die Schlossverwaltung in eigene Anwendungen integrieren.
|
||||
Diese API verwenden wir, um die Codes deiner Schlüsselbox zu steuern - kein nerviges manuelles Eintragen des generierten Schlüssels mehr.
|
||||
</p>
|
||||
<p>
|
||||
TTLock steht allen Premium-Abonenten zur Verfügung.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Abschnitt: Tabelle ────────────────────────────── -->
|
||||
<div class="hilfe-section" id="sec-table">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-table')">
|
||||
<span class="hilfe-section-title">📋 Voraussetzungen</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<div class="hilfe-warn">
|
||||
<strong>Achtung:</strong> Für die Verwendung ist zwingend ein G2-Gateway für die Kommunikation von TTLock-Server zu Deiner Schlüsselbox notwendig.
|
||||
</div>
|
||||
<div class="hilfe-hint">
|
||||
<strong>Hinweis:</strong> Für die Verwendung einer TTLock-Schlüsselbox in Spielen ist zwingend ein Premium-Abonement notwendig.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Abschnitt: Schritt-für-Schritt ───────────────── -->
|
||||
<div class="hilfe-section" id="sec-howto">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-howto')">
|
||||
<span class="hilfe-section-title">🚀 So funktioniert es</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>Führe diese Schritte der Reihe nach aus:</p>
|
||||
<ol class="hilfe-steps">
|
||||
<li>
|
||||
<span class="step-num">1</span>
|
||||
<span>App-Setup: Verbinde deine Schlüsselbox in der TTLock-App. Wichtig: Für die Fernsteuerung muss ein Gateway (G2) eingerichtet und aktiv sein.</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="step-num">2</span>
|
||||
<span>Fernzugriff aktivieren: Aktiviere die Funktion in den App-Einstellungen. Tipp: Schalte das WLAN an deinem Handy aus und versuche, die Box über mobile Daten zu öffnen. Funktioniert das? Dann ist alles bereit.</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="step-num">3</span>
|
||||
<span>Accounts verknüpfen: Trage deine TTLock-Zugangsdaten unter Einstellungen > TTLock ein.</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="step-num">4</span>
|
||||
<span>Lock-ID hinterlegen: Gib die ID deiner Box an (zu finden unter MAC/ID). Wichtig: Nur den Teil hinter dem Schrägstrich nutzen (z.B. bei 00:11.../123456 nur 123456).</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="step-num">5</span>
|
||||
<span>Verbindung testen: Klicke auf „Verbindung testen“. Erst nach einem grünen Licht ist das System aktiv.</span>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<!-- Hinweis-Box (lila) -->
|
||||
<div class="hilfe-hint">
|
||||
<strong>Hinweis:</strong> Wir speichern dein Passwort nicht im Klartext in der Datenbank sondern nur als MD5-Hash.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Abschnitt: FAQ ────────────────────────────────── -->
|
||||
<div class="hilfe-section" id="sec-faq1">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq1')">
|
||||
<span class="hilfe-section-title">❓ Warum steht dieser Dienst nur für Abonennten zur Verfügung?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Die Verwendung der API von TTLock ist nur begrenzt kostenlos verwendbar. Ab bestimmten Kontingenten wird die Verwendung für uns kostenpflichtig.
|
||||
</p>
|
||||
<div class="hilfe-info">
|
||||
Es gilt weiter der Grundsatz, XXX-Sphere soll niemanden reich machen - Die Abonemments dienen dazu die laufenden Kosten (Server, API-Schnittstellen etc.) zu decken.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hilfe-section" id="sec-faq2">
|
||||
<div class="hilfe-section-header" onclick="toggleSection('sec-faq2')">
|
||||
<span class="hilfe-section-title">❓ Hilfe - ich komme nicht mehr raus...Was machen Sachen?</span>
|
||||
<span class="hilfe-section-arrow">▸</span>
|
||||
</div>
|
||||
<div class="hilfe-section-body">
|
||||
<p>
|
||||
Sollte sich der Schlüssel noch in der Box befinden und ihr nicht in einem aktiven Lock sein, besteht die Möglichkeit einen neuen Code für eine Notfallöffnung zu generieren:
|
||||
</p>
|
||||
|
||||
<ol class="hilfe-steps">
|
||||
<li>
|
||||
<span class="step-num">1</span>
|
||||
<span>Öffne die Einstellungen</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="step-num">2</span>
|
||||
<span>Navigiere zum Bereich '🔒 TTLock'</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="step-num">3</span>
|
||||
<span>Drücke '🔒 Öffnen'</span>
|
||||
</li>
|
||||
</ol>
|
||||
<p>
|
||||
Der temporäre Code zum Öffnen wird euch angezeigt - damit lässt sich die Box dann öffnen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/icons.js"></script>
|
||||
<script src="/js/sidebar.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