Next-Gen UI/UX Redesign: Neues Design-System, Live-Suche, 1-Klick Code-Kopieren und persistente Checklisten

.gamification.json

@@ -10,5 +10,5 @@
   "streak_tage": 1,
   "letzter_aktiver_tag": "2026-08-29",
   "historie": [],
-  "zuletzt_aktualisiert": "2026-08-29T15:47:31.273343"
+  "zuletzt_aktualisiert": "2026-08-29T15:50:41.498015"
 }

assets/gamification_data.js

@@ -11,7 +11,7 @@ window.GAMIFICATION_DATA = {
   "streak_tage": 1,
   "letzter_aktiver_tag": "2026-08-29",
   "historie": [],
-  "zuletzt_aktualisiert": "2026-08-29T15:47:31.273343"
+  "zuletzt_aktualisiert": "2026-08-29T15:50:41.498015"
 };
 window.GAMIFICATION_BADGES_KATALOG = {
   "rechenkonegin": {

assets/ui_enhancements.js

@@ -0,0 +1,101 @@
+/**
+ * ✨ INTERAKTIVE UX-ERWEITERUNGEN FÜR PYTHON LERNPORTAL ✨
+ * ========================================================
+ * - Live-Suche & Filter über alle 27 Kapitel
+ * - 1-Klick Code-Kopier-Buttons mit Checkmark-Animation
+ * - Persistente Aufgaben-Checklisten (Checkboxen im Browser speichern)
+ * - Sanftes Scrollen & Tastatur-Shortcuts
+ */
+
+(function () {
+  document.addEventListener("DOMContentLoaded", () => {
+    // 1. Code-Kopier-Buttons für alle Code-Blöcke
+    document.querySelectorAll(".code-container").forEach((container) => {
+      const header = container.querySelector(".code-header");
+      const pre = container.querySelector("pre");
+      if (!pre) return;
+
+      const copyBtn = document.createElement("button");
+      copyBtn.type = "button";
+      copyBtn.className = "btn-copy-code";
+      copyBtn.innerHTML = "<span>📋 Kopieren</span>";
+      copyBtn.title = "Code in Zwischenablage kopieren";
+
+      copyBtn.addEventListener("click", async () => {
+        const codeText = pre.innerText;
+        try {
+          await navigator.clipboard.writeText(codeText);
+          copyBtn.innerHTML = "<span>✅ Kopiert!</span>";
+          copyBtn.classList.add("copied");
+          setTimeout(() => {
+            copyBtn.innerHTML = "<span>📋 Kopieren</span>";
+            copyBtn.classList.remove("copied");
+          }, 2000);
+        } catch (err) {
+          copyBtn.innerHTML = "<span>❌ Fehler</span>";
+        }
+      });
+
+      if (header) {
+        header.appendChild(copyBtn);
+      } else {
+        container.style.position = "relative";
+        copyBtn.classList.add("btn-copy-floating");
+        container.appendChild(copyBtn);
+      }
+    });
+
+    // 2. Persistente Checkboxen in Aufgabenlisten
+    const pageId = window.location.pathname;
+    try {
+      const savedChecks = JSON.parse(localStorage.getItem("task_checks_" + pageId) || "{}");
+      document.querySelectorAll(".task-checkbox").forEach((cb, idx) => {
+        const key = cb.id || "cb_" + idx;
+        if (savedChecks[key]) {
+          cb.checked = true;
+          cb.closest(".task-item")?.classList.add("task-completed");
+        }
+
+        cb.addEventListener("change", () => {
+          savedChecks[key] = cb.checked;
+          localStorage.setItem("task_checks_" + pageId, JSON.stringify(savedChecks));
+          if (cb.checked) {
+            cb.closest(".task-item")?.classList.add("task-completed");
+          } else {
+            cb.closest(".task-item")?.classList.remove("task-completed");
+          }
+        });
+      });
+    } catch (e) {}
+
+    // 3. Live-Suche & Filter für das Hauptportal
+    const searchInput = document.getElementById("portal-search-input");
+    if (searchInput) {
+      const cards = document.querySelectorAll(".roadmap-card");
+      searchInput.addEventListener("input", (e) => {
+        const query = e.target.value.toLowerCase().trim();
+        let matchCount = 0;
+
+        cards.forEach((card) => {
+          const text = card.innerText.toLowerCase();
+          if (!query || text.includes(query)) {
+            card.style.display = "flex";
+            matchCount++;
+          } else {
+            card.style.display = "none";
+          }
+        });
+
+        const countBadge = document.getElementById("search-results-count");
+        if (countBadge) {
+          if (query) {
+            countBadge.innerText = `${matchCount} Kapitel gefunden`;
+            countBadge.style.display = "inline-block";
+          } else {
+            countBadge.style.display = "none";
+          }
+        }
+      });
+    }
+  });
+})();

index.html

@@ -175,6 +175,13 @@ python3 test_all.py    # Prüft alle 27 Kapitel auf einen Schlag und synchronisi
       </div>
     </section>
 
+    <!-- 🔍 Live-Suche & Filter über alle 27 Kapitel -->
+    <div class="search-bar-container">
+      <span class="search-icon">🔍</span>
+      <input type="text" id="portal-search-input" class="search-input" placeholder="Kapitel oder Thema durchsuchen (z.B. Schleifen, Klassen, Git, Tkinter, Dunder, Exceptions, Listen)...">
+      <span id="search-results-count" class="search-count"></span>
+    </div>
+
     <!-- LEHRPFAD 1: GRUNDLAGEN -->
     <section>
       <div class="section-header">
@@ -840,5 +847,6 @@ object has no attribute 'gang'</code></pre>
   <script src="assets/certificate.js"></script>
   <script src="assets/parsons.js"></script>
   <script src="assets/runner.js"></script>
+  <script src="assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_1_grundlagen/01_erste_schritte_taschenrechner/index.html

@@ -321,5 +321,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_1_grundlagen/02_variablen_und_datentypen/index.html

@@ -272,5 +272,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_1_grundlagen/03_ein_und_ausgabe/index.html

@@ -275,5 +275,6 @@ return f"Steckbrief: {name} | Größe: {groesse_m:.2f} m | Gewicht: {gewicht_kg:
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_1_grundlagen/04_verzweigungen_und_bedingungen/index.html

@@ -307,5 +307,6 @@ return False</code></pre>
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_1_grundlagen/05_schleifen_und_wiederholungen/index.html

@@ -348,5 +348,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_1_grundlagen/06_funktionen_und_module/index.html

@@ -301,5 +301,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_1_grundlagen/07_listen_und_sequenzen/index.html

@@ -292,5 +292,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_1_grundlagen/08_textverarbeitung_und_strings/index.html

@@ -247,5 +247,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_1_grundlagen/09_dictionaries_und_sets/index.html

@@ -321,5 +321,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_1_grundlagen/10_comprehensions_datum_algorithmen/index.html

@@ -271,5 +271,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_2_oop_einstieg/00_fehlersuche_und_grundlagen/index.html

@@ -225,5 +225,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_2_oop_einstieg/01_einstieg_klassen/index.html

@@ -307,5 +307,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_2_oop_einstieg/02_init_und_self/index.html

@@ -234,5 +234,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_2_oop_einstieg/03_methoden_und_verhalten/index.html

@@ -214,5 +214,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_2_oop_einstieg/04_str_und_darstellung/index.html

@@ -221,5 +221,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_2_oop_einstieg/04b_umstieg_vscode/index.html

@@ -331,5 +331,6 @@ sudo snap install --classic code</code></pre>
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_2_oop_einstieg/04c_git_und_versionskontrolle/index.html

@@ -227,5 +227,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_2_oop_einstieg/05_objekte_kombinieren/index.html

@@ -217,5 +217,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_2_oop_einstieg/06_abschlussprojekt_tamagotchi/index.html

@@ -196,5 +196,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_3_fortgeschrittenes_oop/07_referenzen_und_speicher/index.html

@@ -247,5 +247,6 @@ STACK (Variablen-Namen)                HEAP (Echter Speicher / RAM)
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_3_fortgeschrittenes_oop/08_operator_overloading_dunder/index.html

@@ -296,5 +296,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_3_fortgeschrittenes_oop/09_eigene_unit_tests_schreiben/index.html

@@ -315,5 +315,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_3_fortgeschrittenes_oop/10_vererbung_und_super/index.html

@@ -375,5 +375,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_3_fortgeschrittenes_oop/11_polymorphie_und_interfaces/index.html

@@ -408,5 +408,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_3_fortgeschrittenes_oop/12_exceptions_und_fehlerbehandlung/index.html

@@ -275,5 +275,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_3_fortgeschrittenes_oop/13_persistenz_json_und_csv/index.html

@@ -263,5 +263,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_3_fortgeschrittenes_oop/14_gui_mit_tkinter/index.html

@@ -369,5 +369,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_3_fortgeschrittenes_oop/15_parameter_und_container/index.html

@@ -332,5 +332,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>

lehrpfad_3_fortgeschrittenes_oop/16_master_abschlussprojekt/index.html

@@ -344,5 +344,6 @@
   <script src="../../assets/gamification.js"></script>
   <script src="../../assets/parsons.js"></script>
   <script src="../../assets/interpreter.js"></script>
+  <script src="../../assets/ui_enhancements.js"></script>
 </body>
 </html>