|
12 | 12 | height: 100vh; |
13 | 13 | } |
14 | 14 | .panel { |
| 15 | + display: flex; |
15 | 16 | width: 50%; |
16 | 17 | padding: 20px; |
17 | 18 | box-sizing: border-box; |
18 | 19 | } |
| 20 | + .line-numbers { |
| 21 | + background: #f0f0f0; |
| 22 | + padding: 10px; |
| 23 | + margin: 0px; |
| 24 | + margin-top: 2px; |
| 25 | + text-align: right; |
| 26 | + user-select: none; |
| 27 | + white-space: pre; |
| 28 | + border-right: 1px solid #ccc; |
| 29 | + font-family: monospace; |
| 30 | + font-size: 14px; |
| 31 | + line-height: 1.5; |
| 32 | + overflow: hidden; |
| 33 | + } |
19 | 34 | #input { |
20 | 35 | width: 100%; |
21 | 36 | height: 100%; |
| 37 | + padding: 10px; |
| 38 | + margin: 0px; |
22 | 39 | box-sizing: border-box; |
23 | | - resize: none; /* Prevent resizing */ |
| 40 | + resize: none; |
| 41 | + font-family: monospace; |
| 42 | + font-size: 14px; |
| 43 | + line-height: 1.5; |
24 | 44 | } |
25 | 45 | #output { |
26 | 46 | border-left: 1px solid #ccc; |
| 47 | + display: flex; |
| 48 | + flex-direction: column; |
| 49 | + overflow: hidden; |
| 50 | + } |
| 51 | + #output-area { |
| 52 | + flex: 1; |
27 | 53 | overflow: auto; |
28 | 54 | } |
| 55 | + #console-area { |
| 56 | + height: 150px; /* Fixed height for the console area */ |
| 57 | + border-top: 1px solid #ccc; |
| 58 | + overflow: auto; |
| 59 | + background-color: #f9f9f9; /* Light grey background for console area */ |
| 60 | + padding: 10px; |
| 61 | + box-sizing: border-box; |
| 62 | + } |
29 | 63 | </style> |
30 | 64 | </head> |
31 | 65 | <body> |
32 | 66 | <div class="panel"> |
33 | | - <textarea id="input"></textarea> |
| 67 | + <div class="line-numbers" id="line-numbers">1</div> |
| 68 | + <textarea id="input" oninput="updateLineNumbers()" onscroll="syncScroll()" onkeydown="updateLineNumbers()" onkeyup="updateLineNumbers()"></textarea> |
34 | 69 | </div> |
35 | 70 | <div class="panel" id="output"> |
36 | 71 | <!-- Processed output will appear here --> |
| 72 | + <div id="output-area"> |
| 73 | + <!-- Processed output will appear here --> |
| 74 | + </div> |
| 75 | + <div id="console-area"> |
| 76 | + <!-- Error messages will appear here --> |
| 77 | + </div> |
37 | 78 | </div> |
38 | 79 | <script> |
| 80 | + function updateLineNumbers() { |
| 81 | + const textarea = document.getElementById('input'); |
| 82 | + const lineNumbers = document.getElementById('line-numbers'); |
| 83 | + |
| 84 | + const lines = textarea.value.split('\n').length; |
| 85 | + let lineNumberString = ''; |
| 86 | + for (let i = 1; i <= lines; i++) { |
| 87 | + lineNumberString += i + '\n'; |
| 88 | + } |
| 89 | + |
| 90 | + lineNumbers.textContent = lineNumberString; |
| 91 | + } |
| 92 | + |
| 93 | + function syncScroll() { |
| 94 | + const textarea = document.getElementById('input'); |
| 95 | + const lineNumbers = document.getElementById('line-numbers'); |
| 96 | + lineNumbers.scrollTop = textarea.scrollTop; |
| 97 | + } |
| 98 | + |
39 | 99 | function processInput() { |
40 | 100 | const input = document.getElementById('input').value; |
41 | 101 | sessionStorage.setItem('userInput', input); |
|
46 | 106 | }, |
47 | 107 | body: JSON.stringify({ input: input }), |
48 | 108 | }) |
49 | | - .then(response => response.text()) |
| 109 | + .then(response => response.json()) |
50 | 110 | .then(result => { |
51 | | - document.getElementById('output').innerHTML = result; |
| 111 | + document.getElementById('output-area').innerHTML = result.html_output; |
| 112 | + document.getElementById('console-area').innerHTML = result.error_output; |
52 | 113 | }); |
53 | 114 | } |
54 | 115 |
|
|
63 | 124 | document.getElementById('input').value = savedInput; |
64 | 125 | processInput(); |
65 | 126 | } |
| 127 | + // Initial line numbers update |
| 128 | + updateLineNumbers(); |
66 | 129 | }; |
67 | 130 | </script> |
68 | 131 | </body> |
|
0 commit comments