Glossar visuell komplett: 162 Bilder, 13 Kapitel-Icons, 12 interaktive Widgets

- 162 neue Glossar-Bilder (Flat-Scandinavian, gpt-image-1) → alle 402 Einträge bebildert; image_path-Update: App/Don_t_Deploy/2026-07-16-glossar-bilder.sql - 13 Kapitel-Icons (icon-<id>.webp) ersetzen die Emojis in Buch-Übersicht + Kapitel-h1 (buchKapIcon-Helper mit Emoji-Fallback) - 12 interaktive Glossar-Experimente in 2 Modulen: natur (Mondrotation, Kernschatten, Keeling-Kurve, Pegel/HQ100, Wärmeausdehnung, Klimaträgheit) + wirtschaft (Preiselastizität, Engpass, Skaleneffekt, Modal Split, Netzfrequenz/Hertz, Lageenergie/Pumpspeicher); Registry via Object.assign, Script-Einbindung in glossar.php Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-16 00:59:30 +02:00
parent 78a1cdca24
commit c4276083a2
196 changed files with 1752 additions and 17 deletions
@@ -38,6 +38,16 @@ function buchBild(string $slug, string $vorschlag, string $unterschrift = '', bo
    return "<div class=\"b-foto-platzhalter\"><span>📷</span><b>Foto gesucht</b><small>" . htmlspecialchars($vorschlag) . "</small><code>assets/img/buch/" . BUCH_SIM . "/{$slug}.jpg</code></div>";
 }

+/** Kapitel-Symbol: generiertes Icon-Bild, solange keins da ist das Emoji. */
+function buchKapIcon(string $emoji): string {
+    global $bp;
+    $rel = 'assets/img/buch/icon-' . BUCH_SIM . '.webp';
+    if (is_file(__DIR__ . '/../../' . $rel)) {
+        return '<img class="b-kapicon" src="' . $bp . '/' . $rel . '" alt="">';
+    }
+    return $emoji;
+}
+
 /** Glossar-Begriff mit Tooltip */
 function g(string $slug, string $label): string {
    return "<span class=\"ggs-g\" data-glossar=\"{$slug}\">{$label}</span>";
@@ -41,7 +41,7 @@ require __DIR__ . '/_partials/buch_helpers.php';
 <section class="b-seite">
  <span class="b-nr">BUSFAHRT · KAPITEL-START</span>
  <p class="b-kicker">Geografie und wirtschaftliche Bildung · Sek I</p>
-  <h1>🚌 Mit dem Bus durch Europa</h1>
+  <h1><?= buchKapIcon('🚌') ?> Mit dem Bus durch Europa</h1>

 <?php if ($LEICHT): ?>
  <p class="b-leitfrage">Wie gut kennst du Europa?<br>
@@ -41,7 +41,7 @@ require __DIR__ . '/_partials/buch_helpers.php';
 <section class="b-seite">
  <span class="b-nr">ENERGIEMANAGER · KAPITEL-START</span>
  <p class="b-kicker">Geografie und wirtschaftliche Bildung · Sek I</p>
-  <h1>⚡ Strom rund um die Uhr</h1>
+  <h1><?= buchKapIcon('⚡') ?> Strom rund um die Uhr</h1>

 <?php if ($LEICHT): ?>
  <p class="b-leitfrage">Du drückst den Licht-Schalter. Das Licht geht an.<br>
@@ -41,7 +41,7 @@ require __DIR__ . '/_partials/buch_helpers.php';
 <section class="b-seite">
  <span class="b-nr">EU-WERKSTATT · KAPITEL-START</span>
  <p class="b-kicker">Geografie und wirtschaftliche Bildung · Politische Bildung · Sek I</p>
-  <h1>🇪🇺 Wie ein EU-Gesetz entsteht</h1>
+  <h1><?= buchKapIcon('🇪🇺') ?> Wie ein EU-Gesetz entsteht</h1>

 <?php if ($LEICHT): ?>
  <p class="b-leitfrage">Wer entscheidet in Europa?<br>
@@ -41,7 +41,7 @@ require __DIR__ . '/_partials/buch_helpers.php';
 <section class="b-seite">
  <span class="b-nr">LANDWIRTSCHAFT · KAPITEL-START</span>
  <p class="b-kicker">Geografie und wirtschaftliche Bildung · Sek I</p>
-  <h1>🌾 Landwirtschaft weltweit</h1>
+  <h1><?= buchKapIcon('🌾') ?> Landwirtschaft weltweit</h1>

 <?php if ($LEICHT): ?>
  <p class="b-leitfrage">Warum wächst die Banane in Ecuador?<br>
@@ -41,7 +41,7 @@ require __DIR__ . '/_partials/buch_helpers.php';
 <section class="b-seite">
  <span class="b-nr">FLUSS · KAPITEL-START</span>
  <p class="b-kicker">Geografie und wirtschaftliche Bildung · Sek I</p>
-  <h1>🌊 Der Fluss und das Hochwasser</h1>
+  <h1><?= buchKapIcon('🌊') ?> Der Fluss und das Hochwasser</h1>

 <?php if ($LEICHT): ?>
  <p class="b-leitfrage">Warum tritt ein Fluss über das Ufer?<br>
@@ -41,7 +41,7 @@ require __DIR__ . '/_partials/buch_helpers.php';
 <section class="b-seite">
  <span class="b-nr">HELI-NAVIGATION · KAPITEL-START</span>
  <p class="b-kicker">Geografie und wirtschaftliche Bildung · Sek I</p>
-  <h1>🚁 Mit Karte und Koordinaten</h1>
+  <h1><?= buchKapIcon('🚁') ?> Mit Karte und Koordinaten</h1>

 <?php if ($LEICHT): ?>
  <p class="b-leitfrage">Ein Mensch ist in den Bergen verletzt.<br>
@@ -42,7 +42,7 @@ require __DIR__ . '/_partials/buch_helpers.php';
 <section class="b-seite">
  <span class="b-nr">KLIMAWÄCHTER · KAPITEL-START</span>
  <p class="b-kicker">Geografie und wirtschaftliche Bildung · Sek I</p>
-  <h1>🌍 Klimawandel an der Küste</h1>
+  <h1><?= buchKapIcon('🌍') ?> Klimawandel an der Küste</h1>

 <?php if ($LEICHT): ?>
  <p class="b-leitfrage">Die Erde wird wärmer. Das Meer steigt.<br>
@@ -43,7 +43,7 @@ require __DIR__ . '/_partials/buch_helpers.php';
 <section class="b-seite">
  <span class="b-nr">KOFFERDETEKTIV · KAPITEL-START</span>
  <p class="b-kicker">Geografie und wirtschaftliche Bildung · Sek I</p>
-  <h1>🧳 Dem Reisen auf der Spur</h1>
+  <h1><?= buchKapIcon('🧳') ?> Dem Reisen auf der Spur</h1>

 <?php if ($LEICHT): ?>
  <p class="b-leitfrage">Ein Koffer bleibt am Flughafen liegen.<br>
@@ -41,7 +41,7 @@ require __DIR__ . '/_partials/buch_helpers.php';
 <section class="b-seite">
  <span class="b-nr">LOGISTIK · KAPITEL-START</span>
  <p class="b-kicker">Geografie und wirtschaftliche Bildung · Sek I</p>
-  <h1>🚚 Waren auf Reisen</h1>
+  <h1><?= buchKapIcon('🚚') ?> Waren auf Reisen</h1>

 <?php if ($LEICHT): ?>
  <p class="b-leitfrage">Wie kommt die Ware in den Super-Markt?<br>
@@ -42,7 +42,7 @@ require __DIR__ . '/_partials/buch_helpers.php';
 <section class="b-seite">
  <span class="b-nr">SONNENSYSTEM · KAPITEL-START</span>
  <p class="b-kicker">Geografie und wirtschaftliche Bildung · Physik · Sek I</p>
-  <h1>🪐 Sonne, Erde, Mond</h1>
+  <h1><?= buchKapIcon('🪐') ?> Sonne, Erde, Mond</h1>

 <?php if ($LEICHT): ?>
  <p class="b-leitfrage">Warum gibt es Tag und Nacht?<br>
@@ -41,7 +41,7 @@ require __DIR__ . '/_partials/buch_helpers.php';
 <section class="b-seite">
  <span class="b-nr">TOURISMUSREGION · KAPITEL-START</span>
  <p class="b-kicker">Geografie und wirtschaftliche Bildung · Sek I</p>
-  <h1>🗺️ Besucherströme lenken</h1>
+  <h1><?= buchKapIcon('🗺️') ?> Besucherströme lenken</h1>

 <?php if ($LEICHT): ?>
  <p class="b-leitfrage">Warum sind an manchen Orten so viele Menschen?<br>
@@ -41,7 +41,7 @@ require __DIR__ . '/_partials/buch_helpers.php';
 <section class="b-seite">
  <span class="b-nr">TOURISMUSTAL · KAPITEL-START</span>
  <p class="b-kicker">Geografie und wirtschaftliche Bildung · Sek I</p>
-  <h1>🏔️ Ein Tal wird Tourismusregion</h1>
+  <h1><?= buchKapIcon('🏔️') ?> Ein Tal wird Tourismusregion</h1>

 <?php if ($LEICHT): ?>
  <p class="b-leitfrage">Wie wird aus einem stillen Berg-Tal ein Urlaubs-Ort?<br>
@@ -41,7 +41,7 @@ require __DIR__ . '/_partials/buch_helpers.php';
 <section class="b-seite">
  <span class="b-nr">WELTKÜCHE · KAPITEL-START</span>
  <p class="b-kicker">Geografie und wirtschaftliche Bildung · Sek I</p>
-  <h1>🍲 Was die Welt isst</h1>
+  <h1><?= buchKapIcon('🍲') ?> Was die Welt isst</h1>

 <?php if ($LEICHT): ?>
  <p class="b-leitfrage">Woher kommt das Essen auf deinem Teller?<br>
@@ -72,6 +72,7 @@ $KAPITEL = [
    text-decoration: none; color: inherit; }
  .kap:hover { box-shadow: 0 6px 22px rgba(47,62,70,.18); }
  .kap .ic { font-size: 34px; }
+  .kap img.ic { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
  .kap b { font-size: 18px; display: block; }
  .kap small { color: #6b6659; display: block; margin-top: 3px; line-height: 1.5; }
  .kap .pill { margin-left: auto; align-self: center; font-size: 11px; font-weight: 800;
@@ -102,7 +103,11 @@ $KAPITEL = [
    <?php else: ?>
      <div class="kap" style="opacity:.6">
    <?php endif; ?>
-      <span class="ic"><?= $k['icon'] ?></span>
+      <?php if (is_file(__DIR__ . '/../assets/img/buch/icon-' . $k['id'] . '.webp')): ?>
+        <img class="ic" src="<?= $bp ?>/assets/img/buch/icon-<?= $k['id'] ?>.webp" alt="">
+      <?php else: ?>
+        <span class="ic"><?= $k['icon'] ?></span>
+      <?php endif; ?>
      <span>
        <b><?= $k['titel'] ?></b>
        <small>Zur Simulation „<?= $k['sim'] ?>" · <?= $k['themen'] ?></small>
@@ -644,6 +644,8 @@ include __DIR__ . '/_partials/erkundungs_subnav.php';
 </div>

 <script src="<?= $bp ?>/assets/js/glossar-experiments.js?v=<?= @filemtime(__DIR__ . '/../assets/js/glossar-experiments.js') ?: time() ?>"></script>
+<script src="<?= $bp ?>/assets/js/glossar-experiments-natur.js?v=<?= @filemtime(__DIR__ . '/../assets/js/glossar-experiments-natur.js') ?: time() ?>"></script>
+<script src="<?= $bp ?>/assets/js/glossar-experiments-wirtschaft.js?v=<?= @filemtime(__DIR__ . '/../assets/js/glossar-experiments-wirtschaft.js') ?: time() ?>"></script>

 <footer class="gl-footer">
  <img src="<?= $bp ?>/assets/img/bildLogo.png" alt="">