Web 0.15.3: VisuBot-Orange wie auf visucode.de

CHANGELOG.md

@@ -7,6 +7,7 @@ The format is loosely inspired by Keep a Changelog.
 ## [Unreleased]
 
 ### Changed
+- **Web 0.15.3, VisuBot orange like visucode.de:** the VisuBot theme in the app used #e07000 (buttons, selection, focus) and #f08a00 („Bot“ in the title bar), the visucode.de start page uses #c2410c with the gradient #ea580c → #c2410c (css/visucode.css, MARKE.md). The app now uses the same values; white text on the accent goes from 3.2 : 1 to 5.2 : 1. The command group „Fahren“ (stripe and dot) moves from the old VisuBot orange #d96a00 to #c2410c as well.
 
 - **Web 0.15.2, checklist and quiz always in their own steps:** every lesson in both worlds now ends with its own „Checkliste“ step followed by its own „Wissenstest“ step, after at least one game (Holger: VisuBot lesson 1 step 5 had both in one step before 0.14.33). Three robot lessons still lacked a final quiz step: L2 „Der mBot2“ (game „Sensor oder Aktor?“ moves into its own step before the checklist, the quiz from „Sensoren und Aktoren“ moves to the new „Wissenstest“ and gets six more questions, one per checklist item), L3 „Das Quadrat“ and L27 „Eigene Methoden“ (new „Wissenstest“ with five questions each; the small quizzes inside the steps stay). de/en. A new test (`web/test/lessonEnd.ts`, used by lessons.test.ts and visubotLessons.test.ts) fails if the checklist shares a step with anything else, if the quiz is not alone in the last step, or if no game comes before the checklist. Saved self-assessments in L2 start fresh because steps moved.
 - **Web 0.15.1, third hint and robot game moved:** eight harder exercises get a third hint that gives the outline of the solution box by box (L9 Schaltjahr, L10 Taschenrechner, L12 Summe bis 0, L14 Rechteck, L15 Summe und Maximum, L17 Rückwärts and Wörter zählen, L19 Absteigend sortieren; de/en/pt, with the variable names of each language). Students working alone are no longer stuck after two hints; the sample solution stays teacher-only. VisuBot: the game „Wo landet der mBot2?“ moves from lesson 1 „Struktogramm und Editor“ (where the commands with numbers in brackets were not explained yet) to lesson 2 „Der mBot2“, right after „Befehle für den mBot2“ and „Erste Fahrt“ (de/en). Saved step positions in these two lessons may shift by one.

web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "visustruct-web",
   "private": true,
-  "version": "0.15.2",
+  "version": "0.15.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

web/src/ui/styles.css

@@ -14,19 +14,20 @@
   color-scheme: light;
 }
 
-/* VisuBot-Modus: Farben aus dem VisuBot-Logo (Navy, Orange, Lila) */
+/* VisuBot-Modus: Navy und Lila aus dem VisuBot-Logo, Orange wie auf visucode.de
+   (Vollton #c2410c, Verlauf #ea580c → #c2410c; weiße Schrift darauf 5,2 : 1) */
 :root.visubot-theme {
   --bg: #f1f0f8;
   --text: #2f3454;
   --muted: #6a6890;
   --border: #d6d3e8;
-  --accent: #e07000;
-  --accent-soft: rgba(253, 161, 21, 0.24);
-  --accent-faint: rgba(253, 161, 21, 0.1);
-  --accent-glow: rgba(224, 112, 0, 0.35);
+  --accent: #c2410c;
+  --accent-soft: rgba(234, 88, 12, 0.2);
+  --accent-faint: rgba(234, 88, 12, 0.08);
+  --accent-glow: rgba(194, 65, 12, 0.35);
 }
 :root.visubot-theme .selection-frame {
-  stroke: rgba(224, 112, 0, 0.9);
+  stroke: rgba(194, 65, 12, 0.9);
 }
 
 * {
@@ -363,7 +364,12 @@ dialog.about h2 {
   margin: -4px 0;
 }
 .visubot-bot {
-  color: #f08a00;
+  /* wie der Schriftzug „Bot“ auf visucode.de */
+  color: #c2410c;
+  background: linear-gradient(90deg, #ea580c, #c2410c);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
   margin-left: -8px;
 }
 .brand small {
@@ -6343,7 +6349,7 @@ button.danger-text:not(:disabled) {
 
 /* VisuBot-Befehle nach Gruppen: Streifen links in der Palette, Punkt an der Gruppe und im Nachschlagen.
    Die Kästen bleiben gelb (Anweisung); mit „Blöcke farbig“ aus gehen auch die Streifen aus. */
-[data-bot-color='fahren'], .bot-fahren { --bot: #d96a00; }
+[data-bot-color='fahren'], .bot-fahren { --bot: #c2410c; }
 [data-bot-color='licht'], .bot-licht { --bot: #84cc16; }
 [data-bot-color='ton'], .bot-ton { --bot: #c026d3; }
 [data-bot-color='anzeige'], .bot-anzeige { --bot: #4f46e5; }