e607b1fba0
- fuenfvoracht/STATE.md: Review-Flow entfernt, direkt approved, neuer Changelog - arakava-news/STATE.md: Aktualisiert - redax-wp/STATE.md + src/app.py: Aktualisiert - flugpreisscanner/STATE.md: Aktualisiert - infrastructure/STATE.md: Aktualisiert - fuenfvoracht READMEs und Kurzuebersichten hinzugefuegt Made-with: Cursor
347 lines
8.5 KiB
HTML
347 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>FünfVorAcht — Kurzübersicht</title>
|
||
<style>
|
||
@page { size: A4; margin: 18mm 18mm 18mm 18mm; }
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font-family: 'Segoe UI', Arial, sans-serif;
|
||
font-size: 10.5pt;
|
||
color: #1e293b;
|
||
background: #fff;
|
||
width: 210mm;
|
||
min-height: 297mm;
|
||
padding: 18mm;
|
||
}
|
||
|
||
/* Header */
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 3px solid #6366f1;
|
||
padding-bottom: 10px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.header-left h1 {
|
||
font-size: 22pt;
|
||
font-weight: 800;
|
||
color: #6366f1;
|
||
letter-spacing: -0.5px;
|
||
}
|
||
.header-left .subtitle {
|
||
font-size: 9.5pt;
|
||
color: #64748b;
|
||
margin-top: 2px;
|
||
}
|
||
.header-right {
|
||
text-align: right;
|
||
font-size: 8.5pt;
|
||
color: #94a3b8;
|
||
}
|
||
.badge {
|
||
display: inline-block;
|
||
background: #6366f1;
|
||
color: white;
|
||
font-size: 8pt;
|
||
font-weight: 600;
|
||
padding: 2px 8px;
|
||
border-radius: 20px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
/* Intro */
|
||
.intro {
|
||
background: #f1f5f9;
|
||
border-left: 4px solid #6366f1;
|
||
padding: 8px 12px;
|
||
border-radius: 0 6px 6px 0;
|
||
margin-bottom: 14px;
|
||
font-size: 10pt;
|
||
color: #334155;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Zwei-Spalten-Layout */
|
||
.two-col {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
/* Boxen */
|
||
.box {
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 8px;
|
||
padding: 10px 12px;
|
||
}
|
||
.box h3 {
|
||
font-size: 9.5pt;
|
||
font-weight: 700;
|
||
color: #6366f1;
|
||
margin-bottom: 7px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
padding-bottom: 5px;
|
||
}
|
||
.box ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
.box ul li {
|
||
font-size: 9.5pt;
|
||
color: #374151;
|
||
padding: 2px 0;
|
||
padding-left: 14px;
|
||
position: relative;
|
||
line-height: 1.4;
|
||
}
|
||
.box ul li::before {
|
||
content: "›";
|
||
position: absolute;
|
||
left: 0;
|
||
color: #6366f1;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* Workflow */
|
||
.workflow {
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 8px;
|
||
padding: 10px 14px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.workflow h3 {
|
||
font-size: 9.5pt;
|
||
font-weight: 700;
|
||
color: #6366f1;
|
||
margin-bottom: 8px;
|
||
}
|
||
.workflow-steps {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
flex-wrap: nowrap;
|
||
}
|
||
.step {
|
||
text-align: center;
|
||
flex: 1;
|
||
}
|
||
.step-icon {
|
||
font-size: 14pt;
|
||
display: block;
|
||
margin-bottom: 2px;
|
||
}
|
||
.step-text {
|
||
font-size: 7.5pt;
|
||
color: #475569;
|
||
line-height: 1.3;
|
||
}
|
||
.step-arrow {
|
||
color: #94a3b8;
|
||
font-size: 14pt;
|
||
flex-shrink: 0;
|
||
padding: 0 2px;
|
||
}
|
||
|
||
/* Zugangsdaten */
|
||
.access {
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 8px;
|
||
padding: 10px 14px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.access h3 {
|
||
font-size: 9.5pt;
|
||
font-weight: 700;
|
||
color: #6366f1;
|
||
margin-bottom: 7px;
|
||
}
|
||
.access-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 6px;
|
||
}
|
||
.access-item {
|
||
background: #f8fafc;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 5px;
|
||
padding: 5px 8px;
|
||
}
|
||
.access-item .label {
|
||
font-size: 7.5pt;
|
||
color: #94a3b8;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
.access-item .value {
|
||
font-size: 9.5pt;
|
||
color: #1e293b;
|
||
font-weight: 600;
|
||
font-family: 'Courier New', monospace;
|
||
word-break: break-all;
|
||
}
|
||
|
||
/* Footer */
|
||
.footer {
|
||
border-top: 1px solid #e2e8f0;
|
||
padding-top: 8px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.footer-left {
|
||
font-size: 8pt;
|
||
color: #94a3b8;
|
||
}
|
||
.footer-right {
|
||
font-size: 8pt;
|
||
color: #94a3b8;
|
||
text-align: right;
|
||
}
|
||
|
||
@media print {
|
||
body { padding: 0; }
|
||
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Header -->
|
||
<div class="header">
|
||
<div class="header-left">
|
||
<div class="badge">🕗 Automatisierung</div>
|
||
<h1>FünfVorAcht</h1>
|
||
<div class="subtitle">KI-gestützter Telegram-Kanal-Poster mit Redaktions-Dashboard</div>
|
||
</div>
|
||
<div class="header-right">
|
||
Stand: Februar 2026<br>
|
||
CT 112 · pve-hetzner<br>
|
||
<strong>fuenfvoacht.orbitalo.net</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Intro -->
|
||
<div class="intro">
|
||
FünfVorAcht automatisiert die tägliche Bespielung eines Telegram-Kanals. Artikel werden per KI generiert, im Dashboard redigiert, auf den Punkt genau eingeplant und automatisch zum gewünschten Zeitpunkt gepostet — ohne manuelles Eingreifen.
|
||
</div>
|
||
|
||
<!-- Workflow -->
|
||
<div class="workflow">
|
||
<h3>⚡ Workflow</h3>
|
||
<div class="workflow-steps">
|
||
<div class="step"><span class="step-icon">🔗</span><span class="step-text">Quelle /<br>Thema eingeben</span></div>
|
||
<div class="step-arrow">›</div>
|
||
<div class="step"><span class="step-icon">🤖</span><span class="step-text">KI generiert<br>Artikel</span></div>
|
||
<div class="step-arrow">›</div>
|
||
<div class="step"><span class="step-icon">✏️</span><span class="step-text">Redigieren +<br>Vorschau</span></div>
|
||
<div class="step-arrow">›</div>
|
||
<div class="step"><span class="step-icon">📅</span><span class="step-text">Datum +<br>Uhrzeit wählen</span></div>
|
||
<div class="step-arrow">›</div>
|
||
<div class="step"><span class="step-icon">📩</span><span class="step-text">Review per<br>Telegram</span></div>
|
||
<div class="step-arrow">›</div>
|
||
<div class="step"><span class="step-icon">✅</span><span class="step-text">Freigeben<br>oder bearbeiten</span></div>
|
||
<div class="step-arrow">›</div>
|
||
<div class="step"><span class="step-icon">📤</span><span class="step-text">Automatisch<br>gepostet</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Feature-Boxen -->
|
||
<div class="two-col">
|
||
|
||
<div class="box">
|
||
<h3>✍️ Artikel & KI</h3>
|
||
<ul>
|
||
<li>KI-Generierung via OpenRouter (GPT-4o, Claude, Mistral u.a.)</li>
|
||
<li>7 verschiedene Schreibstile wählbar (sarkastisch, sachlich, humorvoll…)</li>
|
||
<li>Echtzeit Telegram-Vorschau während dem Schreiben</li>
|
||
<li>Markenzeichen wird automatisch angehängt</li>
|
||
<li>Versionsverlauf bei Neu-Generierung</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="box">
|
||
<h3>📅 Zeitplanung</h3>
|
||
<ul>
|
||
<li>15-Minuten-Zeitraster (06:00 – 23:45 Uhr)</li>
|
||
<li>Mehrere Artikel pro Tag planbar</li>
|
||
<li>7-Tage-Redaktionskalender im Dashboard</li>
|
||
<li>Umplanen & Löschen direkt im Board</li>
|
||
<li>Slot-Konfliktschutz (kein doppeltes Buchen)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="box">
|
||
<h3>🤖 Telegram Bot</h3>
|
||
<ul>
|
||
<li>Review-Anfrage an alle Redakteure</li>
|
||
<li>Inline-Buttons: ✅ Freigeben / ✏️ Bearbeiten</li>
|
||
<li>Morgen-Briefing täglich 10:00 Uhr</li>
|
||
<li>Nachmittags-Reminder um 18:00 Uhr</li>
|
||
<li>Sofort-Alarm bei Posting-Fehlern</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="box">
|
||
<h3>⚙️ Dashboard & Verwaltung</h3>
|
||
<ul>
|
||
<li>Webbasiertes Dashboard (Browser)</li>
|
||
<li>Mehrere Redakteure verwaltbar</li>
|
||
<li>Prompt-Bibliothek editierbar</li>
|
||
<li>Posting-History der letzten 30 Tage</li>
|
||
<li>OpenRouter-Kontostand abrufbar</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Zugangsdaten -->
|
||
<div class="access">
|
||
<h3>🔑 Zugang & Technik</h3>
|
||
<div class="access-grid">
|
||
<div class="access-item">
|
||
<div class="label">Dashboard URL</div>
|
||
<div class="value">fuenfvoacht.orbitalo.net</div>
|
||
</div>
|
||
<div class="access-item">
|
||
<div class="label">Telegram Bot</div>
|
||
<div class="value">@Diendemleben_bot</div>
|
||
</div>
|
||
<div class="access-item">
|
||
<div class="label">Standard Posting-Zeit</div>
|
||
<div class="value">19:55 Uhr (konfigurierbar)</div>
|
||
</div>
|
||
<div class="access-item">
|
||
<div class="label">Server</div>
|
||
<div class="value">CT 112 · pve-hetzner</div>
|
||
</div>
|
||
<div class="access-item">
|
||
<div class="label">GitHub</div>
|
||
<div class="value">github.com/Orbitalo/F-nf-vor-Acht</div>
|
||
</div>
|
||
<div class="access-item">
|
||
<div class="label">Stack</div>
|
||
<div class="value">Python · Flask · Docker · SQLite</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="footer">
|
||
<div class="footer-left">
|
||
FünfVorAcht · Orbitalo Homelab · Stand Februar 2026
|
||
</div>
|
||
<div class="footer-right">
|
||
Zum Drucken: Browser → Drucken → DIN A4 · Ränder: Keine
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|