dejanandClaude Opus 5
38c256e52f
Elemente liessen sich nur mit der Maus schieben. Damit war ein Wert auf zwei Slides nie exakt gleich zu treffen, und genau das war die Aufgabe. Zahlen sind jetzt Eingabefelder. Breite oder Schrift, X und Y. Das Feld wird beim Ziehen nicht neu aufgebaut und nie das ueberschrieben, in dem der Cursor steht; Tastenkuerzel greifen in Eingabefeldern nicht mehr. X und Y zaehlen ab der Mitte der Slide und beziehen sich auf die OBERE LINKE ECKE des Elements, nicht auf seinen Mittelpunkt. Eine zweizeilige und eine dreizeilige Ueberschrift sind unterschiedlich hoch: bei gleichem Mittelpunkt liegen ihre Oberkanten 39 px auseinander und der hoehere Block waechst nach oben ins Tag. Ab der ersten Zeile gerechnet stimmt es unabhaengig von der Zeilenzahl. Zwei Knoepfe uebertragen Position oder Groesse des gewaehlten Elements auf alle anderen Slides. Angeglichen wird die Stelle, nicht der Versatz: jedes Element liegt von sich aus woanders. In der Einzelansicht wird jeder Holder kurz sichtbar gemacht, sonst hat er kein Layout. Hilfslinien beim Ziehen: Raster, Innenabstand und die beiden Mittelachsen, nur auf der Slide, an der gezogen wird. Liegt die Mitte auf einer Achse, leuchtet sie auf. Vor dem Export werden sie zwangsweise abgeschaltet. Merkzettel unten rechts: ein Stand laesst sich ablegen und mit einem Klick zurueckholen. Er liegt als eigenes Projekt in state/ und damit im Repo. Einmalige Angleichung der Tags beim Laden (Stand 1 auf 2), weil der Tag auf jeder Slide einzeln gezogen worden war. Das laeuft im Ladepfad und nicht ueber die Datei: ein offener Tab haelt seinen Stand im Speicher und schreibt eine Aenderung an der Datei beim naechsten Klick wieder zu. Ueberschrift der Chat-Slide von "automatisch seinen Kanal." auf "von selbst seinen Kanal.". Die alte Zeile misst mit Marker 933 px bei 896 verfuegbaren und brach in eine dritte Zeile. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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
./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, 5 Slides |
| Post 2 · Statement | index.html |
Einzelbild |
Oben im Bedienfeld wechselt man zwischen ihnen. Jedes 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-alt.json Post 1 · Alt
state/post2.json Post 2 · Statement
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.