code.ivysaur.me/llamacpphtmld
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: code.ivysaur.me:v1.1.0
Branches Tags
code.ivysaur.me:master
code.ivysaur.me:v1.1.0 code.ivysaur.me:v1.0.0
..
compare: code.ivysaur.me:master
Branches Tags
code.ivysaur.me:master
code.ivysaur.me:v1.1.0 code.ivysaur.me:v1.0.0

3 Commits
v1.1.0 ... master

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
1 changed files with 17 additions and 19 deletions
Expand all files Collapse all files

36
webui.go
View File

@@ -14,8 +14,9 @@ func (this *Application) GET_Root(w http.ResponseWriter, r *http.Request) {
w.Write([]byte(`<!DOCTYPE html> w.Write([]byte(`<!DOCTYPE html>
<html> <html>
<meta charset="UTF-8"> <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"> <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> <title>` + html.EscapeString(AppTitle) + `</title>
<style type="text/css"> <style type="text/css">
html { html {
@@ -25,8 +26,6 @@ html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
position: relative;
} }
.banner { .banner {
height: 48px; height: 48px;
@@ -64,6 +63,12 @@ html, body {
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
vertical-align: middle; vertical-align: middle;
transition: background-color 0.5s ease-out;
}
#state.alert {
background: lightyellow;
transition: initial;
} }
.banner button { .banner button {
float: right; float: right;
@@ -72,23 +77,17 @@ html, body {
margin: 8px 8px 8px 0; margin: 8px 8px 8px 0;
} }
textarea { textarea {
position: absolute; border: 0;
left: 0; margin: 0;
right: 0; height: calc(100% - 64px);
top: 48px; width: calc(100% - 16px);
bottom: 0; padding: 8px 8px 4px 8px;
font-size: 16px; /* Prevent Safari autozoom */
resize: none; resize: none;
outline: none; outline: none;
box-shadow: 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) { @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? ### Human: What is the capital city of New Zealand?
### Assistant:</textarea> ### Assistant:</textarea>
<script type="text/javascript"> <script type="text/javascript">
function main() { function main() {
const conversationID = "` + uuid.New().String() + `"; const conversationID = "` + uuid.New().String() + `";
@@ -182,8 +180,8 @@ function main() {
$main.value += decoder.decode(singleReadResult.value); $main.value += decoder.decode(singleReadResult.value);
$main.scrollTop = $main.scrollHeight; $main.scrollTop = $main.scrollHeight;
$main.className = 'alert'; $state.className = 'alert';
setTimeout(() => { $main.className = ''; }, 1); setTimeout(() => { $state.className = ''; }, 1);
} }