From 93d7f53ab42ef6184de80ddb1b15f1cbaf1166cd Mon Sep 17 00:00:00 2001
From: Jared Miller <jared@smell.flowers>
Date: Sun, 1 Mar 2026 11:59:45 -0500
Subject: [PATCH] Add static split-flap board with flap character rendering

---
 index.html | 377 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 377 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6d3d5d6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,377 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Split-Flap Board</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
+<style>
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  background: #111;
+  font-family: 'Roboto Mono', 'Courier New', monospace;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 30px 20px;
+  min-height: 100vh;
+}
+
+#board-wrapper {
+  transform-origin: top center;
+}
+
+#board {
+  background: #151515;
+  padding: 24px 28px;
+  border: 3px solid #444;
+  border-radius: 4px;
+  box-shadow:
+    inset 0 2px 8px rgba(0,0,0,0.5),
+    0 0 30px rgba(0,0,0,0.6),
+    0 4px 16px rgba(0,0,0,0.4);
+  position: relative;
+  min-width: fit-content;
+}
+
+/* Metallic border overlay */
+#board::before {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: 6px;
+  border: 3px solid transparent;
+  background: linear-gradient(to bottom, #666, #333, #555) border-box;
+  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+/* Date header */
+#date-header {
+  text-align: center;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid #252525;
+}
+
+#date-row {
+  display: inline-flex;
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+
+/* Section labels */
+.section-label {
+  color: #ffb300;
+  font-weight: 700;
+  font-size: 16px;
+  letter-spacing: 2px;
+  margin: 18px 0 8px 0;
+  font-family: 'Roboto Mono', 'Courier New', monospace;
+}
+
+/* Column headers */
+.header-row {
+  display: flex;
+  margin-bottom: 2px;
+}
+
+.header-cell {
+  background: #252525;
+  color: #999;
+  font-family: 'Roboto Mono', 'Courier New', monospace;
+  font-size: 13px;
+  font-weight: 700;
+  padding: 4px 0;
+  text-align: center;
+  letter-spacing: 1px;
+  border-radius: 2px;
+  margin-right: 2px;
+}
+
+.header-cell:last-child {
+  margin-right: 0;
+}
+
+/* Data rows */
+.data-row {
+  display: flex;
+  margin-bottom: 1px;
+  height: 30px;
+  align-items: center;
+}
+
+/* Flap character unit */
+.flap {
+  display: inline-block;
+  width: 18px;
+  height: 28px;
+  position: relative;
+  margin: 0 0.5px;
+  font-family: 'Roboto Mono', 'Courier New', monospace;
+}
+
+.flap-top, .flap-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 50%;
+  overflow: hidden;
+  background: #1a1a1a;
+  color: #e8e0c8;
+  text-align: center;
+}
+
+.flap-top {
+  top: 0;
+  border-bottom: 1px solid #111;
+}
+
+.flap-bottom {
+  bottom: 0;
+}
+
+.flap-top .flap-char,
+.flap-bottom .flap-char {
+  display: block;
+  font-size: 18px;
+  line-height: 28px;
+}
+
+.flap-bottom .flap-char {
+  margin-top: -14px;
+}
+
+/* Date header flaps are larger */
+#date-row .flap {
+  width: 27px;
+  height: 42px;
+}
+
+#date-row .flap-top .flap-char,
+#date-row .flap-bottom .flap-char {
+  font-size: 27px;
+  line-height: 42px;
+}
+
+#date-row .flap-bottom .flap-char {
+  margin-top: -21px;
+}
+
+/* Color classes for special characters */
+.flap-green .flap-char { color: #4caf50 !important; }
+.flap-red .flap-char { color: #f44336 !important; }
+</style>
+</head>
+<body>
+
+<div id="board-wrapper">
+<div id="board">
+  <div id="date-header">
+    <div id="date-row"></div>
+  </div>
+
+  <div id="sections"></div>
+</div>
+</div>
+
+<script>
+(function() {
+  'use strict';
+
+  // ─── Config ─────────────────────────────────────────────────────────
+  // Column definitions - customize per use case
+  const COLS = [
+    { key: 'time',      width: 7,  header: 'TIME' },
+    { key: 'type',      width: 10, header: 'TYPE' },
+    { key: 'title',     width: 22, header: 'TITLE' },
+    { key: 'src',       width: 5,  header: 'SRC' },
+    { key: 'body_part', width: 20, header: 'BODY PART' },
+    { key: 'pt',        width: 4,  header: 'PT' },
+    { key: 'scr',       width: 1,  header: 'S' },
+    { key: 'ins',       width: 1,  header: 'I' },
+  ];
+  const TOTAL_CHARS = COLS.reduce((s, c) => s + c.width, 0);
+  const MAX_ROWS = 20;
+  const CHAR_WIDTH = 18;
+
+  // ─── Flap Element Creation ─────────────────────────────────────────
+  function createFlap(ch) {
+    ch = ch || ' ';
+    const el = document.createElement('div');
+    el.className = 'flap';
+    el.dataset.char = ch;
+
+    const top = document.createElement('div');
+    top.className = 'flap-top';
+    const topChar = document.createElement('span');
+    topChar.className = 'flap-char';
+    topChar.textContent = ch;
+    top.appendChild(topChar);
+
+    const bottom = document.createElement('div');
+    bottom.className = 'flap-bottom';
+    const bottomChar = document.createElement('span');
+    bottomChar.className = 'flap-char';
+    bottomChar.textContent = ch;
+    bottom.appendChild(bottomChar);
+
+    el.appendChild(top);
+    el.appendChild(bottom);
+
+    applyCharColor(el, ch);
+    return el;
+  }
+
+  function applyCharColor(flapEl, ch) {
+    flapEl.classList.remove('flap-green', 'flap-red');
+    if (ch === '\u2713') flapEl.classList.add('flap-green');
+    else if (ch === '\u2717') flapEl.classList.add('flap-red');
+  }
+
+  // ─── Set flap character (no animation yet) ─────────────────────────
+  function setFlapChar(flapEl, ch) {
+    flapEl.dataset.char = ch;
+    flapEl.querySelector('.flap-top .flap-char').textContent = ch;
+    flapEl.querySelector('.flap-bottom .flap-char').textContent = ch;
+    applyCharColor(flapEl, ch);
+  }
+
+  // ─── Row helpers ───────────────────────────────────────────────────
+  function createFlapRow(container, numChars) {
+    const row = document.createElement('div');
+    row.className = 'data-row';
+    for (let i = 0; i < numChars; i++) {
+      row.appendChild(createFlap(' '));
+    }
+    container.appendChild(row);
+    return row;
+  }
+
+  function setRowText(rowEl, text) {
+    const flaps = rowEl.children;
+    const padded = text.padEnd(flaps.length);
+    for (let i = 0; i < flaps.length; i++) {
+      setFlapChar(flaps[i], padded[i]);
+    }
+  }
+
+  // ─── Header Row ───────────────────────────────────────────────────
+  function createHeaderRow(container) {
+    const row = document.createElement('div');
+    row.className = 'header-row';
+    for (const col of COLS) {
+      const cell = document.createElement('div');
+      cell.className = 'header-cell';
+      cell.style.width = (col.width * (CHAR_WIDTH + 1) + 2) + 'px';
+      cell.textContent = col.header;
+      row.appendChild(cell);
+    }
+    container.appendChild(row);
+  }
+
+  // ─── Date Row ─────────────────────────────────────────────────────
+  function setDateText(text) {
+    const container = document.getElementById('date-row');
+    const upper = text.toUpperCase();
+
+    // Rebuild if length changed
+    if (container.children.length !== upper.length) {
+      container.innerHTML = '';
+      for (let i = 0; i < upper.length; i++) {
+        container.appendChild(createFlap(upper[i]));
+      }
+    } else {
+      for (let i = 0; i < upper.length; i++) {
+        setFlapChar(container.children[i], upper[i]);
+      }
+    }
+  }
+
+  // ─── Format Row ───────────────────────────────────────────────────
+  function formatRow(item) {
+    let result = '';
+    for (const col of COLS) {
+      let val;
+      if (col.key === 'scr' || col.key === 'ins') {
+        val = item[col.key] === true ? '\u2713' : item[col.key] === false ? '\u2717' : ' ';
+      } else {
+        val = (item[col.key] || '').toUpperCase();
+      }
+      result += val.padEnd(col.width);
+    }
+    return result;
+  }
+
+  // ─── Build Sections ───────────────────────────────────────────────
+  function buildSection(parent, label) {
+    const labelEl = document.createElement('div');
+    labelEl.className = 'section-label';
+    labelEl.textContent = label;
+    parent.appendChild(labelEl);
+
+    createHeaderRow(parent);
+
+    const rowContainer = document.createElement('div');
+    parent.appendChild(rowContainer);
+
+    const rows = [];
+    for (let r = 0; r < MAX_ROWS; r++) {
+      rows.push(createFlapRow(rowContainer, TOTAL_CHARS));
+    }
+    return rows;
+  }
+
+  // ─── Init ─────────────────────────────────────────────────────────
+  function init() {
+    const sections = document.getElementById('sections');
+
+    const p1Rows = buildSection(sections, 'P1 PRISMA');
+
+    const spacer = document.createElement('div');
+    spacer.style.marginTop = '24px';
+    sections.appendChild(spacer);
+
+    const p2Rows = buildSection(sections, 'P2 PRISMA FIT');
+
+    // Demo: static content
+    setDateText('SATURDAY, MARCH 01, 2025');
+
+    const demoData = [
+      { time: '8:00A', type: 'MRI', title: 'BRAIN W/O CONTRAST', src: 'OP', body_part: 'BRAIN', pt: 'J.D.', scr: true, ins: true },
+      { time: '8:30A', type: 'CT', title: 'CHEST W/ CONTRAST', src: 'ER', body_part: 'CHEST', pt: 'M.S.', scr: true, ins: false },
+      { time: '9:00A', type: 'XRAY', title: 'LEFT HAND 3 VIEW', src: 'OP', body_part: 'LEFT HAND', pt: 'A.B.', scr: false, ins: true },
+    ];
+
+    for (let r = 0; r < MAX_ROWS; r++) {
+      const text = r < demoData.length ? formatRow(demoData[r]) : ''.padEnd(TOTAL_CHARS);
+      setRowText(p1Rows[r], text);
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();
+</script>
+</body>
+</html>
