Mario
2b0ce62d33
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
361 lines
13 KiB
HTML
361 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<link rel="icon" href="/img/icon.png" type="image/png">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Hilfe 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/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>
|