parsec-keyboard/keyboard.html

<div id="myWindow" class="window">
    <div class="window-top">
        <button class="round green"></button><button class="round yellow"></button><button class="round red"></button>
    </div>
    <div class="window-content">
        <div class="simple-keyboard"></div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css" />
<style>
    body {
        background: #333;
    }

    .window {
        position: fixed;
        top: 0;
        width: 400px;
        height: 250px;
        border-radius: 10px;
        border: none;
        box-shadow: 1px 1px 4px rgba(0, 0, 0, 0, 0.9), -1px 1px 4px rgba(0, 0, 0, 0, 0.9);
        background: #fff;
    }

    .window-content {
        height: 100%;
    }

    .window-top,
    .window-top-no-bind {

        cursor: move;
        text-align: right;
        height: 20px;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        padding: 5px;
        background-color: #ddd;
    }

    .window-top-no-bind {
        cursor: inherit;
    }

    .round {
        height: 16px;
        width: 16px;
        border-radius: 50%;
        border: none;
        margin-right: 6px;
        box-shadow: 1px 1px 2px #000;
    }

    .green {
        background-color: limegreen;
    }

    .yellow {
        background-color: yellow;
    }

    .red {
        cursor: pointer;
        background-color: red;
    }

    #myWindow {
        z-index: 999;
    }

    #myWindow2 {
        top: 0;
        left: 500px;
    }
</style>
<script>
    // You can choose to have an element with the class "window-top" inside of your draggable window that will act as the "handle" for the window or it will attach to the element itself

    function makeDraggable(elmnt) {
        // Make an element draggable (or if it has a .window-top class, drag based on the .window-top element)
        let currentPosX = 0, currentPosY = 0, previousPosX = 0, previousPosY = 0;

        // If there is a window-top classed element, attach to that element instead of full window
        if (elmnt.querySelector('.window-top')) {
            // If present, the window-top element is where you move the parent element from
            elmnt.querySelector('.window-top').onmousedown = dragMouseDown;
            elmnt.querySelector('.window-top').ontouchstart = dragMouseDown;
        }
        else {
            // Otherwise, move the element itself
            elmnt.onmousedown = dragMouseDown;
        }

        function dragMouseDown(e) {
            // Prevent any default action on this element (you can remove if you need this element to perform its default action)
            e.preventDefault();
            // Get the mouse cursor position and set the initial previous positions to begin
            previousPosX = e.clientX;
            previousPosY = e.clientY;
            // When the mouse is let go, call the closing event
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            // Prevent any default action on this element (you can remove if you need this element to perform its default action)
            e.preventDefault();
            // Calculate the new cursor position by using the previous x and y positions of the mouse
            currentPosX = previousPosX - e.clientX;
            currentPosY = previousPosY - e.clientY;
            // Replace the previous positions with the new x and y positions of the mouse
            previousPosX = e.clientX;
            previousPosY = e.clientY;
            // Set the element's new position
            elmnt.style.top = (elmnt.offsetTop - currentPosY) + 'px';
            elmnt.style.left = (elmnt.offsetLeft - currentPosX) + 'px';
        }

        function closeDragElement() {
            // Stop moving when mouse button is released and release events
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }

    // Make myWindow and myWindow2 draggable in different ways...

    // myWindow will only be able to be moved via the top bar (.window-top element). The main element does nothing on mouse down.
    makeDraggable(document.querySelector('#myWindow'));


    //And this is just for fun
    for (const closeElement of document.querySelectorAll('.round.red')) {
        closeElement.addEventListener('click', function () {

        });
    }

    const Keyboard = window.SimpleKeyboard.default;
    const keyboard = new Keyboard({
        onChange: input => onChange(input),
        onKeyPress: button => onKeyPress(button)
    });

    function onChange(input) {
        // document.querySelector(".input").value = input;
        console.log("Input changed", input);
    }

    function onKeyPress(button) {
        console.log("Button pressed", button);
    }
</script>