cocorobolx/src/interface_old2.html

<div>
  <div id='blockpy-content'>
    <div class="blockpy-editor">
      <div class="card-panel white blockpy-blocks blockpy-editor-menu">
        <img class="fullscreenIcon" src="./images/icon-fullscreen.svg">
        <img class="fullscreenIcon hidden" src="./images/icon-fullscreen-exit.svg">
        <div class='blockly-div' style="width:100%;height:100%;"></div>
      </div>
    </div>
    <div>
      <div id="py-editor" class="blockpy-editor card-panel">
        <div class="card-header">
          <span class="header-icon">&lt &gt</span>
          <span class="header-text translate-code">Python Source Code</span>
          <img class="fullscreenIcon" src="./images/icon-fullscreen.svg">
          <img class="fullscreenIcon hidden" src="./images/icon-fullscreen-exit.svg">
        </div>
        <div class="card-content" style="position:relative;">
          <div class="blockpy-toolbar">
            <div class='blockpy-text blockpy-editor-menu'>
              <div class='blockpy-text-sidebar'></div>
              <textarea readonly class='codemirror-div language-python'></textarea>
            </div>
            <a class="copy_code" style="position:absolute;top:5px;right:5px;z-index:999;cursor:pointer;" data-clipboard-action="copy">
              <img src="./images/icon-copy.svg" width="24px">
            </a>
            <div class="blockpy-toolbar-download" style="position:absolute;top:5px;right:34px;z-index:999;cursor:pointer;">
              <img src="./images/icon-downward.svg" width="24px">
            </div>
          </div>
        </div>
      </div>
      <div class='blockpy-content-left card-panel'>
        <div class="card-header">
          <span class="header-icon" style="line-height:40px;"><img style="height:30px;vertical-align:middle;" src="./images/icon-aspect.svg"></span>
          <span class="header-text translate-output">Output Area</span>
          <img class="fullscreenIcon" src="./images/icon-fullscreen.svg">
          <img class="fullscreenIcon hidden" src="./images/icon-fullscreen-exit.svg">
        </div>
        <div class="card-content" style="display:grid;grid-template-rows:1fr 50px;">
          <div style="border-bottom:1px solid #ddd;padding:8px;overflow:hidden;">
            <div style="height:100%;overflow:hidden;">
              <div class='blockpy-printer blockpy-printer-default' style="resize:none;height:98%;width:100%;border:1px solid #818181;">
              </div>
            </div>
          </div>
          <div class="blockpy-toolbar btn-toolbar" style="align-self:center;margin:0 8px;">
            <button class='waves-effect waves-light btn blue blockpy-run translate-execute'>run</button>
            <button class='waves-effect waves-light btn blue blockpy-run translate-execute'>Send</button>
            <button id="resetAll" class='waves-effect waves-light btn blue translate-reset'>reset all</button>
            <button id="clearOutput" class='waves-effect waves-light btn blue translate-clear' style="float:right;">clear output</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class='modal blockpy-popup'>
    <div class='modal-content' id='modal-message'>
      <div class='modal-header'>
        <h4 class='modal-title'>Dynamic Content</h4>
      </div>
      <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;">
      <div class='modal-body' style='width:100%;min-height:200px;'>
      </div>
    </div>
    <div class='modal-footer'>
      <button class='waves-effect waves-light btn blue modal-close translate-close'>close</button>
    </div>
  </div>
</div>