Baipyrus/TerminalHomepage
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Baipyrus 2022-05-27 18:13:33 +02:00
commit 1aa39fd1b8
3 changed files with 140 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css/main.css Normal file
View File

@ -0,0 +1,21 @@
body {
background-color: black;
font-family: 'Lucida Console';
font-size: large;
}
#cursor {
position: absolute;
z-index: -1;
background-color: white;
display: inline-block;
opacity: 1;
}
#textbox {
color: lime;
}
#input {
color: lightgrey;
}

10
index.html Normal file
View File

@ -0,0 +1,10 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="preload()">
<div id="cursor">&nbsp;</div>
<div id="textbox"><a id="input"></a></div>
</body>
</htm

109
js/main.js Normal file
View File

@ -0,0 +1,109 @@
const pretext = "root@baipyr.us:~# ";
let startPosition = 0;
let cursorPosition = 0;
document.addEventListener("keypress", e=>{
if ((e.key == "Enter") || (e.code == "KeyV" && e.ctrlKey))
return;
let textbox = document.getElementById("input");
const index = cursorPosition - startPosition;
if (e.key == ' ' && (textbox.innerHTML[index-1] == ' ' || cursorPosition == startPosition))
return;
if (index <= textbox.innerHTML.length-1) {
const text = textbox.innerHTML;
const a = text.substring(0, index);
const b = text.substring(index, text.length);
textbox.innerHTML=a+e.key+b;
} else
textbox.innerHTML += e.key;
cursorPosition++;
updateCursor();
});
document.addEventListener("keydown", e=>{
let textbox = document.getElementById("input");
const index = cursorPosition - startPosition;
const text = textbox.innerHTML;
switch (e.key) {
case "Backspace":
// Ein Zeichen nach links löschen
if (index == 0)
return;
if (index <= textbox.innerHTML.length-1) {
const a = text.substring(0, index-1);
const b = text.substring(index, text.length);
textbox.innerHTML=a+b;
} else
textbox.innerHTML = text.substring(0,text.length-1);
cursorPosition--;
updateCursor();
break;
case "ArrowLeft":
// Ein Zeichen nach links
if (cursorPosition > startPosition) {
cursorPosition--;
updateCursor();
}
break;
case "ArrowRight":
// Ein Zeichen nach reckts
if (index < textbox.innerHTML.length) {
cursorPosition++;
updateCursor();
}
break;
case "Delete":
// Ein Zeichen nach rechts löschen
if (index == 0 || index >= textbox.innerHTML.length)
return;
const a = text.substring(0, index);
const b = text.substring(index+1, text.length);
textbox.innerHTML=a+b;
break;
case "Enter":
// Befehl absenden / Zeilenumbruch
const parent = document.getElementById("textbox");
parent.removeChild(textbox);
// Run command and return output???
const commandOutput = "";
parent.innerHTML += '<a style="color: white;">' + text + '</a><br>' + commandOutput + pretext;
textbox.innerHTML = "";
parent.appendChild(textbox);
cursorPosition = startPosition;
updateCursor();
break;
case "ArrowUp":
// Einen Befehl zurück in der History
break;
case "ArrowDown":
// Einen Befehl nach vorne in der History
break;
case "Tab":
// Autocomplete
break;
}
});
function updateCursor() {
let cursor = document.getElementById("cursor");
const transform = `translate(${cursorPosition}ch)`;
cursor.style.transform = transform;
}
function preload() {
let cursor = document.getElementById("cursor");
let textbox = document.getElementById("textbox");
textbox.innerHTML = pretext+textbox.innerHTML;
const length = textbox.innerText.length+1;
const transform = `translate(${length}ch)`;
cursor.style.transform = transform;
startPosition = length;
cursorPosition = length;
}
setInterval(()=>{
let cursor = document.getElementById("cursor");
cursor.style.opacity = (cursor.style.opacity=="1")?"0":"1";
},1000);