diff --git a/App/sims/sonnensystem/game.html b/App/sims/sonnensystem/game.html index 184d437..882b818 100644 --- a/App/sims/sonnensystem/game.html +++ b/App/sims/sonnensystem/game.html @@ -386,6 +386,26 @@ font-weight: 700; pointer-events: none; } + /* Lupe: 3 Stufen (100/50/25 %), Frame verkleinert sich zur oben-rechts-Ecke */ + #inspect-frame { transition: width .2s ease, height .2s ease; } + #inspect-frame.sc-50 { width: 240px; height: 105px; } + #inspect-frame.sc-25 { width: 120px; height: 52px; } + #inspect-frame.austria.sc-50 { width: 140px; height: 140px; } + #inspect-frame.austria.sc-25 { width: 70px; height: 70px; } + /* Eck-Element zum Umschalten der Lupengröße (unten rechts in der Lupe) */ + #inspect-resize { + position: absolute; bottom: 6px; right: 6px; + width: 26px; height: 26px; z-index: 6; + display: inline-flex; align-items: center; justify-content: center; + background: rgba(245, 158, 11, 0.92); color: #1e293b; border: none; border-radius: 7px; + cursor: pointer; pointer-events: auto; + box-shadow: 0 2px 8px rgba(0,0,0,0.45); + } + #inspect-resize svg { width: 16px; height: 16px; } + #inspect-resize:active { transform: scale(0.92); } + /* bei kleinster Stufe etwas kompakter, damit der Griff nicht die Lupe verdeckt */ + #inspect-frame.sc-25 #inspect-resize { width: 20px; height: 20px; bottom: 3px; right: 3px; } + #inspect-frame.sc-25 #inspect-resize svg { width: 12px; height: 12px; } /* ---------- Info-Karte ---------- */ #info-card { position: absolute; @@ -799,7 +819,7 @@
📆 1. Jan
-

☀️ 🌍 🌙 Celestial Mechanics

+

☀️ 🌍 🌙 Sonnensystem

🏠 @@ -966,6 +986,7 @@
🔍 –
+
@@ -2411,7 +2432,7 @@ let easyMode = false; // I18N-Strings (nur Deutsch — Mehrsprachigkeit entfernt 2026-05-03 auf Thomas-Wunsch) const I18N = { - title: 'Himmelsmechanik', + title: 'Sonnensystem', noEclipse: 'keine Finsternis', solarEclipse: 'SONNENFINSTERNIS', lunarEclipse: 'MONDFINSTERNIS', @@ -2823,6 +2844,16 @@ function clearTrail() { // =================================================================== const inspectFrame = document.getElementById('inspect-frame'); const inspectTitle = document.getElementById('inspect-title'); +const inspectResize = document.getElementById('inspect-resize'); +// Lupe in 3 Stufen: 100 % → 50 % → 25 % (Frame UND Render-Inhalt). +let lupeScale = 1; +inspectResize.addEventListener('click', (e) => { + e.stopPropagation(); + inspectFrame.classList.remove('sc-50', 'sc-25'); + if (lupeScale === 1) { lupeScale = 0.5; inspectFrame.classList.add('sc-50'); } + else if (lupeScale === 0.5) { lupeScale = 0.25; inspectFrame.classList.add('sc-25'); } + else { lupeScale = 1; } +}); const _inspectPos = new THREE.Vector3(); let _inspectInfoShown = false; @@ -2947,8 +2978,8 @@ function renderInspect() { } const isAustria = inspectTarget === 'austria'; - const w = isAustria ? 280 : 480; - const h = isAustria ? 280 : 210; + const w = (isAustria ? 280 : 480) * lupeScale; + const h = (isAustria ? 280 : 210) * lupeScale; // CSS-Frame-Position: top:50px, right:12px (siehe #inspect-frame im