valentijn/Terminal-Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made a simple terminal

Browse Source
This commit is contained in:
valentijn
2024-01-15 20:42:00 +01:00
parent ae9fa3e36d
commit 5cda03fe2a
9 changed files with 230 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.idea/.gitignore generated vendored Normal file
View File

@@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

8
.idea/PS-Portfolio.iml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

8
.idea/modules.xml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/PS-Portfolio.iml" filepath="$PROJECT_DIR$/.idea/PS-Portfolio.iml" />
</modules>
</component>
</project>

25
.idea/php.xml generated Normal file
View File

@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="MessDetectorOptionsConfiguration">
<option name="transferred" value="true" />
</component>
<component name="PHPCSFixerOptionsConfiguration">
<option name="transferred" value="true" />
</component>
<component name="PHPCodeSnifferOptionsConfiguration">
<option name="highlightLevel" value="WARNING" />
<option name="transferred" value="true" />
</component>
<component name="PhpIncludePathManager">
<include_path>
<path value="" />
</include_path>
</component>
<component name="PhpProjectSharedConfiguration" php_language_level="8.2" />
<component name="PhpStanOptionsConfiguration">
<option name="transferred" value="true" />
</component>
<component name="PsalmOptionsConfiguration">
<option name="transferred" value="true" />
</component>
</project>

6
.idea/vcs.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

31
website/index.php Normal file
View File

@@ -0,0 +1,31 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HerpDerpOS - Root</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="main">
<div id="terminal">
<div class="terminalLine">
<h4 class="pathText"></h4>
<h4 class="pathColon">:</h4>
<h4 class="pathPath">~/projects</h4>
<h4 class="pathDollar">$</h4>
<input type="text" id="terminalInput" value="">
<div class="pathBlinky"></div>
</div>
</div>
</div>
<script src="terminal.js"></script>
</body>
</html>

1
website/os.php Normal file
View File

@@ -0,0 +1 @@
<?php

68
website/styles.css Normal file
View File

@@ -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;
}

75
website/terminal.js Normal file
View File

@@ -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;
}