push all the things

animation/main.js

@@ -184,6 +184,7 @@ function main (time) {
 	requestAnimationFrame(main)
 }
 
+
 init()
 
 // })()

codemirror/codemirror.css

@@ -4,7 +4,7 @@
   /* Set height, width, borders, and global font properties here */
   font-family: monospace;
   height: auto;
-  color: black;
+  color: rgb(156, 154, 193);
   padding: 10px;
   padding-top: 5px;
 }
@@ -103,24 +103,26 @@ div.CodeMirror-overwrite div.CodeMirror-cursor {}
 .cm-link {text-decoration: underline;}
 .cm-strikethrough {text-decoration: line-through;}
 
-.cm-s-default .cm-keyword {color: #f90;}
+.cm-s-default .cm-keyword {color: #0DAEFF;}
 .cm-s-default .cm-atom {color: #219;}
 .cm-s-default .cm-number {color: #164;}
 .cm-s-default .cm-def {color: #00f;}
 .cm-s-default .cm-variable,
-.cm-s-default .cm-punctuation {}
+.cm-s-default .cm-punctuation {
+    color: black;
+}
 .cm-s-default .cm-property {color: #4CA2F2;}
 .cm-s-default .cm-operator {}
 .cm-s-default .cm-variable-2 {color: #05a;}
 .cm-s-default .cm-variable-3 {color: #085;}
 .cm-s-default .cm-comment {color: #a50;}
-.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string {color: #5426C9;}
 .cm-s-default .cm-string-2 {color: #f50;}
 .cm-s-default .cm-meta {color: #555;}
 .cm-s-default .cm-qualifier {color: #555;}
 .cm-s-default .cm-builtin {color: #30a;}
 .cm-s-default .cm-bracket {color: #997;}
-.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-tag {color: #050216;}
 .cm-s-default .cm-attribute {color: #00c;}
 .cm-s-default .cm-hr {color: #999;}
 .cm-s-default .cm-link {color: #00c;}

codemirror/runmode.js

@@ -0,0 +1,72 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
+CodeMirror.runMode = function(string, modespec, callback, options) {
+  var mode = CodeMirror.getMode(CodeMirror.defaults, modespec);
+  var ie = /MSIE \d/.test(navigator.userAgent);
+  var ie_lt9 = ie && (document.documentMode == null || document.documentMode < 9);
+
+  if (callback.nodeType == 1) {
+    var tabSize = (options && options.tabSize) || CodeMirror.defaults.tabSize;
+    var node = callback, col = 0;
+    node.innerHTML = "";
+    callback = function(text, style) {
+      if (text == "\n") {
+        // Emitting LF or CRLF on IE8 or earlier results in an incorrect display.
+        // Emitting a carriage return makes everything ok.
+        node.appendChild(document.createTextNode(ie_lt9 ? '\r' : text));
+        col = 0;
+        return;
+      }
+      var content = "";
+      // replace tabs
+      for (var pos = 0;;) {
+        var idx = text.indexOf("\t", pos);
+        if (idx == -1) {
+          content += text.slice(pos);
+          col += text.length - pos;
+          break;
+        } else {
+          col += idx - pos;
+          content += text.slice(pos, idx);
+          var size = tabSize - col % tabSize;
+          col += size;
+          for (var i = 0; i < size; ++i) content += " ";
+          pos = idx + 1;
+        }
+      }
+
+      if (style) {
+        var sp = node.appendChild(document.createElement("span"));
+        sp.className = "cm-" + style.replace(/ +/g, " cm-");
+        sp.appendChild(document.createTextNode(content));
+      } else {
+        node.appendChild(document.createTextNode(content));
+      }
+    };
+  }
+
+  var lines = CodeMirror.splitLines(string), state = (options && options.state) || CodeMirror.startState(mode);
+  for (var i = 0, e = lines.length; i < e; ++i) {
+    if (i) callback("\n");
+    var stream = new CodeMirror.StringStream(lines[i]);
+    if (!stream.string && mode.blankLine) mode.blankLine(state);
+    while (!stream.eol()) {
+      var style = mode.token(stream, state);
+      callback(stream.current(), style, i, stream.start, state);
+      stream.start = stream.pos;
+    }
+  }
+};
+
+});

codemirror/xml.js

@@ -0,0 +1,384 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
+CodeMirror.defineMode("xml", function(config, parserConfig) {
+  var indentUnit = config.indentUnit;
+  var multilineTagIndentFactor = parserConfig.multilineTagIndentFactor || 1;
+  var multilineTagIndentPastTag = parserConfig.multilineTagIndentPastTag;
+  if (multilineTagIndentPastTag == null) multilineTagIndentPastTag = true;
+
+  var Kludges = parserConfig.htmlMode ? {
+    autoSelfClosers: {'area': true, 'base': true, 'br': true, 'col': true, 'command': true,
+                      'embed': true, 'frame': true, 'hr': true, 'img': true, 'input': true,
+                      'keygen': true, 'link': true, 'meta': true, 'param': true, 'source': true,
+                      'track': true, 'wbr': true, 'menuitem': true},
+    implicitlyClosed: {'dd': true, 'li': true, 'optgroup': true, 'option': true, 'p': true,
+                       'rp': true, 'rt': true, 'tbody': true, 'td': true, 'tfoot': true,
+                       'th': true, 'tr': true},
+    contextGrabbers: {
+      'dd': {'dd': true, 'dt': true},
+      'dt': {'dd': true, 'dt': true},
+      'li': {'li': true},
+      'option': {'option': true, 'optgroup': true},
+      'optgroup': {'optgroup': true},
+      'p': {'address': true, 'article': true, 'aside': true, 'blockquote': true, 'dir': true,
+            'div': true, 'dl': true, 'fieldset': true, 'footer': true, 'form': true,
+            'h1': true, 'h2': true, 'h3': true, 'h4': true, 'h5': true, 'h6': true,
+            'header': true, 'hgroup': true, 'hr': true, 'menu': true, 'nav': true, 'ol': true,
+            'p': true, 'pre': true, 'section': true, 'table': true, 'ul': true},
+      'rp': {'rp': true, 'rt': true},
+      'rt': {'rp': true, 'rt': true},
+      'tbody': {'tbody': true, 'tfoot': true},
+      'td': {'td': true, 'th': true},
+      'tfoot': {'tbody': true},
+      'th': {'td': true, 'th': true},
+      'thead': {'tbody': true, 'tfoot': true},
+      'tr': {'tr': true}
+    },
+    doNotIndent: {"pre": true},
+    allowUnquoted: true,
+    allowMissing: true,
+    caseFold: true
+  } : {
+    autoSelfClosers: {},
+    implicitlyClosed: {},
+    contextGrabbers: {},
+    doNotIndent: {},
+    allowUnquoted: false,
+    allowMissing: false,
+    caseFold: false
+  };
+  var alignCDATA = parserConfig.alignCDATA;
+
+  // Return variables for tokenizers
+  var type, setStyle;
+
+  function inText(stream, state) {
+    function chain(parser) {
+      state.tokenize = parser;
+      return parser(stream, state);
+    }
+
+    var ch = stream.next();
+    if (ch == "<") {
+      if (stream.eat("!")) {
+        if (stream.eat("[")) {
+          if (stream.match("CDATA[")) return chain(inBlock("atom", "]]>"));
+          else return null;
+        } else if (stream.match("--")) {
+          return chain(inBlock("comment", "-->"));
+        } else if (stream.match("DOCTYPE", true, true)) {
+          stream.eatWhile(/[\w\._\-]/);
+          return chain(doctype(1));
+        } else {
+          return null;
+        }
+      } else if (stream.eat("?")) {
+        stream.eatWhile(/[\w\._\-]/);
+        state.tokenize = inBlock("meta", "?>");
+        return "meta";
+      } else {
+        type = stream.eat("/") ? "closeTag" : "openTag";
+        state.tokenize = inTag;
+        return "tag bracket";
+      }
+    } else if (ch == "&") {
+      var ok;
+      if (stream.eat("#")) {
+        if (stream.eat("x")) {
+          ok = stream.eatWhile(/[a-fA-F\d]/) && stream.eat(";");
+        } else {
+          ok = stream.eatWhile(/[\d]/) && stream.eat(";");
+        }
+      } else {
+        ok = stream.eatWhile(/[\w\.\-:]/) && stream.eat(";");
+      }
+      return ok ? "atom" : "error";
+    } else {
+      stream.eatWhile(/[^&<]/);
+      return null;
+    }
+  }
+
+  function inTag(stream, state) {
+    var ch = stream.next();
+    if (ch == ">" || (ch == "/" && stream.eat(">"))) {
+      state.tokenize = inText;
+      type = ch == ">" ? "endTag" : "selfcloseTag";
+      return "tag bracket";
+    } else if (ch == "=") {
+      type = "equals";
+      return null;
+    } else if (ch == "<") {
+      state.tokenize = inText;
+      state.state = baseState;
+      state.tagName = state.tagStart = null;
+      var next = state.tokenize(stream, state);
+      return next ? next + " tag error" : "tag error";
+    } else if (/[\'\"]/.test(ch)) {
+      state.tokenize = inAttribute(ch);
+      state.stringStartCol = stream.column();
+      return state.tokenize(stream, state);
+    } else {
+      stream.match(/^[^\s\u00a0=<>\"\']*[^\s\u00a0=<>\"\'\/]/);
+      return "word";
+    }
+  }
+
+  function inAttribute(quote) {
+    var closure = function(stream, state) {
+      while (!stream.eol()) {
+        if (stream.next() == quote) {
+          state.tokenize = inTag;
+          break;
+        }
+      }
+      return "string";
+    };
+    closure.isInAttribute = true;
+    return closure;
+  }
+
+  function inBlock(style, terminator) {
+    return function(stream, state) {
+      while (!stream.eol()) {
+        if (stream.match(terminator)) {
+          state.tokenize = inText;
+          break;
+        }
+        stream.next();
+      }
+      return style;
+    };
+  }
+  function doctype(depth) {
+    return function(stream, state) {
+      var ch;
+      while ((ch = stream.next()) != null) {
+        if (ch == "<") {
+          state.tokenize = doctype(depth + 1);
+          return state.tokenize(stream, state);
+        } else if (ch == ">") {
+          if (depth == 1) {
+            state.tokenize = inText;
+            break;
+          } else {
+            state.tokenize = doctype(depth - 1);
+            return state.tokenize(stream, state);
+          }
+        }
+      }
+      return "meta";
+    };
+  }
+
+  function Context(state, tagName, startOfLine) {
+    this.prev = state.context;
+    this.tagName = tagName;
+    this.indent = state.indented;
+    this.startOfLine = startOfLine;
+    if (Kludges.doNotIndent.hasOwnProperty(tagName) || (state.context && state.context.noIndent))
+      this.noIndent = true;
+  }
+  function popContext(state) {
+    if (state.context) state.context = state.context.prev;
+  }
+  function maybePopContext(state, nextTagName) {
+    var parentTagName;
+    while (true) {
+      if (!state.context) {
+        return;
+      }
+      parentTagName = state.context.tagName;
+      if (!Kludges.contextGrabbers.hasOwnProperty(parentTagName) ||
+          !Kludges.contextGrabbers[parentTagName].hasOwnProperty(nextTagName)) {
+        return;
+      }
+      popContext(state);
+    }
+  }
+
+  function baseState(type, stream, state) {
+    if (type == "openTag") {
+      state.tagStart = stream.column();
+      return tagNameState;
+    } else if (type == "closeTag") {
+      return closeTagNameState;
+    } else {
+      return baseState;
+    }
+  }
+  function tagNameState(type, stream, state) {
+    if (type == "word") {
+      state.tagName = stream.current();
+      setStyle = "tag";
+      return attrState;
+    } else {
+      setStyle = "error";
+      return tagNameState;
+    }
+  }
+  function closeTagNameState(type, stream, state) {
+    if (type == "word") {
+      var tagName = stream.current();
+      if (state.context && state.context.tagName != tagName &&
+          Kludges.implicitlyClosed.hasOwnProperty(state.context.tagName))
+        popContext(state);
+      if (state.context && state.context.tagName == tagName) {
+        setStyle = "tag";
+        return closeState;
+      } else {
+        setStyle = "tag error";
+        return closeStateErr;
+      }
+    } else {
+      setStyle = "error";
+      return closeStateErr;
+    }
+  }
+
+  function closeState(type, _stream, state) {
+    if (type != "endTag") {
+      setStyle = "error";
+      return closeState;
+    }
+    popContext(state);
+    return baseState;
+  }
+  function closeStateErr(type, stream, state) {
+    setStyle = "error";
+    return closeState(type, stream, state);
+  }
+
+  function attrState(type, _stream, state) {
+    if (type == "word") {
+      setStyle = "attribute";
+      return attrEqState;
+    } else if (type == "endTag" || type == "selfcloseTag") {
+      var tagName = state.tagName, tagStart = state.tagStart;
+      state.tagName = state.tagStart = null;
+      if (type == "selfcloseTag" ||
+          Kludges.autoSelfClosers.hasOwnProperty(tagName)) {
+        maybePopContext(state, tagName);
+      } else {
+        maybePopContext(state, tagName);
+        state.context = new Context(state, tagName, tagStart == state.indented);
+      }
+      return baseState;
+    }
+    setStyle = "error";
+    return attrState;
+  }
+  function attrEqState(type, stream, state) {
+    if (type == "equals") return attrValueState;
+    if (!Kludges.allowMissing) setStyle = "error";
+    return attrState(type, stream, state);
+  }
+  function attrValueState(type, stream, state) {
+    if (type == "string") return attrContinuedState;
+    if (type == "word" && Kludges.allowUnquoted) {setStyle = "string"; return attrState;}
+    setStyle = "error";
+    return attrState(type, stream, state);
+  }
+  function attrContinuedState(type, stream, state) {
+    if (type == "string") return attrContinuedState;
+    return attrState(type, stream, state);
+  }
+
+  return {
+    startState: function() {
+      return {tokenize: inText,
+              state: baseState,
+              indented: 0,
+              tagName: null, tagStart: null,
+              context: null};
+    },
+
+    token: function(stream, state) {
+      if (!state.tagName && stream.sol())
+        state.indented = stream.indentation();
+
+      if (stream.eatSpace()) return null;
+      type = null;
+      var style = state.tokenize(stream, state);
+      if ((style || type) && style != "comment") {
+        setStyle = null;
+        state.state = state.state(type || style, stream, state);
+        if (setStyle)
+          style = setStyle == "error" ? style + " error" : setStyle;
+      }
+      return style;
+    },
+
+    indent: function(state, textAfter, fullLine) {
+      var context = state.context;
+      // Indent multi-line strings (e.g. css).
+      if (state.tokenize.isInAttribute) {
+        if (state.tagStart == state.indented)
+          return state.stringStartCol + 1;
+        else
+          return state.indented + indentUnit;
+      }
+      if (context && context.noIndent) return CodeMirror.Pass;
+      if (state.tokenize != inTag && state.tokenize != inText)
+        return fullLine ? fullLine.match(/^(\s*)/)[0].length : 0;
+      // Indent the starts of attribute names.
+      if (state.tagName) {
+        if (multilineTagIndentPastTag)
+          return state.tagStart + state.tagName.length + 2;
+        else
+          return state.tagStart + indentUnit * multilineTagIndentFactor;
+      }
+      if (alignCDATA && /<!\[CDATA\[/.test(textAfter)) return 0;
+      var tagAfter = textAfter && /^<(\/)?([\w_:\.-]*)/.exec(textAfter);
+      if (tagAfter && tagAfter[1]) { // Closing tag spotted
+        while (context) {
+          if (context.tagName == tagAfter[2]) {
+            context = context.prev;
+            break;
+          } else if (Kludges.implicitlyClosed.hasOwnProperty(context.tagName)) {
+            context = context.prev;
+          } else {
+            break;
+          }
+        }
+      } else if (tagAfter) { // Opening tag spotted
+        while (context) {
+          var grabbers = Kludges.contextGrabbers[context.tagName];
+          if (grabbers && grabbers.hasOwnProperty(tagAfter[2]))
+            context = context.prev;
+          else
+            break;
+        }
+      }
+      while (context && !context.startOfLine)
+        context = context.prev;
+      if (context) return context.indent + indentUnit;
+      else return 0;
+    },
+
+    electricInput: /<\/[\s\w:]+>$/,
+    blockCommentStart: "<!--",
+    blockCommentEnd: "-->",
+
+    configuration: parserConfig.htmlMode ? "html" : "xml",
+    helperType: parserConfig.htmlMode ? "html" : "xml"
+  };
+});
+
+CodeMirror.defineMIME("text/xml", "xml");
+CodeMirror.defineMIME("application/xml", "xml");
+if (!CodeMirror.mimeModes.hasOwnProperty("text/html"))
+  CodeMirror.defineMIME("text/html", {name: "xml", htmlMode: true});
+
+});

css/color.css

@@ -4,51 +4,110 @@
 }
 
 #splash {
-	border-bottom: solid 1px #ddd;
+	/*border-bottom: solid 1px #ddd;*/
 	/*background-color: #222*/
 }
 
-#desc {
-	color: #444;
+.desc {
+	color: #343E70;
+	/* text-shadow: 0px 0px 2px rgba(0, 131, 255, 0.53); */
 }
 
-.header {
-	background-color: #27C6F9;
+.vr {
+	border-left: 1px solid #ddd;
 }
 
-#marterial {
-	background: linear-gradient(#27C6F9 80%, #0CB5EB 100%);
+/*.ellipsis {
+	background-color: rgb(58, 51, 60);
+  color: white;
+  padding: 3px;
+  border-radius: 2px;
+
+}*/
+
+
+.getStarted {
+	display: inline-block;
+	background-color: #2CC7F9;
+	color: white;
+	font-size: 40px;
+	padding: 20px;
+	padding-left: 50px;
+	border-radius: 5px;
+	margin-top: 40;
+	padding-right: 50px;
+	cursor: pointer;
 }
 
-#runbutton {
+
+.npm {
+  background-color: rgb(255, 238, 174);
+  margin-bottom: 0px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-left: 10px solid #303061;
+  color: rgb(48, 48, 97);
+  font-size: 19px;
+  font-family: monospace;
+}
+
+
+
+#marterial {
+	/*background: linear-gradient(#27C6F9 80%, #0CB5EB 100%);*/
+	background-color: #1E1D31;
+	background-image: url(../img/stars.jpeg);
+	background-size: cover;
+	background-position: bottom;
+	/*background-attachment: fixed;*/
+}
+.demoheader .CodeMirror {
+	background-color: rgb(243, 243, 243);
+}
+.runbutton {
 	color:  #27C6F9;
 	cursor: pointer;
 	-webkit-transition: all 0.7s ease;
 	transition: all 0.7s ease;
 }
 
-#runbutton:hover {
+.runbutton:hover {
 	text-shadow: 0px 0px 10px #27C6F9;
 }
 
-#wow {
+.demo {
 	box-shadow: 0px 0px 20px -2px rgba(0,0,0,.2);
+	position: relative;
+	background-color: white;
 }
 
-#hint {
+.hint {
 	font-size: 10px;
-	color: #aaa;
-	
+	color: #56607D;
 }
 
+body {
+	background-color: rgb(251, 251, 251);
+}
+
+hr {
+	border: none;
+	border-top: 1px solid #ddd;
+	margin:	0px;
+}
 
 a {
-	color: #f90;
+	color: #6079D6;
+}
+
+.manyLanguages {
+	/*color: #C8D1F3;*/
+	opacity: .3;
 }
 
 button {
-	color: #000;
-	background: #fff;
+	color: #FFF;
+	background: #5A4E60;
 	border-radius: 5px;
 	border: solid 1px #fff;
 }
@@ -69,11 +128,20 @@ button:hover {
 		border: solid 1px #fff;
 	}
 
-	#desc {
-		color: rgba(255,255,255,.9);
+	.desc {
+	  color: #FFFFFF;
+	  text-shadow: 0px 0px 3px rgba(58, 58, 58, 1);
 	}
 
-	#splash {
-		background-color: #27C6F9;
+	.desc a {
+		color: #B8EEFF;
+	}
+	
+	.npm {
+		box-shadow: 0px 0px 20px 4px rgb(180, 146, 150);
 	}
+
+	/*#splash {
+		background-color: #27C6F9;
+	}*/
 }

css/explorer.css

@@ -0,0 +1,92 @@
+#explorer {
+	max-width: 500px;
+	max-height: 500px;
+	white-space: nowrap;
+	overflow: scroll;
+	padding: 10px;
+
+	border: 1px solid #eee;
+	border-radius: 5px;
+	font-family: monospace;
+	
+}
+
+@media (max-width: 914px) {
+	#explorer {
+	margin: 8%;
+
+	}
+}
+
+.textNode {
+	display: inline-block;
+	max-width: 400px;
+	vertical-align: middle;
+	white-space: pre;
+	overflow: scroll;
+	margin-bottom: 1px;
+	margin-top: 1px;
+}
+
+.textNode {
+	background-color: rgb(255, 238, 174);
+	color: rgb(48, 48, 97);
+	padding: 2px;
+	border-radius: 3px;
+}
+
+.html {
+	background-color: #F5F5F5;
+}
+
+.comma, .ellipsis {
+	color: grey;
+}
+
+.nullNode {
+	color: grey;
+}
+
+.numberNode {
+	color: rgb(203, 48, 48);
+}
+
+.booleanNode {
+	color: rgb(174, 44, 164);
+}
+
+.label {
+	color: rgb(76, 162, 242);
+}
+
+.clickable {
+	cursor: pointer;
+}
+
+.indent {
+	padding-left: 30px;
+	display: inline-block;
+}
+
+
+/*.collapsed, .expanded {
+	position: relative;
+}
+*/
+/*.collapsed::before {
+  content: "▶";
+  position: absolute;
+  left: -16px;
+}
+
+.expanded::before {
+  content: "▼";
+  position: absolute;
+  left: -16px;
+}
+
+.swiper{
+	padding-left: 40px;
+	margin-top: 8px;
+}
+*/

css/wau.css

@@ -1,34 +1,34 @@
+@import 'explorer.css';
+
 .fullscreen {
 	width:100%;
 	min-height: 100%;
 }
 
-#runwrap {
-	position: relative;
-	right:0px;
-	width: 100%;
-	height: 0px;
-	text-align: right;
-	background: green;
-	z-index: 2;
-
-}
 
-#run, #running {
+.run, .running {
 	width: 100%;
 	height: 42px;
 	text-align: center;
 }
 
-#run {
+.running {
+	display: none
+}
+
+#wow .notrunning {
 	display: none
 }
 
-#runbutton {
+#wow .running {
+	display: block
+}
+
+.runbutton {
 	padding-top: 6px;
 	padding-bottom: 10px;
 	font-weight: 500;
-
+	text-align: center;
 }
 
 a {
@@ -36,60 +36,91 @@ a {
 	/*font-weight: bold;*/
 }
 
-#display {
+.display {
 	position: absolute;
 	/*background: rgba(0,0,255,.1);*/
 }
 
+svg {
+	height: 100%
+}
+
 #marterial {
 	position: absolute;
 	width: 100%;
-	height: 90px;
+	height: 330px;
 	z-index: -1;
+	overflow: hidden;
 }
 
-#out {
+.out {
 	padding: 10px;
 	padding-bottom: 0px;
 	text-align: center;
 	font-family: monospace;
 }
 
-#hint {
+.hint {
 	text-align: left;
 	padding-left: 14px
 
 }
 
-#prog {
+.langlabel {
+	display: inline-block;
+	flex-grow: 1;
+	height: 40px;
+	line-height: 40px;
+}
+.bookend {
+	display: inline-block;
+}
+
+.prog {
 	width: 400px;
 	max-width: 100%;
 	position: relative;
 }
 
-#drag {
+.demofooter {
 	padding: 10px;
 	/*padding-top: 0px;*/
-	text-align: center
+	text-align: center;
+	/*display:  flex*/
+}
+
+#wow .demofooter {
+  display: flex;
+  padding: 0px;
+  justify-content: space-between;
+  align-items: center;
 }
 
 #logo {
 	text-align: center;
-	padding-top: 5%;
+	padding-top: 70px;
+	height: 182px;
 }
 
-#to_ocr {
+.to_ocr {
 	width: 100%;
 }
 
 #wow {
+	margin-top: 25px;
+}
+
+.demo {
 	border-radius: 5px;
-	overflow: hidden;
 	width:500px;
-	margin-top: 10px;
 	text-align: left
 }
 
+.demoheader {
+	overflow: hidden;
+	border-radius: 5px 5px 0px 0px 
+}
+
 #canvas {
 	margin-left: auto;
 	margin-right: auto;
@@ -101,14 +132,17 @@ a {
 
 #splash {
 	text-align: center;
+	position: relative;
 }
 
-#desc {
+.desc {
 	text-align: left;
 	font-size: 18px;
 }
 
-#demo {
+.vr {
+	display: inline-block;
+	height: 40px;
 }
 
 #notconvinced {
@@ -133,42 +167,77 @@ a {
 	padding-left: 8%;
 	padding-right: 8%;
 }
-/*#editor {
-	border-radius: 5px 5px 0px 0px;
+
+.npm {
+	margin-top: 20px;
+	padding-left: 15px;
+}
+
+.longasstag{
+  text-align: left;
+  white-space: normal;
+  word-break: break-all;
 }
-*/
+
+
 #code {
 	text-align: center;
 	width: 335px;
 	border-radius: 5px;
 	margin-right: 40px;
 	margin-left: 40px;
-	margin-top: 140px;
+	margin-top: 120px;
 
 }
 
-#fork {
+.woloasdf {
+	padding-top: 8%;
+}
+
+
+.fork{
 	position: absolute;
 	top: 0;
 	right: 0;
 	border: 0;
-	width: 149px;
+	z-index: 2;
 }
 
+.fork img {
+	width: 149px;
+}
 
-
-#two {
+.two {
 	width: 100%;
-	paddin-left: 8%;
-	paddin-right: 8%;
 	display: flex;
 	flex-wrap: wrap;
-	justify-content: center;
+	justify-content: space-around;
+	max-width: 1100px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+
+#two {
 	margin-bottom: 8%;
+}
 
+.demoheader .CodeMirror {
+  padding-bottom: 9px;
+  padding-top: 9px;
+  padding-left: 13px;
 }
 
 
+#ocroutput {
+	position: relative;
+}
+
+.manyLanguages {
+	font-size: 7px;
+	padding-top: 10px;
+}
+
 
 body {
 	padding: 0px;
@@ -199,12 +268,27 @@ button:hover {
 }
 
 @media (max-width: 914px) {
+	#logo {
+		padding-top: 8%;
+		height: auto;
+	}
+
 	#marterial {
-		height: 300px;
+		height: 100%;
+	}
+
+	.demo {
+		margin-right: 8%;
+		margin-left: 8%;
 	}
 
 	#code {
 		margin-top: 20px;
-		margin-bottom: 20px
+		margin-bottom: 20px;
+		width: 400px;
+	}
+
+	#fork {
+		width: 28%;
 	}
 }

explorer/.module-cache/3f0e760c414349d4f3aef786a00f95e1bbacad28.js

@@ -0,0 +1,397 @@
+"use strict";
+
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+
+function array_join(array, glue) {
+	var new_array = [];
+	for (var i = 0; i < array.length; i++) {
+		new_array.push(array[i]);
+		if (i != array.length - 1) new_array.push(glue);
+	}
+	return new_array;
+}
+
+var Node = (function (_React$Component) {
+	function Node(props) {
+		var _this = this;
+
+		_classCallCheck(this, Node);
+
+		_get(Object.getPrototypeOf(Node.prototype), "constructor", this).call(this, props);
+
+		this.toggleExpand = function (e) {
+			_this.setState({ expanded: !_this.state.expanded });
+		};
+
+		this.state = {
+			expanded: props.expanded
+		};
+	}
+
+	_inherits(Node, _React$Component);
+
+	_createClass(Node, [{
+		key: "render",
+		value: function render() {
+			var _props = this.props;
+			var node = _props.node;
+			var label = _props.label;
+			var expanded = this.state.expanded;
+
+			var rep;
+			if (typeof node === "string") {
+				rep = React.createElement(TextNode, { html: label === "html", node: node, className: "clickable", onClick: this.toggleExpand, toggleExpand: this.toggleExpand, expanded: expanded });
+			} else if (typeof node === "boolean") {
+				rep = React.createElement(BooleanNode, { node: node, className: "clickable", onClick: this.toggleExpand, toggleExpand: this.toggleExpand, expanded: expanded });
+			} else if (typeof node === "number") {
+				rep = React.createElement(NumberNode, { node: node, className: "clickable", onClick: this.toggleExpand, toggleExpand: this.toggleExpand, expanded: expanded });
+			} else if (Array.isArray(node)) {
+				rep = React.createElement(ListNode, { node: node, className: "clickable", onClick: this.toggleExpand, toggleExpand: this.toggleExpand, expanded: expanded });
+			} else {
+				rep = React.createElement(ObjectNode, { node: node, className: "clickable", onClick: this.toggleExpand, toggleExpand: this.toggleExpand, expanded: expanded });
+			}
+
+			if (!label) {
+				return rep;
+			}
+
+			return React.createElement(
+				"span",
+				null,
+				React.createElement(
+					"span",
+					{ className: "label clickable", onClick: this.toggleExpand },
+					label
+				),
+				": ",
+				rep
+			);
+		}
+	}]);
+
+	return Node;
+})(React.Component);
+
+var TextNode = (function (_React$Component2) {
+	function TextNode() {
+		_classCallCheck(this, TextNode);
+
+		_get(Object.getPrototypeOf(TextNode.prototype), "constructor", this).apply(this, arguments);
+	}
+
+	_inherits(TextNode, _React$Component2);
+
+	_createClass(TextNode, [{
+		key: "render",
+		value: function render() {
+			var _props2 = this.props;
+			var node = _props2.node;
+			var expanded = _props2.expanded;
+			var html = _props2.html;
+			var toggleExpand = _props2.toggleExpand;
+
+			if (expanded) {
+				var content = node;
+				if (html) {
+					var content = [];
+					CodeMirror.runMode(node, { name: "xml", htmlMode: true }, function (text, className) {
+						content.push(React.createElement(
+							"span",
+							{ className: "cm-" + className },
+							text
+						));
+					});
+				}
+				return React.createElement(
+					"span",
+					{ className: (html ? "cm-s-default html " : "") + "textNode expanded clickable", onClick: toggleExpand },
+					content
+				);
+			} else {
+				return React.createElement(
+					"span",
+					null,
+					React.createElement(
+						"span",
+						{ className: (html ? "html " : "") + "textNode clickable", onClick: toggleExpand },
+						node.substring(0, 30)
+					),
+					node.length > 30 ? React.createElement(
+						"span",
+						{ className: "ellipsis" },
+						"..."
+					) : ""
+				);
+			}
+		}
+	}]);
+
+	return TextNode;
+})(React.Component);
+
+var BooleanNode = (function (_React$Component3) {
+	function BooleanNode() {
+		_classCallCheck(this, BooleanNode);
+
+		_get(Object.getPrototypeOf(BooleanNode.prototype), "constructor", this).apply(this, arguments);
+	}
+
+	_inherits(BooleanNode, _React$Component3);
+
+	_createClass(BooleanNode, [{
+		key: "render",
+		value: function render() {
+			var node = this.props.node;
+
+			return React.createElement(
+				"span",
+				{ className: "booleanNode" },
+				JSON.stringify(node)
+			);
+		}
+	}]);
+
+	return BooleanNode;
+})(React.Component);
+
+var NumberNode = (function (_React$Component4) {
+	function NumberNode() {
+		_classCallCheck(this, NumberNode);
+
+		_get(Object.getPrototypeOf(NumberNode.prototype), "constructor", this).apply(this, arguments);
+	}
+
+	_inherits(NumberNode, _React$Component4);
+
+	_createClass(NumberNode, [{
+		key: "render",
+		value: function render() {
+			var node = this.props.node;
+
+			return React.createElement(
+				"span",
+				{ className: "numberNode" },
+				JSON.stringify(node)
+			);
+		}
+	}]);
+
+	return NumberNode;
+})(React.Component);
+
+var ListNode = (function (_React$Component5) {
+	function ListNode() {
+		_classCallCheck(this, ListNode);
+
+		_get(Object.getPrototypeOf(ListNode.prototype), "constructor", this).apply(this, arguments);
+	}
+
+	_inherits(ListNode, _React$Component5);
+
+	_createClass(ListNode, [{
+		key: "render",
+		value: function render() {
+			var _props3 = this.props;
+			var node = _props3.node;
+			var expanded = _props3.expanded;
+			var toggleExpand = _props3.toggleExpand;
+
+			if (expanded) {
+				return React.createElement(
+					"span",
+					{ className: "listNode expanded" },
+					React.createElement(
+						"span",
+						{ className: "clickable", onClick: toggleExpand },
+						"["
+					),
+					React.createElement("br", null),
+					React.createElement(
+						"span",
+						{ className: "indent" },
+						array_join(node.map(function (e, i) {
+							return React.createElement(Node, { node: e });
+						}), React.createElement(Comma, { br: true }))
+					),
+					React.createElement("br", null),
+					React.createElement(
+						"span",
+						{ onClick: toggleExpand },
+						"]"
+					)
+				);
+			} else {
+				return React.createElement(
+					"span",
+					{ className: "listNode clickable", onClick: toggleExpand },
+					"[",
+					node.length,
+					"]"
+				);
+			}
+		}
+	}]);
+
+	return ListNode;
+})(React.Component);
+
+var ObjectNode = (function (_React$Component6) {
+	function ObjectNode() {
+		_classCallCheck(this, ObjectNode);
+
+		_get(Object.getPrototypeOf(ObjectNode.prototype), "constructor", this).apply(this, arguments);
+	}
+
+	_inherits(ObjectNode, _React$Component6);
+
+	_createClass(ObjectNode, [{
+		key: "render",
+		value: function render() {
+			var _props4 = this.props;
+			var node = _props4.node;
+			var expanded = _props4.expanded;
+			var toggleExpand = _props4.toggleExpand;
+
+			if (null === node) {
+				return React.createElement(
+					"span",
+					{ className: "nullNode" },
+					"null"
+				);
+			} else if (expanded) {
+				return React.createElement(
+					"span",
+					{ className: "objectNode expanded" },
+					React.createElement(
+						"span",
+						{ className: "clickable", onClick: toggleExpand },
+						"{"
+					),
+					React.createElement("br", null),
+					React.createElement(
+						"span",
+						{ className: "indent" },
+						array_join(Object.keys(node).map(function (key) {
+							return React.createElement(Node, { node: node[key], label: key });
+						}), React.createElement(Comma, { br: true }))
+					),
+					React.createElement("br", null),
+					React.createElement(
+						"span",
+						{ onClick: toggleExpand },
+						"}"
+					)
+				);
+			} else {
+				var keys = Object.keys(node),
+				    toolong = false;
+				if (keys.length > 4) {
+					keys = keys.slice(0, 4);
+					toolong = true;
+				}
+				var contents = array_join(keys.map(function (k) {
+					return React.createElement(
+						"span",
+						{ className: "label" },
+						k
+					);
+				}), React.createElement(Comma, null));
+				return React.createElement(
+					"span",
+					{ className: "objectNode clickable", onClick: toggleExpand },
+					"{",
+					contents,
+					toolong ? React.createElement(Ellipsis, null) : "",
+					"}"
+				);
+			}
+		}
+	}]);
+
+	return ObjectNode;
+})(React.Component);
+
+var Comma = (function (_React$Component7) {
+	function Comma() {
+		_classCallCheck(this, Comma);
+
+		_get(Object.getPrototypeOf(Comma.prototype), "constructor", this).apply(this, arguments);
+	}
+
+	_inherits(Comma, _React$Component7);
+
+	_createClass(Comma, [{
+		key: "render",
+		value: function render() {
+			var br = this.props.br;
+
+			return React.createElement(
+				"span",
+				{ className: "comma" },
+				", ",
+				br ? React.createElement("br", null) : ""
+			);
+		}
+	}]);
+
+	return Comma;
+})(React.Component);
+
+var Ellipsis = (function (_React$Component8) {
+	function Ellipsis() {
+		_classCallCheck(this, Ellipsis);
+
+		_get(Object.getPrototypeOf(Ellipsis.prototype), "constructor", this).apply(this, arguments);
+	}
+
+	_inherits(Ellipsis, _React$Component8);
+
+	_createClass(Ellipsis, [{
+		key: "render",
+		value: function render() {
+			return React.createElement(
+				"span",
+				{ className: "ellipsis" },
+				"..."
+			);
+		}
+	}]);
+
+	return Ellipsis;
+})(React.Component);
+
+var simplething = {
+	hello: 42,
+	derp: 324,
+	wumbo: [1, 2, 3, 4, "hello", {
+		blah: 32,
+		asdf: [],
+		walp: 32,
+		strings: "asdfsd"
+	}],
+	merp: {
+		blah: 32,
+		asdf: [],
+		walp: 32,
+		strings: "asdfsd"
+	},
+	strings: "asdfsd",
+	asdoijfo: {
+		strings: "asdfsd",
+		adfds: {
+			asdf: {
+				asdfadsf: {},
+				merp: 32
+			}
+		}
+	}
+}
+
+// React.render(<Node node={simplething} />, document.getElementById('explorer'))
+;

explorer/.module-cache/a833cdc804f637f590c1fdf859f154ba446f4d50.js

@@ -0,0 +1,33 @@
+class Dora extends Component {
+	
+	constructor(props){
+		super(props)
+		this.state = {
+			expanded: false
+		}
+	}
+
+	render(){
+
+		var {node} = this.props;
+		var {expanded} = this.state;
+
+		if(Array.isArray(node)){
+			return node.map(x => React.createElement(Dora, {node: x}))
+		}else if(typeof node == "number" || "boolean" || "string"){
+			return React.createElement("span", null, JSON.stringify(node))
+		}else{
+			if(expanded){
+				return Object.keys(node).map(key => {
+					return React.createElement("div", null, React.createElement(Dora, {node: key}), ": ", React.createElement(Dora, {node: node[key]}), ",")
+				})	
+			}else{
+				return React.createElement("span", {onClick: e => this.setState({expanded: true})}, "click me to expand")
+			}
+			
+		}
+	}
+}
+
+
+React.render(React.createElement(Dora, {node: window}), document.getElementById('explorer'))

explorer/.module-cache/dca5af936ce0fef1e04b7ffc040275e21f24f20b.js

@@ -0,0 +1,33 @@
+class Dora extends React.Component {
+	
+	constructor(props){
+		super(props)
+		this.state = {
+			expanded: false
+		}
+	}
+
+	render(){
+
+		var {node} = this.props;
+		var {expanded} = this.state;
+
+		if(Array.isArray(node)){
+			return node.map(x => React.createElement(Dora, {node: x}))
+		}else if(typeof node == "number" || "boolean" || "string"){
+			return React.createElement("span", null, JSON.stringify(node))
+		}else{
+			if(expanded){
+				return Object.keys(node).map(key => {
+					return React.createElement("div", null, React.createElement(Dora, {node: key}), ": ", React.createElement(Dora, {node: node[key]}), ",")
+				})	
+			}else{
+				return React.createElement("span", {onClick: e => this.setState({expanded: true})}, "click me to expand")
+			}
+			
+		}
+	}
+}
+
+
+React.render(React.createElement(Dora, {node: window}), document.getElementById('explorer'))

explorer/.module-cache/manifest/11df343c069ebf0a9691a0f47695eea12a3246f2.json

@@ -0,0 +1 @@
+{".js":"11df343c069ebf0a9691a0f47695eea12a3246f2.js"}

explorer/.module-cache/manifest/3f0e760c414349d4f3aef786a00f95e1bbacad28.json

@@ -0,0 +1 @@
+{".js":"3f0e760c414349d4f3aef786a00f95e1bbacad28.js"}

explorer/.module-cache/manifest/a833cdc804f637f590c1fdf859f154ba446f4d50.json

@@ -0,0 +1 @@
+{".js":"a833cdc804f637f590c1fdf859f154ba446f4d50.js"}

explorer/.module-cache/manifest/dca5af936ce0fef1e04b7ffc040275e21f24f20b.json

@@ -0,0 +1 @@
+{".js":"dca5af936ce0fef1e04b7ffc040275e21f24f20b.js"}

explorer/explorer.js

@@ -0,0 +1,397 @@
+"use strict";
+
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+
+function array_join(array, glue) {
+	var new_array = [];
+	for (var i = 0; i < array.length; i++) {
+		new_array.push(array[i]);
+		if (i != array.length - 1) new_array.push(glue);
+	}
+	return new_array;
+}
+
+var Node = (function (_React$Component) {
+	function Node(props) {
+		var _this = this;
+
+		_classCallCheck(this, Node);
+
+		_get(Object.getPrototypeOf(Node.prototype), "constructor", this).call(this, props);
+
+		this.toggleExpand = function (e) {
+			_this.setState({ expanded: !_this.state.expanded });
+		};
+
+		this.state = {
+			expanded: props.expanded
+		};
+	}
+
+	_inherits(Node, _React$Component);
+
+	_createClass(Node, [{
+		key: "render",
+		value: function render() {
+			var _props = this.props;
+			var node = _props.node;
+			var label = _props.label;
+			var expanded = this.state.expanded;
+
+			var rep;
+			if (typeof node === "string") {
+				rep = React.createElement(TextNode, { html: label === "html", node: node, className: "clickable", onClick: this.toggleExpand, toggleExpand: this.toggleExpand, expanded: expanded });
+			} else if (typeof node === "boolean") {
+				rep = React.createElement(BooleanNode, { node: node, className: "clickable", onClick: this.toggleExpand, toggleExpand: this.toggleExpand, expanded: expanded });
+			} else if (typeof node === "number") {
+				rep = React.createElement(NumberNode, { node: node, className: "clickable", onClick: this.toggleExpand, toggleExpand: this.toggleExpand, expanded: expanded });
+			} else if (Array.isArray(node)) {
+				rep = React.createElement(ListNode, { node: node, className: "clickable", onClick: this.toggleExpand, toggleExpand: this.toggleExpand, expanded: expanded });
+			} else {
+				rep = React.createElement(ObjectNode, { node: node, className: "clickable", onClick: this.toggleExpand, toggleExpand: this.toggleExpand, expanded: expanded });
+			}
+
+			if (!label) {
+				return rep;
+			}
+
+			return React.createElement(
+				"span",
+				null,
+				React.createElement(
+					"span",
+					{ className: "label clickable", onClick: this.toggleExpand },
+					label
+				),
+				": ",
+				rep
+			);
+		}
+	}]);
+
+	return Node;
+})(React.Component);
+
+var TextNode = (function (_React$Component2) {
+	function TextNode() {
+		_classCallCheck(this, TextNode);
+
+		_get(Object.getPrototypeOf(TextNode.prototype), "constructor", this).apply(this, arguments);
+	}
+
+	_inherits(TextNode, _React$Component2);
+
+	_createClass(TextNode, [{
+		key: "render",
+		value: function render() {
+			var _props2 = this.props;
+			var node = _props2.node;
+			var expanded = _props2.expanded;
+			var html = _props2.html;
+			var toggleExpand = _props2.toggleExpand;
+
+			if (expanded) {
+				var content = node;
+				if (html) {
+					var content = [];
+					CodeMirror.runMode(node, { name: "xml", htmlMode: true }, function (text, className) {
+						content.push(React.createElement(
+							"span",
+							{ className: "cm-" + className },
+							text
+						));
+					});
+				}
+				return React.createElement(
+					"span",
+					{ className: (html ? "cm-s-default html " : "") + "textNode expanded clickable", onClick: toggleExpand },
+					content
+				);
+			} else {
+				return React.createElement(
+					"span",
+					null,
+					React.createElement(
+						"span",
+						{ className: (html ? "html " : "") + "textNode clickable", onClick: toggleExpand },
+						node.substring(0, 30)
+					),
+					node.length > 30 ? React.createElement(
+						"span",
+						{ className: "ellipsis" },
+						"..."
+					) : ""
+				);
+			}
+		}
+	}]);
+
+	return TextNode;
+})(React.Component);
+
+var BooleanNode = (function (_React$Component3) {
+	function BooleanNode() {
+		_classCallCheck(this, BooleanNode);
+
+		_get(Object.getPrototypeOf(BooleanNode.prototype), "constructor", this).apply(this, arguments);
+	}
+
+	_inherits(BooleanNode, _React$Component3);
+
+	_createClass(BooleanNode, [{
+		key: "render",
+		value: function render() {
+			var node = this.props.node;
+
+			return React.createElement(
+				"span",
+				{ className: "booleanNode" },
+				JSON.stringify(node)
+			);
+		}
+	}]);
+
+	return BooleanNode;
+})(React.Component);
+
+var NumberNode = (function (_React$Component4) {
+	function NumberNode() {
+		_classCallCheck(this, NumberNode);
+
+		_get(Object.getPrototypeOf(NumberNode.prototype), "constructor", this).apply(this, arguments);
+	}
+
+	_inherits(NumberNode, _React$Component4);
+
+	_createClass(NumberNode, [{
+		key: "render",
+		value: function render() {
+			var node = this.props.node;
+
+			return React.createElement(
+				"span",
+				{ className: "numberNode" },
+				JSON.stringify(node)
+			);
+		}
+	}]);
+
+	return NumberNode;
+})(React.Component);
+
+var ListNode = (function (_React$Component5) {
+	function ListNode() {
+		_classCallCheck(this, ListNode);
+
+		_get(Object.getPrototypeOf(ListNode.prototype), "constructor", this).apply(this, arguments);
+	}
+
+	_inherits(ListNode, _React$Component5);
+
+	_createClass(ListNode, [{
+		key: "render",
+		value: function render() {
+			var _props3 = this.props;
+			var node = _props3.node;
+			var expanded = _props3.expanded;
+			var toggleExpand = _props3.toggleExpand;
+
+			if (expanded) {
+				return React.createElement(
+					"span",
+					{ className: "listNode expanded" },
+					React.createElement(
+						"span",
+						{ className: "clickable", onClick: toggleExpand },
+						"["
+					),
+					React.createElement("br", null),
+					React.createElement(
+						"span",
+						{ className: "indent" },
+						array_join(node.map(function (e, i) {
+							return React.createElement(Node, { node: e });
+						}), React.createElement(Comma, { br: true }))
+					),
+					React.createElement("br", null),
+					React.createElement(
+						"span",
+						{ onClick: toggleExpand },
+						"]"
+					)
+				);
+			} else {
+				return React.createElement(
+					"span",
+					{ className: "listNode clickable", onClick: toggleExpand },
+					"[",
+					node.length,
+					"]"
+				);
+			}
+		}
+	}]);
+
+	return ListNode;
+})(React.Component);
+
+var ObjectNode = (function (_React$Component6) {
+	function ObjectNode() {
+		_classCallCheck(this, ObjectNode);
+
+		_get(Object.getPrototypeOf(ObjectNode.prototype), "constructor", this).apply(this, arguments);
+	}
+
+	_inherits(ObjectNode, _React$Component6);
+
+	_createClass(ObjectNode, [{
+		key: "render",
+		value: function render() {
+			var _props4 = this.props;
+			var node = _props4.node;
+			var expanded = _props4.expanded;
+			var toggleExpand = _props4.toggleExpand;
+
+			if (null === node) {
+				return React.createElement(
+					"span",
+					{ className: "nullNode" },
+					"null"
+				);
+			} else if (expanded) {
+				return React.createElement(
+					"span",
+					{ className: "objectNode expanded" },
+					React.createElement(
+						"span",
+						{ className: "clickable", onClick: toggleExpand },
+						"{"
+					),
+					React.createElement("br", null),
+					React.createElement(
+						"span",
+						{ className: "indent" },
+						array_join(Object.keys(node).map(function (key) {
+							return React.createElement(Node, { node: node[key], label: key });
+						}), React.createElement(Comma, { br: true }))
+					),
+					React.createElement("br", null),
+					React.createElement(
+						"span",
+						{ onClick: toggleExpand },
+						"}"
+					)
+				);
+			} else {
+				var keys = Object.keys(node),
+				    toolong = false;
+				if (keys.length > 4) {
+					keys = keys.slice(0, 4);
+					toolong = true;
+				}
+				var contents = array_join(keys.map(function (k) {
+					return React.createElement(
+						"span",
+						{ className: "label" },
+						k
+					);
+				}), React.createElement(Comma, null));
+				return React.createElement(
+					"span",
+					{ className: "objectNode clickable", onClick: toggleExpand },
+					"{",
+					contents,
+					toolong ? React.createElement(Ellipsis, null) : "",
+					"}"
+				);
+			}
+		}
+	}]);
+
+	return ObjectNode;
+})(React.Component);
+
+var Comma = (function (_React$Component7) {
+	function Comma() {
+		_classCallCheck(this, Comma);
+
+		_get(Object.getPrototypeOf(Comma.prototype), "constructor", this).apply(this, arguments);
+	}
+
+	_inherits(Comma, _React$Component7);
+
+	_createClass(Comma, [{
+		key: "render",
+		value: function render() {
+			var br = this.props.br;
+
+			return React.createElement(
+				"span",
+				{ className: "comma" },
+				", ",
+				br ? React.createElement("br", null) : ""
+			);
+		}
+	}]);
+
+	return Comma;
+})(React.Component);
+
+var Ellipsis = (function (_React$Component8) {
+	function Ellipsis() {
+		_classCallCheck(this, Ellipsis);
+
+		_get(Object.getPrototypeOf(Ellipsis.prototype), "constructor", this).apply(this, arguments);
+	}
+
+	_inherits(Ellipsis, _React$Component8);
+
+	_createClass(Ellipsis, [{
+		key: "render",
+		value: function render() {
+			return React.createElement(
+				"span",
+				{ className: "ellipsis" },
+				"..."
+			);
+		}
+	}]);
+
+	return Ellipsis;
+})(React.Component);
+
+var simplething = {
+	hello: 42,
+	derp: 324,
+	wumbo: [1, 2, 3, 4, "hello", {
+		blah: 32,
+		asdf: [],
+		walp: 32,
+		strings: "asdfsd"
+	}],
+	merp: {
+		blah: 32,
+		asdf: [],
+		walp: 32,
+		strings: "asdfsd"
+	},
+	strings: "asdfsd",
+	asdoijfo: {
+		strings: "asdfsd",
+		adfds: {
+			asdf: {
+				asdfadsf: {},
+				merp: 32
+			}
+		}
+	}
+}
+
+// React.render(<Node node={simplething} />, document.getElementById('explorer'))
+;

explorer_src/explorer.js

@@ -0,0 +1,191 @@
+function array_join(array, glue){
+    var new_array = []
+    for(var i = 0; i < array.length; i++){
+        new_array.push(array[i])
+        if(i != array.length - 1) new_array.push(glue);
+    }
+    return new_array
+}
+
+
+class Node extends React.Component {
+	constructor(props){
+		super(props)
+		this.state = {
+			expanded: props.expanded
+		}
+	}
+
+	toggleExpand = e => {
+		this.setState({expanded: !this.state.expanded})
+	}
+
+	render(){
+		var {node, label} = this.props
+		var {expanded} = this.state
+
+		var rep
+		if(typeof node === "string"){
+			rep = <TextNode html={label === "html"} node={node} className="clickable" onClick={this.toggleExpand} toggleExpand={this.toggleExpand} expanded={expanded}/>
+		}
+		else if(typeof node === "boolean"){
+			rep = <BooleanNode node={node} className="clickable" onClick={this.toggleExpand} toggleExpand={this.toggleExpand} expanded={expanded}/>
+		}
+		else if(typeof node === "number"){
+			rep = <NumberNode node={node} className="clickable" onClick={this.toggleExpand} toggleExpand={this.toggleExpand} expanded={expanded}/>
+		}
+		else if(Array.isArray(node)){
+			rep = <ListNode node={node} className="clickable" onClick={this.toggleExpand} toggleExpand={this.toggleExpand} expanded={expanded}/>
+		}
+		else {
+			rep = <ObjectNode node={node} className="clickable" onClick={this.toggleExpand} toggleExpand={this.toggleExpand} expanded={expanded}/>
+		}			
+	
+		if(!label){
+			return rep
+		}
+		
+		return <span><span className="label clickable" onClick={this.toggleExpand}>{label}</span>: {rep}</span>
+
+	}
+}
+
+class TextNode extends React.Component {
+	render(){
+		var {node, expanded, html, toggleExpand} = this.props
+		if(expanded){
+			var content = node
+			if (html) {
+				var content = []
+				CodeMirror.runMode(node, {name: 'xml', htmlMode: true}, (text, className) => {
+					content.push(<span className={"cm-"+className}>{text}</span>)
+				})
+			}
+			return <span className={(html ? "cm-s-default html ":"") + "textNode expanded clickable"} onClick={toggleExpand} >{content}</span>
+		}
+		else{
+			return <span>
+				<span className={(html? "html " : "")+"textNode clickable"} onClick={toggleExpand} >{node.substring(0,30)}</span>
+				{node.length > 30 ? <span className="ellipsis">...</span> : ''}
+			</span>
+		}
+	}
+}
+
+class BooleanNode extends React.Component {
+	render(){
+		var {node} = this.props
+		return <span className="booleanNode">{JSON.stringify(node)}</span>
+	}
+}
+
+class NumberNode extends React.Component {
+	render(){
+		var {node} = this.props
+		return <span className="numberNode">{JSON.stringify(node)}</span>
+	}
+}
+
+class ListNode extends React.Component {
+	render(){
+		var {node, expanded, toggleExpand} = this.props
+		if(expanded){
+			return <span className="listNode expanded">
+				<span className="clickable" onClick={toggleExpand}>[</span>
+				<br />
+				<span className="indent">
+				{array_join(node.map((e, i) => 
+					<Node node={e} />
+				),<Comma br/>)}
+				
+				</span>
+				<br />
+				<span onClick={toggleExpand}>]</span>
+			</span>
+		}
+		else{
+			return <span className="listNode clickable" onClick={toggleExpand}>[{node.length}]</span>
+		}
+	}
+}
+
+class ObjectNode extends React.Component {
+	render(){
+		var {node, expanded, toggleExpand} = this.props
+
+		if(null === node){
+			return <span className="nullNode">null</span>
+		}
+		else if(expanded){
+			return <span className="objectNode expanded">
+				<span className="clickable" onClick={toggleExpand}>{"{"}</span> 
+				<br />
+				<span className="indent">
+				{array_join(Object.keys(node).map(
+					key => <Node node={node[key]} label={key} />
+				),<Comma br/>)}
+				</span>
+				<br />
+				<span onClick={toggleExpand}>{"}"}</span>
+			</span>
+		}
+		else{
+			var keys = Object.keys(node), toolong = false
+			if (keys.length > 4) {
+				keys = keys.slice(0,4)
+				toolong = true
+			}
+			var contents = array_join(keys.map(k => <span className="label">{k}</span>), <Comma />)
+			return <span className="objectNode clickable" onClick={toggleExpand} >{"{"}{contents}{toolong?<Ellipsis /> : ''}{"}"}</span>
+		}
+	}
+}
+
+class Comma extends React.Component {
+	render(){
+		var {br} = this.props
+		return <span className="comma">, {br?<br />:''}</span>
+	}
+}
+
+class Ellipsis extends React.Component {
+	render(){
+		return <span className="ellipsis">...</span>
+	}
+}
+
+var simplething = {
+	hello: 42,
+	derp: 324,
+	wumbo: [
+		1,
+		2,
+		3,
+		4,
+		"hello", 
+		{
+			blah: 32,
+			asdf: [],
+			walp: 32,
+			strings: "asdfsd",
+		}
+	],
+	merp: {
+		blah: 32,
+		asdf: [],
+		walp: 32,
+		strings: "asdfsd",
+	},
+	strings: "asdfsd",
+	asdoijfo: {
+		strings: "asdfsd",
+		adfds: {
+			asdf: {
+				asdfadsf: {},
+				merp: 32
+			}
+		}
+	}
+}
+
+// React.render(<Node node={simplething} />, document.getElementById('explorer'))

index.html

@@ -5,56 +5,168 @@
 	<link rel="stylesheet" type="text/css" href="./css/color.css">
 
 	<script src="codemirror/codemirror.js"></script>
+	<script src="codemirror/runmode.js"></script>
 	<link rel="stylesheet" href="codemirror/codemirror.css">
 	<script src="codemirror/javascript.js"></script>
+	<script src="codemirror/xml.js"></script>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 
+	<script src="explorer/react.js"></script>
 
 	<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
 
 </head>
 <body>
-	<!-- <a href="https://github.com/you"><img id="fork" src="img/fork.png" alt="Fork me on GitHub"></a> -->
+	<a href="https://github.com/naptha/tesseract.js" class="fork"><img id="fork" src="img/fork.png" alt="Fork me on GitHub"></a>
+	
 
  	<div id="splash" class="fullscreen">
+		<div id ="marterial" class="header"></div>
+ 		
 		<div id="logo" class="header">
 			<canvas id="canvas"></canvas>
 		</div>
 
-		<div id ="marterial" class="header"></div>
+		<div id="two" class="two">
 
-		<div id="two">
 			<div id="code">
-				<div id="desc">
-					Tesseract.js is a <b>pure javascript</b> version of the <a href="https://github.com/tesseract-ocr/Tesseract">Tesseract OCR Engine</a>. It can recognize <b>over 20 languages</b>, including <b>English</b>, <b>Chinese</b>, and <b>Meme</b>.
+				<div id="d1desc" class="desc">
+					Tesseract.js is a <b>pure javascript</b> version of the <b><a href="https://github.com/tesseract-ocr/Tesseract">Tesseract OCR Engine</a>
+				</b> that can recognize 
+					 <a href="#eng">English</a>,
+					 <a href="#chi_sim">Chinese</a>,
+					 <a href="#rus">Russian</a>,
+					 <a href="#tha">Meme</a>, and <a>60 other languages</a>.
+					 <!-- <div class="manyLanguages">
+					 (and
+					 <a href="#deu">German</a>,
+					 <a href="#jpn">Japanese</a>,
+					 <a href="#spa">Spanish</a>,
+					 <a href="#fra">French</a>,
+					 <a href="#chi_tra">Traditional Chinese</a>,
+					 <a href="#por">Portuguese</a>,
+					 <a href="#ita">Italian</a>,
+					 <a href="#pol">Polish</a>,
+					 <a href="#tur">Turkish</a>,
+					 <a href="#nld">Dutch</a>,
+					 <a href="#ara">Arabic</a>,
+					 <a href="#ces">Czech</a>,
+					 <a href="#kor">Korean</a>,
+					 <a href="#swe">Swedish</a>,
+					 <a href="#vie">Vietnamese</a>,
+					 <a href="#ron">Romanian</a>,
+					 <a href="#ell">Greek</a>,
+					 <a href="#ind">Indonesian</a>,
+					 <a href="#hun">Hungarian</a>,
+					 <a href="#dan">Danish</a>,
+					 <a href="#bul">Bulgarian</a>,
+					 <a href="#fin">Finnish</a>,
+					 <a href="#nor">Norwegian</a>,
+					 <a href="#ukr">Ukrainian</a>,
+					 <a href="#cat">Catalan</a>,
+					 <a href="#hrv">Croatian</a>,
+					 <a href="#heb">Hebrew</a>,
+					 <a href="#lit">Lithuanian</a>,
+					 <a href="#slv">Slovenian</a>,
+					 <a href="#hin">Hindi</a>,
+					 <a href="#ben">Bengali</a>,
+					 <a href="#tel">Telugu</a>,
+					 <a href="#tam">Tamil</a>,
+					 <a href="#kan">Kannada</a>,
+					 <a href="#mal">Malayalam</a>,
+					 <a href="#tgl">Tagalog</a>,
+					 <a href="#swa">Swahili</a>,
+					 <a href="#aze">Azerbaijani</a>,
+					 <a href="#bel">Belarusian</a>,
+					 <a href="#afr">Afrikaans</a>,
+					 <a href="#sqi">Albanian</a>,
+					 <a href="#eus">Basque</a>,
+					 <a href="#epo">Esperanto</a>,
+					 <a href="#est">Estonian</a>,
+					 <a href="#glg">Galician</a>,
+					 <a href="#isl">Icelandic</a>,
+					 <a href="#lav">Latvian</a>,
+					 <a href="#mkd">Macedonian</a>,
+					 <a href="#msa">Malay</a>,
+					 <a href="#mlt">Maltese</a>,
+					 <a href="#grc">Ancient Greek</a>,
+					 <a href="#chr">Cherokee</a>,
+					 <a href="#enm">English (Old)</a>,
+					 <a href="#epo_alt">Esperanto alternative</a>,
+					 <a href="#frk">Frankish</a>,
+					 <a href="#frm">French (Old)</a>,
+					 <a href="#ita_old">Italian (Old)</a>,
+					 <a href="#equ">Math</a>,
+					 <a href="#srp">Serbian (Latin)</a>,
+					 <a href="#slk">Slovakian</a>,
+					 and
+					 <a href="#spa_old">Old Spanish!</a>)</div> -->
+
 				</div>
-				<br>
-				<button>Download</button><br>
-				<a href="https://github.com/naptha/tesseract.js"><button>View on Github</button></a>
+				<a href="#get_started">
+					<div class="getStarted">
+						Get Started
+					</div>
+				</a>
+
 			</div>
-			<div id="wow">
 
-				<div id='editor'></div>
-				<div id="hint">
+			<div id="wow" class="demo">
+				<div class="demoheader">
+				</div>
+				<hr>
+				<div class="editor"></div>
+				<div class="hint">
 						Hint: you can, like, edit this code yo
-					</div>
-				<div id ="running">
-					<div id="out">Initializing Magic...</div>
-					<progress id="prog" value="0" max="1"></progress>
 				</div>
-				<div id = "run">
-					
-					<div id="runbutton">Run Code</div>
+				<div class="running">
+					<div class="out">Initializing Magic...</div>
+					<progress class="prog" value="0" max="1"></progress>
 				</div>
-				<canvas id="display"></canvas>
-				<img src="img/poem.png" width = "500px" id ="to_ocr">
-				<div id="drag">
-					<a href="">New Image</a> (or drop an image on this page)
+				<div class="notrunning">
+					<div class="runbutton">Run Code</div>
+				</div>
+
+				<canvas class="display"></canvas>
+
+				<img src="img/poem.png" class="to_ocr">
+				<div class="demofooter">
+					<div class="bookend"></div>
+					<div class="langlabel"><b>English</b> </div><div class="vr"></div>
+					<div class="langlabel">Chinese</div> <div class="vr"></div>
+					<div class="langlabel">Russian</div> <div class="vr"></div>
+					<div class="langlabel">Meme</div> <div class="bookend"></div>
 				</div>
 			</div>
+
 		</div>
 
 	</div>
+<!-- 	<div class="fullscreen">
+	</div>
+ -->
+		<div class="two fullscreen">
+
+			<div id="explorer">The output of the demo will magically appear here :)</div>
+
+
+			<div class="desc">
+				click stuff to explore the rich creamy Tesseract.js output
+ 			</div>
+		</div>
+
+
 	<div id="notconvinced" class="fullscreen">
+
+
+		<div id="get_started">
+			<div class="npm" >npm install tesseract.js</div>
+		<!-- <br> -->
+		<!-- &#151; or &#151; -->
+			<div class="npm longasstag">&lt;script src="https://cdn.rawgit.com/naptha/tesseract.js/master/lib/Tesseract.js"&gt;&lt;/script&gt;</div>
+		</div>
+
+
 		<div class="rant randombold">
 		"Last time I got here, before I <b>even</b> arrived, they had ‘fuck <b>Kanye’</b> on the motherfuckin’ <b>port-a-potties.</b> But this year, we gon’ piss on ‘em, on they motherfuckin’ port-a-potties. How many of <b>y'all</b> don't give a fuck about <b>what</b> the press <b>say?</b> It's 2014. College Dropout came out 2004. I want y'all to know, <b>every</b> time I go to the studio, every time I <b>do</b> <b>an</b> <b>interview,</b> every time I make a motherfuckin' <b>t-shirt,</b> the thing <b>I</b> do, I give it <b>everything</b> <b>I</b> got. And when I talk that shit, it's so that <b>you</b> can talk that shit. If you a fan of me, you a fan of your motherfuckin' self. You can do something that'll change the world. Look at how they try to make me look. They <b>try</b> to make me look crazy.",
         <b></b>    "I <b>need</b> a new cool. <b>What's</b> the new shit out? What's the new shit <b>out</b> <b>with</b> the most commercials at the Super Bowl? <b>Let's</b> <b>just</b> stop the music and play a Bruno Mars song right <b>now,</b> how about that? <b>They</b> told me I would never play at the Super Bowl. They told me I could never play at the Super Bowl. Not until I'm <b>super</b> old. Not until I'm <b>super</b> old... They told me I would never play at the <b>Super</b> Bowl. They told <b>me</b> I would never play at the <b>Super</b> <b>Bowl,</b> at least not until I'm super old. So I think it's time&#150hold up, f&#151k that toast.",
@@ -64,16 +176,18 @@
 	</div>
 
 <!-- 
-	<script src="./core/temple.js"></script>
-
- -->
 	<script src="https://rawgit.com/naptha/tesseract.js/master/lib/Tesseract.js"></script>
-	
+ -->
+
+ 	<script src="../master/lib/Tesseract.js"></script>
+
 	<script src="main.js"></script>
 
 	<script src="animation/raf.js"></script>
 	<script src="animation/mouse.js"></script>
 	<script src="animation/dimensions.js"></script>
 	<script src="animation/main.js"></script>
+
+	<script src="explorer/explorer.js"></script>
 </body>
 </html>

main.js

@@ -1,129 +1,183 @@
-var prog = document.getElementById('prog')
-var out = document.getElementById('out')
+function builddemo(id, val){
+	var demo = document.getElementById(id)
+	var prog = demo.querySelector('.prog')
+	var out = demo.querySelector('.out')
+
+	var disp = demo.querySelector('.display')
+	var dctx = disp.getContext('2d')
+	disp.width = 0
+	disp.height = 0
+
+	demo.querySelector('.runbutton').onclick = function(){
+		setrunning(0)
+		run(editor)
+	}
 
-var disp = document.getElementById('display')
-var dctx = disp.getContext('2d')
-disp.width = 0
-disp.height = 0
+	function show_progress(p){
 
-document.getElementById('runbutton').onclick = function(){
-	setrunning(0)
-	run(myCodeMirror)
-}
+		setrunning(0)
+		console.log(p)
+		if(p.loaded_lang_model) prog.value = p.loaded_lang_model
+		if(p.recognized) prog.value = p.recognized
+		out.innerText = JSON.stringify(p)
+		out.innerText = JSON.stringify(p)
 
-function show_progress(p){
+	}
 
-	if(p.loaded_lang_model) prog.value = p.loaded_lang_model
-	if(p.recognized) prog.value = p.recognized
-	setrunning(p.recognized)
-	out.innerText = JSON.stringify(p)
-	out.innerText = JSON.stringify(p)
+	function setrunning(v){
+		if (v == 1) {
+			demo.querySelector('.running').style.display = 'none'
+			demo.querySelector('.notrunning').style.display = 'block'
+			// out.style.visibility = 'hidden'
+		}
+		else {
+			demo.querySelector('.running').style.display = 'block'
+			demo.querySelector('.notrunning').style.display = 'none'
+		}
+	}
 
-}
+	function display(result) {
 
-function setrunning(v){
-	if (v == 1) {
-		document.getElementById('running').style.display = 'none'
-		document.getElementById('run').style.display = 'block'
-		// out.style.visibility = 'hidden'
-	}
-	else {
-		document.getElementById('running').style.display = 'block'
-		document.getElementById('run').style.display = 'none'
-	}
-}
+		React.render(React.createElement(Node, { node: result, expanded: true, label: "output_of_above_demo"}), document.getElementById("explorer"));
+
+		setrunning(1)
+
+		out.innerText = "Lightning Speeeeeeed"
+		prog.value = 0
 
-function display(result) {
-	console.log(result)
+		console.log(result)
 
-	disp.width = document.getElementById('to_ocr').naturalWidth
-	disp.height = document.getElementById('to_ocr').naturalHeight
+		disp.width = demo.querySelector('.to_ocr').naturalWidth
+		disp.height = demo.querySelector('.to_ocr').naturalHeight
 
-	disp.style.width = document.getElementById('to_ocr').offsetWidth
-	disp.style.height = document.getElementById('to_ocr').offsetHeight
+		disp.style.width = demo.querySelector('.to_ocr').offsetWidth
+		disp.style.height = demo.querySelector('.to_ocr').offsetHeight
 
 
-	dctx.shadowColor = "#fff"
-	dctx.shadowOffsetX = 0;
-	dctx.shadowOffsetY = 0;
-	dctx.shadowBlur = 10;
+		dctx.shadowColor = "rgba(255,255,255,.1)"
+		dctx.shadowOffsetX = 0;
+		dctx.shadowOffsetY = 0;
+		dctx.shadowBlur = 10;
 
-	var m  = result.words.map(function(w){
-		
-		var b  = w.bbox
-		
-		var k = (function(){
+		dctx.fillRect(0,0,disp.width, disp.height)
 
-			dctx.font = '20px Comic Sans MS'
-			dctx.font = 20*(b.x1-b.x0)/dctx.measureText(w.text).width+"px Comic Sans MS"
+		var m  = result.words.map(function(w){
+			
+			var b = w.bbox
+			dctx.font = '20px Times'
+			var font = 20*(b.x1-b.x0)/dctx.measureText(w.text).width+"px Times"
 
-			// dctx.fillStyle="rgba(255,255,255,.01)"
-			// dctx.fillRect(b.x0,b.y0,b.x1-b.x0, b.y1-b.y0)
-			dctx.fillStyle="rgba(255,0,255,.1)"
+			
+			var k = function(){
+				dctx.font = font
 				dctx.fillText(w.text, b.x0, w.baseline.y0);
+				return font
+			}
 
-				// dctx.strokeStyle = "rgba(255,255,255,.1)"
-				// dctx.strokeText(w.text, b.x0, w.baseline.y0);
+			return k
 		})
 
-		// k()
-		return k
-	})
+		var times = 0
+		var maxtimes = m.length + 100
+		function draw(i){
+
+			times++
+			dctx.fillStyle="rgba(30, 29, 49, .8)"
+			dctx.clearRect(0,0,disp.width, disp.height)
+			dctx.fillRect(0,0,disp.width, disp.height)
 
-	var times = 0
-	function draw(i){
-		times++
-		for (var j = 0; j < i; j++) {
-			m[j]()
-		};
-		if(times<200){
-			setTimeout(function(){
-				if(i+1<m.length){
+			for (var j = 0; j < Math.min(i,m.length); j++) {
+				var asdf = Math.min(Math.max(i - j,0), 100)
+				dctx.fillStyle = "rgba(255,255,255,"+asdf*.01+")"
+				m[j]()
+			};
+
+			if(i<maxtimes){
+				setTimeout(function(){
 					draw(i+1)
-				}
-				else {
-					draw(i)
-				}
-			},10)					
-		}
-		else{
-			console.log('done')
+				},10)					
+			}
+			else{
+				console.log('done')
+			}
 		}
+		draw(0)
+		// result.words.forEach(function(word, index){
+		// 	var wdiv = document.createElement('div')
+		// 	wdiv.innerText = word.text+' '
+		// 	wdiv.style['font-family'] = "Times"
+		// 	wdiv.style.position = 'absolute'
+		// 	var scale = document.getElementById('to_ocr').offsetHeight / document.getElementById('to_ocr').naturalHeight
+		// 	wdiv.style['font-size'] = parseFloat(m[index]().split('px')[0]) * scale
+		// 	wdiv.style.color = "rgba(0,0,0,0)"
+		// 	wdiv.style.top = word.bbox.y0 * scale
+		// 	wdiv.style.left = word.bbox.x0 * scale
+		// 	wdiv.style.height = (word.bbox.y1 - word.bbox.y0)*scale
+		// 	wdiv.style.width = (word.bbox.x1 - word.bbox.x0)*scale
+		// 	document.getElementById('ocroutput').appendChild(wdiv)
+		// })
 	}
-	draw(0)
 
-}
+	window.addEventListener('resize', function() {
+		disp.style.width = demo.querySelector('.to_ocr').offsetWidth
+		disp.style.height = demo.querySelector('.to_ocr').offsetHeight
+	})
 
-window.onresize = function() {
-	disp.style.width = document.getElementById('to_ocr').offsetWidth
-	disp.style.height = document.getElementById('to_ocr').offsetHeight
-}
+	function run(c){
+		eval(c.getValue())
+	}
 
-function run(c){
-	eval(c.getValue())
+	var editor = CodeMirror(demo.querySelector('.editor'),{
+		// lineNumbers: true,
+		viewportMargin: Infinity,
+		value: val
+	});
+
+	var sc = demo.querySelector('.demoheader')
+	var scdiv = document.createElement('div')
+	sc.appendChild(scdiv)
+	scdiv.className = 'CodeMirror cm-s-default'
+	// scdiv.className = 'cm-s-default'
+	CodeMirror.runMode('<script src="Tesseract.js"></script>', {name: 'xml', htmlMode: true}, scdiv)
+
+	// var scripttag = CodeMirror(,{
+	// 	mode: {name: 'xml', htmlMode: true},
+	// 	readOnly: 'nocursor',
+	// 	value: 
+	// });
+
+
+	return {
+
+		run: function(){
+			var img = demo.querySelector('.to_ocr')
+	
+			if (img.complete) {
+				run(editor)
+			} else{
+				img.onload = function(){
+					run(editor)
+				}
+			}
+	
+		}
+	}
 }
 
-var val = 
-"var img = document.querySelector('img#to_ocr')\n\
-\n\
+builddemo('wow', 
+"var img = demo.querySelector('img.to_ocr')\n\n\
 Tesseract\n\
-.recognize( img, {progress: show_progress} )\n\
-.then( display )"
-
-var myCodeMirror = CodeMirror(document.getElementById('editor'),{
-// lineNumbers: true,
-viewportMargin: Infinity,
-value: val
-});
-
-
-
-var img = document.getElementById('to_ocr')
-
-if (img.complete) {
-	run(myCodeMirror)
-} else{
-	img.onload = function(){
-		run(myCodeMirror)
-	}
-}
+  .recognize( img, {progress: show_progress} )\n\
+  .then( display )")
+.run()
+
+// document.querySelector('.getStarted')[0].onclick = function(){
+// 	location.href = '#'
+// 	location.href = '#get_started'
+// }
+
+// builddemo('demo2',
+// "var img = demo.querySelector('img.to_ocr')\n\n\
+// Tesseract\n\
+//   .recognize( img, {progress: show_progress, lang:'chi_sim'} )\n\
+//   .then( display )")

perlinish/perlinish.js

@@ -0,0 +1,61 @@
+var svg = (function(colors){
+	var canvas = document.createElement('canvas'),
+		ctx = canvas.getContext('2d');
+
+	canvas.width = 10
+	canvas.height = 2
+	var upscale = 10
+
+	var im = ctx.getImageData(0,0,canvas.width,canvas.height)
+	for (var i = 0; i < im.data.length; i+=4) {
+		im.data[i] = Math.round(Math.random()*255)
+		im.data[i+1] = Math.round(Math.random()*255)
+		im.data[i+2] = Math.round(Math.random()*255)
+		im.data[i+3] = 255
+	};
+	ctx.putImageData(im,0,0)
+	var url = canvas.toDataURL()
+	im = new Image()
+	im.src = url
+	canvas.width *= upscale
+	canvas.height *= upscale
+	ctx.drawImage(im,0,0,canvas.width, canvas.height)
+	im = ctx.getImageData(0,0,canvas.width,canvas.height)
+
+	var xmlns = "http://www.w3.org/2000/svg";
+	var svg = document.createElementNS(xmlns, 'svg')
+	svg.setAttribute('viewBox',"0 0 "+im.width+" "+im.height)
+	for (var i = 0; i < im.data.length; i+=4) {
+		var mindist = 195075
+		var mincolor = [0,0,0]
+		var pix = [im.data[i],im.data[i+1],im.data[i+2]]
+		for (var j = 0; j < colors.length; j++) {
+			var color = colors[j]
+			var d0 = color[0] - pix[0]
+			var d1 = color[1] - pix[1]
+			var d2 = color[2] - pix[2]
+			var d = Math.abs(d0)+Math.abs(d1)+Math.abs(d2)
+			if (d<mindist) {
+				mindist = d
+				mincolor = color
+			}
+		};
+
+		var n = i/4
+		var elem = document.createElementNS(xmlns, "rect");
+		elem.setAttributeNS(null,"x",n%im.width);
+		elem.setAttributeNS(null,"y",Math.floor(n/im.width));
+		elem.setAttributeNS(null,"width",1.5);
+		elem.setAttributeNS(null,"height",1.5);
+		elem.setAttributeNS(null,"fill", 'rgba('+Math.min(mincolor[0]+0%2*20,255)+', '+mincolor[1]+', '+mincolor[2]+',1)');
+		 
+		svg.appendChild(elem);
+	};
+	return svg
+})([
+[39, 198, 249],
+[6, 188, 249],
+// [154, 218, 198],
+[116, 218, 251],
+[91, 211, 251]])
+document.getElementById('marterial').appendChild(svg)