Cyspec/linux-kernel-emulator-cli

1 2<!DOCTYPE html>3<html lang="en">4<head>5    <meta charset="UTF-8">6    <meta name="viewport" content="width=device-width, initial-scale=1.0">7    <title>Linux Terminal</title>8    <style>9        body {10            margin: 0;11            padding: 0;12            background-color: #000;13            color: #fff;14            font-family: 'Courier New', monospace;15            height: 100vh;16            overflow: hidden;17        }18        #terminal {19            padding: 20px;20            height: calc(100vh - 40px);21            overflow-y: auto;22        }23        .prompt {24            color: #00ff00;25        }26        .command {27            color: #ffffff;28        }29        .output {30            margin: 8px 0;31            white-space: pre-wrap;32        }33        .cursor {34            display: inline-block;35            width: 8px;36            height: 16px;37            background-color: #fff;38            animation: blink 1s infinite;39        }40        @keyframes blink {41            0%, 100% { opacity: 1; }42            50% { opacity: 0; }43        }44    </style>45</head>46<body>47    <div id="terminal">48        <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>49        <div class="output">Welcome to Linux</div>50        <div class="output">Type 'help' for a list of available commands</div>51        <div class="output">52            <span class="prompt">user@linux:~$</span>53            <span class="command" id="current-command"></span>54            <span class="cursor" id="cursor"></span>55        </div>56    </div>57 58    <script>59        const terminal = document.getElementById('terminal');60        const currentCommand = document.getElementById('current-command');61        const cursor = document.getElementById('cursor');62        let commandHistory = [];63        let historyIndex = -1;64        let currentInput = '';65 66        // Available commands67        const commands = {68            help: () => `Available commands:\n${Object.keys(commands).join(', ')}`,69            clear: () => { terminal.innerHTML = ''; return ''; },70            ls: () => 'bin   dev   etc   home  lib   proc  root  sys   usr   var',71            whoami: () => 'user',72            uname: () => 'Linux',73            uname_a: () => 'Linux linux 5.15.0 #1 SMP Thu Jan 1 00:00:00 UTC 1970 x86_64 GNU/Linux',74            date: () => new Date().toString(),75            echo: (args) => args.join(' '),76            pwd: () => '/home/user',77            sudo: () => 'Permission denied: Try running as root',78            exit: () => { window.close(); return ''; }79        };80        // Process command81        function processCommand(cmd) {82            const parts = cmd.split(' ');83            const baseCmd = parts[0];84            const args = parts.slice(1);85            86            if (commands[baseCmd]) {87                return commands[baseCmd](args);88            } else if (cmd.trim() !== '') {89                return `Command not found: ${baseCmd}`;90            }91            return '';92        }93 94        // Add output to terminal95        function addOutput(text) {96            if (text.trim() !== '') {97                const output = document.createElement('div');98                output.className = 'output';99                output.textContent = text;100                terminal.appendChild(output);101            }102        }103 104        // Add new prompt105        function addPrompt() {106            const prompt = document.createElement('div');107            prompt.className = 'output';108            prompt.innerHTML = `<span class="prompt">user@linux:~$</span> <span class="command" id="current-command"></span><span class="cursor" id="cursor"></span>`;109            terminal.appendChild(prompt);110            terminal.scrollTop = terminal.scrollHeight;111            112            currentCommand = prompt.querySelector('#current-command');113            cursor = prompt.querySelector('#cursor');114            currentInput = '';115        }116        // Handle key presses117        document.addEventListener('keydown', (e) => {118            if (e.key === 'Enter') {119                e.preventDefault();120                addOutput(processCommand(currentInput));121                commandHistory.push(currentInput);122                historyIndex = commandHistory.length;123                addPrompt();124            } else if (e.key === 'Backspace') {125                e.preventDefault();126                if (currentInput.length > 0) {127                    currentInput = currentInput.slice(0, -1);128                    currentCommand.textContent = currentInput;129                }130            } else if (e.key === 'ArrowUp') {131                e.preventDefault();132                if (historyIndex > 0) {133                    historyIndex--;134                    currentInput = commandHistory[historyIndex];135                    currentCommand.textContent = currentInput;136                }137            } else if (e.key === 'ArrowDown') {138                e.preventDefault();139                if (historyIndex < commandHistory.length - 1) {140                    historyIndex++;141                    currentInput = commandHistory[historyIndex];142                    currentCommand.textContent = currentInput;143                } else {144                    historyIndex = commandHistory.length;145                    currentInput = '';146                    currentCommand.textContent = currentInput;147                }148            } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {149                currentInput += e.key;150                currentCommand.textContent = currentInput;151            }152        });153 154        // Initial focus155        window.focus();156    </script>157</body>158</html>159