Upload via GUI (143 Dateien)

src/splash.html

@@ -0,0 +1,79 @@
+<!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>