index.html

   1 <!doctype html>
   2 <html lang="en-us">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6     <title>Emscripten-Generated Code</title>
   7     <style>
   8       body {
   9         font-family: arial;
  10         margin: 0;
  11         padding: none;
  12       }
  13       .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
  14       div.emscripten { text-align: center; }
  15       div.emscripten_border { border: 1px solid black; }
  16       canvas.emscripten { width: 600px; height: 600px; }
  17       /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
  18       canvas.emscripten { border: 0px none; }
  19       #emscripten_logo {
  20         display: inline-block;
  21         margin: 0;
  22       }
  23       .spinner {
  24         height: 30px;
  25         width: 30px;
  26         margin: 0;
  27         margin-top: 20px;
  28         margin-left: 20px;
  29         display: inline-block;
  30         vertical-align: top;
  31         -webkit-animation: rotation .8s linear infinite;
  32         -moz-animation: rotation .8s linear infinite;
  33         -o-animation: rotation .8s linear infinite;
  34         animation: rotation 0.8s linear infinite;
  35         border-left: 5px solid rgb(235, 235, 235);
  36         border-right: 5px solid rgb(235, 235, 235);
  37         border-bottom: 5px solid rgb(235, 235, 235);
  38         border-top: 5px solid rgb(120, 120, 120);
  39
  40         border-radius: 100%;
  41         background-color: rgb(189, 215, 46);
  42       }
  43       @-webkit-keyframes rotation {
  44         from {-webkit-transform: rotate(0deg);}
  45         to {-webkit-transform: rotate(360deg);}
  46       }
  47       @-moz-keyframes rotation {
  48         from {-moz-transform: rotate(0deg);}
  49         to {-moz-transform: rotate(360deg);}
  50       }
  51       @-o-keyframes rotation {
  52         from {-o-transform: rotate(0deg);}
  53         to {-o-transform: rotate(360deg);}
  54       }
  55       @keyframes rotation {
  56         from {transform: rotate(0deg);}
  57         to {transform: rotate(360deg);}
  58       }
  59       #status {
  60         display: inline-block;
  61         vertical-align: top;
  62         margin-top: 30px;
  63         margin-left: 20px;
  64         font-weight: bold;
  65         color: rgb(120, 120, 120);
  66       }
  67       #progress {
  68         height: 20px;
  69         width: 30px;
  70       }
  71       #controls {
  72         display: inline-block;
  73         float: right;
  74         vertical-align: top;
  75         margin-top: 30px;
  76         margin-right: 20px;
  77       }
  78       #output {
  79         width: 100%;
  80         height: 200px;
  81         margin: 0 auto;
  82         margin-top: 10px;
  83         display: block;
  84         background-color: black;
  85         color: white;
  86         font-family: 'Lucida Console', Monaco, monospace;
  87         outline: none;
  88       }
  89     </style>
  90   </head>
  91   <body>
  92     <div class="spinner" id='spinner'></div>
  93     <div class="emscripten" id="status">Downloading...</div>
  94
  95 <span id='controls'>
  96   <span><input type="checkbox" id="resize">Resize canvas</span>
  97   <span><input type="checkbox" id="pointerLock" checked>Lock/hide mouse pointer &nbsp;&nbsp;&nbsp;</span>
  98   <span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked,
  99                                                                             document.getElementById('resize').checked)">
 100   </span>
 101 </span>
 102
 103     <div class="emscripten">
 104       <progress value="0" max="100" id="progress" hidden=1></progress>
 105     </div>
 106
 107     <div class="emscripten_border">
 108       <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
 109     </div>
 110     <textarea id="output" rows="8"></textarea>
 111
 112     <script type='text/javascript'>
 113       var statusElement = document.getElementById('status');
 114       var progressElement = document.getElementById('progress');
 115       var spinnerElement = document.getElementById('spinner');
 116       var Module = {
 117         preRun: [ function() { ENV.RUST_BACKTRACE = '1' } ],
 118         postRun: [],
 119         print: (function() {
 120           var element = document.getElementById('output');
 121           if (element) element.value = ''; // clear browser cache
 122           return function(text) {
 123             if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
 124             console.log(text);
 125             if (element) {
 126               element.value += text + "\n";
 127               element.scrollTop = element.scrollHeight; // focus on bottom
 128             }
 129           };
 130         })(),
 131         printErr: function(text) {
 132           if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
 133           if (0) { // XXX disabled for safety typeof dump == 'function') {
 134             dump(text + '\n'); // fast, straight to the real console
 135           } else {
 136             console.error(text);
 137           }
 138         },
 139         canvas: (function() {
 140           var canvas = document.getElementById('canvas');
 141           // As a default initial behavior, pop up an alert when webgl context is lost. To make your
 142           // application robust, you may want to override this behavior before shipping!
 143           // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
 144           canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
 145           return canvas;
 146         })(),
 147         setStatus: function(text) {
 148           if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
 149           if (text === Module.setStatus.text) return;
 150           var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
 151           var now = Date.now();
 152           if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
 153           if (m) {
 154             text = m[1];
 155             progressElement.value = parseInt(m[2])*100;
 156             progressElement.max = parseInt(m[4])*100;
 157             progressElement.hidden = false;
 158             spinnerElement.hidden = false;
 159           } else {
 160             progressElement.value = null;
 161             progressElement.max = null;
 162             progressElement.hidden = true;
 163             if (!text) spinnerElement.style.display = 'none';
 164           }
 165           statusElement.innerHTML = text;
 166         },
 167         totalDependencies: 0,
 168         monitorRunDependencies: function(left) {
 169           this.totalDependencies = Math.max(this.totalDependencies, left);
 170           Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
 171         }
 172       };
 173       Module.setStatus('Downloading...');
 174       window.onerror = function(event) {
 175         // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
 176         Module.setStatus('Exception thrown, see JavaScript console');
 177         spinnerElement.style.display = 'none';
 178         Module.setStatus = function(text) {
 179           if (text) Module.printErr('[post-exception status] ' + text);
 180         };
 181       };
 182     </script>
 183 <script async type="text/javascript"  src="mandelwow.js">
 184 </script>