termwebui

old portfolio website with terminal interface

git clone https://9o.is/git/termwebui.git

commit d63af8644cac1105162df420d572190ff23c6681
Author: Jul <jul@9o.is>
Date:   Tue, 26 May 2015 17:49:55 +0000

init

Diffstat:

Adirectories.json | 17+++++++++++++++++


Aindex.html | 429+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


2 files changed, 446 insertions(+), 0 deletions(-)

diff --git a/directories.json b/directories.json
@@ -0,0 +1,16 @@
+{
+    ".files":[
+        "file1",
+        "file2"
+    ],
+    
+    ".directories":[
+        "dir1"
+    ],
+    
+    "dir1":{
+        ".files":[
+            "file3"
+        ]
+    }
+}
+\ No newline at end of file
diff --git a/index.html b/index.html
@@ -0,0 +1,429 @@
+<!DOCTYPE html>
+<html lang="en-us">
+
+<head>
+<meta charset="utf-8">
+
+<script language="JavaScript">
+document.oncontextmenu =new Function("return false;")
+</script> 
+
+<style type="text/css">
+
+html, body, p, em, div, span, label, input, textarea, pre {
+	background-color: black;
+	color: white;
+	font-family: monospace !important;
+	font-size: 12px;
+	
+	border: none !important;
+	margin: 0 !important;
+	padding: 0 !important;
+	
+	-webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+html, body, #terminal {
+	overflow: hidden;
+}
+
+#terminal {
+	width: 600px;
+	word-break: break-all;
+}
+
+#scroller {
+	position: relative;
+	width: 620px;
+	overflow-y: scroll;
+}
+
+.green { color: green;}
+.blue { color: blue;}
+.red { color: red;}
+.orange { color: orange;}
+.ls-item { margin-right: 15px !important; }
+
+</style>
+</head>
+
+<body onselectstart="return false">
+<div id="terminal">
+	<div id="scroller">
+		<div id="output"></div>
+		<div id="input"></div>
+	</div>
+</div>
+
+<script> 
+
+var Terminal = {
+	HOSTNAME: "jcabrra",
+	ROOT: "https://jsterm-jcabrra.c9.io",
+	PWD: "/",
+	PS1: "$ "
+};
+
+Terminal.interface = (function(){
+	
+	var scroller = document.getElementById("scroller");
+	
+	var setTitle = function() {
+		document.title = "["+Terminal.HOSTNAME+"] Terminal: "+Terminal.PWD;
+	};
+
+	setInterval(function() {
+		setTitle();
+	}, 100);
+	
+	return {
+		scrollToBottom: function() {
+			scroller.scrollTop = scroller.scrollHeight;
+		},
+		resize: function() {
+   			scroller.style.height = window.innerHeight + "px";
+		}
+	}
+})();
+
+Terminal.input = (function(){
+	
+	var value = "";
+	var pointer = 0;
+	
+	
+	var display = (function(){
+	
+		var display = document.getElementById("input");
+		var animation = "<span class='green'>"+String.fromCharCode(9608)+"</span>";
+		var cursor = true;
+		var cursorText = animation;
+
+		setInterval(function(){
+			display.innerHTML = Terminal.PS1 + (cursor ? cursorText : value);
+		}, 50);
+		
+		setInterval(function(){
+			cursor = cursor ? false : true;
+		}, 500);
+		
+		return {
+			resetCursor: function() {
+				cursor = true;
+				cursorText = 
+					value.substring(0, pointer) + 
+					animation + value.substring(pointer + 1, value.length);
+			}	
+		}
+	})();
+	
+	var history = (function(){
+	
+		var history = [""];
+		var pointer = 0;
+	
+		return {
+			reset: function(input) {
+				history.unshift("");
+				pointer = 0;
+			},
+			up: function() {
+				if(pointer < history.length - 1) {
+					pointer++;
+				}
+			},
+			down: function() {
+				if(pointer > 0) {
+					pointer--;
+				}
+			},
+			get: function() {
+				return history[pointer];
+			},
+			set: function(input) {
+				history[pointer] = input;
+			}
+		}
+	})();
+	
+	var getHistory = function() {
+		var newValue = history.get();
+		value = newValue;
+		pointer = newValue.length;
+		display.resetCursor();
+	};
+	
+	return {
+		set: function(char) {
+			value = 
+				value.substring(0, pointer) + char + 
+				value.substring(pointer, value.length);
+			pointer++;
+			history.set(value);
+			display.resetCursor();
+		},
+		delete: function() {
+			if(pointer > 0) {
+				value = 
+					value.substring(0, pointer - 1) + 
+					value.substring(pointer, value.length);
+				pointer--;
+				history.set(value);
+				display.resetCursor();
+			}
+		},
+		up: function() {
+			history.up();
+			getHistory();
+		},
+		down: function() {
+			history.down();
+			getHistory();
+		},
+		left: function() {
+			if(pointer > 0) {
+				pointer--;
+				display.resetCursor();
+			}
+		},
+		right: function() {
+			if(pointer <= value.length) {
+				pointer++;
+				display.resetCursor();
+			}
+		},
+		reset: function() {
+			value = "";
+			pointer = 0;
+			display.resetCursor();
+			history.reset();
+		},
+		value: function() {
+			return value;
+		}
+	}
+})();
+
+Terminal.output = (function(){
+	
+	var display = document.getElementById("output");
+	
+	return {
+		commit: function(text) {
+			var out = document.createElement("div");
+			out.innerHTML = text;
+			display.appendChild(out);
+		}
+	}
+})();
+
+Terminal.cmd = (function(){
+	
+	var commands = [];
+	
+	var valid = function(cmd) {
+		var fn = ["name", "exec"];
+		
+		for(var i=0; i<fn.length;i++) {
+			if(!cmd[fn[i]]) {
+				return false;
+			}
+		}
+		return true;
+	};
+	
+	var find = function(name) {
+		for(var i=0; i<commands.length;i++) {
+			if(commands[i].name === name) {
+				return commands[i];
+			}
+		}
+	};
+	
+	return {
+		register: function(cmd) {
+			if(valid(cmd)) {
+				commands.push(cmd);
+			}
+		},
+		execute: function(command) {
+			var values = command.split(" ");
+			var cmd = find(values[0]);
+			if(typeof cmd !== 'undefined') {
+				cmd.exec(values);
+			}
+		}
+	}
+})();
+
+(function(){
+	var banner = {
+		name: 'banner',
+		exec: function() {
+			var value = "My Banner!\nYeah!"
+			Terminal.output.commit(value);
+		}
+	};
+	
+	Terminal.cmd.register(banner);
+})();
+
+(function(){
+	var date = {
+		name: 'date',
+		exec: function() {
+			var value = new Date().toString()
+			Terminal.output.commit(value);
+		}
+	};
+	
+	Terminal.cmd.register(date);
+})();
+
+(function(){
+	var pwd = {
+		name: 'pwd',
+		exec: function() {
+			Terminal.output.commit(Terminal.PWD);
+		}
+	};
+	
+	Terminal.cmd.register(pwd);
+})();
+
+(function(){
+	var img = {
+		name: 'img',
+		exec: function() {
+			// TODO: http://thecodeplayer.com/walkthrough/cool-ascii-animation-using-an-image-sprite-canvas-and-javascript
+		}
+	};
+	
+	Terminal.cmd.register(img);
+})();
+
+(function(){
+	var ls = {
+		name: 'ls',
+		exec: function() {
+			var xhr = new XMLHttpRequest();
+			xhr.onreadystatechange = function() {
+    			if (xhr.readyState === 4 && xhr.status === 200) {
+    				var obj = null;
+					try {
+						console.log(xhr.responseText);
+						obj = JSON.parse(xhr.responseText);
+					} catch(e) {
+						console.error('The server returned JSON but contains an error: '+e);
+					} finally {
+						var value = "";
+						
+						var dir_len = obj.directories.length;
+						for(var i=0; i<dir_len; i++) {
+							value += "<span class='ls-item orange'>" + 
+								obj.directories[i] + "</span>";
+						}
+						
+						var files_len = obj.files.length;
+						for(var i=0; i<files_len; i++) {
+							value += "<span class='ls-item'>" + 
+								obj.files[i] + "</span>";
+						}
+						
+						Terminal.output.commit(value);
+					}
+    			}
+			};
+			xhr.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2005 00:00:00 GMT");
+			xhr.open('GET', Terminal.ROOT + Terminal.PWD + ".ls", true);
+			xhr.send(null);
+		}
+	};
+	
+	Terminal.cmd.register(ls);
+})();
+
+(function(){
+	var cat = {
+		name: 'cat',
+		exec: function(values) {
+			var xhr = new XMLHttpRequest();
+			xhr.onreadystatechange = function() {
+    			if (xhr.readyState === 4 && xhr.status === 200) {
+    				Terminal.output.commit(xhr.responseText);
+    			}
+			}
+			xhr.open('GET', Terminal.ROOT + Terminal.PWD + values[1], true);
+			xhr.setRequestHeader("Content-Type", "text/plain; charset=UTF-8");
+			xhr.send(null);
+		}
+	};
+	
+	Terminal.cmd.register(cat);
+})();
+
+// cd (url should reflect pwd)
+
+Terminal.filesystem = (function(){
+	
+	
+	return {
+		
+	}
+})();
+
+
+window.onkeypress = function(event) {
+	event.preventDefault();
+	
+	switch(event.keyCode) {
+		case 13: // [Enter]
+			var value = Terminal.input.value();
+			Terminal.input.reset();
+			Terminal.output.commit(Terminal.PS1 + value);
+			Terminal.cmd.execute(value);
+			break;
+		case 8:  // [backspace]
+			Terminal.input.delete();
+			break;
+		case 37: // [left arrow]
+			Terminal.input.left();
+			break;
+		case 38: // [up arrow]
+			Terminal.input.up();
+			break;
+		case 39: // [right arrow]
+			Terminal.input.right();
+			break;
+		case 40: // [down arrow]
+			Terminal.input.down();
+			break;
+		default:
+			var char = event.charCode;
+			if(char > 31 && char < 127) {
+				char = String.fromCharCode(char);
+				Terminal.input.set(char);
+			}
+			break;
+	}
+	
+	Terminal.interface.scrollToBottom();
+}
+
+window.onload = function() {
+	Terminal.interface.resize();
+};
+
+window.onresize = function(event) {
+    Terminal.interface.resize();
+};
+
+</script>
+
+</body>
+</html>