Eskimue/skyview.astronomiemuseum.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS umgebaut

Browse Source
This commit is contained in:
Eskimue
2026-04-02 11:17:37 +02:00
parent f5dda8e8be
commit e0ed172504
14 changed files with 612 additions and 2545 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/mondfinsternis.php
+17 -17
View File
@@ -28,9 +28,9 @@ $userLon = isset($currentLocation['longitude']) ? (float)$currentLocation['longi
<div class="solarsystem-sidebar-block">
<div class="solarsystem-label">Zeitraum</div>
<div class="solarsystem-input-row">
<select id="eclipseYearFrom" style="flex:1 1 80px"></select>
<span style="color:var(--text-dim);align-self:center">–</span>
<select id="eclipseYearTo" style="flex:1 1 80px"></select>
<select id="eclipseYearFrom" class="eclipse-year-select"></select>
<span class="eclipse-range-separator">–</span>
<select id="eclipseYearTo" class="eclipse-year-select"></select>
</div>
<button class="btn btn-secondary btn-full" id="eclipseSearchBtn">Finsternisse suchen</button>
</div>
@@ -42,7 +42,7 @@ $userLon = isset($currentLocation['longitude']) ? (float)$currentLocation['longi
</div>
</div>
<div class="solarsystem-sidebar-block" id="eclipseDataBlock" style="display:none">
<div class="solarsystem-sidebar-block is-hidden" id="eclipseDataBlock">
<div class="solarsystem-label">Kontaktzeiten (UTC)</div>
<table class="data-table" id="eclipseContactTable"></table>
</div>
@@ -60,14 +60,13 @@ $userLon = isset($currentLocation['longitude']) ? (float)$currentLocation['longi
</div>
<!-- Three.js canvas (geometry) -->
<canvas id="eclipseCanvas" style="display:block;width:100%;height:100%"></canvas>
<canvas id="eclipseCanvas" class="eclipse-canvas"></canvas>
<!-- 2D Moon canvas -->
<canvas id="eclipseMoonCanvas" style="display:none;width:100%;height:100%"></canvas>
<canvas id="eclipseMoonCanvas" class="eclipse-canvas is-hidden"></canvas>
<!-- Scale notice -->
<div id="eclipseScaleNote" style="position:absolute;bottom:90px;left:10px;
font-size:10px;color:var(--text-dim);opacity:0.6;pointer-events:none;line-height:1.4">
<div id="eclipseScaleNote" class="eclipse-scale-note">
Abstände nicht maßstabsgetreu<br>(Mond real ~60× weiter entfernt)
</div>
@@ -86,8 +85,8 @@ $userLon = isset($currentLocation['longitude']) ? (float)$currentLocation['longi
<button class="btn btn-sm btn-primary" id="eclipseBtnPlay" title="Play/Pause">▶ Play</button>
<button class="btn btn-sm btn-secondary" id="eclipseBtnEnd" title="Zum Ende">⏭</button>
<span class="eclipse-time-display" id="eclipseTimeDisplay">– – : – – UTC</span>
<label class="eclipse-speed-label" style="margin-left:auto">
<span class="solarsystem-label" style="display:inline">Geschw.</span>
<label class="eclipse-speed-label">
<span class="solarsystem-label">Geschw.</span>
<select id="eclipseSpeedSel" class="eclipse-speed-sel">
<option value="1">×1</option>
<option value="3">×3</option>
@@ -501,7 +500,7 @@ function selectEclipse(idx) {
moonTrailLine = buildMoonTrail(eclB);
scene.add(moonTrailLine);
dataBlock.style.display = '';
dataBlock.classList.remove('is-hidden');
playing = false;
btnPlay.textContent = '▶ Play';
@@ -832,9 +831,9 @@ function renderContactTable() {
];
contactTable.innerHTML = rows.map(([lbl, off, desc]) =>
`<tr>
<td style="color:var(--gold);font-weight:700;min-width:2.4rem">${lbl}</td>
<td style="font-variant-numeric:tabular-nums">${fmtUTC(pk, off)}</td>
<td style="color:var(--text-dim);font-size:0.78rem">${desc}</td>
<td class="eclipse-contact-label">${lbl}</td>
<td class="eclipse-contact-time">${fmtUTC(pk, off)}</td>
<td class="eclipse-contact-desc">${desc}</td>
</tr>`
).join('');
}
@@ -973,8 +972,8 @@ function setView(mode) {
btnGeoView.classList.toggle('is-active', mode === 'geo');
btnMoonView.classList.toggle('is-active', mode === 'moon');
// Both views use the 3D canvas – Moon view just switches to the close-up camera
canvas3d.style.display = 'block';
canvas2d.style.display = 'none';
canvas3d.classList.remove('is-hidden');
canvas2d.classList.add('is-hidden');
if (mode === 'moon' && moonMesh) moonMesh.rotation.y = Math.PI;
}
@@ -982,9 +981,10 @@ function setView(mode) {
// Boot
// ════════════════════════════════════════════════════════════
init().catch(err => {
stageWrap.innerHTML = `<div style="padding:2rem;color:var(--text-dim)">Fehler: ${err.message}</div>`;
stageWrap.innerHTML = `<div class="eclipse-error">Fehler: ${err.message}</div>`;
console.error(err);
});
</script>
<?php require __DIR__ . '/footer.php'; ?>