╭ index.html ───────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯
╭────╮ ╭ clone ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │http│ ssh │ │ ╰────╯ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯
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 /* the grid's inline-block cell-runs can render a few pixels wider 11 than the column width, so prevent spurious horiz scrollbar */ 12 overflow-x: hidden; 13 /* always reserve the vertical scrollbar's space so the usable width 14 is constant whether or not it's showing */ 15 scrollbar-gutter: stable; 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: 22px; 26 line-height: 22px; 27 position: relative; 28 } 29 30 #grid { 31 white-space: pre; 32 } 33 34 /* render each colored cell-run as an inline-block to prevent 35 horizontal seams between rows of the block art. */ 36 #grid span { 37 display: inline-block; 38 vertical-align: top; 39 } 40 41 /* overlay elements share the grid's coordinate system since 42 their parent (.page) is the positioning ancestor and the 43 grid sits at its top-left. */ 44 .page input, 45 .page button { 46 position: absolute; 47 font: inherit; 48 padding: 0; 49 margin: 0; 50 outline: none; 51 box-sizing: border-box; 52 } 53 54 .page input { 55 color: inherit; 56 /* transparent field so the backdrop shows through fully; a dark 57 halo backs just the characters so they stay legible */ 58 background: transparent; 59 text-shadow: 0 0 3px #000, 0 0 5px #000, 0 0 5px #000; 60 border: none; 61 } 62 63 /* the TUI cells under the button render the border + label; 64 the overlay button stays transparent so they show through 65 and just owns the click + form-submit behavior. */ 66 .page button { 67 background: transparent; 68 color: transparent; 69 border: none; 70 cursor: pointer; 71 } 72 73 #grid a { 74 color: inherit; 75 text-decoration: none; 76 } 77 78 #grid .clickable { 79 cursor: pointer; 80 } 81 </style> 82 </head> 83 <body> 84 <div class="page"> 85 <div id="grid">{{{ HAXY_HTML }}}</div> 86 <div id="overlay">{{{ HAXY_OVERLAY }}}</div> 87 </div> 88 <script id="page-data" type="text/plain">{{{ HAXY_JSON }}}</script> 89 <script src="script.js"></script> 90 </body> 91 </html> 92