first commit
This commit is contained in:
+236
@@ -0,0 +1,236 @@
|
||||
<!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 —</span>
|
||||
<div class="redirect-bar-wrap"><div class="redirect-bar"></div></div>
|
||||
<a class="redirect-link" href="public/index.php">Jetzt →</a>
|
||||
</div>
|
||||
|
||||
<div class="page">
|
||||
<section class="hero">
|
||||
<p class="museum-pre">Astronomiemuseum der Sternwarte Sonneberg · seit 1925</p>
|
||||
<p class="museum-pre">Thü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">✦</div></div>
|
||||
</div>
|
||||
|
||||
<h1 class="hero-title"><em>AstroTools</em></h1>
|
||||
|
||||
<div class="hero-divider"></div>
|
||||
|
||||
<p class="hero-desc">
|
||||
Digitale Hilfsmittel für Beobachtung, Planung und Entdeckung –<br>
|
||||
entwickelt vom Astronomiemuseum der Sternwarte Sonneberg.<br>
|
||||
Standort: Erbispühl · Neufang · 638 m ü.NN<br>
|
||||
IAU-Sternwartencode: <strong>031</strong>
|
||||
</p>
|
||||
|
||||
<a class="hero-link" href="https://astronomiemuseum.de" target="_blank" rel="noopener">
|
||||
↗ 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>
|
||||
Reference in New Issue
Block a user