diff --git a/server/crew-adresse.js b/server/crew-adresse.js index 393a8419..be8e7fa0 100644 --- a/server/crew-adresse.js +++ b/server/crew-adresse.js @@ -305,6 +305,37 @@ export function crewWeiche(req, res, next) { return next(); } + /* DAS HAUS (10.09.2026). + + Filipe: "die leiste da und alles andere was noch rot ist auf team + dogi seite soll lila werden. richtig geiles lila und babyblau + mischung ueberall." Und davor: "ich will doch dass der eingang + hier getrennt ist von der workspace seite … aber es soll trotzdem + so bleiben dass ich die daten hier und da sehe." + + Getrennt wird also das AUSSEHEN, nicht der Bestand. Dieselbe + Datenbank, dieselben Seiten, dasselbe Programm -- und zwei + Haeuser, die man nicht verwechseln kann. + + Jede Seite laedt als LETZTE Stilvorlage `haus.css`. Auf der + Agenturadresse ist die leer, hier steht dahinter das ganze andere + Farbhaus. Warum ueber den Dateinamen und nicht ueber ein Attribut + am : Ein Attribut muesste entweder JavaScript setzen (dann + laedt die Seite erst im falschen Ton und faerbt sich um -- auf + jeder Seite, bei jedem Aufruf) oder der Server muesste jede + HTML-Antwort umschreiben statt sie als Datei auszuliefern. + + Der Dateiname reist mit einer Fassungsnummer (`?v=…`); die + Bedingung sieht deshalb nur auf den PFAD, nicht auf die ganze + Adresse. Genau daran waere sie sonst gescheitert -- lautlos, denn + ein nicht umgebogener Pfad liefert weiterhin eine gueltige + Datei. */ + if (req.path === "/workspace/assets/css/haus.css") { + req.url = "/workspace/assets/css/crew-haus.css" + + (req.url.includes("?") ? req.url.slice(req.url.indexOf("?")) : ""); + return next(); + } + if (istWorkspacePfad(req.path) || req.path.startsWith("/assets/")) return next(); return res.redirect(302, "/workspace/"); } diff --git a/server/pruef-crew-adresse.mjs b/server/pruef-crew-adresse.mjs index f05f35be..3086be45 100644 --- a/server/pruef-crew-adresse.mjs +++ b/server/pruef-crew-adresse.mjs @@ -550,6 +550,55 @@ console.log("--- Die Buehnen innen ---"); + `${Math.round(a1.text.length / 1024)} KB gegen ${Math.round(a2.text.length / 1024)} KB)`); } +/* ===================================================================== + DAS HAUS (10.09.2026) + + Filipe: "ich will doch dass der eingang hier getrennt ist von der + workspace seite … aber es soll trotzdem so bleiben dass ich die + daten hier und da sehe." + + Getrennt wird das AUSSEHEN, nicht der Bestand. Jede Seite laedt als + letzte Stilvorlage `haus.css`; auf der Agenturadresse ist die leer, + auf crew. biegt die Weiche sie auf `crew-haus.css` um. + + GEPRUEFT WIRD NICHT NUR "beide antworten mit 200". Zwei gueltige + Antworten sagen nichts darueber, ob es zwei VERSCHIEDENE Dateien + sind -- genau daran waere die Pruefung der Buehnen weiter oben schon + einmal fast vorbeigelaufen. Deshalb wird der Inhalt verglichen, und + zusaetzlich der Griff `--haus-name` gelesen: Er unterscheidet "die + leere Fassung ist angekommen" von "gar nichts ist angekommen". + ===================================================================== */ +console.log(""); +console.log("--- Welches Haus kommt an? ---"); +{ + const hausCrew = await hole("/workspace/assets/css/haus.css", { host: CREW }); + const hausWs = await hole("/workspace/assets/css/haus.css", { host: WS }); + ok(hausCrew.status === 200 && hausWs.status === 200, + `beide Adressen liefern ein Haus (${hausCrew.status}/${hausWs.status})`); + ok(hausCrew.text !== hausWs.text, + `und es sind zwei verschiedene (${hausCrew.text.length} gegen ${hausWs.text.length} Zeichen)`); + ok(/--haus-name:\s*"crew"/.test(hausCrew.text), + "auf crew. steht das Haus von Team Dogi darin"); + ok(/--haus-name:\s*"workspace"/.test(hausWs.text), + "auf workspace. das der Agentur (Gegenprobe)"); + + /* DIE FASSUNGSNUMMER MUSS MITREISEN. Jede Seite ruft die Datei mit + `?v=…` auf. Wer beim Umbiegen nur den Pfad setzt, wirft sie weg -- + und der Browser behaelt die Datei dann laenger, als er soll. + Aufgefallen waere das erst beim naechsten Farbwechsel, Wochen + spaeter, bei einem einzelnen Menschen. */ + const mitNummer = await hole("/workspace/assets/css/haus.css?v=202609102225", { host: CREW }); + ok(mitNummer.status === 200 && /--haus-name:\s*"crew"/.test(mitNummer.text), + `mit Fassungsnummer kommt dasselbe an (${mitNummer.status})`); + + /* Und die Datei des anderen Hauses ist auf beiden Adressen direkt + abrufbar -- sie ist kein Geheimnis, sie ist nur nicht die + Vorgabe. Das steht hier, damit niemand spaeter eine Sperre + einbaut, die die Pruefung oben blind machen wuerde. */ + const direkt = await hole("/workspace/assets/css/crew-haus.css", { host: WS }); + ok(direkt.status === 200, `crew-haus.css ist auch direkt abrufbar (${direkt.status})`); +} + /* ===================================================================== DIE GEGENPROBE diff --git a/server/pruef-css-klassen.mjs b/server/pruef-css-klassen.mjs index 8b013e35..83cfe892 100644 --- a/server/pruef-css-klassen.mjs +++ b/server/pruef-css-klassen.mjs @@ -611,18 +611,59 @@ console.log("\n=== module.css: die Modulliste steht siebenmal — und überall g /* Und die Datei muss auf jeder Seite ZULETZT stehen -- sonst überschreiben die Seitendateien die Form wieder, so wie es bis zum - 07.09.2026 auf vier Seiten der Fall war. */ + 07.09.2026 auf vier Seiten der Fall war. + + SEIT DEM 10.09.2026 STEHT EINE DAHINTER: haus.css. + + Sie entscheidet, ob die Seite das Haus der Agentur oder das von + Team Dogi traegt -- auf der Modi-Adresse biegt der Server genau + diesen Dateinamen um. Sie enthaelt ausschliesslich Variablen + (`:root`), und bei Variablen entscheidet allein die Reihenfolge: + Steht sie VOR module.css, gewinnt das Agenturhaus, und zwar + lautlos -- die Seite sieht dann einfach normal aus. + + Geprueft wird deshalb ab jetzt das PAAR, nicht eine einzelne + Datei: module.css an vorletzter, haus.css an letzter Stelle. + Nur "haus.css ist zuletzt" zu pruefen waere zu wenig -- dann + koennte module.css irgendwo davor stehen und die Seitendateien + wieder ueberschreiben, also genau der Fehler von damals. */ let zuletzt = 0, gesamt = 0; + const schief = []; for (const seite of readdirSync(join(WURZEL, "workspace")).filter((f) => f.endsWith(".html"))) { - if (seite === "index.html") continue; // die Anmeldeseite lädt sie nicht + if (seite === "index.html" || seite === "crew-index.html") continue; // Waende laden module.css nicht const html = readFileSync(join(WURZEL, "workspace", seite), "utf8"); const bl = [...html.matchAll(/]+rel="stylesheet"[^>]*>/g)].map((m) => m[0]); if (!bl.some((z) => z.includes("css/module.css"))) continue; gesamt++; - if (bl[bl.length - 1].includes("css/module.css")) zuletzt++; + if (bl.length >= 2 + && bl[bl.length - 1].includes("css/haus.css") + && bl[bl.length - 2].includes("css/module.css")) zuletzt++; + else schief.push(seite); } ok(gesamt >= 15 && zuletzt === gesamt, - `module.css steht auf allen ${gesamt} Seiten als letzte Stilvorlage (${zuletzt})`); + `module.css und dahinter haus.css auf allen ${gesamt} Seiten (${zuletzt})` + + (schief.length ? ` -- schief: ${schief.join(", ")}` : "")); + + /* GEGENPROBE: Erkennt die Reihenfolge-Pruefung eine falsche + Reihenfolge ueberhaupt? Zwei erfundene Listen, eine richtig, eine + vertauscht. Ohne sie waere die Zeile darueber gruen, sobald der + Selektor nichts mehr findet. */ + const probeGut = ['', '']; + const probeSchlecht = ['', '']; + const richtig = (l) => l.length >= 2 && l[l.length - 1].includes("css/haus.css") + && l[l.length - 2].includes("css/module.css"); + ok(richtig(probeGut) && !richtig(probeSchlecht), + "und eine vertauschte Reihenfolge wird als falsch erkannt"); + + /* DIE ZWEITE WAND LAEDT IHR HAUS DIREKT. + crew-index.html steht nur auf der Modi-Adresse und darf + crew-haus.css beim Namen nennen -- sie MUSS es sogar: Eine + Zugangswand, die sich erst nach dem Umbiegen faerbt, waere die + eine Seite, auf der man das Umfaerben sieht. */ + const wand = readFileSync(join(WURZEL, "workspace", "crew-index.html"), "utf8"); + const wandBl = [...wand.matchAll(/]+rel="stylesheet"[^>]*>/g)].map((m) => m[0]); + ok(wandBl.length >= 2 && wandBl[wandBl.length - 1].includes("css/crew-haus.css"), + `die zweite Wand laedt ihr Haus zuletzt (${wandBl.length} Stilvorlagen)`); } console.log(`\n${fehler === 0 ? "ALLES IN ORDNUNG" : `${fehler} FEHLER`}`); diff --git a/server/workspace.js b/server/workspace.js index 756092fd..6fafc5d2 100644 --- a/server/workspace.js +++ b/server/workspace.js @@ -638,7 +638,24 @@ export function rollentextFuer(person) { return null; } -export function markeFuer(person) { +/* DIE MARKE HAENGT AN ZWEI DINGEN, NICHT AN EINEM (10.09.2026). + * + * An der ROLLE: Wer zu Team Dogi gehoert, sieht ueberall den Namen + * seines Teams -- auch dann, wenn er die Seite ueber eine andere + * Adresse aufmacht. + * + * Und an der ADRESSE: Auf crew.dogfather-universe.com gibt es Spicy + * Media nicht. Dort stand ueber der Zentrale trotzdem "SPICY MEDIA" -- + * gross, mitten im Bild, weil diese Funktion nur die Rolle kannte und + * DogFather nun einmal zur Agentur gehoert. Filipe: "ich will doch + * dass der eingang hier getrennt ist von der workspace seite." + * + * Zwei Fragen, EINE Antwortstelle. Wer die Adressbedingung stattdessen + * an der Aufrufstelle prueft, hat sie beim naechsten Aufruf nicht -- + * und diese Funktion wird ueber kurz oder lang ein zweites Mal + * gebraucht. */ +export function markeFuer(person, hostKopfzeile) { + if (istCrewAdresse(hostKopfzeile)) return MODI_MARKE; return TEAM_DOGI_ROLLEN.has(person?.rolle) ? MODI_MARKE : null; } @@ -3336,7 +3353,7 @@ workspaceRouter.get("/workspace/api/ich", (req, res) => { genau wie meine"). */ bereiche: bereicheFuer(angesehen || person), rolle_text: rollentextFuer(angesehen || person), - marke: markeFuer(angesehen || person), + marke: markeFuer(angesehen || person, req.get("host")), /* Kacheln, die zur eigenen Liste DAZUkommen -- im Gegensatz zu `bereiche`, das sie ersetzt. Leer fuer alle, die keine haben. */ bereiche_zusatz: zusatzBereicheFuer(angesehen || person), diff --git a/workspace/app.webmanifest b/workspace/app.webmanifest index 29e0b1cc..c82bc26c 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=202609102156", + "src": "/assets/img/app-symbole/workspace-192.png?v=202609102227", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { - "src": "/assets/img/app-symbole/workspace-512.png?v=202609102156", + "src": "/assets/img/app-symbole/workspace-512.png?v=202609102227", "sizes": "512x512", "type": "image/png", "purpose": "any" }, { - "src": "/assets/img/app-symbole/workspace-192-maskable.png?v=202609102156", + "src": "/assets/img/app-symbole/workspace-192-maskable.png?v=202609102227", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { - "src": "/assets/img/app-symbole/workspace-512-maskable.png?v=202609102156", + "src": "/assets/img/app-symbole/workspace-512-maskable.png?v=202609102227", "sizes": "512x512", "type": "image/png", "purpose": "maskable" diff --git a/workspace/assets/css/crew-haus.css b/workspace/assets/css/crew-haus.css new file mode 100644 index 00000000..60a01489 --- /dev/null +++ b/workspace/assets/css/crew-haus.css @@ -0,0 +1,366 @@ +/* ===================================================================== + crew-haus.css — das Haus von Team Dogi (10.09.2026) + + Filipe: "die leiste da und alles andere was noch rot ist auf team + dogi seite soll lila werden. richtig geiles lila und babyblau + mischung überall." + + Diese Datei wird NUR auf crew.dogfather-universe.com ausgeliefert. + `crewWeiche()` biegt dafuer `haus.css` hierher um; auf der + Agenturadresse kommt weiterhin die leere Fassung an. Beide Haeuser + liegen damit im selben Programm, auf denselben Daten -- und sehen + trotzdem nicht mehr wie dasselbe aus. + + --------------------------------------------------------------------- + WARUM NUR VARIABLEN UND FAST KEINE REGELN + + Das ganze Haus haengt an zwei Dutzend Farbwerten in gate.css. Wer + die tauscht, tauscht jede Kachel, jeden Rand, jeden Knopf und jedes + Leuchten auf einmal -- und zwar an Stellen, die man beim Nachbauen + uebersehen wuerde. Eine Datei, die stattdessen Regel fuer Regel + umfaerbt, waere beim naechsten neuen Bauteil sofort unvollstaendig, + ohne dass es jemandem auffiele. + + Ausnahmen stehen unten und sind einzeln begruendet: Es sind die + Stellen, an denen eine Farbe NICHT aus einer Variablen kommt. + + --------------------------------------------------------------------- + DIE MISCHUNG + + Babyblau traegt, Lila akzentuiert. Nicht umgekehrt: Lila ist die + kraeftigere Farbe, und eine Flaeche, die ganz darin steht, wird nach + zwanzig Minuten anstrengend. Also grosse ruhige Flaechen kuehl, + Lila fuer das, was hervorstechen soll. + + ALLE WERTE SIND ENTSAETTIGT gegenueber dem, was ein Farbwaehler + ausspuckt. "Richtig geiles Lila" heisst nicht Neonlila: #a98bff + liest sich auf Dunkel kraeftig, #b46bff waere nach einer Stunde + Arbeit eine Zumutung. Die Hausregel "augenschonend" gilt auch fuer + eine Lieblingsfarbe. + ===================================================================== */ + +:root { + /* ---- Der Grund --------------------------------------------------- + Die dunklen Flaechen bekommen einen Stich ins Violette statt ins + Blaugraue. Der Unterschied ist einzeln kaum zu sehen und im + Ganzen deutlich -- er sorgt dafuer, dass auch die RUHIGEN Teile + der Seite zum Haus gehoeren und nicht nur die bunten. */ + --tinte: #07060f; + --glas: rgba(15, 12, 27, 0.74); + --glas-tief: rgba(10, 8, 19, 0.86); + --flaeche: rgba(15, 12, 27, 0.89); + + /* Raender im Lilaton statt im Blaugrau. Dieselben Deckkraefte wie im + Agenturhaus -- an denen ist nichts falsch, nur an der Farbe. */ + --rand: rgba(176, 166, 236, 0.17); + --rand-hell: rgba(176, 166, 236, 0.32); + + /* ---- Die Schrift ------------------------------------------------- + Ein Hauch Violett, kein reines Weiss (Hausregel). Die Helligkeit + ist gegenueber dem Agenturhaus NICHT gesenkt: Der leiseste Ton + dort war bis auf 4,50:1 heruntergemessen, also genau auf die + Grenze -- diese Werte liegen darueber und werden am fertigen + Bildschirmfoto nachgemessen, nicht an der Farbangabe. */ + --text: #e4e0f4; + --text-leise: #a9a2ca; + --text-still: #8f88b2; + + /* ---- Die Mischung ------------------------------------------------ + `--akzent` ist das Babyblau: Es traegt Knoepfe, Umrandungen und + jeden Fokusrahmen, also die grosse Menge. + `--violett` ist das Lila und steht ueberall dort, wo im Haus schon + eine ZWEITE Farbe vorgesehen war -- in Verlaeufen, im Leuchten, + an der zweiten Haelfte jeder Fassung. Dadurch entsteht die + Mischung von selbst, an genau den Stellen, an denen das Haus + ohnehin zwei Farben nebeneinanderstellt. */ + --akzent: #8ec9ff; + --akzent-tief: #4b3fa8; + --violett: #a98bff; + + /* ---- Was hier rot WAR -------------------------------------------- + Diese drei Werte gehoeren der Agentur (Spicy Media). Auf dieser + Adresse gibt es sie als Rolle gar nicht -- ihre Farben tauchten + trotzdem auf, weil mehrere Bauteile "die zweite Marke" damit + zeichnen: das Leuchten der Kopfzeile, Verlaeufe, Fassungen. Genau + das war der rote Schimmer in der Leiste. + + Sie werden nicht geloescht, sondern umgestellt: Ein geloeschter + Wert waere `unset` und faerbte die betroffenen Stellen schwarz + oder unsichtbar. Umgestellt tragen dieselben Bauteile jetzt Lila + und Babyblau -- ohne dass eine einzige Regel umgeschrieben werden + musste. */ + --spicy-haupt: #a98bff; + --spicy-zweit: #8ec9ff; + --spicy-tief: #3a2f7a; + + /* ---- DogFather --------------------------------------------------- + Bleibt die tragende Farbe des Hauses, wandert aber vom kraeftigen + Blau ins Babyblau und bekommt Lila als Begleitton. Damit laeuft + jede Rollenschiene, jedes Namensschild und jeder Kachelrand in der + neuen Mischung -- ohne Sonderregel. */ + --dogi-haupt: #8ec9ff; + --dogi-zweit: #a98bff; + --dogi-tief: #33296b; + + /* Die rechte Hand und Team Dogi teilen sich dieses Haus. Sie haben + im Agenturschema keine eigenen Toene (dort gibt es sie nicht) -- + hier bekommen sie welche, gespiegelt zu DogFather: Bei ihm fuehrt + Babyblau, bei ihnen Lila. Gleiche Familie, andere Betonung; keine + Rangordnung. */ + --hand-haupt: #a98bff; + --hand-zweit: #8ec9ff; + --hand-tief: #33296b; + + /* WARN BLEIBT WARM -- und das ist Absicht. + Eine Warnung ist keine Verzierung, sondern eine Bedeutung. Faerbt + man sie ins Lila der Seite, sieht "etwas stimmt nicht" aus wie + alles andere, und dann sagt sie nichts mehr. Sie wird nur leicht + ins Rosa gezogen, damit sie neben Lila nicht wie ein Fremdkoerper + wirkt. Wenn Filipe auch das lila haben will, ist es diese eine + Zeile -- aber es waere seine Entscheidung, nicht meine. */ + --warn: #ff9ab4; +} + +/* ===================================================================== + DIE VIER STELLEN, AN DENEN KEINE VARIABLE STAND + ===================================================================== */ + +/* 1. DAS LEUCHTEN UNTER DEM ZEICHEN IN DER KOPFLEISTE. + In start.css steht dort ein fest hingeschriebenes + `rgba(255, 92, 68, .62)` -- ein warmes Rot. Es liegt genau an der + Stelle, auf die Filipe im Bildschirmfoto gezeigt hat, und es kam + aus keiner Variablen; ein Tausch der Toene oben haette es nicht + erwischt. */ +.kopfleiste:hover .marke::before { + filter: saturate(1.1) brightness(1.16) + drop-shadow(0 0 9px rgba(169, 139, 255, .62)); +} + +/* 2. DIE FARBE DER BROWSERLEISTE am Handy. Sie steht als + im HTML und laesst sich von CSS nicht + erreichen -- deshalb setzt sie kopf.js auf dieser Adresse um. + Der Wert steht hier, damit beide Stellen eine Quelle haben. */ +:root { --haus-leiste: #0b0918; } + +/* 3. DER RAND EINER AUSGEWAEHLTEN KACHEL. Er nimmt `--akzent` mit + einer Beimischung -- die Beimischung ist im Agenturhaus kuehl + gerechnet. Hier bekommt sie Lila, damit die Auswahl in der + Mischung steht statt daneben. */ +.kachel[aria-current="page"], +.kachel:focus-visible { + border-color: color-mix(in srgb, var(--violett) 46%, transparent); +} + +/* 4. PRUEFT SICH SELBST. + Diese Regel tut nichts Sichtbares. Sie ist der Beweis, dass die + Datei ueberhaupt angekommen ist: Eine Pruefung liest + `--haus-name` aus und weiss dadurch, ob auf dieser Adresse das + richtige Haus ausgeliefert wurde. Ohne so einen Griff koennte + man nur die Farben vergleichen -- und die stimmen zufaellig auch + dann, wenn gar nichts geladen wurde. */ +:root { --haus-name: "crew"; } + +/* ===================================================================== + DIE FASSUNG DER ZENTRALE — die Stelle, auf die Filipe gezeigt hat + ===================================================================== + + Der Rahmen der grossen Kachel auf der Startseite laeuft im + Agenturhaus von ROT ueber Silber nach Babyblau. Das ist dort + richtig: Er nimmt die beiden Marken auf, Spicy Media und DogFather. + Hier gibt es Spicy Media nicht. + + DIE PROZENTZAHLEN BLEIBEN AUF DEN PUNKT GLEICH. Sie sind am + 08.09.2026 nachgerechnet worden, nicht nach Gefuehl verteilt -- + Filipe wollte, dass man die beiden FARBEN am meisten sieht, und die + Gewichtung wurde damals dafuer eigens umgestellt. Wer sie hier + antastet, wirft diese Rechnung weg. Getauscht wird also + ausschliesslich die linke Haelfte: Rot wird Lila, Stufe fuer Stufe + in derselben Helligkeitsfolge (dunkel, mittel, hell, Spitzlicht, + mittel, tief, sehr dunkel). + + Silber und Babyblau bleiben unangetastet -- das ist die zweite + Haelfte der Mischung, und sie war nie das Problem. + + WARUM DIE GANZE LISTE NOCH EINMAL DASTEHT: `background` ist eine + Kurzschreibweise. Eine einzelne Stufe eines Verlaufs laesst sich + nicht ersetzen, ohne den ganzen Verlauf zu schreiben. Dieselbe + Ueberlegung steht schon bei `body.gate--crew .rollen` in gate.css. + ===================================================================== */ +.willkommen { + background: + linear-gradient(96deg, + #150625 0%, + #6d47c4 3%, + #a98bff 10%, + #e6dcff 16%, /* Spitzlicht im Lila */ + #9d7bff 23%, + #5b3fa8 31%, + #2a1a52 38%, + #0a0c12 43%, /* schwarze Fuge */ + #8fa0b4 47%, + #f4faff 51%, /* der silberne Treffpunkt -- Mitte der Kachel */ + #8fa0b4 55%, + #0a0c12 59%, /* schwarze Fuge */ + #1d4a63 64%, + #4f95bd 70%, + #8fd8ff 76%, + #dff2ff 81%, /* Spitzlicht im Babyblau */ + #7ecdf5 87%, + #3f7fa3 93%, + #10222e 97%, + #06080f 100%); +} + +/* ===================================================================== + DIE UHR — dieselbe Mischung, andere linke Farbe + ===================================================================== + + Die Uhr in der Zentrale ist bewusst zweifarbig gebaut: links warm, + rechts babyblau, an vier Stellen. Im Agenturhaus sind das die zwei + Marken. Hier wird aus der warmen Seite Lila -- die Bauweise bleibt + Stueck fuer Stueck dieselbe, damit man beide Fassungen nebeneinander + lesen kann. + + Gefunden wurden die vier Stellen nicht durch Suchen im Quelltext, + sondern durch MESSEN am fertigen Bildschirm: Jedes Element der Uhr + wurde nach Farben abgefragt, bei denen der Rotkanal deutlich ueber + den anderen liegt. Zwei davon (die Textschatten) haetten in 6000 + Zeilen start.css niemand gefunden. */ + +/* Der Zeiger auf 12: heller Kopf, kraeftige Mitte, dunkler Fuss. */ +.uhr__zwoelf { + background: linear-gradient(180deg, #e6dcff 0%, #a98bff 34%, #5b3fa8 100%); +} + +/* Der Leuchtring: Lila, Babyblau, Grau im Wechsel -- gleiche Winkel, + gleiche Deckkraft, nur die erste Farbe wechselt. */ +.uhr__leds { + background: repeating-conic-gradient(from -1.5deg, + rgba(169, 139, 255, .70) 0deg 3deg, transparent 3deg 6deg, + rgba(126, 200, 242, .70) 6deg 9deg, transparent 9deg 12deg, + rgba(120, 150, 185, .34) 12deg 15deg, transparent 15deg 18deg); + filter: drop-shadow(0 0 2px rgba(160, 165, 215, .4)); +} + +/* Die Uhrzeit selbst: Der Schein links war rot. Die zwei Schatten + davor (Gravur) bleiben Zeile fuer Zeile gleich -- `text-shadow` ist + eine Liste, sie laesst sich nicht teilweise ersetzen. */ +.uhr__zeit { + text-shadow: + 0 -.5px 0 rgba(0, 0, 0, .85), + 0 .5px 0 rgba(255, 255, 255, .22), + -6px 0 16px rgba(169, 139, 255, .40), + 6px 0 16px rgba(143, 216, 255, .42); +} + +/* Die Digitalanzeige. Im Agenturhaus liest man "rote Digitalanzeige": + ein sehr helles Rotweiss, dessen Charakter allein aus dem Schein im + Textschatten kommt -- gesaettigtes Rot waere bei einer Uhr, die + dauerhaft im Bild steht, nach zwei Stunden eine Zumutung (die + Begruendung steht ausfuehrlich in start.css und gilt hier + unveraendert). Genau dieselbe Bauweise, nur in Lila: heller Kern, + Farbe im Schein. */ +.uhr__zeit { + color: #ece0ff; + text-shadow: + 0 0 6px rgba(160, 120, 255, .75), + 0 0 16px rgba(130, 90, 255, .45), + 0 1px 0 rgba(0, 0, 0, .6); +} +.uhr__sek { + color: #e2d2ff; + text-shadow: 0 0 7px rgba(150, 110, 255, .6); +} + +/* ===================================================================== + DIE LEISTE — genau die Stelle aus Filipes Bildschirmfoto + ===================================================================== + + Im Agenturhaus glimmt die Kopfleiste rot. Das ist dort sein + ausdruecklicher Wunsch (screen36: "eine richtig geile mischung von + rot schwarz, wie wenn es brennen würde") und bleibt dort auch so. + + Hier wird aus der Glut ein Lila-Schimmer. DIE BAUWEISE BLEIBT + IDENTISCH -- unten waermer, nach oben dunkel, in der Mitte kraeftiger + als an den Raendern, alles unter 30 % Deckkraft. Der Grund dafuer + steht ausfuehrlich in start.css und gilt hier genauso: Die Leiste + steht auf JEDER Seite und liegt beim Lesen immer im Bild. Sie darf + nicht leuchten, nur schimmern. + ===================================================================== */ +.kopfleiste { + background: + /* der Schimmer an der Unterkante */ + linear-gradient(180deg, + transparent 34%, + rgba(74, 46, 150, .15) 72%, + rgba(116, 78, 214, .28) 100%), + /* in der Mitte kraeftiger als an den Raendern */ + radial-gradient(120% 190% at 50% 118%, + rgba(169, 139, 255, .30) 0%, + rgba(88, 56, 168, .18) 38%, + transparent 72%), + rgba(8, 7, 18, .88); +} +/* Die Naht zum Inhalt schimmert mit -- sonst endet das Licht an einer + grauen Linie. */ +.kopfleiste::after { + background: linear-gradient(90deg, + transparent, rgba(150, 122, 255, .55) 22%, rgba(178, 150, 255, .75) 50%, + rgba(150, 122, 255, .55) 78%, transparent); +} + +/* Der Schriftzug selbst. Links stand die Chili in Rot, rechts das + Silber der Zentrale -- hier links Lila, rechts unveraendert. */ +/* GENAUSO SPEZIFISCH WIE DAS ORIGINAL, und beides gemessen statt + geraten: Beim ersten Anlauf stand hier nur `.marke__haupt` -- die + Regel wurde geladen, tat nichts, und im Bildschirmfoto blieb der + Schriftzug rot. Das Original steht in einem @supports-Block unter + `.kopfleiste .marke__haupt`; wer nur die halbe Kette schreibt, + verliert gegen zwei Klassen. Dasselbe beim Universum darunter. */ +@supports ((-webkit-background-clip: text) or (background-clip: text)) { + .kopfleiste .marke__haupt { + /* `background-image` UND NICHT `background`. Die Kurzschreibweise + setzt jede Lage der Eigenschaft zurueck, die sie nicht nennt -- + auch `background-clip`. Genau das ist hier passiert: Der Schriftzug + wird ueber `background-clip: text` in den Buchstaben ausgestanzt; + nach meinem ersten Anlauf stand oben links statt "Spicy & Dogi" ein + ausgefuellter heller Balken. Im Quelltext sah die Zeile voellig + richtig aus -- gesehen habe ich es erst im Bildschirmfoto. */ + background-image: linear-gradient(95deg, + #b79aff 0%, + #d3c2ff 22%, + #eaf1f8 50%, + #c6d8ea 72%, + #9fc4e4 100%); + } +} + +/* Das Universum hinter der Zentrale: unten links glueht es rot, + oben rechts babyblau, in der Mitte ein Hauch Lila. Jetzt zweimal + kalt -- die Anordnung bleibt, damit Rand und Flaeche weiter in + dieselbe Richtung laufen. */ +.willkommen > .zuniversum { + background: + radial-gradient(125% 95% at 10% 88%, rgba(169, 139, 255, .13), transparent 62%), + radial-gradient(115% 90% at 90% 12%, rgba(126, 200, 242, .105), transparent 60%), + radial-gradient( 70% 62% at 52% 50%, rgba(200, 180, 255, .05), transparent 68%); +} + +/* Glocke und Tagesruf tragen dieselbe zweifarbige Fassung wie alles + andere: eine Kante warm, die andere babyblau. Beide Stellen stehen + hier, weil beide dieselbe Mischung zeigen und sonst eine davon + uebrig bliebe -- genau die faellt dann als einziger roter Punkt auf. */ +.glocke--kachel, +.tagesruf { + background: + linear-gradient(150deg, + rgba(255, 255, 255, .16) 0%, + rgba(169, 139, 255, .15) 28%, + rgba(9, 8, 19, .9) 54%, + rgba(143, 216, 255, .13) 80%, + rgba(255, 255, 255, .08) 100%); + box-shadow: + -2px -2px 16px -11px rgba(150, 122, 255, .55), + 2px 2px 16px -11px rgba(143, 216, 255, .5), + 0 8px 20px -12px rgba(0, 0, 0, .9); +} diff --git a/workspace/assets/css/gate.css b/workspace/assets/css/gate.css index 0cd4326b..e76ce961 100644 --- a/workspace/assets/css/gate.css +++ b/workspace/assets/css/gate.css @@ -2732,32 +2732,38 @@ body.gate { es nur eine. ===================================================================== */ -/* Der Knopf: von tiefem zu hellerem Blau statt von Rot nach Blau. +/* Der Knopf: von Lila nach Babyblau (10.09.2026). + + Filipe: "richtig geiles lila und babyblau mischung überall." Er lief + bis eben von tiefem zu hellerem Blau -- richtig, solange die Wand + einfarbig blau war; jetzt fehlte ihm die Haelfte der Mischung. DIE HELLIGKEIT IST NACHGERECHNET, NICHT GEWAEHLT. Der erste Entwurf - endete bei #4aa4cf -- huebsch, und weisse Schrift darauf haette nur - 2,8 zu 1 gehabt. Der rot-blaue Verlauf, den er ersetzt, haelt ueber - seine GANZE Laenge 4,65 zu 1; er war offenbar genau darauf gebaut. - Ein hellerer Knopf sieht kraeftiger aus und ist schlechter zu lesen - -- das ist kein Tausch, den man nebenbei macht. + der blauen Fassung endete bei #4aa4cf -- huebsch, und weisse Schrift + darauf haette nur 2,8 zu 1 gehabt. Ein hellerer Knopf sieht + kraeftiger aus und ist schlechter zu lesen; das ist kein Tausch, den + man nebenbei macht. - Jede Stufe hier liegt bei mindestens 5 zu 1 gegen Weiss. Gemessen - wird das in pruef-crew-wand-bild.mjs am fertigen Bildschirmfoto, denn - ein Verlauf laesst sich nicht aus einer einzelnen Farbe beurteilen. */ + Jede Stufe hier liegt gegen Weiss bei mindestens 5 zu 1 (gerechnet: + 10,7 / 8,8 / 6,6 / 5,9). Der Verlauf beginnt dadurch dunkler als + vorher und endet heller -- die schlechteste Stelle ist damit besser + als die schlechteste der blauen Fassung. Gemessen wird das in + pruef-crew-wand-bild.mjs am fertigen Bildschirmfoto, denn ein Verlauf + laesst sich nicht aus einer einzelnen Farbe beurteilen. */ body.gate--crew #knopf { background: - linear-gradient(100deg, #17527f 0%, #205f8c 34%, #2f6f9a 74%, #3a7699 100%); + linear-gradient(100deg, #3a2b7d 0%, #4a3a9c 34%, #46589f 74%, #37688f 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .22), - 0 10px 26px -14px rgba(64, 146, 200, .9), + 0 10px 26px -14px rgba(130, 104, 220, .9), 0 10px 26px -16px rgba(126, 200, 242, .8); } body.gate--crew #knopf:hover:not([disabled]) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -2px 0 rgba(0, 0, 0, .22), - 0 14px 30px -12px rgba(64, 146, 200, .95), + 0 14px 30px -12px rgba(130, 104, 220, .95), 0 14px 30px -14px rgba(126, 200, 242, .85); } @@ -2774,9 +2780,14 @@ body.gate--crew #knopf:hover:not([disabled]) { umbaut, sieht an den gleichen Prozentzahlen sofort, dass beide zusammengehoeren. */ body.gate--crew .rollen { + /* LINKS LILA, RECHTS BABYBLAU (10.09.2026). Die Prozentzahlen sind + Stufe fuer Stufe dieselben wie im Original -- getauscht wird nur + die linke Farbfamilie, damit die beiden Fassungen nebeneinander + lesbar bleiben. Rechts stand Babyblau schon immer; das war nie das + Problem. */ background: linear-gradient(96deg, - #04080f 0%, #245a86 6%, #4f95bd 14%, #cfe9f8 20%, - #1d4a70 30%, #0a0c12 40%, #f4faff 50%, #0a0c12 60%, + #06040f 0%, #3a2b7d 6%, #7a63d8 14%, #ded3ff 20%, + #35276f 30%, #0a0c12 40%, #f4faff 50%, #0a0c12 60%, #4f95bd 70%, #8fd8ff 78%, #dff2ff 84%, #3f7fa3 92%, #06080f 100%); } /* Das Innenglas: unten links glueht es rot. Dieselbe Stelle, kaltes @@ -2789,9 +2800,9 @@ body.gate--crew .rollen::before { linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 34%), repeating-linear-gradient(0deg, rgba(150, 186, 220, .05) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(150, 186, 220, .05) 0 1px, transparent 1px 22px), - radial-gradient(120% 80% at 12% 100%, rgba(96, 168, 224, .12), transparent 62%), + radial-gradient(120% 80% at 12% 100%, rgba(150, 122, 255, .13), transparent 62%), radial-gradient(110% 75% at 88% 0%, rgba(126, 200, 242, .09), transparent 60%), - linear-gradient(180deg, #0b111c, #070b13); + linear-gradient(180deg, #0c0b1c, #080714); } /* Der kleine Anschlag neben "Womit meldest du dich an?" -- oben rot, unten babyblau. Hier oben im Ton von Team Dogi, unten babyblau: derselbe @@ -2799,7 +2810,7 @@ body.gate--crew .rollen::before { body.gate--crew .rollen .feldschild::before { background-image: linear-gradient(180deg, transparent 0 46%, rgba(143, 216, 255, .95) 46%), - repeating-linear-gradient(180deg, #5f8a9f 0 2px, transparent 2px 5px); + repeating-linear-gradient(180deg, #6b5fa8 0 2px, transparent 2px 5px); } /* Die Karte in der gemalten Tafel. WORTGLEICH dieselbe Bedingung wie @@ -2810,7 +2821,7 @@ body.gate--crew .rollen .feldschild::before { @media (min-width: 1100px) and (min-height: 620px) and (min-aspect-ratio: 7/5) { body.gate--crew .tafel { background: - radial-gradient(135% 100% at 0% 0%, rgba(96, 168, 224, .24), transparent 55%), + radial-gradient(135% 100% at 0% 0%, rgba(150, 122, 255, .26), transparent 55%), radial-gradient(135% 100% at 100% 100%, rgba(56, 158, 246, .30), transparent 58%), linear-gradient(176deg, rgba(16, 23, 36, .93) 0%, diff --git a/workspace/assets/css/haus.css b/workspace/assets/css/haus.css new file mode 100644 index 00000000..dc1f5557 --- /dev/null +++ b/workspace/assets/css/haus.css @@ -0,0 +1,50 @@ +/* ===================================================================== + haus.css — welches HAUS diese Seite gerade ist (10.09.2026) + + Filipe: "ich will doch dass der eingang hier getrennt ist von der + workspace seite … aber es soll trotzdem so bleiben dass ich die daten + hier und da sehe." + + --------------------------------------------------------------------- + DIESE DATEI IST ABSICHTLICH LEER. + + Sie ist ein PLATZHALTER, und genau das ist ihr Zweck. Auf der + Agenturadresse (workspace.dogfather-universe.com) bleibt alles, wie es + ist -- also steht hier nichts. Auf der Adresse von Team Dogi biegt + `crewWeiche()` in server/crew-adresse.js diesen einen Dateinamen auf + `crew-haus.css` um, und dort steht das ganze andere Farbhaus. + + WARUM SO UND NICHT ANDERS -- drei Wege, die ich verworfen habe: + + Ein `data-haus="crew"` am , gesetzt per JavaScript. Dann + laedt die Seite ZUERST im Agenturton und faerbt sich danach um. + Sichtbar, auf jeder Seite, bei jedem Aufruf. + + Dasselbe Attribut serverseitig in den HTML-Text schreiben. Dann + muesste jede HTML-Antwort durch einen Umschreiber laufen statt + einfach als Datei ausgeliefert zu werden -- ein neuer Weg fuer + JEDE Seite, nur wegen einer Farbe. + + Zwanzig Seiten mit einer zweiten -Zeile fuer das zweite Haus. + Die muesste jemand bei jeder neuen Seite mitschreiben, und wer sie + vergisst, bekommt eine Seite, die still zum falschen Haus gehoert. + + So gibt es EINE Zeile in jeder Seite und EINE Regel im Server. Und + das Bild ist beim ersten Abruf schon richtig -- kein Umfaerben, + kein Flackern. + + SIE MUSS DIE LETZTE STILVORLAGE JEDER SEITE SEIN. Sie ueberschreibt + nur Variablen (`:root`), da entscheidet allein die Reihenfolge. + pruef-css-klassen.mjs prueft das. + ===================================================================== */ + +/* EINE EINZIGE ANGABE STEHT DOCH HIER, und sie ist keine Farbe. + + Eine Pruefung muss unterscheiden koennen zwischen "die leere Fassung + ist angekommen" und "die Datei ist gar nicht geladen worden". Ohne + diesen Griff sehen beide Faelle gleich aus -- und ein fehlendes + Stilblatt waere auf der Agenturadresse unsichtbar, bis eines Tages + auf der anderen Adresse das Haus fehlt und niemand weiss, seit wann. + + Der dritte Ausgang, in einer Zeile CSS. */ +:root { --haus-name: "workspace"; } diff --git a/workspace/assets/js/kopf.js b/workspace/assets/js/kopf.js index 7f2c69c5..7a491ebe 100644 --- a/workspace/assets/js/kopf.js +++ b/workspace/assets/js/kopf.js @@ -112,6 +112,27 @@ zeichen.setAttribute('href', alt.replace('/workspace-', '/crew-')); } } + + /* DIE FARBE DER BROWSERLEISTE (10.09.2026). + + Am Handy faerbt Chrome die Leiste ueber der Seite nach + . Der Wert steht als feste Zeile im + HTML und ist von CSS nicht erreichbar -- auf dem Handy hatte + das zweite Haus damit oben einen Streifen aus dem ersten. + + Der Wert wird NICHT hier hingeschrieben, sondern aus + `--haus-leiste` gelesen: Dann steht er genau einmal da, naemlich + im Stilblatt des Hauses, zusammen mit allen anderen Farben. + Ein zweiter Ort waere der, an dem es beim naechsten Farbwechsel + hakt. + + Und er wird nur gesetzt, wenn das Haus ihn auch liefert: Auf der + Agenturadresse ist die Angabe leer, dann bleibt alles, wie es + ist. Kein `else`, keine zweite Wahrheit. */ + const leiste = getComputedStyle(document.documentElement) + .getPropertyValue('--haus-leiste').trim(); + const feld = document.querySelector('meta[name="theme-color"]'); + if (leiste && feld) feld.setAttribute('content', leiste); } /* Das eigene Bild, wenn es eines gibt -- sonst der Anfangsbuchstabe. diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index c7b7eefb..d658be35 100644 --- a/workspace/aufgaben.html +++ b/workspace/aufgaben.html @@ -12,12 +12,19 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - + + + + + + + +
@@ -245,10 +252,10 @@ - - - - - + + + + + diff --git a/workspace/automation.html b/workspace/automation.html index b9b01676..87717f0c 100644 --- a/workspace/automation.html +++ b/workspace/automation.html @@ -12,13 +12,20 @@ Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite eine Flaeche sind statt zweier. --> - - - - - - - + + + + + + + + + @@ -140,10 +147,10 @@ - - - - - + + + + +