debugViewer.html (2728B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Debug Output</title> 6 <script src="include.js"></script> 7 <script src="debugViewer.js"></script> 8 9 <style> 10 body { 11 margin: 0; 12 } 13 14 header { 15 position: fixed; 16 top: 0; 17 background: lightgrey; 18 display: flex; 19 align-items: center; 20 width: calc(100% - 20px); 21 height: 18px; 22 padding: 10px; 23 margin-bottom: 10px; 24 font-family: sans-serif; 25 font-size: 11pt; 26 } 27 28 header > * { 29 margin-right: 10px; 30 } 31 32 progress { 33 width: 125px; 34 } 35 36 #debug-id { 37 font-weight: bold; 38 } 39 40 #submit-result { 41 line-height: 1.25em; 42 } 43 44 #submit-result-copy-id { 45 cursor: pointer; 46 padding-left: 2px; 47 } 48 49 #submit-error { 50 font-weight: bold; 51 color: red; 52 } 53 54 #content { 55 margin-top: 38px; 56 padding: 10px 9px; 57 font-family: Monaco, Consolas, Inconsolata, monospace; 58 font-size: 8pt; 59 } 60 61 #errors { 62 padding-bottom: 12px; 63 border-bottom: 1px lightgray solid; 64 white-space: pre-wrap; 65 } 66 67 68 69 /* 70 CSS tooltip, adapted from http://stackoverflow.com/a/25836471 71 */ 72 [data-tooltip] { 73 display: inline-block; 74 position: relative; 75 cursor: pointer; 76 padding: 2px; 77 } 78 [data-tooltip]:before { 79 content: attr(data-tooltip); 80 display: none; 81 position: absolute; 82 background: #000; 83 color: #fff; 84 padding: 4px 8px; 85 font-size: 12px; 86 font-family: sans-serif; 87 line-height: 1.4; 88 text-align: center; 89 border-radius: 4px; 90 91 left: 50%; 92 transform: translateX(-50%); 93 94 top: 100%; 95 margin-top: 6px; 96 97 white-space: nowrap; 98 } 99 [data-tooltip]:after { 100 content: ''; 101 display: none; 102 position: absolute; 103 width: 0; 104 height: 0; 105 border-color: transparent; 106 border-style: solid; 107 108 left: 50%; 109 margin-left: -6px; 110 111 top: 100%; 112 border-width: 0 6px 6px; 113 border-bottom-color: #000; 114 } 115 /* Show the tooltip when hovering */ 116 [data-tooltip]:hover:before, 117 [data-tooltip]:hover:after { 118 display: block; 119 z-index: 50; 120 } 121 </style> 122 </head> 123 <body> 124 <header> 125 <button id="submit-button" onclick="submit(this)" disabled>Submit…</button> 126 <button id="clear-button" onclick="clearOutput(this)" disabled>Clear</button> 127 <progress id="submit-progress" hidden></progress> 128 <p id="submit-result" hidden> 129 Submitted with Debug ID <span id="debug-id"></span> 130 <span id="submit-result-copy-id" onclick="copyIDToClipboard(this)">📋</span> 131 </p> 132 <p id="submit-error" hidden></p> 133 </header> 134 <div id="content"> 135 <div id="errors"></div> 136 <div id="output"></div> 137 </div> 138 </body> 139 </html>