<!DOCTYPE html>

<html lang="de">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Pandora Box 5000 in 1</title>

    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="style.css">

</head>

<body>


    <header>

        <h1>Pandora Box <span class="special-text">5000</span> in 1</h1>

        <p>Spieleliste von ArcadeCity.co.uk</p>

    </header>


    <div class="filter-container">

        <input type="text" id="searchInput" placeholder="Spiel suchen...">

        

        <select id="playerFilter">

            <option value="">Alle Spieler</option>

            <option value="1-2P">1-2 Spieler</option>

            <option value="3P">3 Spieler</option>

            <option value="4P">4 Spieler</option>

        </select>


        <label class="check-container">

            <input type="checkbox" id="threeDFilter">

            <span class="checkmark"></span>

            Nur 3D-Spiele anzeigen

        </label>

        

        <button id="resetButton">Reset</button>

    </div>


    <div id="game-count-container">

        <p>Zeige <span id="gameCount">0</span> von 5000 Spielen</p>

    </div>


    <main id="gameList">

        </main>


    <footer>

        <p>SELECT GAME</p>

    </footer>


    <script src="games.js"></script>

    <script src="app.js"></script>


</body>

</html>