commit cc9706843f64ab68e4c003e3138012330bef5d28
parent 659150f8d89847f44c41b072794963e4b15cda5e
Author: EmDev21 <103883116+EmDev21@users.noreply.github.com>
Date: Sun, 17 Apr 2022 22:42:12 +0200
Add files
Diffstat:
4 files changed, 155 insertions(+), 0 deletions(-)
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" href="./src/style/terminal.css">
+</head>
+<body>
+ <div>
+ <div id="screen">
+ <div id="Container">
+ <div id="input">
+ <p id="input_title"></p>
+ <input id="input_source" type="command" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" autofocus>
+ </div>
+ <div id="logger">
+ <div id="wrapper">
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <script src="./src/js/terminal.js"></script>
+ <script src="./src/js/commands.js"></script>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/src/js/commands.js b/src/js/commands.js
@@ -0,0 +1,28 @@
+function google(cmd) {
+ if (!(cmd == undefined)) {
+ str = "";
+ var parameters = cmd.split(" ").slice(1);
+ for (var i = 0; i < parameters.length; i++) {
+ str = str + "+" + parameters[i];
+ }
+ window.open("https://www.google.com/search?q=" + str);
+ } else {
+ window.open("https://www.google.com");
+ }
+}
+
+function reddit(cmd) {
+ if (!(cmd == undefined)) {
+ window.open("https://www.reddit.com/r/" + cmd.split(" ").slice(1)[0]);
+ } else {
+ window.open("https://www.reddit.com/");
+ }
+}
+
+function clear(cmd) {
+ document.getElementById('wrapper').innerHTML = "";
+}
+
+function echo(cmd) {
+ block_log(cmd.split(" ").slice(1).join(" "))
+}
+\ No newline at end of file
diff --git a/src/js/terminal.js b/src/js/terminal.js
@@ -0,0 +1,34 @@
+config = {
+ shellPrompt: "$ "
+}
+
+document.getElementById("input_title").innerText = config.shellPrompt;
+document.getElementById('input_source').addEventListener('keyup', submit_command);
+
+var current_block;
+
+function new_block() {
+ current_block = document.createElement("div");
+ current_block.classList.add("log");
+ document.getElementById('wrapper').appendChild(current_block);
+}
+
+function block_log(message) {
+ current_block.innerHTML = "<p>" + message + "</p>";
+ new_block();
+}
+
+function submit_command() {
+ if (!(event.keyCode === 13)) return;
+ var command = document.getElementById("input_source").value;
+ document.getElementById("input_source").value = "";
+
+ new_block();
+
+ if (typeof window[command.split(" ")[0]] === "function") {
+ block_log(config.shellPrompt + command);
+ window[command.split(" ")[0]](command);
+ } else if (command != "") {
+ block_log("command not found : " + command);
+ }
+}
+\ No newline at end of file
diff --git a/src/style/terminal.css b/src/style/terminal.css
@@ -0,0 +1,63 @@
+:root {
+ --main-bg-color: #547c99;
+ --prompt-bg-color: #151515;
+ --text-color: #6c99bb;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-family: monospace;
+ font-size: 1rem;
+}
+
+body {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ background-color: var(--main-bg-color);
+ }
+
+#screen {
+ width: 56vw;
+ height: 32vw;
+ box-shadow: 1px 1px 10px;
+ border-radius: 4px;
+ padding: 1.5em 0em;
+ overflow:auto;
+ display:flex;
+ flex-direction:column-reverse;
+ background-color: var(--prompt-bg-color);
+}
+
+#Container, #Container>div {
+ transform: rotateX(180deg);
+}
+
+.log {
+ padding-left: 10px;
+ padding-right: 10px;
+ color: var(--text-color);
+}
+
+input {
+ background-color: var(--prompt-bg-color);
+ color: var(--text-color);
+ width: 90%;
+}
+
+#input {
+ padding-left: 10px;
+ padding-right: 10px;
+ color: var(--text-color);
+
+}
+
+#input p {
+ display: inline-block;
+}
+\ No newline at end of file
