initial commit

asottile · asottile · commit 2eb25164c6b1 · 2025-11-30T18:05:56.000-05:00
diff --git a/index.htm b/index.htm
@@ -0,0 +1,126 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      font-size: 32px;
+      font-family: consolas, "ubuntu mono", monospace;
+    }
+    body {
+      padding: 0 1rem;
+      position: relative;
+    }
+    .frame {
+      border: .25rem solid #1e77d3;
+      border-radius: 1rem;
+      margin: 1rem 0;
+      min-height: 5rem;
+      position: relative;
+      padding: .5rem 2.5rem .5rem .5rem;
+    }
+    .button {
+      border: 2px solid #333;
+      border-radius: .5rem;
+      width: 1.5rem;
+      height: 1.5rem;
+      text-align: center;
+      line-height: 1.5rem;
+      cursor: pointer;
+      background: #efefef;
+      font-family: initial;
+      user-select: none;
+    }
+    .add {
+      display: inline-block;
+      transform: rotate(45deg);
+    }
+    .close {
+      position: absolute;
+      top: .25rem;
+      right: .25rem;
+    }
+
+    .locals {
+      margin-bottom: .5rem;
+    }
+
+    .cell {
+      border: .25rem solid;
+      display: inline-block;
+      padding: .25rem .75rem;
+    }
+    .add-cell {
+      position: absolute;
+      top: 2.25rem;
+      right: .25rem;
+    }
+  </style>
+</head>
+<body>
+<div id="frames">
+  <div class="button add">✕</div>
+</div>
+<script>
+  (() => {
+    const frames = document.getElementById('frames');
+    const addFrame = frames.querySelector('.add');
+
+    function closeFrame(e) {
+      frames.removeChild(e.currentTarget.parentNode);
+    }
+
+    function deleteCell(e) {
+      e.currentTarget.parentNode.removeChild(e.currentTarget);
+    }
+
+    function cell() {
+      const cell = document.createElement('div');
+      cell.classList.add('cell');
+      cell.contentEditable = 'plaintext-only';
+      // comment out this line for fun wiggle in firefox :)
+      cell.innerText = '\u200b';
+      cell.addEventListener('dblclick', deleteCell);
+      return cell;
+    }
+
+    function addCell(e) {
+      e.currentTarget.parentNode.appendChild(cell());
+    }
+
+    function newFrame() {
+      const frame = document.createElement('div');
+      frame.classList.add('frame');
+
+      const close = document.createElement('div');
+      close.classList.add('close', 'button');
+      close.addEventListener('click', closeFrame);
+      close.innerText = '✕';
+      frame.appendChild(close);
+
+      const locals = document.createElement('div');
+      locals.classList.add('locals');
+      locals.contentEditable = 'plaintext-only';
+      locals.innerText = 'locals: {}';
+      frame.appendChild(locals);
+
+      frame.appendChild(cell());
+
+      const add = document.createElement('add');
+      add.classList.add('button', 'add', 'add-cell');
+      add.innerText = '✕';
+      add.addEventListener('click', addCell);
+      frame.appendChild(add);
+
+      frames.insertBefore(frame, addFrame);
+    }
+
+    addFrame.addEventListener('click', newFrame);
+    newFrame();
+  })();
+</script>
+</body>
+</html>
