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" />
    <link rel="icon" type="image/x-icon" href="/skateboard.png">
    <link rel="stylesheet" href="./style.css" />
    <title>CITY Skate 2</title>
</head>

<body>
    <div id="animationButtons">
        <label class="switch">
            <input type="checkbox" id="checkbox">
            <span class="slider"></span>
        </label>
        <button onclick="playAnimation(0)" id="kickflip">Kickflip</button>
        <button onclick="playAnimation(1)" id="treflip">Treflip</button>
        <button onclick="playAnimation(2)" id="varialHeel">Varial Heelflip</button>
        <small>Drive: W/A/S/D</small>
        <small>Trick: J/K/L</small>
        <small>Reset: &#60;Space&#62;</small>
    </div>
    <canvas class="canv"></canvas>
    <script type="module" src="./index.js"></script>
    <script>
        // switch config
        const checkbox = document.getElementById('checkbox');

        checkbox.addEventListener('change', (event) => {
            if (checkbox.checked)
            {
                document.getElementById('animationButtons').classList.add('light')
                toggleNight();
            } else {
                document.getElementById('animationButtons').classList.remove('light');
                toggleDay();
            }
        })
    </script>
</body>

</html>