skyview.astronomiemuseum.de/index.html

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</head>
<body>

<canvas id="starCanvas"></canvas>
<div class="nebula nebula-1"></div>
<div class="nebula nebula-2"></div>
<div class="nebula nebula-3"></div>

<div class="redirect-banner">
  <span>Weiterleitung in</span>
  <span class="redirect-countdown" id="countdown">5</span>
  <span>Sekunden &mdash;</span>
  <div class="redirect-bar-wrap"><div class="redirect-bar"></div></div>
  <a class="redirect-link" href="public/index.php">Jetzt &rarr;</a>
</div>

<div class="page">
  <section class="hero">
    <p class="museum-pre">Astronomiemuseum der Sternwarte Sonneberg · seit 1925</p>
    <p class="museum-pre">Th&uuml;ringens Tor ins Universum</p>

    <div class="ring-wrap" id="ringWrap">
      <div class="crosshair"></div>
      <div class="ring ring-outer"><div class="ring-ticks"></div></div>
      <div class="ring ring-inner"></div>
      <div class="ring-core"><div class="ring-symbol">&#10022;</div></div>
    </div>

    <h1 class="hero-title"><em>AstroTools</em></h1>
    
    <div class="hero-divider"></div>

    <p class="hero-desc">
      Digitale Hilfsmittel f&uuml;r Beobachtung, Planung und Entdeckung &ndash;<br>
      entwickelt vom Astronomiemuseum der Sternwarte Sonneberg.<br>
      Standort: Erbisp&uuml;hl &middot; Neufang &middot; 638 m &uuml;.NN<br>
      IAU-Sternwartencode: <strong>031</strong>
    </p>

    <a class="hero-link" href="https://astronomiemuseum.de" target="_blank" rel="noopener">
      &nearr; astronomiemuseum.de
    </a>
  </section>
</div>

<script>
const canvas = document.getElementById('starCanvas');
const ctx = canvas.getContext('2d');
function resize(){ canvas.width=window.innerWidth; canvas.height=window.innerHeight; }
resize(); window.addEventListener('resize',resize);

const STARS = Array.from({length:320},()=>({
  x:Math.random(),y:Math.random(),r:Math.random()*1.2+0.15,
  a:Math.random()*0.6+0.1,tw:Math.random()*5000+2500,tp:Math.random()*8000,
  c:Math.random()<.15?[255,220,180]:Math.random()<.1?[180,200,255]:[210,225,255],
}));
const BRIGHT = Array.from({length:14},()=>({
  x:Math.random(),y:Math.random(),r:Math.random()*1.8+1.0,
  a:Math.random()*0.5+0.4,tw:Math.random()*3000+1500,tp:Math.random()*5000,
}));

function drawStar(x,y,r,a,rgb){
  ctx.beginPath();ctx.arc(x,y,r,0,Math.PI*2);
  ctx.fillStyle=`rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`;ctx.fill();
}
function drawSpike(x,y,size,a){
  ctx.save();ctx.globalAlpha=a*.5;const len=size*6;
  ctx.strokeStyle=`rgba(255,240,200,${a*.3})`;ctx.lineWidth=.5;
  ctx.beginPath();ctx.moveTo(x-len,y);ctx.lineTo(x+len,y);ctx.stroke();
  ctx.beginPath();ctx.moveTo(x,y-len);ctx.lineTo(x,y+len);ctx.stroke();
  ctx.restore();
}
(function draw(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  const t=performance.now();
  STARS.forEach(s=>{
    const a=s.a*(0.5+0.5*Math.sin((t+s.tp)/s.tw*Math.PI*2));
    drawStar(s.x*canvas.width,s.y*canvas.height,s.r,a,s.c);
  });
  BRIGHT.forEach(s=>{
    const a=s.a*(0.6+0.4*Math.sin((t+s.tp)/s.tw*Math.PI*2));
    const x=s.x*canvas.width,y=s.y*canvas.height;
    const g=ctx.createRadialGradient(x,y,0,x,y,s.r*4);
    g.addColorStop(0,`rgba(255,245,220,${a*.6})`);g.addColorStop(1,'transparent');
    ctx.beginPath();ctx.arc(x,y,s.r*4,0,Math.PI*2);ctx.fillStyle=g;ctx.fill();
    drawStar(x,y,s.r,a,[255,245,220]);drawSpike(x,y,s.r,a);
  });
  requestAnimationFrame(draw);
})();

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)`;
});

let secs=10;
const countEl=document.getElementById('countdown');
const timer=setInterval(()=>{
  secs--;countEl.textContent=secs;
  if(secs<=0){clearInterval(timer);window.location.href='public/index.php';}
},1000);
</script>
</body>
</html>