index.html

<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">

<style>
:root {
  --terminal-color: white;
}
canvas {
  image-rendering: -moz-crisp-edges;    
  image-rendering: -webkit-crisp-edges; 
  image-rendering: pixelated;           
}
.page {
  width: 512px;
  margin-left: auto;
  margin-right: auto;
}
.screen {
  width: 200%;
  height: 512px;
  margin-left: -50%;
  border: 1px solid white;
  padding: 5px;
  margin-bottom: 20px;
}

.container {
  display: flex;
  flex-direction: row;
}
body {
  font-family: 'VT323', monospace;
  font-size: 20px;
  line-height: 22px;
  color: white;
  background-color: black;
}
h2 {
  font-size: 50px;
  text-align: center;
}
.pc {
  background-color: white;
  color: black;
}
.label {
  font-size: 30px;
}
button, select {
  font-family: 'VT323', monospace;
  font-size: 30px;
  width: 100px;
  border: 3px solid white;
  color: white;
  background-color: black;
  outline: none;
  margin-bottom: 10px;
}
select {
  width: 200px;
}
button:active {
  color: black;
  background-color: white;
}
</style>

<div class='page'>
  <h2>CHIP-8</h2>

  <p>A WebAssembly CHIP-8 emulator written using Rust. Select a ROM and hit 'start'!</p>

  <p>For WIPEOFF, the default ROM, press W to start the game, then Q / E to move the paddle.
    Other ROMs may be buggy!</p>

  <span class='label'>ROM:</span>
  <select id='roms'>
  </select>
  <button id='run'>Start</button>
  <button id='reset'>Reset</button>

  <div class='screen'>
    <canvas id='canvas' width='64' height='32'
      style='transform: scale(16); transform-origin: top left'></canvas>
  </div>
  <div class='container'>
  </div>
</div>

<script type="module" src='index.js'></script>
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>