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">
<link rel="stylesheet" href="public/css/style.css">
</head>
<body class="landing-page">

<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">10</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.setProperty('--ring-offset-x', `${xR*8}px`);
    wrap.style.setProperty('--ring-offset-y', `${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>