╭ 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 padding: 10px; 11 } 12 13 @font-face { 14 font-family: '3270'; 15 src: url('term.ttf') format('truetype'); 16 } 17 18 .page { 19 font-family: '3270', monospace; 20 font-size: 22px; 21 line-height: 22px; 22 position: relative; 23 } 24 25 #grid { 26 white-space: pre; 27 } 28 29 /* overlay elements share the grid's coordinate system since 30 their parent (.page) is the positioning ancestor and the 31 grid sits at its top-left. */ 32 .page input, 33 .page button { 34 position: absolute; 35 font: inherit; 36 padding: 0; 37 margin: 0; 38 outline: none; 39 box-sizing: border-box; 40 } 41 42 .page input { 43 color: inherit; 44 background: rgba(0, 50, 70, 1.0); 45 border: none; 46 } 47 48 /* the TUI cells under the button render the border + label; 49 the overlay button stays transparent so they show through 50 and just owns the click + form-submit behavior. */ 51 .page button { 52 background: transparent; 53 color: transparent; 54 border: none; 55 cursor: pointer; 56 } 57 58 #grid a { 59 color: white; 60 } 61 62 #grid .clickable { 63 cursor: pointer; 64 } 65 </style> 66 </head> 67 <body> 68 <div class="page"> 69 <div id="grid">{{{ HAXY_HTML }}}</div> 70 <div id="overlay">{{{ HAXY_OVERLAY }}}</div> 71 </div> 72 <script id="page-data" type="text/plain">{{{ HAXY_JSON }}}</script> 73 <script src="script.js"></script> 74 </body> 75 </html> 76