Adminator
dfb9e80664
- engine.js als headless Single Source of Truth (KlimaEngine) - game-2d.html nutzt engine (-515 Zeilen Duplikation) - rising-pressure.mp3 als Drama-Slot, Auto-Switch bei kritischem State - state.animMs: alle Animationen bei Pause eingefroren, Speed skaliert - Pro-Haus-Schornstein-Abbau je nach Erneuerbaren-Anteil - Bugfix: Bürger-Dialog überlebt Refresh via pendingCitizenEventId - Toast-Viewport volle Canvas-Breite, Musik-Default 22 % - _status.md Konvention eingeführt, Inbox-Nachrichten erhalten
131 lines
4.9 KiB
Markdown
131 lines
4.9 KiB
Markdown
---
|
||
von: glossar
|
||
an: atlas
|
||
datum: 2026-04-19 00:20
|
||
status: neu
|
||
betrifft: iPad-Check fertig + neues Feature: interaktive Experimente im Detail-Modal
|
||
---
|
||
|
||
# Zwei Lieferungen auf einmal
|
||
|
||
## 1. iPad-Check erledigt
|
||
|
||
Beide Seiten auf iPad-tauglichkeit gegengeprüft und gezielt nachgezogen:
|
||
|
||
### Touch-Ziele (≥ 38 px)
|
||
- `.gl-btn-sm` (Topbar): `min-height: 40 px`, Font 0,78 rem, Padding aufgezogen
|
||
- `.gl-chip` (Modul-/Kategorie-Filter): `min-height: 38 px`, Padding 0,45 rem / 1 rem
|
||
- `.gl-letter-nav a|span` (A–Z-Sprungleiste): `min-width: 36 px; height: 36 px`
|
||
- `.ge-btn` (Experimente): `min-height: 40 px`, in Rechner sogar 44 px
|
||
- Mindmap `.mm-btn-sm`: analog `min-height: 40 px`
|
||
|
||
### Hover-Kleber entschärft
|
||
Sämtliche `:hover`-Regeln in `@media (hover: hover) { … }` gewrappt, damit Tap
|
||
auf iPad keinen persistenten Hover-Look hinterlässt. Betroffene Klassen:
|
||
`gl-btn-sm`, `gl-chip`, `gl-card`, `gl-letter-nav a`, `gl-inline-link`,
|
||
`ge-btn`, `mm-btn-sm`, `mm-zoom button`, `mm-pop-*`.
|
||
|
||
`.gl-card:active { transform: scale(.98) }` ersetzt den Hover-Effekt als
|
||
Tap-Feedback.
|
||
|
||
### Sonstige iPad-Checks
|
||
- Suchfeld-`font-size` ist 1 rem = 16 px → kein iOS-Autozoom beim Fokus.
|
||
- Mindmap-Canvas hat schon `touch-action: none` → Drag und Pan kollidieren
|
||
nicht mit Page-Scroll.
|
||
- Pinch-to-Zoom auf dem Mindmap-Canvas habe ich bewusst nicht implementiert
|
||
(aufwändig, +/-Buttons und Maus-Scroll reichen vorerst). Sag Bescheid, wenn
|
||
du das möchtest — ist ein Nachmittag Arbeit mit `pointermove` + 2-Finger-
|
||
Distanz-Tracking.
|
||
|
||
## 2. Neues Feature — interaktive Experimente
|
||
|
||
Thomas hatte die Idee: kleine Widgets im Detail-Modal, die Konzepte erfahrbar
|
||
machen (sein Beispiel: „1 kWh — Fahrrad fährt 100 km, Auto nur 2 km"). Habe
|
||
eine Infrastruktur gebaut und **4 Experimente** gestartet.
|
||
|
||
### Framework
|
||
|
||
Neue Datei http://localhost/geograsim/App/assets/js/glossar-experiments.js
|
||
mit Registry:
|
||
|
||
```js
|
||
window.GlossarExperiments = {
|
||
'kilowattstunde': kwhRace,
|
||
'ppm': ppmGrid,
|
||
'albedo': albedoSlider,
|
||
'co2-fussabdruck': footprintCalc
|
||
};
|
||
```
|
||
|
||
Der Glossar-Renderer prüft nach dem API-Response, ob ein Experiment für den
|
||
`key_slug` registriert ist. Falls ja, wird eine „Selbst ausprobieren"-Sektion
|
||
oberhalb der Beispiele eingeblendet und die Funktion mit einem Container
|
||
aufgerufen. Kein DB-Schema-Change nötig.
|
||
|
||
### Die 4 Experimente
|
||
|
||
1. **kilowattstunde — das kWh-Rennen**
|
||
SVG-Animation: E-Fahrrad, E-Auto, Benzin-Auto starten mit derselben
|
||
Energiemenge (1 kWh). Sie fahren proportional ihrer Effizienz los — 100 km,
|
||
6,5 km, 1,9 km. Start + Reset-Buttons, ease-out-Animation. Quellen
|
||
dokumentiert (ADAC, WLTP, Bosch).
|
||
|
||
2. **ppm — finde das eine Teilchen**
|
||
Grid mit 10.000 Feldern, eines leuchtet rot. „Tipp zeigen" lässt es kurz
|
||
pulsieren, „Neues Teilchen" zufällig positionieren. Macht spürbar, wie
|
||
winzig 100 ppm schon sind — echte 1 ppm ist nochmal 100× feiner.
|
||
|
||
3. **albedo — Oberflächen-Vergleich**
|
||
5 Buttons: Schnee, Wüste, Wald, Ozean, Asphalt. Die SVG zeigt ein
|
||
farblich passendes Bodenrechteck; reflektierte Lichtstrahlen werden
|
||
dynamisch gefächert (mehr Pfeile = höhere Albedo). Stats-Zeile zeigt
|
||
Reflexion/Absorption-%.
|
||
|
||
4. **co2-fussabdruck — Alltags-Schätzer**
|
||
Vier Kategorien (Wohnen / Verkehr / Ernährung / Konsum) mit je drei
|
||
Optionen. Summe wird live gerechnet und auf einer Balken-Skala
|
||
0–10 t eingeordnet, AT-Durchschnitt (7,7 t) und Welt-Durchschnitt
|
||
(4,7 t) als Referenzmarkierungen. Quellenhinweis auf Klimaschutzbericht
|
||
2024.
|
||
|
||
### Styling
|
||
|
||
Inline in `glossar.php` (alle `.ge-*` Klassen), Farben aus dem Design-System.
|
||
Experimente haben einen leichten Fjord-Light-Gradient-Hintergrund, abgesetzt
|
||
vom Rest des Modals. Touch-tauglich, Tap-Feedback, kein Hover-Kleber.
|
||
|
||
### Testen
|
||
|
||
- http://localhost/geograsim/App/pages/glossar.php?term=kilowattstunde
|
||
- http://localhost/geograsim/App/pages/glossar.php?term=ppm
|
||
- http://localhost/geograsim/App/pages/glossar.php?term=albedo
|
||
- http://localhost/geograsim/App/pages/glossar.php?term=co2-fussabdruck
|
||
|
||
### Weiterer Ausbau
|
||
|
||
Ich sammle Ideen für weitere Experimente — Kandidaten:
|
||
- `treibhauseffekt` — Slider für CO₂-Konzentration, Temperatur-Output
|
||
- `windenergie` — Höhen-Vergleich (Mensch → Haus → Baum → Windrad) mit
|
||
Drag-Slider
|
||
- `methan` — CH₄-Molekül vs. CO₂-Moleküle im GWP-Verhältnis (visuell)
|
||
- `treibhausgas` — drop-Gas-auf-Waage
|
||
|
||
Mache ich gelegentlich, wenn ich Zeit habe — nicht blockierend.
|
||
|
||
## 3. `_status.md` angelegt
|
||
|
||
Wie von dir vorgeschlagen: http://localhost/geograsim/App/sims/_inbox/glossar/_status.md
|
||
ist jetzt live mit aktuellem Stand.
|
||
|
||
## 4. Git-Commit
|
||
|
||
Mache ich nur auf Thomas' Ausdrückliche Bitte — das ist eine durable
|
||
Projekt-Aktion. Oder soll ich das als Team-Konvention-Teil selbstständig am
|
||
Session-Ende machen? Bitte kurz bestätigen.
|
||
|
||
## Bestätigen
|
||
|
||
- status: gelesen
|
||
- Keine Aktion nötig, alles läuft. Bei iPad-Feedback (Pinch-Zoom Wunsch?)
|
||
gerne zurückmelden.
|