index.html

 <style>
  #canvas { border: 0px none; background-color: black; width:100% }
  #canvas-container {
    width: 100%;
  }
  
  #canvas-container #canvas {
    width: 100%;
    aspect-ratio:16/9
  }
  
  @supports not (aspect-ratio: auto) {
    .canvas-container {
      position: relative;
      padding-bottom: 56.25%;
      height:0
    }
    
    #canvas-container #canvas {
      position: absolute;
      width: 100%;
      height:100%
    }
  }
  #status { font-weight: bold; }
  #progress { width: 100%; margin-top:0; }
  #output {
    width: 100%;
    height: 200px;
    margin: 0.4em 0 0 0;
    border: 0px;
    padding: 0px;
    background-color: black;
    color: white;
    font-family: 'Lucida Console', Monaco, monospace;
    outline: none;
  }
</style>
<p id="status">Downloading...</p>
<progress value="0" max="100" id="progress" hidden=1></progress>
<p id="canvas-container"><canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas></p>
<textarea id="output" rows="8"></textarea>
<script type='text/javascript'>
  window.wasmBinaryFileOverride = 'celestia-sdl.wasm';
  window.dataBinaryFileOverride = 'celestia-sdl.data';
  var statusElement = document.getElementById('status');
  var progressElement = document.getElementById('progress');
  
  var Module = {
    preRun: [],
    postRun: [],
    print: (function() {
      var element = document.getElementById('output');
      if (element) element.value = ''; // clear browser cache
      return function(text) {
        if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
        // These replacements are necessary if you render to raw HTML
        //text = text.replace(/&/g, "&amp;");
        //text = text.replace(/</g, "&lt;");
        //text = text.replace(/>/g, "&gt;");
        //text = text.replace('\n', '<br>', 'g');
        console.log(text);
        if (element) {
          element.value += text + "\n";
          element.scrollTop = element.scrollHeight; // focus on bottom
        }
      };
    })(),
    canvas: (function() {
      var canvas = document.getElementById('canvas');
      
      // As a default initial behavior, pop up an alert when webgl context is lost. To make your
      // application robust, you may want to override this behavior before shipping!
      // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
      canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
      
      return canvas;
    })(),
    setStatus: function(text) {
      if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
      if (text === Module.setStatus.last.text) return;
      var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
      var now = Date.now();
      if (m && now - Module.setStatus.last.time < 30) return; // if this is a progress update, skip it if too soon
      Module.setStatus.last.time = now;
      Module.setStatus.last.text = text;
      if (m) {
        text = m[1];
        progressElement.value = parseInt(m[2])*100;
        progressElement.max = parseInt(m[4])*100;
        progressElement.style.display = 'inline-block';
      } else {
        progressElement.value = null;
        progressElement.max = null;
        progressElement.style.display = 'none';
      }
      statusElement.innerText = text;
      statusElement.style.display = (text == null || text.length === 0) ? 'none' : 'inline-block';
    },
    totalDependencies: 0,
    monitorRunDependencies: function(left) {
      this.totalDependencies = Math.max(this.totalDependencies, left);
      Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
    }
  };
  Module.setStatus('Downloading...');
  window.onerror = function(event) {
    // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
    Module.setStatus('Exception thrown, see JavaScript console');
    Module.setStatus = function(text) {
      if (text) console.error('[post-exception status] ' + text);
    };
  };
</script>
<script async type="text/javascript" src="celestia-sdl.js"></script>