dejanandClaude Opus 5
1cce5ec492
Wie viele Slides ein Post hat, stand bisher im Code. SLIDES war ein festes Array, der Stand speicherte nur Einstellungen dazu, und die durchgehende Flaeche lag als 5400 px in der CSS. Jetzt entsteht SLIDES aus einem Deck. Jeder Eintrag ist entweder eine mitgelieferte Vorlage (ref) oder eine selbst angelegte Slide; eigene Texte liegen als Ueberschreibung daneben. Fuer Vorlagen wandert damit nur ein Verweis in den Stand, keine Kopie -- eine Aenderung an der Vorlage im Code kommt weiterhin bei allen an, die sie nicht angefasst haben. Haette man die Slides vollstaendig in den Stand geschrieben, waeren sie dort eingefroren. Unter der Slide-Auswahl stehen vier Knoepfe: neu, kopieren, loeschen, verschieben. Die Felder pro Slide (Verschiebungen, Muster, Layout) wandern im Gleichschritt mit. Bleibt eine einzige Slide uebrig, ist der Post ein Einzelbild: die Kopfzeile sagt es und der ZIP-Knopf verschwindet. Neu ist die Gruppe "Inhalt (nur diese Slide)" mit Tag, Ueberschrift, Fließtext und der Auswahl des Screenshots. Getippt wird Text, nicht Auszeichnung: *Wort* setzt den Akzent, ein Zeilenumbruch bricht die Zeile um. Gespeichert wird trotzdem fertiges Markup, weil die Vorlagen es so mitbringen. Beim Bildwechsel folgt das Rahmenformat dem Seitenverhaeltnis der Aufnahme, sonst stuende ein Hochformat in einem Querformat-Rahmen. Alle Screens werden vorgeladen, nicht nur die gerade benutzten -- ein Bild, das erst beim Auswaehlen geladen wuerde, fehlte im Export. Der Stand steht auf v6. Ein Stand ohne Deck stammt aus der Zeit fester fuenf Slides und behaelt die Vorlagen. Dabei abgesichert: Der Tastaturschutz rief e.target.matches auf. Ist nichts fokussiert, ist das Ziel das Dokument und hat kein matches. Seit der Neuaufbau den zuletzt fokussierten Knopf entfernt, ist das erreichbar. Geprueft mit 17 Faellen ueber das DevTools-Protokoll: anlegen, tippen, Screenshot tauschen, kopieren, schieben, loeschen, Neustart. Dazu ein Export einer selbst angelegten Slide und der volle Durchlauf der bestehenden elf. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
126 lines
4.6 KiB
Markdown
126 lines
4.6 KiB
Markdown
# HiveGrid Social — Design-Library & Post-Generator
|
||
|
||
Eigenständige Werkbank für HiveGrid-Social-Grafiken. Slides werden im Browser
|
||
als HTML gebaut, im Canvas bearbeitet und pixelgenau als Instagram-taugliche
|
||
PNGs exportiert.
|
||
|
||
**Das Repo ist bewusst autark.** Keine CDN-Verweise, keine Google-Fonts zur
|
||
Laufzeit, keine Pfade in andere Repos. Alles, was ein Post braucht — Schrift,
|
||
Logos, Mockups, Screenshots, Bibliotheken — liegt hier.
|
||
|
||
## Starten
|
||
|
||
```sh
|
||
./serve.sh # http://127.0.0.1:4321
|
||
```
|
||
|
||
Downloads landen direkt in `~/Downloads`, ohne Browser-Dialog.
|
||
|
||
## Projekte
|
||
|
||
| Projekt | Datei | Inhalt |
|
||
|---|---|---|
|
||
| Post 1 · Lösung | `post1.html` | Carousel, Anzahl frei |
|
||
|
||
### Slides anlegen und wegnehmen
|
||
|
||
Wie viele Slides ein Post hat, steht nicht fest. Unter der Slide-Auswahl:
|
||
|
||
| Knopf | Wirkung |
|
||
|---|---|
|
||
| `+ Neu` | leere Slide dahinter einfügen |
|
||
| `Kopie` | die gewählte Slide samt Text, Bild und Verschiebungen verdoppeln |
|
||
| `Löschen` | die gewählte Slide wegnehmen (die letzte bleibt stehen) |
|
||
| `←` `→` | eine Position nach vorn oder hinten |
|
||
|
||
Bei einer einzigen Slide ist der Post ein **Einzelbild** — die Kopfzeile sagt
|
||
es, und der ZIP-Knopf verschwindet.
|
||
|
||
Unter **Inhalt (nur diese Slide)** stehen Tag, Überschrift, Fließtext und die
|
||
Auswahl des Screenshots. Getippt wird Text, keine Auszeichnung: `*Wort*` setzt
|
||
den Akzent, ein Zeilenumbruch bricht die Zeile um. Das Rahmenformat folgt beim
|
||
Wechsel automatisch dem Seitenverhältnis der gewählten Aufnahme.
|
||
|
||
> Die Tags sind gestalterisch ausgeblendet (`visibility: hidden` auf `.badge`).
|
||
> Der eingetippte Tag beschriftet deshalb vorerst nur den Slide-Knopf im
|
||
> Bedienfeld.
|
||
|
||
**Mitgelieferte Slides bleiben Vorlagen.** Der Stand speichert für sie nur
|
||
einen Verweis und die Felder, die du überschrieben hast — eine Änderung an der
|
||
Vorlage im Code kommt dadurch weiterhin bei allen an, die sie nicht angefasst
|
||
haben. Selbst angelegte Slides stehen vollständig im Stand.
|
||
|
||
**Das Projekt speichert seinen Stand** — Einstellungen, Layouts, Muster und
|
||
alle Verschiebungen aus dem Canvas überleben einen Reload. „Projekt
|
||
zurücksetzen" wirft ihn weg.
|
||
|
||
### Der Stand liegt im Repo
|
||
|
||
Nicht nur im Browser: jede Änderung landet auch in `state/<projekt>.json`.
|
||
**Diese Dateien gehören mit in den Commit.** Nur so hat die andere Maschine
|
||
nach `git pull` denselben Stand.
|
||
|
||
```
|
||
state/post1.json Post 1 · Lösung
|
||
state/post1-merk.json Rückfallpunkt
|
||
```
|
||
|
||
Beim Laden gewinnt die Datei, der localStorage ist nur der Rückfall, wenn der
|
||
Server nicht läuft. Wer den Stand ändert, muss also committen und pushen —
|
||
sonst sieht ihn niemand sonst. Gibt es die Datei noch nicht, wird der Stand
|
||
aus dem Browser einmalig hineingeschrieben.
|
||
|
||
## Bedienung
|
||
|
||
| Taste | Wirkung |
|
||
|---|---|
|
||
| `←` `→` | Slide wechseln (im Bearbeiten-Modus: Element verschieben) |
|
||
| `E` | Bearbeiten an/aus |
|
||
| `W` | Streifen ⇄ Einzelansicht |
|
||
| `V` | Variante hell/dunkel |
|
||
| `L` `M` `I` | Layout · Muster · Intensität |
|
||
| `C` `G` `T` | Durchgehend · Tag-Ausrückung · Perspektive |
|
||
| `D` `A` | Slide laden · alle als ZIP |
|
||
|
||
Im Bearbeiten-Modus lassen sich Elemente ziehen, mit den Pfeiltasten
|
||
pixelweise schieben (`⇧` = 10 px) und über `A−`/`A+` in der Größe ändern.
|
||
|
||
### Auf der Fläche bewegen
|
||
|
||
| Maus | Wirkung |
|
||
|---|---|
|
||
| Ziehen | Ausschnitt schieben |
|
||
| Rad | Zoomen, auf den Zeiger zu |
|
||
| `⇧` + Rad | Waagerecht schieben |
|
||
| Leertaste-Ziehen, mittlere Taste | Schieben, auch im Bearbeiten-Modus |
|
||
|
||
Ein gewöhnliches Mausrad genügt, ohne Zusatztaste. Im Bearbeiten-Modus zieht
|
||
die linke Taste das Element unter dem Zeiger — die Fläche schiebt man dort mit
|
||
gedrückter Leertaste oder der mittleren Taste. `Fit` unten rechts setzt den
|
||
Maßstab zurück.
|
||
|
||
## Aufbau
|
||
|
||
```
|
||
assets/
|
||
├── brand/ Wortmarke hell/dunkel, G-Marke (SVG + PNG), Wabe, Geerkens
|
||
├── partner/ DATEV, KWP, Google Calendar, Google Drive, MS Outlook, MS Teams
|
||
├── mockups/ Geräte-Mockups (Displays ausgeknockt, Screenshot liegt dahinter)
|
||
├── screens/ Software-Screenshots
|
||
└── fonts/ Manrope 400–800, lokal
|
||
vendor/ html-to-image, JSZip
|
||
state/ Projektstände, gehören ins Repo
|
||
serve.py Statischer Server + /save- und /state-Endpunkt
|
||
rules.md Gestaltungsregeln, Farbwerte, Export-Wissen
|
||
```
|
||
|
||
## Regeln
|
||
|
||
**`rules.md` ist die Arbeitsgrundlage.** Farbwerte, Geometrie, Typografie,
|
||
Layout-Template, Instagram-Export und die Liste der Fallen, in die wir schon
|
||
getappt sind. Vor jeder Änderung an der Gestaltung dort nachsehen.
|
||
|
||
Marken-Werte stammen aus der Website (`HiveGrid-Website`) und sind hier
|
||
**gespiegelt**, nicht verlinkt. Ändert sich dort etwas, muss es hier
|
||
nachgezogen werden.
|