diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/umapyai/chat.html | 145 |
1 files changed, 114 insertions, 31 deletions
diff --git a/src/umapyai/chat.html b/src/umapyai/chat.html index a4cccfb..3953b47 100644 --- a/src/umapyai/chat.html +++ b/src/umapyai/chat.html @@ -3,47 +3,125 @@ <head> <title>umapyai</title> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <style> + html, body { - font-family: Arial, sans-serif; - max-width: 66vw; - margin: 1vh auto; - background: #131313; - color: #ddd; + height: 100%; + margin: 0; + padding: 0; } - #chatbox { - height: 66vh; - overflow-y: scroll; - background: #1e1d1e; - border: 1px solid #404040; - margin-bottom: 1vh; - padding: 1vh; + body { + min-height: 100vh; + background: #323232; + color: #fff; + font-family: + system-ui, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + "Helvetica Neue", + Arial, + sans‑serif; + display: flex; + flex-direction: column; + height: 100vh; + } + + input, + button { + font-family: inherit; } - .user { - font-weight: bold; + #chatbox { + flex: 1 1 0; + overflow-y: auto; + padding: 1em; + box-sizing: border-box; + max-width: 50vw; + width: 100%; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: calc(22px / 2); + padding-bottom: 5.5em; } - .ai { + .bubble { + max-width: 50vw; + padding: 1em; + border-radius: 22px; + margin: 0; + line-height: 1.5; + box-shadow: 0 2px 8px 0 rgba(20, 30, 40, 0.08); white-space: pre-wrap; } + .bubble.user { + background: #4d4d4d; + color: #fff; + border-bottom-right-radius: calc(22px / 4); + } + .source { - font-size: 0.9em; + font-size: 0.95em; + color: #cdcdcd; + margin-top: 0.5em; + } + + #input-bar { + width: 100%; + position: fixed; + left: 0; + bottom: 0; + padding: 1em 0 1em 0; + display: flex; + justify-content: center; + z-index: 100; + } + + #prompt-box { + max-width: 50vw; + width: 100%; + display: flex; + gap: calc(22px / 2); } #prompt { - width: 33vw; - font-size: 1.1em; - background: #363636; - color: #ddd; + flex: 1; + font-size: 1em; + background: #3c3c3c; + color: #fff; + border: 1px solid #505050; + border-radius: 22px; + padding: 1em; + outline: none; + resize: none; + box-sizing: border-box; } #send-button { - font-size: 1.1em; - background: #363636; - color: #ddd; + font-size: 1em; + background: #fff; + color: #212121; + border: none; + border-radius: 22px; + padding: 0 22px; + cursor: pointer; + } + + @media (max-width: 700px) { + #chatbox, + #prompt-box { + max-width: 90vw; + } + + .bubble { + max-width: 90vw; + } } </style> </head> @@ -51,13 +129,18 @@ <body> <div id="chatbox"></div> - <input - id="prompt" - placeholder="Ask your Uma Musume build question ..." - autocomplete="off" - /> + <div id="input-bar"> + <div id="prompt-box"> + <input + id="prompt" + placeholder="Ask anything Uma Musume" + autocomplete="off" + autofocus + /> - <button id="send-button">Send</button> + <button id="send-button">Send</button> + </div> + </div> <script> window.onload = function () { @@ -72,10 +155,10 @@ for (let message of chat) { if (message.user) chatbox.innerHTML += - "<div class='user'>> " + message.text + "</div>"; + "<div class='bubble user'>" + message.text + "</div>"; else chatbox.innerHTML += - "<div class='ai'>" + + "<div class='bubble ai'>" + message.text + "<div class='source'>" + message.sources + |