examples/terminal.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Miew with Simple Terminal</title>

  <link rel="stylesheet" href="../packages/lib/build/dist/Miew.min.css">
  <link href="https://unpkg.com/jquery.terminal@1/css/jquery.terminal.min.css" rel="stylesheet"/>
  <style>
    html, body { width: 100%; height: 100% }
    .miew-terminal {
      --background: transparent;
      width:640px;
      z-index: 10;
    }
    .miew-terminal-body {
      display:block;
      border: 1px solid #444444;
      height: 200px;
      overflow-y: auto;
      background:rgba(64,64,64,1);
    }
  </style>

  <script src="https://unpkg.com/@babel/polyfill@7/dist/polyfill.min.js"></script>
  <script src="https://unpkg.com/jquery@3/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/jquery.terminal@1/js/jquery.terminal.min.js"></script>
  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
  <script src="../packages/lib/build/dist/Miew.min.js"></script>
</head>
<body>
  <h1>Attach a jquery.terminal</h1>
  <div class="miew-container" style="width:640px; height:480px; position:relative"></div>
  <div class="miew-terminal">
    <div class="row col-xs-12 col-sm-12 panel panel-default panel-menu panel-dark" data-panel-type="miew-menu-panel-terminal" style="background-color: transparent">
      <div class="panel-body miew-terminal-body">
        <div class="terminal-window"></div>
      </div>
    </div>
  </div>
  <script src="terminal.js"></script>
</body>
</html>