changed from php to express.js

public/css/styles.css

@@ -0,0 +1,68 @@
+* {
+    margin:0;
+    padding: 0;
+}
+
+#main {
+    background: black;
+    width: 100%;
+    height: 100vh;
+}
+
+#terminal {
+    --padding: 30px;
+    width: calc(100% - (2 * var(--padding)));
+    height: calc(100% - (2 * var(--padding)));
+    padding: var(--padding);
+}
+
+.terminalLine {
+    display: flex;
+    justify-content: flex-start;
+}
+
+
+.pathText {
+    color: limegreen;
+    font-family: "Source Code Pro", monospace;
+}
+.pathColon {
+    color: white;
+    font-family: "Source Code Pro", monospace;
+}
+.pathPath {
+    color: limegreen;
+    font-family: "Source Code Pro", monospace;
+}
+.pathDollar {
+    color: white;
+    font-family: "Source Code Pro", monospace;
+}
+
+.pathBlinky {
+    width: 10px;
+    height: 20px;
+    background: lime;
+    animation: blinky infinite 1s;
+}
+@keyframes blinky {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+#terminalInput {
+    margin-left: 5px;
+    background: none;
+    outline:none;
+    border: none;
+    font-size: 16px;
+    font-family: "Source Code Pro", monospace;
+    color: white;
+}

public/js/terminal.js

@@ -0,0 +1,75 @@
+const username = "guest";
+const hostname = `192.168.${Math.floor(Math.random()*100)}.${Math.floor(Math.random()*255)}`;
+
+document.addEventListener("DOMContentLoaded", function () {
+
+    document.querySelectorAll(".pathText").forEach((element)=> {
+        element.innerHTML = `${username}@${hostname}`;
+    });
+
+    const terminalInput = document.getElementById("terminalInput");
+
+    terminalInput.addEventListener("input", function (e) {
+        resizeInput();
+    });
+    resizeInput()
+
+    terminalInput.addEventListener('blur', function(e) {
+        e.preventDefault();
+        terminalInput.focus();
+    }, false);
+    terminalInput.focus();
+
+
+    terminalInput.addEventListener("keydown", function (e) {
+        if (e.key === "Enter"){
+            sendCommand(e);
+        }
+    });
+
+});
+
+function sendCommand(e){
+    const command = e.target.value;
+    console.log("COMMAND SENT: "+command);
+    e.target.value = "";
+    resizeInput();
+}
+
+
+function resizeInput() {
+    const inputText = terminalInput.value;
+    const inputWidth = measureTextWidth(inputText);
+    const maxWidth = 300; // Set your desired maximum width
+
+    if (inputWidth <= maxWidth) {
+        terminalInput.style.width = inputWidth + "px";
+    } else {
+        terminalInput.style.width = maxWidth + "px";
+        terminalInput.value = inputText.slice(0, -1); // Remove the last character
+    }
+}
+
+
+
+function measureTextWidth(text) {
+    const nonBreakingSpace = '\u00A0';
+    const sanitizedText = text.replace(/ /g, nonBreakingSpace);
+
+    const fakeElement = document.createElement("div");
+    fakeElement.style.visibility = "hidden";
+    fakeElement.style.position = "absolute";
+    fakeElement.style.top = "0";
+    fakeElement.style.left = "0";
+    fakeElement.style.width = "auto";
+    fakeElement.style.fontFamily = "Source Code Pro";
+    fakeElement.style.fontSize = "16px";
+    fakeElement.style.whiteSpace = "nowrap";
+    fakeElement.innerHTML = sanitizedText;
+
+    document.body.appendChild(fakeElement);
+    const width = fakeElement.offsetWidth;
+    document.body.removeChild(fakeElement);
+
+    return width;
+}