Mario
2b0ce62d33
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
346 lines
12 KiB
HTML
346 lines
12 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>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/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>
|