SinglePlayer - Games/Bingo Game/index.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">
    <title>Bingo Game</title>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
</head>

<body>
    <div id="loading-page" style="display: none;">
        <div class="loader">
            <span class="animated-text">B</span>
            <span class="animated-text">i</span>
            <span class="animated-text">n</span>
            <span class="animated-text">g</span>
            <span class="animated-text">o</span>
        </div>
    </div>

    <div id="main-page">
        <h1 id="heading" class="typing-effect">Welcome to the Bingo Game</h1>
        <label for="players" class="text">Number of players :</label>
        <input type="number" id="players" min="2" max="10" step="1" placeholder="2 - 10">
        <button id="start-button">Start Game</button>
        <p id="message"></p>
        <h2>Made with ❤️ by Avdhesh Varshney</h2>
    </div>

    <div id="game-page" style="display: none;">
        <h1>Bingo Game</h1>

        <audio id="backgroundMusic" src="./sounds/backgroundMusic.mp3" loop></audio>
        <div id="audioControls">
            <div class="audioButtonGroup">
                <button id="muteButton" class="audioButton">Mute</button>
                <button id="unmuteButton" class="audioButton">Unmute</button>
            </div>
            <div class="audioSliderContainer">
                <input type="range" id="volumeSlider" class="audioSlider" min="0" max="1" step="0.1" value="0.5">
            </div>
        </div>

        <div class="container"></div>
        <h2>Made with ❤️ by Avdhesh Varshney</h2>
    </div>

    <div id="congratsPage" style="display: none;">
        <h1>Congratulations!</h1>
        <p>Player <span id="winnerName"></span> is the winner!</p>
    </div>

    <script src="index.js"></script>
</body>

</html>