UplinkCoder · May 22, 2023 05:16
diff --git a/repl.html b/repl.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>REPL UI with Add Tab Button</title>
  <style>
    /* Basic styles */
    .tab {
      display: none;
    }
    .active {
      display: block;
    }
    .input-container {
      display: inline-block;
      vertical-align: middle;
    }
    .input-container label {
      margin-right: 5px;
    }
    .input-container input[type="text"] {
      margin-right: 5px;
    }
    .outputTextarea {
      font-family: "Courier New", Courier, monospace;
      background-color: #272822;
      color: #F8F8F2;
      padding: 5px;
      width: 100%;
      height: 200px;
    }
    .tab-button {
      margin-right: 5px;
    }
    .active-tab-button {
      font-weight: bold;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
  <script>
    function changeTab(tabId) {
      // Hide all tabs
      var tabs = document.getElementsByClassName('tab');
      for (var i = 0; i < tabs.length; i++) {
        tabs[i].style.display = 'none';
      }
      
      // Show the selected tab
      var selectedTab = document.getElementById(tabId);
      selectedTab.style.display = 'block';
      
      // Highlight the active tab button
      var tabButtons = document.getElementsByClassName('tab-button');
      for (var i = 0; i < tabButtons.length; i++) {
        tabButtons[i].style.fontWeight = 'normal';
      }
      
      var activeTabButton = document.getElementById('tabButton-' + tabId);
      activeTabButton.style.fontWeight = 'bold';
    }
    
    function submitCommand() {
      var commandInput = document.getElementById('commandInput');
      var outputTextarea = document.getElementById('outputTextarea');
      
      // Get the entered command
      var command = commandInput.value;
      
      // Send command to the server
      sendCommandToServer(command, function(response) {
        // Update the output with the response from the server
        outputTextarea.value += response + '\n';
        
        // Highlight syntax in the output textarea
        hljs.highlightBlock(outputTextarea);
      });
      
      // Clear the command input
      commandInput.value = '';
    }
    
    function sendCommandToServer(command, callback) {
      // Make an AJAX request to the server
      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/process-command', true);
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // Call the callback function with the server response
          callback(xhr.responseText);
        }
      };
      
      xhr.send('command=' + encodeURIComponent(command));
    }
    
    // Update the mode label based on a variable
    function updateModeLabel(mode) {
      var modeLabel = document.getElementById('modeLabel');
      modeLabel.innerHTML = 'Mode: ' + mode;
    }
    
    function addTab() {
      var tabCount = document.getElementsByClassName('tab').length;
      var tabId = 'tab' + (tabCount + 1);
      var tabTitle = 'Tab ' + (tabCount + 1);
      
      // Create the tab content dynamically
      var tabContent = '<div id="' + tabId + '" class="tab">' +
                          '<h2>' + tabTitle + '</h2>' +
                          '<textarea id="outputTextarea' + tabCount + '" class="outputTextarea" rows="10" cols="50"></textarea><br>' +
                          '<div class="input-container">' +
                            '<label id="modeLabel' + tabCount + '"></label>' +
                            '<input type="text" id="commandInput' + tabCount + '" onkeydown="if (event.keyCode === 13) submitCommand()">' +
                            '<input type="button" value="Submit" onclick="submitCommand()">' +
                          '</div>' +
                        '</div>';
      
      // Append the new tab content to the main container
      var mainContainer = document.getElementById('mainContainer');
      mainContainer.innerHTML += tabContent;
      
      // Create the new tab button
      var newTabButton = document.createElement('input');
      newTabButton.setAttribute('type', 'button');
      newTabButton.setAttribute('value', tabTitle);
      newTabButton.setAttribute('class', 'tab-button');
      newTabButton.setAttribute('onclick', 'changeTab(\'' + tabId + '\')');
      newTabButton.setAttribute('id', 'tabButton-' + tabId);
      
      // Add the new tab button to the tab button container
      var tabButtonContainer = document.getElementById('tabButtonContainer');
      tabButtonContainer.appendChild(newTabButton);
      
      // Set the initial active tab
      changeTab(tabId);
      
      // Set the initial mode for the new tab
      var mode = 'Normal';
      updateModeLabel(mode);
    }
  </script>
  <script>
    // Initialize syntax highlighting
    hljs.initHighlightingOnLoad();
    
    // Set the initial mode
    var mode = 'Normal';
    updateModeLabel(mode);
  </script>
 </head>
 <body>
  <h1>REPL UI with Add Tab Button</h1>
  

  
  <div id="mainContainer">
    <div id="tab1" class="tab active">
      <h2>Tab 1</h2>
      <textarea id="outputTextarea" class="outputTextarea" rows="10" cols="50"></textarea><br>
      <div class="input-container">
        <label id="modeLabel"></label>
        <input type="text" id="commandInput" onkeydown="if (event.keyCode === 13) submitCommand()">
        <input type="button" value="Submit" onclick="submitCommand()">
      </div>
    </div>
  </div>
 </body>
 </html>

  <div id="tabButtonContainer">
    <input type="button" value="Add Tab" class="tab-button active" onclick="addTab()" id="tabButton">
  </div>
	<!DOCTYPE html>
	<html>
	<head>
	<title>REPL UI with Add Tab Button</title>
	<style>
	/* Basic styles */
	.tab {
	display: none;
	}
	.active {
	display: block;
	}
	.input-container {
	display: inline-block;
	vertical-align: middle;
	}
	.input-container label {
	margin-right: 5px;
	}
	.input-container input[type="text"] {
	margin-right: 5px;
	}
	.outputTextarea {
	font-family: "Courier New", Courier, monospace;
	background-color: #272822;
	color: #F8F8F2;
	padding: 5px;
	width: 100%;
	height: 200px;
	}
	.tab-button {
	margin-right: 5px;
	}
	.active-tab-button {
	font-weight: bold;
	}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
	<script>
	function changeTab(tabId) {
	// Hide all tabs
	var tabs = document.getElementsByClassName('tab');
	for (var i = 0; i < tabs.length; i++) {
	tabs[i].style.display = 'none';
	}

	// Show the selected tab
	var selectedTab = document.getElementById(tabId);
	selectedTab.style.display = 'block';

	// Highlight the active tab button
	var tabButtons = document.getElementsByClassName('tab-button');
	for (var i = 0; i < tabButtons.length; i++) {
	tabButtons[i].style.fontWeight = 'normal';
	}

	var activeTabButton = document.getElementById('tabButton-' + tabId);
	activeTabButton.style.fontWeight = 'bold';
	}

	function submitCommand() {
	var commandInput = document.getElementById('commandInput');
	var outputTextarea = document.getElementById('outputTextarea');

	// Get the entered command
	var command = commandInput.value;

	// Send command to the server
	sendCommandToServer(command, function(response) {
	// Update the output with the response from the server
	outputTextarea.value += response + '\n';

	// Highlight syntax in the output textarea
	hljs.highlightBlock(outputTextarea);
	});

	// Clear the command input
	commandInput.value = '';
	}

	function sendCommandToServer(command, callback) {
	// Make an AJAX request to the server
	var xhr = new XMLHttpRequest();
	xhr.open('POST', '/process-command', true);
	xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

	xhr.onreadystatechange = function() {
	if (xhr.readyState === 4 && xhr.status === 200) {
	// Call the callback function with the server response
	callback(xhr.responseText);
	}
	};

	xhr.send('command=' + encodeURIComponent(command));
	}

	// Update the mode label based on a variable
	function updateModeLabel(mode) {
	var modeLabel = document.getElementById('modeLabel');
	modeLabel.innerHTML = 'Mode: ' + mode;
	}

	function addTab() {
	var tabCount = document.getElementsByClassName('tab').length;
	var tabId = 'tab' + (tabCount + 1);
	var tabTitle = 'Tab ' + (tabCount + 1);

	// Create the tab content dynamically
	var tabContent = '<div id="' + tabId + '" class="tab">' +
	'<h2>' + tabTitle + '</h2>' +
	'<textarea id="outputTextarea' + tabCount + '" class="outputTextarea" rows="10" cols="50"></textarea><br>' +
	'<div class="input-container">' +
	'<label id="modeLabel' + tabCount + '"></label>' +
	'<input type="text" id="commandInput' + tabCount + '" onkeydown="if (event.keyCode === 13) submitCommand()">' +
	'<input type="button" value="Submit" onclick="submitCommand()">' +
	'</div>' +
	'</div>';

	// Append the new tab content to the main container
	var mainContainer = document.getElementById('mainContainer');
	mainContainer.innerHTML += tabContent;

	// Create the new tab button
	var newTabButton = document.createElement('input');
	newTabButton.setAttribute('type', 'button');
	newTabButton.setAttribute('value', tabTitle);
	newTabButton.setAttribute('class', 'tab-button');
	newTabButton.setAttribute('onclick', 'changeTab(\'' + tabId + '\')');
	newTabButton.setAttribute('id', 'tabButton-' + tabId);

	// Add the new tab button to the tab button container
	var tabButtonContainer = document.getElementById('tabButtonContainer');
	tabButtonContainer.appendChild(newTabButton);

	// Set the initial active tab
	changeTab(tabId);

	// Set the initial mode for the new tab
	var mode = 'Normal';
	updateModeLabel(mode);
	}
	</script>
	<script>
	// Initialize syntax highlighting
	hljs.initHighlightingOnLoad();

	// Set the initial mode
	var mode = 'Normal';
	updateModeLabel(mode);
	</script>
	</head>
	<body>
	<h1>REPL UI with Add Tab Button</h1>



	<div id="mainContainer">
	<div id="tab1" class="tab active">
	<h2>Tab 1</h2>
	<textarea id="outputTextarea" class="outputTextarea" rows="10" cols="50"></textarea><br>
	<div class="input-container">
	<label id="modeLabel"></label>
	<input type="text" id="commandInput" onkeydown="if (event.keyCode === 13) submitCommand()">
	<input type="button" value="Submit" onclick="submitCommand()">
	</div>
	</div>
	</div>
	</body>
	</html>

	<div id="tabButtonContainer">
	<input type="button" value="Add Tab" class="tab-button active" onclick="addTab()" id="tabButton">
	</div>