Chat: eine gruene Marke fuer alle Chatarten, Symbole in bold

Projektkanal, Gruppe und Direktnachricht tragen jetzt dieselbe Marke -- Flaeche
#DCFCE4, Rand #B7EDC6, Zeichen #148134 -- in der Liste wie im Verlauf. Vorher
trug der Kanal Lila, die Gruppe Grau und jede Person ihre eigene Farbe: vier
Familien in einer Liste, und keine sagte etwas, das die Zeile nicht schon sagt.
Die Kuerzel unterscheiden die Personen, dafuer braucht es keine vier Farbtoene.

Dazu die Symbolgewichtung zurueck auf bold, diesmal gemessen statt geschaetzt.
Der Tausch von Feather auf Phosphor hat keinen Hexwert angefasst, sah aber
trotzdem anders aus -- zu Recht: duennere Formen haben weniger voll gedeckte
Pixel, das liest sich blasser. Im Kanalsymbol, Ausschnitt 44 x 44:

  Feather, wie es vorher war   59 volle Pixel, Deckung 180
  Phosphor regular             23 volle Pixel, Deckung 151  (16 % zu blass)
  Phosphor bold                62 volle Pixel, Deckung 192  ( 6 % darueber)

Ich hatte auf regular zurueckgestellt, weil es "im Menue leichter aussah".
Geschaetzt statt gemessen, und daneben. Wer eine optische Staerke beurteilt,
zaehlt Pixel.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
dejanandClaude Opus 5 committed 2026-08-27 19:27:34 +02:00
1 parent b250b34b07
commit a94c1985fc
3 files changed
+82 -54

No files matched your search

+23 -5
View File
@@ -109,6 +109,14 @@ dem Gewerk: Wärmepumpe Müller, Montagetermin, Baustellenfotos.
## 4. Wo bewusst abgewichen wird
**Alles, was einen Chat kennzeichnet, ist grün.** Projektkanal, Gruppe und
Direktnachricht tragen dieselbe Marke (`MARKE`, Fläche `#DCFCE4`, Rand
`#B7EDC6`, Zeichen `#148134`) — in der Liste wie im Verlauf. Vorher trug der
Projektkanal Lila, die Gruppe Grau und jede Person ihre eigene Farbe: vier
Familien in einer Liste, und keine davon sagte etwas, das die Zeile nicht schon
sagt. Die Kürzel unterscheiden die Personen, dafür braucht es keine vier
Farbtöne.
**Die Plakette für Ungelesenes trägt eine Zahl und ist grün.** In der Quelle
ist `unread` ein Wahrheitswert und der Punkt violett. Beides ist geändert:
violett ist im Produkt die Farbe der Projekte, das Kanalsymbol in derselben
@@ -133,14 +141,24 @@ dasselbe Paket, das die Website benutzt — `@phosphor-icons/react` steht neben
`lucide-react` in ihrer `package.json` — also keine dritte Handschrift im Haus.
Die Pfade sind **direkt aus dem installierten Paket gezogen**, nicht
abgeschrieben: Gewichtung `regular`, Zeichenfläche 256 × 256. Anders als bei
abgeschrieben: Gewichtung `bold`, Zeichenfläche 256 × 256. Anders als bei
Feather sind es gefüllte Formen und keine Striche, `ikon()` färbt deshalb über
`fill` statt über `stroke`.
**Getauscht sind nur die Formen, kein einziger Farbwert.** Ein Zwischenstand
nahm `bold` — gefüllte fette Formen lesen sich neben demselben Text dunkler als
dünne Striche, und das sah aus, als hätte sich die Farbe geändert. Sie hat sich
nie geändert; `regular` trifft die optische Stärke, die Feather dort hatte.
**Die Gewichtung ist gemessen, nicht geschätzt.** Kein Farbwert hat sich beim
Tausch geändert — trotzdem sah es anders aus, und das zu Recht: ein Symbol aus
dünneren Formen hat weniger voll gedeckte Pixel und mehr angeschnittene, es
liest sich blasser, obwohl derselbe Hexwert darinsteht. Im Kanalsymbol,
Ausschnitt 44 × 44:
| | volle Pixel | Deckung |
|---|---|---|
| Feather, wie es vorher war | 59 | 180 |
| Phosphor `regular` | 23 | 151 (16 % zu blass) |
| Phosphor `bold` | 62 | 192 (6 % darüber) |
Ein Zwischenstand hatte `regular`, weil es „im Menü leichter aussah". Geschätzt
statt gemessen, und daneben. Wer eine optische Stärke beurteilt, zählt Pixel.
Ein Zwischenstand ersetzte nur das eine Gruppensymbol durch zwei überlappende
Scheiben. Das war keine Antwort auf die Frage: die Frage war der Satz, nicht
Binary file not shown.
+59 -49
View File
@@ -2038,35 +2038,43 @@ if (location.search.indexOf("nur=anim") >= 0)
Haus.
Die Pfade sind direkt aus dem installierten Paket gezogen und nicht
abgeschrieben: Gewichtung "regular", Zeichenflaeche 256 x 256. Ein
Zwischenstand nahm "bold" -- gefuellte fette Formen lesen sich neben
demselben Text dunkler als duenne Striche, und das sah aus, als haette
sich die Farbe geaendert. Sie hat sich nie geaendert; getauscht sind nur
die Formen, und "regular" trifft die optische Staerke, die Feather dort
hatte. Anders als
bei Feather sind es gefuellte Formen und keine Striche -- die Strichdicke
steckt in der Form. ikon() faerbt deshalb ueber fill und nicht ueber
stroke, und der Parameter fuer die Staerke faellt weg. */
abgeschrieben: Gewichtung "bold", Zeichenflaeche 256 x 256.
Die Gewichtung ist gemessen und nicht geschaetzt. Kein Farbwert hat sich
geaendert, aber ein Symbol aus duenneren Formen hat weniger voll gedeckte
Pixel und mehr angeschnittene -- es liest sich blasser, obwohl derselbe
Hexwert darinsteht. Im Kanalsymbol, Ausschnitt 44 x 44:
Feather, wie es vorher war 59 volle Pixel, Deckung 180
Phosphor regular 23 volle Pixel, Deckung 151 (16 % zu blass)
Phosphor bold 62 volle Pixel, Deckung 192 ( 6 % darueber)
Also bold. Ein Zwischenstand hatte regular, weil es "im Menue leichter
aussah" -- geschaetzt, nicht gemessen, und daneben.
Anders als bei Feather sind es gefuellte Formen und keine Striche, die
Strichdicke steckt also in der Form. ikon() faerbt deshalb ueber fill und
nicht ueber stroke, und der Parameter fuer die Staerke faellt weg. */
const IKON = {
"briefcase": '<path d="M216,56H176V48a24,24,0,0,0-24-24H104A24,24,0,0,0,80,48v8H40A16,16,0,0,0,24,72V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V72A16,16,0,0,0,216,56ZM96,48a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96ZM216,72v41.61A184,184,0,0,1,128,136a184.07,184.07,0,0,1-88-22.38V72Zm0,128H40V131.64A200.19,200.19,0,0,0,128,152a200.25,200.25,0,0,0,88-20.37V200ZM104,112a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H112A8,8,0,0,1,104,112Z"/>',
"users": '<path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"/>',
"pin": '<path d="M235.32,81.37,174.63,20.69a16,16,0,0,0-22.63,0L98.37,74.49c-10.66-3.34-35-7.37-60.4,13.14a16,16,0,0,0-1.29,23.78L85,159.71,42.34,202.34a8,8,0,0,0,11.32,11.32L96.29,171l48.29,48.29A16,16,0,0,0,155.9,224c.38,0,.75,0,1.13,0a15.93,15.93,0,0,0,11.64-6.33c19.64-26.1,17.75-47.32,13.19-60L235.33,104A16,16,0,0,0,235.32,81.37ZM224,92.69h0l-57.27,57.46a8,8,0,0,0-1.49,9.22c9.46,18.93-1.8,38.59-9.34,48.62L48,100.08c12.08-9.74,23.64-12.31,32.48-12.31A40.13,40.13,0,0,1,96.81,91a8,8,0,0,0,9.25-1.51L163.32,32,224,92.68Z"/>',
"file-text": '<path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"/>',
"image": '<path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z"/>',
"mic": '<path d="M128,176a48.05,48.05,0,0,0,48-48V64a48,48,0,0,0-96,0v64A48.05,48.05,0,0,0,128,176ZM96,64a32,32,0,0,1,64,0v64a32,32,0,0,1-64,0Zm40,143.6V240a8,8,0,0,1-16,0V207.6A80.11,80.11,0,0,1,48,128a8,8,0,0,1,16,0,64,64,0,0,0,128,0,8,8,0,0,1,16,0A80.11,80.11,0,0,1,136,207.6Z"/>',
"phone": '<path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"/>',
"calendar": '<path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/>',
"square-check": '<path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM208,208V48H48V208H208Z"/>',
"plus": '<path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/>',
"send": '<path d="M231.87,114l-168-95.89A16,16,0,0,0,40.92,37.34L71.55,128,40.92,218.67A16,16,0,0,0,56,240a16.15,16.15,0,0,0,7.93-2.1l167.92-96.05a16,16,0,0,0,.05-27.89ZM56,224a.56.56,0,0,0,0-.12L85.74,136H144a8,8,0,0,0,0-16H85.74L56.06,32.16A.46.46,0,0,0,56,32l168,95.83Z"/>',
"message-square": '<path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM84,116a12,12,0,1,0,12,12A12,12,0,0,0,84,116Zm88,0a12,12,0,1,0,12,12A12,12,0,0,0,172,116Zm60,12A104,104,0,0,1,79.12,219.82L45.07,231.17a16,16,0,0,1-20.24-20.24l11.35-34.05A104,104,0,1,1,232,128Zm-16,0A88,88,0,1,0,51.81,172.06a8,8,0,0,1,.66,6.54L40,216,77.4,203.53a7.85,7.85,0,0,1,2.53-.42,8,8,0,0,1,4,1.08A88,88,0,0,0,216,128Z"/>',
"chevron-down": '<path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/>',
"thumbs-up": '<path d="M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z"/>',
"corner-up-left": '<path d="M232,200a8,8,0,0,1-16,0,88.1,88.1,0,0,0-88-88H51.31l34.35,34.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,85.66,61.66L51.31,96H128A104.11,104.11,0,0,1,232,200Z"/>',
"pencil": '<path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"/>',
"trash-2": '<path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"/>',
"hard-hat": '<path d="M224,152V136a96.37,96.37,0,0,0-64-90.51V40a16,16,0,0,0-16-16H112A16,16,0,0,0,96,40v5.49A96.37,96.37,0,0,0,32,136v16a16,16,0,0,0-16,16v24a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V168A16,16,0,0,0,224,152Zm-16-16v16H160V62.67A80.36,80.36,0,0,1,208,136ZM144,40V152H112V40ZM48,136A80.36,80.36,0,0,1,96,62.67V152H48Zm176,56H32V168H224v24Z"/>',
"check": '<path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/>',
"briefcase": '<path d="M100,100a12,12,0,0,1,12-12h32a12,12,0,0,1,0,24H112A12,12,0,0,1,100,100ZM236,68V196a20,20,0,0,1-20,20H40a20,20,0,0,1-20-20V68A20,20,0,0,1,40,48H76V40a28,28,0,0,1,28-28h48a28,28,0,0,1,28,28v8h36A20,20,0,0,1,236,68ZM100,48h56V40a4,4,0,0,0-4-4H104a4,4,0,0,0-4,4ZM44,72v35.23A180.06,180.06,0,0,0,128,128a180,180,0,0,0,84-20.78V72ZM212,192V133.94A204.27,204.27,0,0,1,128,152a204.21,204.21,0,0,1-84-18.06V192Z"/>',
"users": '<path d="M164.38,181.1a52,52,0,1,0-72.76,0,75.89,75.89,0,0,0-30,28.89,12,12,0,0,0,20.78,12,53,53,0,0,1,91.22,0,12,12,0,1,0,20.78-12A75.89,75.89,0,0,0,164.38,181.1ZM100,144a28,28,0,1,1,28,28A28,28,0,0,1,100,144Zm147.21,9.59a12,12,0,0,1-16.81-2.39c-8.33-11.09-19.85-19.59-29.33-21.64a12,12,0,0,1-1.82-22.91,20,20,0,1,0-24.78-28.3,12,12,0,1,1-21-11.6,44,44,0,1,1,73.28,48.35,92.18,92.18,0,0,1,22.85,21.69A12,12,0,0,1,247.21,153.59Zm-192.28-24c-9.48,2.05-21,10.55-29.33,21.65A12,12,0,0,1,6.41,136.79,92.37,92.37,0,0,1,29.26,115.1a44,44,0,1,1,73.28-48.35,12,12,0,1,1-21,11.6,20,20,0,1,0-24.78,28.3,12,12,0,0,1-1.82,22.91Z"/>',
"pin": '<path d="M238.15,78.54,177.46,17.86a20,20,0,0,0-28.3,0L97.2,70c-12.43-3.33-36.68-5.72-61.74,14.5a20,20,0,0,0-1.6,29.73l45.46,45.47-39.8,39.8a12,12,0,0,0,17,17l39.8-39.81,45.47,45.46A20,20,0,0,0,155.91,228c.46,0,.93,0,1.4-.05A20,20,0,0,0,171.87,220c4.69-6.23,11-16.13,14.44-28s3.45-22.88.16-33.4l51.7-51.87A20,20,0,0,0,238.15,78.54Zm-74.26,68.79a12,12,0,0,0-2.23,13.84c3.43,6.86,6.9,21-6.28,40.65L54.08,100.53c21.09-14.59,39.53-6.64,41-6a11.67,11.67,0,0,0,13.81-2.29l54.43-54.61,55,55Z"/>',
"file-text": '<path d="M216.49,79.52l-56-56A12,12,0,0,0,152,20H56A20,20,0,0,0,36,40V216a20,20,0,0,0,20,20H200a20,20,0,0,0,20-20V88A12,12,0,0,0,216.49,79.52ZM160,57l23,23H160ZM60,212V44h76V92a12,12,0,0,0,12,12h48V212Zm112-80a12,12,0,0,1-12,12H96a12,12,0,0,1,0-24h64A12,12,0,0,1,172,132Zm0,40a12,12,0,0,1-12,12H96a12,12,0,0,1,0-24h64A12,12,0,0,1,172,172Z"/>',
"image": '<path d="M144,96a16,16,0,1,1,16,16A16,16,0,0,1,144,96Zm92-40V200a20,20,0,0,1-20,20H40a20,20,0,0,1-20-20V56A20,20,0,0,1,40,36H216A20,20,0,0,1,236,56ZM44,60v79.72l33.86-33.86a20,20,0,0,1,28.28,0L147.31,147l17.18-17.17a20,20,0,0,1,28.28,0L212,149.09V60Zm0,136H162.34L92,125.66l-48,48Zm168,0V183l-33.37-33.37L164.28,164l32,32Z"/>',
"mic": '<path d="M128,180a52.06,52.06,0,0,0,52-52V64A52,52,0,0,0,76,64v64A52.06,52.06,0,0,0,128,180ZM100,64a28,28,0,0,1,56,0v64a28,28,0,0,1-56,0Zm40,155.22V240a12,12,0,0,1-24,0V219.22A92.14,92.14,0,0,1,36,128a12,12,0,0,1,24,0,68,68,0,0,0,136,0,12,12,0,0,1,24,0A92.14,92.14,0,0,1,140,219.22Z"/>',
"phone": '<path d="M224,154.8l-47.09-21.11-.18-.08a19.94,19.94,0,0,0-19,1.75,13.08,13.08,0,0,0-1.12.84l-22.31,19c-13-7.05-26.43-20.37-33.49-33.21l19.06-22.66a11.76,11.76,0,0,0,.85-1.15,20,20,0,0,0,1.66-18.83,1.42,1.42,0,0,1-.08-.18L101.2,32A20.06,20.06,0,0,0,80.42,20.15,60.27,60.27,0,0,0,28,80c0,81.61,66.39,148,148,148a60.27,60.27,0,0,0,59.85-52.42A20.06,20.06,0,0,0,224,154.8ZM176,204A124.15,124.15,0,0,1,52,80,36.29,36.29,0,0,1,80.48,44.46l18.82,42L80.14,109.28a12,12,0,0,0-.86,1.16A20,20,0,0,0,78,130.08c9.42,19.28,28.83,38.56,48.31,48A20,20,0,0,0,146,176.63a11.63,11.63,0,0,0,1.11-.85l22.43-19.07,42,18.81A36.29,36.29,0,0,1,176,204Z"/>',
"calendar": '<path d="M208,28H188V24a12,12,0,0,0-24,0v4H92V24a12,12,0,0,0-24,0v4H48A20,20,0,0,0,28,48V208a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V48A20,20,0,0,0,208,28ZM68,52a12,12,0,0,0,24,0h72a12,12,0,0,0,24,0h16V76H52V52ZM52,204V100H204V204Z"/>',
"square-check": '<path d="M79.51,144.49a12,12,0,1,1,17-17L112,143l47.51-47.52a12,12,0,0,1,17,17l-56,56a12,12,0,0,1-17,0ZM228,48V208a20,20,0,0,1-20,20H48a20,20,0,0,1-20-20V48A20,20,0,0,1,48,28H208A20,20,0,0,1,228,48Zm-24,4H52V204H204Z"/>',
"plus": '<path d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z"/>',
"send": '<path d="M233.86,110.48,65.8,14.58A20,20,0,0,0,37.15,38.64L67.33,128,37.15,217.36A20,20,0,0,0,56,244a20.1,20.1,0,0,0,9.81-2.58l.09-.06,168-96.07a20,20,0,0,0,0-34.81ZM63.19,215.26,88.61,140H144a12,12,0,0,0,0-24H88.61L63.18,40.72l152.76,87.17Z"/>',
"message-square": '<path d="M120,128a16,16,0,1,1-16-16A16,16,0,0,1,120,128Zm32-16a16,16,0,1,0,16,16A16,16,0,0,0,152,112Zm84,16A108,108,0,0,1,78.77,224.15L46.34,235A20,20,0,0,1,21,209.66l10.81-32.43A108,108,0,1,1,236,128Zm-24,0A84,84,0,1,0,55.27,170.06a12,12,0,0,1,1,9.81l-9.93,29.79,29.79-9.93a12.1,12.1,0,0,1,3.8-.62,12,12,0,0,1,6,1.62A84,84,0,0,0,212,128Z"/>',
"chevron-down": '<path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"/>',
"thumbs-up": '<path d="M237,77.47A28,28,0,0,0,216,68H164V56a44.05,44.05,0,0,0-44-44,12,12,0,0,0-10.73,6.63L72.58,92H32a20,20,0,0,0-20,20v88a20,20,0,0,0,20,20H204a28,28,0,0,0,27.78-24.53l12-96A28,28,0,0,0,237,77.47ZM36,116H68v80H36ZM220,96.5l-12,96a4,4,0,0,1-4,3.5H92V106.83L126.82,37.2A20,20,0,0,1,140,56V80a12,12,0,0,0,12,12h64a4,4,0,0,1,4,4.5Z"/>',
"corner-up-left": '<path d="M236,200a12,12,0,0,1-24,0,84.09,84.09,0,0,0-84-84H61l27.52,27.51a12,12,0,0,1-17,17l-48-48a12,12,0,0,1,0-17l48-48a12,12,0,0,1,17,17L61,92h67A108.12,108.12,0,0,1,236,200Z"/>',
"pencil": '<path d="M230.14,70.54,185.46,25.85a20,20,0,0,0-28.29,0L33.86,149.17A19.85,19.85,0,0,0,28,163.31V208a20,20,0,0,0,20,20H92.69a19.86,19.86,0,0,0,14.14-5.86L230.14,98.82a20,20,0,0,0,0-28.28ZM91,204H52V165l84-84,39,39ZM192,103,153,64l18.34-18.34,39,39Z"/>',
"trash-2": '<path d="M216,48H180V36A28,28,0,0,0,152,8H104A28,28,0,0,0,76,36V48H40a12,12,0,0,0,0,24h4V208a20,20,0,0,0,20,20H192a20,20,0,0,0,20-20V72h4a12,12,0,0,0,0-24ZM100,36a4,4,0,0,1,4-4h48a4,4,0,0,1,4,4V48H100Zm88,168H68V72H188ZM116,104v64a12,12,0,0,1-24,0V104a12,12,0,0,1,24,0Zm48,0v64a12,12,0,0,1-24,0V104a12,12,0,0,1,24,0Z"/>',
"hard-hat": '<path d="M228,148.4V136a100.41,100.41,0,0,0-64-93.3V40a20,20,0,0,0-20-20H112A20,20,0,0,0,92,40v2.7A100.41,100.41,0,0,0,28,136v12.4A20,20,0,0,0,12,168v24a20,20,0,0,0,20,20H224a20,20,0,0,0,20-20V168A20,20,0,0,0,228,148.4ZM204,136v12H164V69.07A76.35,76.35,0,0,1,204,136ZM140,44V148H116V44ZM92,69.07V148H52V136A76.35,76.35,0,0,1,92,69.07ZM220,188H36V172H220Z"/>',
"check": '<path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/>',
};
function ikon(name, cx, cy, groesse, farbe) {
@@ -2588,6 +2596,13 @@ if (location.search.indexOf("nur=anim") >= 0)
const FL_GRUND = "#F5F4F4", FL_SPALTE = "#F0F0F0", FL_KARTE = "#FFFFFF";
const CHAT_RAND = "#E5E5E5";
/* Eine Farbe fuer alles, was einen Chat kennzeichnet: Projektkanal,
Gruppe, Direktnachricht. Vorher trug der Projektkanal Lila, die Gruppe
Grau und jede Person ihre eigene Farbe -- vier Familien in einer Liste,
und keine davon sagte etwas, das die Zeile nicht schon sagt. Gruen ist
ohnehin die Farbe der Plakette daneben. */
const MARKE = { flaeche: "#DCFCE4", rand: "#B7EDC6", zeichen: "#148134" };
/* Die Chatliste links. type steuert das Sinnbild davor: ein Projekt bekommt
den Aktenkoffer auf farbigem Grund, eine Gruppe die Personen, eine
Direktnachricht das Kuerzel des Menschen -- so macht es ChatAvatar. */
@@ -2640,17 +2655,13 @@ if (location.search.indexOf("nur=anim") >= 0)
}
const mx = x + 16, my = y + ZEILE_H / 2;
if (c.art === "direkt") {
const av = AVATAR[c.farbe] || AVATAR.violett;
g += '<circle cx="' + n1(mx + 20) + '" cy="' + n1(my) + '" r="20" fill="' + av.flaeche +
'" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>' +
uiText(mx + 20, my + 6, c.kuerzel, 15, 800, av.text, { anker: "middle" });
g += '<circle cx="' + n1(mx + 20) + '" cy="' + n1(my) + '" r="20" fill="' +
MARKE.flaeche + '" stroke="' + MARKE.rand + '" stroke-width="1.2"/>' +
uiText(mx + 20, my + 6, c.kuerzel, 15, 800, MARKE.zeichen, { anker: "middle" });
} else {
const projekt = c.art === "projekt";
g += '<rect x="' + n1(mx) + '" y="' + n1(my - 20) + '" width="40" height="40" rx="11" fill="' +
(projekt ? "#F0E7FF" : "#FAFAFA") + '" stroke="' + (projekt ? "#e4d4ff" : CHAT_RAND) +
'" stroke-width="1.2"/>';
g += ikon(projekt ? "briefcase" : "users", mx + 20, my, 21,
projekt ? "#691CD4" : CHAT_TEXT3);
g += '<rect x="' + n1(mx) + '" y="' + n1(my - 20) + '" width="40" height="40" rx="11" ' +
'fill="' + MARKE.flaeche + '" stroke="' + MARKE.rand + '" stroke-width="1.2"/>';
g += ikon(c.art === "projekt" ? "briefcase" : "users", mx + 20, my, 21, MARKE.zeichen);
}
const tx = mx + 52, rechts = x + LISTE_B - 16, frei = rechts - tx;
@@ -2770,10 +2781,9 @@ if (location.search.indexOf("nur=anim") >= 0)
const bx = m.mein ? x + b - ma.breite : x + 52;
let g = "";
if (!m.mein) {
const av = AVATAR[m.farbe] || AVATAR.blau;
g += '<circle cx="' + n1(x + 20) + '" cy="' + n1(y + 22) + '" r="20" fill="' + av.flaeche +
'" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>' +
uiText(x + 20, y + 28, m.kuerzel, 15, 800, av.text, { anker: "middle" });
g += '<circle cx="' + n1(x + 20) + '" cy="' + n1(y + 22) + '" r="20" fill="' +
MARKE.flaeche + '" stroke="' + MARKE.rand + '" stroke-width="1.2"/>' +
uiText(x + 20, y + 28, m.kuerzel, 15, 800, MARKE.zeichen, { anker: "middle" });
}
const kontur = rundRechteck(bx, y, ma.breite, ma.hoehe, 14);
g += '<g filter="url(#hgschatten)"><path d="' + kontur + '" fill="' +
@@ -2960,9 +2970,9 @@ if (location.search.indexOf("nur=anim") >= 0)
'" stroke-width="1.2"/>';
// Die Kopfzeile des offenen Kanals, wie in ChatHeader.
g += '<rect x="' + n1(kx) + '" y="0" width="40" height="40" rx="11" fill="#F0E7FF" ' +
'stroke="#e4d4ff" stroke-width="1.2"/>';
g += ikon("briefcase", kx + 20, 20, 20, "#691CD4");
g += '<rect x="' + n1(kx) + '" y="0" width="40" height="40" rx="11" fill="' +
MARKE.flaeche + '" stroke="' + MARKE.rand + '" stroke-width="1.2"/>';
g += ikon("briefcase", kx + 20, 20, 20, MARKE.zeichen);
g += uiText(kx + 52, 17, CHATS[0].titel, 19, 800, CHAT_TEXT);
g += uiText(kx + 52, 38, CHATS[0].meta + " · 8 Mitglieder · aktiv", 14, 500, CHAT_TEXT3);
g += '<path d="M' + n1(kx) + ',58H' + n1(kx + RECHTS) + '" stroke="' + CHAT_RAND +
@@ -3236,8 +3246,8 @@ if (location.search.indexOf("nur=anim") >= 0)
vorn += '<rect x="' + n1(VX) + '" y="' + n1(VY) + '" width="' + PB +
'" height="82" fill="#FFFFFF"/>';
vorn += '<rect x="' + n1(kx) + '" y="' + n1(VY + 20) + '" width="42" height="42" rx="12" ' +
'fill="#F0E7FF" stroke="#e4d4ff" stroke-width="1.2"/>';
vorn += ikon("briefcase", kx + 21, VY + 41, 21, "#691CD4");
'fill="' + MARKE.flaeche + '" stroke="' + MARKE.rand + '" stroke-width="1.2"/>';
vorn += ikon("briefcase", kx + 21, VY + 41, 21, MARKE.zeichen);
vorn += uiText(kx + 54, VY + 36, "# waermepumpe-mueller", 19, 800, CHAT_TEXT);
vorn += uiText(kx + 54, VY + 58, "P-2026-0042 · 8 Mitglieder", 15, 500, CHAT_TEXT3);
vorn += '<path d="M' + n1(VX) + ',' + n1(VY + 82) + 'H' + n1(VX + PB) + '" stroke="' +
@@ -3423,8 +3433,8 @@ if (location.search.indexOf("nur=anim") >= 0)
// Kopfzeile des Kanals.
g += '<rect x="' + RAND + '" y="' + (RAND - 6) + '" width="40" height="40" rx="11" ' +
'fill="#F0E7FF" stroke="#e4d4ff" stroke-width="1.2"/>';
g += ikon("briefcase", RAND + 20, RAND + 14, 20, "#691CD4");
'fill="' + MARKE.flaeche + '" stroke="' + MARKE.rand + '" stroke-width="1.2"/>';
g += ikon("briefcase", RAND + 20, RAND + 14, 20, MARKE.zeichen);
g += uiText(RAND + 52, RAND + 8, "# waermepumpe-mueller", 20, 800, CHAT_TEXT);
g += uiText(RAND + 52, RAND + 30, "P-2026-0042 · 8 Mitglieder · aktiv", 15, 500, CHAT_TEXT3);
g += '<path d="M0,' + KOPF + 'H' + B + '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';