Begruessung, Schriftzug, hellerer Hintergrund - und "Wissen" fuer Creator
Vier Wuensche auf einmal, alle auf der Startseite und der Kopfleiste. BEGRUESSUNG. Dort stand "Angemeldet" ueber dem Namen -- eine Zeile, die nichts hinzufuegt, weil oben rechts ohnehin Name und Rolle stehen. Jetzt beantwortet der Kopf die drei Fragen, die man beim Reinkommen hat: WANN (Wochentag, Datum, Kalenderwoche nach ISO 8601, selbst gerechnet), WER (Plakette mit dem Anfangsbuchstaben in der Farbe der Rolle -- der einzige runde Koerper der Seite, dadurch sofort als Person lesbar) und WIE es steht (ein Satz aus denselben Hinweisen, die darunter stehen -- keine zweite Zaehlung). An Tagen mit Charakter kommt ein Wort dazu: Neue Woche, Endspurt, Wochenende. Der Gruss ist feiner gestuft und der Name eigenstaendig ausgezeichnet: das Grusswort leise, der Name kraeftig. SCHRIFTZUG oben links. Vorher alles gleich laut, der Trenner ein Satzzeichen wie jedes andere. Jetzt hat er Rang: der Name vorn und kraeftig, der Ort dahinter und leiser, dazwischen eine kleine Raute in der Hausfarbe. Aufgeteilt zentral in kopf.js statt in sechzehn HTML- Dateien, und nur die Textknoten -- Verweise bleiben unberuehrt. HINTERGRUND heller, wie gewuenscht: Der Schleier liegt bei .86/.58/.44 statt .95/.72/.60, dazu zwei sehr weiche Farbschimmer, die dem Bild das reine Schwarz nehmen. Der Kontrast wurde danach an echten Bildpunkten nachgemessen und haelt ueberall (schlechtester Wert 4,78:1). "WISSEN" statt "Team & System" -- aber nur fuer Creator. Von der Gruppe bleibt fuer ihn genau eine Kachel uebrig; eine Ueberschrift, die Team und System verspricht und nur die Bibliothek zeigt, verspricht etwas Falsches. DREI FUNDE DURCH DIE PRUEFUNGEN: 1. Die Kontrastmessung war kaputt, seit Text neben Text steht. Sie tastete stur 4 px rechts vom Text ab -- und traf dort den NACHBARTEXT statt den Untergrund (1,10:1 gemeldet, ohne dass etwas schlecht lesbar war). Jetzt werden sechs Stellen rings um den Text angeboten und jede zuerst gefragt, ob dort wirklich Untergrund liegt. Strenger, nicht lockerer. Texte ohne freie Stelle werden GEZAEHLT und ausgegeben, nicht still uebersprungen. 2. bereich.html hatte als einzige Seite kein span.marke__text. Damit griffen dort weder die Ueberlauf-Kuerzung noch der neue Rang. Stand seit Monaten so, aufgefallen erst, als die Seitenpruefung die Marke auf allen dreizehn Seiten nachgesehen hat. 3. Die Datumspruefung haette im Maerz stillschweigend versagt: \w kennt ohne Unicode-Schalter kein "ae". Ein Fehler, der sieben Monate wartet. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
@@ -134,6 +134,14 @@
|
||||
{
|
||||
name: 'Team & System',
|
||||
unter: 'Was den Laden am Laufen hält',
|
||||
/* Für einen Creator bleibt von dieser Gruppe genau eine Kachel übrig:
|
||||
die Wissens-Bibliothek. "Team & System" wäre dann eine Überschrift,
|
||||
die etwas verspricht, was gar nicht da ist -- und die klingt, als
|
||||
gäbe es dahinter noch einen Bereich, den er nicht sehen darf. Er
|
||||
liest stattdessen "Wissen", und das beschreibt genau, was dort
|
||||
steht. Der Untertitel wechselt mit. */
|
||||
nameCreator: 'Wissen',
|
||||
unterCreator: 'Nachschlagen, wenn du etwas brauchst',
|
||||
bereiche: [
|
||||
{ name: 'Personen & Zugänge', unter: 'Rollen und Codes', zeichen: 'personen', ton: 7,
|
||||
rollen: ['admin', 'manager'], ziel: 'personen.html' },
|
||||
@@ -231,8 +239,12 @@
|
||||
|
||||
const abschnitt = el('section', 'gruppe');
|
||||
const kopf = el('div', 'gruppe__kopf');
|
||||
kopf.append(el('h2', 'gruppe__name', gruppe.name));
|
||||
kopf.append(el('span', 'gruppe__unter', gruppe.unter));
|
||||
/* Manche Gruppen heißen für einen Creator anders -- siehe GRUPPEN. */
|
||||
const istCreator = ich.rolle === 'creator';
|
||||
kopf.append(el('h2', 'gruppe__name',
|
||||
(istCreator && gruppe.nameCreator) || gruppe.name));
|
||||
kopf.append(el('span', 'gruppe__unter',
|
||||
(istCreator && gruppe.unterCreator) || gruppe.unter));
|
||||
abschnitt.append(kopf);
|
||||
|
||||
const liste = el('ul', 'kacheln');
|
||||
@@ -338,6 +350,100 @@
|
||||
}, true);
|
||||
}
|
||||
|
||||
/* ---------- Die Begrüßung ------------------------------------------------
|
||||
|
||||
Sie soll in drei Zeilen sagen, was man beim Reinkommen wissen will:
|
||||
WANN ist es, WER bin ich, WIE steht es. Vorher stand dort "Angemeldet"
|
||||
-- eine Zeile, die nichts hinzufügt, weil oben rechts der eigene Name
|
||||
mit Rolle steht. */
|
||||
|
||||
const WOCHENTAGE = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch',
|
||||
'Donnerstag', 'Freitag', 'Samstag'];
|
||||
const MONATE = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli',
|
||||
'August', 'September', 'Oktober', 'November', 'Dezember'];
|
||||
|
||||
/* Kalenderwoche nach ISO 8601 -- die Woche, in der der Donnerstag liegt.
|
||||
Selbst gerechnet, weil eine falsche KW schlimmer ist als gar keine
|
||||
und dafür keine fremde Bibliothek in die Seite gehört. */
|
||||
function kalenderwoche(d) {
|
||||
const t = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
|
||||
t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7));
|
||||
const anfang = new Date(Date.UTC(t.getUTCFullYear(), 0, 1));
|
||||
return Math.ceil(((t - anfang) / 86400000 + 1) / 7);
|
||||
}
|
||||
|
||||
/* Manche Tage haben einen Charakter, und den zu benennen kostet nichts.
|
||||
Bewusst NICHT für jeden Tag -- ein Wort, das immer da steht, liest
|
||||
nach drei Tagen niemand mehr. */
|
||||
const TAGESMARKER = {
|
||||
1: 'Neue Woche',
|
||||
5: 'Endspurt',
|
||||
6: 'Wochenende',
|
||||
0: 'Wochenende',
|
||||
};
|
||||
|
||||
function grussZeigen() {
|
||||
const jetzt = new Date();
|
||||
const stunde = jetzt.getHours();
|
||||
|
||||
$('datum').textContent =
|
||||
`${WOCHENTAGE[jetzt.getDay()]}, ${jetzt.getDate()}. ${MONATE[jetzt.getMonth()]}`
|
||||
+ ` · KW ${kalenderwoche(jetzt)}`;
|
||||
|
||||
const marker = TAGESMARKER[jetzt.getDay()];
|
||||
const mEl = $('tagesmarker');
|
||||
if (marker) { mEl.textContent = marker; mEl.hidden = false; }
|
||||
|
||||
/* Feiner gestuft als vorher: Wer um kurz nach Mitternacht reinkommt,
|
||||
liest nicht "Guten Abend", und wer um 13 Uhr kommt, nicht "Morgen". */
|
||||
const tageszeit =
|
||||
stunde < 5 ? 'Noch wach' :
|
||||
stunde < 11 ? 'Guten Morgen' :
|
||||
stunde < 14 ? 'Guten Mittag' :
|
||||
stunde < 18 ? 'Guten Tag' :
|
||||
stunde < 22 ? 'Guten Abend' : 'Späten Abend';
|
||||
|
||||
/* Der Name ist das Wichtigste an der Zeile und wird deshalb getrennt
|
||||
ausgezeichnet -- der Gruß leiser, der Name kräftig. */
|
||||
const g = $('gruss');
|
||||
g.textContent = '';
|
||||
g.append(el('span', 'gruss__wort', tageszeit + ', '));
|
||||
g.append(el('span', 'gruss__name', ich.name));
|
||||
|
||||
/* Die Plakette: der erste Buchstabe in der Farbe der Rolle. Dieselbe
|
||||
Zuordnung wie im Kopf der Seite, damit nichts auseinanderläuft. */
|
||||
const p = $('plakette');
|
||||
p.textContent = (ich.name || '?').trim().charAt(0).toUpperCase();
|
||||
p.dataset.rolle = ich.rolle;
|
||||
|
||||
$('rollentext').textContent = ROLLENTEXT[ich.rolle] || ich.rolle;
|
||||
}
|
||||
|
||||
/* Ein Satz zur Lage -- gerechnet aus denselben Hinweisen, die darunter
|
||||
stehen. Keine zweite Zählung, sonst gäbe es irgendwann zwei
|
||||
Wahrheiten auf einem Bildschirm. */
|
||||
function lageZeigen() {
|
||||
const el2 = $('lage');
|
||||
const gesamt = hinweise.reduce((s, h) => s + h.anzahl, 0);
|
||||
const dringend = hinweise.filter((h) => h.stufe === 'warnung')
|
||||
.reduce((s, h) => s + h.anzahl, 0);
|
||||
|
||||
let satz, stufe;
|
||||
if (dringend > 0) {
|
||||
satz = `${dringend} ${dringend === 1 ? 'Sache ist' : 'Sachen sind'} überfällig – das zuerst.`;
|
||||
stufe = 'warnung';
|
||||
} else if (gesamt > 0) {
|
||||
satz = `${gesamt} ${gesamt === 1 ? 'Punkt steht' : 'Punkte stehen'} an, nichts davon brennt.`;
|
||||
stufe = 'offen';
|
||||
} else {
|
||||
satz = 'Nichts liegt an – guter Tag zum Vorarbeiten.';
|
||||
stufe = 'ruhig';
|
||||
}
|
||||
el2.textContent = satz;
|
||||
el2.dataset.stufe = stufe;
|
||||
el2.hidden = false;
|
||||
}
|
||||
|
||||
/* ---------- Laden -------------------------------------------------------- */
|
||||
|
||||
async function laden() {
|
||||
@@ -351,16 +457,12 @@
|
||||
}
|
||||
|
||||
window.werZeigen?.(ich);
|
||||
/* Tageszeit statt immer "Willkommen". Kostet nichts und macht aus
|
||||
einer Maske eine Begrüßung. */
|
||||
const stunde = new Date().getHours();
|
||||
const tageszeit = stunde < 5 ? 'Noch wach' : stunde < 11 ? 'Guten Morgen'
|
||||
: stunde < 18 ? 'Guten Tag' : 'Guten Abend';
|
||||
$('gruss').textContent = `${tageszeit}, ${ich.name}`;
|
||||
$('rollentext').textContent = ROLLENTEXT[ich.rolle] || ich.rolle;
|
||||
grussZeigen();
|
||||
|
||||
/* Die Hinweise zuerst -- die Kacheln brauchen ihre Zahlen. */
|
||||
await hinweiseLaden();
|
||||
/* Erst jetzt steht fest, wie die Lage ist. */
|
||||
lageZeigen();
|
||||
bereicheBauen();
|
||||
await zahlenLaden();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user