Uploaded index file
This commit is contained in:
252
index.html
Normal file
252
index.html
Normal file
@@ -0,0 +1,252 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user