685 lines
16 KiB
HTML
685 lines
16 KiB
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">
|
|
<style>
|
|
body.landing-page {
|
|
position: relative;
|
|
padding: 32px 20px;
|
|
background:
|
|
radial-gradient(circle at top, rgba(54, 91, 191, 0.18), transparent 34%),
|
|
radial-gradient(circle at 20% 20%, rgba(49, 189, 214, 0.12), transparent 24%),
|
|
linear-gradient(180deg, #02040b 0%, #07111f 55%, #03050c 100%);
|
|
}
|
|
|
|
body.landing-page::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
background-image:
|
|
linear-gradient(rgba(130, 170, 255, 0.06) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(130, 170, 255, 0.06) 1px, transparent 1px);
|
|
background-size: 64px 64px;
|
|
mask-image: radial-gradient(circle at center, black 40%, transparent 85%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
body.landing-page .page {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
max-width: 1100px;
|
|
}
|
|
|
|
body.landing-page .page-stack {
|
|
display: grid;
|
|
gap: 18px;
|
|
}
|
|
|
|
body.landing-page .background-orbit {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body.landing-page .background-orbit::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: min(72vw, 780px);
|
|
height: min(72vw, 780px);
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-18%, -48%);
|
|
border-radius: 50%;
|
|
background:
|
|
radial-gradient(circle, rgba(201, 168, 75, 0.12) 0%, rgba(84, 125, 255, 0.08) 26%, transparent 68%);
|
|
filter: blur(14px);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
body.landing-page .hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: clamp(28px, 4vw, 52px);
|
|
border: 1px solid rgba(133, 167, 255, 0.18);
|
|
border-radius: 32px;
|
|
background:
|
|
linear-gradient(145deg, rgba(7, 13, 27, 0.9), rgba(5, 10, 20, 0.72)),
|
|
rgba(7, 13, 27, 0.76);
|
|
box-shadow:
|
|
0 24px 90px rgba(0, 0, 0, 0.45),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
|
backdrop-filter: blur(18px);
|
|
animation: landing-fade-up 0.9s ease both;
|
|
}
|
|
|
|
body.landing-page .hero::before,
|
|
body.landing-page .hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
body.landing-page .hero::before {
|
|
width: 340px;
|
|
height: 340px;
|
|
top: -180px;
|
|
right: -140px;
|
|
background: radial-gradient(circle, rgba(104, 138, 255, 0.2), transparent 70%);
|
|
}
|
|
|
|
body.landing-page .hero::after {
|
|
width: 240px;
|
|
height: 240px;
|
|
bottom: -120px;
|
|
left: -80px;
|
|
background: radial-gradient(circle, rgba(56, 192, 215, 0.14), transparent 72%);
|
|
}
|
|
|
|
body.landing-page .hero-panel {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
gap: 28px;
|
|
align-items: center;
|
|
grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
|
|
}
|
|
|
|
body.landing-page .hero-copy {
|
|
text-align: left;
|
|
}
|
|
|
|
body.landing-page .hero-topline {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 18px;
|
|
padding: 8px 14px;
|
|
border: 1px solid rgba(201, 168, 75, 0.22);
|
|
border-radius: 999px;
|
|
background: rgba(201, 168, 75, 0.08);
|
|
color: rgba(232, 214, 159, 0.88);
|
|
font-size: 11px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
body.landing-page .hero-topline-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #88d8ff;
|
|
box-shadow: 0 0 14px rgba(136, 216, 255, 0.9);
|
|
}
|
|
|
|
body.landing-page .museum-pre {
|
|
margin: 0 0 10px;
|
|
color: rgba(200, 168, 75, 0.72);
|
|
font-size: 11px;
|
|
letter-spacing: 0.24em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
body.landing-page .hero-title {
|
|
margin: 0 0 16px;
|
|
color: #f0f6ff;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: clamp(44px, 8vw, 92px);
|
|
font-weight: 900;
|
|
letter-spacing: 0.08em;
|
|
line-height: 0.95;
|
|
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-subtitle {
|
|
max-width: 32ch;
|
|
margin: 0 0 18px;
|
|
color: rgba(227, 237, 255, 0.88);
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: clamp(24px, 3vw, 34px);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
body.landing-page .hero-divider {
|
|
width: 96px;
|
|
height: 1px;
|
|
margin: 0 0 20px;
|
|
background: linear-gradient(90deg, rgba(200, 168, 75, 0.9), transparent);
|
|
}
|
|
|
|
body.landing-page .hero-desc {
|
|
margin: 0 0 28px;
|
|
color: rgba(208, 221, 245, 0.72);
|
|
font-size: 13px;
|
|
letter-spacing: 0.03em;
|
|
line-height: 1.85;
|
|
}
|
|
|
|
body.landing-page .hero-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
body.landing-page .hero-chip {
|
|
padding: 10px 14px;
|
|
border: 1px solid rgba(133, 167, 255, 0.16);
|
|
border-radius: 14px;
|
|
background: rgba(11, 19, 35, 0.74);
|
|
color: rgba(215, 228, 252, 0.76);
|
|
font-size: 11px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
body.landing-page .hero-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 14px;
|
|
justify-content: center;
|
|
}
|
|
|
|
body.landing-page .hero-button,
|
|
body.landing-page .hero-link,
|
|
body.landing-page .redirect-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 54px;
|
|
padding: 0 24px;
|
|
border-radius: 999px;
|
|
text-decoration: none;
|
|
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease, background 0.22s ease;
|
|
}
|
|
|
|
body.landing-page .hero-button {
|
|
min-width: min(100%, 290px);
|
|
border: 1px solid rgba(114, 210, 255, 0.42);
|
|
background: linear-gradient(135deg, rgba(56, 192, 215, 0.22), rgba(84, 125, 255, 0.26));
|
|
box-shadow: 0 14px 36px rgba(37, 93, 191, 0.28);
|
|
color: #f5fbff;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
body.landing-page .hero-link,
|
|
body.landing-page .redirect-link {
|
|
border: 1px solid rgba(200, 168, 75, 0.22);
|
|
background: rgba(201, 168, 75, 0.06);
|
|
color: rgba(234, 215, 160, 0.9);
|
|
font-size: 11px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
body.landing-page .hero-button:hover,
|
|
body.landing-page .hero-link:hover,
|
|
body.landing-page .redirect-link:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
body.landing-page .hero-button:hover {
|
|
box-shadow: 0 18px 42px rgba(56, 192, 215, 0.24);
|
|
}
|
|
|
|
body.landing-page .hero-side {
|
|
display: none;
|
|
}
|
|
|
|
body.landing-page .ring-wrap {
|
|
--ring-offset-x: 0px;
|
|
--ring-offset-y: 0px;
|
|
position: relative;
|
|
width: min(72vw, 780px);
|
|
height: min(72vw, 780px);
|
|
margin: 0;
|
|
transform: translate(var(--ring-offset-x), var(--ring-offset-y));
|
|
transition: transform 0.1s ease-out;
|
|
opacity: 0.28;
|
|
}
|
|
|
|
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: 18%;
|
|
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: 36%;
|
|
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: clamp(38px, 6vw, 64px);
|
|
animation: landing-pulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
body.landing-page .redirect-banner {
|
|
border: 1px solid rgba(133, 167, 255, 0.16);
|
|
border-radius: 24px;
|
|
background: rgba(6, 12, 26, 0.78);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
body.landing-page .redirect-banner {
|
|
position: static;
|
|
left: auto;
|
|
bottom: auto;
|
|
transform: none;
|
|
z-index: 1;
|
|
width: 100%;
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
gap: 14px;
|
|
padding: 20px;
|
|
color: rgba(210, 224, 248, 0.72);
|
|
white-space: normal;
|
|
}
|
|
|
|
body.landing-page .redirect-copy {
|
|
display: grid;
|
|
gap: 6px;
|
|
text-align: left;
|
|
}
|
|
|
|
body.landing-page .redirect-label {
|
|
color: rgba(233, 216, 164, 0.86);
|
|
font-size: 11px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
body.landing-page .redirect-title {
|
|
font-size: 15px;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
body.landing-page .redirect-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
body.landing-page .redirect-countdown {
|
|
min-width: 58px;
|
|
padding: 12px 0;
|
|
border: 1px solid rgba(200, 168, 75, 0.22);
|
|
border-radius: 16px;
|
|
background: rgba(201, 168, 75, 0.08);
|
|
color: rgba(200, 168, 75, 0.9);
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
|
|
body.landing-page .redirect-progress {
|
|
flex: 1;
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
body.landing-page .redirect-progress-text {
|
|
color: rgba(210, 224, 248, 0.62);
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
body.landing-page .redirect-bar-wrap {
|
|
width: 100%;
|
|
height: 6px;
|
|
overflow: hidden;
|
|
border-radius: 999px;
|
|
background: rgba(133, 167, 255, 0.12);
|
|
}
|
|
|
|
body.landing-page .redirect-bar {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
background: linear-gradient(90deg, rgba(56, 192, 215, 0.8), rgba(200, 168, 75, 0.9));
|
|
transform-origin: left;
|
|
animation: landing-shrink 10s linear forwards;
|
|
}
|
|
|
|
body.landing-page .redirect-link {
|
|
justify-self: start;
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
body.landing-page .hero-panel {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
body.landing-page .hero-copy {
|
|
text-align: center;
|
|
}
|
|
|
|
body.landing-page .hero-divider,
|
|
body.landing-page .hero-subtitle,
|
|
body.landing-page .hero-desc {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
body.landing-page .hero-meta,
|
|
body.landing-page .hero-actions {
|
|
justify-content: center;
|
|
}
|
|
|
|
body.landing-page .background-orbit::before {
|
|
transform: translate(-50%, -42%);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
body.landing-page {
|
|
padding: 20px 14px;
|
|
}
|
|
|
|
body.landing-page .hero {
|
|
padding: 24px 18px;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
body.landing-page .hero-topline {
|
|
font-size: 10px;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
body.landing-page .hero-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
body.landing-page .hero-button,
|
|
body.landing-page .hero-link,
|
|
body.landing-page .redirect-link {
|
|
width: 100%;
|
|
}
|
|
|
|
body.landing-page .redirect-row {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
</style>
|
|
</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="background-orbit">
|
|
<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>
|
|
</div>
|
|
|
|
<div class="page">
|
|
<div class="page-stack">
|
|
<section class="hero">
|
|
<div class="hero-panel">
|
|
<div class="hero-copy">
|
|
<div class="hero-topline">
|
|
<span class="hero-topline-dot"></span>
|
|
<span>Observatory Interface</span>
|
|
</div>
|
|
|
|
<p class="museum-pre">Astronomiemuseum der Sternwarte Sonneberg · seit 1925</p>
|
|
<p class="museum-pre">Thüringens Tor ins Universum</p>
|
|
|
|
<h1 class="hero-title"><em>AstroTools</em></h1>
|
|
<p class="hero-subtitle">Digitale Werkzeuge für Beobachtung, Planung und Entdeckung.</p>
|
|
|
|
<div class="hero-divider"></div>
|
|
|
|
<div class="hero-meta">
|
|
<div class="hero-chip">Standort: Erbisbühl / Neufang</div>
|
|
<div class="hero-chip">638 m ü. NN</div>
|
|
<div class="hero-chip">IAU-Code 031</div>
|
|
</div>
|
|
|
|
<div class="hero-actions">
|
|
<a class="hero-button" href="public/index.php">Zur Hauptseite</a>
|
|
<a class="hero-link" href="https://astronomiemuseum.de" target="_blank" rel="noopener">
|
|
↗ astronomiemuseum.de
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="redirect-banner">
|
|
<div class="redirect-copy">
|
|
<span class="redirect-label">Automatische Weiterleitung</span>
|
|
<span class="redirect-title">Die Hauptseite wird automatisch geöffnet.</span>
|
|
</div>
|
|
|
|
<div class="redirect-row">
|
|
<span class="redirect-countdown" id="countdown">10</span>
|
|
<div class="redirect-progress">
|
|
<span class="redirect-progress-text">Weiter in wenigen Sekunden</span>
|
|
<div class="redirect-bar-wrap"><div class="redirect-bar"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<a class="redirect-link" href="public/index.php">Jetzt direkt →</a>
|
|
</div>
|
|
</div>
|
|
</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() < 0.15 ? [255, 220, 180] : Math.random() < 0.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 * 0.5;
|
|
const len = size * 6;
|
|
ctx.strokeStyle = `rgba(255,240,200,${a * 0.3})`;
|
|
ctx.lineWidth = 0.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 alpha = 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, alpha, s.c);
|
|
});
|
|
|
|
BRIGHT.forEach((s) => {
|
|
const alpha = s.a * (0.6 + 0.4 * Math.sin((t + s.tp) / s.tw * Math.PI * 2));
|
|
const x = s.x * canvas.width;
|
|
const y = s.y * canvas.height;
|
|
const gradient = ctx.createRadialGradient(x, y, 0, x, y, s.r * 4);
|
|
gradient.addColorStop(0, `rgba(255,245,220,${alpha * 0.6})`);
|
|
gradient.addColorStop(1, 'transparent');
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, s.r * 4, 0, Math.PI * 2);
|
|
ctx.fillStyle = gradient;
|
|
ctx.fill();
|
|
drawStar(x, y, s.r, alpha, [255, 245, 220]);
|
|
drawSpike(x, y, s.r, alpha);
|
|
});
|
|
|
|
requestAnimationFrame(draw);
|
|
})();
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
const xR = (e.clientX / window.innerWidth - 0.5) * 2;
|
|
const yR = (e.clientY / window.innerHeight - 0.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>
|