webui: prevent zooming into the textarea

webui: add svg favicon
webui: fix layout for firefox, flash the message only
2023-04-09 18:46:11 +12:00 · 2023-04-09 18:41:21 +12:00 · 2023-04-09 18:41:13 +12:00
1 changed files with 17 additions and 19 deletions
--- a/webui.go
+++ b/webui.go
@@ -14,8 +14,9 @@ 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, maximum-scale=1">
 	<meta name="theme-color" content="#040c3a">
+	<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦙</text></svg>">
 	<title>` + html.EscapeString(AppTitle) + `</title>
 	<style type="text/css">
 html {
@@ -25,8 +26,6 @@ html, body {
 	margin: 0;
 	padding: 0;
 	height: 100%;
-	
-	position: relative;
 }
 .banner {
 	height: 48px;
@@ -64,6 +63,12 @@ html, body {
 	font-size: 12px;
 	line-height: 18px;	
 	vertical-align: middle;
+	
+	transition: background-color 0.5s ease-out;
+}
+#state.alert {
+	background: lightyellow;
+	transition: initial;
 }
 .banner button {
 	float: right;
@@ -72,23 +77,17 @@ html, body {
    margin: 8px 8px 8px 0;
 }
 textarea {
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: 48px;
-	bottom: 0;
+	border: 0;
+	margin: 0;
+	height: calc(100% - 64px);
+	width: calc(100% - 16px);
+	padding: 8px 8px 4px 8px;
+	
+	font-size: 16px; /* Prevent Safari autozoom */
 	
 	resize: none;
 	outline: none;
 	box-shadow: none;
-	
-	border: 0;
-	background: #fff;
-	transition: background-color 0.5s ease-out;
-}
-textarea.alert {
-	background: lightyellow;
-	transition: initial;
 }

@media screen and (max-width: 400px) {
@@ -115,7 +114,6 @@ The assistant gives helpful, detailed, and polite answers to the human's questio

 ### Human: What is the capital city of New Zealand?
 ### Assistant:</textarea>
-		
 		<script type="text/javascript">
 function main() {
 	const conversationID = "` + uuid.New().String() + `";
@@ -182,8 +180,8 @@ function main() {
 				$main.value += decoder.decode(singleReadResult.value);
 				$main.scrollTop = $main.scrollHeight;
 				
-				$main.className = 'alert';
-				setTimeout(() => { $main.className = ''; }, 1);
+				$state.className = 'alert';
+				setTimeout(() => { $state.className = ''; }, 1);
 				
 			}
Author	SHA1	Message	Date
mappu	252c809f92	webui: prevent zooming into the textarea	2023-04-09 18:46:11 +12:00
mappu	f32864382f	webui: add svg favicon	2023-04-09 18:41:21 +12:00
mappu	2117d030d0	webui: fix layout for firefox, flash the message only	2023-04-09 18:41:13 +12:00