From e0ed17250498dbc5bd8699ec4b4856202fe9fe4e Mon Sep 17 00:00:00 2001 From: Eskimue Date: Thu, 2 Apr 2026 11:17:37 +0200 Subject: [PATCH] CSS umgebaut --- index.html | 132 +- public/css/style.css | 479 +++++++ public/jupitersystem.php | 30 +- public/mondfinsternis.php | 34 +- public/my_favorites.php | 4 +- public/planetensichtbarkeit.php | 14 +- public/register.php | 2 +- public/satellitenhimmel.php | 2 +- public/settings.php | 12 +- public/sonnenfinsternis.php | 48 +- public/sternbedeckungen.php | 16 +- public/sternenhimmel.php | 46 +- public/sternenhimmel_old.php | 2308 ------------------------------- public/tagbogen.php | 30 +- 14 files changed, 612 insertions(+), 2545 deletions(-) delete mode 100644 public/sternenhimmel_old.php diff --git a/index.html b/index.html index 7372cb2..f5ee3b1 100644 --- a/index.html +++ b/index.html @@ -6,130 +6,9 @@ AstroTools – Astronomiemuseum Sternwarte Sonneberg - + - +
@@ -138,7 +17,7 @@ body{
Weiterleitung in - 5 + 10 Sekunden —
Jetzt → @@ -222,7 +101,10 @@ document.addEventListener('mousemove',e=>{ const xR=(e.clientX/window.innerWidth-.5)*2; const yR=(e.clientY/window.innerHeight-.5)*2; const wrap=document.getElementById('ringWrap'); - if(wrap) wrap.style.transform=`translate(${xR*8}px,${yR*8}px)`; + if(wrap){ + wrap.style.setProperty('--ring-offset-x', `${xR*8}px`); + wrap.style.setProperty('--ring-offset-y', `${yR*8}px`); + } }); let secs=10; diff --git a/public/css/style.css b/public/css/style.css index 0014698..df05536 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -5,6 +5,276 @@ Astronomiemuseum der Sternwarte Sonneberg ============================================================ */ +/* --- Landing Page ------------------------------------------ */ + +body.landing-page { + background: #03030d; + color: #eef4ff; + font-family: 'Space Mono', monospace; + min-height: 100vh; + overflow-x: hidden; + display: flex; + align-items: center; + justify-content: center; +} + +body.landing-page #starCanvas { + position: fixed; + inset: 0; + z-index: 0; + pointer-events: none; +} + +body.landing-page .nebula { + position: fixed; + border-radius: 50%; + filter: blur(80px); + pointer-events: none; + z-index: 0; +} + +body.landing-page .nebula-1 { + width: 600px; + height: 400px; + top: -100px; + right: -150px; + background: radial-gradient(ellipse, rgba(40, 60, 160, 0.18) 0%, transparent 70%); +} + +body.landing-page .nebula-2 { + width: 500px; + height: 500px; + bottom: 10%; + left: -150px; + background: radial-gradient(ellipse, rgba(80, 20, 120, 0.14) 0%, transparent 70%); +} + +body.landing-page .nebula-3 { + width: 400px; + height: 300px; + top: 40%; + right: 5%; + background: radial-gradient(ellipse, rgba(20, 80, 100, 0.12) 0%, transparent 70%); +} + +body.landing-page .page { + position: relative; + z-index: 1; + width: 100%; + max-width: 640px; + padding: 0 24px; +} + +body.landing-page .hero { + text-align: center; + padding: 48px 20px; + animation: landing-fade-up 0.9s ease both; +} + +body.landing-page .museum-pre { + margin-bottom: 32px; + color: rgba(200, 168, 75, 0.7); + font-size: 9px; + letter-spacing: 0.22em; + text-transform: uppercase; +} + +body.landing-page .ring-wrap { + --ring-offset-x: 0px; + --ring-offset-y: 0px; + position: relative; + width: 120px; + height: 120px; + margin: 0 auto 28px; + transform: translate(var(--ring-offset-x), var(--ring-offset-y)); + transition: transform 0.1s ease-out; +} + +body.landing-page .crosshair { + position: absolute; + inset: 0; + background: + linear-gradient(rgba(200, 168, 75, 0.15) 1px, transparent 1px), + linear-gradient(90deg, rgba(200, 168, 75, 0.15) 1px, transparent 1px); + background-size: 100% 50%, 50% 100%; +} + +body.landing-page .ring { + position: absolute; + border: 1px solid rgba(200, 168, 75, 0.3); + border-radius: 50%; +} + +body.landing-page .ring-outer { + inset: 0; + animation: landing-spin 60s linear infinite; +} + +body.landing-page .ring-inner { + inset: 20px; + border-color: rgba(180, 220, 255, 0.2); + animation: landing-spin 38s linear infinite reverse; +} + +body.landing-page .ring-ticks { + position: absolute; + inset: 0; + border-radius: 50%; + background: repeating-conic-gradient(rgba(200, 168, 75, 0.25) 0deg 0.5deg, transparent 0.5deg 30deg); +} + +body.landing-page .ring-core { + position: absolute; + inset: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: radial-gradient(circle, rgba(200, 168, 75, 0.25) 0%, transparent 70%); +} + +body.landing-page .ring-symbol { + color: rgba(200, 168, 75, 0.9); + font-size: 16px; + animation: landing-pulse 3s ease-in-out infinite; +} + +body.landing-page .hero-title { + margin-bottom: 10px; + color: #f0f6ff; + font-family: 'Orbitron', sans-serif; + font-size: clamp(36px, 6vw, 72px); + font-weight: 900; + letter-spacing: 0.06em; + line-height: 1; + text-shadow: 0 0 40px rgba(200, 160, 80, 0.35), 0 0 80px rgba(100, 130, 255, 0.15); +} + +body.landing-page .hero-title em { + font-style: normal; +} + +body.landing-page .hero-divider { + width: 80px; + height: 1px; + margin: 0 auto 20px; + background: linear-gradient(90deg, transparent, rgba(200, 168, 75, 0.5), transparent); +} + +body.landing-page .hero-desc { + margin-bottom: 24px; + color: rgba(200, 215, 240, 0.6); + font-size: 12px; + letter-spacing: 0.04em; + line-height: 1.9; +} + +body.landing-page .hero-link { + display: inline-block; + padding-bottom: 2px; + border-bottom: 1px solid rgba(200, 168, 75, 0.3); + color: rgba(200, 168, 75, 0.8); + font-size: 10px; + letter-spacing: 0.16em; + text-decoration: none; + text-transform: uppercase; + transition: color 0.2s, border-color 0.2s; +} + +body.landing-page .hero-link:hover { + color: #e8c870; + border-color: #e8c870; +} + +body.landing-page .redirect-banner { + position: fixed; + bottom: 24px; + left: 50%; + z-index: 100; + display: flex; + align-items: center; + gap: 14px; + padding: 12px 22px; + transform: translateX(-50%); + border: 1px solid rgba(200, 168, 75, 0.25); + border-radius: 999px; + background: rgba(6, 10, 26, 0.92); + backdrop-filter: blur(16px); + box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5); + color: rgba(200, 215, 240, 0.55); + font-size: 10px; + letter-spacing: 0.14em; + white-space: nowrap; +} + +body.landing-page .redirect-countdown { + min-width: 16px; + color: rgba(200, 168, 75, 0.9); + font-family: 'Orbitron', sans-serif; + font-size: 14px; + font-weight: 700; + text-align: center; +} + +body.landing-page .redirect-bar-wrap { + width: 80px; + height: 2px; + overflow: hidden; + border-radius: 1px; + background: rgba(200, 168, 75, 0.12); +} + +body.landing-page .redirect-bar { + width: 100%; + height: 100%; + border-radius: 1px; + background: rgba(200, 168, 75, 0.7); + transform-origin: left; + animation: landing-shrink 10s linear forwards; +} + +body.landing-page .redirect-link { + color: rgba(200, 168, 75, 0.7); + letter-spacing: 0.12em; + text-decoration: none; + transition: color 0.2s; +} + +body.landing-page .redirect-link:hover { + color: #e8c870; +} + +@keyframes landing-shrink { + from { transform: scaleX(1); } + to { transform: scaleX(0); } +} + +@keyframes landing-fade-up { + from { + opacity: 0; + transform: translateY(22px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes landing-spin { + to { transform: rotate(360deg); } +} + +@keyframes landing-pulse { + 0%, 100% { + opacity: 0.6; + transform: scale(1); + } + 50% { + opacity: 1; + transform: scale(1.15); + } +} + /* ── Satellitenhimmel ───────────────────────────────────────── */ .satpass-page .satpass-card { margin-bottom: 1.25rem; } @@ -2700,6 +2970,21 @@ body.tagbogen-page main > .container { margin-bottom: 8px; } +.tagbogen-tool .modal-search-row { + display: flex; + gap: 8px; + align-items: flex-end; +} + +.tagbogen-tool .modal-search-field { + flex: 1; +} + +.tagbogen-tool .modal-divider { + border: none; + border-top: 1px solid rgba(200,168,75,.07); +} + .tagbogen-tool .coord-row { display: grid; grid-template-columns: 1fr 1fr; @@ -2712,6 +2997,10 @@ body.tagbogen-page main > .container { gap: 4px; } +.tagbogen-tool .coord-field.mt-gap { + margin-top: 8px; +} + .tagbogen-tool .coord-label { font-size: 9px; letter-spacing: .12em; @@ -2810,6 +3099,12 @@ body.tagbogen-page main > .container { text-align: left; } +.tagbogen-tool .overlay-list { + display: flex; + flex-direction: column; + gap: 6px; +} + .tagbogen-tool .overlay-dot { width: 9px; height: 9px; @@ -2820,6 +3115,21 @@ body.tagbogen-page main > .container { box-shadow: 0 0 6px currentColor; } +.tagbogen-tool .overlay-dot.is-summer { + background: #ff6020; + color: #ff6020; +} + +.tagbogen-tool .overlay-dot.is-winter { + background: #4080ff; + color: #4080ff; +} + +.tagbogen-tool .overlay-dot.is-equinox { + background: #40d080; + color: #40d080; +} + .tagbogen-tool .overlay-btn[data-active="1"] .overlay-dot { opacity: 1; } @@ -2890,6 +3200,13 @@ body.tagbogen-page main > .container { transition: all .2s; } +.tagbogen-tool .overlay-note { + font-size: 10px; + color: rgba(200,168,75,.55); + margin-bottom: 9px; + line-height: 1.6; +} + .tagbogen-tool .overlay-clear-btn:hover { border-color: rgba(200,168,75,.35); color: var(--gold); @@ -3105,6 +3422,10 @@ body.planetvis-page main > .container { font-size: 0.92rem; } +.planetvis-overlay.is-hidden { + display: none; +} + .planetvis-tool .spin-ring { width: 22px; height: 22px; @@ -3149,6 +3470,8 @@ body.planetvis-page main > .container { } .planetvis-tool .planet-orb { + --planet-orb-color: #888; + --planet-orb-glow: rgba(255,255,255,.18); width: 44px; height: 44px; border-radius: 50%; @@ -3158,6 +3481,13 @@ body.planetvis-page main > .container { font-weight: 700; color: #fff; text-transform: uppercase; + background: radial-gradient(circle at 38% 36%, var(--planet-orb-color), rgba(0,0,0,.88)); + box-shadow: 0 0 10px var(--planet-orb-glow), inset 0 0 4px rgba(255,255,255,.07); +} + +.planetvis-error-text { + color: #c05050; + font-size: 11px; } .planetvis-tool .planet-name { @@ -3792,6 +4122,10 @@ body.solarsystem-page main > .container { min-height: 1.5rem; } +.occult-status-hidden { + display: none; +} + #occultAbortBtn[hidden] { display: none; } @@ -3817,6 +4151,10 @@ body.solarsystem-page main > .container { transition: opacity 0.2s ease; } +.occult-spinner-visible { + opacity: 1; +} + .occult-ui-busy .occult-spinner { opacity: 1; } @@ -4198,6 +4536,21 @@ body.solarsystem-page main > .container { .eclipse-info-table td:first-child { color: var(--text-dim); font-size: 0.78rem; } .eclipse-info-table td:last-child { font-weight: 600; text-align: right; } +.eclipse-contact-label { + color: var(--gold); + font-weight: 700; + min-width: 2.4rem; +} + +.eclipse-contact-time { + font-variant-numeric: tabular-nums; +} + +.eclipse-contact-desc { + color: var(--text-dim); + font-size: 0.78rem; +} + .eclipse-info-phase { margin-top: 0.55rem; font-size: 0.8rem; @@ -4309,6 +4662,58 @@ body.solarsystem-page main > .container { letter-spacing: 0.04em; } +.eclipse-year-select { + flex: 1 1 80px; +} + +.eclipse-range-separator { + color: var(--text-dim); + align-self: center; +} + +.eclipse-canvas { + display: block; + width: 100%; + height: 100%; +} + +.eclipse-scale-note { + position: absolute; + bottom: 90px; + left: 10px; + font-size: 10px; + color: var(--text-dim); + opacity: 0.6; + pointer-events: none; + line-height: 1.4; +} + +.eclipse-speed-label { + margin-left: auto; +} + +.eclipse-speed-label .solarsystem-label { + display: inline; +} + +.eclipse-control-label { + display: block; + margin-bottom: 0.35rem; +} + +.eclipse-control-range { + width: 100%; +} + +.eclipse-control-range + .eclipse-control-label { + margin-top: 0.8rem; +} + +.eclipse-error { + padding: 2rem; + color: var(--text-dim); +} + .eclipse-speed-sel { background: rgba(10,16,36,0.8); border: 1px solid rgba(201,168,76,0.2); @@ -4449,6 +4854,12 @@ body.sternenhimmel-page .controls { flex-wrap: wrap; } +body.sternenhimmel-page .star-control-stack { + display: flex; + flex-direction: column; + gap: 3px; + } + body.sternenhimmel-page .ctrl-group { display: flex; align-items: center; @@ -4580,7 +4991,51 @@ body.sternenhimmel-page #tooltip .tt-name { display: block; margin-bottom: 2px; } +body.sternenhimmel-page #tooltip .tt-sun { color: #ffdd44; } +body.sternenhimmel-page #tooltip .tt-moon { color: #c8c0a8; } body.sternenhimmel-page #tooltip .tt-planet { color: #ffdd88; } +body.sternenhimmel-page #tooltip .tt-messier-oc { color: #7dd3fc; } +body.sternenhimmel-page #tooltip .tt-messier-gc { color: #fca5a5; } +body.sternenhimmel-page #tooltip .tt-messier-nb { color: #86efac; } +body.sternenhimmel-page #tooltip .tt-messier-sc { color: #c4b5fd; } +body.sternenhimmel-page #tooltip .tt-messier-pn { color: #67e8f9; } +body.sternenhimmel-page #tooltip .tt-messier-gx { color: #fcd34d; } +body.sternenhimmel-page #tooltip .tt-messier-as { color: #d1d5db; } + +body.sternenhimmel-page .star-popup-fallback { + position: fixed; + bottom: 0; + left: 0; + right: 0; + display: flex; + align-items: center; + gap: 16px; + padding: 10px 20px; + background: #050d18; + border-top: 1px solid var(--accent); + z-index: 9999; + font-family: 'Rajdhani', sans-serif; + font-size: 14px; + } +body.sternenhimmel-page .star-popup-fallback-label { + color: var(--text); + } +body.sternenhimmel-page .star-popup-fallback-link { + color: var(--accent); + border: 1px solid var(--accent); + padding: 5px 16px; + text-decoration: none; + letter-spacing: 0.08em; + } +body.sternenhimmel-page .star-popup-fallback-close { + margin-left: auto; + border: 0; + background: transparent; + color: var(--dim); + cursor: pointer; + font: inherit; + line-height: 1; + } /* ── STANDORT PANEL ─────────────────────────────────────────────────── */ body.sternenhimmel-page #locationWrap { @@ -4746,6 +5201,10 @@ body.sternenhimmel-page .sp-title { padding-bottom: 5px; } +body.sternenhimmel-page .sp-title-offset { + margin-top: 10px; + } + body.sternenhimmel-page .sp-row { display: flex; align-items: center; @@ -4776,6 +5235,10 @@ body.sternenhimmel-page .sp-toggles { flex: 1; } +body.sternenhimmel-page .sp-toggles-compact { + margin-top: 2px; + } + body.sternenhimmel-page .sp-toggle { display: flex; align-items: center; @@ -4873,6 +5336,22 @@ body.sternenhimmel-page .sp-slider .sp-val { text-align: right; } +body.sternenhimmel-page .file-input-hidden { + display: none; + } + +body.sternenhimmel-page .star-export-btn { + width: 100%; + padding: 5px; + border: 1px solid var(--accent); + background: #0a1f30; + color: var(--accent); + font-family: 'Rajdhani', sans-serif; + font-size: 0.82rem; + letter-spacing: 0.08em; + cursor: pointer; + } + body.sternenhimmel-page #starLoadingOverlay { position: absolute; left: 50%; diff --git a/public/jupitersystem.php b/public/jupitersystem.php index e22720f..bb044fc 100644 --- a/public/jupitersystem.php +++ b/public/jupitersystem.php @@ -82,7 +82,7 @@ $bodyClass = 'solarsystem-page jupitersystem-page'; −12h−6h0+6h+12h
1.0 h/s
- +
@@ -100,7 +100,7 @@ $bodyClass = 'solarsystem-page jupitersystem-page';
-