diff --git a/fortnite-experience/AIreadme.txt b/fortnite-experience/AIreadme.txt index 1487906..fb3ce6b 100644 --- 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 der Host-Seite einbinden: + + b) Den Block aus launch-snippet.html direkt nach einfuegen. + c) Falls der Ordner NICHT eine Ebene unter der Host-Seite liegt: + im Snippet den Pfad-Prefix "fortnite-experience/" anpassen + (bei href des UND bei src des ). + +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. diff --git a/fortnite-experience/fortnitegif.gif b/fortnite-experience/fortnitegif.gif new file mode 100644 index 0000000..51afade Binary files /dev/null and b/fortnite-experience/fortnitegif.gif differ diff --git a/fortnite-experience/launch-snippet.html b/fortnite-experience/launch-snippet.html new file mode 100644 index 0000000..b09b10c --- /dev/null +++ b/fortnite-experience/launch-snippet.html @@ -0,0 +1,34 @@ + + + + + NEU + Fortnite Experience Vorschau + Fortnite
Experience + ▶ Spielen + diff --git a/fortnite-experience/launch.css b/fortnite-experience/launch.css new file mode 100644 index 0000000..f6e57b3 --- /dev/null +++ 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 der Host-Seite verlinken: + + 3) Das Snippet aus launch-snippet.html in den 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; } +} diff --git a/fortnite-experience/launcher-demo.html b/fortnite-experience/launcher-demo.html new file mode 100644 index 0000000..701fd01 --- /dev/null +++ b/fortnite-experience/launcher-demo.html @@ -0,0 +1,60 @@ + + + + + + Fortnite-Experience · Launcher-Demo + + + + + + + + NEU + Fortnite Experience Vorschau + Fortnite
Experience + ▶ Spielen + + +
+

🎮 Fortnite-Experience · Launcher-Demo

+

+ Links schwebt der anklickbare GIF-Einstieg. Diese Seite dient + nur zur Vorschau/zum Test, dass dieser Ordner eigenständig lauffähig ist. +

+

+ Zum Einbauen auf einer echten Host-Seite: launch.css im + <head> einbinden und das Snippet aus + launch-snippet.html in den <body> kopieren. +

+ ▶ Direkt zur Experience +
+ +