diff --git a/CHANGELOG.md b/CHANGELOG.md index 1186a4b..fd61601 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ Versionierung [semantisch](https://semver.org/lang/de/). ## [Unreleased] – 2026-07-14 · SysnaptiK Neural Rebrand ### Marke & Plattform +- **Farbschema ohne Aufblitzen:** Die Neural-Hülle wird nun statisch mit dem + Grundtheme geladen und ihre Klasse bereits im `
` gesetzt. Theme- und + Bootstrap-Dateien tragen neue Versionsparameter, damit Login, Logout und jede + Navigation direkt im SysnaptiK-Neural-Schema zeichnen. - **Fortschritt & Barrierefreiheit repariert:** Die Diagramme warten jetzt auf die Neural-Plattformklasse und erscheinen dadurch in Mint statt im alten Orange. Hochkontrast und Farbenblind-Modus überschreiben nun auch lokale Plattform- und diff --git a/mindfluxfuture.md b/mindfluxfuture.md index c3ca7b2..3bc4cc8 100644 --- a/mindfluxfuture.md +++ b/mindfluxfuture.md @@ -107,6 +107,8 @@ Accessibility-Widget soll anschließend jeweils den lokalen Akzent übernehmen. > umgesetzt: Er prüft den Fortschrittsspeicher statt eine feste Verfügbarkeit vorzutäuschen. > Die Plattformdiagramme und Accessibility-Modi berücksichtigen die Neural-Tokens auch > dann, wenn einzelne Seiten oder Spiele eigene lokale Akzente setzen. +> Die Hülle ist zudem renderblockierend und mit früher HTML-Klasse eingebunden, damit beim +> Navigationwechsel kein früheres Plattformfarbschema aufblitzt. ### Ziel und Abgrenzung diff --git a/src/main/resources/static/css/accessibility.css b/src/main/resources/static/css/accessibility.css index b8dba50..9ade6b3 100644 --- a/src/main/resources/static/css/accessibility.css +++ b/src/main/resources/static/css/accessibility.css @@ -10,15 +10,15 @@ html[data-mf-contrast="true"] body :focus-visible{outline:3px solid #ffd21a!impo /* Okabe-Ito-nahe Palette: die Karten und die Spieltokens ändern sich sichtbar, ohne sich für Rot-/Grün-Sehschwächen nur über Farbe unterscheiden zu müssen. */ html[data-mf-color="safe"] body,html[data-mf-color="safe"] body *{--success:#0072b2!important;--danger:#e69f00!important;--secondary:#cc79a7!important;--secondary-2:#56b4e9!important;--esc-accent:#e69f00!important;--bh-accent:#d55e00!important;--sc-accent:#56b4e9!important;--nw-accent:#0072b2!important;--mm-accent:#cc79a7!important;--mm-secondary:#56b4e9!important;--tt-accent:#f0e442!important;--tt-secondary:#0072b2!important;--dl-accent:#009e73!important;--dl-secondary:#56b4e9!important;--ss-accent:#0072b2!important;--ss-secondary:#e69f00!important;--ff-accent:#d55e00!important;--ff-secondary:#cc79a7!important} -html[data-mf-color="safe"] body.sn-platform .mf-card-mindmatch{--accent:#cc79a7!important;--accent-2:#f4b9dd!important;--glow-s:rgba(204,121,167,.38)!important} -html[data-mf-color="safe"] body.sn-platform .mf-card-techtacular{--accent:#f0e442!important;--accent-2:#fff6a5!important;--glow-s:rgba(240,228,66,.36)!important} -html[data-mf-color="safe"] body.sn-platform .mf-card-devlab{--accent:#009e73!important;--accent-2:#8de2c6!important;--glow-s:rgba(0,158,115,.38)!important} -html[data-mf-color="safe"] body.sn-platform .mf-card-syntaxsaga{--accent:#0072b2!important;--accent-2:#9dd9fa!important;--glow-s:rgba(0,114,178,.38)!important} -html[data-mf-color="safe"] body.sn-platform .mf-card-codeescape{--accent:#e69f00!important;--accent-2:#ffd889!important;--glow-s:rgba(230,159,0,.38)!important} -html[data-mf-color="safe"] body.sn-platform .mf-card-serviceclash{--accent:#56b4e9!important;--accent-2:#b5e5ff!important;--glow-s:rgba(86,180,233,.38)!important} -html[data-mf-color="safe"] body.sn-platform .mf-card-bughunter{--accent:#d55e00!important;--accent-2:#ffb584!important;--glow-s:rgba(213,94,0,.38)!important} -html[data-mf-color="safe"] body.sn-platform .mf-card-networker{--accent:#0072b2!important;--accent-2:#9dd9fa!important;--glow-s:rgba(0,114,178,.38)!important} -html[data-mf-color="safe"] body.sn-platform .mf-card-finalprotocol{--accent:#999!important;--accent-2:#e1e1e1!important;--glow-s:rgba(190,190,190,.30)!important} +html[data-mf-color="safe"].sn-platform body .mf-card-mindmatch{--accent:#cc79a7!important;--accent-2:#f4b9dd!important;--glow-s:rgba(204,121,167,.38)!important} +html[data-mf-color="safe"].sn-platform body .mf-card-techtacular{--accent:#f0e442!important;--accent-2:#fff6a5!important;--glow-s:rgba(240,228,66,.36)!important} +html[data-mf-color="safe"].sn-platform body .mf-card-devlab{--accent:#009e73!important;--accent-2:#8de2c6!important;--glow-s:rgba(0,158,115,.38)!important} +html[data-mf-color="safe"].sn-platform body .mf-card-syntaxsaga{--accent:#0072b2!important;--accent-2:#9dd9fa!important;--glow-s:rgba(0,114,178,.38)!important} +html[data-mf-color="safe"].sn-platform body .mf-card-codeescape{--accent:#e69f00!important;--accent-2:#ffd889!important;--glow-s:rgba(230,159,0,.38)!important} +html[data-mf-color="safe"].sn-platform body .mf-card-serviceclash{--accent:#56b4e9!important;--accent-2:#b5e5ff!important;--glow-s:rgba(86,180,233,.38)!important} +html[data-mf-color="safe"].sn-platform body .mf-card-bughunter{--accent:#d55e00!important;--accent-2:#ffb584!important;--glow-s:rgba(213,94,0,.38)!important} +html[data-mf-color="safe"].sn-platform body .mf-card-networker{--accent:#0072b2!important;--accent-2:#9dd9fa!important;--glow-s:rgba(0,114,178,.38)!important} +html[data-mf-color="safe"].sn-platform body .mf-card-finalprotocol{--accent:#999!important;--accent-2:#e1e1e1!important;--glow-s:rgba(190,190,190,.30)!important} html[data-mf-mono="true"] body{filter:grayscale(1)}html[data-mf-links="true"] a{text-decoration:underline!important;text-underline-offset:.18em;text-decoration-thickness:.12em} html[data-mf-motion="false"] *,html[data-mf-motion="false"] *::before,html[data-mf-motion="false"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important} html[data-mf-cursor="true"],html[data-mf-cursor="true"] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M2 1v25l7-7 5 11 5-2-5-10h10z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 2 1,auto!important} diff --git a/src/main/resources/static/css/platform-neural.css b/src/main/resources/static/css/platform-neural.css index fcfbe7c..bc3b8e3 100644 --- a/src/main/resources/static/css/platform-neural.css +++ b/src/main/resources/static/css/platform-neural.css @@ -1,5 +1,5 @@ /* SysnaptiK Neural – Plattformhülle. Spielwelten werden über sn-platform bewusst nicht berührt. */ -body.sn-platform { +html.sn-platform body { --accent:#78d7a0; --accent-2:#b4ebc8; --accent-ink:#06130d; --secondary:#6fbbe8; --secondary-2:#9fd9f6; --bg:#030b0d; --bg-glow:radial-gradient(900px 560px at 58% -12%,rgba(73,183,135,.14),transparent 61%); @@ -14,7 +14,7 @@ body.sn-platform { radial-gradient(circle at 82% 8%,rgba(52,158,181,.10),transparent 29%), linear-gradient(135deg,#030b0d,#061216 54%,#02090b); } -body.sn-platform::before { +html.sn-platform body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55; background: radial-gradient(circle at 8% 12%,#78d7a0 0 1px,transparent 2px), @@ -24,39 +24,39 @@ body.sn-platform::before { linear-gradient(24deg,transparent 0 17%,rgba(120,215,160,.13) 17.1% 17.2%,transparent 17.3% 100%), linear-gradient(145deg,transparent 0 52%,rgba(104,185,221,.10) 52.1% 52.2%,transparent 52.3% 100%); } -body.sn-platform .mf-sidebar { background:linear-gradient(180deg,#061114,#071518); border-color:#17373a; } -body.sn-platform .mf-logo { gap:.8rem; } +html.sn-platform body .mf-sidebar { background:linear-gradient(180deg,#061114,#071518); border-color:#17373a; } +html.sn-platform body .mf-logo { gap:.8rem; } /* Das bestehende Emblem bleibt die Marke: seine verbundenen Punkte lesen sich bereits als neuronales Netz. Die Plattform ändert nur Farbe, Glow und Wortmarke. */ -body.sn-platform .mf-logo .mark, body.sn-platform .auth-head .mark, body.sn-platform .overlay-panel .o-emblem { +html.sn-platform body .mf-logo .mark, html.sn-platform body .auth-head .mark, html.sn-platform body .overlay-panel .o-emblem { background:#78d7a0; filter:drop-shadow(0 0 10px rgba(120,215,160,.65)); } -body.sn-platform .mf-logo .txt b { color:#e5f8ed; letter-spacing:.18em; font-size:.88rem; } -body.sn-platform .mf-logo .txt span { color:#78d7a0; letter-spacing:.25em; font-size:.53rem; } -body.sn-platform .mf-nav a.active { background:linear-gradient(100deg,rgba(120,215,160,.28),rgba(120,215,160,.12)); color:#e5f8ed; box-shadow:inset 0 0 0 1px rgba(180,235,200,.42),0 0 18px rgba(120,215,160,.18); } -body.sn-platform .mf-panel, body.sn-platform .mf-card, body.sn-platform .mf-profile { background:linear-gradient(145deg,rgba(10,29,32,.92),rgba(5,16,19,.94)); border-color:#193a3e; box-shadow:0 13px 28px rgba(0,0,0,.22); } -body.sn-platform .mf-card { overflow:hidden; } -body.sn-platform .mf-card::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.55; background:radial-gradient(circle at 90% 8%,color-mix(in srgb,var(--accent) 22%,transparent) 0 1px,transparent 2px),linear-gradient(132deg,transparent 0 45%,color-mix(in srgb,var(--accent) 12%,transparent) 45.2% 45.4%,transparent 45.6%); } -body.sn-platform .mf-card > * { position:relative; z-index:1; } -body.sn-platform .mf-card-mindmatch { --accent:#df68b9; --accent-2:#ffc0e7; --glow-s:rgba(223,104,185,.40); } -body.sn-platform .mf-card-techtacular { --accent:#d6db47; --accent-2:#f2f58a; --glow-s:rgba(214,219,71,.36); } -body.sn-platform .mf-card-devlab { --accent:#78d7a0; --accent-2:#b4ebc8; --glow-s:rgba(120,215,160,.40); } -body.sn-platform .mf-card-syntaxsaga { --accent:#9276f0; --accent-2:#d1c8ff; --glow-s:rgba(146,118,240,.40); } -body.sn-platform .mf-card-codeescape { --accent:#edcb4c; --accent-2:#fff0a8; --glow-s:rgba(237,203,76,.38); } -body.sn-platform .mf-card-serviceclash { --accent:#3abec5; --accent-2:#9de9e6; --glow-s:rgba(58,190,197,.38); } -body.sn-platform .mf-card-bughunter { --accent:#e85e68; --accent-2:#ffb6bd; --glow-s:rgba(232,94,104,.38); } -body.sn-platform .mf-card-networker { --accent:#55bdf0; --accent-2:#b2e7ff; --glow-s:rgba(85,189,240,.38); } -body.sn-platform .mf-card-finalprotocol { --accent:#ed7849; --accent-2:#ffd0b5; --glow-s:rgba(237,120,73,.38); } -body.sn-platform .mf-footer { background:rgba(3,11,13,.72); border-color:#173438; } -body.sn-platform .mf-center { min-height:100vh; position:relative; } -body.sn-platform .auth-container { background:linear-gradient(145deg,rgba(10,29,32,.98),rgba(4,14,17,.98)); border-color:rgba(120,215,160,.46); } -body.sn-platform .overlay { background:radial-gradient(520px 320px at 62% 18%,rgba(120,215,160,.20),transparent 62%),linear-gradient(150deg,#0a2224,#071416); } -body.sn-platform .overlay-panel .o-emblem { width:56px; height:56px; } -body.sn-platform .neon-btn { border-radius:10px; } -body.sn-platform .auth-head b { color:#78d7a0; } -body.sn-platform.finalflux-shell, body.sn-platform.finalflux-page { +html.sn-platform body .mf-logo .txt b { color:#e5f8ed; letter-spacing:.18em; font-size:.88rem; } +html.sn-platform body .mf-logo .txt span { color:#78d7a0; letter-spacing:.25em; font-size:.53rem; } +html.sn-platform body .mf-nav a.active { background:linear-gradient(100deg,rgba(120,215,160,.28),rgba(120,215,160,.12)); color:#e5f8ed; box-shadow:inset 0 0 0 1px rgba(180,235,200,.42),0 0 18px rgba(120,215,160,.18); } +html.sn-platform body .mf-panel, html.sn-platform body .mf-card, html.sn-platform body .mf-profile { background:linear-gradient(145deg,rgba(10,29,32,.92),rgba(5,16,19,.94)); border-color:#193a3e; box-shadow:0 13px 28px rgba(0,0,0,.22); } +html.sn-platform body .mf-card { overflow:hidden; } +html.sn-platform body .mf-card::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.55; background:radial-gradient(circle at 90% 8%,color-mix(in srgb,var(--accent) 22%,transparent) 0 1px,transparent 2px),linear-gradient(132deg,transparent 0 45%,color-mix(in srgb,var(--accent) 12%,transparent) 45.2% 45.4%,transparent 45.6%); } +html.sn-platform body .mf-card > * { position:relative; z-index:1; } +html.sn-platform body .mf-card-mindmatch { --accent:#df68b9; --accent-2:#ffc0e7; --glow-s:rgba(223,104,185,.40); } +html.sn-platform body .mf-card-techtacular { --accent:#d6db47; --accent-2:#f2f58a; --glow-s:rgba(214,219,71,.36); } +html.sn-platform body .mf-card-devlab { --accent:#78d7a0; --accent-2:#b4ebc8; --glow-s:rgba(120,215,160,.40); } +html.sn-platform body .mf-card-syntaxsaga { --accent:#9276f0; --accent-2:#d1c8ff; --glow-s:rgba(146,118,240,.40); } +html.sn-platform body .mf-card-codeescape { --accent:#edcb4c; --accent-2:#fff0a8; --glow-s:rgba(237,203,76,.38); } +html.sn-platform body .mf-card-serviceclash { --accent:#3abec5; --accent-2:#9de9e6; --glow-s:rgba(58,190,197,.38); } +html.sn-platform body .mf-card-bughunter { --accent:#e85e68; --accent-2:#ffb6bd; --glow-s:rgba(232,94,104,.38); } +html.sn-platform body .mf-card-networker { --accent:#55bdf0; --accent-2:#b2e7ff; --glow-s:rgba(85,189,240,.38); } +html.sn-platform body .mf-card-finalprotocol { --accent:#ed7849; --accent-2:#ffd0b5; --glow-s:rgba(237,120,73,.38); } +html.sn-platform body .mf-footer { background:rgba(3,11,13,.72); border-color:#173438; } +html.sn-platform body .mf-center { min-height:100vh; position:relative; } +html.sn-platform body .auth-container { background:linear-gradient(145deg,rgba(10,29,32,.98),rgba(4,14,17,.98)); border-color:rgba(120,215,160,.46); } +html.sn-platform body .overlay { background:radial-gradient(520px 320px at 62% 18%,rgba(120,215,160,.20),transparent 62%),linear-gradient(150deg,#0a2224,#071416); } +html.sn-platform body .overlay-panel .o-emblem { width:56px; height:56px; } +html.sn-platform body .neon-btn { border-radius:10px; } +html.sn-platform body .auth-head b { color:#78d7a0; } +html.sn-platform body.finalflux-shell, html.sn-platform body.finalflux-page { --accent:#f09043; --accent-2:#ffd0a2; --accent-ink:#251004; --glow-s:rgba(240,144,67,.40); --glow-w:rgba(240,144,67,.14); } -body.sn-platform .finalflux-shell, body.sn-platform.finalflux-shell, body.sn-platform.finalflux-page { background:transparent; } -@media (max-width:820px) { body.sn-platform .mf-sidebar { background:#061114; } } +html.sn-platform body .finalflux-shell, html.sn-platform body.finalflux-shell, html.sn-platform body.finalflux-page { background:transparent; } +@media (max-width:820px) { html.sn-platform body .mf-sidebar { background:#061114; } } diff --git a/src/main/resources/static/css/theme.css b/src/main/resources/static/css/theme.css index d7aea6e..0f84f42 100644 --- a/src/main/resources/static/css/theme.css +++ b/src/main/resources/static/css/theme.css @@ -1,3 +1,5 @@ +@import url('/css/platform-neural.css?v=2'); + /* ============================================================ MINDFLUX THEME – zentrale Design-Tokens + Komponenten "Back to the Future"-Palette diff --git a/src/main/resources/static/finalflux/ap1/datenschutz.html b/src/main/resources/static/finalflux/ap1/datenschutz.html index 1e0e58b..8918893 100644 --- a/src/main/resources/static/finalflux/ap1/datenschutz.html +++ b/src/main/resources/static/finalflux/ap1/datenschutz.html @@ -5,9 +5,9 @@