dejanandClaude Opus 5
94e1b9a84a
Das blanke Rad zoomt jetzt, die linke Maustaste zieht die Flaeche. Eine gewoehnliche PC-Maus kam vorher nicht an den Ausschnitt heran: Zoomen ging nur mit Strg/Cmd, Schieben nur ueber Leertaste oder mittlere Taste. Die Radschritte laufen exponentiell ueber deltaY statt in festen Spruengen, mit Umrechnung der deltaMode-Einheiten -- ohne die zoomt Firefox pro Rastung um ein Vielfaches weniger als Chrome. Waagerechtes Wischen und Shift+Rad schieben weiter, damit sich ein Trackpad nicht wie eine Zoomwippe anfuehlt. Im Bearbeiten-Modus behaelt das Element unter dem Zeiger die linke Taste. Nach einem echten Zug wird der Klick geschluckt, sonst sprang die Auswahl auf die Slide, ueber der die Maus zufaellig losliess. Dabei zwei aeltere Fehler mitgenommen: setZoom rechnete den Zeigerpunkt per Dreisatz auf scrollLeft hoch und uebersah das Polster der Flaeche. Der Inhalt lief pro Schritt um 60 x (Faktor-1) px weg. Der Punkt wird jetzt gemessen statt gerechnet. Der Bearbeiten-Zug leitete seinen Massstab aus der Border-Box von .strip ab. Die misst Breite mal Massstab hoch zwei, weil .strip ein Flex-Kind der schon skalierten Huelle ist -- geteilt wurde also durch das Quadrat, das Element wanderte bei eingepasster Ansicht um das 5,6-fache der Mausbewegung. Geprueft mit echten Rad- und Zieh-Ereignissen ueber das DevTools-Protokoll, 15 Pruefungen gegen beide Dateien. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
100 lines
3.5 KiB
Markdown
100 lines
3.5 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, 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.
|