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
 108     <div class="emscripten_border">
 109       <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
 110     </div>
 111     <textarea id="output" rows="8"></textarea>
 112
 113     <script type='text/javascript'>
 114       var statusElement = document.getElementById('status');
 115       var progressElement = document.getElementById('progress');
 116       var spinnerElement = document.getElementById('spinner');
 117       var Module = {
 118         preRun: [],
 119         postRun: [],
 120         print: (function() {
 121           var element = document.getElementById('output');
 122           if (element) element.value = ''; // clear browser cache
 123           return function(text) {
 124             if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
 125             // These replacements are necessary if you render to raw HTML
 126             //text = text.replace(/&/g, "&amp;");
 127             //text = text.replace(/</g, "&lt;");
 128             //text = text.replace(/>/g, "&gt;");
 129             //text = text.replace('\n', '<br>', 'g');
 130             console.log(text);
 131             if (element) {
 132               element.value += text + "\n";
 133               element.scrollTop = element.scrollHeight; // focus on bottom
 134             }
 135           };
 136         })(),
 137         printErr: function(text) {
 138           if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
 139           if (0) { // XXX disabled for safety typeof dump == 'function') {
 140             dump(text + '\n'); // fast, straight to the real console
 141           } else {
 142             console.error(text);
 143           }
 144         },
 145         canvas: (function() {
 146           var canvas = document.getElementById('canvas');
 147           // As a default initial behavior, pop up an alert when webgl context is lost. To make your
 148           // application robust, you may want to override this behavior before shipping!
 149           // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
 150           canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
 151           return canvas;
 152         })(),
 153         setStatus: function(text) {
 154           if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
 155           if (text === Module.setStatus.text) return;
 156           var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
 157           var now = Date.now();
 158           if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
 159           if (m) {
 160             text = m[1];
 161             progressElement.value = parseInt(m[2])*100;
 162             progressElement.max = parseInt(m[4])*100;
 163             progressElement.hidden = false;
 164             spinnerElement.hidden = false;
 165           } else {
 166             progressElement.value = null;
 167             progressElement.max = null;
 168             progressElement.hidden = true;
 169             if (!text) spinnerElement.style.display = 'none';
 170           }
 171           statusElement.innerHTML = text;
 172         },
 173         totalDependencies: 0,
 174         monitorRunDependencies: function(left) {
 175           this.totalDependencies = Math.max(this.totalDependencies, left);
 176           Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
 177         }
 178       };
 179       Module.setStatus('Downloading...');
 180       window.onerror = function(event) {
 181         // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
 182         Module.setStatus('Exception thrown, see JavaScript console');
 183         spinnerElement.style.display = 'none';
 184         Module.setStatus = function(text) {
 185           if (text) Module.printErr('[post-exception status] ' + text);
 186         };
 187       };
 188     </script>
 189 <script async type="text/javascript"  src="mandelwow.js">
 190 </script>