homelab-brain/fuenfvoacht/src/templates/hilfe.html
root 92645521b2 fix(fuenfvoacht): UNIQUE constraint bug + Einplanen für zukünftige Tage
- DB-Migration: UNIQUE(date) → UNIQUE(date, post_time) — alte DBs werden
  automatisch beim Start migriert (database.py init_db)
- api_save: gibt article_id zurück für nachgelagerte Operationen
- confirmPlan(): speichert auf selectedDate, verschiebt dann ggf. per
  reschedule auf Zieldatum — fixes "Kein Artikel für diesen Tag vorhanden"
- Alle Source-Dateien (app.py, database.py, templates, ...) hinzugefügt
- arakava-news: cursor-memory-system Artikel + SVG-Diagramm hinzugefügt

Made-with: Cursor
2026-02-28 22:46:55 +07:00

386 lines
20 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>