BaseCase/terminal.html

## terminal.html
<html>
  <head>
    <style>
      .shadow-input { opacity: 0; }
      .prompt { font-family: monospace; }

      .cursor {
        display: flex;
        flex-direction: row;
        position: absolute;
      }

      .cursor .offset { opacity: 0; }

      .cursor .caret {
        background-color: green;
        display: inline-block;
        height: 1em;
        opacity: .5;
        width: 8px;
      }
    </style>
  </head>

  <body>
    <div class="prompt">
      <div class="cursor">
        <span class="offset"></span>
        <span class="caret"></span>
      </div>

      <div class="content"></div>
    </div>

    <input type="text" class="shadow-input" />


    <script>
      (function() {
        let shadow_input = document.querySelector(".shadow-input"),
            prompt_text = document.querySelector(".prompt .content"),
            cursor_offset = document.querySelector(".cursor .offset");

        shadow_input.addEventListener("keydown", function handle_prompt_keydown() {
          setTimeout(render_prompt, 15);
        });

        function render_prompt() {
          let buffer = shadow_input.value,
              cursor_position = shadow_input.selectionStart;

          prompt_text.textContent = buffer;

          let positioning_text = buffer.slice(0, cursor_position);
          cursor_offset.textContent = positioning_text;
        }

        shadow_input.focus();
        render_prompt();
      })();
    </script>
  </body>
</html>
	<html>
	<head>
	<style>
	.shadow-input { opacity: 0; }
	.prompt { font-family: monospace; }

	.cursor {
	display: flex;
	flex-direction: row;
	position: absolute;
	}

	.cursor .offset { opacity: 0; }

	.cursor .caret {
	background-color: green;
	display: inline-block;
	height: 1em;
	opacity: .5;
	width: 8px;
	}
	</style>
	</head>

	<body>
	<div class="prompt">
	<div class="cursor">
	<span class="offset"></span>
	<span class="caret"></span>
	</div>

	<div class="content"></div>
	</div>

	<input type="text" class="shadow-input" />


	<script>
	(function() {
	let shadow_input = document.querySelector(".shadow-input"),
	prompt_text = document.querySelector(".prompt .content"),
	cursor_offset = document.querySelector(".cursor .offset");

	shadow_input.addEventListener("keydown", function handle_prompt_keydown() {
	setTimeout(render_prompt, 15);
	});

	function render_prompt() {
	let buffer = shadow_input.value,
	cursor_position = shadow_input.selectionStart;

	prompt_text.textContent = buffer;

	let positioning_text = buffer.slice(0, cursor_position);
	cursor_offset.textContent = positioning_text;
	}

	shadow_input.focus();
	render_prompt();
	})();
	</script>
	</body>
	</html>