|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Advanced Terminal</title> |
|
<style> |
|
body { |
|
font-family: monospace; |
|
background-color: #1e1e1e; |
|
color: #00ff00; |
|
padding: 20px; |
|
} |
|
#terminal { |
|
width: 100%; |
|
height: 400px; |
|
background: black; |
|
color: green; |
|
padding: 10px; |
|
overflow-y: scroll; |
|
} |
|
input[type="text"] { |
|
background: black; |
|
color: green; |
|
border: none; |
|
width: 100%; |
|
font-size: 1em; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="terminal"></div> |
|
<input type="text" id="command" placeholder="Enter your command here..." autofocus/> |
|
|
|
<script> |
|
const terminal = document.getElementById("terminal"); |
|
const commandInput = document.getElementById("command"); |
|
|
|
commandInput.addEventListener('keydown', function(e) { |
|
if (e.key === 'Enter') { |
|
const command = commandInput.value; |
|
commandInput.value = ''; |
|
terminal.innerHTML += `> ${command}\n`; |
|
|
|
|
|
fetch('/run_command', { |
|
method: 'POST', |
|
body: new URLSearchParams({ 'command': command }), |
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' } |
|
}) |
|
.then(response => response.json()) |
|
.then(data => { |
|
terminal.innerHTML += `${data.output}\n`; |
|
terminal.scrollTop = terminal.scrollHeight; |
|
}) |
|
.catch(error => { |
|
terminal.innerHTML += `Error: ${error}\n`; |
|
}); |
|
} |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|
