dejanandClaude Opus 5
e88afc61a4
Rueckmeldung aus dem Team war, das Design duerfe "futuristischer" sein. Statt den bestehenden Beitrag umzubauen liegt er jetzt zweimal vor: post2.html bleibt die Skizzenfassung, post2-alt.html zeigt denselben Beitrag mit denselben Texten in praeziser Formensprache. Technisch ist es kein zweiter Entwurf, sondern dieselbe Zeichnung mit anderen Primitiven. strich zieht eine Gerade statt eines schwingenden Zuges, kringel eine exakte Ellipse statt eines offenen Kringels, rechteck und chamfer haben keine Ecken mehr, die ueberschiessen. Die Kompositionen sind Zeile fuer Zeile dieselben. Wer eine Visualisierung aendert, muss deshalb an beide Dateien denken -- steht in der README. Was in der Alternative entfaellt: die Randnotizen der Titel-Slide (Gluehbirne, Zettel, Maulschluessel), der versetzte Zweitrahmen mit schraffiertem Band, die Bodenschatten unter den Ikonen und alle Schraffuren als Fuellung. An ihre Stelle treten ein sauberer Chamfer-Rahmen mit Eckwinkeln in Gelb und gefuellte Flaechen. Die dunkle Variante hat zwei Fehler sichtbar gemacht, die in der hellen Fassung nie aufgefallen waeren: Das Akzentwort steht auf Dunkel in #1A1A1A und ist nur dort lesbar, wo die gelbe Markerflaeche darunterliegt. Die deckte 62 Prozent der Zeilenhoehe ab, also rund 49 px bei einer Versalhoehe von etwa 53 -- die obere Haelfte der Buchstaben verschwand im Grund. Sie deckt jetzt die ganze Zeile. Die Beschreibungen der drei Schritte auf der letzten Slide standen fest auf #555555, einem Wert der hellen Variante. Sekundaerer Text folgt jetzt der Variante, wie TINTE und GELB auch. Dafuer zieht applyAll die Farben nach und baut alle Seiten neu, nicht nur die Titel-Seiten. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
181 lines
7.3 KiB
Markdown
181 lines
7.3 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 | Übergabe |
|
||
|---|---|---|---|
|
||
| Post 1 · Lösung | `post1.html` | Carousel, Anzahl frei | |
|
||
| Post 2 · Die Geschichte | `post2.html` | Carousel, 6 Slides, erscheint 12.08. | [`POST-2.md`](./POST-2.md) |
|
||
| Post 2 · Alternative | `post2-alt.html` | Derselbe Beitrag, moderne Formensprache | |
|
||
|
||
**Post 2 gibt es zweimal.** Beide Fassungen zeigen denselben Beitrag mit
|
||
denselben Texten; sie unterscheiden sich nur in der Formensprache. Die
|
||
Skizzenfassung ist von Hand gezeichnet, die Alternative präzise und auf
|
||
dunklem Grund. Technisch ist es derselbe Aufbau: die Kompositionen sind
|
||
identisch, nur die Zeichen-Primitive rechnen anders. Wer eine Visualisierung
|
||
ändert, muss deshalb an beide Dateien denken.
|
||
|
||
Der Redaktionsplan für alle weiteren Beiträge liegt in
|
||
[`redaktionsplan/`](./redaktionsplan/), gebaut mit `python3 redaktionsplan/bauen.py`.
|
||
|
||
### 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.
|