386 lines
20 KiB
HTML
386 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Anleitung — FünfVorAcht</title>
|
||
<link rel="stylesheet" href="/static/tailwind.min.css">
|
||
<style>
|
||
body { background: #0f172a; color: #e2e8f0; }
|
||
.card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; }
|
||
.step { background: #0f172a; border: 1px solid #334155; border-radius: 8px; }
|
||
.badge { border-radius: 999px; font-size: 0.7rem; font-weight: 700; padding: 2px 10px; }
|
||
.tag-new { background: #1e3a5f; color: #60a5fa; }
|
||
.tag-bot { background: #14532d; color: #4ade80; }
|
||
.tag-plan { background: #4c1d95; color: #c4b5fd; }
|
||
details summary { cursor: pointer; list-style: none; }
|
||
details summary::-webkit-details-marker { display: none; }
|
||
details[open] summary .chevron { transform: rotate(90deg); }
|
||
.chevron { display: inline-block; transition: transform .2s; }
|
||
code { background: #0f172a; border: 1px solid #334155; border-radius: 4px; padding: 1px 6px; font-size: 0.8rem; color: #94a3b8; }
|
||
kbd { background: #334155; border-radius: 4px; padding: 1px 6px; font-size: 0.8rem; color: #e2e8f0; }
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen">
|
||
|
||
<!-- Nav -->
|
||
<nav class="bg-slate-900 border-b border-slate-700 px-6 py-3 flex items-center justify-between sticky top-0 z-50">
|
||
<div class="flex items-center gap-4">
|
||
<div class="flex items-center gap-1 bg-slate-800 border border-slate-700 rounded-lg p-1">
|
||
<span class="flex items-center gap-1.5 bg-slate-700 text-white text-xs font-semibold px-3 py-1.5 rounded-md">🕗 FünfVorAcht</span>
|
||
<a href="https://redakteur.orbitalo.net" target="_blank"
|
||
class="flex items-center gap-1.5 text-slate-500 hover:text-slate-200 hover:bg-slate-700 text-xs font-medium px-3 py-1.5 rounded-md transition">📝 Redakteur</a>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-5 text-sm">
|
||
<a href="/" class="text-slate-400 hover:text-white">Studio</a>
|
||
<a href="/history" class="text-slate-400 hover:text-white">History</a>
|
||
<a href="/prompts" class="text-slate-400 hover:text-white">Prompts</a>
|
||
<a href="/settings" class="text-slate-400 hover:text-white">Einstellungen</a>
|
||
<a href="/hilfe" class="text-blue-400 font-semibold">❓ Hilfe</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="max-w-4xl mx-auto px-6 py-8 space-y-4">
|
||
|
||
<div class="flex items-center gap-4 mb-6">
|
||
<h1 class="text-2xl font-bold text-white">Anleitung</h1>
|
||
<span class="text-slate-500 text-sm">FünfVorAcht — KI-gestützter Telegram-Poster</span>
|
||
</div>
|
||
|
||
<!-- Schnellübersicht -->
|
||
<div class="card p-5">
|
||
<h2 class="text-base font-semibold text-white mb-3">⚡ Schnellübersicht — Normaler Tagesablauf</h2>
|
||
<div class="flex flex-wrap gap-2 items-center text-sm text-slate-300">
|
||
<div class="step px-3 py-2">1. Quelle eingeben</div>
|
||
<span class="text-slate-600">→</span>
|
||
<div class="step px-3 py-2">2. Artikel generieren</div>
|
||
<span class="text-slate-600">→</span>
|
||
<div class="step px-3 py-2">3. Redigieren & speichern</div>
|
||
<span class="text-slate-600">→</span>
|
||
<div class="step px-3 py-2">4. Einplanen (Uhrzeit)</div>
|
||
<span class="text-slate-600">→</span>
|
||
<div class="step px-3 py-2">5. Zum Bot senden</div>
|
||
<span class="text-slate-600">→</span>
|
||
<div class="step px-3 py-2">6. Im Bot freigeben ✅</div>
|
||
<span class="text-slate-600">→</span>
|
||
<div class="step bg-green-900/30 border-green-700 px-3 py-2 text-green-400">7. Automatisch gepostet 📤</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 1. Artikel erstellen -->
|
||
<details class="card" open>
|
||
<summary class="p-5 flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-xl">✏️</span>
|
||
<h2 class="text-base font-semibold text-white">1. Artikel erstellen</h2>
|
||
</div>
|
||
<span class="chevron text-slate-400 text-sm">▶</span>
|
||
</summary>
|
||
<div class="px-5 pb-5 space-y-4 border-t border-slate-700 pt-4">
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-blue-400">Quelle eingeben</div>
|
||
<p class="text-xs text-slate-400">URL eines Artikels, Videos oder Vortrags einfügen — oder ein Thema als Text beschreiben.</p>
|
||
<p class="text-xs text-slate-500">Tipp: Häufig genutzte Quellen als <span class="text-slate-300">Favoriten</span> speichern → Dropdown nutzen.</p>
|
||
</div>
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-blue-400">Thema & Prompt wählen</div>
|
||
<p class="text-xs text-slate-400">Tag (z.B. Politik, Tech) und den gewünschten KI-Prompt auswählen.</p>
|
||
<p class="text-xs text-slate-500">Prompts können unter <a href="/prompts" class="text-blue-400 hover:underline">Prompts</a> bearbeitet und getestet werden.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-blue-400">⚡ Generieren</div>
|
||
<p class="text-xs text-slate-400">Button <kbd>Artikel generieren</kbd> klicken — die KI erstellt einen fertigen Telegram-Beitrag. Rechts erscheint sofort die Telegram-Vorschau.</p>
|
||
<p class="text-xs text-slate-500">Nicht zufrieden? <kbd>Neu generieren</kbd> erstellt eine neue Version (v2, v3 …). Alle Versionen werden gespeichert.</p>
|
||
</div>
|
||
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-blue-400">✍️ Redigieren</div>
|
||
<p class="text-xs text-slate-400">Text im Editor direkt bearbeiten. Die Telegram-Vorschau aktualisiert sich in Echtzeit. Zeichenanzahl wird live angezeigt (max. 4096).</p>
|
||
<p class="text-xs text-slate-500">Das Markenzeichen wird automatisch am Ende eingefügt — nicht manuell nötig.</p>
|
||
</div>
|
||
|
||
</div>
|
||
</details>
|
||
|
||
<!-- 2. Zeitlich einplanen -->
|
||
<details class="card">
|
||
<summary class="p-5 flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-xl">📅</span>
|
||
<h2 class="text-base font-semibold text-white">2. Zeitlich einplanen</h2>
|
||
<span class="badge tag-new">NEU</span>
|
||
</div>
|
||
<span class="chevron text-slate-400 text-sm">▶</span>
|
||
</summary>
|
||
<div class="px-5 pb-5 space-y-4 border-t border-slate-700 pt-4">
|
||
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-purple-400">📅 Einplanen-Panel</div>
|
||
<p class="text-xs text-slate-400">Nach dem Generieren auf <kbd>Einplanen</kbd> klicken. Ein Panel öffnet sich:</p>
|
||
<ul class="text-xs text-slate-400 space-y-1 mt-2 ml-3">
|
||
<li>• <span class="text-white">Datum</span> — aus dem Redaktionsplan übernommen oder frei wählbar</li>
|
||
<li>• <span class="text-white">Uhrzeit</span> — 15-Minuten-Raster (z.B. 07:00, 19:45, 19:55)</li>
|
||
<li>• <span class="text-white">Bot-Benachrichtigung</span> — Sofort / Vortag 17:00 / Posting-Tag 10:00</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||
<div class="step p-3">
|
||
<div class="text-xs font-semibold text-slate-300 mb-1">Artikel für heute</div>
|
||
<p class="text-xs text-slate-500">Bot-Benachrichtigung: <span class="text-yellow-400">Sofort</span> vorausgewählt</p>
|
||
</div>
|
||
<div class="step p-3">
|
||
<div class="text-xs font-semibold text-slate-300 mb-1">Artikel für morgen/später</div>
|
||
<p class="text-xs text-slate-500">Automatisch: <span class="text-yellow-400">Vortag 17:00 Uhr</span> vorausgewählt</p>
|
||
</div>
|
||
<div class="step p-3">
|
||
<div class="text-xs font-semibold text-slate-300 mb-1">Zeitkonflikt</div>
|
||
<p class="text-xs text-slate-500"><span class="text-red-400">Blockiert</span> wenn Slot belegt — belegte Zeiten sind ausgegraut</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-blue-900/20 border border-blue-800/50 rounded-lg p-3 text-xs text-slate-300">
|
||
<span class="text-blue-400 font-semibold">ℹ️ Mehrere Posts pro Tag:</span> Für jeden Zeitslot einen eigenen Artikel anlegen. Jeder Slot wird unabhängig eingeplant und gepostet.
|
||
</div>
|
||
|
||
</div>
|
||
</details>
|
||
|
||
<!-- 3. Freigabe & Review -->
|
||
<details class="card">
|
||
<summary class="p-5 flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-xl">📱</span>
|
||
<h2 class="text-base font-semibold text-white">3. Freigabe & Review im Telegram-Bot</h2>
|
||
<span class="badge tag-bot">BOT</span>
|
||
</div>
|
||
<span class="chevron text-slate-400 text-sm">▶</span>
|
||
</summary>
|
||
<div class="px-5 pb-5 space-y-4 border-t border-slate-700 pt-4">
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-green-400">Review erhalten</div>
|
||
<p class="text-xs text-slate-400">Zum geplanten Zeitpunkt (oder sofort bei manuell senden) schickt der Bot den Artikel an alle Redakteure mit zwei Buttons:</p>
|
||
<div class="flex gap-2 mt-2">
|
||
<span class="text-xs bg-green-900/40 border border-green-700 text-green-400 px-2 py-1 rounded">✅ Freigeben</span>
|
||
<span class="text-xs bg-slate-700 border border-slate-600 text-slate-300 px-2 py-1 rounded">✏️ Bearbeiten</span>
|
||
</div>
|
||
</div>
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-yellow-400">Bearbeiten im Bot</div>
|
||
<p class="text-xs text-slate-400">✏️ drücken → Bot zeigt aktuellen Text → einfach neue Version als nächste Nachricht schicken → Bot bestätigt + zeigt erneut Review-Buttons.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step p-4">
|
||
<div class="text-sm font-semibold text-slate-300 mb-2">Bot-Befehle</div>
|
||
<div class="grid grid-cols-2 gap-2 text-xs">
|
||
<div><code>/start</code> <span class="text-slate-400 ml-2">Übersicht & Hilfe</span></div>
|
||
<div><code>/heute</code> <span class="text-slate-400 ml-2">Alle Slots von heute</span></div>
|
||
<div><code>/queue</code> <span class="text-slate-400 ml-2">Nächste 3 Tage</span></div>
|
||
<div><code>/skip</code> <span class="text-slate-400 ml-2">Hauptslot heute überspringen</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-blue-400">☀️ Morgen-Briefing (10:00 Uhr MEZ)</div>
|
||
<p class="text-xs text-slate-400">Täglich um 10:00 Uhr schickt der Bot automatisch einen Überblick:</p>
|
||
<ul class="text-xs text-slate-400 space-y-1 mt-1 ml-3">
|
||
<li>• Welche Slots heute geplant sind (mit Status)</li>
|
||
<li>• Ob noch etwas fehlt oder freigegeben werden muss</li>
|
||
<li>• Ausblick auf die nächsten 3 Tage</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</details>
|
||
|
||
<!-- 4. Automatisches Posting -->
|
||
<details class="card">
|
||
<summary class="p-5 flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-xl">📤</span>
|
||
<h2 class="text-base font-semibold text-white">4. Automatisches Posting</h2>
|
||
</div>
|
||
<span class="chevron text-slate-400 text-sm">▶</span>
|
||
</summary>
|
||
<div class="px-5 pb-5 space-y-4 border-t border-slate-700 pt-4">
|
||
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-slate-300">Ablauf</div>
|
||
<p class="text-xs text-slate-400">Der Scheduler prüft jede Minute: gibt es einen <span class="text-green-400">freigegebenen</span> Artikel dessen Uhrzeit jetzt fällig ist?</p>
|
||
<ul class="text-xs text-slate-400 space-y-1 mt-2 ml-3">
|
||
<li>• <span class="text-green-400">Freigegeben + Uhrzeit erreicht</span> → wird in den Kanal gepostet</li>
|
||
<li>• <span class="text-yellow-400">Nicht freigegeben</span> → Nachmittags-Reminder (18:00 Uhr)</li>
|
||
<li>• <span class="text-red-400">Fehler beim Posting</span> → sofortiger Fehler-Alarm an alle Redakteure</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-3 gap-3 text-center text-xs">
|
||
<div class="step p-3">
|
||
<div class="text-lg mb-1">✅</div>
|
||
<div class="text-slate-300 font-semibold">Freigegeben</div>
|
||
<div class="text-slate-500 mt-1">Postet automatisch</div>
|
||
</div>
|
||
<div class="step p-3">
|
||
<div class="text-lg mb-1">⚠️</div>
|
||
<div class="text-slate-300 font-semibold">Kein Artikel</div>
|
||
<div class="text-slate-500 mt-1">Alarm + überspringen</div>
|
||
</div>
|
||
<div class="step p-3">
|
||
<div class="text-lg mb-1">❌</div>
|
||
<div class="text-slate-300 font-semibold">Posting-Fehler</div>
|
||
<div class="text-slate-500 mt-1">Sofort-Alarm mit Ursache</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-slate-700/30 rounded-lg p-3 text-xs text-slate-400">
|
||
Das <span class="text-white">Markenzeichen</span> wird automatisch unter jeden Beitrag gesetzt — auch wenn es im Editor noch nicht sichtbar ist.
|
||
</div>
|
||
|
||
</div>
|
||
</details>
|
||
|
||
<!-- 5. Board verwalten -->
|
||
<details class="card">
|
||
<summary class="p-5 flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-xl">🗂️</span>
|
||
<h2 class="text-base font-semibold text-white">5. Redaktionsplan verwalten</h2>
|
||
<span class="badge tag-new">NEU</span>
|
||
</div>
|
||
<span class="chevron text-slate-400 text-sm">▶</span>
|
||
</summary>
|
||
<div class="px-5 pb-5 space-y-4 border-t border-slate-700 pt-4">
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-blue-400">📅 Tag anklicken</div>
|
||
<p class="text-xs text-slate-400">Klick auf einen Tag im Redaktionsplan lädt den Artikel direkt ins Studio — ohne neu generieren.</p>
|
||
</div>
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-yellow-400">🔄 Umplanen</div>
|
||
<p class="text-xs text-slate-400">Direkt im Board: neues Datum oder Uhrzeit wählen. Bei Zeitkonflikt wird geblockt und ein freier Slot vorgeschlagen.</p>
|
||
</div>
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-red-400">🗑️ Löschen</div>
|
||
<p class="text-xs text-slate-400">Artikel aus einem Slot entfernen — mit Sicherheitsabfrage. Slot wird danach wieder als frei angezeigt.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step p-4">
|
||
<div class="text-sm font-semibold text-slate-300 mb-2">Status-Übersicht</div>
|
||
<div class="grid grid-cols-3 md:grid-cols-6 gap-2 text-xs text-center">
|
||
<div><span class="text-slate-400 text-base">📝</span><div class="text-slate-500 mt-1">Entwurf</div></div>
|
||
<div><span class="text-purple-400 text-base">🗓️</span><div class="text-slate-500 mt-1">Eingeplant</div></div>
|
||
<div><span class="text-blue-400 text-base">📱</span><div class="text-slate-500 mt-1">Beim Bot</div></div>
|
||
<div><span class="text-green-400 text-base">✅</span><div class="text-slate-500 mt-1">Freigegeben</div></div>
|
||
<div><span class="text-sky-400 text-base">📤</span><div class="text-slate-500 mt-1">Gepostet</div></div>
|
||
<div><span class="text-slate-600 text-base">⏭️</span><div class="text-slate-500 mt-1">Skip</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</details>
|
||
|
||
<!-- 6. Einstellungen -->
|
||
<details class="card">
|
||
<summary class="p-5 flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-xl">⚙️</span>
|
||
<h2 class="text-base font-semibold text-white">6. Einstellungen</h2>
|
||
</div>
|
||
<span class="chevron text-slate-400 text-sm">▶</span>
|
||
</summary>
|
||
<div class="px-5 pb-5 space-y-4 border-t border-slate-700 pt-4">
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-slate-300">📢 Telegram Kanal</div>
|
||
<p class="text-xs text-slate-400">Kanal-ID oder <code>@username</code> des Ziel-Kanals eintragen. Der Bot muss Admin im Kanal sein.</p>
|
||
</div>
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-slate-300">⏰ Standard-Posting-Zeit</div>
|
||
<p class="text-xs text-slate-400">Default-Uhrzeit für neue Artikel. Kann pro Artikel beim Einplanen überschrieben werden.</p>
|
||
</div>
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-slate-300">👥 Redakteure</div>
|
||
<p class="text-xs text-slate-400">Neue Redakteure per Chat-ID hinzufügen. Beim Hinzufügen erhält der neue Redakteur automatisch eine Willkommensnachricht. Chat-ID herausfinden: <code>@userinfobot</code> in Telegram.</p>
|
||
</div>
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-slate-300">📌 Quellen-Favoriten</div>
|
||
<p class="text-xs text-slate-400">Häufig genutzte URLs speichern — erscheinen im Studio als Dropdown für schnellen Zugriff.</p>
|
||
</div>
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-slate-300">🌍 Aufenthaltsort</div>
|
||
<p class="text-xs text-slate-400">Aktuellen Standort einstellen. Die Reminder-Zeiten werden automatisch auf MEZ umgerechnet.</p>
|
||
</div>
|
||
<div class="step p-4 space-y-2">
|
||
<div class="text-sm font-semibold text-slate-300">🧠 Prompts</div>
|
||
<p class="text-xs text-slate-400">KI-Prompts erstellen, bearbeiten und mit einer Testquelle ausprobieren. Default-Prompt für neue Artikel festlegen.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</details>
|
||
|
||
<!-- FAQ -->
|
||
<details class="card">
|
||
<summary class="p-5 flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-xl">❓</span>
|
||
<h2 class="text-base font-semibold text-white">Häufige Fragen</h2>
|
||
</div>
|
||
<span class="chevron text-slate-400 text-sm">▶</span>
|
||
</summary>
|
||
<div class="px-5 pb-5 space-y-3 border-t border-slate-700 pt-4">
|
||
|
||
<div class="step p-4">
|
||
<div class="text-sm font-semibold text-slate-300 mb-1">Was passiert wenn ich vergesse freizugeben?</div>
|
||
<p class="text-xs text-slate-400">Um 18:00 Uhr kommt ein Reminder. Falls bis zur Posting-Zeit kein freigegebener Artikel vorhanden ist, wird der Slot übersprungen und ein Alarm gesendet.</p>
|
||
</div>
|
||
|
||
<div class="step p-4">
|
||
<div class="text-sm font-semibold text-slate-300 mb-1">Kann ich einen bereits geposteten Artikel bearbeiten?</div>
|
||
<p class="text-xs text-slate-400">Im Dashboard nicht rückwirkend — aber in Telegram kannst du die Nachricht direkt bearbeiten (Telegram-Editier-Funktion).</p>
|
||
</div>
|
||
|
||
<div class="step p-4">
|
||
<div class="text-sm font-semibold text-slate-300 mb-1">Wo finde ich die Chat-ID für einen neuen Redakteur?</div>
|
||
<p class="text-xs text-slate-400">In Telegram <code>@userinfobot</code> anschreiben → gibt die eigene Chat-ID zurück. Oder die Person schreibt dem <code>@Diendemleben_bot</code> — die ID erscheint dann im Bot-Log.</p>
|
||
</div>
|
||
|
||
<div class="step p-4">
|
||
<div class="text-sm font-semibold text-slate-300 mb-1">Wie sehe ich ob der Bot läuft?</div>
|
||
<p class="text-xs text-slate-400">Im Dashboard-Header: letzter Post-Zeitstempel. Im Bot: <code>/start</code> senden — Antwort bedeutet Bot ist aktiv. Auf dem Server: <code>docker ps</code> in CT 112.</p>
|
||
</div>
|
||
|
||
<div class="step p-4">
|
||
<div class="text-sm font-semibold text-slate-300 mb-1">Kann ich mehrere Artikel pro Tag planen?</div>
|
||
<p class="text-xs text-slate-400">Ja — jeden Zeitslot (15-Min-Raster) einmal belegen. Jeder Slot wird unabhängig gepostet. Doppelt belegte Slots werden automatisch blockiert.</p>
|
||
</div>
|
||
|
||
</div>
|
||
</details>
|
||
|
||
<div class="text-center text-xs text-slate-600 pt-4 pb-8">
|
||
FünfVorAcht · CT 112 auf pve-hetzner · Dashboard: <a href="https://fuenfvoracht.orbitalo.net" class="text-blue-400 hover:underline">fuenfvoracht.orbitalo.net</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
// Alle details initial geschlossen außer erstem
|
||
document.querySelectorAll('details').forEach((d, i) => {
|
||
if (i > 0) d.open = false;
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|