getty
/
matzo-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
							<!DOCTYPE html>
<html>
  <head>
    <script type="module">
     import init, {matzo_run} from "./matzo_web.js";

     const sources = %SOURCES%;

     window.onload = () => {
       const run = document.getElementById('run');
       const src = document.getElementById('src');
       const output = document.getElementById('output');
       const examples = document.getElementById('examples');

       examples.onchange = () => {
         src.value = sources[examples.value];
       };

       init()
         .then(() => {
           run.onclick = () => {
             let result = matzo_run(src.value);
             output.innerHTML = result;
           }
         });
     };
    </script>
    <style type="text/css">
     body, html {
       height: 100%;
       margin: 0em;
     }

     .all {
       margin-left: auto;
       margin-right: auto;
       height: 100%;
       display: flex;
     }
     .all > div {
       margin: 1em;
       padding: 1em;
       border: 1px solid;
       width: 50%;
       height: 90%;
     }
     #output {
       font-family: "Fira Mono";
       white-space: pre-wrap;
     }
    </style>
  </head>
  <body>
    <div class="all">
      <div class="panel">
        <select id="examples">
          <option value="hello">hello.matzo</option>
          %EXAMPLES%
        </select><br/>

        <textarea id="src" cols="80" rows="30">puts "hello, world!";</textarea><br/>
        <input type="submit" id="run" value="Run" />
      </div>
      <div>
        <pre id="output"></pre>
      </div>
    </div>
  </body>
</html>