WojtekCodesToday/pandoa-www.html

## pandoa-www.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pandoa on the Web</title>
</head>

<body>
    <textarea id="input"></textarea>
    <button id="optimize">Optimize!</button>
    <div id=options>
        <input type="checkbox" id="allow-jsx" value=JSX>Allow JSX</input><br/>
        <input type="checkbox" id="math-opt" value=JSX>Math optimizations</input><br/>
        <input type="checkbox" id="oper-opt" value=JSX>Math operator optimizations</input>
    </div>
    <br />
    <textarea disabled id="output"></textarea>
    <style>
        body {
            background-color: #fff;
            font-family: monospace;
        }

        #options {
            position: absolute;
            top: 0;
            right: 0;
            margin-right: 10px;
            margin-top: 55px;
            overflow:visible;
            width: 130px;
            text-align: center;
        }

        input[type=checkbox]:hover {
            accent-color: #000;
        }

        input[type=checkbox]:checked {
            accent-color: rgb(160, 233, 255);
        }

        #input { position: absolute; left: 0; right: 0; margin-left: 10px; margin-right: 150px; border-width: 1px; height: 50%; font-family: monospace; resize: none;}
        #output { position: absolute; font-family: monospace; margin: 10px; margin-top: calc(25%); border-width: 1px; left: 0; right: 0; top: 0; bottom: 0; resize: none; border-color: rgb(172, 172, 172); background-color: #e2e2e2; }
        #optimize { border-style:solid; border-width: 1px; position: absolute; margin-right: 10px; right: 0; height: 40px; width: 130px; }
        #optimize:hover {background-color: rgb(194, 194, 194)}
    </style>
    <script type="module">
        //Pandoa itself, latest because might not update website
        import pandoa from "https://unpkg.com/pandoa/index.js";
        //Optimization button
        function Optimize() { if (document.getElementById("input").value !== "") { document.getElementById("output").value = pandoa.closure(document.getElementById("input").value) } else { document.getElementById("output").value = "try 1+1, empty input." } }
        //Default settings
        document.getElementById("allow-jsx").checked = false;
        document.getElementById("math-opt").checked = true; document.getElementById("oper-opt").checked = true;
        //Events
        document.getElementById("allow-jsx").addEventListener("change", function () { pandoa.useJSX = this.checked });
        document.getElementById("math-opt").addEventListener("change", function () { pandoa.mathOptimizations = this.checked });
        document.getElementById("oper-opt").addEventListener("change", function () { pandoa.mathOperatorOptmizations = this.checked });
        document.getElementById("optimize").addEventListener("click", Optimize);
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pandoa on the Web</title>
	</head>

	<body>
	<textarea id="input"></textarea>
	<button id="optimize">Optimize!</button>
	<div id=options>
	<input type="checkbox" id="allow-jsx" value=JSX>Allow JSX</input><br/>
	<input type="checkbox" id="math-opt" value=JSX>Math optimizations</input><br/>
	<input type="checkbox" id="oper-opt" value=JSX>Math operator optimizations</input>
	</div>
	<br />
	<textarea disabled id="output"></textarea>
	<style>
	body {
	background-color: #fff;
	font-family: monospace;
	}

	#options {
	position: absolute;
	top: 0;
	right: 0;
	margin-right: 10px;
	margin-top: 55px;
	overflow:visible;
	width: 130px;
	text-align: center;
	}

	input[type=checkbox]:hover {
	accent-color: #000;
	}

	input[type=checkbox]:checked {
	accent-color: rgb(160, 233, 255);
	}

	#input { position: absolute; left: 0; right: 0; margin-left: 10px; margin-right: 150px; border-width: 1px; height: 50%; font-family: monospace; resize: none;}
	#output { position: absolute; font-family: monospace; margin: 10px; margin-top: calc(25%); border-width: 1px; left: 0; right: 0; top: 0; bottom: 0; resize: none; border-color: rgb(172, 172, 172); background-color: #e2e2e2; }
	#optimize { border-style:solid; border-width: 1px; position: absolute; margin-right: 10px; right: 0; height: 40px; width: 130px; }
	#optimize:hover {background-color: rgb(194, 194, 194)}
	</style>
	<script type="module">
	//Pandoa itself, latest because might not update website
	import pandoa from "https://unpkg.com/pandoa/index.js";
	//Optimization button
	function Optimize() { if (document.getElementById("input").value !== "") { document.getElementById("output").value = pandoa.closure(document.getElementById("input").value) } else { document.getElementById("output").value = "try 1+1, empty input." } }
	//Default settings
	document.getElementById("allow-jsx").checked = false;
	document.getElementById("math-opt").checked = true; document.getElementById("oper-opt").checked = true;
	//Events
	document.getElementById("allow-jsx").addEventListener("change", function () { pandoa.useJSX = this.checked });
	document.getElementById("math-opt").addEventListener("change", function () { pandoa.mathOptimizations = this.checked });
	document.getElementById("oper-opt").addEventListener("change", function () { pandoa.mathOperatorOptmizations = this.checked });
	document.getElementById("optimize").addEventListener("click", Optimize);
	</script>
	</body>

	</html>