screen6: Die beiden Bestaetigungen werden zu Unterschriften
Filipe, mit Bildschirmfoto der beiden Felder: "die sollen geiler sein."
WAS SIE WIRKLICH SIND, stand nur im Klassennamen. Auf einer
Unterweisung bestaetigen ZWEI Personen, dass sie sie durchgegangen
sind -- der Creator und seine Betreuung. Das ist kein Statusfeld, das
ist eine Gegenzeichnung. Gezeichnet waren sie als zwei graue Kaesten
mit runden Ecken, die man auf dem dunklen Grund kaum sah. Zwei
Rechtecke sagen "hier steht etwas". Eine Unterschriftszeile sagt "hier
fehlt jemand".
ZWEI ZUSTAENDE, ZWEI BILDER -- und beide gab es im Code laengst als
`data-da="ja"/"nein"`, nur unterschieden sie sich um einen Hauch Gruen:
OFFEN eine gestrichelte Linie mit einem leeren Platz darauf. Sie
WARTET sichtbar. Der Federstrich links deutet an, wo man
ansetzt.
DA eine durchgezogene gruene Linie, der Name darueber, und ein
gepraegtes Siegel mit Haken -- wie ein abgestempeltes
Formular.
GLEICHE HOEHE IN BEIDEN ZUSTAENDEN, und das ist keine Kosmetik: Die
Felder stehen nebeneinander in einem Raster. Waere das unterschriebene
hoeher, spraenge die Karte in dem Moment, in dem jemand unterschreibt
-- unter dem Finger dessen, der gerade gedrueckt hat.
KEINE ZWEITE FASE. Die Karte drumherum steht schon in der Modulliste.
Eine abgeschraegte Ecke IN einer abgeschraegten Ecke liest sich als
Fehler, nicht als Absicht. Das Feld traegt deshalb die andere
Formensprache des Hauses: die Linie.
DER HAKEN IST EINE MASKE, kein Zeichensatz-Haken (der sieht in jeder
Schrift anders aus und faellt weg, wenn eine fehlt) und kein Bild
(eine Datei mehr fuer fuenfzehn Pixel). Erst stand er nur im
Kommentar, waehrend im Code eine leere Muenze lag -- nachgebaut, bevor
es committet wurde. Ein Kommentar, der mehr behauptet als der Code
tut, ist schlimmer als keiner.
ZWEI ANSICHTEN NACHGEMESSEN: Auf 1400 px nebeneinander, auf 390 px
untereinander. Das Siegel sass im ersten Anlauf mit
`translate(100%)` AUSSERHALB des Feldes -- breit sah das gut aus,
schmal waere es aus der Karte gelaufen. Jetzt sitzt es innen; die
Seite laesst sich bei 390 px nicht seitlich schieben.
(Fuer die Ansicht musste ich Testdaten anlegen -- ohne Unterweisung
gibt es keine Unterschriften, und ein Bildschirmfoto von einem leeren
Bereich beweist nichts. Die Daten liegen in der Wegwerf-Datenbank der
Pruefung, nicht im echten System.)
Geprueft: pruef-schulung, pruef-css-klassen -- beide in Ordnung.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -132,16 +132,75 @@
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
/* =====================================================================
|
||||
SIE SIND UNTERSCHRIFTEN -- ALSO SEHEN SIE JETZT AUCH SO AUS
|
||||
(screen6, 09.09.2026)
|
||||
|
||||
Filipe, mit Bildschirmfoto der beiden Felder: "die sollen geiler
|
||||
sein."
|
||||
|
||||
WAS SIE WIRKLICH SIND, stand nur im Klassennamen: Auf einer
|
||||
Unterweisung bestaetigen ZWEI Personen, dass sie sie gelesen haben
|
||||
-- der Creator und seine Betreuung. Das ist kein Statusfeld, das ist
|
||||
eine Gegenzeichnung. Gezeichnet waren sie aber als zwei graue
|
||||
Kaesten mit abgerundeten Ecken, die man auf dem dunklen Grund kaum
|
||||
sah. Zwei Rechtecke sagen "hier steht etwas". Eine Unterschriftszeile
|
||||
sagt "hier fehlt jemand".
|
||||
|
||||
ZWEI ZUSTAENDE, ZWEI BILDER -- und beide gab es im Code schon als
|
||||
`data-da="ja"/"nein"`, nur unterschieden sie sich um einen Hauch
|
||||
Gruen:
|
||||
|
||||
OFFEN eine gestrichelte Linie mit einem leeren Platz darauf.
|
||||
Sie WARTET sichtbar. Der Federstrich links davor deutet
|
||||
an, wo man ansetzt.
|
||||
DA eine durchgezogene gruene Linie, der Name darueber, und
|
||||
rechts oben ein gepraegtes Siegel mit Haken -- wie ein
|
||||
abgestempeltes Formular.
|
||||
|
||||
GLEICHE HOEHE IN BEIDEN ZUSTAENDEN, und das ist keine Kosmetik: Die
|
||||
beiden Felder stehen nebeneinander in einem Raster. Waere das
|
||||
unterschriebene hoeher, spraenge die Karte in dem Moment, in dem
|
||||
jemand unterschreibt -- und zwar unter dem Finger dessen, der gerade
|
||||
auf den Knopf gedrueckt hat.
|
||||
|
||||
KEINE ZWEITE FASE. Die Karte drumherum (`.unterweisung`) hat schon
|
||||
eine aus der Modulliste. Eine abgeschraegte Ecke IN einer
|
||||
abgeschraegten Ecke liest sich als Fehler, nicht als Absicht. Das
|
||||
Feld traegt deshalb die andere Formensprache des Hauses: die Linie.
|
||||
================================================================== */
|
||||
.unterschrift {
|
||||
display: grid; gap: 2px;
|
||||
padding: 9px 12px;
|
||||
border: 1px solid var(--rand); border-radius: 8px;
|
||||
background: rgba(0, 0, 0, .18);
|
||||
position: relative;
|
||||
display: grid; gap: 3px;
|
||||
padding: 9px 12px 11px 15px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: linear-gradient(100deg, rgba(255, 255, 255, .035), transparent 60%);
|
||||
}
|
||||
/* Der Federstrich links: ein kurzer senkrechter Anstrich, der zeigt,
|
||||
wo eine Unterschrift beginnt. Offen ist er blass, gesetzt traegt er
|
||||
das Gruen der Bestaetigung. */
|
||||
.unterschrift::before {
|
||||
content: "";
|
||||
position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
|
||||
background: rgba(150, 186, 220, .22);
|
||||
transition: background .18s ease;
|
||||
}
|
||||
/* Die Zeile selbst -- unter der Angabe, nicht um sie herum. */
|
||||
.unterschrift::after {
|
||||
content: "";
|
||||
position: absolute; left: 15px; right: 12px; bottom: 6px; height: 0;
|
||||
border-bottom: 1px dashed rgba(150, 186, 220, .30);
|
||||
}
|
||||
|
||||
.unterschrift[data-da="ja"] {
|
||||
border-color: rgba(80, 167, 130, .32);
|
||||
background: rgba(80, 167, 130, .07);
|
||||
background: linear-gradient(100deg, rgba(95, 201, 154, .11), transparent 62%);
|
||||
}
|
||||
.unterschrift[data-da="ja"]::before { background: rgba(95, 201, 154, .8); }
|
||||
.unterschrift[data-da="ja"]::after {
|
||||
border-bottom: 1px solid rgba(95, 201, 154, .55);
|
||||
}
|
||||
|
||||
.unterschrift__wer {
|
||||
font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
|
||||
color: var(--text-still);
|
||||
@@ -149,6 +208,59 @@
|
||||
.unterschrift__wann { font-size: .84rem; color: var(--text); }
|
||||
.unterschrift[data-da="nein"] .unterschrift__wann { color: var(--text-still); font-style: italic; }
|
||||
|
||||
/* DAS SIEGEL. Es sitzt in der oberen rechten Ecke des Feldes und ist
|
||||
nur da, wenn wirklich unterschrieben wurde.
|
||||
|
||||
Gebaut aus zwei Radialverlaeufen und einem Haken als Maske -- kein
|
||||
Element, kein Bild, kein Zeichensatz. Ein Zeichensatz-Haken (✓) sieht
|
||||
in jeder Schrift anders aus und faellt weg, wenn eine fehlt; ein
|
||||
`mask-image` mit einem SVG-Pfad sieht ueberall gleich aus.
|
||||
|
||||
`content: ""` auf einem dritten Pseudoelement geht nicht -- es gibt
|
||||
nur zwei. Deshalb haengt es am Wer-Text, der ohnehin oben steht. */
|
||||
.unterschrift[data-da="ja"] .unterschrift__wer { position: relative; }
|
||||
.unterschrift[data-da="ja"] .unterschrift__wer::after {
|
||||
content: "";
|
||||
/* INNERHALB des Feldes, nicht daneben. Der erste Anlauf schob es mit
|
||||
`translate(100%)` ueber die rechte Kante hinaus -- bei der breiten
|
||||
Ansicht sah das gut aus, auf einem schmalen Feld waere es aus der
|
||||
Karte gelaufen. Ein Siegel gehoert auf das Blatt, nicht daneben. */
|
||||
position: absolute; right: 0; top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 15px; height: 15px; border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at 50% 26%, rgba(255, 255, 255, .2), transparent 60%),
|
||||
radial-gradient(circle at 50% 50%, rgba(95, 201, 154, .3) 55%, rgba(10, 24, 19, .95) 100%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(95, 201, 154, .6),
|
||||
inset 0 1px 2px -1px rgba(255, 255, 255, .25);
|
||||
}
|
||||
/* DER HAKEN IM SIEGEL. Als Maske ueber einer hellgruenen Flaeche --
|
||||
kein Zeichensatz-Haken (der sieht in jeder Schrift anders aus und
|
||||
faellt weg, wenn eine fehlt) und kein Bild (eine Datei mehr fuer
|
||||
fuenfzehn Pixel).
|
||||
|
||||
Er liegt auf `::before` desselben Elements, weil es nur zwei
|
||||
Pseudoelemente je Element gibt und `::after` schon die Muenze
|
||||
traegt. Beide sind absolut gesetzt und liegen deshalb genau
|
||||
uebereinander. */
|
||||
.unterschrift[data-da="ja"] .unterschrift__wer::before {
|
||||
content: "";
|
||||
position: absolute; right: 0; top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 15px; height: 15px;
|
||||
z-index: 1;
|
||||
background: #a8ecc8;
|
||||
-webkit-mask: center / 9px 9px no-repeat
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.6 4.4 4.4L19 7.4' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
mask: center / 9px 9px no-repeat
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.6 4.4 4.4L19 7.4' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.unterschrift::before { transition: none; }
|
||||
}
|
||||
|
||||
.unterweisung__fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||||
.unterweisung__fest { font-size: .82rem; color: #6fbd95; }
|
||||
.unterweisung__wartet { font-size: .82rem; color: #e0b45c; }
|
||||
|
||||
Reference in New Issue
Block a user