DogFatherGit
470c65a46b
Filipe, mit dem Bildschirmfoto des Bretts "Mitmachen": "ich will dass die leute sich da anonym bei mir melden koennen ... wie ein fragebogen wieso die person modi werden will warum sie sollte, positiv negative sachen ... und dan soll ich annehmen ablehnen, in warteschlange stellen oder sofort kommunizieren koennen. und wenn ich annehme dan soll diese person automatisch zu talente kategorie weiter geleitet werden." Seine zwei Entscheidungen auf Rueckfrage: "Vertraulich, aber nicht namenlos" und "Du und die rechte Hand". WAS ES GIBT 15 Fragen in 6 Gruppen, 9 davon Pflicht. Vier davon standen nicht auf seinem Zettel und kommen aus der Recherche zu Moderator-Bewerbungen: Alter, frühere Sperren, "ein Freund bricht die Regeln - was machst du?" und "was kannst du nicht so gut?". Die letzte ist die aussagekraeftigste: Wer darauf "nichts" schreibt, hat sich gerade selbst beantwortet. Vier Wege: Reden - Warteschlange - Annehmen - Ablehnen. "Reden" steht vorne, weil die haeufigste richtige Antwort auf eine Bewerbung eine Rueckfrage ist und keine Entscheidung; stuende "Annehmen" oben, wuerde es geklickt. "Sofort kommunizieren" ist ein Satz, den sie liest. Kein Chat: Ein Zugang aus der Community steht ausdruecklich in keiner Chatliste (AUSSEN_ROLLEN). Der Satz ist damit der einzige Weg, dieser Person etwas zu sagen -- deshalb ist er bei "Reden" und "Ablehnen" Pflicht, und WELCHE Wege ihn verlangen, steht im Katalog und nicht zweimal. Nach "Annehmen" entsteht ein Talent auf der Stufe "Angesprochen". Die ersten beiden Stufen fragen, ob ueberhaupt Interesse besteht; wer sich selbst meldet, hat das beantwortet. WAS DABEI HERAUSKAM, DAS NICHT GESUCHT WAR aufgaben.js entschied mit `p.rolle === 'modi' || p.rolle === 'hand'`, wer eine Katalogaufgabe bekommen kann. Diese Datei ist ohne Anmeldung aus dem offenen Netz lesbar -- damit stand der verborgene Zugang darin nachzulesen. Jetzt entscheidet es der Server und schickt ein Ja/Nein. Gefunden von der Wortleck-Pruefung, nicht vom Auge. pruef-struktur meldete teilen.html seit heute frueh als "von nirgendwo verlinkt" -- und lag falsch: Auf sie zeigt `share_target.action` im Manifest. Die Manifeste sind jetzt Verweisquelle, nicht die eine Seite eine Ausnahme. Und im Bildschirmfoto stand der Schriftzug der Buehne mitten im Text einer Anfrage: `color-mix(..., transparent)` mischt mit DURCHSICHTIG. Deckend ist `#ffffff 6%`, so wie es .t-karte macht. Dieselbe Stelle hat mich heute schon einmal erwischt. GEPRUEFT pruef-bewerbung 77, davon 14 im Browser. Vier Gegenproben, jede trifft genau ihr Ziel: Bruecke ohne "genau einmal" -> 2 rot, Vertraulichkeit weg -> 5 rot, Nachricht-Pflicht weg -> 2 rot, Knopf ohne Rollenfrage -> 1 rot. Dazu unveraendert gruen: rollen 315, modi-verborgen 80, modi-katalog 49, entwicklung 43, treff, bereiche-lesend, haus-seiten, alle-wege, rechtetafel, css-klassen, struktur, deutsche-texte, start-ansicht, sicht, aufgabenbrett, womit, kanaele.
275 lines
9.7 KiB
CSS
275 lines
9.7 KiB
CSS
/* =====================================================================
|
|
DIE ANFRAGE AUS DER COMMUNITY (17.09.2026)
|
|
|
|
Zwei Seiten teilen sich diese Datei: der Fragebogen (bewerben.html)
|
|
und der Eingang (bewerbungen.html). Eine gemeinsame Datei und nicht
|
|
zwei -- die Anfrage soll in beiden Richtungen gleich aussehen, und
|
|
zwei Dateien wären zwei Gelegenheiten, eine davon zu vergessen.
|
|
|
|
DIE FLAECHEN SIND DECKEND, UND DAS WAR EIN FEHLER WERT.
|
|
|
|
Zuerst stand hier `color-mix(in srgb, var(--tinte) 94%, transparent)`.
|
|
Das mischt mit DURCHSICHTIG -- 94 % heisst also: 6 % Foto scheint
|
|
durch. Auf dem Bildschirmfoto stand der Schriftzug der Buehne mitten
|
|
im Text einer Anfrage. Gefunden hat das kein Messwert, sondern das
|
|
Hinsehen; dieselbe Stelle hat mich am 17.09. schon einmal erwischt
|
|
(Talente, leerer Zustand).
|
|
|
|
Richtig ist `#ffffff 6%` -- derselbe Ton, aber deckend. So macht es
|
|
das Haus in .t-karte.
|
|
|
|
ALLES GEDECKT, NICHTS BLINKT. Hier liest jemand Sätze, die ein
|
|
anderer über sich selbst geschrieben hat; und auf der anderen Seite
|
|
sitzt jemand, der gerade nach Worten sucht. Beides verträgt keine
|
|
Signalfarben. Rot kommt nur an einer Stelle vor: an einem Feld, das
|
|
wirklich fehlt -- und auch dort nur als Rand.
|
|
===================================================================== */
|
|
|
|
/* =====================================================================
|
|
1. DER FRAGEBOGEN
|
|
===================================================================== */
|
|
|
|
.bw-stand {
|
|
margin: 0 0 22px;
|
|
padding: 16px 18px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: 14px;
|
|
/* EIGENE FLÄCHE, KEIN DURCHSCHEINEN. Auf der Bühne liegt ein Motiv;
|
|
ohne deckenden Grund steht der Text darauf statt darüber. Das ist
|
|
am 17.09. schon einmal passiert (Talente, leerer Zustand). */
|
|
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
|
}
|
|
.bw-stand__wort { margin: 0; font-size: 1.05rem; font-weight: 700; }
|
|
.bw-stand__grund {
|
|
margin: 10px 0 0;
|
|
padding: 10px 12px;
|
|
border-inline-start: 3px solid var(--akzent);
|
|
border-radius: 0 8px 8px 0;
|
|
background: color-mix(in srgb, var(--akzent) 8%, transparent);
|
|
line-height: 1.55;
|
|
}
|
|
.bw-stand__sperre { margin: 0; font-size: 1.05rem; font-weight: 700; }
|
|
.bw-stand .knopf { margin-top: 14px; }
|
|
|
|
.bw-bogen { display: block; }
|
|
|
|
.bw-gruppe {
|
|
margin: 0 0 26px;
|
|
padding: 16px 18px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: 14px;
|
|
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
|
}
|
|
.bw-gruppe__kopf { margin-bottom: 14px; }
|
|
.bw-gruppe__titel { margin: 0; font-size: 1.02rem; font-weight: 700; }
|
|
.bw-gruppe__unter { margin: 4px 0 0; font-size: .86rem; opacity: .75; }
|
|
|
|
.bw-feld { margin: 0 0 18px; }
|
|
.bw-feld:last-child { margin-bottom: 0; }
|
|
|
|
.bw-feld__schild {
|
|
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
|
|
margin: 0 0 4px;
|
|
font-weight: 600;
|
|
}
|
|
/* „nötig" und „freiwillig" stehen als WORT da und nicht als Sternchen.
|
|
Ein Sternchen muss man erklären; wer die Erklärung überliest, füllt
|
|
aus Vorsicht alles aus und schreibt am Ende nirgends etwas
|
|
Ehrliches. */
|
|
.bw-feld__pflicht,
|
|
.bw-feld__frei {
|
|
font-size: .74rem; font-weight: 600;
|
|
letter-spacing: .04em; text-transform: uppercase;
|
|
padding: 2px 7px; border-radius: 999px;
|
|
}
|
|
.bw-feld__pflicht {
|
|
color: var(--akzent);
|
|
background: color-mix(in srgb, var(--akzent) 12%, transparent);
|
|
}
|
|
.bw-feld__frei { opacity: .6; background: color-mix(in srgb, var(--rand) 40%, transparent); }
|
|
|
|
.bw-feld__hinweis { margin: 0 0 6px; font-size: .86rem; opacity: .75; line-height: 1.5; }
|
|
|
|
.bw-feld__eingabe {
|
|
display: block; width: 100%;
|
|
padding: 10px 12px;
|
|
font: inherit; font-size: .95rem; line-height: 1.55;
|
|
color: inherit;
|
|
background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
|
|
border: 1px solid var(--rand); border-radius: 10px;
|
|
resize: vertical;
|
|
}
|
|
.bw-feld__eingabe:focus-visible {
|
|
outline: 2px solid var(--akzent); outline-offset: 2px;
|
|
border-color: var(--akzent);
|
|
}
|
|
/* Ein fehlendes Pflichtfeld wird MARKIERT, nicht angeschrien: Rand und
|
|
ein Wort in der Meldung oben. Rot flächig wäre auf fünfzehn Feldern
|
|
eine Wand. */
|
|
.bw-feld--fehlt .bw-feld__eingabe {
|
|
border-color: color-mix(in srgb, var(--warn) 70%, var(--rand));
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent);
|
|
}
|
|
|
|
.bw-feld__zaehler { margin: 4px 0 0; font-size: .78rem; opacity: .65; text-align: end; }
|
|
|
|
.bw-wer-liest {
|
|
margin: 0 0 14px;
|
|
font-size: .86rem; opacity: .8;
|
|
padding: 10px 12px;
|
|
border: 1px dashed var(--rand); border-radius: 10px;
|
|
}
|
|
|
|
.bw-abschluss { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
|
|
|
|
/* =====================================================================
|
|
2. DER EINGANG
|
|
===================================================================== */
|
|
|
|
.bw-zahlen {
|
|
display: flex; gap: 12px; flex-wrap: wrap;
|
|
margin: 0 0 22px;
|
|
}
|
|
|
|
.bw-karte {
|
|
margin: 0 0 20px;
|
|
padding: 16px 18px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: 14px;
|
|
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
|
}
|
|
/* Der Zustand als feine Kante links -- er sagt beim Scrollen, was
|
|
erledigt ist, ohne dass man das Schild lesen muss. */
|
|
.bw-karte[data-zustand="neu"] { border-inline-start: 3px solid var(--akzent); }
|
|
.bw-karte[data-zustand="gespraech"],
|
|
.bw-karte[data-zustand="warteschlange"] {
|
|
border-inline-start: 3px solid color-mix(in srgb, var(--akzent) 45%, var(--rand));
|
|
}
|
|
/* ENTSCHIEDENE KARTEN TRETEN ZURUECK -- ueber die SCHRIFT, nicht ueber
|
|
`opacity`. Ein durchsichtiges Element nimmt seine Flaeche mit, und
|
|
hinter dieser Seite liegt ein Foto: Aus "etwas leiser" waere wieder
|
|
"das Motiv scheint durch" geworden. Derselbe Fehler, zehn Zeilen
|
|
weiter oben. */
|
|
.bw-karte[data-zustand="angenommen"] .bw-karte__bogen,
|
|
.bw-karte[data-zustand="abgelehnt"] .bw-karte__bogen,
|
|
.bw-karte[data-zustand="angenommen"] .bw-karte__kopf,
|
|
.bw-karte[data-zustand="abgelehnt"] .bw-karte__kopf { color: color-mix(in srgb, var(--text) 78%, transparent); }
|
|
|
|
.bw-karte__kopf {
|
|
display: flex; align-items: flex-start; justify-content: space-between;
|
|
gap: 12px; flex-wrap: wrap;
|
|
margin-bottom: 12px;
|
|
}
|
|
.bw-karte__wer { min-width: 0; }
|
|
.bw-karte__name { margin: 0; font-size: 1.08rem; font-weight: 700; }
|
|
.bw-karte__unter { margin: 3px 0 0; font-size: .84rem; opacity: .72; }
|
|
|
|
.bw-marke {
|
|
font-size: .76rem; font-weight: 600;
|
|
letter-spacing: .04em; text-transform: uppercase;
|
|
padding: 3px 9px; border-radius: 999px;
|
|
border: 1px solid var(--rand);
|
|
background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
|
|
}
|
|
|
|
.bw-karte__frueher { margin: 0 0 12px; }
|
|
.bw-karte__grund {
|
|
margin: 0;
|
|
padding: 10px 12px;
|
|
border-inline-start: 3px solid var(--akzent);
|
|
border-radius: 0 8px 8px 0;
|
|
background: color-mix(in srgb, var(--akzent) 8%, transparent);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.bw-karte__bogen { margin: 0 0 16px; }
|
|
.bw-karte__gruppe {
|
|
margin: 16px 0 8px;
|
|
font-size: .78rem; font-weight: 700;
|
|
letter-spacing: .06em; text-transform: uppercase;
|
|
opacity: .65;
|
|
}
|
|
.bw-karte__gruppe:first-child { margin-top: 0; }
|
|
|
|
.bw-antwort { margin: 0 0 10px; }
|
|
.bw-antwort__frage { margin: 0; font-size: .84rem; opacity: .7; }
|
|
.bw-antwort__text {
|
|
margin: 2px 0 0;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
}
|
|
/* Was NICHT beantwortet wurde, steht dabei. Eine übersprungene
|
|
freiwillige Frage ist selbst eine Auskunft. */
|
|
.bw-karte__ohne { margin: 14px 0 0; font-size: .8rem; opacity: .55; line-height: 1.5; }
|
|
|
|
.bw-wahl {
|
|
margin-top: 14px; padding-top: 14px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.bw-wahl__schild { margin: 0 0 8px; font-size: .84rem; opacity: .75; }
|
|
.bw-wahl__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
|
|
.bw-weg {
|
|
font: inherit; font-size: .88rem; font-weight: 600;
|
|
color: inherit;
|
|
padding: 8px 14px;
|
|
min-height: 40px;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
|
|
cursor: pointer;
|
|
}
|
|
.bw-weg:hover { border-color: color-mix(in srgb, var(--akzent) 60%, var(--rand)); }
|
|
.bw-weg[aria-pressed="true"] {
|
|
border-color: var(--akzent);
|
|
background: color-mix(in srgb, var(--akzent) 16%, transparent);
|
|
}
|
|
.bw-weg:disabled { opacity: .45; cursor: default; }
|
|
.bw-weg:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
|
|
.bw-wahl__feld { margin: 12px 0 0; }
|
|
.bw-wahl__feldschild { display: block; margin: 0 0 4px; font-size: .86rem; opacity: .8; }
|
|
.bw-wahl__eingabe {
|
|
display: block; width: 100%;
|
|
padding: 10px 12px;
|
|
font: inherit; font-size: .93rem; line-height: 1.55;
|
|
color: inherit;
|
|
background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
|
|
border: 1px solid var(--rand); border-radius: 10px;
|
|
resize: vertical;
|
|
}
|
|
.bw-wahl__eingabe:focus-visible {
|
|
outline: 2px solid var(--akzent); outline-offset: 2px;
|
|
border-color: var(--akzent);
|
|
}
|
|
.bw-wahl .knopf { margin-top: 12px; }
|
|
|
|
.bw-leer {
|
|
padding: 22px 20px;
|
|
border: 1px dashed var(--rand); border-radius: 14px;
|
|
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
|
}
|
|
.bw-leer__wort { margin: 0 0 6px; font-size: 1.02rem; font-weight: 700; }
|
|
|
|
.bw-hinweis {
|
|
margin: 0 0 16px;
|
|
padding: 12px 14px;
|
|
border: 1px solid color-mix(in srgb, var(--akzent) 45%, var(--rand));
|
|
border-radius: 12px;
|
|
background: color-mix(in srgb, var(--akzent) 10%, transparent);
|
|
}
|
|
|
|
/* Der Weg von der Talente-Seite hierher. */
|
|
.bw-tor {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
gap: 14px; flex-wrap: wrap;
|
|
margin: 0 0 20px;
|
|
padding: 12px 16px;
|
|
border: 1px solid var(--rand); border-radius: 12px;
|
|
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
|
}
|
|
.bw-tor[data-neu="ja"] {
|
|
border-color: color-mix(in srgb, var(--akzent) 50%, var(--rand));
|
|
background: color-mix(in srgb, var(--akzent) 10%, transparent);
|
|
}
|
|
.bw-tor__wort { margin: 0; font-size: .95rem; }
|