271 lines
9.2 KiB
HTML
271 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
|
|
/>
|
|
<link rel="stylesheet" href="/index.css" />
|
|
<title>Müll-check</title>
|
|
<link rel="icon" type="image/x-icon" href="/public/images/recycle.png" />
|
|
</head>
|
|
<body id="wrapper">
|
|
<div id="error-page" class="error">
|
|
<div class="container text-center h-100vh d-flex align-items-center">
|
|
Um eure Sehkraft zu gewährleisten wird das Spiel auf Mobilgeräte nicht
|
|
unterstützt. Verwendet bitte das iPad oder den Desktop für ein besseres
|
|
Spielerlebnis.
|
|
</div>
|
|
</div>
|
|
|
|
<div id="game-page">
|
|
<!-- Introduction -->
|
|
<div id="introduction-page">
|
|
<div class="text-end h-7vh">
|
|
<div class="pt-2 pe-3">
|
|
<a href="https://vibentec-it.io/de" target="_blank"
|
|
><img
|
|
src="/public/images/logo.png"
|
|
width="15%"
|
|
alt="Vibentec IT Logo"
|
|
/></a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="introduction"
|
|
class="text-start justify-content-center align-items-center h-90vh"
|
|
>
|
|
<div class="align-items-baseline introduction-container d-flex px-0">
|
|
<div class="col"></div>
|
|
<div class="col-4 m-auto" id="title">
|
|
<h4>Bist du bereit mit Müll-Check?</h4>
|
|
<h5>
|
|
Im Spiel entspricht jede Frage der Farbe von der Mülltonne.
|
|
Wähl schnell wie möglich innerhalb von 3 Minuten
|
|
die richtige Müllart aus, die du in den angegebenen Mülltonne
|
|
werfen darfst.
|
|
<br>
|
|
Für jede richtige Antwort erhältest du zusätzlich
|
|
10 Punkte.
|
|
<br>
|
|
|
|
Viel Erfolg !!!
|
|
</h5>
|
|
<div class="text-center">
|
|
<button
|
|
type="button"
|
|
id="play-btn"
|
|
class="btn bg-green text-white"
|
|
onclick="playGame()"
|
|
>
|
|
Spielen
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
id="hint-btn"
|
|
class="btn bg-green ms-1 text-white"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#hinweiseModal"
|
|
>
|
|
Hinweise
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div
|
|
class="modal fade"
|
|
id="hinweiseModal"
|
|
tabindex="-1"
|
|
aria-labelledby="hinweiseModalLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable"
|
|
>
|
|
<div class="modal-content text-black">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5 fw-lighter" id="modalLabel">
|
|
Hinweise
|
|
</h1>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<img
|
|
src="/public/images/hinweis.png"
|
|
alt="Müllsortieren Hinweis"
|
|
class="w-100"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-7" id="iframe-container">
|
|
<iframe title="kidImg" src="kids.svg" class="w-100"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-end h-3vh">
|
|
<p class="m-0 fw-lighter pe-3">
|
|
Müll-check ist ein kleines Geschenk von Vibentec IT für Kinder zum
|
|
Kindertag 01.06
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- hint -->
|
|
<div id="hint-container">
|
|
</div>
|
|
|
|
<!-- Game Container -->
|
|
<div id="game-container" class="h-100vh">
|
|
<div class="text-center h-100 d-flex justify-content-center">
|
|
<div id="content" class="w-75 m-auto">
|
|
<div class="row justify-content-end pt-5 fs-3">
|
|
<div class="col-2 px-0 text-end">Score:</div>
|
|
<div class="col-1 px-0" id="score"></div>
|
|
</div>
|
|
<div id="countdown-timer" class="row justify-content-center mb-5">
|
|
<div id="min" class="col-2 px-0 text-end">03</div>
|
|
<div class="col-2 px-0 w-40px">:</div>
|
|
<div id="seconds" class="col-2 px-0 text-start">00</div>
|
|
</div>
|
|
|
|
<!-- question -->
|
|
<div class="row mb-5 justify-content-center">
|
|
<div class="col-5" id="question">
|
|
<img alt="Question Image" width="200px" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- choices -->
|
|
<div id="choices-container" class="row">
|
|
<div
|
|
class="row justify-content-center h-100 align-items-center"
|
|
id="choices"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Save Score -->
|
|
<div id="modal-save-score" class="text-white">
|
|
<div id="modal-save-score-backdrop">
|
|
<div
|
|
class="container d-flex text-center justify-content-center align-items-center h-100vh"
|
|
>
|
|
<div class="h-50 w-50 modal-save-score-content">
|
|
<div class="text-end mt-3 me-3 cursor-pointer">
|
|
<i
|
|
class="bi bi-x-circle-fill fs-1"
|
|
onclick="goToIntroductionPage()"
|
|
></i>
|
|
</div>
|
|
<div
|
|
class="container h-75 d-flex justify-content-center align-items-center"
|
|
>
|
|
<div>
|
|
<div id="last-score"></div>
|
|
<div>
|
|
<h5>Schreib deinen Name ein !</h5>
|
|
<input
|
|
type="text"
|
|
name="input-name"
|
|
id="player-name"
|
|
class="text-center"
|
|
required
|
|
/>
|
|
<div
|
|
style="display: none"
|
|
id="validation-player-name"
|
|
class="fw-lighter text-warning fs-6"
|
|
>
|
|
Das ist ein Pflichtfeld.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<button
|
|
type="button"
|
|
id="save-btn"
|
|
class="btn bg-green ms-1 text-white"
|
|
onclick="saveScore()"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Erfolg -->
|
|
<div id="end-container">
|
|
<div
|
|
id="end-content"
|
|
class="container text-center d-flex justify-content-center align-items-center h-100vh"
|
|
>
|
|
<div class="row w-100 align-items-baseline">
|
|
<div id="end-score" class="col-12 pb-5">
|
|
<h1></h1>
|
|
</div>
|
|
|
|
<div class="m-auto w-50">
|
|
<table class="w-100 table">
|
|
<tbody id="ranking-row"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="row d-flex justify-content-center">
|
|
<div class="col-5 pt-5">
|
|
<button
|
|
type="button"
|
|
id="play-again-btn"
|
|
class="btn bg-green py-3 px-5 border-0 text-white"
|
|
onclick="playAgain()"
|
|
>
|
|
Nochmal spielen
|
|
</button>
|
|
</div>
|
|
<div class="col-5 pt-5">
|
|
<button
|
|
type="button"
|
|
id="quit-btn"
|
|
class="btn bg-green py-3 px-5 border-0 text-white"
|
|
onclick="goToIntroductionPage()"
|
|
>
|
|
Aufhören
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script
|
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script src="index.js"></script>
|
|
</body>
|
|
</html>
|