Add automatically generated web page

beauty.css

@@ -0,0 +1,43 @@
+body, html {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    font-family: monospace;
+    font-size: 18px;
+}
+#openrndr-canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+#menu {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+}
+#menu a, #menu span,
+#sourceButton a, #sourceButton span {
+    background-color: rgba(255,255,255,0.5);
+    padding-left: 5px;
+    padding-right: 5px;
+    border-radius: 3px;
+}
+#sourceButton {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    font-family: monospace;
+}
+#sourceCode {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: calc(70vw);
+    height: calc(100vh - 140px);
+    margin: 50px;
+    border-radius: 7px;
+    background-color: rgba(0,0,0,0.8);
+    overflow: scroll;
+    display: none;
+}

highlightjs/kotlin.min.js

@@ -0,0 +1,46 @@
+/*! `kotlin` grammar compiled for Highlight.js 11.10.0 */
+(()=>{var e=(()=>{"use strict"
+;var e="[0-9](_*[0-9])*",n=`\\.(${e})`,a="[0-9a-fA-F](_*[0-9a-fA-F])*",i={
+className:"number",variants:[{
+begin:`(\\b(${e})((${n})|\\.)?|(${n}))[eE][+-]?(${e})[fFdD]?\\b`},{
+begin:`\\b(${e})((${n})[fFdD]?\\b|\\.([fFdD]\\b)?)`},{begin:`(${n})[fFdD]?\\b`
+},{begin:`\\b(${e})[fFdD]\\b`},{
+begin:`\\b0[xX]((${a})\\.?|(${a})?\\.(${a}))[pP][+-]?(${e})[fFdD]?\\b`},{
+begin:"\\b(0|[1-9](_*[0-9])*)[lL]?\\b"},{begin:`\\b0[xX](${a})[lL]?\\b`},{
+begin:"\\b0(_*[0-7])*[lL]?\\b"},{begin:"\\b0[bB][01](_*[01])*[lL]?\\b"}],
+relevance:0};return e=>{const n={
+keyword:"abstract as val var vararg get set class object open private protected public noinline crossinline dynamic final enum if else do while for when throw try catch finally import package is in fun override companion reified inline lateinit init interface annotation data sealed internal infix operator out by constructor super tailrec where const inner suspend typealias external expect actual",
+built_in:"Byte Short Char Int Long Boolean Float Double Void Unit Nothing",
+literal:"true false null"},a={className:"symbol",begin:e.UNDERSCORE_IDENT_RE+"@"
+},s={className:"subst",begin:/\$\{/,end:/\}/,contains:[e.C_NUMBER_MODE]},t={
+className:"variable",begin:"\\$"+e.UNDERSCORE_IDENT_RE},r={className:"string",
+variants:[{begin:'"""',end:'"""(?=[^"])',contains:[t,s]},{begin:"'",end:"'",
+illegal:/\n/,contains:[e.BACKSLASH_ESCAPE]},{begin:'"',end:'"',illegal:/\n/,
+contains:[e.BACKSLASH_ESCAPE,t,s]}]};s.contains.push(r);const l={
+className:"meta",
+begin:"@(?:file|property|field|get|set|receiver|param|setparam|delegate)\\s*:(?:\\s*"+e.UNDERSCORE_IDENT_RE+")?"
+},c={className:"meta",begin:"@"+e.UNDERSCORE_IDENT_RE,contains:[{begin:/\(/,
+end:/\)/,contains:[e.inherit(r,{className:"string"}),"self"]}]
+},o=i,b=e.COMMENT("/\\*","\\*/",{contains:[e.C_BLOCK_COMMENT_MODE]}),E={
+variants:[{className:"type",begin:e.UNDERSCORE_IDENT_RE},{begin:/\(/,end:/\)/,
+contains:[]}]},d=E;return d.variants[1].contains=[E],E.variants[1].contains=[d],
+{name:"Kotlin",aliases:["kt","kts"],keywords:n,
+contains:[e.COMMENT("/\\*\\*","\\*/",{relevance:0,contains:[{className:"doctag",
+begin:"@[A-Za-z]+"}]}),e.C_LINE_COMMENT_MODE,b,{className:"keyword",
+begin:/\b(break|continue|return|this)\b/,starts:{contains:[{className:"symbol",
+begin:/@\w+/}]}},a,l,c,{className:"function",beginKeywords:"fun",end:"[(]|$",
+returnBegin:!0,excludeEnd:!0,keywords:n,relevance:5,contains:[{
+begin:e.UNDERSCORE_IDENT_RE+"\\s*\\(",returnBegin:!0,relevance:0,
+contains:[e.UNDERSCORE_TITLE_MODE]},{className:"type",begin:/</,end:/>/,
+keywords:"reified",relevance:0},{className:"params",begin:/\(/,end:/\)/,
+endsParent:!0,keywords:n,relevance:0,contains:[{begin:/:/,end:/[=,\/]/,
+endsWithParent:!0,contains:[E,e.C_LINE_COMMENT_MODE,b],relevance:0
+},e.C_LINE_COMMENT_MODE,b,l,c,r,e.C_NUMBER_MODE]},b]},{
+begin:[/class|interface|trait/,/\s+/,e.UNDERSCORE_IDENT_RE],beginScope:{
+3:"title.class"},keywords:"class interface trait",end:/[:\{(]|$/,excludeEnd:!0,
+illegal:"extends implements",contains:[{
+beginKeywords:"public protected internal private constructor"
+},e.UNDERSCORE_TITLE_MODE,{className:"type",begin:/</,end:/>/,excludeBegin:!0,
+excludeEnd:!0,relevance:0},{className:"type",begin:/[,:]\s*/,end:/[<\(,){\s]|$/,
+excludeBegin:!0,returnEnd:!0},l,c]},r,{className:"meta",begin:"^#!/usr/bin/env",
+end:"$",illegal:"\n"},o]}}})();hljs.registerLanguage("kotlin",e)})();

index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>OPENRNDR</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
+    <link rel="stylesheet" href="beauty.css">
+    <link rel="stylesheet" href="highlightjs/androidstudio.min.css">
+</head>
+<body>
+    <canvas id="openrndr-canvas"></canvas>
+    <div id="menu"></div>
+    <div id="sourceButton"><a href="#">source</a></div>
+    <pre><code id="sourceCode" class="language-kotlin"></code></pre>
+
+    <script src="highlightjs/highlight.min.js"></script>
+    <script src="highlightjs/kotlin.min.js"></script>
+    <script>
+        function loadAndHighlight(url) {
+            fetch(url).then(response => response.text()).then((data) => {
+                let codeBlock = document.getElementById('sourceCode')
+                console.log(codeBlock)
+                console.log(data)
+                codeBlock.innerHTML = data
+                hljs.highlightElement(codeBlock);
+            })
+        }
+        document.getElementById('sourceButton').addEventListener('click', function() {
+            var e = document.getElementById('sourceCode');
+            e.style.display = e.style.display != 'block' ? 'block' : 'none';
+        });
+    </script>
+    <script src="openrndr-program.js"></script>
+</body>
+</html>