344 lines
13 KiB
HTML
344 lines
13 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: Vom Shooter zum Metaverse – Hauptmenü</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<style>
|
||
:root {
|
||
--bg-main: #060409;
|
||
--bg-surface-solid: #120c1c;
|
||
--border-light: rgba(255, 255, 255, 0.08);
|
||
--text-primary: #f8fafc;
|
||
--text-secondary: #94a3b8;
|
||
--text-muted: #64748b;
|
||
--color-accent: #c5ff26;
|
||
--color-purple: #8b5cf6;
|
||
--color-cyan: #06b6d4;
|
||
--font-sans: "Outfit", sans-serif;
|
||
--font-mono: "Space Grotesk", sans-serif;
|
||
--transition-bounce: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: var(--font-sans);
|
||
background-color: var(--bg-main);
|
||
color: var(--text-primary);
|
||
overflow-x: hidden;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
.stars-bg {
|
||
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
|
||
background-image:
|
||
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
|
||
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
|
||
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px);
|
||
background-size: 550px 550px, 350px 350px, 250px 250px;
|
||
background-position: 0 0, 40px 60px, 130px 270px;
|
||
opacity: .12; z-index: -2; pointer-events: none;
|
||
}
|
||
.nebula-bg {
|
||
position: fixed; top: -20%; left: -10%; width: 140vw; height: 140vh;
|
||
background:
|
||
radial-gradient(circle at 30% 20%, rgba(139,92,246,.15) 0%, transparent 40%),
|
||
radial-gradient(circle at 70% 60%, rgba(6,182,212,.15) 0%, transparent 45%),
|
||
radial-gradient(circle at 50% 80%, rgba(197,255,38,.05) 0%, transparent 35%);
|
||
filter: blur(80px); z-index: -1; pointer-events: none;
|
||
}
|
||
.app-container {
|
||
width: 100%;
|
||
max-width: 960px;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 1.5rem;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
.app-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1rem 0 2rem;
|
||
border-bottom: 1px solid var(--border-light);
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
.logo {
|
||
font-family: var(--font-mono);
|
||
font-weight: 800;
|
||
font-size: 1.8rem;
|
||
letter-spacing: -.05em;
|
||
user-select: none;
|
||
}
|
||
.logo-accent { color: var(--text-primary); }
|
||
.logo-main {
|
||
color: var(--color-accent);
|
||
background: linear-gradient(135deg, var(--color-accent), #a3e635);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.header-badge {
|
||
background: #ffffff0a;
|
||
border: 1px solid var(--border-light);
|
||
border-radius: 99px;
|
||
padding: .5rem 1rem;
|
||
font-size: .85rem;
|
||
font-weight: 600;
|
||
letter-spacing: .05em;
|
||
text-transform: uppercase;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .5rem;
|
||
color: var(--color-cyan);
|
||
}
|
||
.hero-section {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
}
|
||
.hero-eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .5rem;
|
||
font-size: .8rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: .15em;
|
||
color: var(--color-purple);
|
||
background: #8b5cf614;
|
||
border: 1px solid rgba(139,92,246,.25);
|
||
padding: .4rem 1rem;
|
||
border-radius: 99px;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
.hero-section h1 {
|
||
font-size: clamp(2rem, 5vw, 3.1rem);
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
margin-bottom: 1.25rem;
|
||
letter-spacing: -.02em;
|
||
}
|
||
.text-glow { color: var(--color-purple); text-shadow: 0 0 15px rgba(139,92,246,.45); }
|
||
.hero-desc {
|
||
font-size: clamp(0.95rem, 2vw, 1.1rem);
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
}
|
||
.menu-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1.5rem;
|
||
width: 100%;
|
||
margin-bottom: 2rem;
|
||
}
|
||
.menu-card {
|
||
position: relative;
|
||
background: var(--bg-surface-solid);
|
||
border: 1px solid var(--border-light);
|
||
border-radius: 22px;
|
||
padding: 2.25rem 2rem;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition: var(--transition-bounce);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 340px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,.3);
|
||
}
|
||
.menu-card::before {
|
||
content: "";
|
||
position: absolute; inset: 0; pointer-events: none;
|
||
background: radial-gradient(120% 100% at 50% 0%, var(--glow) 0%, transparent 55%);
|
||
transition: var(--transition-smooth);
|
||
}
|
||
.menu-card::after {
|
||
content: "";
|
||
position: absolute; top: 0; left: 0; width: 100%; height: 4px;
|
||
background: var(--btn-color);
|
||
opacity: .8;
|
||
}
|
||
.menu-card:hover {
|
||
transform: translateY(-8px);
|
||
border-color: var(--btn-color);
|
||
box-shadow: var(--glow-full);
|
||
}
|
||
.menu-number {
|
||
font-family: var(--font-mono);
|
||
font-size: .85rem;
|
||
font-weight: 700;
|
||
color: var(--text-muted);
|
||
letter-spacing: .1em;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.menu-icon {
|
||
font-size: 2.75rem;
|
||
color: var(--btn-color);
|
||
margin-bottom: 1.25rem;
|
||
filter: drop-shadow(0 0 15px var(--glow));
|
||
}
|
||
.menu-card h3 {
|
||
font-family: var(--font-mono);
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
margin-bottom: .85rem;
|
||
color: #fff;
|
||
}
|
||
.menu-card p {
|
||
color: var(--text-secondary);
|
||
font-size: .95rem;
|
||
line-height: 1.55;
|
||
margin-bottom: 1.75rem;
|
||
flex-grow: 1;
|
||
}
|
||
.btn {
|
||
font-family: var(--font-sans);
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: .05em;
|
||
padding: 1rem 1.5rem;
|
||
border-radius: 12px;
|
||
border: none;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: .75rem;
|
||
transition: var(--transition-bounce);
|
||
font-size: .9rem;
|
||
width: 100%;
|
||
}
|
||
.btn-collab {
|
||
background: var(--color-purple);
|
||
color: #fff;
|
||
box-shadow: 0 0 20px rgba(139,92,246,.35);
|
||
}
|
||
.menu-card:hover .btn-collab { box-shadow: 0 0 30px rgba(139,92,246,.6); transform: translateY(-2px); }
|
||
.btn-price {
|
||
background: var(--color-cyan);
|
||
color: #001014;
|
||
box-shadow: 0 0 20px rgba(6,182,212,.35);
|
||
}
|
||
.menu-card:hover .btn-price { box-shadow: 0 0 30px rgba(6,182,212,.6); transform: translateY(-2px); }
|
||
.secondary-row {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.btn-ghost {
|
||
background: #ffffff08;
|
||
border: 1px solid var(--border-light);
|
||
color: var(--text-secondary);
|
||
padding: .8rem 1.5rem;
|
||
border-radius: 99px;
|
||
font-family: var(--font-sans);
|
||
font-size: .85rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .6rem;
|
||
transition: var(--transition-smooth);
|
||
text-transform: uppercase;
|
||
letter-spacing: .05em;
|
||
}
|
||
.btn-ghost:hover {
|
||
background: #ffffff12;
|
||
color: var(--text-primary);
|
||
border-color: var(--color-accent);
|
||
box-shadow: 0 0 18px rgba(197,255,38,.25);
|
||
}
|
||
footer {
|
||
margin-top: auto;
|
||
padding: 2rem 0 1rem;
|
||
color: var(--text-muted);
|
||
font-size: .85rem;
|
||
text-align: center;
|
||
border-top: 1px solid var(--border-light);
|
||
}
|
||
@media (max-width: 760px) {
|
||
.menu-grid { grid-template-columns: 1fr; }
|
||
.menu-card { min-height: auto; }
|
||
.app-header { flex-direction: column; gap: 1rem; text-align: center; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="stars-bg"></div>
|
||
<div class="nebula-bg"></div>
|
||
|
||
<div class="app-container">
|
||
<header class="app-header">
|
||
<div class="logo">
|
||
<span class="logo-accent">EPIC</span>
|
||
<span class="logo-main">EVOLUTION</span>
|
||
</div>
|
||
<div class="header-badge">
|
||
<i class="fa-solid fa-chart-line"></i> Wandel-Tracker
|
||
</div>
|
||
</header>
|
||
|
||
<div class="hero-section">
|
||
<span class="hero-eyebrow"><i class="fa-solid fa-gamepad"></i> Fortnite Präsentation</span>
|
||
<h1>Vom Shooter zum <span class="text-glow">Metaverse</span></h1>
|
||
<p class="hero-desc">
|
||
Fortnite hat sich von einem reinen Battle-Royale-Shooter zu einer gigantischen
|
||
Marken- und Monetarisierungs-Maschine gewandelt. Erlebe diesen Wandel interaktiv –
|
||
wähle einen der beiden Spielmodi:
|
||
</p>
|
||
</div>
|
||
|
||
<div class="menu-grid">
|
||
<div class="menu-card" onclick="location.href='collab_game.html#game'"
|
||
style="--glow: rgba(139,92,246,0.18); --glow-full: 0 15px 35px rgba(139,92,246,0.4); --btn-color: var(--color-purple);">
|
||
<div class="menu-number">MODUS 01</div>
|
||
<div class="menu-icon"><i class="fa-solid fa-globe"></i></div>
|
||
<h3>Guess the Collab</h3>
|
||
<p>
|
||
„Ist das wirklich in Fortnite?“ – Rate bei 50 realen Marken, Promis und
|
||
Produkten, ob Epic Games sie tatsächlich ins Spiel geholt hat. Inklusive
|
||
Enzyklopädie zum Nachschlagen aller Kooperationen.
|
||
</p>
|
||
<button class="btn btn-collab">
|
||
<i class="fa-solid fa-play"></i> Spiel starten
|
||
</button>
|
||
</div>
|
||
|
||
<div class="menu-card" onclick="location.href='price_game.html'"
|
||
style="--glow: rgba(6,182,212,0.18); --glow-full: 0 15px 35px rgba(6,182,212,0.4); --btn-color: var(--color-cyan);">
|
||
<div class="menu-number">MODUS 02</div>
|
||
<div class="menu-icon"><i class="fa-solid fa-coins"></i></div>
|
||
<h3>Guess the Price</h3>
|
||
<p>
|
||
Was kostet ein Skin? Schätze bei zufällig gezeigten Outfits den Preis in
|
||
V-Bucks – und sieh sofort, wie viel das in echten Euro ist. So entsteht ein
|
||
Gefühl für Fortnites Monetarisierung.
|
||
</p>
|
||
<button class="btn btn-price">
|
||
<i class="fa-solid fa-coins"></i> Preise raten
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="secondary-row">
|
||
<button class="btn-ghost" onclick="location.href='collab_game.html#encyclopedia'">
|
||
<i class="fa-solid fa-book"></i> Enzyklopädie der 50 Collabs ansehen
|
||
</button>
|
||
</div>
|
||
|
||
<footer>
|
||
Präsentationsplattform – Semester 2 (M.Sc. Medien, Business & Management)
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|