Simple v86 emulator

index.html

<style>
.screen {
    padding: 0px;
    margin: 0px;
    line-height: 0px;
}

.screen-text {
    white-space: pre;
    position: relative;
    font-family: Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
    font-weight: bold;
    font-size: 15px;
    line-height: normal;
}

.screen-graphic {
    background-color: #000;
    width: 100%;
    height: 100%;
}

.screen-text, .screen-graphic {
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    transform-origin: top left;
}

.screen-keyboard {
    width: 0;
    height: 0;
    resize: none;
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    z-index: -10;
    white-space: nowrap;
    overflow: hidden;
}
</style>

<label>CD image:</label>
<input type="file" id="custom-system-cd-image" class="custom-file-input" />
<br />
<br />

<label>Floppy disk image:</label>
<input type="file" id="custom-system-floppy-image" class="custom-file-input" />
<br />
<br />

<label>Hard drive disk image:</label>
<input type="file" id="custom-system-hard-disk-image" class="custom-file-input" />
<br />
<br />

<label>Snapshot image:</label>
<input type="file" id="custom-system-snapshot" class="custom-file-input" />
<br />
<br />

<button id="custom-emulator-create">Create emulator</button>
<button id="custom-emulator-destroy">Destroy emulator</button>
<button id="custom-system-start">Start emulation</button>
<button id="custom-system-stop">Stop emulation</button>
<br />
<br />

<div id="system-screen" class="col-md-8 m-1 d-flex align-items-center justify-content-center screen">
    <div class="screen-text"></div>
    <canvas class="screen-graphic"></canvas>
    <div style="position: absolute; top: 0; z-index: 10">
        <textarea class="screen-keyboard"></textarea>
    </div>
</div>

<script src="v86.js"></script>
<script src="index.js"></script>

index.js

var emulator

document.getElementById('custom-emulator-create').onclick = () => {
  cdrom = document.getElementById('custom-system-cd-image').files[0]
  fda = document.getElementById('custom-system-floppy-image').files[0]
  hda = document.getElementById('custom-system-hard-disk-image').files[0]
  snapshot = document.getElementById('custom-system-snapshot').files[0]

  emulator = new V86Starter({
    screen_container: document.getElementById('system-screen'),
    bios: {
      url: 'bios/seabios.bin',
    },
    vga_bios: {
      url: 'bios/vgabios.bin',
    },
    cdrom: {
      buffer: cdrom,
    },
    fda: {
      buffer: fda,
    },
    hda: {
      buffer: hda,
    },
    initial_state: {
      buffer: snapshot,
    }
  })
}

document.getElementById('custom-emulator-destroy').onclick = () => {
  emulator.destroy()
  emulator = undefined
}

document.getElementById('custom-system-start').onclick = () => {
  emulator.run()
}

document.getElementById('custom-system-stop').onclick = () => {
  emulator.stop()
}

v86.js

// Download file from https://copy.sh/v86/build/v86_all.js