feat: How-To/Anleitung page + nav link

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XNQ8ghPfzAfsyVYd6HgFb6
2026-07-23 19:39:05 +00:00
parent 5b654b1436
commit 063903c60a
2 changed files with 85 additions and 0 deletions
@@ -15,6 +15,7 @@ const nav = [
  { href: '/', label: 'Studio', icon: 'studio' },
  { href: '/bibliothek', label: 'Bibliothek', icon: 'library' },
  { href: '/warteschlange', label: 'Warteschlange', icon: 'queue' },
+  { href: '/anleitung', label: 'Hilfe', icon: 'help' },
  ...(user?.role === 'admin' ? [{ href: '/admin', label: 'Admin', icon: 'admin' }] : []),
 ];

@@ -24,6 +25,7 @@ const ICONS: Record<string, string> = {
  library: `<svg viewBox="0 0 24 24" ${S}><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></svg>`,
  queue: `<svg viewBox="0 0 24 24" ${S}><path d="M9 6h11M9 12h11M9 18h7"/><circle cx="4.5" cy="6" r="1.15" fill="currentColor" stroke="none"/><circle cx="4.5" cy="12" r="1.15" fill="currentColor" stroke="none"/><circle cx="4.5" cy="18" r="1.15" fill="currentColor" stroke="none"/></svg>`,
  admin: `<svg viewBox="0 0 24 24" ${S}><path d="M4 8h9M17 8h3M4 16h3M11 16h9"/><circle cx="15" cy="8" r="2.2"/><circle cx="9" cy="16" r="2.2"/></svg>`,
+  help: `<svg viewBox="0 0 24 24" ${S}><circle cx="12" cy="12" r="8.5"/><path d="M9.6 9.4a2.5 2.5 0 1 1 3.4 2.3c-.7.3-1 .8-1 1.6v.3"/><circle cx="12" cy="16.7" r="0.6" fill="currentColor" stroke="none"/></svg>`,
 };
 ---
 <!doctype html>
@@ -0,0 +1,83 @@
+---
+import Base from '../layouts/Base.astro';
+---
+<Base title="Anleitung · Klarbild">
+  <div class="howto">
+    <div class="hkopf">
+      <h1>So funktioniert Klarbild</h1>
+      <button class="druck" onclick="window.print()">Als PDF / drucken</button>
+    </div>
+    <p class="lead">Aus Screenshots und Fundstücken werden druckfertige Bilder — bereinigt, freigestellt,
+      im richtigen Format, optional direkt bei Picdrop. Alles geht über die Website und über Telegram.</p>
+
+    <section>
+      <h2>1 · Bild bearbeiten</h2>
+      <ol>
+        <li>Im <b>Studio</b> oben <b>Bearbeiten</b> wählen.</li>
+        <li>Screenshots hochladen — ziehen, mit ⌘/Strg + V einfügen oder tippen (bis zu 100 auf einmal).</li>
+        <li>Wählen, was passieren soll: <b>Bereinigen</b> (Rahmen, Wand, Shop-Oberfläche weg),
+          <b>Freistellen</b> (Motiv frei, Hintergrund transparent), <b>Format</b> (z. B. 30 × 40 cm oder The Frame),
+          <b>Kontur</b> (weißer Stickerrand).</li>
+        <li>Beim Format „<b>Zuschneiden</b>" oder „<b>Erweitern</b>" wählen — Erweitern erzeugt mehr Szene rund ums
+          Motiv (Outpainting), ideal für The Frame.</li>
+        <li><b>Qualität</b> und Ziel (<b>Bibliothek</b>, <b>Picdrop</b> oder beides) wählen, dann <b>Loslegen</b>.</li>
+      </ol>
+    </section>
+
+    <section>
+      <h2>2 · Mehrere Bilder kombinieren</h2>
+      <p>Modus <b>Kombinieren</b>: mindestens zwei Bilder hochladen und beschreiben, was entstehen soll —
+        z. B. „das Poolbild, aber mit unserer Hündin Frieda am Beckenrand". Das erste Bild ist die Leitszene,
+        weitere liefern Personen oder Motive. Es entsteht ein neues, zusammengesetztes Bild.</p>
+    </section>
+
+    <section>
+      <h2>3 · Neues Bild aus Text</h2>
+      <p>Modus <b>Neu erzeugen</b>: ganz ohne Vorlage, nur aus einer Beschreibung. Je genauer der Text,
+        desto besser das Ergebnis.</p>
+    </section>
+
+    <section>
+      <h2>4 · Bibliothek, Ordner & Alternativen</h2>
+      <p>Alle Ergebnisse landen in der <b>Bibliothek</b>. Über die Ordner-Leiste oben lässt sich nach Ordner
+        filtern; jedem Ordner kann eine eigene Picdrop-Galerie zugeordnet werden. Mit <b>+ Alternative</b>
+        entsteht eine weitere Fassung desselben Bildes — die Fassungen liegen gruppiert beieinander und lassen
+        sich per Miniaturleiste umschalten. <b>Vorher/Nachher</b> zeigt den Vergleich zum Original.</p>
+    </section>
+
+    <section>
+      <h2>5 · Alles per Telegram</h2>
+      <ul>
+        <li>Einmalig koppeln: im Admin einen Code erzeugen und im Chat mit dem Bot eingeben.</li>
+        <li><b>Bearbeiten:</b> Bilder weiterleiten (am besten als <i>Datei</i> für volle Qualität) → Rezept wählen.</li>
+        <li><b>Kombinieren:</b> zwei oder mehr Bilder mit einer Bildunterschrift senden (z. B. „mit unserer Hündin
+          Frieda") → Knopf „🔀 Kombinieren".</li>
+        <li><b>Neu erzeugen:</b> <code>/neu &lt;Beschreibung&gt;</code> — z. B. <code>/neu ein Olivenzweig auf Sand</code>.</li>
+        <li>Der Bot meldet sich einmal, wenn alles fertig ist — mit den Ergebnissen und Links.</li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>Tipps</h2>
+      <ul>
+        <li>Für Druck immer 300 dpi und ein cm-Format wählen — die Pixelmaße stehen direkt dabei.</li>
+        <li>In Telegram Bilder als <i>Datei</i> senden, nicht als Foto — sonst komprimiert Telegram.</li>
+        <li>Sticker: Freistellen + Kontur zusammen wählen.</li>
+      </ul>
+    </section>
+  </div>
+
+  <style>
+    .howto{max-width:760px;margin:0 auto;}
+    .hkopf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
+    .howto h1{font-family:var(--font-display);font-size:1.7rem;letter-spacing:-.02em;margin:6px 0 4px;}
+    .druck{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer;font-family:inherit;font-size:.85rem;color:var(--ink);}
+    .lead{color:var(--soft);line-height:1.6;margin:4px 0 20px;}
+    .howto section{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;}
+    .howto h2{font-size:1.05rem;margin:0 0 10px;}
+    .howto ol,.howto ul{margin:0;padding-left:20px;line-height:1.65;}
+    .howto li{margin-bottom:6px;}
+    .howto code{font-family:var(--font-mono);font-size:.85em;background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:1px 5px;}
+    @media print{.topbar,.tabbar,.druck{display:none !important;}.howto section{break-inside:avoid;}}
+  </style>
+</Base>