From fac1a5b484c53999e2466f4485e525d972a9bf26 Mon Sep 17 00:00:00 2001
From: mappu <mappu04@gmail.com>
Date: Sun, 9 Apr 2023 11:11:01 +1200
Subject: [PATCH] webui: new style

---
 webui.go | 105 +++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 86 insertions(+), 19 deletions(-)
diff --git a/webui.go b/webui.go
index ac940c4..0667654 100644
--- a/webui.go
+++ b/webui.go
@@ -14,20 +14,75 @@ func (this *Application) GET_Root(w http.ResponseWriter, r *http.Request) {
 	w.Write([]byte(`<!DOCTYPE html>
 <html>
 	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="theme-color" content="#040c3a">
 	<title>` + html.EscapeString(AppTitle) + `</title>
 	<style type="text/css">
 html {
 	font-family: sans-serif;
 }
-textarea {
-	border-radius: 4px;
-	display: block;
-	min-width: 100%;
-	width: 100%;
-	max-width: 100%;
-	min-height: 100px;
+html, body {
+	margin: 0;
+	padding: 0;
+	height: 100%;
 	
+	position: relative;
+}
+.banner {
+	height: 48px;
+	background: linear-gradient(#06638d, #040c3a);
+	color: white;
+	
+	position: relative;
+	
+	line-height: 48px;
+	vertical-align: middle;
+}
+.logo {
+	font-size: 18px;
+	padding-left: 8px;
+}
+.state-wrapper {
+	position: absolute;
+	
+	top: 0; left: 0; right: 0; bottom: 0;
+	pointer-events: none;
+	
+	text-align: center;
+}
+#state {
+	display: none; /* inline-block; */
+	
+	background: white;
+	color: black;
+	
+	border: 2px solid black;
+	margin: 0 auto;
+	padding: 2px 4px;
+	opacity: 0.75;
+	
+	font-size: 12px;
+	line-height: 18px;	
+	vertical-align: middle;
+}
+.banner button {
+	float: right;
+	
+    height: 32px;
+    margin: 8px 8px 8px 0;
+}
+textarea {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 48px;
+	bottom: 0;
+	
+	resize: none;
+	outline: none;
+	box-shadow: none;
+	
+	border: 0;
 	background: #fff;
 	transition: background-color 0.5s ease-out;
 }
@@ -35,21 +90,31 @@ textarea.alert {
 	background: lightyellow;
 	transition: initial;
 }
-button {
-	margin-top: 8px;
-	padding: 4px 6px;
+
+@media screen and (max-width: 400px) {
+	.logo {
+		font-size: 0;
+	}
+	.state-wrapper {
+		text-align: left;
+		margin-left: 8px;
+	}
 }
 	</style>
 	<body>
-		<h2>🦙 ` + html.EscapeString(AppTitle) + `</h2>
+		<div class="banner">
+			<span class="logo">🦙 ` + html.EscapeString(AppTitle) + `</span>
+			<div class="state-wrapper">
+				<span id="state"></span>	
+			</div>
+			<button id="generate">▶️ Generate</button>
+			<button id="interrupt" disabled>⏸️ Interrupt</button>
+		</div>
 		<textarea id="main" autofocus>A chat between a curious human and an artificial intelligence assistant.
 The assistant gives helpful, detailed, and polite answers to the human's questions.
 
 ### Human: What is the capital city of New Zealand?
 ### Assistant:</textarea>
-		<button id="generate">▶️ Generate</button>
-		<button id="interrupt" disabled>⏸️ Interrupt</button>
-		<span id="state"></span>
 		
 		<script type="text/javascript">
 function main() {
@@ -85,7 +150,8 @@ function main() {
 			};
 			$interrupt.addEventListener('click', doInterrupt);
 			
-			state.textContent = "Waiting in queue..."
+			$state.style.display = "inline-block";
+			$state.textContent = "Waiting in queue..."
 			
 			const response = await fetch("/api/v1/generate", {
 				method: "POST",
@@ -100,7 +166,7 @@ function main() {
 				})
 			});
 			
-			state.textContent = "The AI is reading your text so far..."
+			$state.textContent = "The AI is reading your text so far..."
 			
 			const reader = response.body.getReader();	
 			const decoder = new TextDecoder();
@@ -121,11 +187,12 @@ function main() {
 				
 			}
 			
-			state.textContent = ""
+			$state.style.display = "none";
+			$state.textContent = ""
 			
 		} catch (ex) {
 			
-			state.textContent = "Error";			
+			$state.textContent = "Error";
 			alert(
 				"Error processing the request: " + 
 				(ex instanceof Error ? ex.message : JSON.stringify(ex))
