| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Linux Terminal Simulator</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style type="text/css"> |
| |
| @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); |
| |
| body { |
| font-family: 'Ubuntu Mono', monospace; |
| background-color: #1a202c; |
| } |
| |
| .terminal { |
| background-color: #2d3748; |
| border-radius: 8px; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); |
| overflow: hidden; |
| } |
| |
| .terminal-header { |
| background: linear-gradient(to bottom, #343e53, #2a3446); |
| border-bottom: 1px solid #4a5568; |
| } |
| |
| .terminal-button { |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| display: inline-block; |
| margin-right: 6px; |
| } |
| |
| .terminal-content { |
| background-color: #1a202c; |
| height: 400px; |
| overflow-y: auto; |
| padding: 16px; |
| } |
| |
| .terminal-prompt { |
| color: #68d391; |
| } |
| |
| .terminal-input { |
| background-color: transparent; |
| border: none; |
| outline: none; |
| color: #e2e8f0; |
| font-family: 'Ubuntu Mono', monospace; |
| width: calc(100% - 150px); |
| } |
| |
| .command-output { |
| white-space: pre-wrap; |
| margin-bottom: 8px; |
| } |
| |
| .command-input { |
| color: #e2e8f0; |
| margin-bottom: 8px; |
| } |
| |
| |
| .terminal-content::-webkit-scrollbar { |
| width: 8px; |
| } |
| |
| .terminal-content::-webkit-scrollbar-track { |
| background: #2d3748; |
| } |
| |
| .terminal-content::-webkit-scrollbar-thumb { |
| background: #4a5568; |
| border-radius: 4px; |
| } |
| |
| .terminal-content::-webkit-scrollbar-thumb:hover { |
| background: #718096; |
| } |
| |
| |
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0; } |
| } |
| |
| .cursor { |
| animation: blink 1s infinite; |
| background-color: #e2e8f0; |
| display: inline-block; |
| width: 8px; |
| height: 18px; |
| vertical-align: middle; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex items-center justify-center p-4 bg-gray-900"> |
| <div class="terminal w-full max-w-3xl"> |
| |
| <div class="terminal-header px-4 py-2 flex items-center"> |
| <div class="flex mr-2"> |
| <div class="terminal-button bg-red-500"></div> |
| <div class="terminal-button bg-yellow-500"></div> |
| <div class="terminal-button bg-green-500"></div> |
| </div> |
| <div class="text-gray-300 text-sm">user@web-terminal:~</div> |
| </div> |
| |
| |
| <div class="terminal-content" id="terminal-output"> |
| <div class="command-output text-green-400">Welcome to Web Terminal Simulator</div> |
| <div class="command-output text-green-400">Type 'help' to see available commands</div> |
| <div class="command-output text-gray-400">----------------------------------------</div> |
| |
| |
| <div class="flex items-center mt-2"> |
| <span class="terminal-prompt mr-2">user@web-terminal:~$</span> |
| <div class="relative flex-grow"> |
| <input type="text" class="terminal-input" id="command-input" autofocus /> |
| <span class="cursor absolute" id="cursor"></span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const terminalOutput = document.getElementById('terminal-output'); |
| const commandInput = document.getElementById('command-input'); |
| const cursor = document.getElementById('cursor'); |
| |
| // Simulated file system |
| const fileSystem = { |
| '/': { |
| type: 'directory', |
| children: { |
| 'home': { |
| type: 'directory', |
| children: { |
| 'user': { |
| type: 'directory', |
| children: { |
| 'Documents': { type: 'directory', children: {} }, |
| 'Pictures': { type: 'directory', children: {} }, |
| 'Downloads': { type: 'directory', children: {} }, |
| 'Desktop': { type: 'directory', children: {} }, |
| 'file.txt': { type: 'file', content: 'Hello, this is a sample file!' } |
| } |
| } |
| } |
| }, |
| 'etc': { |
| type: 'directory', |
| children: { |
| 'passwd': { type: 'file', content: 'root:x:0:0:root:/root:/bin/bash\nuser:x:1000:1000:User,,,:/home/user:/bin/bash' } |
| } |
| }, |
| 'var': { |
| type: 'directory', |
| children: { |
| 'log': { type: 'directory', children: {} } |
| } |
| }, |
| 'usr': { |
| type: 'directory', |
| children: { |
| 'bin': { type: 'directory', children: {} } |
| } |
| } |
| } |
| } |
| }; |
| |
| let currentPath = '/home/user'; |
| let isSudo = false; |
| let commandHistory = []; |
| let historyIndex = -1; |
| |
| // Update prompt display |
| function updatePrompt() { |
| const promptElements = document.querySelectorAll('.terminal-prompt'); |
| const shortPath = currentPath === '/home/user' ? '~' : currentPath; |
| promptElements.forEach(el => { |
| el.textContent = `user@web-terminal:${shortPath}${isSudo ? '#' : '<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Specialgfhdhdh/linux" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html>}`; |
| }); |
| } |
| |
| // Focus on input |
| commandInput.focus(); |
| updatePrompt(); |
| |
| // Position cursor next to input |
| function updateCursorPosition() { |
| const inputWidth = commandInput.offsetWidth; |
| const textWidth = getTextWidth(commandInput.value, getComputedStyle(commandInput).font); |
| cursor.style.left = `${textWidth + 2}px`; |
| } |
| |
| // Helper to calculate text width |
| function getTextWidth(text, font) { |
| const canvas = document.createElement('canvas'); |
| const context = canvas.getContext('2d'); |
| context.font = font; |
| return context.measureText(text).width; |
| } |
| |
| // Update cursor position on input |
| commandInput.addEventListener('input', updateCursorPosition); |
| window.addEventListener('resize', updateCursorPosition); |
| |
| // Handle command submission |
| commandInput.addEventListener('keydown', function(e) { |
| if (e.key === 'Enter') { |
| e.preventDefault(); |
| const command = commandInput.value.trim(); |
| |
| if (command) { |
| // Add to history |
| commandHistory.push(command); |
| historyIndex = commandHistory.length; |
| |
| // Display the entered command |
| const commandElement = document.createElement('div'); |
| commandElement.className = 'command-input'; |
| const shortPath = currentPath === '/home/user' ? '~' : currentPath; |
| commandElement.innerHTML = `<span class="terminal-prompt">user@web-terminal:${shortPath}${isSudo ? '#' : '</body> |
| </html>}</span> ${command}`; |
| terminalOutput.insertBefore(commandElement, terminalOutput.lastElementChild); |
| |
| // Process the command |
| processCommand(command); |
| |
| // Clear input |
| commandInput.value = ''; |
| updateCursorPosition(); |
| |
| // Scroll to bottom |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; |
| } |
| } else if (e.key === 'ArrowUp') { |
| e.preventDefault(); |
| if (commandHistory.length > 0) { |
| if (historyIndex > 0) { |
| historyIndex--; |
| } |
| commandInput.value = commandHistory[historyIndex] || ''; |
| updateCursorPosition(); |
| } |
| } else if (e.key === 'ArrowDown') { |
| e.preventDefault(); |
| if (commandHistory.length > 0) { |
| if (historyIndex < commandHistory.length - 1) { |
| historyIndex++; |
| } else { |
| historyIndex = commandHistory.length; |
| commandInput.value = ''; |
| } |
| commandInput.value = commandHistory[historyIndex] || ''; |
| updateCursorPosition(); |
| } |
| } else if (e.key === 'Tab') { |
| e.preventDefault(); |
| // Tab completion for commands and files |
| const input = commandInput.value; |
| const commands = ['help', 'ls', 'pwd', 'echo', 'clear', 'date', 'whoami', 'sudo', 'apt', 'cd', 'cat', 'mkdir', 'rm', 'touch', 'exit']; |
| |
| if (input) { |
| // Command completion |
| const matchedCommands = commands.filter(cmd => cmd.startsWith(input)); |
| if (matchedCommands.length === 1) { |
| commandInput.value = matchedCommands[0] + ' '; |
| updateCursorPosition(); |
| } else if (matchedCommands.length > 1) { |
| // Show possible completions |
| const outputElement = document.createElement('div'); |
| outputElement.className = 'command-output'; |
| outputElement.textContent = matchedCommands.join(' '); |
| terminalOutput.insertBefore(outputElement, terminalOutput.lastElementChild); |
| } |
| } |
| } |
| }); |
| |
| // Navigate file system |
| function navigateToPath(path) { |
| if (path === '~') { |
| currentPath = '/home/user'; |
| return true; |
| } |
| |
| if (path.startsWith('/')) { |
| // Absolute path |
| currentPath = path; |
| return true; |
| } else { |
| // Relative path |
| const pathParts = path.split('/'); |
| let newPath = currentPath; |
| |
| for (const part of pathParts) { |
| if (part === '..') { |
| newPath = newPath.substring(0, newPath.lastIndexOf('/')); |
| if (newPath === '') newPath = '/'; |
| } else if (part !== '.' && part !== '') { |
| newPath = newPath === '/' ? '/' + part : newPath + '/' + part; |
| } |
| } |
| |
| currentPath = newPath; |
| return true; |
| } |
| } |
| |
| // Process commands |
| function processCommand(command) { |
| const outputElement = document.createElement('div'); |
| outputElement.className = 'command-output'; |
| |
| const cmd = command.split(' ')[0]; |
| const args = command.split(' ').slice(1); |
| |
| switch(cmd) { |
| case 'help': |
| outputElement.innerHTML = `Available commands: |
| - <span class="text-cyan-400">help</span>: Show this help message |
| - <span class="text-cyan-400">ls</span>: List directory contents |
| - <span class="text-cyan-400">pwd</span>: Print working directory |
| - <span class="text-cyan-400">echo</span>: Display a line of text |
| - <span class="text-cyan-400">clear</span>: Clear the terminal |
| - <span class="text-cyan-400">date</span>: Display current date and time |
| - <span class="text-cyan-400">whoami</span>: Display current user |
| - <span class="text-cyan-400">sudo</span>: Execute a command as superuser |
| - <span class="text-cyan-400">apt</span>: Package management utility |
| - <span class="text-cyan-400">cd</span>: Change directory |
| - <span class="text-cyan-400">cat</span>: Concatenate and display files |
| - <span class="text-cyan-400">mkdir</span>: Create directories |
| - <span class="text-cyan-400">rm</span>: Remove files or directories |
| - <span class="text-cyan-400">touch</span>: Create empty files |
| - <span class="text-cyan-400">exit</span>: Exit sudo mode`; |
| break; |
| |
| case 'ls': |
| if (args.length > 0 && args[0] === '-l') { |
| outputElement.innerHTML = `total 24 |
| drwxr-xr-x 2 user user 4096 Jan 01 00:00 <span class="text-blue-400">Documents</span> |
| drwxr-xr-x 2 user user 4096 Jan 01 00:00 <span class="text-blue-400">Pictures</span> |
| drwxr-xr-x 2 user user 4096 Jan 01 00:00 <span class="text-blue-400">Downloads</span> |
| drwxr-xr-x 2 user user 4096 Jan 01 00:00 <span class="text-blue-400">Desktop</span> |
| -rw-r--r-- 1 user user 26 Jan 01 00:00 <span class="text-green-400">file.txt</span>`; |
| } else { |
| outputElement.innerHTML = `<span class="text-blue-400">Documents</span> <span class="text-blue-400">Pictures</span> <span class="text-blue-400">Downloads</span> <span class="text-blue-400">Desktop</span> <span class="text-green-400">file.txt</span>`; |
| } |
| break; |
| |
| case 'pwd': |
| outputElement.textContent = currentPath; |
| break; |
| |
| case 'echo': |
| outputElement.textContent = args.join(' '); |
| break; |
| |
| case 'clear': |
| // Remove all child elements except the last one (input line) |
| while (terminalOutput.children.length > 1) { |
| terminalOutput.removeChild(terminalOutput.firstChild); |
| } |
| return; // Skip adding output element |
| |
| case 'date': |
| outputElement.textContent = new Date().toString(); |
| break; |
| |
| case 'whoami': |
| outputElement.textContent = isSudo ? 'root' : 'user'; |
| break; |
| |
| case 'sudo': |
| if (args.length === 0) { |
| outputElement.innerHTML = `<span class="text-red-400">Usage: sudo <command></span>`; |
| } else if (args[0] === 'apt') { |
| if (args[1] === 'update') { |
| outputElement.innerHTML = `Get:1 http://security.ubuntu.com/ubuntu focal-security InRelease [114 kB] |
| Get:2 http://archive.ubuntu.com/ubuntu focal InRelease [265 kB] |
| Get:3 http://archive.ubuntu.com/ubuntu focal-updates InRelease [114 kB] |
| Fetched 493 kB in 1s (643 kB/s) |
| Reading package lists... Done`; |
| } else if (args[1] === 'install') { |
| if (args.length < 3) { |
| outputElement.innerHTML = `<span class="text-red-400">E: Unable to locate package</span>`; |
| } else { |
| outputElement.innerHTML = `Reading package lists... Done |
| Building dependency tree... Done |
| The following NEW packages will be installed: |
| ${args[2]} |
| 0 upgraded, 1 newly installed, 0 to remove and 0 not upgraded. |
| Need to get 0 B/1,234 kB of archives. |
| After this operation, 4,096 B of additional disk space will be used. |
| Selecting previously unselected package ${args[2]}. |
| (Reading database ... 123456 files and directories currently installed.) |
| Preparing to unpack .../${args[2]}_1.0.0_amd64.deb ... |
| Unpacking ${args[2]} (1.0.0) ... |
| Setting up ${args[2]} (1.0.0) ...`; |
| } |
| } else { |
| outputElement.innerHTML = `<span class="text-yellow-400">[sudo] password for user:</span>`; |
| |
| // Create a hidden password input |
| const passwordInput = document.createElement('input'); |
| passwordInput.type = 'password'; |
| passwordInput.style.position = 'absolute'; |
| passwordInput.style.opacity = 0; |
| passwordInput.style.pointerEvents = 'none'; |
| document.body.appendChild(passwordInput); |
| |
| passwordInput.focus(); |
| |
| passwordInput.addEventListener('keydown', function(e) { |
| if (e.key === 'Enter') { |
| if (passwordInput.value === 'password') { |
| isSudo = true; |
| updatePrompt(); |
| const sudoOutput = document.createElement('div'); |
| sudoOutput.className = 'command-output'; |
| sudoOutput.textContent = 'Authentication successful. You now have superuser privileges.'; |
| terminalOutput.insertBefore(sudoOutput, terminalOutput.lastElementChild); |
| } else { |
| const sudoOutput = document.createElement('div'); |
| sudoOutput.className = 'command-output'; |
| sudoOutput.innerHTML = `<span class="text-red-400">Sorry, try again.</span>`; |
| terminalOutput.insertBefore(sudoOutput, terminalOutput.lastElementChild); |
| } |
| document.body.removeChild(passwordInput); |
| commandInput.focus(); |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; |
| } |
| }); |
| |
| return; |
| } |
| } else { |
| outputElement.innerHTML = `<span class="text-yellow-400">[sudo] password for user:</span>`; |
| |
| // Create a hidden password input |
| const passwordInput = document.createElement('input'); |
| passwordInput.type = 'password'; |
| passwordInput.style.position = 'absolute'; |
| passwordInput.style.opacity = 0; |
| passwordInput.style.pointerEvents = 'none'; |
| document.body.appendChild(passwordInput); |
| |
| passwordInput.focus(); |
| |
| passwordInput.addEventListener('keydown', function(e) { |
| if (e.key === 'Enter') { |
| if (passwordInput.value === 'password') { |
| const sudoOutput = document.createElement('div'); |
| sudoOutput.className = 'command-output'; |
| sudoOutput.textContent = 'Authentication successful.'; |
| terminalOutput.insertBefore(sudoOutput, terminalOutput.lastElementChild); |
| |
| // Execute the command with sudo |
| const sudoCmd = args.join(' '); |
| processCommand(sudoCmd); |
| } else { |
| const sudoOutput = document.createElement('div'); |
| sudoOutput.className = 'command-output'; |
| sudoOutput.innerHTML = `<span class="text-red-400">Sorry, try again.</span>`; |
| terminalOutput.insertBefore(sudoOutput, terminalOutput.lastElementChild); |
| } |
| document.body.removeChild(passwordInput); |
| commandInput.focus(); |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; |
| } |
| }); |
| |
| return; |
| } |
| break; |
| |
| case 'apt': |
| if (args.length === 0) { |
| outputElement.innerHTML = `<span class="text-red-400">Usage: apt <command></span> |
| |
| Type 'apt help' for more information.`; |
| } else if (args[0] === 'update') { |
| outputElement.innerHTML = `<span class="text-red-400">E: Could not open lock file /var/lib/apt/lists/lock - open (13: Permission denied)</span> |
| <span class="text-red-400">E: Unable to lock directory /var/lib/apt/lists/</span> |
| <span class="text-red-400">W: Problem unlinking the file /var/cache/apt/pkgcache.bin - RemoveCaches (13: Permission denied)</span> |
| <span class="text-red-400">W: Problem unlinking the file /var/cache/apt/srcpkgcache.bin - RemoveCaches (13: Permission denied)</span>`; |
| } else if (args[0] === 'install') { |
| outputElement.innerHTML = `<span class="text-red-400">E: Could not open lock file /var/lib/dpkg/lock-frontend - open (13: Permission denied)</span> |
| <span class="text-red-400">E: Unable to acquire the dpkg frontend lock (/var/lib/dpkg/lock-frontend), are you root?</span>`; |
| } else { |
| outputElement.innerHTML = `<span class="text-red-400">E: Invalid operation ${args[0]}</span>`; |
| } |
| break; |
| |
| case 'cd': |
| if (args.length === 0) { |
| currentPath = '/home/user'; |
| } else { |
| if (!navigateToPath(args[0])) { |
| outputElement.innerHTML = `<span class="text-red-400">cd: ${args[0]}: No such file or directory</span>`; |
| } |
| } |
| updatePrompt(); |
| break; |
| |
| case 'cat': |
| if (args.length === 0) { |
| outputElement.innerHTML = `<span class="text-red-400">Usage: cat <file></span>`; |
| } else if (args[0] === 'file.txt') { |
| outputElement.textContent = 'Hello, this is a sample file!'; |
| } else if (args[0] === '/etc/passwd') { |
| outputElement.textContent = 'root:x:0:0:root:/root:/bin/bash\nuser:x:1000:1000:User,,,:/home/user:/bin/bash'; |
| } else { |
| outputElement.innerHTML = `<span class="text-red-400">cat: ${args[0]}: No such file or directory</span>`; |
| } |
| break; |
| |
| case 'mkdir': |
| if (args.length === 0) { |
| outputElement.innerHTML = `<span class="text-red-400">Usage: mkdir <directory></span>`; |
| } else { |
| outputElement.textContent = `Created directory '${args[0]}'`; |
| } |
| break; |
| |
| case 'touch': |
| if (args.length === 0) { |
| outputElement.innerHTML = `<span class="text-red-400">Usage: touch <file></span>`; |
| } else { |
| outputElement.textContent = `Created file '${args[0]}'`; |
| } |
| break; |
| |
| case 'rm': |
| if (args.length === 0) { |
| outputElement.innerHTML = `<span class="text-red-400">Usage: rm <file></span>`; |
| } else if (args[0] === '-r' && args.length > 1) { |
| outputElement.textContent = `Removed directory '${args[1]}'`; |
| } else { |
| outputElement.textContent = `Removed file '${args[0]}'`; |
| } |
| break; |
| |
| case 'exit': |
| if (isSudo) { |
| isSudo = false; |
| outputElement.textContent = 'Exited sudo mode.'; |
| updatePrompt(); |
| } else { |
| outputElement.innerHTML = `<span class="text-red-400">exit: not in sudo mode</span>`; |
| } |
| break; |
| |
| default: |
| outputElement.innerHTML = `<span class="text-red-400">Command not found: ${cmd}</span>. Type 'help' for available commands.`; |
| break; |
| } |
| |
| terminalOutput.insertBefore(outputElement, terminalOutput.lastElementChild); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
