253 lines
7.3 KiB
HTML
253 lines
7.3 KiB
HTML
<html>
|
|
<head>
|
|
<title>Konsole</title>
|
|
<style>
|
|
::-webkit-scrollbar { width: 10px; }
|
|
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0); }
|
|
::-webkit-scrollbar-thumb { background: #555; }
|
|
::-webkit-scrollbar-thumb:hover { background: #777; }
|
|
|
|
body, html {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
font-family: monospace;
|
|
font-size: 1rem;
|
|
background-color: #333;
|
|
color: #0f0;
|
|
}
|
|
|
|
.console {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.console-input {
|
|
display: flex;
|
|
}
|
|
|
|
.console-input-prompt {
|
|
padding-right: 0.55em;
|
|
}
|
|
|
|
.console-input-field {
|
|
border: none;
|
|
outline: none;
|
|
font-size: 1rem;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
color: #0f0;
|
|
font-family: monospace;
|
|
flex-grow: 1;
|
|
padding: 0;
|
|
}
|
|
|
|
.console-output {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.console-output-line {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 1.25rem;
|
|
}
|
|
</style>
|
|
<script>
|
|
window.cli = {};
|
|
</script>
|
|
<script>
|
|
window.cli['clear'] = {
|
|
autocomplete: () => {
|
|
return [];
|
|
},
|
|
help: () => {
|
|
return 'Clear console output';
|
|
},
|
|
run: args => {
|
|
output.innerHTML = '';
|
|
}
|
|
}
|
|
</script>
|
|
<script>
|
|
window.cli['echo'] = {
|
|
autocomplete: () => {
|
|
return [];
|
|
},
|
|
help: () => {
|
|
return 'Output text to console';
|
|
},
|
|
run: args => {
|
|
return args.join(' ');
|
|
}
|
|
}
|
|
</script>
|
|
<script>
|
|
window.cli['exit'] = {
|
|
autocomplete: () => {
|
|
return [];
|
|
},
|
|
help: () => {
|
|
return 'End session';
|
|
},
|
|
run: args => {
|
|
process('clear');
|
|
history = [];
|
|
historyIndex = 0;
|
|
header();
|
|
}
|
|
}
|
|
</script>
|
|
<script>
|
|
window.cli['help'] = {
|
|
autocomplete: () => {
|
|
return [];
|
|
},
|
|
help: () => {
|
|
return 'Display all commands';
|
|
},
|
|
run: args => {
|
|
return Object.keys(window.cli).map(command => `${command} - ${window.cli[command].help()}`).join('<br>') + '<br><br>';
|
|
}
|
|
}
|
|
</script>
|
|
<script>
|
|
window.cli['hostname'] = {
|
|
autocomplete: () => {
|
|
return [];
|
|
},
|
|
help: () => {
|
|
return 'Get computer hostname';
|
|
},
|
|
run: args => {
|
|
return 'localhost'
|
|
}
|
|
}
|
|
</script>
|
|
<script>
|
|
window.cli['man'] = {
|
|
autocomplete: () => {
|
|
return [];
|
|
},
|
|
help: () => {
|
|
return 'Command manual';
|
|
},
|
|
run: args => {
|
|
return window.cli[args[0]].help();
|
|
}
|
|
}
|
|
</script>
|
|
<script>
|
|
window.cli['whoami'] = {
|
|
autocomplete: () => {
|
|
return [];
|
|
},
|
|
help: () => {
|
|
return 'Get username';
|
|
},
|
|
run: args => {
|
|
return 'root'
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="console">
|
|
<div class="console-output"></div>
|
|
<div class="console-input">
|
|
<div class="console-input-prompt">root@localhost:~ #</div>
|
|
<input class="console-input-field" type="text" autofocus>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const output = document.getElementsByClassName('console-output')[0];
|
|
const input = document.getElementsByClassName('console-input-field')[0];
|
|
|
|
let history = [];
|
|
let historyIndex = 0;
|
|
|
|
function disableInput() {
|
|
input.disabled = true;
|
|
document.getElementsByClassName('console-input-prompt')[0].style.visibility = 'hidden';
|
|
}
|
|
|
|
function enableInput() {
|
|
input.disabled = false;
|
|
input.focus();
|
|
document.getElementsByClassName('console-input-prompt')[0].style.visibility = 'visible';
|
|
}
|
|
|
|
function header() {
|
|
stdOut('Konsole 0.1.0 LTS localhost tty1<br><br>localhost login: root<br>password:<br><br>');
|
|
}
|
|
|
|
function process(command) {
|
|
(Array.isArray(command) ? command.join(' ') : command).split(';').filter(c => !!c).forEach(c => {
|
|
const parts = c.split(' ').filter(c => !!c);
|
|
if(window.cli[parts[0]] == undefined || window.cli[parts[0]].run == undefined) {
|
|
stdErr(`${parts[0]}: command not found`);
|
|
} else {
|
|
try {
|
|
const out = window.cli[parts[0]].run(parts.slice(1));
|
|
if(!!out) stdOut(out);
|
|
} catch(err) {
|
|
console.error(err)
|
|
stdErr(`${parts[0]}: exited with a non-zero status`);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function stdErr(text) {
|
|
const p = document.createElement('p');
|
|
p.classList = 'console-output-line error';
|
|
p.innerText = text;
|
|
output.appendChild(p);
|
|
}
|
|
|
|
function stdOut(text, html=true) {
|
|
const p = document.createElement('p');
|
|
p.classList = 'console-output-line';
|
|
p[html ? 'innerHTML' : 'innerText'] = text;
|
|
output.appendChild(p);
|
|
}
|
|
|
|
input.addEventListener('blur', event => input.focus());
|
|
input.addEventListener("keydown", event => {
|
|
if(event.key == "Enter") {
|
|
disableInput();
|
|
inputValue = input.value;
|
|
input.value = '';
|
|
stdOut(`root@localhost:~ # ${inputValue}`, false);
|
|
if(!!inputValue) {
|
|
history.push(inputValue);
|
|
historyIndex = history.length;
|
|
process(inputValue)
|
|
}
|
|
enableInput();
|
|
} else if(event.key == 'Up' || event.key == 'ArrowUp') {
|
|
if(historyIndex > 0) historyIndex--;
|
|
input.value = historyIndex == history.length ? '' : history[historyIndex];
|
|
setTimeout(() => {
|
|
const end = input.value.length;
|
|
input.setSelectionRange(end, end);
|
|
input.focus();
|
|
}, 1)
|
|
} else if(event.key == 'Down' || event.key == 'ArrowDown') {
|
|
if(historyIndex < history.length) historyIndex++;
|
|
input.value = historyIndex == history.length ? '' : history[historyIndex];
|
|
setTimeout(() => {
|
|
const end = input.value.length;
|
|
input.setSelectionRange(end, end);
|
|
input.focus();
|
|
}, 1)
|
|
}
|
|
});
|
|
header();
|
|
</script>
|
|
</body>
|
|
</html>
|