72 lines
3.3 KiB
HTML
72 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>History — 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; }
|
|
.tg-preview { background: #212d3b; border-left: 3px solid #3b82f6; font-family: system-ui; white-space: pre-wrap; line-height: 1.6; }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen">
|
|
<nav class="bg-slate-900 border-b border-slate-700 px-6 py-4 flex items-center justify-between">
|
|
<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-4 text-sm">
|
|
<a href="/" class="text-slate-400 hover:text-white">Studio</a>
|
|
<a href="/history" class="text-blue-400 font-semibold">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-slate-400 hover:text-white">❓ Hilfe</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="max-w-4xl mx-auto px-6 py-8">
|
|
<h1 class="text-2xl font-bold text-white mb-6">📋 Artikel-History</h1>
|
|
<div class="space-y-4">
|
|
{% for art in articles %}
|
|
<div class="card p-4">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-3">
|
|
<span class="font-semibold text-white">{{ art.date }}</span>
|
|
<span class="text-xs px-2 py-0.5 rounded-full
|
|
{% if art.status == 'posted' %}bg-blue-900 text-blue-300
|
|
{% elif art.status == 'approved' %}bg-green-900 text-green-300
|
|
{% elif art.status == 'pending_review' %}bg-yellow-900 text-yellow-300
|
|
{% else %}bg-slate-700 text-slate-400{% endif %}">
|
|
{{ {'posted': '📤 Gepostet', 'approved': '✅ Freigegeben',
|
|
'pending_review': '⏳ Offen', 'skipped': '⏭️ Skip'}.get(art.status, art.status) }}
|
|
</span>
|
|
<span class="text-xs text-slate-500">v{{ art.version }}</span>
|
|
</div>
|
|
<button onclick="toggleArticle({{ art.id }})"
|
|
class="text-xs text-blue-400 hover:underline">anzeigen</button>
|
|
</div>
|
|
<div class="text-xs text-slate-500 mb-2">
|
|
Quelle: {{ art.source_input[:80] if art.source_input else '—' }}
|
|
</div>
|
|
<div id="art-{{ art.id }}" class="hidden">
|
|
<div class="tg-preview rounded-lg p-4 text-sm text-slate-200 mt-2">{{ art.content_final or '—' }}</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-slate-400">Noch keine Artikel vorhanden.</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function toggleArticle(id) {
|
|
const el = document.getElementById('art-' + id);
|
|
el.classList.toggle('hidden');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|