touchkio/html/widget.html

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline'" />
    <style>
      [data-theme="dark"] {
        --primary-color: rgba(225, 225, 225, 1);
        --border-color: rgba(225, 225, 225, 0.15);
        --background-color: rgba(28, 28, 28, 1);
      }
      [data-theme="light"] {
        --primary-color: rgba(33, 33, 33, 1);
        --border-color: rgba(33, 33, 33, 0.15);
        --background-color: rgba(255, 255, 255, 1);
      }
      [data-theme="hidden"] {
        --primary-color: rgba(0, 0, 0, 0);
        --border-color: rgba(0, 0, 0, 0);
        --background-color: rgba(0, 0, 0, 0);
      }
      ::-webkit-scrollbar {
        display: none;
      }
      * {
        margin: 0;
        padding: 0;
        cursor: pointer;
      }
      body {
        display: flex;
        align-items: center;
        width: 100vw;
        height: 100vh;
      }
      menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100vw;
        padding: 10px;
        row-gap: 10px;
        list-style-type: none;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        border-top: 1px solid var(--border-color);
        border-left: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        background: var(--background-color);
      }
      li {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
      }
      li.hidden {
        display: none;
      }
      button {
        width: 32px;
        height: 32px;
        border: none;
        background-color: transparent;
      }
      svg {
        pointer-events: none;
        fill: var(--primary-color);
      }
    </style>
  </head>
  <body>
    <menu>
      <li>
        <button id="fullscreen">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <title>overscan</title>
            <path
              d="M12 5.5L10 8H14L12 5.5M18 10V14L20.5 12L18 10M6 10L3.5 12L6 14V10M14 16H10L12 18.5L14 16M21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3M21 19H3V5H21V19Z"
            />
          </svg>
        </button>
      </li>
      <li>
        <button id="theme">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <title>compare</title>
            <path
              d="M19,3H14V5H19V18L14,12V21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10,18H5L10,12M10,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H10V23H12V1H10V3Z"
            />
          </svg>
        </button>
      </li>
      <li>
        <button id="keyboard">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <title>keyboard-close-outline</title>
            <path
              d="M12 23L16 19H8M4 3C2.9 3 2 3.9 2 5V15C2 16.1 2.9 17 4 17H20C21.1 17 22 16.1 22 15V5C22 3.9 21.1 3 20 3H4M4 5H20V15H4V5M5 6V8H7V6H5M8 6V8H10V6H8M11 6V8H13V6H11M14 6V8H16V6H14M17 6V8H19V6H17M5 9V11H7V9H5M8 9V11H10V9H8M11 9V11H13V9H11M14 9V11H16V9H14M17 9V11H19V9H17M8 12V14H16V12H8Z"
            />
          </svg>
        </button>
      </li>
      <li>
        <button id="navigation">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <title>web</title>
            <path
              d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
            />
          </svg>
        </button>
      </li>
    </menu>
    <script>
      const { ipcRenderer } = require("electron");

      const registerSendEvents = () => {
        document.querySelectorAll("button").forEach((button) => {
          button.addEventListener("click", (e) => {
            ipcRenderer.send("button-click", { id: e.target.id });
          });
        });
      };

      const registerReceiveEvents = () => {
        ipcRenderer.on("button-hidden", (e, button) => {
          document.getElementById(button.id).parentNode.classList.toggle("hidden", button.hidden);
        });
        ipcRenderer.on("data-theme", (e, data) => {
          document.documentElement.setAttribute("data-theme", data.theme);
        });
      };

      registerSendEvents();
      registerReceiveEvents();
    </script>
  </body>
</html>