index.html

<!DOCTYPE html>
<html>
    <head>
        <title>gfx - lab1c</title>
        <script src="js/main.js" type="module" defer></script>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <h2>GFX Lab1c 2023</h2>

        <label for="accept">
            <input type="checkbox" id="accept" name="accept" value="yes"> Activate cheatmode
        </label>

        <div class="button-wrapper">
            <button id="playButton">Play Audio</button>
            <button id="stopButton">Stop Audio</button>
            <input id="clickMe" type="button" value="Restart Game" onclick="restartGame();" />
        </div>

        <audio id="audioPlayer" src="../audio/tetris-theme.mp3" loop></audio>

        <div class="slider">
            <label for="ambientProduct">Ambient</label>
            <input type="range" min="0" max="100" value="40" class="slider" id="ambientProduct">

            <label for="diffuseProduct">Diffuse</label>
            <input type="range" min="0" max="100" value="70" class="slider" id="diffuseProduct">

            <label for="specularProduct">Specular</label>
            <input type="range" min="0" max="100" value="100" class="slider" id="specularProduct">
        </div>

        &nbsp;
        <canvas id="glcanvas" width="550" height="850"></canvas>
    </body>
</html>