338 lines
18 KiB
HTML
338 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Is this thing in Fortnite? - Das Absurditäts-Quiz</title>
|
||
<!-- Google Fonts -->
|
||
<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">
|
||
<!-- FontAwesome for Icons -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<!-- Stylesheet -->
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="stars-bg"></div>
|
||
<div class="nebula-bg"></div>
|
||
|
||
<div class="app-container">
|
||
<!-- HEADER -->
|
||
<header class="app-header" style="justify-content:center;"><div style="display:flex; gap: 15px; align-items:center;"><button onclick="location.href='index.html'" class="btn btn-secondary" style="padding:0.4rem 1rem; font-size:0.8rem; height:36px; display:inline-flex; border-radius:30px; border-color:rgba(255,255,255,0.2);"><i class="fa-solid fa-house"></i> Startseite</button></div>
|
||
</header>
|
||
|
||
<!-- GAME SCREEN -->
|
||
<section id="game-view" class="view active">
|
||
<!-- Game Progress & Stats -->
|
||
<div class="game-hud">
|
||
<div class="hud-left">
|
||
<span id="question-progress">Frage 1 von 10</span>
|
||
<div class="progress-container">
|
||
<div id="progress-bar" class="progress-bar" style="width: 10%;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="hud-right">
|
||
<div class="stat-counter counter-believe">
|
||
<span class="stat-label"><i class="fa-solid fa-circle-check"></i> Richtig:</span>
|
||
<span id="count-believe" class="stat-val">0</span>
|
||
</div>
|
||
<div class="stat-counter counter-doubt">
|
||
<span class="stat-label"><i class="fa-solid fa-circle-xmark"></i> Falsch:</span>
|
||
<span id="count-doubt" class="stat-val">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card Play Area -->
|
||
<div class="card-container">
|
||
<div id="game-card" class="game-card">
|
||
<div class="card-header">
|
||
<span id="card-category" class="category-tag"><i class="fa-solid fa-shoe-prints"></i> Schuhe & Mode</span>
|
||
<span id="card-brand" class="brand-tag">Nike</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h2 id="card-title">Air Jordan 1 High OG "Chicago"</h2>
|
||
|
||
<!-- Image Container (Real product/person) -->
|
||
<div class="card-image-wrapper">
|
||
<img id="card-image" src="" alt="Kooperation Bild" style="display: none;">
|
||
<div id="card-image-fallback" class="image-fallback">
|
||
<div class="fallback-icon-wrapper">
|
||
<i id="fallback-icon" class="fa-solid fa-shoe-prints"></i>
|
||
</div>
|
||
<span class="fallback-tip">Kein Bild geladen<br><small id="fallback-path">images/image.jpg</small></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-footer">
|
||
<p class="action-prompt">Ist das in Fortnite?</p>
|
||
<div class="decision-buttons">
|
||
<button id="btn-no" class="btn-choice btn-no">
|
||
<i class="fa-solid fa-xmark"></i> NEIN
|
||
</button>
|
||
<button id="btn-yes" class="btn-choice btn-yes">
|
||
<i class="fa-solid fa-check"></i> JA
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Feedback Overlay -->
|
||
<div id="feedback-overlay" class="feedback-overlay">
|
||
<div class="feedback-content">
|
||
<div class="feedback-header">
|
||
<div id="feedback-icon-box" class="feedback-icon-box">
|
||
<i id="feedback-result-icon" class="fa-solid fa-circle-check"></i>
|
||
</div>
|
||
<h3 id="feedback-title">Richtig!</h3>
|
||
</div>
|
||
|
||
<div class="feedback-body">
|
||
<p id="feedback-subtitle" class="feedback-subtitle">Doch, das ist wirklich in Fortnite!</p>
|
||
|
||
<!-- Fortnite Version Image in feedback -->
|
||
<div class="feedback-image-wrapper">
|
||
<img id="feedback-image" src="" alt="Fortnite Version" style="display: none;">
|
||
<div id="feedback-image-fallback" class="image-fallback">
|
||
<div class="fallback-icon-wrapper">
|
||
<i id="feedback-fallback-icon" class="fa-solid fa-gamepad"></i>
|
||
</div>
|
||
<span class="fallback-tip">Kein Bild geladen<br><small id="feedback-fallback-path">images/image.jpg</small></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-sheet">
|
||
<div class="info-row">
|
||
<span class="info-label">Erschienen:</span>
|
||
<span id="feedback-release" class="info-value">Dezember 2024</span>
|
||
</div>
|
||
<div class="info-desc-box">
|
||
<p id="feedback-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feedback-footer">
|
||
<button id="btn-next" class="btn btn-primary">
|
||
Weiter <i class="fa-solid fa-arrow-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- RESULTS SCREEN -->
|
||
<section id="results-view" class="view">
|
||
<div class="results-container">
|
||
<div class="results-header">
|
||
<div class="trophy-wrapper">
|
||
<i class="fa-solid fa-trophy trophy-icon"></i>
|
||
</div>
|
||
<h2>Spiel beendet!</h2>
|
||
<p class="results-subtitle">Du hast dich den 50 Absurditäten gestellt.</p>
|
||
</div>
|
||
|
||
<div class="results-summary">
|
||
<div class="score-grid">
|
||
<div class="score-card">
|
||
<span class="score-num text-glow-green" id="result-believe">0</span>
|
||
<span class="score-lbl">Richtig beantwortet</span>
|
||
</div>
|
||
<div class="score-card">
|
||
<span class="score-num text-glow-red" id="result-doubt">0</span>
|
||
<span class="score-lbl">Falsch beantwortet</span>
|
||
</div>
|
||
<div class="score-card full-width">
|
||
<span class="score-num text-glow-blue" id="result-ratio">0%</span>
|
||
<span class="score-lbl">Erfolgsquote</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="verdict-box">
|
||
<h3>Dein Realitäts-Urteil:</h3>
|
||
<p id="result-verdict-title" class="verdict-title">Gesunder Skeptiker</p>
|
||
<p id="result-verdict-desc" class="verdict-desc">Du glaubst noch an das Gute in der Welt und hast gezweifelt, dass Epic Games wirklich alles in dieses Spiel wirft.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- List of items the user doubted -->
|
||
<div id="doubts-list-container" class="doubts-list-container" style="display: none;">
|
||
<h3>Die Collabs, bei denen du falsch lagst:</h3>
|
||
<div id="doubts-list" class="doubts-list">
|
||
<!-- Dynamically filled -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Conclusion Section -->
|
||
<div class="results-conclusion-card">
|
||
<h3><i class="fa-solid fa-globe"></i> Das Fortnite-Multiversum</h3>
|
||
<p class="conclusion-text">
|
||
Du siehst also: All diese höchst unterschiedlichen Marken, Charaktere und Prominenten sind tatsächlich in Fortnite vertreten. Wie man unschwer erkennen kann, ist diese extreme Vermischung vor allem in den letzten Jahren passiert. In den früheren Jahren des Spiels war die Themenstreuung bei weitem nicht so willkürlich und die Frequenz der Kooperations-Skins lange nicht so hoch.
|
||
</p>
|
||
<div class="monetization-promo">
|
||
<p class="promo-text">Um mehr über die Monetarisierung von Fortnite zu erfahren, geh hier zum Guess the Prize Game:</p>
|
||
<div class="placeholder-btn-wrapper">
|
||
<button class="btn btn-primary" onclick="location.href='price_game.html'" style="background:var(--color-cyan); color:#000; box-shadow:0 0 15px var(--color-cyan);">
|
||
<i class="fa-solid fa-coins"></i> <i class="fa-solid fa-coins"></i> Guess the Price Game starten
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="results-actions">
|
||
<button id="btn-restart" class="btn btn-primary">
|
||
<i class="fa-solid fa-rotate-right"></i> Startseite & Nochmal spielen
|
||
</button>
|
||
<button id="btn-view-encyclopedia" class="btn btn-secondary">
|
||
<i class="fa-solid fa-book"></i> Zu Wissenswertes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ENCYCLOPEDIA SCREEN -->
|
||
<section id="encyclopedia-view" class="view">
|
||
<div class="encyclopedia-header-section">
|
||
<h2>FORTNITE WISSENSWERTES</h2>
|
||
<p>Das große Nachschlagewerk: Wie genau verdient Fortnite eigentlich sein Geld? Und welche absurden Collabs gibt es? Wähle einen Bereich.</p>
|
||
</div>
|
||
|
||
<!-- Sub-Tab Navigation -->
|
||
<div class="enc-subtabs">
|
||
<button class="enc-subtab active" data-subtab="monetization">
|
||
<i class="fa-solid fa-coins"></i> Monetarisierung
|
||
</button>
|
||
<button class="enc-subtab" data-subtab="collabs">
|
||
<i class="fa-solid fa-handshake-angle"></i> Collabs
|
||
</button>
|
||
</div>
|
||
|
||
<!-- ================= SUB-PANEL: MONETARISIERUNG ================= -->
|
||
<div id="enc-sub-monetization" class="enc-subpanel active">
|
||
<div class="monet-intro">
|
||
<div class="monet-intro-icon"><i class="fa-solid fa-sack-dollar"></i></div>
|
||
<div>
|
||
<h3>Wie Fortnite Milliarden verdient</h3>
|
||
<p>Fortnite ist <strong>kostenlos</strong> – und trotzdem eines der umsatzstärksten Spiele der Welt (über 9 Mrd. $ allein bis Ende 2019). Der Trick: Dutzende clevere, teils umstrittene Monetarisierungs-Methoden. Alle bezahlt man mit der Kunstwährung <strong class="hl-vbucks">V‑Bucks</strong>. Tippe auf eine Methode, um alles darüber zu erfahren.</p>
|
||
<div class="vbucks-ref">
|
||
<i class="fa-solid fa-circle-info"></i>
|
||
<span><strong>Umrechnung:</strong> 1.000 V‑Bucks ≈ 8,99 €. Seit dem großen Preis-Anstieg im März 2026 kosten 800 V‑Bucks rund 10 $.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Monetization Grid (dynamically filled) -->
|
||
<div id="monetization-grid" class="monetization-grid">
|
||
<!-- Dynamically filled -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= SUB-PANEL: COLLABS ================= -->
|
||
<div id="enc-sub-collabs" class="enc-subpanel">
|
||
<!-- Controls (Filters) -->
|
||
<div class="encyclopedia-controls" style="justify-content: center;">
|
||
<div class="filter-tabs">
|
||
<button class="filter-tab active" data-filter="all">Alle (50)</button>
|
||
<button class="filter-tab" data-filter="fashion"><i class="fa-solid fa-shoe-prints"></i> Mode</button>
|
||
<button class="filter-tab" data-filter="car"><i class="fa-solid fa-car"></i> Autos</button>
|
||
<button class="filter-tab" data-filter="celebrity"><i class="fa-solid fa-user"></i> Promis & Sport</button>
|
||
<button class="filter-tab" data-filter="horror"><i class="fa-solid fa-ghost"></i> Horror</button>
|
||
<button class="filter-tab" data-filter="popculture"><i class="fa-solid fa-gamepad"></i> Kultur & Games</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Grid -->
|
||
<div id="encyclopedia-grid" class="encyclopedia-grid">
|
||
<!-- Dynamically filled -->
|
||
</div>
|
||
|
||
<!-- Stats in Footer of Encyclopedia -->
|
||
<div class="encyclopedia-stats">
|
||
<span>Einträge gesamt: <strong id="enc-total-count">50</strong></span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<footer>
|
||
Master Medien- und Bildungsmanagement
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- Details Modal (Encyclopedia Detail view) -->
|
||
<div id="detail-modal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close-modal">×</span>
|
||
<div class="modal-header">
|
||
<span id="modal-category" class="category-tag">Kategorie</span>
|
||
<span id="modal-brand" class="brand-tag">Marke</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<h2 id="modal-title">Titel der Kooperation</h2>
|
||
|
||
<!-- Side-by-side comparison inside detail modal -->
|
||
<div class="modal-images-comparison">
|
||
<div class="modal-image-box">
|
||
<span class="image-label">Realität</span>
|
||
<div class="modal-image-wrapper">
|
||
<img id="modal-image-real" src="" alt="Reales Vorbild" style="display: none;">
|
||
<div id="modal-image-real-fallback" class="image-fallback">
|
||
<div class="fallback-icon-wrapper" style="width: 40px; height: 40px; font-size: 1.2rem;">
|
||
<i id="modal-fallback-real-icon" class="fa-solid fa-image"></i>
|
||
</div>
|
||
<span class="fallback-tip" style="font-size: 0.65rem;">Kein Bild</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-image-box">
|
||
<span class="image-label">Fortnite</span>
|
||
<div class="modal-image-wrapper">
|
||
<img id="modal-image-fn" src="" alt="Fortnite Version" style="display: none;">
|
||
<div id="modal-image-fn-fallback" class="image-fallback">
|
||
<div class="fallback-icon-wrapper" style="width: 40px; height: 40px; font-size: 1.2rem;">
|
||
<i id="modal-fallback-fn-icon" class="fa-solid fa-gamepad"></i>
|
||
</div>
|
||
<span class="fallback-tip" style="font-size: 0.65rem;">Kein Bild</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-sheet" style="margin-top: 1rem;">
|
||
<div class="info-row">
|
||
<span class="info-label">Erschienen:</span>
|
||
<span id="modal-release" class="info-value">Datum</span>
|
||
</div>
|
||
<div class="info-desc-box">
|
||
<p id="modal-desc">Beschreibung...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Monetarisierungs-Detail-Modal (Enzyklopädie) -->
|
||
<div id="monet-modal" class="modal monet-modal">
|
||
<div class="modal-content monet-modal-content">
|
||
<span class="close-monet-modal">×</span>
|
||
<div class="monet-modal-header">
|
||
<span id="monet-modal-icon" class="monet-modal-icon"><i class="fa-solid fa-coins"></i></span>
|
||
<div class="monet-modal-heading">
|
||
<h2 id="monet-modal-title">Titel</h2>
|
||
<p id="monet-modal-tagline">Kurzbeschreibung</p>
|
||
</div>
|
||
</div>
|
||
<div id="monet-modal-body" class="monet-modal-body">
|
||
<!-- Dynamically filled -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Core App JS -->
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|