Adminator/geograsim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Glossar: 3 weitere Experimente + Watt-Leiter-Infografik

Browse Source 
- Treibhauseffekt-Slider (CO2-ppm 200..800 -> Temperatur-Anomalie via IPCC-Faustformel, Moleküle füllen Atmosphäre dynamisch, Thermometer visualisiert ΔT)
- Windrad-Höhenslider (0..260 m, 7 Vergleichsobjekte Mensch..modernes Windrad leuchten je nach Schieberstellung auf)
- Methan-GWP-Waage (CO2-Schale variabel 1..60 kg, Waage kippt physikalisch bis bei 28 kg Balance erreicht ist)
- kWh-Rennen: Fahrzeuge fahren jetzt von rechts nach links (plattformunabhängige Emoji-Orientierung), Animation auf 6,5s verlangsamt
- Watt-Leiter: neue gemeinsame Infografik (log-Skala 1 W..1 GW mit 6 Haushalts- und Kraftwerks-Beispielen), verknüpft mit watt/kilowatt/megawatt
- CSS für Slider-Experimente (.ge-gh-*), Waagen-Animation, Windrad-Highlighting

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Thomas
2026-04-19 00:52:39 +02:00
parent a425ce31e6
commit 22f5e9b686
3 changed files with 531 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App/pages/glossar.php
+45
View File
@@ -469,6 +469,51 @@ foreach ($modDb as $m) {
}
.ge-calc-scale { display: flex; justify-content: space-between; font-size: .65rem; color: var(--ggs-text-muted); margin-bottom: .3rem; }
.ge-calc-label { font-size: .75rem; color: var(--ggs-text); }
/* Slider-basierte Experimente (Treibhauseffekt, Windrad, Methan-Waage) */
.ge-gh-svg, .ge-wind-svg, .ge-bal-svg {
width: 100%; height: auto;
background: linear-gradient(180deg, #dae8ec 0%, #eff5f6 60%, var(--ggs-white) 100%);
border-radius: var(--ggs-radius-sm);
}
.ge-bal-svg { background: var(--ggs-white); }
.ge-gh-slider {
display: flex; flex-direction: column; gap: .3rem;
background: var(--ggs-white);
padding: .6rem .9rem;
border-radius: var(--ggs-radius-sm);
border: 1px solid var(--ggs-border);
}
.ge-gh-slider label {
font-size: .85rem; color: var(--ggs-text);
}
.ge-gh-slider label strong { color: var(--ggs-fjord-dark); font-size: 1rem; }
.ge-gh-slider input[type="range"] {
width: 100%; accent-color: var(--ggs-fjord); height: 28px;
}
.ge-gh-markers {
display: flex; justify-content: space-between;
font-size: .65rem; color: var(--ggs-text-muted); text-align: center;
line-height: 1.1;
}
.ge-gh-result { display: flex; gap: .5rem; flex-wrap: wrap; }
.ge-gh-pill {
background: var(--ggs-white);
border: 1.5px solid var(--ggs-border);
border-radius: var(--ggs-radius-pill);
padding: .4rem .9rem;
font-size: .82rem;
font-weight: 600;
color: var(--ggs-text);
}
.ge-gh-pill strong { color: var(--ggs-fjord-dark); }
.ge-gh-pill[data-state="good"] { border-color: var(--ggs-moss); color: var(--ggs-moss-dark); background: var(--ggs-moss-light); }
.ge-gh-pill[data-state="now"] { border-color: var(--ggs-fjord); color: var(--ggs-fjord-dark); background: var(--ggs-fjord-light); }
.ge-gh-pill[data-state="warn"] { border-color: var(--ggs-orange); color: var(--ggs-orange); background: #fbe8d3; }
.ge-gh-pill[data-state="bad"] { border-color: var(--ggs-coral); color: var(--ggs-coral); background: var(--ggs-coral-light); }
.ge-wind-obj { opacity: .45; transition: opacity .25s var(--ggs-ease), filter .25s var(--ggs-ease); }
.ge-wind-obj.ge-wind-active { opacity: 1; filter: drop-shadow(0 2px 6px rgba(74,124,138,.35)); }
.gl-detail-unit {
display: inline-block; font-size: .78rem; font-weight: 700; font-family: var(--ggs-font-mono);
color: var(--ggs-fjord-dark); background: var(--ggs-fjord-light);