Compare commits

..

9 Commits

Author SHA1 Message Date
bf7a989b75 feat: gamer group chat 2025-05-01 00:46:44 +01:00
56eb1067d1 chore: add mod_wsgi, flask-cors packages 2025-05-01 00:46:44 +01:00
52259b64f7 chore: use older version of python
necessary for my crusty old debian 11 vps
2025-05-01 00:46:44 +01:00
a9845b9296 feat: win/loss conditions 2025-05-01 00:46:44 +01:00
5b1783a71e feat: split response and score generation 2025-05-01 00:46:44 +01:00
f4abc6dc90 feat: conversation history 2025-05-01 00:46:44 +01:00
a07e8b78c0 feat: update input style 2025-05-01 00:46:42 +01:00
e525120a15 feat: update input style 2025-05-01 00:44:46 +01:00
50a2f0ee69 style: imply speech bubbles 2025-04-26 21:08:26 +01:00
3 changed files with 59 additions and 41 deletions

View File

@ -3,6 +3,7 @@
<head> <head>
<link rel="stylesheet" href="styles.css"/> <link rel="stylesheet" href="styles.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head> </head>
<body> <body>
@ -19,9 +20,11 @@
<p id="typing-indicator">NAME is typing...</p> <p id="typing-indicator">NAME is typing...</p>
<div id="textbox"> <div id="input-panel-container">
<input id="textbox-input" class="rounded-rectangle" type="text" onkeydown="pressSendButton()"></input> <div id="input-panel" class="rounded-rectangle">
<button class="rounded-rectangle" onclick="pressSendButton()">send</button> <input id="textbox-input" type="text" onkeydown="pressSendButton()"></input>
<button onclick="pressSendButton()"><i class="fa fa-arrow-right" style="font-size:2em"></i></button>
</div>
</div> </div>
</div> </div>

View File

@ -11,7 +11,7 @@ class Conversation {
} }
setInteractive(isInteractive) { setInteractive(isInteractive) {
const children = document.getElementById("textbox").children; const children = document.getElementById("input-panel").children;
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
children[i].disabled = !isInteractive; children[i].disabled = !isInteractive;
} }

View File

@ -11,6 +11,8 @@
--light-cyan: #e0fbfc; --light-cyan: #e0fbfc;
--buff: #edb88b; --buff: #edb88b;
--eeriee-black: #1d201f; --eeriee-black: #1d201f;
--clear: #00000000;
} }
html { html {
@ -135,6 +137,8 @@ h1 {
color: var(--light-cyan); color: var(--light-cyan);
float: left; float: left;
border-bottom-left-radius: 0;
} }
.message-content.theirs h3 { .message-content.theirs h3 {
@ -154,6 +158,8 @@ h1 {
right: 0; right: 0;
margin-bottom: 0.5em; margin-bottom: 0.5em;
border-bottom-right-radius: 0;
} }
.ours .message-text { .ours .message-text {
@ -167,11 +173,11 @@ h1 {
} }
ul { ul {
margin: 0;
padding-top: 1em;
padding-right: 2em;
height: 100%;
overflow: scroll; overflow: scroll;
/*height:100%;*/
flex-grow: 1;
margin: 0 .5em;
padding: .5em 0;
list-style: none; list-style: none;
} }
@ -188,14 +194,52 @@ li.message {
margin-bottom: 1em; margin-bottom: 1em;
} }
#textbox { #input-panel-container {
width: 100%; padding: 0 1em 1em 1em;
}
#input-panel {
display: flex; display: flex;
bottom: 0; justify-content: space-between;
padding: 0;
z-index: 1; z-index: 1;
/*background-color: var(--light-cyan);*/ background-color: var(--light-cyan);
border-radius: 100vw;
}
#input-panel input {
width: 100%;
color: var(--onyx);
background-color: rgba(0,0,0,0);
border-style: none;
padding: 0 2em;
z-index: 1;
<<<<<<< HEAD
font-size: 1em;
}
#input-panel input:focus {
outline: none;
=======
>>>>>>> 021d12d (feat: update input style)
}
button {
color: var(--vermilion);
background-color: #00000000;
border-style: none;
border-radius: 100% !important;
padding: 1em !important;
float: right;
}
button:hover {
color: var(--light-cyan);
background-color: var(--onyx);
} }
#typing-indicator { #typing-indicator {
@ -209,35 +253,6 @@ li.message {
bottom: 3em; bottom: 3em;
} }
#textbox input {
flex-grow: 4;
color: var(--onyx);
background-color: var(--light-cyan);
margin: 0.5em;
left: 1em;
font-size: 1em;
z-index: 1;
}
button {
background-color: var(--vermilion);
color: var(--light-cyan);
margin: 0.5em;
padding: 0;
flex-grow: 1;
right: 0;
font-size: 1em;
}
button:hover {
color: var(--light-cyan);
background-color: var(--onyx);
}
.message-status { .message-status {
color: var(--onyx); color: var(--onyx);