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

### Eigene Bilder importieren

Unter **Eigene Bilder** wählst du Dateien aus dem Finder, oder du ziehst sie
direkt auf eine Slide. Beim Ablegen wird das Bild dort zum **zweiten Bild** und
lässt sich im Bearbeiten-Modus frei schieben und in der Größe ändern; über den
Knopf importierst du nur und ordnest danach unter *Inhalt* zu.

Die Datei geht **byteweise unverändert** an den Server und liegt danach unter
`assets/eigene/`. Nichts wird neu kodiert, skaliert oder umbenannt — nur
Zeichen, die in einem Dateinamen nichts zu suchen haben, weichen einem
Bindestrich.

```
assets/eigene/    importierte Bilder, gehören mit in den Commit
```

> Der Umweg über den Server ist Absicht. Ein Foto als Base64 im Projektstand
> wäre größer als der gesamte übrige Stand und machte jeden Diff unlesbar. So
> steht dort nur der Pfad.

Die Auswahllisten unter *Inhalt* holt der Generator beim Start vom Server
(`/bilder`), importierte Bilder stehen deshalb sofort darin — mit `★`
gekennzeichnet.

**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 und mit den Pfeiltasten
pixelweise schieben (`⇧` = 10 px).

**Ein angeklicktes Element öffnet sein eigenes Feld rechts.** Damit ist die
Oberfläche geteilt: links die Slide und alles Allgemeine, rechts das eine
Element.

| Im Element-Feld | Wirkung |
|---|---|
| `Text` | Beschriftung des Elements, `*Wort*` setzt den Akzent |
| `Schrift` / `Breite`, `A−` `A+` | Größe |
| `X` `Y` | Stelle auf der Slide, gezählt ab der Mitte, bezogen auf die obere linke Ecke |
| `Ebene` | wie `z-index` — höher liegt weiter vorn. Leer heißt Standard |
| `Links` `Mitte` `Rechts`, `Oben` `Mitte` `Unten` | an der Slide ausrichten, 92 px Rand |
| `Position` / `Größe angleichen` | denselben Wert auf allen Slides |
| `Löschen` | nimmt es aus der Slide. Es taucht darunter als „… zurück" wieder auf |

**Der Streifen ist eine durchgehende Fläche.** Jede Slide trägt das gesamte
Blatt, ein Element lässt sich also über den ganzen Post schieben und nicht nur
in die Nachbar-Slide.

### 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
├── eigene/     selbst importierte Bilder
└── fonts/      Manrope 400–800, lokal
vendor/         html-to-image, JSZip
state/          Projektstände, gehören ins Repo
serve.py        Statischer Server + /save, /state, /upload, /bilder
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.