Fortnite-Experience portabel gemacht: Einstiegs-GIF, eigenstaendiges launch.css, launch-snippet.html und launcher-demo.html in den Ordner gebuendelt; AIreadme.txt um Raus-/Reinkopier-Anleitung ergaenzt

2026-07-15 15:17:46 +00:00 · 2026-07-15 15:17:46 +00:00 · bb1b4a79c2
commit bb1b4a79c2
parent 32fd9a0cbb
5 changed files with 268 additions and 9 deletions
--- a/fortnite-experience/AIreadme.txt
+++ b/fortnite-experience/AIreadme.txt
@ -20,7 +20,17 @@ Wichtige Laufzeitdateien (MUSS bleiben)
 - skins.js
 - images/  (kompletter Ordner mit Collab-Bildern)

-Ohne diese Dateien funktioniert die App nicht vollständig.
+Launcher / Einstiegs-GIF (gehoert jetzt AUCH in diesen Ordner)
+--------------------------------------------------------------
+- fortnitegif.gif      -> das anklickbare Vorschau-GIF (Einstieg)
+- launch.css           -> eigenstaendiges CSS fuer den schwebenden Einstiegs-Button
+- launch-snippet.html  -> fertiger HTML-Block zum Einfuegen in eine Host-Seite
+- launcher-demo.html   -> Test-/Demo-Seite; zeigt den Button ordner-lokal
+
+Damit ist der gesamte Fortnite-Einstieg (GIF + Button + Spiele) in DIESEM
+Ordner gebuendelt und kann als Ganzes auf einen anderen Server gezogen werden.
+
+Ohne diese Dateien funktioniert die App nicht vollstaendig.


 Startpunkte / Routing
@ -68,6 +78,43 @@ WICHTIG (Relative Pfade):
 - Nicht einzelne Dateien aus dem Kontext reißen.


+RAUS- / REINKOPIEREN DES ORDNERS (Portabilitaet)
+------------------------------------------------
+Ziel: Diesen Ordner 1:1 auf einen anderen Server ziehen und sofort
+weiterarbeiten koennen - inklusive dem anklickbaren Einstiegs-GIF.
+
+Was mitgenommen wird (alles bereits in diesem Ordner):
+- Die komplette Mini-Webapp (index.html, Spiele, app.js, style.css, skins.js, images/)
+- Das Einstiegs-GIF               -> fortnitegif.gif
+- Das Launcher-CSS                -> launch.css
+- Das Einfuege-Snippet            -> launch-snippet.html
+- Eine Demo-/Testseite            -> launcher-demo.html
+
+RAUSKOPIEREN (aus diesem Projekt heraus):
+1) Den GESAMTEN Ordner /fortnite-experience/ kopieren - nichts einzeln.
+2) Fertig. Es gibt keine Abhaengigkeiten mehr nach ausserhalb des Ordners
+   (das GIF liegt jetzt lokal hier, nicht mehr nur im Projekt-Root).
+
+REINKOPIEREN (auf einem neuen Server / neuen Projekt):
+1) Ordner z. B. unter  /fortnite-experience/  ablegen.
+2) Schnelltest ohne Host-Seite:  launcher-demo.html  im Browser oeffnen
+   -> links muss das schwebende GIF erscheinen und in die Experience fuehren.
+3) In eine bestehende Host-Seite einbauen:
+   a) Im <head> der Host-Seite einbinden:
+        <link rel="stylesheet" href="fortnite-experience/launch.css">
+   b) Den Block aus  launch-snippet.html  direkt nach <body> einfuegen.
+   c) Falls der Ordner NICHT eine Ebene unter der Host-Seite liegt:
+      im Snippet den Pfad-Prefix "fortnite-experience/" anpassen
+      (bei href des <a> UND bei src des <img>).
+
+HINWEIS zum alten Einbau im Ur-Projekt (nur zur Info):
+- Frueher lag das GIF im Projekt-Root (../fortnitegif.gif) und die
+  Launcher-Styles steckten in der grossen css/style.css der Hauptseite.
+- Beides ist jetzt zusaetzlich HIER im Ordner vorhanden, damit der Ordner
+  eigenstaendig ist. Beim Rauskopieren muss man daher NICHTS mehr aus dem
+  Root oder aus css/style.css mitnehmen.
+
+
 Schnelle Server-Checks nach Upload
 ----------------------------------
 Mindestens diese URLs auf HTTP 200 prüfen:
@ -75,14 +122,18 @@ Mindestens diese URLs auf HTTP 200 prüfen:
 - /fortnite-experience/collab_game.html#game
 - /fortnite-experience/collab_game.html#encyclopedia
 - /fortnite-experience/price_game.html
+- /fortnite-experience/fortnitegif.gif   (Einstiegs-GIF)
+- /fortnite-experience/launch.css        (Launcher-Styles)
+- /fortnite-experience/launcher-demo.html (Launcher-Vorschau)

 Manuelle Smoke-Checks:
-1) Von index -> Guess the Collab klickbar
-2) Von index -> Guess the Price klickbar
-3) Enzyklopädie öffnet direkt über #encyclopedia
-4) Bilder in collab_game laden (images/*)
-5) skins.js lädt in price_game
-6) Top-Button "Nächster Skin" erscheint nach jeder Antwort
+1) launcher-demo.html oeffnen -> schwebendes GIF links sichtbar, fuehrt zu index.html
+2) Von index -> Guess the Collab klickbar
+3) Von index -> Guess the Price klickbar
+4) Enzyklopädie öffnet direkt über #encyclopedia
+5) Bilder in collab_game laden (images/*)
+6) skins.js lädt in price_game
+7) Top-Button "Nächster Skin" erscheint nach jeder Antwort


 Nicht anfassen / typische Fehler
@ -90,10 +141,14 @@ Nicht anfassen / typische Fehler
 - Dateinamen nicht ändern, sonst brechen relative Links.
 - images/ nicht teilweise löschen.
 - skins.js nicht umbenennen.
+- fortnitegif.gif / launch.css nicht umbenennen (sonst bricht der Einstieg).
 - Keine Basis-URL erzwingen, wenn die App im Unterpfad läuft.


 Kurzfazit
 ---------
-Wenn dieser Ordner 1:1 auf den Server kopiert und über index.html aufgerufen wird,
-ist die App direkt lauffähig.
+Wenn dieser Ordner 1:1 auf den Server kopiert wird, ist ALLES dabei:
+die beiden Spiele UND der anklickbare GIF-Einstieg. Zum Testen
+launcher-demo.html oeffnen; zum Einbauen launch.css + launch-snippet.html
+in die Host-Seite uebernehmen. Nichts muss mehr aus dem Ur-Projekt-Root
+oder aus dessen css/style.css mitgenommen werden.
--- a/fortnite-experience/fortnitegif.gif
+++ b/fortnite-experience/fortnitegif.gif
--- a/fortnite-experience/launch-snippet.html
+++ b/fortnite-experience/launch-snippet.html
@ -0,0 +1,34 @@
+<!--
+  ============================================================
+  🎮 Fortnite-Experience · Launcher-Snippet (zum Einfügen)
+  ============================================================
+  So bindest du den anklickbaren GIF-Einstieg auf einer beliebigen
+  Host-Seite ein:
+
+  1) Diesen Ordner (fortnite-experience/) auf den Server legen.
+  2) Im <head> der Host-Seite das Launcher-CSS verlinken:
+       <link rel="stylesheet" href="fortnite-experience/launch.css">
+  3) Den unteren <a>-Block direkt nach dem <body>-Tag einfügen.
+
+  WICHTIG – Pfade:
+  - Die href/src unten gehen davon aus, dass die Host-Seite EINE Ebene
+    ÜBER diesem Ordner liegt (z. B. Root und /fortnite-experience/).
+  - Liegt die Host-Seite woanders, den Prefix "fortnite-experience/"
+    an den tatsächlichen Pfad anpassen (z. B. "/spiele/fortnite-experience/").
+  - Alle Dateien (GIF, CSS, index.html) liegen in DIESEM Ordner, also
+    reicht es, den Ordner komplett zu kopieren.
+  ============================================================
+-->
+
+<!-- 🎮 Fortnite-Experience: anklickbarer Einstieg am linken Rand -->
+<a href="fortnite-experience/index.html"
+   class="fortnite-launch"
+   title="Fortnite Experience starten"
+   aria-label="Fortnite Experience starten">
+  <span class="fortnite-launch-badge">NEU</span>
+  <img src="fortnite-experience/fortnitegif.gif"
+       alt="Fortnite Experience Vorschau"
+       class="fortnite-launch-gif">
+  <span class="fortnite-launch-label">Fortnite<br>Experience</span>
+  <span class="fortnite-launch-cta">▶&nbsp;Spielen</span>
+</a>
--- a/fortnite-experience/launch.css
+++ b/fortnite-experience/launch.css
@ -0,0 +1,110 @@
+/* ============================================================
+   🎮 Fortnite-Experience · Launcher-Button (eigenständig)
+   ============================================================
+   Dieser anklickbare GIF-Einstieg am linken Bildschirmrand führt
+   auf die Fortnite-Experience (index.html dieses Ordners).
+
+   EINBINDEN AUF EINER FREMDEN SEITE:
+   1) Diesen Ordner z. B. unter  /fortnite-experience/  ablegen.
+   2) Im <head> der Host-Seite verlinken:
+        <link rel="stylesheet" href="fortnite-experience/launch.css">
+   3) Das Snippet aus  launch-snippet.html  in den <body> einfügen.
+      (Pfade im Snippet ggf. an den Ablageort anpassen.)
+
+   Der Button ist position:fixed und schwebt unabhängig vom Layout.
+   ============================================================ */
+
+.fortnite-launch {
+  position: fixed;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 950;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.45rem;
+  width: 118px;
+  padding: 0.6rem 0.55rem 0.7rem;
+  background: linear-gradient(160deg, #8b5cf6 0%, #6d28d9 45%, #06b6d4 100%);
+  border: 2px solid rgba(255, 255, 255, 0.55);
+  border-left: none;
+  border-radius: 0 20px 20px 0;
+  box-shadow: 0 10px 34px rgba(109, 40, 217, 0.5);
+  text-decoration: none;
+  cursor: pointer;
+  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+              box-shadow 0.35s ease;
+}
+.fortnite-launch:hover {
+  transform: translateY(-50%) scale(1.07);
+  box-shadow: 0 14px 44px rgba(6, 182, 212, 0.65);
+}
+.fortnite-launch:active {
+  transform: translateY(-50%) scale(1.02);
+}
+.fortnite-launch-badge {
+  position: absolute;
+  top: -10px;
+  right: -8px;
+  background: #ff1493;
+  color: #fff;
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  padding: 0.15rem 0.5rem;
+  border-radius: 99px;
+  border: 2px solid #fff;
+  box-shadow: 0 3px 10px rgba(255, 20, 147, 0.5);
+}
+.fortnite-launch-gif {
+  width: 96px;
+  height: auto;
+  display: block;
+  border-radius: 14px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  animation: fortnite-glow 2.4s ease-in-out infinite;
+}
+.fortnite-launch-label {
+  font-family: 'Segoe UI', Tahoma, sans-serif;
+  font-size: 0.82rem;
+  font-weight: 800;
+  color: #ffffff;
+  text-align: center;
+  line-height: 1.12;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
+  letter-spacing: 0.02em;
+}
+.fortnite-launch-cta {
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: #f0abfc;
+  background: rgba(0, 0, 0, 0.28);
+  padding: 0.2rem 0.7rem;
+  border-radius: 99px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+@keyframes fortnite-glow {
+  0%, 100% { filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.6)); }
+  50%      { filter: drop-shadow(0 0 12px rgba(6, 182, 212, 0.95)); }
+}
+
+/* Mobile: kompakter, damit nichts überdeckt wird */
+@media (max-width: 768px) {
+  .fortnite-launch {
+    width: 78px;
+    padding: 0.4rem 0.35rem 0.5rem;
+    gap: 0.3rem;
+    border-radius: 0 14px 14px 0;
+  }
+  .fortnite-launch-gif { width: 62px; border-radius: 10px; }
+  .fortnite-launch-label { font-size: 0.62rem; }
+  .fortnite-launch-cta { font-size: 0.58rem; padding: 0.15rem 0.5rem; }
+  .fortnite-launch-badge { font-size: 0.52rem; top: -8px; right: -6px; }
+}
+
+/* Barrierefreiheit: Animationen reduzieren, wenn gewünscht */
+@media (prefers-reduced-motion: reduce) {
+  .fortnite-launch-gif { animation: none; }
+  .fortnite-launch { transition: none; }
+}
--- a/fortnite-experience/launcher-demo.html
+++ b/fortnite-experience/launcher-demo.html
@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Fortnite-Experience · Launcher-Demo</title>
+  <!-- Eigenständiges Launcher-CSS aus diesem Ordner -->
+  <link rel="stylesheet" href="launch.css">
+  <style>
+    body {
+      margin: 0; min-height: 100vh; font-family: 'Segoe UI', Tahoma, sans-serif;
+      background: radial-gradient(circle at 30% 20%, #1e1b4b, #0f172a 60%);
+      color: #e5e7eb; display: flex; align-items: center; justify-content: center;
+      padding: 2rem; box-sizing: border-box;
+    }
+    .demo-card {
+      max-width: 620px; background: rgba(15,23,42,.7); border: 1px solid #334155;
+      border-radius: 18px; padding: 2.2rem 2rem; box-shadow: 0 20px 60px rgba(0,0,0,.5);
+    }
+    .demo-card h1 { margin: 0 0 .4rem; font-size: 1.6rem; }
+    .demo-card p { line-height: 1.55; color: #cbd5e1; }
+    .demo-card code {
+      background: #0b1220; border: 1px solid #334155; border-radius: 6px;
+      padding: .12rem .4rem; font-size: .92em; color: #f0abfc;
+    }
+    .demo-enter {
+      display: inline-block; margin-top: 1rem; padding: .8rem 1.6rem;
+      background: linear-gradient(160deg,#8b5cf6,#06b6d4); color: #fff;
+      font-weight: 800; text-decoration: none; border-radius: 99px;
+      box-shadow: 0 8px 24px rgba(109,40,217,.5);
+    }
+  </style>
+</head>
+<body>
+  <!-- Der schwebende GIF-Launcher (identisch zum Host-Snippet, aber ordner-lokale Pfade) -->
+  <a href="index.html"
+     class="fortnite-launch"
+     title="Fortnite Experience starten"
+     aria-label="Fortnite Experience starten">
+    <span class="fortnite-launch-badge">NEU</span>
+    <img src="fortnitegif.gif" alt="Fortnite Experience Vorschau" class="fortnite-launch-gif">
+    <span class="fortnite-launch-label">Fortnite<br>Experience</span>
+    <span class="fortnite-launch-cta">▶&nbsp;Spielen</span>
+  </a>
+
+  <div class="demo-card">
+    <h1>🎮 Fortnite-Experience · Launcher-Demo</h1>
+    <p>
+      Links schwebt der anklickbare <strong>GIF-Einstieg</strong>. Diese Seite dient
+      nur zur Vorschau/zum Test, dass dieser Ordner <em>eigenständig</em> lauffähig ist.
+    </p>
+    <p>
+      Zum Einbauen auf einer echten Host-Seite: <code>launch.css</code> im
+      <code>&lt;head&gt;</code> einbinden und das Snippet aus
+      <code>launch-snippet.html</code> in den <code>&lt;body&gt;</code> kopieren.
+    </p>
+    <a class="demo-enter" href="index.html">▶ Direkt zur Experience</a>
+  </div>
+</body>
+</html>