diff --git a/App/assets/img/glossar/watt-leiter.svg b/App/assets/img/glossar/watt-leiter.svg new file mode 100644 index 0000000..1ee7eea --- /dev/null +++ b/App/assets/img/glossar/watt-leiter.svg @@ -0,0 +1,180 @@ + + + + + + + + + + + + + Die Leistungs-Leiter — Watt, Kilowatt, Megawatt, Gigawatt im Überblick + + + Logarithmische Skala · jeder Schritt = 10× mehr Leistung · Beispiele gerundet + + + + + + + + + + + + + + + + + 💡 + LED-Lampe + 5–10 W + + + + + + + 🚶 + Mensch beim Gehen + ≈ 100 W Muskelkraft + + + + + + + 🫖 + Wasserkocher + 2 kW = 2.000 W + + + + + + + 🚗 + E-Auto-Motor + 150 kW · 0,15 MW + + + + + + + 🌬 + Modernes Windrad + 3–6 MW + + + + + + + ⚛ + AKW-Block + 1.400 MW = 1,4 GW + + + + + + + + + + 1 W + 100 Watt + + + + + + 10 W + + + + + + 100 W + + + + + + 1 kW + 1.000 W + + + + + + 10 kW + + + + + + 100 kW + + + + + + 1 MW + 1.000 kW · 1.000.000 W + + + + + + 10 MW + + + + + + 100 MW + + + + + + 1 GW + 1.000 MW · 1 Mrd. W + + + + + + 📱 Handy-Ladegerät + 20 W — zwischen LED und Mensch + + + + 🏠 Hausdach-Solaranlage + 10 kWp — deckt 2 Haushalte + + + + ⚡ Kraftwerk Freudenau (Donau) + 172 MW — 230.000 Haushalte + + + + 🇦🇹 Österreich gesamt installiert + ~29.000 MW = 29 GW + + + + + + + Quellen: + E-Control Betriebsstatistik Strom 2023 · IG Windkraft Österreich · Hersteller-Angaben Haushaltsgeräte · Physik-Richtwert Muskelarbeit + + diff --git a/App/assets/js/glossar-experiments.js b/App/assets/js/glossar-experiments.js index bb3551b..7d7e852 100644 --- a/App/assets/js/glossar-experiments.js +++ b/App/assets/js/glossar-experiments.js @@ -347,11 +347,313 @@ update(); } + // ===================================================================== + // Experiment: Treibhauseffekt-Slider — CO₂-ppm → globale Erwärmung + // ===================================================================== + function greenhouseSlider(root) { + root.innerHTML = ` +
+
+

🌡 Wie viel CO₂ verträgt das Klima?

+

Schiebe den Regler und beobachte, wie sich die Atmosphäre füllt und die Erde wärmer wird.

+
+ +
+ + +
+ 200280
1750420
heute560
Verdopplung800 +
+
+
+
Temperaturanstieg gegenüber 1850: +1,2 °C
+
nahe heutiger Wert
+
+

Vereinfachte Faustformel: ΔT = 3 °C × log₂(CO₂ / 280 ppm). Das bildet die IPCC-Klimasensitivität (rund 3 °C pro Verdopplung) grob ab. Quellen: IPCC AR6 WG1 Kap. 7 · NOAA Mauna Loa.

+
+ `; + const svg = root.querySelector('.ge-gh-svg'); + const rng = root.querySelector('#ge-gh-range'); + const ppmOut = root.querySelector('#ge-gh-ppm'); + const dtOut = root.querySelector('#ge-gh-dt'); + const verdict = root.querySelector('#ge-gh-verdict'); + + // Statisches Szenen-Layout + // Sonne + svgEl('circle', { cx: 90, cy: 55, r: 28, fill: '#f4c94e' }, svg); + svgEl('text', { x: 90, y: 62, 'text-anchor': 'middle', 'font-size': '22' }, svg).textContent = '☀'; + // Atmosphäre (gradient wird per Opacity per Zustand gesteuert) + const sky = svgEl('rect', { x: 0, y: 30, width: 600, height: 190, fill: '#4a7c8a', opacity: '0.15' }, svg); + // Erdoberfläche + const earth = svgEl('rect', { x: 0, y: 220, width: 600, height: 80, fill: '#5a8a5e' }, svg); + // Baum und Haus dekorativ + svgEl('polygon', { points: '100,220 115,195 130,220', fill: '#3a6b3e' }, svg); + svgEl('rect', { x: 112, y: 220, width: 6, height: 10, fill: '#6b4a2e' }, svg); + svgEl('rect', { x: 470, y: 198, width: 36, height: 22, fill: '#e8d5b5', stroke: '#1f4e5a', 'stroke-width': '1' }, svg); + svgEl('polygon', { points: '468,199 488,182 508,199', fill: '#c85c4a' }, svg); + // Container für dynamische Moleküle + const molGroup = svgEl('g', { class: 'ge-gh-mols' }, svg); + // Temperatur-Anzeige rechts oben + const thermo = svgEl('g', { transform: 'translate(540, 40)' }, svg); + svgEl('rect', { x: -10, y: 0, width: 20, height: 140, fill: '#fff', stroke: '#1f4e5a', rx: '10' }, thermo); + const mercury = svgEl('rect', { x: -6, y: 130, width: 12, height: 0, fill: '#c85c4a', rx: '6' }, thermo); + svgEl('circle', { cx: 0, cy: 148, r: 10, fill: '#c85c4a' }, thermo); + + function update() { + const ppm = +rng.value; + ppmOut.textContent = ppm; + // ΔT gegen 1850 (≈ 280 ppm als Referenz) + const dt = 3 * Math.log2(ppm / 280); + const dtRounded = Math.round(dt * 10) / 10; + dtOut.textContent = (dtRounded >= 0 ? '+' : '') + dtRounded.toFixed(1).replace('.', ',') + ' °C'; + + // Sky-Farbton rotläuft je höher der CO₂-Wert (rotes Leuchten) + const warmth = Math.min(1, Math.max(0, (ppm - 280) / 520)); + const redAmount = Math.round(40 + warmth * 140); + sky.setAttribute('fill', `rgb(${40 + redAmount}, ${140 - warmth * 50}, ${170 - warmth * 80})`); + sky.setAttribute('opacity', (0.15 + warmth * 0.35).toFixed(2)); + earth.setAttribute('fill', warmth > 0.6 ? '#c4a97a' : (warmth > 0.3 ? '#9bab74' : '#5a8a5e')); + + // Moleküle proportional zu ppm + molGroup.innerHTML = ''; + const nMols = Math.round((ppm - 200) / 8); // 0..75 Moleküle + for (let i = 0; i < nMols; i++) { + const mx = 40 + Math.random() * 520; + const my = 50 + Math.random() * 155; + const isMethane = Math.random() < 0.12; + svgEl('circle', { + cx: mx, cy: my, r: 5, + fill: isMethane ? '#e8833a' : '#c85c4a', opacity: '0.7' + }, molGroup); + } + + // Mercury-Säule (0 °C = y=130, max +5°C bei y=10 → 120 px / 5°C = 24 px/°C) + const mh = Math.max(0, Math.min(120, dt * 24)); + mercury.setAttribute('y', 130 - mh); + mercury.setAttribute('height', mh); + + // Verdict-Text + let v, cls; + if (ppm < 300) { v = '🟢 Vorindustrielles Klima'; cls = 'good'; } + else if (ppm < 450) { v = '🟡 nahe heutiger Wert'; cls = 'now'; } + else if (ppm < 600) { v = '🟠 Verdopplung — kritisch'; cls = 'warn'; } + else { v = '🔴 weit jenseits 2 °C-Ziel'; cls = 'bad'; } + verdict.textContent = v; + verdict.dataset.state = cls; + } + rng.addEventListener('input', update); + update(); + } + + // ===================================================================== + // Experiment: Windrad-Höhenslider — Höhe ändern, Vergleichsobjekte leuchten + // ===================================================================== + function windradSlider(root) { + const objects = [ + { label: 'Mensch', h: 1.8, color: '#1f4e5a' }, + { label: 'Einfamilienhaus', h: 8, color: '#c85c4a' }, + { label: 'Alter Baum', h: 25, color: '#5a8a5e' }, + { label: 'Kirchturm', h: 60, color: '#c4a97a' }, + { label: 'Altes Windrad', h: 100, color: '#8a8a8a' }, + { label: 'DC Tower Wien', h: 220, color: '#4a7c8a' }, + { label: 'Modernes Windrad',h: 240, color: '#3a6b3e' } + ]; + root.innerHTML = ` +
+
+

🌬 Wie groß ist ein modernes Windrad?

+

Schiebe den Regler auf die vermutete Höhe. Das passende Objekt leuchtet auf — ab 240 m bist du auf Höhe des modernen Windrads.

+
+ +
+ + +
+
+
In dieser Höhenklasse: Altes Windrad
+
+

Moderne Windräder in Österreich: Nabe 100–160 m, Rotor bis 80 m Länge, Gesamthöhe bis 240 m. Quelle: IG Windkraft Österreich.

+
+ `; + const svg = root.querySelector('.ge-wind-svg'); + const rng = root.querySelector('#ge-wind-range'); + const mOut = root.querySelector('#ge-wind-m'); + const matchOut = root.querySelector('#ge-wind-match'); + + // Ground + svgEl('rect', { x: 0, y: 320, width: 600, height: 40, fill: '#5a8a5e' }, svg); + // SKALA: 1 m = 1.2 px, Boden y=320, top bei 240 m = 320 - 240*1.2 = 32 + const mToY = m => 320 - m * 1.2; + + // Objekte als Silhouetten, jedes an fester x-Position + const objG = objects.map((o, i) => { + const g = svgEl('g', { class: 'ge-wind-obj' }, svg); + const x = 80 + i * 72; + // Silhouette: einfaches Rechteck oder Dreieck (stilisiert) + const y = mToY(o.h); + const h = 320 - y; + if (o.label.includes('Baum')) { + svgEl('ellipse', { cx: x, cy: y + 10, rx: 14, ry: 18, fill: o.color }, g); + svgEl('rect', { x: x - 2, y: y + 25, width: 4, height: h - 25, fill: '#6b4a2e' }, g); + } else if (o.label.includes('Mensch')) { + svgEl('circle', { cx: x, cy: y + 2, r: 1.4, fill: o.color }, g); + svgEl('rect', { x: x - 0.5, y: y + 2, width: 1, height: 2, fill: o.color }, g); + } else if (o.label.includes('Haus')) { + svgEl('rect', { x: x - 12, y: y + 4, width: 24, height: h - 4, fill: '#e8d5b5', stroke: '#1f4e5a', 'stroke-width': '0.6' }, g); + svgEl('polygon', { points: `${x-14},${y+4} ${x},${y-4} ${x+14},${y+4}`, fill: o.color }, g); + } else if (o.label.includes('Kirchturm')) { + svgEl('rect', { x: x - 8, y: y + 12, width: 16, height: h - 12, fill: o.color, stroke: '#1f4e5a', 'stroke-width': '0.6' }, g); + svgEl('polygon', { points: `${x-10},${y+12} ${x},${y} ${x+10},${y+12}`, fill: '#c85c4a' }, g); + } else if (o.label.includes('Tower')) { + svgEl('rect', { x: x - 7, y, width: 14, height: h, fill: o.color, stroke: '#1f4e5a', 'stroke-width': '0.6' }, g); + // Window stripes + for (let k = 0; k < 8; k++) { + svgEl('rect', { x: x - 5, y: y + 8 + k * (h / 10), width: 10, height: 2, fill: '#e8d5b5', opacity: '0.7' }, g); + } + } else if (o.label === 'Altes Windrad') { + svgEl('rect', { x: x - 1.5, y, width: 3, height: h, fill: o.color }, g); + svgEl('circle', { cx: x, cy: y, r: 2.2, fill: '#1f4e5a' }, g); + svgEl('line', { x1: x, y1: y, x2: x, y2: y - 22, stroke: '#1f4e5a', 'stroke-width': '1.6', 'stroke-linecap': 'round' }, g); + svgEl('line', { x1: x, y1: y, x2: x + 18, y2: y + 12, stroke: '#1f4e5a', 'stroke-width': '1.6', 'stroke-linecap': 'round' }, g); + svgEl('line', { x1: x, y1: y, x2: x - 18, y2: y + 12, stroke: '#1f4e5a', 'stroke-width': '1.6', 'stroke-linecap': 'round' }, g); + } else if (o.label === 'Modernes Windrad') { + svgEl('polygon', { points: `${x-3},320 ${x+3},320 ${x+2},${y+8} ${x-2},${y+8}`, fill: '#fff', stroke: '#1f4e5a', 'stroke-width': '0.8' }, g); + svgEl('rect', { x: x - 4, y: y + 4, width: 8, height: 6, fill: '#1f4e5a' }, g); + svgEl('circle', { cx: x, cy: y + 8, r: 3, fill: o.color }, g); + // Rotor + svgEl('line', { x1: x, y1: y + 8, x2: x, y2: y - 72, stroke: '#1f4e5a', 'stroke-width': '2', 'stroke-linecap': 'round' }, g); + svgEl('line', { x1: x, y1: y + 8, x2: x + 62, y2: y + 44, stroke: '#1f4e5a', 'stroke-width': '2', 'stroke-linecap': 'round' }, g); + svgEl('line', { x1: x, y1: y + 8, x2: x - 62, y2: y + 44, stroke: '#1f4e5a', 'stroke-width': '2', 'stroke-linecap': 'round' }, g); + } + // Label unter dem Objekt + const lbl = svgEl('text', { x, y: 340, 'text-anchor': 'middle', 'font-size': '8', fill: '#4a4a4a', 'font-weight': '600' }, g); + lbl.textContent = o.h < 10 ? o.h.toFixed(1).replace('.', ',') + ' m' : o.h + ' m'; + return { g, o }; + }); + + // Markierungslinie (aktuelle Höhe) + const markerLine = svgEl('line', { x1: 30, y1: 200, x2: 570, y2: 200, stroke: '#c85c4a', 'stroke-width': '1.5', 'stroke-dasharray': '4 3' }, svg); + const markerLabel = svgEl('text', { x: 34, y: 196, 'font-size': '10', fill: '#c85c4a', 'font-weight': '700' }, svg); + + function update() { + const m = +rng.value; + mOut.textContent = m; + const y = mToY(m); + markerLine.setAttribute('y1', y); + markerLine.setAttribute('y2', y); + markerLabel.setAttribute('y', y - 4); + markerLabel.textContent = m + ' m'; + // Aktives Objekt finden: Höhe ≤ m und max + let bestIdx = -1; + objects.forEach((o, i) => { + if (o.h <= m + 5 && (bestIdx === -1 || o.h > objects[bestIdx].h)) bestIdx = i; + }); + objG.forEach((ob, i) => { + ob.g.classList.toggle('ge-wind-active', i === bestIdx); + }); + matchOut.textContent = bestIdx >= 0 ? objects[bestIdx].label : '(noch nichts)'; + } + rng.addEventListener('input', update); + update(); + } + + // ===================================================================== + // Experiment: Methan-GWP-Waage — 1 kg Methan gegen wie viel CO₂? + // ===================================================================== + function methaneBalance(root) { + root.innerHTML = ` +
+
+

⚖ Wie stark ist 1 kg Methan?

+

Auf der linken Waagschale liegt 1 kg Methan. Lege so viele kg CO₂ auf die rechte Schale, bis die Waage im Gleichgewicht ist (auf 100 Jahre).

+
+ +
+ + +
+
+
noch zu leicht
+
+

Laut IPCC AR6 (2021) hat 1 kg Methan auf 100 Jahre die Klimawirkung von 28 kg CO₂ (GWP-100). Auf 20 Jahre sogar 82 kg.

+
+ `; + const svg = root.querySelector('.ge-bal-svg'); + const rng = root.querySelector('#ge-bal-range'); + const kgOut = root.querySelector('#ge-bal-kg'); + const verdict = root.querySelector('#ge-bal-verdict'); + + // Grundaufbau: Ständer + Balken + svgEl('rect', { x: 296, y: 200, width: 8, height: 120, fill: '#6b4a2e' }, svg); + svgEl('rect', { x: 260, y: 316, width: 80, height: 10, fill: '#6b4a2e', rx: '3' }, svg); + svgEl('circle', { cx: 300, cy: 200, r: 6, fill: '#1f4e5a' }, svg); + + // Balken (rotiert um 300,200) + const beam = svgEl('g', { transform: 'rotate(0, 300, 200)' }, svg); + svgEl('rect', { x: 100, y: 196, width: 400, height: 8, fill: '#4a4a4a', rx: '4' }, beam); + // Aufhängungen + svgEl('line', { x1: 120, y1: 200, x2: 120, y2: 150, stroke: '#4a4a4a', 'stroke-width': '1.2' }, beam); + svgEl('line', { x1: 480, y1: 200, x2: 480, y2: 150, stroke: '#4a4a4a', 'stroke-width': '1.2' }, beam); + // Schalen + svgEl('ellipse', { cx: 120, cy: 152, rx: 45, ry: 8, fill: '#c4a97a', stroke: '#1f4e5a', 'stroke-width': '1' }, beam); + svgEl('path', { d: 'M 75 152 L 85 170 L 155 170 L 165 152 Z', fill: '#c4a97a', stroke: '#1f4e5a', 'stroke-width': '1' }, beam); + svgEl('ellipse', { cx: 480, cy: 152, rx: 45, ry: 8, fill: '#c4a97a', stroke: '#1f4e5a', 'stroke-width': '1' }, beam); + svgEl('path', { d: 'M 435 152 L 445 170 L 515 170 L 525 152 Z', fill: '#c4a97a', stroke: '#1f4e5a', 'stroke-width': '1' }, beam); + + // Links: 1 Methan-Molekül (dick und orange) + const methaneG = svgEl('g', {}, beam); + svgEl('circle', { cx: 120, cy: 140, r: 14, fill: '#e8833a', stroke: '#1f4e5a', 'stroke-width': '1' }, methaneG); + const methaneLabel = svgEl('text', { x: 120, y: 144, 'text-anchor': 'middle', 'font-size': '11', 'font-weight': '800', fill: '#fff' }, methaneG); + methaneLabel.textContent = 'CH₄'; + const methaneCount = svgEl('text', { x: 120, y: 125, 'text-anchor': 'middle', 'font-size': '10', 'font-weight': '700', fill: '#1f4e5a' }, methaneG); + methaneCount.textContent = '1 kg'; + + // Rechts: variable CO₂-Moleküle + const co2G = svgEl('g', {}, beam); + const co2Count = svgEl('text', { x: 480, y: 125, 'text-anchor': 'middle', 'font-size': '10', 'font-weight': '700', fill: '#1f4e5a' }, beam); + + function update() { + const kg = +rng.value; + kgOut.textContent = kg; + co2Count.textContent = kg + ' kg'; + // CO₂-Moleküle auf rechte Schale (gestapelt, maximal 60) + co2G.innerHTML = ''; + const perRow = 8; + const cols = Math.min(perRow, kg); + const rows = Math.ceil(kg / perRow); + for (let i = 0; i < Math.min(kg, 60); i++) { + const r = Math.floor(i / perRow); + const c = i % perRow; + const cx = 480 - ((cols - 1) * 9) / 2 + c * 9; + const cy = 145 - r * 9; + svgEl('circle', { cx, cy, r: 4, fill: '#c85c4a', opacity: '0.95' }, co2G); + } + + // Balken-Rotation: Methan ist immer gleich "schwer" wie 28 kg CO₂ + // Diff in kg-Äquivalent; Max-Rotation ±18° + const diff = kg - 28; + const angle = Math.max(-18, Math.min(18, diff * 0.8)); + beam.setAttribute('transform', `rotate(${angle}, 300, 200)`); + + // Verdict + if (kg < 20) verdict.textContent = '⬇ noch zu leicht'; + else if (kg < 27) verdict.textContent = '🟡 fast — mehr CO₂ drauf'; + else if (kg <= 29) verdict.textContent = '🎯 genau! 1 kg Methan ≈ 28 kg CO₂'; + else verdict.textContent = '⬆ jetzt zu viel CO₂'; + verdict.dataset.state = (kg >= 27 && kg <= 29) ? 'good' : 'now'; + } + rng.addEventListener('input', update); + update(); + } + // Registry — Key entspricht key_slug aus DB window.GlossarExperiments = { - 'kilowattstunde': kwhRace, - 'ppm': ppmGrid, - 'albedo': albedoSlider, - 'co2-fussabdruck': footprintCalc + 'kilowattstunde': kwhRace, + 'ppm': ppmGrid, + 'albedo': albedoSlider, + 'co2-fussabdruck': footprintCalc, + 'treibhauseffekt': greenhouseSlider, + 'windenergie': windradSlider, + 'methan': methaneBalance }; })(); diff --git a/App/pages/glossar.php b/App/pages/glossar.php index c55a585..e8ef50a 100644 --- a/App/pages/glossar.php +++ b/App/pages/glossar.php @@ -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);