| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Linux Practice Tool</title> |
| <style> |
| body { |
| font-family: monospace; |
| background-color: #000; |
| color: #0f0; |
| margin: 0; |
| padding: 20px; |
| } |
| #terminal { |
| width: 100%; |
| height: 100vh; |
| overflow-y: auto; |
| } |
| #output { |
| white-space: pre-wrap; |
| } |
| #input-line { |
| display: flex; |
| margin-top: 10px; |
| } |
| #prompt { |
| margin-right: 5px; |
| } |
| #command-input { |
| flex-grow: 1; |
| background-color: transparent; |
| border: none; |
| color: #0f0; |
| font-family: inherit; |
| font-size: inherit; |
| outline: none; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="terminal"> |
| <div id="output"></div> |
| <div id="input-line"> |
| <span id="prompt">$</span> |
| <input type="text" id="command-input" autofocus> |
| </div> |
| </div> |
| <script> |
| const output = document.getElementById('output'); |
| const input = document.getElementById('command-input'); |
| |
| let commandHistory = []; |
| let historyIndex = -1; |
| |
| input.addEventListener('keydown', async (event) => { |
| if (event.key === 'Enter') { |
| event.preventDefault(); |
| const command = input.value.trim(); |
| if (command) { |
| commandHistory.push(command); |
| historyIndex = commandHistory.length; |
| await executeCommand(command); |
| } |
| input.value = ''; |
| } else if (event.key === 'ArrowUp') { |
| event.preventDefault(); |
| if (historyIndex > 0) { |
| historyIndex--; |
| input.value = commandHistory[historyIndex]; |
| } |
| } else if (event.key === 'ArrowDown') { |
| event.preventDefault(); |
| if (historyIndex < commandHistory.length - 1) { |
| historyIndex++; |
| input.value = commandHistory[historyIndex]; |
| } else { |
| historyIndex = commandHistory.length; |
| input.value = ''; |
| } |
| } |
| }); |
| |
| async function executeCommand(command) { |
| if (command.toLowerCase() === 'help') { |
| displayHelp(); |
| } else { |
| output.innerHTML += `$ ${command}\n`; |
| |
| try { |
| const response = await fetch('/execute', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ command }), |
| }); |
| |
| const data = await response.json(); |
| |
| if (response.ok) { |
| output.innerHTML += data.output; |
| if (data.error) { |
| output.innerHTML += `Error: ${data.error}\n`; |
| } |
| } else { |
| output.innerHTML += `Error: ${data.detail}\n`; |
| } |
| } catch (error) { |
| output.innerHTML += `Error: ${error.message}\n`; |
| } |
| } |
| |
| output.scrollTop = output.scrollHeight; |
| } |
| |
| function displayHelp() { |
| const helpText = ` |
| Available commands: |
| - ls: List directory contents |
| - cd: Change directory |
| - pwd: Print working directory |
| - echo: Display a line of text |
| - cat: Concatenate files and print on the standard output |
| - grep: Print lines that match patterns |
| - find: Search for files in a directory hierarchy |
| - touch: Change file timestamps |
| - mkdir: Make directories |
| - rm: Remove files or directories |
| - cp: Copy files and directories |
| - mv: Move (rename) files |
| |
| Type 'help' to see this message again. |
| `; |
| output.innerHTML += helpText; |
| } |
| |
| |
| document.getElementById('terminal').addEventListener('click', () => { |
| input.focus(); |
| }); |
| |
| |
| output.innerHTML = "Welcome to the Linux Practice Tool!\nType 'help' for a list of available commands.\n\n"; |
| </script> |
| </body> |
| </html> |
