davidkertzscher/eis-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
David Kertzscher 2026-07-15 15:17:46 +00:00
parent 32fd9a0cbb
commit bb1b4a79c2
5 changed files with 268 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
fortnite-experience/AIreadme.txt
View file

@ -20,7 +20,17 @@ Wichtige Laufzeitdateien (MUSS bleiben)
- skins.js - skins.js
- images/ (kompletter Ordner mit Collab-Bildern) - 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 Startpunkte / Routing
@ -68,6 +78,43 @@ WICHTIG (Relative Pfade):
- Nicht einzelne Dateien aus dem Kontext reißen. - 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 Schnelle Server-Checks nach Upload
---------------------------------- ----------------------------------
Mindestens diese URLs auf HTTP 200 prüfen: 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#game
- /fortnite-experience/collab_game.html#encyclopedia - /fortnite-experience/collab_game.html#encyclopedia
- /fortnite-experience/price_game.html - /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: Manuelle Smoke-Checks:
1) Von index -> Guess the Collab klickbar 1) launcher-demo.html oeffnen -> schwebendes GIF links sichtbar, fuehrt zu index.html
2) Von index -> Guess the Price klickbar 2) Von index -> Guess the Collab klickbar
3) Enzyklopädie öffnet direkt über #encyclopedia 3) Von index -> Guess the Price klickbar
4) Bilder in collab_game laden (images/*) 4) Enzyklopädie öffnet direkt über #encyclopedia
5) skins.js lädt in price_game 5) Bilder in collab_game laden (images/*)
6) Top-Button "Nächster Skin" erscheint nach jeder Antwort 6) skins.js lädt in price_game
7) Top-Button "Nächster Skin" erscheint nach jeder Antwort
Nicht anfassen / typische Fehler Nicht anfassen / typische Fehler
@ -90,10 +141,14 @@ Nicht anfassen / typische Fehler
- Dateinamen nicht ändern, sonst brechen relative Links. - Dateinamen nicht ändern, sonst brechen relative Links.
- images/ nicht teilweise löschen. - images/ nicht teilweise löschen.
- skins.js nicht umbenennen. - 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. - Keine Basis-URL erzwingen, wenn die App im Unterpfad läuft.
Kurzfazit Kurzfazit
--------- ---------
Wenn dieser Ordner 1:1 auf den Server kopiert und über index.html aufgerufen wird, Wenn dieser Ordner 1:1 auf den Server kopiert wird, ist ALLES dabei:
ist die App direkt lauffähig. 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.

BIN
fortnite-experience/fortnitegif.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 MiB

34
fortnite-experience/launch-snippet.html Normal file
View file

@ -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>

110
fortnite-experience/launch.css Normal file
View file

@ -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; }
}

60
fortnite-experience/launcher-demo.html Normal file
View file

@ -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>