80 lines
3.9 KiB
HTML
80 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="Content-Security-Policy"
|
|
content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; font-src 'self'" />
|
|
<title>AeroMC</title>
|
|
<style>
|
|
@font-face { font-family: 'AeroPixel'; src: url('assets/aeropixel.ttf'); }
|
|
html, body { margin: 0; height: 100%; overflow: hidden; background: transparent; user-select: none; cursor: default; }
|
|
body { font-family: 'Segoe UI', system-ui, sans-serif; }
|
|
|
|
/* Logo + Schriftzug in der Mitte */
|
|
.marke {
|
|
position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
|
|
transition: opacity .28s ease, transform .32s ease;
|
|
}
|
|
.buehne { perspective: 700px; animation: rein .45s cubic-bezier(.2, .9, .3, 1.2) both; }
|
|
.logo {
|
|
width: 132px; height: 132px; display: block;
|
|
filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(90, 160, 255, .35));
|
|
animation: drehen 1.3s cubic-bezier(.45, .05, .25, 1) .15s infinite;
|
|
}
|
|
.name {
|
|
font-size: 34px; font-weight: 600; letter-spacing: .06em; color: #fff;
|
|
text-shadow: 0 2px 10px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .9);
|
|
animation: schrift .5s ease .25s both;
|
|
}
|
|
@keyframes rein { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
|
|
@keyframes drehen { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
|
|
@keyframes schrift { from { opacity: 0; transform: translateY(8px); letter-spacing: .3em; } to { opacity: 1; transform: none; letter-spacing: .06em; } }
|
|
|
|
/* Schriftzug je Design */
|
|
body[data-design="aero"] .name, body[data-design="lila"] .name {
|
|
background: linear-gradient(90deg, #7fe3ff, #6c9cff); -webkit-background-clip: text; background-clip: text; color: transparent;
|
|
text-shadow: none; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .8));
|
|
}
|
|
body[data-design="lila"] .name { background-image: linear-gradient(90deg, #e3b8ff, #9d7bff); }
|
|
body[data-design="lila"] .logo { filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(170, 120, 255, .4)); }
|
|
body[data-design="minecraft"] .name {
|
|
font-family: 'AeroPixel', 'Segoe UI', sans-serif; font-weight: 400; font-size: 30px; letter-spacing: .04em;
|
|
text-shadow: 3px 3px 0 #3f3f3f, 0 0 10px rgba(0, 0, 0, .8);
|
|
}
|
|
|
|
/* das Launcher-Fenster als Bild, wächst von der Mitte nach außen */
|
|
#fenster { position: fixed; inset: 0; width: 100%; height: 100%; visibility: hidden; }
|
|
body.aufbau .marke { opacity: 0; transform: scale(.82); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="marke">
|
|
<div class="buehne"><img class="logo" src="assets/logo.png" alt="" /></div>
|
|
<div class="name">AeroMC</div>
|
|
</div>
|
|
<img id="fenster" alt="" />
|
|
<script>
|
|
document.body.dataset.design = new URLSearchParams(location.search).get('design') || 'dark';
|
|
|
|
// vom Hauptprozess aufgerufen: Bild des fertigen Launchers von der Mitte aus aufziehen
|
|
window.aufbauen = (bildAdresse) => new Promise((fertig) => {
|
|
const bild = document.getElementById('fenster');
|
|
bild.onerror = () => fertig(false);
|
|
bild.onload = () => {
|
|
const v = Math.max(0, innerHeight / 2 - 66);
|
|
const h = Math.max(0, innerWidth / 2 - 66);
|
|
bild.style.visibility = 'visible';
|
|
document.body.classList.add('aufbau');
|
|
bild.animate([
|
|
{ clipPath: `inset(${v}px ${h}px round 30px)`, opacity: 0.2 },
|
|
{ opacity: 1, offset: 0.25 },
|
|
{ clipPath: 'inset(0px 0px round 0px)', opacity: 1 },
|
|
], { duration: 560, easing: 'cubic-bezier(.2, .8, .2, 1)', fill: 'forwards' })
|
|
.finished.then(() => fertig(true), () => fertig(false));
|
|
};
|
|
bild.src = bildAdresse;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|