|
|
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Linux Terminal</title> |
| <style> |
| body { |
| margin: 0; |
| padding: 0; |
| background-color: #000; |
| color: #fff; |
| font-family: 'Courier New', monospace; |
| height: 100vh; |
| overflow: hidden; |
| } |
| #terminal { |
| padding: 20px; |
| height: calc(100vh - 40px); |
| overflow-y: auto; |
| } |
| .prompt { |
| color: #00ff00; |
| } |
| .command { |
| color: #ffffff; |
| } |
| .output { |
| margin: 8px 0; |
| white-space: pre-wrap; |
| } |
| .cursor { |
| display: inline-block; |
| width: 8px; |
| height: 16px; |
| background-color: #fff; |
| animation: blink 1s infinite; |
| } |
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0; } |
| } |
| </style> |
| </head> |
| <body> |
| <div id="terminal"> |
| <div class="output">Linux version 5.15.0 (user@linux) (gcc (Ubuntu 11.3.0-1ubuntu1~22.04) 11.3.0, GNU ld (GNU Binutils for Ubuntu) 2.38) #1 SMP Thu Jan 1 00:00:00 UTC 1970</div> |
| <div class="output">Welcome to Linux</div> |
| <div class="output">Type 'help' for a list of available commands</div> |
| <div class="output"> |
| <span class="prompt">user@linux:~$</span> |
| <span class="command" id="current-command"></span> |
| <span class="cursor" id="cursor"></span> |
| </div> |
| </div> |
|
|
| <script> |
| const terminal = document.getElementById('terminal'); |
| const currentCommand = document.getElementById('current-command'); |
| const cursor = document.getElementById('cursor'); |
| let commandHistory = []; |
| let historyIndex = -1; |
| let currentInput = ''; |
| |
| |
| const commands = { |
| help: () => `Available commands:\n${Object.keys(commands).join(', ')}`, |
| clear: () => { terminal.innerHTML = ''; return ''; }, |
| ls: () => 'bin dev etc home lib proc root sys usr var', |
| whoami: () => 'user', |
| uname: () => 'Linux', |
| uname_a: () => 'Linux linux 5.15.0 #1 SMP Thu Jan 1 00:00:00 UTC 1970 x86_64 GNU/Linux', |
| date: () => new Date().toString(), |
| echo: (args) => args.join(' '), |
| pwd: () => '/home/user', |
| sudo: () => 'Permission denied: Try running as root', |
| exit: () => { window.close(); return ''; } |
| }; |
| |
| function processCommand(cmd) { |
| const parts = cmd.split(' '); |
| const baseCmd = parts[0]; |
| const args = parts.slice(1); |
| |
| if (commands[baseCmd]) { |
| return commands[baseCmd](args); |
| } else if (cmd.trim() !== '') { |
| return `Command not found: ${baseCmd}`; |
| } |
| return ''; |
| } |
| |
| |
| function addOutput(text) { |
| if (text.trim() !== '') { |
| const output = document.createElement('div'); |
| output.className = 'output'; |
| output.textContent = text; |
| terminal.appendChild(output); |
| } |
| } |
| |
| |
| function addPrompt() { |
| const prompt = document.createElement('div'); |
| prompt.className = 'output'; |
| prompt.innerHTML = `<span class="prompt">user@linux:~$</span> <span class="command" id="current-command"></span><span class="cursor" id="cursor"></span>`; |
| terminal.appendChild(prompt); |
| terminal.scrollTop = terminal.scrollHeight; |
| |
| currentCommand = prompt.querySelector('#current-command'); |
| cursor = prompt.querySelector('#cursor'); |
| currentInput = ''; |
| } |
| |
| document.addEventListener('keydown', (e) => { |
| if (e.key === 'Enter') { |
| e.preventDefault(); |
| addOutput(processCommand(currentInput)); |
| commandHistory.push(currentInput); |
| historyIndex = commandHistory.length; |
| addPrompt(); |
| } else if (e.key === 'Backspace') { |
| e.preventDefault(); |
| if (currentInput.length > 0) { |
| currentInput = currentInput.slice(0, -1); |
| currentCommand.textContent = currentInput; |
| } |
| } else if (e.key === 'ArrowUp') { |
| e.preventDefault(); |
| if (historyIndex > 0) { |
| historyIndex--; |
| currentInput = commandHistory[historyIndex]; |
| currentCommand.textContent = currentInput; |
| } |
| } else if (e.key === 'ArrowDown') { |
| e.preventDefault(); |
| if (historyIndex < commandHistory.length - 1) { |
| historyIndex++; |
| currentInput = commandHistory[historyIndex]; |
| currentCommand.textContent = currentInput; |
| } else { |
| historyIndex = commandHistory.length; |
| currentInput = ''; |
| currentCommand.textContent = currentInput; |
| } |
| } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) { |
| currentInput += e.key; |
| currentCommand.textContent = currentInput; |
| } |
| }); |
| |
| |
| window.focus(); |
| </script> |
| </body> |
| </html> |
|
|
