Control your mouse cursor with your phone (windows only)
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MouseOnAir</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <link rel="icon" href="/favicon.svg" />

    <link rel="stylesheet" href="https://unpkg.com/98.css" />
    <link type="text/css" rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <main>
      <div class="pad" id="touchpad"></div>

      <div class="pad" id="gryropad"></div>

      <div class="mouse-buttons">
        <button id="leftbtn">
          <details class="hold window-body">
            <summary></summary>
            <input id="lefthold" type="checkbox" />
            <label for="lefthold">hold</label>
          </details>
        </button>
        <button id="middlebtn"></button>
        <button id="rightbtn"></button>
      </div>

      <div class="keyboard-buttons">
        <button id="kbrdcut">CTRL+X</button>
        <button id="kbrdcopy">CTRL+C</button>
        <button id="kbrdpaste">CTRL+V</button>
        <button id="kbrdenter">ENTER</button>
      </div>

      <form id="form">
        <input id="textinput" type="text" name="text" />
      </form>

      <div id="fullscreen_button" class="fullscreen">&nbsp;</div>

      <div class="topbar">
        <div class="connection-state">
          <span id="light"></span>
          <p id="connected">connected</p>
          <button id="connect">connect</button>
        </div>

        <details class="options">
          <summary>&nbsp;</summary>
          <fieldset class="param">
            <label for="maccel"
              >mouse acceleration<span id="maccel_value_display"></span
            ></label>
            <input id="maccel" type="range" min="1" max="20" step="1" />
          </fieldset>
          <fieldset class="param">
            <label for="scroll_speed"
              >scroll speed<span id="scroll_speed_value_display"></span
            ></label>
            <input id="scroll_speed" type="range" min="1" max="20" step="1" />
          </fieldset>
          <fieldset class="param">
            <input id="gyromouse_switch" type="checkbox" />
            <label class="mg-bot-1" for="gyromouse_switch">use gyro</label>

            <label for="gyromouse_speed"
              >gyro speed<span id="gyromouse_speed_value_display"></span
            ></label>
            <input
              id="gyromouse_speed"
              type="range"
              min="1"
              max="20"
              step="1"
            />
          </fieldset>
        </details>
      </div>
    </main>
    <script type="module" src="/main.js"></script>
  </body>
</html>