File size: 5,753 Bytes
2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 2447046 ff4b4d7 3f2f1ad | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
<!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 = '';
// Available commands
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 ''; }
};
// Process command
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 '';
}
// Add output to terminal
function addOutput(text) {
if (text.trim() !== '') {
const output = document.createElement('div');
output.className = 'output';
output.textContent = text;
terminal.appendChild(output);
}
}
// Add new prompt
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 = '';
}
// Handle key presses
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;
}
});
// Initial focus
window.focus();
</script>
</body>
</html>
|