# 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.