Terminal prep.

Protest/Front/fullwindow.js

@@ -15,7 +15,6 @@ class Window {
 		this.isMaximized = false;
 		this.isMinimized = false;
 		this.isClosed = false;
-		this.themeColor = [64,64,64];
 		this.position = null;
 		this.escAction = null;
 		this.defaultElement = null;
@@ -276,16 +275,7 @@ class Window {
 		document.head.appendChild(favicon_dark);
 	}
 
-	SetThemeColor(color) {
-		this.themeColor = color;
-		this.content.style.backgroundColor = `rgb(${color[0]},${color[1]},${color[2]})`;
-
-		if ((this.themeColor[0] + this.themeColor[1] + this.themeColor[2]) / 3 > 127)
-			this.content.style.color = "var(--clr-dark)";
-	}
-
-	BringToFront() {
-	}
+	BringToFront() {}
 
 	AddCheckBoxLabel(parent, checkbox, label) {
 		let id = Date.now() + Math.random() * 1000;

Protest/Front/loader.js

@@ -104,6 +104,7 @@ const LOADER = {
 		"dhcpdiscover.js",
 		"ntpclient.js",
 		"telnet.js",
+		"terminal.js",
 		"wmi.js",
 		"snmp.js",
 		"speedtest.js",
@@ -320,6 +321,7 @@ const LOADER = {
 		case "NtpClient"    : return new NtpClient(command.params);
 		case "SiteCheck"    : return new SiteCheck(command.params);
 		case "Telnet"       : return new Telnet(command.params);
+		case "Terminal"     : return new Terminal(command.params);
 		case "Wmi"          : return new Wmi(command.params);
 		case "Snmp"         : return new Snmp(command.params);
 

Protest/Front/tabs.js

@@ -1,5 +1,5 @@
 class Tabs extends Window {
-	constructor(themeColor = [64,64,64]) {
+	constructor() {
 		super();
 
 		this.AddCssDependencies("tabs.css");

Protest/Front/terminal.css

@@ -0,0 +1,28 @@
+.terminal-content {
+	margin: 20px;
+}
+
+.terminal-cursor {
+	visibility: hidden;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 10px;
+	height: 18px;
+	border-radius: 1px;
+	background-color: var(--clr-accent);
+	box-shadow: var(--clr-accent) 0 0 2px;
+
+	animation: terminal-cursor 1.2s infinite;
+}
+
+.terminal-content:focus > .terminal-cursor{
+	visibility: visible;
+}
+
+@keyframes terminal-cursor {
+	0%  { opacity: .0;}
+	25% { opacity: 1;}
+	75% { opacity: 1;}
+	100%{ opacity: .0;}
+}

Protest/Front/terminal.js

@@ -0,0 +1,33 @@
+class Terminal extends Window {
+	constructor() {
+		super();
+
+		this.SetTitle("Terminal");
+		this.SetIcon("mono/console.svg");
+
+		this.AddCssDependencies("terminal.css");
+
+		this.SetupToolbar();
+		this.connectButton = this.AddToolbarButton("Connect", "mono/connect.svg?light");
+		this.settingsButton = this.AddToolbarButton("Settings", "mono/wrench.svg?light");
+		this.AddToolbarSeparator();
+
+		this.connectButton.disabled = true;
+
+		this.content.tabIndex = 1;
+		this.content.classList.add("terminal-content");
+
+		const cursor = document.createElement("div");
+		cursor.className = "terminal-cursor";
+		this.content.appendChild(cursor);
+
+		this.win.onclick = () => this.content.focus();
+		this.content.onfocus = () => this.BringToFront();
+		this.content.onkeydown = event => this.Terminal_onkeydown(event);
+	}
+
+	Terminal_onkeydown(event) {
+		event.preventDefault();
+		console.log(event.key, event.ctrlKey, event.altKey, event.shiftKey);
+	}
+}

Protest/Front/window.js

@@ -266,11 +266,10 @@ document.body.onbeforeunload = ()=> {
 taskbar.oncontextmenu = event=> false;
 
 class Window {
-	constructor(themeColor = [64, 64, 64]) {
+	constructor() {
 		this.isMaximized = false;
 		this.isMinimized = false;
 		this.isClosed = false;
-		this.themeColor = themeColor;
 		this.position = null;
 		this.escAction = null;
 		this.defaultElement = null;
@@ -550,7 +549,6 @@ class Window {
 		this.SetTitle("untitled");
 		WIN.array.push(this);
 
-		//this.SetThemeColor(this.themeColor);
 		this.BringToFront();
 
 		WIN.AlignIcon(false);
@@ -737,10 +735,9 @@ class Window {
 		newWin.document.close();
 
 		newWin.document.body.style.background = "none";
-		newWin.document.body.style.backgroundColor = `rgb(${this.themeColor[0]},${this.themeColor[1]},${this.themeColor[2]})`;
+		newWin.document.body.style.backgroundColor = "rgb(64,64,64)";
 		newWin.document.body.style.padding = "0";
 		newWin.document.body.style.margin = "0";
-		if ((this.themeColor[0] + this.themeColor[1] + this.themeColor[2]) / 3 < 128) newWin.document.body.style.color = "var(--clr-light)";
 
 		if (localStorage.getItem("accent_color")) { //apply accent color
 			let accent = JSON.parse(localStorage.getItem("accent_color"));
@@ -826,12 +823,11 @@ class Window {
 			WIN.array[i].task.className = "bar-icon";
 			WIN.array[i].task.style.backgroundColor = "rgba(0,0,0,0)";
 			WIN.array[i].icon.style.filter = "none";
-
 		}
 
 		this.task.className = "bar-icon bar-icon-focused";
-		this.task.style.backgroundColor = `rgb(${this.themeColor[0]},${this.themeColor[1]},${this.themeColor[2]})`;
-		if ((this.themeColor[0] + this.themeColor[1] + this.themeColor[2]) / 3 < 128) this.icon.style.filter = "brightness(6)";
+		this.task.style.backgroundColor = "rgb(64,64,64)";
+		this.icon.style.filter = "brightness(6)";
 
 		if (this.popOutWindow) {
 			this.popOutWindow.focus();
@@ -1154,7 +1150,6 @@ class Window {
 					id: `${KEEP.username}${Date.now()}`
 				}));
 			});
-
 		};
 	}
 
@@ -1169,14 +1164,6 @@ class Window {
 		this.iconPath = iconPath;
 	}
 
-	SetThemeColor(color) {
-		this.themeColor = color;
-		this.content.style.backgroundColor = `rgb(${color[0]},${color[1]},${color[2]})`;
-
-		if ((this.themeColor[0] + this.themeColor[1] + this.themeColor[2]) / 3 > 127)
-			this.content.style.color = "var(--clr-dark)";
-	}
-
 	AfterResize() { } //overridable
 
 	UpdateAuthorization() { //overridable