From e4d11caeb0c1e5af1f72842d98b785a9ff012856 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Thu, 17 Sep 2026 10:25:04 +0200 Subject: [PATCH] Community-Kacheln: das Loch, die Zwillinge, die unsichtbaren Farben Filipe, mit einem Bildschirmfoto: "das wie es jetzt ist ist es einfach total scheisse ... gerade einfach nur dahin geknallt und drauf geschissen". Er hatte in allen drei Punkten recht, und alle drei sind messbar. 1. DAS LOCH IM RASTER -- eine Zeile Reihenfolge Drei Spalten, "Der Treff" doppelt breit -- aber an DRITTER Stelle. Nach zwei normalen Kacheln war noch EINE Spalte frei, er passte nicht und rutschte eine Reihe tiefer. Genau das ist die Luecke auf dem Foto. DIE REGEL, und sie gilt fuer jedes Raster im Haus: Eine breite Kachel gehoert an den ANFANG. Steht sie hinten, faellt die Luecke in die MITTE -- und eine Luecke in der Mitte sieht kaputt aus, eine am Ende sieht grosszuegig aus. Jetzt: Treff (2 Spalten) + Anschlagbrett fuellen Reihe 1, drei weitere Reihe 2, der Rest Reihe 3. Fuer DogFather und die Modis geht es genau auf, 3 x 3. Und es stimmt auch inhaltlich: Der Treff IST das Herz dieses Bereichs. 2. ZWEI KACHELN, EIN SYMBOL "Regeln & Hilfe" und "Meldungen & Massnahmen" trugen beide `schutz` -- im Quelltext zweimal, nebeneinander, auf dem Schirm nicht zu unterscheiden. Meldungen bekommt `startcheck`, die abgehakte Liste: Bei Regeln steht, was GILT. Hier steht, was daraus WURDE. 3. DIE FARBEN WAREN DA UND KAMEN NICHT AN Die sieben Toene sind laengst klar verschieden (#cc9451, #668e6e, #cc92c6, #656a9e ...). Der Grund stand direkt daneben: `.kachel:hover::before` und ein ausfuehrlicher Kommentar sprechen von einer Schiene, die "heller wird und weiter in die Platte strahlt" -- nur hatte `.kachel::before` ausser einem Uebergang KEINEN Inhalt. Das Element wurde beim Umbau am 07.09. entfernt, seine Hover-Regeln blieben stehen. Seither trug den Ton nur ein Verlauf, der bei 58 % verschwunden ist; unter dem Buehnenbild reicht das nicht. Das hier ist deshalb kein neuer Einfall, sondern das Wiedereinsetzen dessen, womit der Rest der Datei ohnehin rechnet. Drei Pixel, oben, nach rechts auslaufend -- Farbe an der Kante unterscheidet, Farbe auf der Flaeche blendet. NEU: pruef-kachelraster (15 Pruefungen) Ein Loch wird nicht angesehen, sondern gerechnet: belegte Zellen = Kacheln + 1 je doppelt breiter kleinstmoegliche Reihen = aufgerundet (Zellen / Spalten) Mehr Reihen als das heisst: irgendwo liegt eine Zelle leer, die es nicht muesste. Eine Luecke am ENDE faellt bewusst heraus. Dazu: jedes Zeichen genau einmal (erkannt am SVG-Pfad, nicht an einem Namen -- den gibt es im DOM nicht), jede Kachel mit Schiene, acht verschiedene Toene. Und die Gegenprobe in beide Richtungen: die ALTE Reihenfolge MUSS ein Loch melden, die neue nicht. ZWEI EIGENE FEHLER DABEI, beide durch Messen gefunden: - Ich hielt ein Vollbild-Foto fuer den Beweis, dass keine Kacheln da sind -- sie blenden sich beim Hereinscrollen ein. Die Pruefung scrollt jetzt erst hin. - Ich erwartete sieben Kacheln fuer einen Modi. Er moderiert, also sieht er acht. Der Code hatte recht, meine Annahme nicht. pruef-treff hat die Reihenfolge festgehalten und ist rot geworden -- genau ihre Aufgabe. Erwartung nachgezogen, mit dem Grund daneben. pruef-kachel-universum 37, pruef-haus-seiten 34, pruef-treff 66, pruef-css-klassen und pruef-start-ansicht: gruen. Der ausfuehrliche Plan fuer den ganzen Bereich liegt im Vault: "02 Projekte/Community-Bereich - Plan zur Perfektion" (fuenf Durchgaenge). Co-Authored-By: Claude Opus 5 --- server/pruef-kachelraster.mjs | 297 ++++++++++++++++++++++++++++++++ server/pruef-treff.mjs | 15 +- server/workspace.js | 44 ++++- workspace/app.webmanifest | 8 +- workspace/assets/css/start.css | 40 +++++ workspace/aufgaben.html | 24 +-- workspace/automation.html | 26 +-- workspace/befinden.html | 24 +-- workspace/bereich.html | 34 ++-- workspace/calls.html | 28 +-- workspace/chat.html | 26 +-- workspace/content.html | 30 ++-- workspace/crew-index.html | 10 +- workspace/crew.webmanifest | 8 +- workspace/dateien.html | 26 +-- workspace/entwicklung.html | 24 +-- workspace/index.html | 8 +- workspace/kalender.html | 28 +-- workspace/leistung.html | 26 +-- workspace/personen.html | 26 +-- workspace/profil.html | 28 +-- workspace/rechte.html | 24 +-- workspace/report.html | 28 +-- workspace/scouting.html | 26 +-- workspace/start.html | 24 +-- workspace/startcheck.html | 28 +-- workspace/steckbrief.html | 28 +-- workspace/talente.html | 24 +-- workspace/team.html | 26 +-- workspace/teamlage.html | 24 +-- workspace/treff-moderation.html | 24 +-- workspace/treff-regeln.html | 26 +-- workspace/uebersicht.html | 26 +-- workspace/wissen.html | 26 +-- 34 files changed, 751 insertions(+), 363 deletions(-) create mode 100644 server/pruef-kachelraster.mjs diff --git a/server/pruef-kachelraster.mjs b/server/pruef-kachelraster.mjs new file mode 100644 index 00000000..852cb33f --- /dev/null +++ b/server/pruef-kachelraster.mjs @@ -0,0 +1,297 @@ +/* ===================================================================== + DAS KACHELRASTER HAT KEIN LOCH (17.09.2026) + + Filipe, mit einem Bildschirmfoto der Community: "das wie es jetzt + ist ist es einfach total scheisse ... gerade einfach nur dahin + geknallt und drauf geschissen". + + Er hatte recht, und die Ursache war eine Zeile Reihenfolge. Das + Raster hat DREI Spalten, "Der Treff" ist doppelt breit -- stand aber + an DRITTER Stelle. Nach zwei normalen Kacheln war noch EINE Spalte + frei, er passte nicht und rutschte eine Reihe tiefer. Zurueck blieb + eine Luecke mitten im Raster. + + --------------------------------------------------------------------- + WIE MAN EIN LOCH MISST, OHNE ES ANZUSEHEN + + Nicht ueber Pixel und nicht ueber "sieht schief aus". Ueber eine + Rechnung, die immer stimmt: + + Belegte Zellen = Anzahl Kacheln + 1 je doppelt breiter Kachel + Kleinstmoegliche Reihenzahl = aufgerundet (Zellen / Spalten) + + Braucht das Raster MEHR Reihen als das, liegt irgendwo eine Zelle + leer, die nicht leer sein muesste -- und zwar vor der letzten Reihe. + Das ist genau die Luecke, die kaputt aussieht. Eine Luecke am ENDE + ist dagegen in Ordnung und faellt aus dieser Rechnung heraus. + + GEPRUEFT IN ZWEI LAGEN, denn die Kachelzahl haengt an der Rolle: + ein Modi moderiert und sieht dieselben acht wie DogFather, ein reiner + Zuschauer sieben. Eine Reihenfolge, die nur fuer eine Zahl aufgeht, + geht nicht auf. + + MIT GEGENPROBE: Dieselbe Rechnung wird auf eine absichtlich falsche + Reihenfolge angewandt (breite Kachel an dritter Stelle). Sie MUSS + ein Loch melden -- sonst misst sie nichts. + + Aufrufen mit: node server/pruef-kachelraster.mjs + Bild: SCHIRM=1 node server/pruef-kachelraster.mjs + ===================================================================== */ + +import { mkdtempSync, rmSync } from "node:fs"; +import { tmpdir } from "node:os"; +import { join } from "node:path"; +import { fileURLToPath } from "node:url"; +import { portMussFreiSein } from "./helfer-port.mjs"; + +const PORT = await portMussFreiSein(4479, "pruef-kachelraster"); +const ordner = mkdtempSync(join(tmpdir(), "ws-raster-")); +process.env.WORKSPACE_DB = join(ordner, "workspace.db"); +process.env.PORT = String(PORT); +process.env.SITE_ACCESS_SECRET = "lokaler-test"; +process.env.SITE_ACCESS_CODE_DOGI = "DOGI-TEST-1"; +process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00"; + +const express = (await import("express")).default; +const ec = express.response.cookie; +express.response.cookie = function (n, w, o) { return ec.call(this, n, w, { ...(o || {}), secure: false }); }; +import { notbremse } from "./helfer-notbremse.mjs"; +await import("./index.js"); +notbremse(180_000, "pruef-kachelraster"); +await new Promise((r) => setTimeout(r, 700)); +const BASIS = `http://127.0.0.1:${PORT}`; + +process.on("uncaughtException", (f) => { console.error("ABSTURZ:", f); process.exit(7); }); +process.on("unhandledRejection", (f) => { console.error("ABSTURZ (Versprechen):", f); process.exit(7); }); + +let fehler = 0, geprueft = 0; +const melde = (t) => console.log(t); +const ok = (b, t) => { geprueft++; console.log((b ? " ok " : " FEHL ") + t); if (!b) fehler++; }; + +const { DatabaseSync } = await import("node:sqlite"); +const { scryptSync, randomBytes, createHmac } = await import("node:crypto"); +const d = new DatabaseSync(process.env.WORKSPACE_DB); +const jetzt = new Date().toISOString(); +const schluessel = randomBytes(32).toString("hex"); +d.prepare("INSERT INTO einstellungen (schluessel, wert, geaendert, von)" + + " VALUES (?,?,?,NULL) ON CONFLICT(schluessel) DO NOTHING") + .run("code_kennung_schluessel", schluessel, jetzt); +function anlegen(name, rolle, code) { + const salt = randomBytes(16).toString("hex"); + const hash = scryptSync(code, salt, 64, + { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex"); + d.prepare("INSERT INTO personen" + + " (name, rolle, code_hash, code_salt, code_n, code_kennung, aktiv, erstellt)" + + " VALUES (?,?,?,?,?,?,1,?)") + .run(name, rolle, hash, salt, 32768, + createHmac("sha256", schluessel).update(code).digest("hex"), jetzt); +} +anlegen("Filipe", "admin", "CODE-DOGI-0001"); +anlegen("Marina", "modi", "CODE-MODI-0001"); +d.close(); + +async function anmelden(kachel, code) { + const a = await fetch(BASIS + "/workspace/api/anmelden", { + method: "POST", headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ rolle: kachel, code }), + }); + return (a.headers.getSetCookie?.() || []).map((z) => z.split(";")[0]).join("; "); +} + +/* Die Rechnung steht hier und nicht im Browser: So laesst sie sich mit + erfundenen Zahlen gegenpruefen, ohne eine Seite zu bauen. */ +function loecher({ spalten, kacheln, reihen }) { + const zellen = kacheln.reduce((n, k) => n + (k.breit ? 2 : 1), 0); + const minimum = Math.ceil(zellen / spalten); + return { zellen, minimum, reihen, loch: reihen > minimum }; +} + +const { chromium } = await import( + "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs"); +const browser = await chromium.launch(); + +async function messen(kachel, code, wer) { + const keks = await anmelden(kachel, code); + const kontext = await browser.newContext({ viewport: { width: 1280, height: 1000 } }); + await kontext.addCookies(keks.split("; ").map((k) => { + const [name, ...rest] = k.split("="); + return { name, value: rest.join("="), domain: "127.0.0.1", path: "/" }; + })); + const seite = await kontext.newPage(); + const konsole = []; + seite.on("console", (e) => { if (e.type() === "error") konsole.push(e.text()); }); + await seite.goto(`${BASIS}/workspace/start.html`, { waitUntil: "networkidle" }); + await seite.waitForSelector(".kacheln .kachel", { timeout: 15_000 }); + await seite.waitForTimeout(500); + + const daten = await seite.evaluate(() => { + /* DIE COMMUNITY-GRUPPE finden -- ueber ihre Ueberschrift, nicht + ueber eine Position. Eine Position aendert sich, sobald jemand + eine Gruppe dazwischenschiebt. */ + const gruppen = [...document.querySelectorAll(".kacheln")]; + const treffer = gruppen.find((g) => { + const kopf = g.previousElementSibling; + return kopf && /COMMUNITY/i.test(kopf.textContent || ""); + }) || gruppen[gruppen.length - 1]; + const stil = getComputedStyle(treffer); + const spalten = stil.gridTemplateColumns.split(" ").filter(Boolean).length; + const kacheln = [...treffer.querySelectorAll(".kachel")].map((k) => ({ + name: k.querySelector(".kachel__name")?.textContent?.trim() || "", + breit: k.dataset.gross === "ja", + oben: Math.round(k.getBoundingClientRect().top), + /* DAS ZEICHEN HAT KEINEN NAMEN IM DOM -- es wird als SVG + gezeichnet. Als Fingerabdruck dient deshalb der Pfad selbst: + Zwei Kacheln mit demselben Schild haben denselben Pfad, und + genau das ist die Frage. */ + zeichen: [...(k.querySelectorAll(".kachel__svg path") || [])] + .map((z) => z.getAttribute("d") || "").join("|").slice(0, 120), + /* Traegt die Kachel eine sichtbare Schiene in ihrem Ton? */ + schiene: getComputedStyle(k, "::before").backgroundImage, + ton: getComputedStyle(k).getPropertyValue("--ton").trim(), + })); + const reihen = new Set(kacheln.map((k) => k.oben)).size; + return { spalten, kacheln, reihen }; + }); + + if (process.env.SCHIRM) { + /* ERST HINSCHEUEN, DANN FOTOGRAFIEREN. Die Kacheln blenden sich + beim Hereinscrollen ein; ein Vollbild-Foto von oben zeigt sie + deshalb als leere Flaeche -- ich habe das Bild einmal fuer den + Beweis gehalten, dass nichts da ist, waehrend die Messung + daneben acht Kacheln zaehlte. */ + await seite.evaluate(() => { + const gruppen = [...document.querySelectorAll(".kacheln")]; + const treffer = gruppen.find((g) => { + const kopf = g.previousElementSibling; + return kopf && /COMMUNITY/i.test(kopf.textContent || ""); + }) || gruppen[gruppen.length - 1]; + treffer.scrollIntoView({ block: "center" }); + }); + await seite.waitForTimeout(1200); + const pfad = fileURLToPath(new URL(`pruef-kachelraster-${wer}.png`, import.meta.url)); + await seite.screenshot({ path: pfad, fullPage: false }); + } + await kontext.close(); + return { ...daten, konsole }; +} + +try { + /* ===================================================================== + 1. DOGFATHER -- ACHT KACHELN + ===================================================================== */ + melde(""); + melde("=== 1. DogFather sieht acht ==="); + { + const m = await messen("admin", "CODE-DOGI-0001", "dogfather"); + ok(m.kacheln.length === 8, `${m.kacheln.length} Community-Kacheln`); + ok(m.spalten === 3, `drei Spalten (${m.spalten})`); + /* DIE BREITE KACHEL STEHT VORNE -- das ist die eigentliche + Reparatur. Ohne diese Zeile waere nicht geprueft, WARUM kein + Loch da ist; bei acht Kacheln ginge die Rechnung zufaellig auch + mit ihr an anderer Stelle auf. */ + const breitAn = m.kacheln.findIndex((k) => k.breit); + ok(breitAn === 0, + `die doppelt breite Kachel steht an erster Stelle (${breitAn === 0 + ? m.kacheln[0].name : "Platz " + (breitAn + 1)})`); + + const r = loecher(m); + ok(!r.loch, + `kein Loch: ${r.zellen} Zellen auf ${m.spalten} Spalten = ${r.minimum} Reihen, ` + + `gemessen ${r.reihen}`); + + /* JEDES ZEICHEN GENAU EINMAL. Vorher trugen "Regeln & Hilfe" und + "Meldungen & Massnahmen" beide denselben Schild -- nebeneinander + und nicht zu unterscheiden. */ + const zeichen = m.kacheln.map((k) => k.zeichen).filter(Boolean); + const doppelt = zeichen.filter((z, i) => zeichen.indexOf(z) !== i); + ok(zeichen.length === m.kacheln.length && doppelt.length === 0, + doppelt.length ? `Zeichen doppelt: ${doppelt.join(", ")}` + : `jedes der ${zeichen.length} Zeichen kommt genau einmal vor`); + + /* DIE SCHIENE. Sie war beschrieben und nicht gebaut: `.kachel::before` + hatte nur einen Uebergang und keinen Inhalt. Ohne sie trug den Ton + nur ein Verlauf, der unter dem Buehnenbild verschwindet. */ + const ohneSchiene = m.kacheln.filter( + (k) => !k.schiene || k.schiene === "none"); + ok(ohneSchiene.length === 0, + ohneSchiene.length ? `${ohneSchiene.length} Kacheln ohne Schiene` + : "jede Kachel traegt ihre farbige Schiene"); + + /* UND DIE TOENE SIND VERSCHIEDEN. Sonst waere eine sichtbare + Schiene siebenmal dieselbe Farbe -- schlimmer als keine. */ + const toene = new Set(m.kacheln.map((k) => k.ton).filter(Boolean)); + ok(toene.size === m.kacheln.length, + `${toene.size} verschiedene Toene bei ${m.kacheln.length} Kacheln`); + + ok(m.konsole.length === 0, + m.konsole.length ? `Konsole: ${m.konsole[0]}` : "keine Fehler in der Konsole"); + } + + /* ===================================================================== + 2. EIN MODI -- SIEBEN KACHELN + ===================================================================== */ + melde(""); + melde("=== 2. Ein Modi sieht dieselben acht ==="); + { + const m = await messen("creator", "CODE-MODI-0001", "modi"); + /* ACHT, NICHT SIEBEN -- und das war MEIN Denkfehler beim Schreiben + dieser Pruefung, nicht der des Codes: Ein Modi moderiert, also + braucht er "Meldungen & Massnahmen". Die Liste im Quelltext sagt + es deutlich (MODI_MIT_TREFF endet auf TREFF_MODERATION_KACHEL). + Der reine Zuschauer sieht sieben; an den kommt eine Pruefung + ohne Gastzugang nicht heran, deshalb steht der Fall unten in der + Rechnung. */ + ok(m.kacheln.length === 8, `${m.kacheln.length} Community-Kacheln`); + const r = loecher(m); + /* SIEBEN KACHELN, EINE DAVON BREIT = ACHT ZELLEN auf drei Spalten = + drei Reihen. Die letzte Reihe hat eine freie Zelle -- die ist + erlaubt, sie liegt am Ende. */ + ok(!r.loch, + `kein Loch: ${r.zellen} Zellen = ${r.minimum} Reihen, gemessen ${r.reihen}`); + ok(m.konsole.length === 0, + m.konsole.length ? `Konsole: ${m.konsole[0]}` : "keine Fehler in der Konsole"); + } + + /* ===================================================================== + 3. GEGENPROBE -- FINDET DIE RECHNUNG UEBERHAUPT EIN LOCH? + ===================================================================== */ + melde(""); + melde("=== 3. Die Gegenprobe ==="); + { + /* DIE ALTE REIHENFOLGE, nachgestellt: breite Kachel an dritter + Stelle. Sie belegt dann Zellen 3+4, Zelle 3 der ersten Reihe + bleibt leer, und es braucht eine Reihe mehr. */ + const alt = loecher({ + spalten: 3, reihen: 4, + kacheln: [{}, {}, { breit: true }, {}, {}, {}, {}, {}], + }); + ok(alt.loch, `die alte Reihenfolge meldet ein Loch (${alt.reihen} statt ${alt.minimum})`); + + /* UND DIE ANDERE RICHTUNG: Eine saubere Anordnung darf NICHT + anschlagen, sonst waere die Rechnung einfach immer rot. */ + const gut = loecher({ + spalten: 3, reihen: 3, + kacheln: [{ breit: true }, {}, {}, {}, {}, {}, {}, {}], + }); + ok(!gut.loch, `die neue Reihenfolge nicht (${gut.reihen} = ${gut.minimum})`); + + /* Und eine Luecke am ENDE gilt ausdruecklich nicht als Loch. */ + const ende = loecher({ spalten: 3, reihen: 3, kacheln: [{ breit: true }, {}, {}, {}, {}, {}, {}] }); + ok(!ende.loch, `eine freie Zelle am Ende ist kein Loch (${ende.zellen} Zellen, ${ende.reihen} Reihen)`); + + /* DER REINE ZUSCHAUER sieht sieben Kacheln ohne die Moderation. + An ihn kommt diese Pruefung nicht heran (kein Gastzugang), also + wird wenigstens die Rechnung fuer seinen Fall gefuehrt -- und + sie ist derselbe Fall wie eine Zeile darueber. */ + ok(ende.zellen === 8 && ende.minimum === 3, + "auch die Sicht eines Zuschauers (7 Kacheln) geht auf drei Reihen auf"); + } +} finally { + await browser.close(); +} + +melde(""); +melde(`${geprueft} Pruefungen, ${fehler} Fehler`); +melde(fehler ? "NICHT IN ORDNUNG" : "ALLES IN ORDNUNG"); +try { rmSync(ordner, { recursive: true, force: true }); } catch { /* Aufraeumrest */ } +process.exit(fehler ? 1 : 0); diff --git a/server/pruef-treff.mjs b/server/pruef-treff.mjs index de2675d6..c286d0e4 100644 --- a/server/pruef-treff.mjs +++ b/server/pruef-treff.mjs @@ -302,7 +302,20 @@ let namen = []; Abschriften derselben sieben Namen waeren zwei Gelegenheiten, einen davon zu aendern und den anderen zu vergessen. */ namen = (j.bereiche || []).map((k) => k.name); - ok(namen.join(" | ") === "Anschlagbrett | Was ansteht | Der Treff | Wunschliste | Highlights | Regeln & Hilfe | Mitmachen", + /* DIE REIHENFOLGE IST TEIL DER AUSSAGE, nicht Zufall (17.09.2026). + "Der Treff" steht seit heute VORNE, und zwar aus zwei Gruenden: + + 1. Das Raster hat drei Spalten, seine Kachel ist doppelt breit. + An dritter Stelle passte sie nicht mehr in die erste Reihe und + riss ein Loch hinein -- genau das, was Filipe auf dem + Bildschirmfoto gesehen hat. Eine breite Kachel gehoert an den + Anfang; steht sie hinten, faellt die Luecke in die Mitte. + 2. Der Treff IST das Herz dieses Bereichs. Die Reihenfolge + stimmt jetzt auch inhaltlich. + + Wer sie wieder aendert, aendert beides. `pruef-kachelraster` + rechnet zusaetzlich nach, ob daraus ein Loch entsteht. */ + ok(namen.join(" | ") === "Der Treff | Anschlagbrett | Was ansteht | Wunschliste | Highlights | Regeln & Hilfe | Mitmachen", `und zwar diese: ${namen.join(", ")}`); ok((j.bereiche || []).every((k) => k.gruppe === "Community"), "alle in der Gruppe „Community“"); diff --git a/server/workspace.js b/server/workspace.js index 66e3d94b..ea7f443f 100644 --- a/server/workspace.js +++ b/server/workspace.js @@ -895,13 +895,41 @@ const TREFF_GRUPPE = { gruppeUnter: "Der Treff \u2013 der Raum f\u00fcr die Zuschauer", }; +/* DIE BREITE KACHEL STEHT VORNE (17.09.2026). + + Filipe, mit einem Bildschirmfoto: "das wie es jetzt ist ist es + einfach total scheisse ... gerade einfach nur dahin geknallt". + + Er hatte recht, und die Ursache stand genau hier. Das Raster hat + DREI Spalten, "Der Treff" ist doppelt breit (`grid-column: span 2`) + -- stand aber an DRITTER Stelle. Nach zwei normalen Kacheln war noch + EINE Spalte frei, er passte nicht hinein und rutschte eine Reihe + tiefer. Zurueck blieb ein Loch mitten im Raster: + + Reihe 1 [Anschlagbrett] [Was ansteht] ....... LUECKE + Reihe 2 [ Der Treff (2) ] [Wunschliste] + Reihe 3 [Highlights] [Regeln] [Mitmachen] + Reihe 4 [Meldungen] ...... LUECKE ...... LUECKE + + DIE REGEL, und sie gilt fuer jedes Raster im Haus: Eine breite + Kachel gehoert an den ANFANG. Steht sie hinten, faellt die Luecke in + die MITTE -- und eine Luecke in der Mitte sieht kaputt aus, eine am + Ende sieht grosszuegig aus. + + Jetzt fuellen Treff (2) plus Anschlagbrett die erste Reihe, die + naechsten drei die zweite, der Rest die dritte. Fuer das Team mit + der achten Kachel geht es genau auf: drei mal drei. + + UND ES IST AUCH INHALTLICH RICHTIG. Der Treff ist das Herz dieses + Bereichs -- dass er vorne steht, ist keine Notloesung fuer das + Raster, sondern die Reihenfolge, die ohnehin stimmt. */ const TREFF_BEREICHE = [ + { ...TREFF_GRUPPE, name: "Der Treff", unter: "Hallo sagen, fragen, loben", + zeichen: "community", ton: 34, gross: true, ziel: "bereich.html?b=treff", szene: "lounge" }, { ...TREFF_GRUPPE, name: "Anschlagbrett", unter: "Was gerade gilt", zeichen: "reports", ton: 33, ziel: "bereich.html?b=anschlag", szene: "halle" }, { ...TREFF_GRUPPE, name: "Was ansteht", unter: "Die n\u00e4chsten Streams und Events", zeichen: "kalender", ton: 31, ziel: "bereich.html?b=ansteht", szene: "skyline" }, - { ...TREFF_GRUPPE, name: "Der Treff", unter: "Hallo sagen, fragen, loben", - zeichen: "community", ton: 34, gross: true, ziel: "bereich.html?b=treff", szene: "lounge" }, { ...TREFF_GRUPPE, name: "Wunschliste", unter: "Was ihr euch w\u00fcnscht \u2013 und wer mitwill", zeichen: "content", ton: 30, ziel: "bereich.html?b=wunsch", szene: "portal" }, { ...TREFF_GRUPPE, name: "Highlights", unter: "Eure Clips und Bilder", @@ -929,7 +957,17 @@ const TREFF_BEREICHE = [ const TREFF_MODERATION_KACHEL = { ...TREFF_GRUPPE, name: "Meldungen & Ma\u00dfnahmen", unter: "Was gemeldet wurde \u2013 und was daraus wurde", - zeichen: "schutz", ton: 36, ziel: "treff-moderation.html", szene: "studio", + /* EIGENES ZEICHEN, NICHT DASSELBE WIE "REGELN & HILFE" (17.09.2026). + + Hier stand zweimal `schutz` -- zwei Kacheln nebeneinander mit + demselben Schild. Auf dem Bildschirmfoto sind sie nicht zu + unterscheiden, und genau daran erkennt man eine Sammlung, die + niemand als Ganzes angesehen hat. + + `startcheck` ist eine abgehakte Liste und sagt den Unterschied: + Bei "Regeln & Hilfe" steht, was GILT. Hier steht, was daraus + WURDE. */ + zeichen: "startcheck", ton: 36, ziel: "treff-moderation.html", szene: "studio", }; /* Welche Bretter zum Treff gehoeren -- ABGELEITET aus den Kacheln, nicht diff --git a/workspace/app.webmanifest b/workspace/app.webmanifest index 42183382..71b98e42 100644 --- a/workspace/app.webmanifest +++ b/workspace/app.webmanifest @@ -13,25 +13,25 @@ "theme_color": "#06090f", "icons": [ { - "src": "/assets/img/app-symbole/workspace-192.png?v=202609170300", + "src": "/assets/img/app-symbole/workspace-192.png?v=202609171020", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { - "src": "/assets/img/app-symbole/workspace-512.png?v=202609170300", + "src": "/assets/img/app-symbole/workspace-512.png?v=202609171020", "sizes": "512x512", "type": "image/png", "purpose": "any" }, { - "src": "/assets/img/app-symbole/workspace-192-maskable.png?v=202609170300", + "src": "/assets/img/app-symbole/workspace-192-maskable.png?v=202609171020", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { - "src": "/assets/img/app-symbole/workspace-512-maskable.png?v=202609170300", + "src": "/assets/img/app-symbole/workspace-512-maskable.png?v=202609171020", "sizes": "512x512", "type": "image/png", "purpose": "maskable" diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css index b05cf567..e9117b12 100644 --- a/workspace/assets/css/start.css +++ b/workspace/assets/css/start.css @@ -5029,9 +5029,49 @@ body[data-fremde-sicht="ja"]::after { opacity: .58; transition: opacity var(--tempo), background-position .55s cubic-bezier(.35, 0, .2, 1); } +/* DIE SCHIENE — und sie war nicht da (17.09.2026). + + Filipe, mit einem Bildschirmfoto der Community: „das wie es jetzt + ist ist es einfach total scheisse". Beim Nachmessen: Die sieben + Bereiche HABEN klar verschiedene Töne (#cc9451 orange, #668e6e grün, + #cc92c6 rosa, #656a9e blau …) — auf dem Schirm kam davon fast + nichts an. + + Der Grund stand direkt daneben. Die Regeln `.kachel:hover::before` + und der Kommentar darüber sprechen ausführlich von einer Schiene, + die „heller wird und weiter in die Platte strahlt" — nur hatte + `.kachel::before` ausser einem Übergang KEINEN Inhalt. Das Element + wurde beim Umbau am 07.09. entfernt, seine Hover-Regeln blieben + stehen. Seither trug den Ton nur noch ein Verlauf, der auf den + obersten 12 % der Platte bei 30 % anfängt und bei 58 % verschwunden + ist — unter einem Bühnenbild reicht das nicht. + + Das hier ist deshalb kein neuer Einfall, sondern das Wiedereinsetzen + dessen, womit der Rest der Datei ohnehin rechnet. + + AUGENSCHONEND: drei Pixel, oben, nach rechts auslaufend. Ein + durchgezogener Balken wirkt wie ein Etikett, ein auslaufender wie + Licht — dieselbe Überlegung wie bei den Spalten des Aufgabenbretts. + Nicht die Fläche einfärben: Farbe an der Kante unterscheidet, + Farbe auf der Fläche blendet. */ .kachel::before { + content: ""; + position: absolute; left: 0; right: 0; top: 0; height: 3px; + z-index: 2; pointer-events: none; + border-radius: 16px 16px 0 0; + opacity: .82; + background: linear-gradient(90deg, + var(--ton), + color-mix(in srgb, var(--ton) 38%, transparent) 58%, + color-mix(in srgb, var(--ton) 6%, transparent) 88%, + transparent); transition: opacity var(--tempo), width var(--tempo), box-shadow var(--tempo); } +/* Wer weniger Bewegung will, bekommt sie trotzdem in Farbe -- die + Schiene ist Information, keine Animation. */ +@media (prefers-reduced-motion: reduce) { + .kachel::before { transition: none; } +} /* ANHEBEN STATT AUFLEUCHTEN. Beim Überfahren wird die Kachel nicht heller, sondern sie kommt näher: Sie steigt zwei Pixel, ihr Schatten diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index 1f8b2555..188904e6 100644 --- a/workspace/aufgaben.html +++ b/workspace/aufgaben.html @@ -12,19 +12,19 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - + + + + + + - + @@ -291,10 +291,10 @@ - - - - - + + + + + diff --git a/workspace/automation.html b/workspace/automation.html index dfa40a9a..610b8677 100644 --- a/workspace/automation.html +++ b/workspace/automation.html @@ -12,20 +12,20 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - - + + + + + + + - + @@ -168,10 +168,10 @@ - - - - - + + + + + diff --git a/workspace/befinden.html b/workspace/befinden.html index 0f2f1c41..e1d578eb 100644 --- a/workspace/befinden.html +++ b/workspace/befinden.html @@ -7,14 +7,14 @@ - - - - - - - - + + + + + + + + @@ -105,9 +105,9 @@ - - - - + + + + diff --git a/workspace/bereich.html b/workspace/bereich.html index d2061357..f4081099 100644 --- a/workspace/bereich.html +++ b/workspace/bereich.html @@ -12,20 +12,20 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - - + + + + + + + - + @@ -181,14 +181,14 @@ - - - - - - - - - + + + + + + + + + diff --git a/workspace/calls.html b/workspace/calls.html index 66f8b1e7..4adb7d48 100644 --- a/workspace/calls.html +++ b/workspace/calls.html @@ -12,20 +12,20 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - - + + + + + + + - + @@ -89,11 +89,11 @@ - - - - - - + + + + + + diff --git a/workspace/chat.html b/workspace/chat.html index 41361fc6..8133b5af 100644 --- a/workspace/chat.html +++ b/workspace/chat.html @@ -12,26 +12,26 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - + + + + - - - + + + - + @@ -341,10 +341,10 @@ - - - - - + + + + + diff --git a/workspace/content.html b/workspace/content.html index be3b4d24..ec7a12b4 100644 --- a/workspace/content.html +++ b/workspace/content.html @@ -12,20 +12,20 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - - + + + + + + + - + @@ -179,12 +179,12 @@ - - - - - - - + + + + + + + diff --git a/workspace/crew-index.html b/workspace/crew-index.html index dd69c8ff..91a41bcb 100644 --- a/workspace/crew-index.html +++ b/workspace/crew-index.html @@ -36,15 +36,15 @@ - - - + + + - + @@ -339,6 +339,6 @@ - + diff --git a/workspace/crew.webmanifest b/workspace/crew.webmanifest index bd426048..b5a4d385 100644 --- a/workspace/crew.webmanifest +++ b/workspace/crew.webmanifest @@ -13,25 +13,25 @@ "theme_color": "#06090f", "icons": [ { - "src": "/assets/img/app-symbole/crew-192.png?v=202609170300", + "src": "/assets/img/app-symbole/crew-192.png?v=202609171020", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { - "src": "/assets/img/app-symbole/crew-512.png?v=202609170300", + "src": "/assets/img/app-symbole/crew-512.png?v=202609171020", "sizes": "512x512", "type": "image/png", "purpose": "any" }, { - "src": "/assets/img/app-symbole/crew-192-maskable.png?v=202609170300", + "src": "/assets/img/app-symbole/crew-192-maskable.png?v=202609171020", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { - "src": "/assets/img/app-symbole/crew-512-maskable.png?v=202609170300", + "src": "/assets/img/app-symbole/crew-512-maskable.png?v=202609171020", "sizes": "512x512", "type": "image/png", "purpose": "maskable" diff --git a/workspace/dateien.html b/workspace/dateien.html index db6ba7a1..d631a9e3 100644 --- a/workspace/dateien.html +++ b/workspace/dateien.html @@ -12,20 +12,20 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - - + + + + + + + - + @@ -108,10 +108,10 @@ - - - - - + + + + + diff --git a/workspace/entwicklung.html b/workspace/entwicklung.html index 6a439122..4b11a8ca 100644 --- a/workspace/entwicklung.html +++ b/workspace/entwicklung.html @@ -7,14 +7,14 @@ - - - - - - - - + + + + + + + + @@ -102,9 +102,9 @@ - - - - + + + + diff --git a/workspace/index.html b/workspace/index.html index 1c3443fe..e0e00838 100644 --- a/workspace/index.html +++ b/workspace/index.html @@ -30,9 +30,9 @@ - - - + + + @@ -401,6 +401,6 @@ - + diff --git a/workspace/kalender.html b/workspace/kalender.html index 2b62a9e5..8b7e6d57 100644 --- a/workspace/kalender.html +++ b/workspace/kalender.html @@ -12,20 +12,20 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - - + + + + + + + - + @@ -377,11 +377,11 @@ - - - - - - + + + + + + diff --git a/workspace/leistung.html b/workspace/leistung.html index 7d798450..032105d4 100644 --- a/workspace/leistung.html +++ b/workspace/leistung.html @@ -12,20 +12,20 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - - + + + + + + + - + @@ -444,10 +444,10 @@ - - - - - + + + + + diff --git a/workspace/personen.html b/workspace/personen.html index 43cb2934..82a40f49 100644 --- a/workspace/personen.html +++ b/workspace/personen.html @@ -12,20 +12,20 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - - + + + + + + + - + @@ -423,10 +423,10 @@ - - - - - + + + + + diff --git a/workspace/profil.html b/workspace/profil.html index d6df9468..6a959f04 100644 --- a/workspace/profil.html +++ b/workspace/profil.html @@ -12,20 +12,20 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - - + + + + + + + - + @@ -214,11 +214,11 @@ - - - - - - + + + + + + diff --git a/workspace/rechte.html b/workspace/rechte.html index 20cdfcc7..6ebd6e65 100644 --- a/workspace/rechte.html +++ b/workspace/rechte.html @@ -7,14 +7,14 @@ - - - - - - - - + + + + + + + + @@ -134,9 +134,9 @@ Beim ersten Anlauf fehlte die Zeile auf genau diesen beiden neuen Seiten. Gefunden hat das nicht das Auge, sondern pruef-css-klassen, die seit dem 07.09. jede Seite danach absucht. --> - - - - + + + + diff --git a/workspace/report.html b/workspace/report.html index a5ea0e9d..037bdc22 100644 --- a/workspace/report.html +++ b/workspace/report.html @@ -12,20 +12,20 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - - + + + + + + + - + @@ -106,11 +106,11 @@ - - - - - - + + + + + + diff --git a/workspace/scouting.html b/workspace/scouting.html index 4504c060..ab61710c 100644 --- a/workspace/scouting.html +++ b/workspace/scouting.html @@ -12,20 +12,20 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - - + + + + + + + - + @@ -173,10 +173,10 @@ - - - - - + + + + + diff --git a/workspace/start.html b/workspace/start.html index 6657a4cf..d687098a 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -12,21 +12,21 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - + + + + - - + + - + @@ -674,10 +674,10 @@

- - - - - + + + + + diff --git a/workspace/startcheck.html b/workspace/startcheck.html index cdfaacf1..758381fb 100644 --- a/workspace/startcheck.html +++ b/workspace/startcheck.html @@ -12,20 +12,20 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - - + + + + + + + - + @@ -85,11 +85,11 @@ - - - - - - + + + + + + diff --git a/workspace/steckbrief.html b/workspace/steckbrief.html index edb91ded..cba4b9f4 100644 --- a/workspace/steckbrief.html +++ b/workspace/steckbrief.html @@ -12,20 +12,20 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - - + + + + + + + - + @@ -146,11 +146,11 @@ - - - - - - + + + + + + diff --git a/workspace/talente.html b/workspace/talente.html index a4333107..ec9e164d 100644 --- a/workspace/talente.html +++ b/workspace/talente.html @@ -7,14 +7,14 @@ - - - - - - - - + + + + + + + + @@ -94,9 +94,9 @@ - - - - + + + + diff --git a/workspace/team.html b/workspace/team.html index 47c415a5..4c678d87 100644 --- a/workspace/team.html +++ b/workspace/team.html @@ -7,20 +7,20 @@ - - - - - - - + + + + + + + - + @@ -110,10 +110,10 @@ - - - - - + + + + + diff --git a/workspace/teamlage.html b/workspace/teamlage.html index 816dfe9d..de50196c 100644 --- a/workspace/teamlage.html +++ b/workspace/teamlage.html @@ -7,20 +7,20 @@ - - - - - - - + + + + + + + - + - - - - + + + + diff --git a/workspace/treff-moderation.html b/workspace/treff-moderation.html index 8d19e47a..09dd48c8 100644 --- a/workspace/treff-moderation.html +++ b/workspace/treff-moderation.html @@ -7,14 +7,14 @@ - - - - - - - - + + + + + + + + @@ -110,9 +110,9 @@ - - - - + + + + diff --git a/workspace/treff-regeln.html b/workspace/treff-regeln.html index c4b2bc99..a130d5bf 100644 --- a/workspace/treff-regeln.html +++ b/workspace/treff-regeln.html @@ -7,18 +7,18 @@ - - - - - - - + + + + + + + - + @@ -211,10 +211,10 @@ Beim ersten Anlauf fehlte die Zeile auf genau diesen beiden neuen Seiten. Gefunden hat das nicht das Auge, sondern pruef-css-klassen, die seit dem 07.09. jede Seite danach absucht. --> - - - - - + + + + + diff --git a/workspace/uebersicht.html b/workspace/uebersicht.html index dbbf6ddc..72b0b2f3 100644 --- a/workspace/uebersicht.html +++ b/workspace/uebersicht.html @@ -12,22 +12,22 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - + + + + - - - + + + - + @@ -149,11 +149,11 @@ - + - - - - + + + + diff --git a/workspace/wissen.html b/workspace/wissen.html index 7c20707a..e63f0f9a 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -12,20 +12,20 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - - + + + + + + + - + @@ -190,10 +190,10 @@ - - - - - + + + + +