HAXY

▄ ▄▀▀▀▀ ▀ ▄▀▀▀▀▀ ▄▀▀▀ ▄▀▀▀▄▀▀ ▄▄▀▀▀▀▄▀ ▄▀▀▄▀▀▀▀ ▀▀▀▀▀▀▀▀▄ ▀▀▀▀▀▀▀▀▀ ▄ ▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀ ▀▄▄▀▄▀▀▀▀ ▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀ ▄ ▀▀▀▄▀▀▀▀▀▀▀ ▀▀▀▀▀ ▄▀▀▀▀▀▀▀▀▀▄▀▀▄ ▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▄ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▄ ▀▀▄ ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▄▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▄▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀ ▀▀▀▀▀▄▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▄▀▀▀▀▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▄▀▄ ▀▀ ▀▀▀▀▀▀▄▀▀▀▀▀▄▄▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▄▀▄▄▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀▀ ▀▀ ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀ ▀ ▀▀▀▀▀▀▀▄▄▀▀▀▀▀▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▄▄▀▀▀▄▄▀▄▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▄▄▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▄▀▀▄ ▀▀▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀

╭ index.html ───────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯

╭────╮ ╭ clone ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │http│ ssh │ │ ╰────╯ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯

.. ansi/ ╭─────────────────────────────────╮ │index.html │ ╰─────────────────────────────────╯ script.js term.ttf

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>HAXY</title> 6 <style> 7 html { 8 background-color: rgba(0, 50, 70, 1.0); 9 color: rgba(200, 200, 200, 1.0); 10 } 11 12 /* no body margin because it could push content past the viewport and 13 add a window scrollbar */ 14 body { 15 margin: 0; 16 } 17 18 @font-face { 19 font-family: '3270'; 20 src: url('/term.ttf') format('truetype'); 21 } 22 23 .page { 24 font-family: '3270', monospace; 25 font-size: 20px; 26 line-height: 20px; 27 position: relative; 28 } 29 30 #grid { 31 white-space: pre; 32 /* positioning context for the top-level .scroll divs */ 33 position: relative; 34 } 35 36 .ansi-art { 37 position: absolute; 38 top: 0; 39 pointer-events: none; 40 } 41 42 .grid-content { 43 position: relative; 44 } 45 46 body:has(#grid .scroll:not([data-scroll-direction="horiz"])) { 47 height: 100vh; 48 overflow: hidden; 49 } 50 51 /* each web-native Scroll widget: a box positioned over its viewport 52 (left/top/width/height and per-axis overflow come inline, the latter 53 from the widget's scroll direction) */ 54 .scroll { 55 position: absolute; 56 /* scrollbars are hidden; panes scroll via wheel/trackpad and via 57 scrollIntoView on keyboard focus, so a visible bar would only 58 cover content. (Firefox / WebKit respectively.) */ 59 scrollbar-width: none; 60 } 61 .scroll::-webkit-scrollbar { 62 display: none; 63 } 64 65 /* render each colored cell-run as an inline-block to prevent 66 horizontal seams between rows of the block art. */ 67 #grid span { 68 display: inline-block; 69 vertical-align: top; 70 } 71 72 /* a double-width rune pinned to its two grid cells so its advance 73 width can't shift the rest of the row. */ 74 #grid .w2 { 75 width: 2ch; 76 overflow: hidden; 77 } 78 79 /* native controls are positioned over the matching TUI cells. */ 80 .page input, 81 .page textarea, 82 .page button { 83 position: absolute; 84 font: inherit; 85 padding: 0; 86 margin: 0; 87 outline: none; 88 box-sizing: border-box; 89 } 90 91 .page input, 92 .page textarea { 93 color: inherit; 94 background: transparent; 95 border: none; 96 } 97 98 /* the TUI border cells own the frame, so the textarea can't be 99 drag-resized past them */ 100 .page textarea { 101 resize: none; 102 overflow-y: auto; 103 } 104 105 /* the TUI cells under the button render the border + label; 106 the overlay button stays transparent so they show through 107 and just owns the click + form-submit behavior. */ 108 .page button { 109 background: transparent; 110 color: transparent; 111 border: none; 112 cursor: pointer; 113 } 114 115 #grid a { 116 color: inherit; 117 text-decoration: none; 118 } 119 120 #grid .clickable { 121 cursor: pointer; 122 } 123 </style> 124 </head> 125 <body> 126 <div class="page"> 127 <div id="grid">{{{ HAXY_HTML }}}</div> 128 <div id="overlay">{{{ HAXY_OVERLAY }}}</div> 129 </div> 130 <script id="page-data" type="application/json">{{{ HAXY_JSON }}}</script> 131 <script src="/script.js"></script> 132 </body> 133 </html> 134