static/sinus.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Sinus</title>
</head>

<body>
    <h1>Sinus</h1>
    <div id="sliders">
        <label for="amplitude">Amplitude:</label>
        <input type="range" id="amplitude" min="0" max="100" value="25" />
        <span id="amplitudeValue">25</span>
        <br />
        <label for="frequency">Sinus Frequency:</label>
        <input type="range" id="frequency" min="0" max="2" step="0.1" value="0.5" />
        <span id="frequencyValue">0.5</span>
        <br />
    </div>
    <h1>Synchronisation</h1>
    <div id="synchronisation">
        <label for="sync">Sync freq:</label>
        <input type="range" id="sync" min="1" max="200" step="10" value="100" />
        <span id="syncValue">50</span>
        <br />
        <label for="motor_0">Motor 0 synced:</label>
        <input type="checkbox" id="motor_0_synced" />
        <br />
        <label for="motor_1">Motor 1 synced:</label>
        <input type="checkbox" id="motor_1_synced" />
        <br />
        <label for="motor_2">Motor 2 synced:</label>
        <input type="checkbox" id="motor_2_synced" checked />
        <br />
        <label for="motor_3">Motor 3 synced:</label>
        <input type="checkbox" id="motor_3_synced" checked />
        <br />
        <label for="motor_4">Motor 4 synced:</label>
        <input type="checkbox" id="motor_4_synced" />
        <br />
        <label for="motor_5">Motor 5 synced:</label>
        <input type="checkbox" id="motor_5_synced" />
        <br />
    </div>

    <h1>Debug</h1>
    <div id="debug">
        <label for="verbose">Verbose:</label>
        <input type="checkbox" id="verbose" />
    </div>

    <!-- <script src="sinus.js"></script> -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"
        integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA=="
        crossorigin="anonymous"></script>
    <script src="sinus.js"></script>

</body>

</html>