294 lines
15 KiB
HTML
294 lines
15 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"><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> Hauptmenü</button></div>
|
|
<div class="logo">
|
|
<span class="logo-accent">IS IT IN</span>
|
|
<span class="logo-main">FORTNITE?</span>
|
|
</div>
|
|
<div class="header-badge">
|
|
<i class="fa-solid fa-triangle-exclamation pulse-icon"></i> Absurditäts-Tracker
|
|
</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> Hauptmenü & Nochmal spielen
|
|
</button>
|
|
<button id="btn-view-encyclopedia" class="btn btn-secondary">
|
|
<i class="fa-solid fa-book"></i> Zur Enzyklopädie
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ENCYCLOPEDIA SCREEN -->
|
|
<section id="encyclopedia-view" class="view">
|
|
<div class="encyclopedia-header-section">
|
|
<h2>Die Fortnite Absurditäts-Enzyklopädie</h2>
|
|
<p>Durchsuche alle 50 realen Marken, Promis und Produkte und vergleiche sie mit ihrer Fortnite-Version.</p>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
</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>
|
|
|
|
<!-- Core App JS -->
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|