web terminal with a few basic commands

46ec5399 · Ethan Jones · 46ec5399 · 46ec5399 · 46ec5399 · 46ec5399
Commit 46ec5399 authored 5 years ago by Ethan Jones
--- a/css/terminal.css
+++ b/css/terminal.css
+body {
+  background-color: #181a1b;
+}
+
+#terminal {
+  font-family: "Ubuntu Mono";
+  font-size: 16px;
+  color: white;
+  word-break: break-word;
+}
+
+#terminal a {
+  color: #3391ff;
+}
+
+#terminal .prefix .userdomain {
+  color: rgb(127, 255, 127);
+}
+
+#terminal .prefix .tilde {
+  color: blue;
+}
+
+#terminal .lsdir {
+  color: aqua;
+}
+
+#terminal .lsfile, #terminal .helpcmd {
+  color: white;
+}
+
+#terminal #terminput {
+  border: none;
+  background-image: none;
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  font-family: "Ubuntu Mono";
+  font-size: 16px;
+  width: 85%;
+
+  /*
+    Removes blinker, in a hacky way, but whatever.
+  */
+
+  color: transparent;
+  -webkit-text-fill-color: white;
+  -webkit-text-stroke-width: 0px;
+  -webkit-text-stroke-color: black;
+}
+
+#terminal #terminput:focus {
+  outline: none;
+}
--- a/index.php
+++ b/index.php
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>Ethan Jones - Portfolio & about me</title>
+
+    <link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono&display=swap" rel="stylesheet">
+    <link href="css/terminal.css?<?php echo time();?>" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="terminal">
+
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+    <script src="js/terminal.js?<?php echo time();?>"></script>
+    <script src="js/defaultcommands.js?<?php echo time();?>"></script>
+  </body>
+</html>
--- a/js/defaultcommands.js
+++ b/js/defaultcommands.js
+function cat(args) {
+  let path = window.location.pathname + "terminalfiles/";
+
+  if (args[0] == null) {
+    cmdDone();
+    return;
+  }
+
+  path = path + args[0];
+  $.ajax(path)
+  .done(function(data) {
+    terminalPrint(data);
+  })
+  .fail(function() {
+    terminalPrint(args[0] + " does not exist or there was an error trying to access it.");
+  })
+  .always(function() {
+    cmdDone();
+  });
+}
+
+function ls(args) {
+  $.ajax("phputil/gettermfiles.php")
+  .done(function(data) {
+    let ar = JSON.parse(data);
+
+    for (var v in ar) {
+      let str = ar[v];
+
+      if ((args.length < 1 || args[0] != "-a") && str.match(/^(\.+)/gm)) {
+        continue;
+      }
+
+      var isDirectory = ar[v].match(/\.\w+/g) == null;
+      if (isDirectory) {
+        str = `<span class="lsdir">` + str + `</span>`;
+      } else {
+        str = `<a class="lsfile" href="#" onclick="clickCmd('cat ` + ar[v] + `')">` + str + `</a>`
+      }
+
+      terminalPrint(str + "&#9;", false);
+    }
+
+    terminalPrint("");
+  })
+  .fail(function() {
+  })
+  .always(function() {
+    cmdDone();
+  });
+}
+
+function cd(args) {
+  var resp = "bash: cd: {dir} Permission denied";
+  var dir = "/:";
+
+  if (args.length > 0) {
+    var isDirectory = args[0].match(/\.\w+/g) == null;
+    if (!isDirectory) {
+      resp = "bash: cd: " + args[0] + ": Not a directory";
+    } else {
+      dir = args[0] + ":";
+    }
+  }
+
+  resp = resp.replace("{dir}", dir);
+  terminalPrint(resp);
+
+  cmdDone();
+}
+
+function help() {
+  let i = 1;
+  for (var c in cmds) {
+    var notlast = (i != Object.keys(cmds).length);
+    var str = `<a href="#" class="helpcmd" onclick="clickCmd('` + c + `')">` + c + `</a>`
+
+    terminalPrint(str, !notlast);
+
+    if (notlast) {
+      terminalPrint(", ", false);
+    }
+
+    i++;
+  }
+
+  cmdDone();
+}
+
+function clickCmd(cmd) {
+  autowriteQueue.push(cmd);
+}
+
+function ready() {
+  addCmd("cat", cat);
+  addCmd("ls", ls);
+  addCmd("cd", cd);
+  addCmd("help", help);
+}
+
+$(document).ready(ready);
--- a/js/terminal.js
+++ b/js/terminal.js
+let cmds = [];
+let printTemplate = `<span class="prefix"><span class="userdomain">visitor@yasfu.net</span>:<span class="tilde">~</span>&#36; &nbsp;</span>`;
+let inputBoxTemplate = `<input type="text" id="terminput" name="terminput">`;
+let textStampTemplate = `<span class="textstamp">{TEXT}</span><br/>`;
+let printTxtTemplate = `<span class="print">{TEXT}</span>`;
+let term;
+let inputBox;
+
+let autowrite;
+let isAutoWriting = false;
+let autowriteQueue = [];
+
+function ready() {
+  term = $("#terminal");
+
+  $.ajax("phputil/lastlogin.php").done(function(lastLogin) {
+    $.ajax("systeminfo.txt").done(function(data) {
+      data = data.replace("{USERAGENT}", navigator.userAgent);
+      data = data.replace("{LASTLOGIN}", lastLogin);
+
+      terminalPrint(data);
+    }).always(function() {
+      setTimeout(function() {
+        addInputPrefix();
+
+        setInterval(autoWrite, 80);
+        autowriteQueue.push("cat welcome.txt");
+        autowriteQueue.push("ls");
+      }, 200);
+    });
+  });
+}
+
+function autoWrite() {
+  if (inputBox == null) {
+    return;
+  }
+
+  if (autowrite == null || autowrite == "") {
+    if (isAutoWriting) {
+      actEnter();
+      isAutoWriting = false;
+    }
+
+    if (autowriteQueue.length < 1) {
+      toggleInput(false);
+      return;
+    }
+
+    if (inputBox == null) {
+      return;
+    }
+
+    autowrite = autowriteQueue[0];
+    autowriteQueue.shift();
+    inputBox.val("");
+    isAutoWriting = true;
+    toggleInput(true);
+  }
+
+  let oVal = inputBox.val();
+  inputBox.val(oVal + autowrite.charAt(0));
+  autowrite = autowrite.slice(1);
+}
+
+function appendToTerm(obj) {
+  obj.appendTo(term);
+  // scroll to bottom
+}
+
+function toggleInput(tog) {
+  if (inputBox == null) {
+    return;
+  }
+
+  if (tog == null) {
+    tog = !inputBox.prop("disabled");
+  }
+
+  inputBox.prop("disabled", tog);
+}
+
+function addInputPrefix() {
+  let temp = $(printTemplate);
+  appendToTerm(temp);
+  resetInputBox(false);
+}
+
+function actEnter() {
+  let v = inputBox.val();
+  stampInputBox();
+  callCmd(v);
+}
+
+function cmdDone() {
+  addInputPrefix();
+  resetInputBox();
+}
+
+function onInputKeypress(ev) {
+  if (ev.which != "13") {
+    return;
+  }
+
+  actEnter();
+}
+
+function stampInputBox() {
+  let stampWMsg = inputBox.val();
+  stampWMsg = textStampTemplate.replace("{TEXT}", stampWMsg);
+
+  let textStamp = $(stampWMsg);
+  textStamp.insertBefore(inputBox);
+
+  inputBox.remove();
+  inputBox = null;
+}
+
+function resetInputBox(shouldStamp) {
+  if (shouldStamp && inputBox != null) {
+    stampInputBox();
+  }
+
+  if (inputBox != null) {
+    inputBox.remove();
+  }
+
+  inputBox = $(inputBoxTemplate);
+
+  var prefW = $(".prefix").width();
+  var winW = $(window).width();
+  var prop = 100 * (prefW / winW);
+  var nProp = 95 - prop;
+
+  inputBox.width(nProp + "%");
+
+  appendToTerm(inputBox);
+
+  inputBox.on("keydown", onInputKeypress);
+  inputBox.on("focusout", function() { inputBox.focus(); });
+  inputBox.focus();
+}
+
+function terminalPrint(print, bre) {
+  if (bre == null) {
+    bre = true;
+  }
+
+  let printWMsg = printTxtTemplate.replace("{TEXT}", print);
+
+  let text = $(printWMsg);
+  appendToTerm(text);
+
+
+  if (bre) {
+    appendToTerm($("<br/>"));
+  }
+}
+
+function addCmd(cmd, func) {
+  cmds[cmd] = func;
+}
+
+function callCmd(str) {
+  let args = str.match(/(?:[^\s"]+|"[^"]*")+/g);
+
+  if (args == null || args.length < 1) {
+    cmdDone();
+    return;
+  }
+
+  let cmd = args[0];
+
+  args.shift();
+
+  if (cmds[cmd] == null) {
+    terminalPrint(cmd + ": command not found");
+    cmdDone();
+    return;
+  }
+
+  let call = cmds[cmd];
+
+  try {
+    call(args);
+  } catch (error) {
+    terminalPrint("Error processing command '" + cmd + "' with error: " + error);
+    console.log("Error processing command '" + cmd + "' with error: " + error);
+    cmdDone();
+  }
+}
+
+$(document).ready(ready);
--- a/lastlogin.txt
+++ b/lastlogin.txt
+Thu Nov 21 16:07:27 2019
\ No newline at end of file
--- a/phputil/gettermfiles.php
+++ b/phputil/gettermfiles.php
+<?php
+
+$dir    = '../terminalfiles';
+$files1 = scandir($dir);
+echo json_encode($files1);
+
+?>
--- a/phputil/lastlogin.php
+++ b/phputil/lastlogin.php
+<?php
+
+$loginTime = file_get_contents("../lastlogin.txt");
+
+$date = new DateTime();
+$s = $date->format('D M d H:i:s Y');
+
+$fp = fopen('../lastlogin.txt', 'w');
+fwrite($fp, $s);
+fclose($fp);
+
+die($loginTime);
+
+?>
--- a/systeminfo.txt
+++ b/systeminfo.txt
+Welcome to yasfu.net interactive web terminal<br/>
+<br/>
+&#9; * Documentation: <a href="https://github.com/littlebigbug/">https://github.com/littlebigbug/</a><br/>
+&#9; * Repository: <a href="https://github.com/littlebigbug/">https://github.com/littlebigbug/</a><br/>
+&#9; * User Agent: {USERAGENT}<br/>
+&#9; * Support: ethan@yasfu.net<br/>
+<br/>
+Despite being a traditional-looking terminal, you may use your mouse to navigate links on the page.<br/>
+This is still a normal website!<br/>
+<br/>
+67 packages can be updated.<br/>
+11 updates are security updates.<br/>
+<br/>
+Last Login: {LASTLOGIN}
--- a/terminalfiles/about.txt
+++ b/terminalfiles/about.txt
+My name is Ethan Jones, I'm a software developer student from Colorado, USA.<br/>
+I was born in the US but my family is from both US and the UK<br/>
+I love programming, music, and my wonderful girlfriend.<br/>
+I make and play video games in my spare time and go to <a href="http://warrentech.org/">Warren Tech</a> High School to study Game Development.
--- a/terminalfiles/welcome.txt
+++ b/terminalfiles/welcome.txt
+<b>Welcome!</b><br/>
+My name is Ethan Jones and I am a Software Developer and Systems Admin.<br/>
+For more about me, check 'about.txt'<br/>
+<hr/>
+My portfolio is based on an ubuntu terminal and I wrote it from scratch with javascript.<br/>
+If you are familiar with this sort of terminal, you are welcome to use the commands, otherwise you can just click those links.<br/>
+For a list of commands, type '<a href="#" class="helpcmd" onclick="clickCmd('help')">help</a>'<br/>
+<br/>
+If you want to mess with this terminal yourself, <a href="https://github.com/littlebigbug/">You can grab a copy of the source code from the github repository</a>.