added colorschemes, better ui layout

main.go

@@ -20,6 +20,7 @@ import (
 
 type PageData struct {
 	CurrentDir  string
+	Hostname 	string
 	CurrentUsername string
 	CommandLog  []CommandOutput
 }
@@ -440,8 +441,12 @@ func parseCommandWithQuotes(command string) []string {
 
 func handler(w http.ResponseWriter, r *http.Request) {
 	currentDir, _ := os.Getwd()
+	displayDir := filepath.Base(currentDir)
+	// displayDirList := strings.Split(currentDir, "/")
+	// displayDir := displayDirList[len(displayDirList)-1] // get the last element of the path
 	currentUser, _ := user.Current()
 	currentUsername := currentUser.Username
+	hostname, _ := os.Hostname()
 
 	if r.Method == http.MethodPost {
 		input := r.FormValue("command")
@@ -451,6 +456,7 @@ func handler(w http.ResponseWriter, r *http.Request) {
 			args := parts[1:]
 			if  command == "cd" {
 				cmdOutput := changeDirectory(command, args, &currentDir)
+				displayDir = filepath.Base(currentDir)
 				commandLog = append(commandLog, cmdOutput)
 			} else if command == "download" {
 				if len(args) < 1{
@@ -467,7 +473,8 @@ func handler(w http.ResponseWriter, r *http.Request) {
 	}
 
 	data := PageData{
-		CurrentDir: currentDir,
+		CurrentDir: displayDir,
+		Hostname: hostname,
 		CurrentUsername: currentUsername,
 		CommandLog: commandLog,
 	}

static/stylesheet.css

@@ -4,6 +4,7 @@
 	--command-color: #75df0b;
 	--error-color: #ff5555;
 	--directory-color: #1bc9e7;
+	--ps1-color: #75df0b;
 }
 
 /* Default is pwny theme */
@@ -24,17 +25,31 @@ body {
 	overflow-y: auto;
 	white-space: pre-wrap;
 	border: none;
-	margin: 10px;
+	margin: 10px 10px 0 10px;
 	display: flex;
 	flex-direction: column;
+	padding-bottom: 3vh;
+}
+#terminal form {
+	display: flex;
+	/* flex-wrap: nowrap; */
+	align-items: center;
+	width: 100%;
+}
+#terminal .command {
+	white-space: nowrap;
+	/* overflow: hidden; */
+	/* text-overflow: ellipsis; */
 }
 input {
+	flex-grow: 1;
 	font-size: 14pt;
 	background: var(--bg-color);
 	color: var(--text-color);
 	border: none;
-	width: 80%;
+	min-width: 100vh;
 	font-family: monospace;
+	margin-left: 8px;
 }
 input:focus {
 	outline: none;
@@ -48,6 +63,9 @@ span.error {
 span.directory {
 	color: var(--directory-color);
 }
+span.ps1 {
+	color: var(--ps1-color);
+}
 
 .light-theme {
 	--bg-color: #fff;
@@ -55,6 +73,7 @@ span.directory {
 	--command-color: #007700;
 	--error-color: #cc0000;
 	--directory-color: #0044cc;
+	--ps1-color: #222;
 }
 
 .catppuccin-theme {
@@ -63,12 +82,41 @@ span.directory {
 	--command-color: #a6da95;
 	--error-color: #ed8796;
 	--directory-color: #7dc4e4;
+	--ps1-color: #c6a0f6;
 }
 
 .doom1-theme {
-	--bg-color: #0a0a0a;
+	--bg-color: #21242b;
-	--text-color: #f8f8f2;
+	--text-color: #bbc2cf;
 	--command-color: #50fa7b;
-	--error-color: #ff5555;
+	--error-color: #da8548;
-	--directory-color: #8be9fd;
+	--directory-color: #51afef;
+	--ps1-color: #ffa8ff;
+}
+
+.gruvbox-theme {
+	--bg-color: #282828;
+	--text-color: #ebdbb2;
+	--command-color: #b8bb26;
+	--error-color: #fb4934;
+	--directory-color: #83a598;
+	--ps1-color: #d3869b;
+}
+
+.nord-theme {
+	--bg-color: #2e3440;
+	--text-color: #d8dee9;
+	--command-color: #8fbcbb;
+	--error-color: #bf616a;
+	--directory-color: #81a1c1;
+	--ps1-color: #a3be8c;
+}
+
+.dracula-theme {
+	--bg-color: #282a36;
+	--text-color: #f8f8f2;
+	--command-color: #6272a4;
+	--error-color: #ff5555;
+	--directory-color: #bd93f9;
+	--ps1-color: #ff79c6;
 }

static/switch-themes.js

@@ -1,7 +1,7 @@
 document.addEventListener("DOMContentLoaded", function () {
     const input = document.getElementById("command-input");
     const terminal = document.getElementById("terminal");
-    const availableThemes = ["pwny", "light", "catppuccin", "doom1"];
+    const availableThemes = ["pwny", "light", "catppuccin", "doom1", "dracula", "gruvbox", "nord"];
 
     // Load the saved theme from localStorage, defaulting to "pwny"
     let currentTheme = localStorage.getItem("theme") || "pwny";

templates/index.html

@@ -13,17 +13,17 @@
 	<div id="terminal">
 		<span>Current Directory: {{.CurrentDir}}</span>
 		{{range .CommandLog}}
-		<div><span class="command">gommand:$ {{.Command}}</span></div>
+		<div><span class="command">gommand</span><span class="ps1">$</span> {{.Command}}</div>
 		{{if .Output}}
 		<div>{{.Output}}</div>
 		{{end}}
 		{{if .Error}}
-		<div class="error">{{.Error}}</div>
+		<div class="error"><span class="error">{{.Error}}</span></div>
 		{{end}}
 		{{end}}
 		<form method="POST" autocomplete="off">
 			<div style="display: flex; align-items: center;">
-				<span class="command">{{.CurrentUsername}}:<span class="directory">{{.CurrentDir}}</span>$ </span>
+				<span class="command">{{.CurrentUsername}}<span class="ps1">@</span>{{.Hostname}}<span class="ps1">:</span><span class="directory">{{.CurrentDir}}</span><span class="ps1">$</span> </span>
 				<input id="command-input" type="text" name="command" placeholder="Type a command here..." autofocus required>
 			</div>
 		</form>