Verschiebung nach anderem RePo - nun pro Projekt getrennt
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user