Virtual Coder Block Editor HTML code

block_editor.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hack-font@3/build/web/hack-subset.css">

<div id="hider"><div class="srnTitle">VIRTUAL CODER</div></div>

<div id="headers">
	<div id="toolbox-h">Toolbox</div> 
	<div id="workspace-h">
		Workspace: 
		<div id="numOfBlocks" style="display:inline-block"></div>
		/
		<div id="maxBlocks" style="display:inline-block"></div></div> 
	<div id="level-h"></div>
</div>

<div id="blocklyDiv">
    <div id="actions">
		<button id="btnRun" class="run-button" type="button"><i class="fas fa-play"></i></button>
		<button id="btnNext" class="next-button" type="button">Next</button>
	</div>
</div>

<button id="btnStart" class="start-button">Start</button>

<xml id="toolbox_1" style="display: none">
	<block type="move_forward"></block>
	<block type="turn"></block>
	<block type="turn"><field name="Turn">right</field></block>
</xml>

<xml id="toolbox_2" style="display: none">
	<block type="move_forward"></block>
	<block type="turn"></block>
	<block type="turn"><field name="Turn">right</field></block>
	<block type="repeat"></block>
</xml>

<xml id="toolbox_3" style="display: none">
	<block type="move_forward"></block>
	<block type="turn"></block>
	<block type="turn"><field name="Turn">right</field></block>
	<block type="repeat_goal"></block>
</xml>

<xml id="startBlocks" style="display: none">
	<block type="start" deletable="false" movable="false"></block>
</xml>