eis-website/fortnite-experience/launcher-demo.html

60 lines
2.5 KiB
HTML

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