examples/code-generator.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>🤖 Code Generator - Sequential Workflow Designer</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<link rel="icon" href="data:,">

	<style>
		body {font: 14px/1.3em 'Open Sans', Arial, Verdana, Serif;}
		html, body {width: 100vw; height: 100vh; margin: 0; padding: 0; overflow: hidden;}
		#designer {position: absolute; top: 0; left: 0; bottom: 0; right: 42%;}
		#output {position: absolute; top: 0; right: 0; bottom: 0; left: 58%; padding: 10px; box-sizing: border-box; color: #FFF; background: #151515;}
		#output #code {color: silver;}
		#output #result {color: yellow;}
		#output a {color: #FFF;}
		#output a:hover {text-decoration: none;}

		.sqd-global-editor {padding: 10px;}

		.sqd-editor h3 {margin: 0; padding: 10px;}
		.sqd-editor p {margin: 0; padding: 10px;}
		.sqd-editor p label {display: block; padding: 0 0 5px;}
		.sqd-editor input {width: 100%; box-sizing: border-box; border: 1px solid silver; padding: 6px; border-radius: 5px;}

		/* types */

		.sqd-toolbox-item.sqd-type-setNumber {background: #E6F2FF;}
		.sqd-step-task.sqd-type-setNumber .sqd-step-task-rect {fill: #E6F2FF !important;}

		.sqd-toolbox-item.sqd-type-assignVar {background: #FFEEE6;}
		.sqd-step-task.sqd-type-assignVar .sqd-step-task-rect {fill: #FFEEE6 !important;}

		.sqd-toolbox-item.sqd-type-addVar {background: #E6FFE6;}
		.sqd-step-task.sqd-type-addVar .sqd-step-task-rect {fill: #E6FFE6 !important;}
	</style>
</head>
<body>
	<div id="designer"></div>

	<div id="output">
		<h4>🤖 Code Generator | <a href="https://github.com/nocode-js/sequential-workflow-designer" target="_blank">GitHub</a></h4>

		<pre id="code"></pre>

		<h4>Result</h4>

		<pre id="result"></pre>
	</div>

	<script src="./assets/lib.js"></script>
	<script src="./assets/code-generator.js"></script>
</body>
</html>