DogFatherGitandClaude Opus 5
a9dcb8f59a
Filipe: "perfektionnier diese kategorien wie die aussehen und was man
da noch alles immer in jeder kategorie eintragen kann. weil man kan da
nichts machen ... und das soll getrennt von der team dogi seite sein."
"MAN KANN DA NICHTS MACHEN" -- MAN KONNTE, UND DAS WAR DAS PROBLEM.
Der ganze Editor lag hinter einem stillen Textknopf namens "Details".
Ein Wort, das Lesen verspricht, an der einzigen Stelle, an der man
aendert. Er heisst jetzt "Bearbeiten", hat eine Kante und ein
aria-expanded. Aktivitaet und Potenzial waren dort ausserdem nur
ANZEIGE -- eintragen liessen sie sich ausschliesslich beim Anlegen.
Jetzt sind es Felder wie alle anderen.
SIEBEN NEUE FELDER, und keines davon ist Schmuck:
netzwerk schon bei einer Agentur? Die teuerste Frage der ganzen
Pipeline -- wer unter Vertrag steht, kann nicht
uebernommen werden. Steht auf der Karte VOR der
Prioritaet, rot. "unbekannt" ist eine eigene Antwort und
nicht dasselbe wie "nein".
land DE/AT/CH/LU/andere -- die vier Laender, in denen betreut
wird, und die Schweiz liegt rechtlich anders als die
drei EU-Laender (TikTok-Recherche vom 10.09.).
follower Reichweite. "12,4k" aus der Zwischenablage wird zu
12400 -- sonst stuende da eine 12, und das faellt
niemandem auf.
woher wie gefunden
kontaktweg wo angeschrieben
live_zeiten wann die Person ueblicherweise live ist
absage_grund erscheint NUR bei "Abgelehnt" -- ein "warum nicht" an
einem Kontakt, der gut laeuft, ist eine Frage, die
niemand gestellt hat.
Gemessen: 13 Felder im Editor statt 5.
DIE STUFEN ERKLAEREN SICH SELBST. Was "Interessiert" von "Gespraech"
unterscheidet, stand bisher nur im leeren Zustand der Seite -- also
genau so lange, bis der erste Kontakt da war. Der Satz steht jetzt an
der Stufe, und beide lesen aus derselben Liste (STUFE_WAS). Dazu eine
Kante im Ton der Stufe; die Farben gab es laengst, benutzt wurde nur
die Zahl.
GETRENNT VON TEAM DOGI -- und das war keine Formsache. `sichtbar()`
gibt fuer jeden mit `siehtAlles` schlicht `1=1` zurueck, und DogFather
hat `siehtAlles` auch auf der crew-Adresse. Die komplette Pipeline des
Workspace waere dort mitgekommen. Jetzt 404 fuer das ganze Modul,
sobald `haus === "crew"` -- nicht gefiltert, sondern nicht vorhanden.
Die Absperrung haengt an der gemeinsamen Schranke und gilt damit auch
fuer jeden Weg, der spaeter dazukommt.
NEUE PRUEFUNG (pruef-scouting-felder, 28 Pruefungen)
Sie misst alle drei Behauptungen: dass die Felder ankommen und
zurueckkommen, dass der Server Unsinn ablehnt (Land ausserhalb der
Liste, erfundene Netzwerk-Angabe, negative Follower) -- mit Gegenprobe,
dass das Richtige durchgeht -- und dass es die Pipeline auf crew. nicht
gibt. Dazu die Oberflaeche: Knopfname, Stufentext, die Fakten auf der
Karte, die Warnung, und die Zahl der Felder im Editor.
ZWEI EIGENE FEHLER AUF DEM WEG, beide von der Pruefung gefunden:
* `notbremse(240)` -- der Wert ist in MILLISEKUNDEN. Die Pruefung
brach nach einer Viertelsekunde mit "HING" ab, bevor sie anfing.
* Der crew-Test meldete 200 und sah wie ein Befund aus. Tatsaechlich
verwirft `fetch` einen selbst gesetzten `Host`-Kopf (verbotener
Header) -- die Anfrage war nie auf der crew-Adresse. Jetzt ueber
node:http, mit Gegenprobe, dass derselbe Weg ohne crew-Kopf
weiterhin 200 liefert.
Co-Authored-By: Claude Opus 5 <[email protected]>
325 lines
12 KiB
CSS
325 lines
12 KiB
CSS
/* ===================================================================
|
|
Scout-CRM.
|
|
|
|
Die Pipeline hat eine Richtung, das soll man sehen: Jede Stufe traegt
|
|
links eine farbige Kante, die von kuehl (neu entdeckt) zu warm/gruen
|
|
(uebergeben) laeuft. Gedeckt gehalten -- kein Ampel-Geblinke.
|
|
=================================================================== */
|
|
|
|
.steuerung { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
|
|
.steuerung select {
|
|
min-width: 160px; padding: 9px 12px;
|
|
background: rgba(255, 255, 255, .045);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
}
|
|
|
|
/* ---------- Fällige Follow-ups ------------------------------------------ */
|
|
|
|
.faellig {
|
|
margin-bottom: 26px; padding: 14px 18px;
|
|
background: rgba(255, 190, 120, .07);
|
|
border: 1px solid rgba(255, 190, 120, .3);
|
|
border-radius: var(--radius);
|
|
}
|
|
.faellig__titel {
|
|
margin: 0 0 8px; font-size: .74rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase; color: #f0c48a;
|
|
}
|
|
.faellig__liste { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
|
|
.faellig__liste li { display: flex; align-items: baseline; gap: 7px; }
|
|
.faellig__knopf {
|
|
padding: 0; background: none; border: 0; cursor: pointer;
|
|
color: var(--text); font: inherit; font-weight: 600;
|
|
border-bottom: 1px solid rgba(240, 196, 138, .45);
|
|
}
|
|
.faellig__knopf:hover { color: #f0c48a; }
|
|
|
|
/* ---------- Stufen -------------------------------------------------------- */
|
|
|
|
.stufe { margin-bottom: 30px; }
|
|
.stufe__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
|
|
.stufe__titel {
|
|
margin: 0; font-size: .78rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
|
|
}
|
|
.stufe__zahl {
|
|
min-width: 22px; padding: 1px 7px; text-align: center;
|
|
font-size: .74rem; font-weight: 700; color: var(--text-still);
|
|
background: rgba(255, 255, 255, .06);
|
|
border-radius: 999px;
|
|
}
|
|
.stufe__karten { display: grid; gap: 10px; }
|
|
|
|
/* Farbverlauf entlang der Pipeline. */
|
|
.stufe[data-stufe="neu"] { --stufe-farbe: #4c7fa8; }
|
|
.stufe[data-stufe="angesprochen"] { --stufe-farbe: #5b8fd4; }
|
|
.stufe[data-stufe="gespraech"] { --stufe-farbe: #7d84e0; }
|
|
.stufe[data-stufe="interessiert"] { --stufe-farbe: #8ab8a0; }
|
|
.stufe[data-stufe="uebergeben"] { --stufe-farbe: #79d1a2; }
|
|
.stufe[data-stufe="abgelehnt"] { --stufe-farbe: #55606f; }
|
|
.stufe[data-stufe="abgelehnt"] .kk { opacity: .62; }
|
|
.stufe[data-stufe="abgelehnt"] .kk:hover { opacity: 1; }
|
|
|
|
/* ---------- Karte --------------------------------------------------------- */
|
|
|
|
.kk {
|
|
position: relative;
|
|
padding: 15px 18px 15px 21px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
transition: border-color .18s ease, background .18s ease, opacity .18s ease;
|
|
}
|
|
.kk::before {
|
|
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
|
|
border-radius: 0 3px 3px 0;
|
|
background: var(--stufe-farbe, var(--akzent));
|
|
opacity: .8;
|
|
}
|
|
.kk:hover { border-color: rgba(255, 255, 255, .16); }
|
|
.kk[data-faellig="ja"] { border-color: rgba(255, 190, 120, .34); }
|
|
|
|
.kk__kopf { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
|
|
.kk__name { margin: 0; font-size: 1.02rem; font-weight: 650; }
|
|
.kk__unter { margin: 2px 0 0; font-size: .82rem; color: var(--text-still); }
|
|
|
|
.kk__marken { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.marke-punkt, .marke-still, .marke-fertig {
|
|
padding: 3px 9px; border-radius: 999px;
|
|
font-size: .71rem; font-weight: 600; letter-spacing: .02em;
|
|
border: 1px solid var(--rand); color: var(--text-still);
|
|
}
|
|
.marke-punkt[data-prio="hoch"] {
|
|
color: #ffb4b9; border-color: rgba(255, 154, 162, .38); background: rgba(255, 154, 162, .1);
|
|
}
|
|
.marke-punkt[data-prio="mittel"] { color: var(--text-leise); }
|
|
.marke-fertig {
|
|
color: #79d1a2; border-color: rgba(121, 209, 162, .35); background: rgba(121, 209, 162, .09);
|
|
}
|
|
|
|
.kk__info { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .78rem; }
|
|
.kk__still { color: var(--text-still); }
|
|
.kk__followup { color: var(--text-leise); }
|
|
.kk__followup[data-faellig="ja"] { color: #f0c48a; font-weight: 600; }
|
|
|
|
.kk__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 13px; }
|
|
|
|
/* Der Weiter-Schritt wiederholt sich auf jeder Karte. Als voller
|
|
Farbverlauf waere die Seite ein Streifenmuster -- er traegt deshalb
|
|
nur die Farbe seiner Stufe und wird erst beim Zeigen kraeftiger. */
|
|
|
|
/* Das Onboarding ist der einzige Schritt, der eine echte Person anlegt --
|
|
der Knopf soll sich deshalb von den anderen abheben. */
|
|
|
|
/* ---------- Aufgeklappt ---------------------------------------------------- */
|
|
|
|
.kk__detail {
|
|
margin-top: 15px; padding-top: 15px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.kk__zeile { margin: 0 0 9px; font-size: .87rem; color: var(--text-leise); }
|
|
.kk__schild {
|
|
display: block; margin-bottom: 1px;
|
|
font-size: .7rem; font-weight: 700; letter-spacing: .07em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.kk__notiz {
|
|
width: 100%; margin: 4px 0 14px; padding: 10px 12px;
|
|
background: rgba(255, 255, 255, .04);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit; resize: vertical;
|
|
}
|
|
.kk__raster {
|
|
display: grid; gap: 12px; margin-bottom: 14px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
|
|
}
|
|
.kk__raster input, .kk__raster select {
|
|
width: 100%; padding: 9px 11px;
|
|
background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
}
|
|
.kk__notiz:focus, .kk__raster input:focus, .kk__raster select:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .65);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
|
}
|
|
|
|
|
|
/* ---------- Codefenster ---------------------------------------------------- */
|
|
|
|
.schleier {
|
|
position: fixed; inset: 0; z-index: 60;
|
|
display: grid; place-items: center; padding: 22px;
|
|
background: rgba(3, 5, 10, .78);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
.code-fenster {
|
|
width: min(440px, 100%); padding: 26px 28px;
|
|
background: #0b111b;
|
|
border: 1px solid rgba(63, 189, 245, .3);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
|
|
}
|
|
.code-fenster__titel { margin: 3px 0 10px; font-size: 1.2rem; font-weight: 700; }
|
|
.code-fenster__text { margin: 0 0 16px; font-size: .85rem; color: var(--text-leise); }
|
|
.code-fenster__code {
|
|
margin: 0 0 20px; padding: 15px;
|
|
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
|
|
font-size: 1.4rem; font-weight: 700; letter-spacing: .16em; text-align: center;
|
|
word-break: break-all;
|
|
background: rgba(63, 189, 245, .09);
|
|
border: 1px solid rgba(63, 189, 245, .28);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.kk { transition: none; }
|
|
}
|
|
|
|
/* ---------- Die Erklaerung im leeren Zustand ---------------------------
|
|
Der leere Zustand ist der einzige Moment, in dem jemand garantiert
|
|
liest, was dort steht -- spaeter ist die Flaeche von Daten belegt.
|
|
Deshalb steht hier keine Meldung, sondern die Erklaerung, wofuer die
|
|
Pipeline ueberhaupt gut ist. Sie ist laenger als ein Hinweis und
|
|
bekommt deshalb linksbuendigen Text statt zentrierten. */
|
|
.leer-hinweis--erklaerung {
|
|
text-align: left;
|
|
max-width: 62ch;
|
|
margin: 0 auto;
|
|
padding: 30px 28px 26px;
|
|
}
|
|
.erklaerung__satz {
|
|
margin: 0 0 14px;
|
|
font-size: 1.02rem; color: var(--text); line-height: 1.55;
|
|
}
|
|
.erklaerung__warum {
|
|
margin: 0 0 20px;
|
|
font-size: .9rem; color: var(--text-leise); line-height: 1.65;
|
|
}
|
|
.erklaerung__stufen {
|
|
display: grid; gap: 10px;
|
|
margin: 0 0 20px; padding: 0; list-style: none;
|
|
counter-reset: none;
|
|
}
|
|
.erklaerung__stufe {
|
|
display: flex; align-items: flex-start; gap: 12px;
|
|
font-size: .88rem;
|
|
}
|
|
/* Die Nummer als eigener Koerper: Die fuenf Stufen sind eine REIHENFOLGE,
|
|
und die soll man sehen, ohne die Ueberschriften zu lesen. */
|
|
.erklaerung__nr {
|
|
flex: none;
|
|
display: grid; place-items: center;
|
|
width: 24px; height: 24px; border-radius: 50%;
|
|
font-size: .74rem; font-weight: 700;
|
|
color: var(--ton, var(--akzent));
|
|
border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 40%, transparent);
|
|
background: color-mix(in srgb, var(--ton, var(--akzent)) 12%, transparent);
|
|
}
|
|
.erklaerung__stufe strong { display: block; color: var(--text); }
|
|
.erklaerung__was {
|
|
display: block; margin-top: 1px;
|
|
font-size: .83rem; color: var(--text-still); line-height: 1.5;
|
|
}
|
|
.erklaerung__fuss {
|
|
margin: 0 0 16px; padding-top: 16px;
|
|
border-top: 1px solid var(--rand);
|
|
font-size: .86rem; color: var(--text-leise); line-height: 1.6;
|
|
}
|
|
.erklaerung__los {
|
|
margin: 0;
|
|
font-size: .88rem; color: var(--ton, var(--akzent));
|
|
}
|
|
/* Der Ring des leeren Zustands passt hier nicht -- es ist ja Text da. */
|
|
.leer-hinweis--erklaerung::before { display: none; }
|
|
|
|
@media (max-width: 560px) {
|
|
.leer-hinweis--erklaerung { padding: 22px 16px 20px; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE STUFEN ERKLÄREN SICH SELBST (11.09.2026)
|
|
|
|
Filipe: "perfektionnier diese kategorien wie die aussehen und was man
|
|
da noch alles immer in jeder kategorie eintragen kann. weil man kan
|
|
da nichts machen."
|
|
|
|
Zwei Dinge steckten dahinter, und nur eins davon war Optik:
|
|
|
|
1. Man KONNTE etwas machen -- der ganze Editor lag hinter einem
|
|
stillen Textknopf namens "Details". Ein Wort, das Lesen
|
|
verspricht, an einer Stelle, an der man ändert. Er heißt jetzt
|
|
"Bearbeiten" und sieht auch danach aus.
|
|
2. Die Stufen hatten nur einen Namen. Was "Interessiert" von
|
|
"Gespräch" unterscheidet, stand einmal im leeren Zustand der
|
|
Seite -- also genau so lange, bis der erste Kontakt da war.
|
|
|
|
Der Ton der Stufe (--stufe-farbe) steht schon oben in dieser Datei;
|
|
er wird hier nur konsequent benutzt, statt nur die Zahl zu färben.
|
|
===================================================================== */
|
|
.stufe__text { min-width: 0; }
|
|
.stufe__was {
|
|
margin: 2px 0 0;
|
|
font-size: .8rem; line-height: 1.45;
|
|
color: var(--text-still);
|
|
/* Der Satz darf umbrechen, aber nicht die Überschrift überragen. */
|
|
max-width: 62ch;
|
|
}
|
|
/* Eine feine Kante in der Farbe der Stufe -- sie trennt die Abschnitte,
|
|
ohne dass eine durchgehende Linie die Seite zerschneidet. */
|
|
.stufe__kopf {
|
|
align-items: flex-start;
|
|
padding-bottom: 9px;
|
|
border-bottom: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--rand)) 34%, transparent);
|
|
}
|
|
.stufe__zahl { margin-left: auto; flex: none; }
|
|
|
|
/* ---- Die harten Zahlen auf der Karte -------------------------------
|
|
Land und Reichweite beantworten "lohnt sich das überhaupt". Sie
|
|
stehen deshalb in der Kurzinfo und nicht im aufgeklappten Teil --
|
|
wer sie erst nach einem Klick sieht, sortiert nicht danach. */
|
|
.kk__fakt {
|
|
display: inline-flex; align-items: center;
|
|
padding: 2px 9px;
|
|
border: 1px solid var(--rand-hell); border-radius: 999px;
|
|
font-size: .76rem; font-weight: 600;
|
|
color: var(--text-leise);
|
|
white-space: nowrap;
|
|
}
|
|
.kk__fakt[data-art="follower"] {
|
|
font-variant-numeric: tabular-nums;
|
|
border-color: color-mix(in srgb, var(--akzent) 34%, transparent);
|
|
color: color-mix(in srgb, var(--akzent) 62%, #ffffff);
|
|
}
|
|
|
|
/* ---- „Schon im Netzwerk" ------------------------------------------
|
|
Die teuerste Angabe der ganzen Pipeline: Wer unter Vertrag steht,
|
|
kann nicht übernommen werden. Sie trägt deshalb die Warnfarbe des
|
|
Hauses -- nicht als Alarm, sondern als Stoppschild. */
|
|
.marke-punkt[data-warn="ja"] {
|
|
border-color: color-mix(in srgb, var(--k-warn, #e0736b) 55%, transparent);
|
|
background: color-mix(in srgb, var(--k-warn, #e0736b) 16%, transparent);
|
|
color: color-mix(in srgb, var(--k-warn, #e0736b) 42%, #ffffff);
|
|
}
|
|
|
|
/* ---- Der Knopf, der nicht gefunden wurde --------------------------
|
|
Er sah aus wie ein Nebensatz und war die einzige Tür zum Editor.
|
|
Jetzt hat er eine Kante -- er bleibt zurückhaltend gegenüber
|
|
„Weiter zu …", ist aber als Knopf zu erkennen. */
|
|
.knopf-still--bearbeiten {
|
|
border: 1px solid var(--rand-hell);
|
|
border-radius: 10px;
|
|
padding: 5px 12px;
|
|
}
|
|
.knopf-still--bearbeiten:hover { border-color: var(--akzent); color: var(--text); }
|
|
.knopf-still--bearbeiten[aria-expanded="true"] {
|
|
border-color: color-mix(in srgb, var(--akzent) 55%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 12%, transparent);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.kk__fakt, .knopf-still--bearbeiten { border: 1px solid CanvasText; }
|
|
.marke-punkt[data-warn="ja"] { border: 2px solid CanvasText; }
|
|
}
|