CSS umgebaut
This commit is contained in:
Eskimue
+7
-125
@@ -6,130 +6,9 @@
|
||||
<meta http-equiv="refresh" content="10; url=public/index.php">
|
||||
<title>AstroTools – Astronomiemuseum Sternwarte Sonneberg</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
|
||||
html{scroll-behavior:smooth;}
|
||||
body{
|
||||
background:#03030d;
|
||||
color:#eef4ff;
|
||||
font-family:'Space Mono',monospace;
|
||||
min-height:100vh;
|
||||
overflow-x:hidden;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
}
|
||||
|
||||
#starCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;}
|
||||
|
||||
.nebula{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;}
|
||||
.nebula-1{width:600px;height:400px;top:-100px;right:-150px;background:radial-gradient(ellipse,rgba(40,60,160,.18) 0%,transparent 70%);}
|
||||
.nebula-2{width:500px;height:500px;bottom:10%;left:-150px;background:radial-gradient(ellipse,rgba(80,20,120,.14) 0%,transparent 70%);}
|
||||
.nebula-3{width:400px;height:300px;top:40%;right:5%;background:radial-gradient(ellipse,rgba(20,80,100,.12) 0%,transparent 70%);}
|
||||
|
||||
.page{
|
||||
position:relative;z-index:1;
|
||||
width:100%;max-width:640px;
|
||||
padding:0 24px;
|
||||
}
|
||||
|
||||
.hero{
|
||||
text-align:center;
|
||||
padding:48px 20px;
|
||||
animation:fadeUp .9s ease both;
|
||||
}
|
||||
.museum-pre{
|
||||
font-size:9px;letter-spacing:.22em;text-transform:uppercase;
|
||||
color:rgba(200,168,75,.7);margin-bottom:32px;
|
||||
}
|
||||
|
||||
.ring-wrap{
|
||||
position:relative;width:120px;height:120px;
|
||||
margin:0 auto 28px;transition:transform .1s ease-out;
|
||||
}
|
||||
.crosshair{
|
||||
position:absolute;inset:0;
|
||||
background:linear-gradient(rgba(200,168,75,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(200,168,75,.15) 1px,transparent 1px);
|
||||
background-size:100% 50%,50% 100%;
|
||||
}
|
||||
.ring{position:absolute;border-radius:50%;border:1px solid rgba(200,168,75,.3);}
|
||||
.ring-outer{inset:0;animation:spin 60s linear infinite;}
|
||||
.ring-inner{inset:20px;border-color:rgba(180,220,255,.2);animation:spin 38s linear infinite reverse;}
|
||||
.ring-ticks{
|
||||
position:absolute;inset:0;border-radius:50%;
|
||||
background:repeating-conic-gradient(rgba(200,168,75,.25) 0deg .5deg,transparent .5deg 30deg);
|
||||
}
|
||||
.ring-core{
|
||||
position:absolute;inset:40px;
|
||||
background:radial-gradient(circle,rgba(200,168,75,.25) 0%,transparent 70%);
|
||||
border-radius:50%;display:flex;align-items:center;justify-content:center;
|
||||
}
|
||||
.ring-symbol{font-size:16px;color:rgba(200,168,75,.9);animation:pulse 3s ease-in-out infinite;}
|
||||
|
||||
.hero-title{
|
||||
font-family:'Orbitron',sans-serif;font-weight:900;
|
||||
font-size:clamp(36px,6vw,72px);letter-spacing:.06em;
|
||||
color:#f0f6ff;
|
||||
text-shadow:0 0 40px rgba(200,160,80,.35),0 0 80px rgba(100,130,255,.15);
|
||||
margin-bottom:10px;line-height:1;
|
||||
}
|
||||
.hero-title em{font-style:normal;}
|
||||
|
||||
.tagline{
|
||||
font-family:'Cormorant Garamond',serif;font-style:italic;
|
||||
font-size:18px;color:rgba(200,168,75,.85);letter-spacing:.08em;margin-bottom:24px;
|
||||
}
|
||||
.hero-divider{
|
||||
width:80px;height:1px;
|
||||
background:linear-gradient(90deg,transparent,rgba(200,168,75,.5),transparent);
|
||||
margin:0 auto 20px;
|
||||
}
|
||||
.hero-desc{
|
||||
font-size:12px;line-height:1.9;
|
||||
color:rgba(200,215,240,.6);letter-spacing:.04em;margin-bottom:24px;
|
||||
}
|
||||
.hero-link{
|
||||
display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
|
||||
color:rgba(200,168,75,.8);text-decoration:none;
|
||||
border-bottom:1px solid rgba(200,168,75,.3);padding-bottom:2px;
|
||||
transition:color .2s,border-color .2s;
|
||||
}
|
||||
.hero-link:hover{color:#e8c870;border-color:#e8c870;}
|
||||
|
||||
/* Redirect Banner */
|
||||
.redirect-banner{
|
||||
position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
|
||||
z-index:100;
|
||||
display:flex;align-items:center;gap:14px;
|
||||
padding:12px 22px;
|
||||
background:rgba(6,10,26,.92);
|
||||
border:1px solid rgba(200,168,75,.25);
|
||||
border-radius:999px;
|
||||
backdrop-filter:blur(16px);
|
||||
box-shadow:0 4px 32px rgba(0,0,0,.5);
|
||||
font-size:10px;letter-spacing:.14em;
|
||||
color:rgba(200,215,240,.55);
|
||||
white-space:nowrap;
|
||||
}
|
||||
.redirect-countdown{
|
||||
font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;
|
||||
color:rgba(200,168,75,.9);min-width:16px;text-align:center;
|
||||
}
|
||||
.redirect-bar-wrap{width:80px;height:2px;background:rgba(200,168,75,.12);border-radius:1px;overflow:hidden;}
|
||||
.redirect-bar{
|
||||
height:100%;background:rgba(200,168,75,.7);border-radius:1px;
|
||||
width:100%;transform-origin:left;animation:shrink 5s linear forwards;
|
||||
}
|
||||
.redirect-link{
|
||||
color:rgba(200,168,75,.7);text-decoration:none;letter-spacing:.12em;transition:color .2s;
|
||||
}
|
||||
.redirect-link:hover{color:#e8c870;}
|
||||
|
||||
@keyframes shrink{from{transform:scaleX(1);}to{transform:scaleX(0);}}
|
||||
@keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
|
||||
@keyframes spin{to{transform:rotate(360deg);}}
|
||||
@keyframes pulse{0%,100%{opacity:.6;transform:scale(1);}50%{opacity:1;transform:scale(1.15);}}
|
||||
</style>
|
||||
<link rel="stylesheet" href="public/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<body class="landing-page">
|
||||
|
||||
<canvas id="starCanvas"></canvas>
|
||||
<div class="nebula nebula-1"></div>
|
||||
@@ -138,7 +17,7 @@ body{
|
||||
|
||||
<div class="redirect-banner">
|
||||
<span>Weiterleitung in</span>
|
||||
<span class="redirect-countdown" id="countdown">5</span>
|
||||
<span class="redirect-countdown" id="countdown">10</span>
|
||||
<span>Sekunden —</span>
|
||||
<div class="redirect-bar-wrap"><div class="redirect-bar"></div></div>
|
||||
<a class="redirect-link" href="public/index.php">Jetzt →</a>
|
||||
@@ -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;
|
||||
|
||||
@@ -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%;
|
||||
|
||||
+15
-15
@@ -82,7 +82,7 @@ $bodyClass = 'solarsystem-page jupitersystem-page';
|
||||
<span>−12h</span><span>−6h</span><span>0</span><span>+6h</span><span>+12h</span>
|
||||
</div>
|
||||
<div class="solarsystem-speed-value" id="jupiterSpeedLabel">1.0 h/s</div>
|
||||
<button type="button" class="btn btn-sm btn-secondary" id="jupiterBtnRealtime" style="margin-top:8px">Echtzeit</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary mt-md" id="jupiterBtnRealtime">Echtzeit</button>
|
||||
</div>
|
||||
|
||||
<div class="solarsystem-sidebar-block">
|
||||
@@ -100,7 +100,7 @@ $bodyClass = 'solarsystem-page jupitersystem-page';
|
||||
<button type="button" class="btn btn-secondary" id="jupiterBtnLabels">Namen</button>
|
||||
<button type="button" class="btn btn-secondary" id="jupiterBtnInnerMoons">Zusatzmonde</button>
|
||||
</div>
|
||||
<label class="form-checkbox" style="margin-top:0.6rem" title="Vergrößert nur die Darstellung der Monde. Der Schatten auf Jupiter bleibt in der realen Größe.">
|
||||
<label class="form-checkbox mt-sm" title="Vergrößert nur die Darstellung der Monde. Der Schatten auf Jupiter bleibt in der realen Größe.">
|
||||
<input type="checkbox" id="jupiterChkMoonScale">
|
||||
Monde 4× vergrößert
|
||||
</label>
|
||||
@@ -119,25 +119,25 @@ $bodyClass = 'solarsystem-page jupitersystem-page';
|
||||
<?php if ($isAdmin): ?>
|
||||
<div class="solarsystem-sidebar-block">
|
||||
<details id="grsAdminPanel">
|
||||
<summary class="solarsystem-label" style="cursor:pointer;user-select:none">▼ GRS Kalibrierung</summary>
|
||||
<summary class="solarsystem-label summary-buttonless">▼ GRS Kalibrierung</summary>
|
||||
<div class="grs-admin-body">
|
||||
<div class="solarsystem-label" style="margin-top:0.6rem">GRS Transit-Zeitpunkt (UTC)</div>
|
||||
<p class="hint" style="margin-top:0.3rem"><a href="https://skyandtelescope.org/stargazing-and-observing/interactive-stargazing-tools/transit-times-of-jupiters-great-red-spot/" target="_blank" rel="noopener">↗ Sky&Telescope: GRS-Transitzeiten</a></p>
|
||||
<input type="text" id="grsTransitInput" placeholder="03/27/2026 @ 05:00 UT" style="width:100%;margin-top:0.3rem">
|
||||
<button class="btn btn-secondary btn-full" id="grsBtnSetTime" style="margin-top:0.4rem">Auf diese Zeit setzen</button>
|
||||
<div id="grsParseError" class="msg-error" style="margin-top:0.3rem;display:none"></div>
|
||||
<div class="solarsystem-label mt-sm">GRS Transit-Zeitpunkt (UTC)</div>
|
||||
<p class="hint mt-2xs"><a href="https://skyandtelescope.org/stargazing-and-observing/interactive-stargazing-tools/transit-times-of-jupiters-great-red-spot/" target="_blank" rel="noopener">↗ Sky&Telescope: GRS-Transitzeiten</a></p>
|
||||
<input type="text" id="grsTransitInput" class="w-full mt-2xs" placeholder="03/27/2026 @ 05:00 UT">
|
||||
<button class="btn btn-secondary btn-full mt-xs" id="grsBtnSetTime">Auf diese Zeit setzen</button>
|
||||
<div id="grsParseError" class="msg-error mt-2xs is-hidden"></div>
|
||||
|
||||
<div class="solarsystem-label" style="margin-top:0.8rem">Jupiter drehen</div>
|
||||
<div class="solarsystem-button-grid" style="margin-top:0.3rem">
|
||||
<div class="solarsystem-label mt-md">Jupiter drehen</div>
|
||||
<div class="solarsystem-button-grid mt-2xs">
|
||||
<button class="btn btn-secondary" id="grsBtnRot5L">◀◀ 5°</button>
|
||||
<button class="btn btn-secondary" id="grsBtnRot1L">◀ 1°</button>
|
||||
<button class="btn btn-secondary" id="grsBtnRot1R">1° ▶</button>
|
||||
<button class="btn btn-secondary" id="grsBtnRot5R">5° ▶▶</button>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-secondary btn-full" id="grsBtnShadowRays" style="margin-top:0.8rem">Schattenstrahlen anzeigen</button>
|
||||
<button class="btn btn-primary btn-full" id="grsBtnSave" style="margin-top:0.4rem">Kalibrierung speichern</button>
|
||||
<div id="grsCalibStatus" class="hint" style="margin-top:0.5rem;line-height:1.5"></div>
|
||||
<button class="btn btn-secondary btn-full mt-md" id="grsBtnShadowRays">Schattenstrahlen anzeigen</button>
|
||||
<button class="btn btn-primary btn-full mt-xs" id="grsBtnSave">Kalibrierung speichern</button>
|
||||
<div id="grsCalibStatus" class="hint inline-fade mt-sm"></div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
@@ -915,10 +915,10 @@ function attachAdminHandlers() {
|
||||
const parsed = parseGrsTransitInput(grsTransitInput.value);
|
||||
if (!parsed) {
|
||||
grsParseError.textContent = 'Format ungültig. Erwartet: MM/DD/YYYY @ HH:MM UT';
|
||||
grsParseError.style.display = '';
|
||||
grsParseError.classList.remove('is-hidden');
|
||||
return;
|
||||
}
|
||||
grsParseError.style.display = 'none';
|
||||
grsParseError.classList.add('is-hidden');
|
||||
simDate = parsed;
|
||||
refreshCurrentDateUi();
|
||||
MOONS.forEach(rebuildMoonOrbitLine);
|
||||
|
||||
+17
-17
@@ -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'; ?>
|
||||
|
||||
|
||||
@@ -454,7 +454,7 @@ $loggedIn = true;
|
||||
</form>
|
||||
|
||||
<?php if ($satelliteSearchQuery !== ''): ?>
|
||||
<div style="margin-top:1.5rem;">
|
||||
<div class="mt-xl">
|
||||
<h2>Suchergebnisse</h2>
|
||||
<?php if (empty($satelliteSearchResults)): ?>
|
||||
<p class="hint">Keine passenden Satelliten gefunden.</p>
|
||||
@@ -509,7 +509,7 @@ $loggedIn = true;
|
||||
</form>
|
||||
|
||||
<?php if ($minorplanetSearchQuery !== ''): ?>
|
||||
<div style="margin-top:1.5rem;">
|
||||
<div class="mt-xl">
|
||||
<h2>Suchergebnisse</h2>
|
||||
<?php if (empty($minorplanetSearchResults)): ?>
|
||||
<p class="hint">Keine passenden Kleinplaneten gefunden.</p>
|
||||
|
||||
@@ -404,7 +404,7 @@ function renderChart(localDate) {
|
||||
infoDiv.innerHTML = '';
|
||||
needleEls = [];
|
||||
loadDiv.innerHTML = '<div class="spin-ring"></div>Berechne Positionen...';
|
||||
loadDiv.style.display = 'flex';
|
||||
loadDiv.classList.remove('is-hidden');
|
||||
|
||||
window.setTimeout(() => {
|
||||
try {
|
||||
@@ -499,10 +499,13 @@ function renderChart(localDate) {
|
||||
|
||||
row.innerHTML = `
|
||||
<div class="planet-label">
|
||||
<div class="planet-orb" style="background:radial-gradient(circle at 38% 36%,${def.color},rgba(0,0,0,.88));box-shadow:0 0 10px ${def.glow},inset 0 0 4px rgba(255,255,255,.07);">${def.symbol}</div>
|
||||
<div class="planet-orb">${def.symbol}</div>
|
||||
<div><div class="planet-name">${def.name}</div><div class="planet-meta">${metaStr}</div></div>
|
||||
</div>
|
||||
`;
|
||||
const orbEl = row.querySelector('.planet-orb');
|
||||
orbEl.style.setProperty('--planet-orb-color', def.color);
|
||||
orbEl.style.setProperty('--planet-orb-glow', def.glow);
|
||||
|
||||
const barOuter = document.createElement('div');
|
||||
barOuter.className = 'bar-outer';
|
||||
@@ -553,10 +556,11 @@ function renderChart(localDate) {
|
||||
<div class="info-card"><strong>Zeitzone</strong><br>${tzH === 2 ? 'MESZ (UTC+2)' : 'MEZ (UTC+1)'}<br>${SITE_LOCATION.timezone}</div>
|
||||
`;
|
||||
|
||||
loadDiv.style.display = 'none';
|
||||
loadDiv.classList.add('is-hidden');
|
||||
updateNeedles();
|
||||
} catch (error) {
|
||||
loadDiv.innerHTML = `<span style="color:#c05050;font-size:11px">Fehler: ${error.message}</span>`;
|
||||
loadDiv.innerHTML = `<span class="planetvis-error-text">Fehler: ${error.message}</span>`;
|
||||
loadDiv.classList.remove('is-hidden');
|
||||
console.error(error);
|
||||
}
|
||||
}, 30);
|
||||
@@ -591,7 +595,7 @@ if (typeof Astronomy !== 'undefined') {
|
||||
init();
|
||||
} else {
|
||||
document.getElementById('loadOverlay').innerHTML =
|
||||
'<span style="color:#c05050;font-size:11px">Bibliothek konnte nicht geladen werden.</span>';
|
||||
'<span class="planetvis-error-text">Bibliothek konnte nicht geladen werden.</span>';
|
||||
}
|
||||
</script>
|
||||
<?php endif; ?>
|
||||
|
||||
+1
-1
@@ -234,7 +234,7 @@ $loggedIn = false;
|
||||
<div class="card auth-card">
|
||||
<h2>Registrieren</h2>
|
||||
|
||||
<p class="hint" style="margin-bottom:1.2rem;">Nach der Registrierung wird das Konto zunächst deaktiviert und später freigeschaltet.</p>
|
||||
<p class="hint mb-lg">Nach der Registrierung wird das Konto zunächst deaktiviert und später freigeschaltet.</p>
|
||||
|
||||
<?php if ($successMessage !== ''): ?>
|
||||
<p class="msg-success"><?= htmlspecialchars($successMessage, ENT_QUOTES, 'UTF-8') ?></p>
|
||||
|
||||
@@ -885,7 +885,7 @@ if (!empty($currentLocation) && is_array($currentLocation)) {
|
||||
const observationSummary = buildObservationSummary(satResult.name, pass, visibility);
|
||||
|
||||
passInfoEl.innerHTML = `
|
||||
<table class="data-table" style="margin-top:.75rem">
|
||||
<table class="data-table mb-sm">
|
||||
<tr><td>Beginn</td><td>${formatDateTime(pass.aosTime)} (${azToCardinal(pass.aosAzimuth ?? 0)})</td></tr>
|
||||
<tr><td>Maximum</td><td>${formatDateTime(pass.peakTime)} / ${pass.peakElevation.toFixed(1)}°</td></tr>
|
||||
<tr><td>Ende</td><td>${formatDateTime(pass.losTime)} (${azToCardinal(pass.losAzimuth ?? 0)})</td></tr>
|
||||
|
||||
+6
-6
@@ -422,7 +422,7 @@ $loggedIn = true;
|
||||
|
||||
<div class="card">
|
||||
<h2>Kontodaten</h2>
|
||||
<table class="data-table" style="margin-bottom:1.2rem;">
|
||||
<table class="data-table mb-lg">
|
||||
<tr><td>Benutzername</td><td><?= h($user['username']) ?></td></tr>
|
||||
<tr><td>Rolle</td><td><?= h($user['role']) ?></td></tr>
|
||||
</table>
|
||||
@@ -524,9 +524,9 @@ $loggedIn = true;
|
||||
|
||||
<div class="card">
|
||||
<h2>Neuen Standort hinzufügen</h2>
|
||||
<p class="hint" style="margin-bottom:1rem;">Suche einen Ort, nutze den Browser-Standort oder klicke direkt in die Karte.</p>
|
||||
<p class="hint mb-md">Suche einen Ort, nutze den Browser-Standort oder klicke direkt in die Karte.</p>
|
||||
|
||||
<div class="input-row" style="margin-bottom:0.75rem;">
|
||||
<div class="input-row mb-sm">
|
||||
<input type="text" id="place-search" placeholder="Ort oder Adresse, z. B. Berlin, Wien">
|
||||
<button type="button" id="search-place" class="btn btn-primary">Suchen</button>
|
||||
<button type="button" id="lookup-elevation" class="btn btn-secondary">Höhe ermitteln</button>
|
||||
@@ -535,9 +535,9 @@ $loggedIn = true;
|
||||
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
<form method="post" action="" class="form-stack" style="margin-top:1.5rem;">
|
||||
<form method="post" action="" class="form-stack mt-xl">
|
||||
<input type="hidden" name="action" value="add_location">
|
||||
<div class="grid-2" style="gap:0.8rem;">
|
||||
<div class="grid-2 gap-sm">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" name="name" required value="<?= h($_POST['name'] ?? '') ?>">
|
||||
@@ -776,4 +776,4 @@ $loggedIn = true;
|
||||
})();
|
||||
</script>
|
||||
|
||||
<?php require __DIR__ . '/footer.php'; ?>
|
||||
<?php require __DIR__ . '/footer.php'; ?>
|
||||
|
||||
+24
-24
@@ -38,9 +38,9 @@ $userAlt = isset($currentLocation['elevation']) ? (float)$currentLocation['eleva
|
||||
<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>
|
||||
@@ -54,27 +54,26 @@ $userAlt = isset($currentLocation['elevation']) ? (float)$currentLocation['eleva
|
||||
|
||||
<div class="solarsystem-sidebar-block">
|
||||
<div class="solarsystem-label">Schatten-Skalierung</div>
|
||||
<label class="solarsystem-label" for="umbraScaleRange" style="display:block;margin-bottom:0.35rem">
|
||||
<label class="solarsystem-label eclipse-control-label" for="umbraScaleRange">
|
||||
Kernschatten: <span id="umbraScaleValue">0.50</span>
|
||||
</label>
|
||||
<input id="umbraScaleRange" type="range" min="0.01" max="3.00" step="0.01" value="0.50" style="width:100%;margin-bottom:0.8rem">
|
||||
<label class="solarsystem-label" for="penumbraScaleRange" style="display:block;margin-bottom:0.35rem">
|
||||
<input id="umbraScaleRange" class="eclipse-control-range" type="range" min="0.01" max="3.00" step="0.01" value="0.50">
|
||||
<label class="solarsystem-label eclipse-control-label" for="penumbraScaleRange">
|
||||
Halbschatten: <span id="penumbraScaleValue">1.00</span>
|
||||
</label>
|
||||
<input id="penumbraScaleRange" type="range" min="0.01" max="5.00" step="0.01" value="1.00" style="width:100%">
|
||||
<input id="penumbraScaleRange" class="eclipse-control-range" type="range" min="0.01" max="5.00" step="0.01" value="1.00">
|
||||
</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>
|
||||
</aside>
|
||||
|
||||
<div class="solarsystem-stage-wrap" id="eclipseStageWrap">
|
||||
<canvas id="eclipseCanvas" style="display:block;width:100%;height:100%"></canvas>
|
||||
<canvas id="eclipseCanvas" class="eclipse-canvas"></canvas>
|
||||
|
||||
<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">
|
||||
Distanzen stark komprimiert<br>Größenverhältnisse für die Anschauung angepasst
|
||||
</div>
|
||||
|
||||
@@ -91,8 +90,8 @@ $userAlt = isset($currentLocation['elevation']) ? (float)$currentLocation['eleva
|
||||
<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>
|
||||
@@ -465,7 +464,7 @@ function selectEclipse(idx) {
|
||||
simTime = timeRange().min;
|
||||
updateSim();
|
||||
|
||||
dataBlock.style.display = '';
|
||||
dataBlock.classList.remove('is-hidden');
|
||||
playing = false;
|
||||
btnPlay.textContent = '▶ Play';
|
||||
lastRAF = performance.now();
|
||||
@@ -1058,9 +1057,9 @@ function renderContactTable() {
|
||||
];
|
||||
contactTable.innerHTML = rows.map(([lbl, date, desc]) => `
|
||||
<tr>
|
||||
<td style="color:var(--gold);font-weight:700;min-width:2.4rem">${lbl}</td>
|
||||
<td style="font-variant-numeric:tabular-nums">${fmtUTC(date)}</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(date)}</td>
|
||||
<td class="eclipse-contact-desc">${desc}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
return;
|
||||
@@ -1076,9 +1075,9 @@ function renderContactTable() {
|
||||
];
|
||||
contactTable.innerHTML = rows.map(([lbl, date, desc]) => `
|
||||
<tr>
|
||||
<td style="color:var(--gold);font-weight:700;min-width:2.4rem">${lbl}</td>
|
||||
<td style="font-variant-numeric:tabular-nums">${fmtUTC(date)}</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(date)}</td>
|
||||
<td class="eclipse-contact-desc">${desc}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
return;
|
||||
@@ -1092,9 +1091,9 @@ function renderContactTable() {
|
||||
];
|
||||
contactTable.innerHTML = rows.map(([lbl, date, desc]) => `
|
||||
<tr>
|
||||
<td style="color:var(--gold);font-weight:700;min-width:2.4rem">${lbl}</td>
|
||||
<td style="font-variant-numeric:tabular-nums">${date ? fmtUTC(date) : '—'}</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">${date ? fmtUTC(date) : '—'}</td>
|
||||
<td class="eclipse-contact-desc">${desc}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
@@ -1265,9 +1264,10 @@ function setupInteraction() {
|
||||
}
|
||||
|
||||
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'; ?>
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ session_start();
|
||||
|
||||
$loggedIn = isset($_SESSION['user_id']);
|
||||
$pageTitle = 'Mond-Stern-Bedeckungen - AstroTools';
|
||||
$bodyClass = 'occult-page';
|
||||
$bodyClass = 'occ-page';
|
||||
$headerIntroPre = '';
|
||||
$headerIntroTitle = '';
|
||||
$headerIntroSub = '';
|
||||
@@ -374,8 +374,8 @@ if (!empty($currentLocation) && is_array($currentLocation)) {
|
||||
<span class="hint">Die Berechnung laeuft im Hintergrund. Hoehere Grenzgroessen brauchen deutlich laenger.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="occult-status" id="occultSubmitStatus" hidden style="display:none;">
|
||||
<span class="occult-spinner" aria-hidden="true" style="opacity:1"></span>
|
||||
<div class="occult-status occult-status-hidden" id="occultSubmitStatus" hidden>
|
||||
<span class="occult-spinner occult-spinner-visible" aria-hidden="true"></span>
|
||||
<span>Berechnung laeuft... Die serverseitige Python-Auswertung kann je nach Grenzgroesse etwas dauern.</span>
|
||||
</div>
|
||||
</section>
|
||||
@@ -421,7 +421,7 @@ if (!empty($currentLocation) && is_array($currentLocation)) {
|
||||
<div class="occult-submit-panel">
|
||||
<div class="occult-submit-title">Berechnung laeuft</div>
|
||||
<div class="occult-submit-row">
|
||||
<span class="occult-spinner" aria-hidden="true" style="opacity:1"></span>
|
||||
<span class="occult-spinner occult-spinner-visible" aria-hidden="true"></span>
|
||||
<span class="occult-submit-text">Die serverseitige Python-Auswertung wird im Hintergrund ausgefuehrt. Die Seite bleibt dabei sichtbar.</span>
|
||||
</div>
|
||||
<div class="occult-submit-progress">
|
||||
@@ -1305,7 +1305,7 @@ if (!empty($currentLocation) && is_array($currentLocation)) {
|
||||
|
||||
isSubmitting = true;
|
||||
status.hidden = false;
|
||||
status.style.display = 'inline-flex';
|
||||
status.classList.remove('occult-status-hidden');
|
||||
overlay.hidden = false;
|
||||
overlay.classList.add('is-visible');
|
||||
const submitButton = form.querySelector('button[type="submit"]');
|
||||
@@ -1347,7 +1347,7 @@ if (!empty($currentLocation) && is_array($currentLocation)) {
|
||||
isSubmitting = false;
|
||||
window.setTimeout(function () {
|
||||
status.hidden = true;
|
||||
status.style.display = 'none';
|
||||
status.classList.add('occult-status-hidden');
|
||||
overlay.hidden = true;
|
||||
overlay.classList.remove('is-visible');
|
||||
setEstimatedProgress(0);
|
||||
@@ -1370,7 +1370,7 @@ if (!empty($currentLocation) && is_array($currentLocation)) {
|
||||
event.preventDefault();
|
||||
isSubmitting = true;
|
||||
status.hidden = false;
|
||||
status.style.display = 'inline-flex';
|
||||
status.classList.remove('occult-status-hidden');
|
||||
overlay.hidden = false;
|
||||
overlay.classList.add('is-visible');
|
||||
startEstimatedProgress();
|
||||
@@ -1400,7 +1400,7 @@ if (!empty($currentLocation) && is_array($currentLocation)) {
|
||||
isSubmitting = false;
|
||||
window.setTimeout(function () {
|
||||
status.hidden = true;
|
||||
status.style.display = 'none';
|
||||
status.classList.add('occult-status-hidden');
|
||||
overlay.hidden = true;
|
||||
overlay.classList.remove('is-visible');
|
||||
setEstimatedProgress(0);
|
||||
|
||||
+28
-18
@@ -280,7 +280,7 @@ if (!$availableLocations) {
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<div style="display:flex;flex-direction:column;gap:3px;">
|
||||
<div class="star-control-stack">
|
||||
<div class="ctrl-group">
|
||||
<input type="datetime-local" id="dtPicker">
|
||||
<button class="btn live" id="btnNow">● JETZT</button>
|
||||
@@ -312,7 +312,7 @@ if (!$availableLocations) {
|
||||
<!-- Einstellungen -->
|
||||
<div id="settingsWrap">
|
||||
<button id="btnSettings" title="Anzeigeeinstellungen">⚙</button>
|
||||
<input type="file" id="fileInput" accept=".csv" style="display:none">
|
||||
<input type="file" id="fileInput" class="file-input-hidden" accept=".csv">
|
||||
<div id="settingsPanel">
|
||||
<div class="sp-title">⚙ Anzeigeeinstellungen</div>
|
||||
|
||||
@@ -323,7 +323,7 @@ if (!$availableLocations) {
|
||||
<label class="sp-radio"><input type="radio" name="gridMode" id="gridAltaz" value="altaz" ><span class="sp-rbtn"></span><span class="sp-text">Alt / Az</span></label>
|
||||
<label class="sp-radio"><input type="radio" name="gridMode" id="gridOff" value="off" ><span class="sp-rbtn"></span><span class="sp-text">Aus</span></label>
|
||||
</div>
|
||||
<div class="sp-toggles" style="margin-top:2px;">
|
||||
<div class="sp-toggles sp-toggles-compact">
|
||||
<label class="sp-toggle"><input type="checkbox" id="cfgEqLabels" checked><span class="sp-pill"></span><span class="sp-text">Beschrift.</span></label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -393,10 +393,10 @@ if (!$availableLocations) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sp-title" style="margin-top:10px;">⬇ Bild exportieren</div>
|
||||
<div class="sp-title sp-title-offset">⬇ Bild exportieren</div>
|
||||
|
||||
<div class="sp-row">
|
||||
<button id="btnExport" style="width:100%;background:#0a1f30;border:1px solid var(--accent);color:var(--accent);padding:5px;font-family:'Rajdhani',sans-serif;font-size:0.82rem;cursor:pointer;letter-spacing:0.08em;">
|
||||
<button id="btnExport" class="star-export-btn">
|
||||
⬇ PNG speichern (1000 × 1000 px)
|
||||
</button>
|
||||
</div>
|
||||
@@ -1590,16 +1590,26 @@ function autoExportPng() {
|
||||
// Falls Popup blockiert: Fallback-Link ins Dokument einblenden
|
||||
if (!win) {
|
||||
const bar = document.createElement('div');
|
||||
bar.style.cssText = 'position:fixed;bottom:0;left:0;right:0;background:#050d18;'
|
||||
+ 'border-top:1px solid #4a9eff;padding:10px 20px;z-index:9999;'
|
||||
+ 'font-family:Rajdhani,sans-serif;font-size:14px;display:flex;'
|
||||
+ 'align-items:center;gap:16px;';
|
||||
bar.innerHTML = '<span style="color:#8ab0cc;">Popup blockiert –</span>'
|
||||
+ `<a href="${url}" download="${fname}" style="color:#4a9eff;border:1px solid #4a9eff;`
|
||||
+ 'padding:5px 16px;text-decoration:none;letter-spacing:0.08em;">'
|
||||
+ '⬇ PNG speichern</a>'
|
||||
+ '<span style="color:#2a3a4a;cursor:pointer;margin-left:auto;" '
|
||||
+ 'onclick="this.parentNode.remove()">✕</span>';
|
||||
bar.className = 'star-popup-fallback';
|
||||
|
||||
const label = document.createElement('span');
|
||||
label.className = 'star-popup-fallback-label';
|
||||
label.textContent = 'Popup blockiert -';
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.className = 'star-popup-fallback-link';
|
||||
link.href = url;
|
||||
link.download = fname;
|
||||
link.textContent = 'PNG speichern';
|
||||
|
||||
const close = document.createElement('button');
|
||||
close.type = 'button';
|
||||
close.className = 'star-popup-fallback-close';
|
||||
close.setAttribute('aria-label', 'Hinweis schliessen');
|
||||
close.textContent = 'x';
|
||||
close.addEventListener('click', () => bar.remove());
|
||||
|
||||
bar.append(label, link, close);
|
||||
document.body.appendChild(bar);
|
||||
}
|
||||
}, 'image/png');
|
||||
@@ -1933,7 +1943,7 @@ canvas.addEventListener('click', function(e) {
|
||||
if (showSunMoon) {
|
||||
if (sunCache && sunCache._xy && Math.hypot(mx - sunCache._xy.x, my - sunCache._xy.y) < 18) {
|
||||
tip.innerHTML =
|
||||
'<span class="tt-name" style="color:#ffdd44">☀ Sonne</span>' +
|
||||
'<span class="tt-name tt-sun">Sonne</span>' +
|
||||
'Alt: ' + sunCache.alt.toFixed(2) + '°<br>' +
|
||||
'Az: ' + sunCache.az.toFixed(2) + '°<br>' +
|
||||
'RA: ' + sunCache.ra.toFixed(4) + ' h<br>' +
|
||||
@@ -1948,7 +1958,7 @@ canvas.addEventListener('click', function(e) {
|
||||
mp < 225 ? 'Vollmond' : mp < 270 ? 'Abnehmender Gibbous' :
|
||||
mp < 315 ? 'Letztes Viertel' : 'Abnehmende Sichel';
|
||||
tip.innerHTML =
|
||||
'<span class="tt-name" style="color:#c8c0a8">☽ Mond</span>' +
|
||||
'<span class="tt-name tt-moon">Mond</span>' +
|
||||
phaseName + '<br>' +
|
||||
'Beleuchtung: ' + pct + '%<br>' +
|
||||
'Phase: ' + mp.toFixed(1) + '°<br>' +
|
||||
@@ -1986,7 +1996,7 @@ canvas.addEventListener('click', function(e) {
|
||||
const typeNames = {Oc:'Offener Haufen',Gc:'Kugelhaufen',Nb:'Emissionsnebel',
|
||||
Sc:'Haufen+Nebel',Pn:'Planetarischer Nebel',Gx:'Galaxie',As:'Asterismus'};
|
||||
tip.innerHTML =
|
||||
'<span class="tt-name" style="color:' + (M_STYLE[obj.type]||M_STYLE.As).stroke + '">M' + obj.m +
|
||||
'<span class="tt-name ' + ('tt-messier-' + String(obj.type || 'As').toLowerCase()) + '">M' + obj.m +
|
||||
(obj.name ? ' – ' + obj.name : '') + '</span>' +
|
||||
'Typ: ' + (typeNames[obj.type] || obj.type) + '<br>' +
|
||||
'Mag: ' + obj.mag.toFixed(1) + '<br>' +
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
+15
-15
@@ -28,10 +28,10 @@ $bodyClass = 'tagbogen-page';
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Suche + Geolocation -->
|
||||
<div style="display:flex;gap:8px;align-items:flex-end;">
|
||||
<div style="flex:1">
|
||||
<div class="modal-search-row">
|
||||
<div class="modal-search-field">
|
||||
<div class="modal-sect-label">Suche</div>
|
||||
<input class="coord-input" id="locSearch" type="text" placeholder="Name eingeben..." style="width:100%" oninput="filterLocs(this.value)">
|
||||
<input class="coord-input" id="locSearch" type="text" placeholder="Name eingeben..." oninput="filterLocs(this.value)">
|
||||
</div>
|
||||
<button class="geo-btn" id="geoBtn" onclick="geoLocate()" title="Standort über Browser ermitteln">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="15" height="15">
|
||||
@@ -43,7 +43,7 @@ $bodyClass = 'tagbogen-page';
|
||||
</div>
|
||||
<!-- Gruppen-Dropdown -->
|
||||
<div id="locGroups"></div>
|
||||
<hr style="border:none;border-top:1px solid rgba(200,168,75,.07);">
|
||||
<hr class="modal-divider">
|
||||
<div>
|
||||
<div class="modal-sect-label">Eigene Koordinaten</div>
|
||||
<div class="coord-row">
|
||||
@@ -56,7 +56,7 @@ $bodyClass = 'tagbogen-page';
|
||||
<input class="coord-input" id="inputLon" type="number" step="0.01" min="-180" max="180" placeholder="z.B. 11.58">
|
||||
</div>
|
||||
</div>
|
||||
<div class="coord-field" style="margin-top:8px;">
|
||||
<div class="coord-field mt-gap">
|
||||
<div class="coord-label">Ortsname (optional)</div>
|
||||
<input class="coord-input" id="inputName" type="text" placeholder="Eigener Ort">
|
||||
</div>
|
||||
@@ -111,24 +111,24 @@ $bodyClass = 'tagbogen-page';
|
||||
<div class="stat-item"><div class="stat-lbl">H?he</div><div class="stat-val" id="statElev">-°</div></div>
|
||||
<div class="stat-item"><div class="stat-lbl">Azimut</div><div class="stat-val" id="statAz">-°</div></div>
|
||||
</div>
|
||||
<div style="margin-top:9px;">
|
||||
<div class="mt-lg">
|
||||
<div class="info-row"><span class="info-lbl">Himmelsrichtung</span><span class="info-val" id="statDir">-</span></div>
|
||||
<div class="info-row" style="margin-bottom:0"><span class="info-lbl">Tagesphase</span><span class="info-val" id="statPhase">-</span></div>
|
||||
<div class="sun-phase-bar"><div class="sun-phase-fill" id="phaseBar" style="width:0%"></div></div>
|
||||
<div class="info-row"><span class="info-lbl">Tagesphase</span><span class="info-val" id="statPhase">-</span></div>
|
||||
<div class="sun-phase-bar"><div class="sun-phase-fill" id="phaseBar"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ctrl-block">
|
||||
<div class="ctrl-label">Sonnenparameter</div>
|
||||
<div class="info-row"><span class="info-lbl">Deklination</span><span class="info-val" id="statDecl">-°</span></div>
|
||||
<div class="info-row"><span class="info-lbl">Max. Elevation</span><span class="info-val" id="statMaxElev">-°</span></div>
|
||||
<div class="info-row" style="margin-bottom:0"><span class="info-lbl">Aufgang-Azimut</span><span class="info-val" id="statRiseAz">-°</span></div>
|
||||
<div class="info-row"><span class="info-lbl">Aufgang-Azimut</span><span class="info-val" id="statRiseAz">-°</span></div>
|
||||
</div>
|
||||
<div class="ctrl-block">
|
||||
<div class="ctrl-label">Jahresvergleich</div>
|
||||
<div style="font-size:10px;color:rgba(200,168,75,.55);margin-bottom:9px;line-height:1.6;">?berlagerung der Sonnenb?gen f?r astronomisch wichtige Tage</div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px;">
|
||||
<div class="overlay-note">?berlagerung der Sonnenb?gen f?r astronomisch wichtige Tage</div>
|
||||
<div class="overlay-list">
|
||||
<button class="overlay-btn" id="btn_sommer" onclick="toggleOverlay('sommer')" data-active="0">
|
||||
<span class="overlay-dot" style="background:#ff6020;color:#ff6020"></span>
|
||||
<span class="overlay-dot is-summer"></span>
|
||||
<span class="overlay-text">Sommersonnenwende</span>
|
||||
<div class="overlay-tooltip" id="tip_sommer">
|
||||
<div class="overlay-tooltip-title">SOMMERSONNENWENDE</div>
|
||||
@@ -141,7 +141,7 @@ $bodyClass = 'tagbogen-page';
|
||||
</div>
|
||||
</button>
|
||||
<button class="overlay-btn" id="btn_winter" onclick="toggleOverlay('winter')" data-active="0">
|
||||
<span class="overlay-dot" style="background:#4080ff;color:#4080ff"></span>
|
||||
<span class="overlay-dot is-winter"></span>
|
||||
<span class="overlay-text">Wintersonnenwende</span>
|
||||
<div class="overlay-tooltip" id="tip_winter">
|
||||
<div class="overlay-tooltip-title">WINTERSONNENWENDE</div>
|
||||
@@ -154,7 +154,7 @@ $bodyClass = 'tagbogen-page';
|
||||
</div>
|
||||
</button>
|
||||
<button class="overlay-btn" id="btn_fruehjahr" onclick="toggleOverlay('fruehjahr')" data-active="0">
|
||||
<span class="overlay-dot" style="background:#40d080;color:#40d080"></span>
|
||||
<span class="overlay-dot is-equinox"></span>
|
||||
<span class="overlay-text">Tag-/Nachtgleiche</span>
|
||||
<div class="overlay-tooltip" id="tip_fruehjahr">
|
||||
<div class="overlay-tooltip-title">TAG-/NACHTGLEICHE</div>
|
||||
@@ -168,7 +168,7 @@ $bodyClass = 'tagbogen-page';
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<button class="overlay-clear-btn" onclick="clearOverlays()" style="margin-top:9px;">Alle ausblenden</button>
|
||||
<button class="overlay-clear-btn mt-lg" onclick="clearOverlays()">Alle ausblenden</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user