Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6589d76d5f | |||
| 7765d25835 |
@ -6,7 +6,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="side-panel"></div>
|
<!--<div id="side-panel"></div>-->
|
||||||
|
|
||||||
<div id="main-panel">
|
<div id="main-panel">
|
||||||
|
|
||||||
@ -21,7 +21,7 @@
|
|||||||
|
|
||||||
<div id="textbox">
|
<div id="textbox">
|
||||||
<input id="textbox-input" class="rounded-rectangle" type="text" onkeydown="pressSendButton()"></input>
|
<input id="textbox-input" class="rounded-rectangle" type="text" onkeydown="pressSendButton()"></input>
|
||||||
<button class="rounded-rectangle" onclick="pressSendButton()">send</button>
|
<button class="rounded-rectangle" onclick="pressSendButton()">envoyer</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
178
main.js
178
main.js
@ -5,7 +5,7 @@ var conversation = null;
|
|||||||
class Conversation {
|
class Conversation {
|
||||||
constructor(name) {
|
constructor(name) {
|
||||||
this.messages = [];
|
this.messages = [];
|
||||||
this.name = romanize(name);
|
this.name = name;
|
||||||
this.score = 1.0;
|
this.score = 1.0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -27,71 +27,26 @@ class Conversation {
|
|||||||
sendUserMessage(text) {
|
sendUserMessage(text) {
|
||||||
|
|
||||||
const message = new UserMessage(text);
|
const message = new UserMessage(text);
|
||||||
message.updateStatus("sent");
|
message.updateStatus("envoyé");
|
||||||
|
|
||||||
const url = 'http://192.168.1.115:5000/chat';
|
|
||||||
const data = text;
|
|
||||||
|
|
||||||
fetch(url, {
|
|
||||||
method: 'POST', // Corresponds to -X POST
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'text/plain' // Corresponds to -H "Content-Type: text/plain"
|
|
||||||
},
|
|
||||||
body: data // Corresponds to -d "..."
|
|
||||||
})
|
|
||||||
.then(response => {
|
|
||||||
// Check if the request was successful (status code 2xx)
|
|
||||||
if (!response.ok) {
|
|
||||||
// If not successful, throw an error to be caught by .catch()
|
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
|
||||||
}
|
|
||||||
// Get the response body as text
|
|
||||||
return response.text();
|
|
||||||
})
|
|
||||||
.then(response => {
|
|
||||||
// TODO: check JSON
|
|
||||||
const json = JSON.parse(response);
|
|
||||||
|
|
||||||
// Success!
|
|
||||||
var messageText = json.message;
|
|
||||||
|
|
||||||
console.log(json);
|
|
||||||
var score = parseFloat(json.score);
|
|
||||||
this.score += score;
|
|
||||||
console.log(this.score);
|
|
||||||
if (this.score > 2.0)
|
|
||||||
{
|
|
||||||
messageText = "shit they're here D:";
|
|
||||||
this.setInteractive(false);
|
|
||||||
}
|
|
||||||
else if (this.score < 0.0)
|
|
||||||
{
|
|
||||||
messageText = "shit u won :D";
|
|
||||||
this.setInteractive(false);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
messageText = json.message;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.messages.push(new AgentMessage(messageText));
|
|
||||||
this.render();
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
// Handle any errors that occurred during the fetch
|
|
||||||
console.error('Error during fetch:', error);
|
|
||||||
alert(`Error fetching data: ${error.message}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
message.updateStatus("delivered");
|
message.updateStatus("livré");
|
||||||
this.render();
|
this.render();
|
||||||
//setTimeout(() => {
|
setTimeout(() => {
|
||||||
// message.updateStatus("read");
|
message.updateStatus("lu");
|
||||||
// this.render();
|
this.render();
|
||||||
//}, 5000);
|
setTimeout(()=> {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.messages.push(new AgentMessage("merde alors"));
|
||||||
|
this.render();
|
||||||
|
}, 2000);
|
||||||
|
}, 500);
|
||||||
|
}, 3000);
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
//this.messages.push(message);
|
||||||
this.messages.push(message);
|
this.messages.push(message);
|
||||||
|
//this.messages.push(new AgentMessage(messageText));
|
||||||
|
this.render();
|
||||||
}
|
}
|
||||||
|
|
||||||
// update the current HTML based on messages
|
// update the current HTML based on messages
|
||||||
@ -109,7 +64,7 @@ class Conversation {
|
|||||||
|
|
||||||
// if we haven't found a read message yet, let's check to see if we have now
|
// if we haven't found a read message yet, let's check to see if we have now
|
||||||
if (!foundReadMessage) {
|
if (!foundReadMessage) {
|
||||||
if (message.status == "read") {
|
if (message.status == "lu") {
|
||||||
foundReadMessage = true;
|
foundReadMessage = true;
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
@ -134,12 +89,6 @@ function getMessageList() {
|
|||||||
return document.getElementById("messages");
|
return document.getElementById("messages");
|
||||||
}
|
}
|
||||||
|
|
||||||
function romanize(text) {
|
|
||||||
text = text.replaceAll('u', 'v');
|
|
||||||
text = text.replaceAll('U', 'V');
|
|
||||||
return text;
|
|
||||||
}
|
|
||||||
|
|
||||||
class AgentMessage {
|
class AgentMessage {
|
||||||
constructor(text, senderName) {
|
constructor(text, senderName) {
|
||||||
this.text = text;
|
this.text = text;
|
||||||
@ -160,13 +109,13 @@ class AgentMessage {
|
|||||||
|
|
||||||
if (this.senderName) {
|
if (this.senderName) {
|
||||||
const nameElem = document.createElement("h3");
|
const nameElem = document.createElement("h3");
|
||||||
nameElem.innerHTML = romanize(this.senderName);
|
nameElem.innerHTML = this.senderName;
|
||||||
contentElem.appendChild(nameElem);
|
contentElem.appendChild(nameElem);
|
||||||
}
|
}
|
||||||
|
|
||||||
const textElem = document.createElement("span");
|
const textElem = document.createElement("span");
|
||||||
textElem.className = "message-text";
|
textElem.className = "message-text";
|
||||||
textElem.innerHTML = romanize(this.text);
|
textElem.innerHTML = this.text;
|
||||||
contentElem.appendChild(textElem);
|
contentElem.appendChild(textElem);
|
||||||
|
|
||||||
return liElem;
|
return liElem;
|
||||||
@ -176,7 +125,7 @@ class AgentMessage {
|
|||||||
class UserMessage {
|
class UserMessage {
|
||||||
constructor(text) {
|
constructor(text) {
|
||||||
this.createdTime = Date.now();
|
this.createdTime = Date.now();
|
||||||
this.text = romanize(text);
|
this.text = text;
|
||||||
this.status = "";
|
this.status = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -212,7 +161,7 @@ class UserMessage {
|
|||||||
|
|
||||||
class SystemMessage {
|
class SystemMessage {
|
||||||
constructor(text) {
|
constructor(text) {
|
||||||
this.text = romanize(text);
|
this.text = text;
|
||||||
}
|
}
|
||||||
|
|
||||||
getIsOurs() {
|
getIsOurs() {
|
||||||
@ -279,7 +228,7 @@ function pressSendButton() {
|
|||||||
|
|
||||||
if (event.type == "keydown" && event.key != "Enter")
|
if (event.type == "keydown" && event.key != "Enter")
|
||||||
{
|
{
|
||||||
textBox.value = romanize(text);
|
textBox.value = text;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -303,42 +252,6 @@ function onMessageSent(message) {
|
|||||||
updateChat(message);
|
updateChat(message);
|
||||||
}
|
}
|
||||||
|
|
||||||
// probably a bit hacky! but this saves having to do like, state or something in CSS?
|
|
||||||
// which probably is possible and probably would be the better way to do it, but that
|
|
||||||
// sounds like a bunch of learning i'm not SUPER in the mood for
|
|
||||||
function setVisibleOnMobile(element, isVisible) {
|
|
||||||
let classes = element.className.split().filter(c => c != "");
|
|
||||||
const invisibleClass = "invisible-on-mobile";
|
|
||||||
const visibleClass = "visible";
|
|
||||||
|
|
||||||
if (isVisible && !classes.includes(visibleClass)) {
|
|
||||||
const idx = classes.indexOf(invisibleClass);
|
|
||||||
if (idx != -1) {
|
|
||||||
classes.splice(idx, 1);
|
|
||||||
}
|
|
||||||
classes.push(visibleClass);
|
|
||||||
} else if (!isVisible && !classes.includes(invisibleClass)) {
|
|
||||||
const idx = classes.indexOf(visibleClass);
|
|
||||||
if (idx != -1) {
|
|
||||||
classes.splice(idx, 1);
|
|
||||||
}
|
|
||||||
classes.push(invisibleClass);
|
|
||||||
}
|
|
||||||
|
|
||||||
element.className = classes.join(" ");
|
|
||||||
}
|
|
||||||
|
|
||||||
function showSidePanel() {
|
|
||||||
// this function can only be called on mobile. the main conversation should be
|
|
||||||
// hidden and the side conversations panel should take up the whole screen.
|
|
||||||
|
|
||||||
const mainPanel = document.getElementById("main-panel");
|
|
||||||
const conversationListElem = document.getElementById("side-panel");
|
|
||||||
|
|
||||||
setVisibleOnMobile(mainPanel, false);
|
|
||||||
setVisibleOnMobile(conversationListElem, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
function readConversationJson(path, callback) {
|
function readConversationJson(path, callback) {
|
||||||
fetch(path)
|
fetch(path)
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
@ -350,10 +263,6 @@ function showConversation(path) {
|
|||||||
const mainPanel = document.getElementById("main-panel");
|
const mainPanel = document.getElementById("main-panel");
|
||||||
const conversationListElem = document.getElementById("side-panel");
|
const conversationListElem = document.getElementById("side-panel");
|
||||||
|
|
||||||
setVisibleOnMobile(mainPanel, true);
|
|
||||||
setVisibleOnMobile(conversationListElem, false);
|
|
||||||
|
|
||||||
|
|
||||||
readConversationJson(path, json => {
|
readConversationJson(path, json => {
|
||||||
conversation = new Conversation(json.title);
|
conversation = new Conversation(json.title);
|
||||||
const jsonMessages = json.messages;
|
const jsonMessages = json.messages;
|
||||||
@ -369,7 +278,7 @@ function showConversation(path) {
|
|||||||
initialMessages.push(message);
|
initialMessages.push(message);
|
||||||
} else if (data.character == 0) {
|
} else if (data.character == 0) {
|
||||||
const message = new UserMessage(text);
|
const message = new UserMessage(text);
|
||||||
message.updateStatus("read");
|
message.updateStatus("lu");
|
||||||
initialMessages.push(message);
|
initialMessages.push(message);
|
||||||
} else {
|
} else {
|
||||||
const message = participants.length > 2
|
const message = participants.length > 2
|
||||||
@ -385,46 +294,7 @@ function showConversation(path) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function addConversationPreview(path) {
|
|
||||||
const listRoot = document.getElementById("side-panel");
|
|
||||||
|
|
||||||
readConversationJson(path, json => {
|
|
||||||
const messages = json.messages;
|
|
||||||
|
|
||||||
const elem = document.createElement("div");
|
|
||||||
elem.onclick = () => showConversation(path);
|
|
||||||
elem.className = "conversation";
|
|
||||||
|
|
||||||
const headerElem = document.createElement("h2");
|
|
||||||
headerElem.innerHTML = romanize(json.title);
|
|
||||||
elem.appendChild(headerElem);
|
|
||||||
|
|
||||||
const previewElem = document.createElement("span");
|
|
||||||
previewElem.innerHTML = messages.length > 0 ? romanize(messages[messages.length - 1].text) : "";
|
|
||||||
elem.appendChild(previewElem);
|
|
||||||
|
|
||||||
listRoot.appendChild(elem);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function populateConversationList() {
|
|
||||||
const conversationFiles = [
|
|
||||||
"caesar.json",
|
|
||||||
"lucius.json",
|
|
||||||
"ides-of-march.json",
|
|
||||||
"lepidus.json",
|
|
||||||
"publius.json",
|
|
||||||
"sextus.json"
|
|
||||||
];
|
|
||||||
|
|
||||||
for (let i = 0; i < conversationFiles.length; i++) {
|
|
||||||
const path = conversationFiles[i];
|
|
||||||
addConversationPreview(path);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setTypingIndicator(false);
|
setTypingIndicator(false);
|
||||||
populateConversationList();
|
|
||||||
|
|
||||||
showConversation("ides-of-march.json");
|
showConversation("sncf.json");
|
||||||
|
|
||||||
|
|||||||
12
sncf.json
Normal file
12
sncf.json
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"title": "SNCF Conrad",
|
||||||
|
"interactive": true,
|
||||||
|
"characters": [
|
||||||
|
"you",
|
||||||
|
"SNCF Conrad"
|
||||||
|
],
|
||||||
|
"messages":
|
||||||
|
[
|
||||||
|
]
|
||||||
|
}
|
||||||
98
styles.css
98
styles.css
@ -1,16 +1,17 @@
|
|||||||
:root {
|
:root {
|
||||||
--dark-purple: #271f30;
|
--blanc: #fff;
|
||||||
--light-red: #ff686b;
|
--gris: #666;
|
||||||
--eggshell: #dfe2cf;
|
--noir: #000;
|
||||||
--ucla-blue: #4d7298;
|
|
||||||
--robin-egg-blue: #66ced6;
|
|
||||||
|
|
||||||
--vermilion: #ef3e36;
|
--bleu: #0055a4;
|
||||||
--lapis-lazuli: #235789;
|
--rouge: #e1000f;
|
||||||
--onyx: #383d3b;
|
|
||||||
--light-cyan: #e0fbfc;
|
--rose-de-l-erreur: #f0f;
|
||||||
--buff: #edb88b;
|
|
||||||
--eeriee-black: #1d201f;
|
--navy: #0b131f;
|
||||||
|
--bluegrey: #232b35;
|
||||||
|
--sky: #7bbffd;
|
||||||
|
--bluewhite: #ebebec;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
@ -22,13 +23,14 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: var(--buff);
|
background-color: var(--navy);
|
||||||
}
|
}
|
||||||
|
|
||||||
#side-panel {
|
#side-panel {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: none;
|
color: var(--noir);
|
||||||
color: var(--onyx);
|
display: block;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header button {
|
#header button {
|
||||||
@ -37,11 +39,6 @@ body {
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
#side-panel {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#side-panel.invisible-on-mobile {
|
#side-panel.invisible-on-mobile {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -49,10 +46,10 @@ body {
|
|||||||
/* on desktop only */
|
/* on desktop only */
|
||||||
@media only screen and (min-width: 768px) {
|
@media only screen and (min-width: 768px) {
|
||||||
#side-panel {
|
#side-panel {
|
||||||
display: block;
|
min-width: 300px;
|
||||||
width: auto;
|
width: auto;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
border-right: 3px solid var(--onyx);
|
border-right: 3px solid var(--noir);
|
||||||
}
|
}
|
||||||
|
|
||||||
#side-panel.invisible-on-mobile {
|
#side-panel.invisible-on-mobile {
|
||||||
@ -65,19 +62,13 @@ body {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#side-panel .conversation {
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#side-panel .conversation {
|
#side-panel .conversation {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
border-bottom: solid var(--onyx) 3px;
|
border-bottom: solid var(--noir) 3px;
|
||||||
color: var(--onyx);
|
color: var(--onyx);
|
||||||
padding: .5em;
|
|
||||||
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -85,8 +76,8 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#side-panel .conversation:hover {
|
#side-panel .conversation:hover {
|
||||||
background-color: var(--vermilion);
|
background-color: var(--bleu);
|
||||||
color: var(--light-cyan);
|
color: var(--blanc);
|
||||||
}
|
}
|
||||||
|
|
||||||
#side-panel h2 {
|
#side-panel h2 {
|
||||||
@ -96,14 +87,14 @@ body {
|
|||||||
#header {
|
#header {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
border-bottom: solid var(--onyx) 3px;
|
border-bottom: none var(--navy) 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-panel {
|
#main-panel {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
width: calc(100% - 300px);
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#page {
|
#page {
|
||||||
@ -112,7 +103,7 @@ body {
|
|||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: var(--onyx);
|
color: var(--bluewhite);
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -120,9 +111,9 @@ h1 {
|
|||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
border: black;
|
border: black;
|
||||||
border-style: none;
|
border-style: none;
|
||||||
border-radius: 1em;
|
border-radius: 1.5em;
|
||||||
|
|
||||||
padding: .6em .8em;
|
padding: 1em 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-content {
|
.message-content {
|
||||||
@ -131,8 +122,8 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.message-content.theirs {
|
.message-content.theirs {
|
||||||
background-color: var(--onyx);
|
background-color: var(--bluegrey);
|
||||||
color: var(--light-cyan);
|
color: var(--bluewhite);
|
||||||
|
|
||||||
float: left;
|
float: left;
|
||||||
|
|
||||||
@ -140,7 +131,7 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.message-content.theirs h3 {
|
.message-content.theirs h3 {
|
||||||
color: var(--buff);
|
color: var(--blanc);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
font-size: .85em;
|
font-size: .85em;
|
||||||
@ -152,7 +143,7 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.message-content.ours {
|
.message-content.ours {
|
||||||
background-color: var(--vermilion);
|
background-color: var(--sky);
|
||||||
|
|
||||||
right: 0;
|
right: 0;
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
@ -161,11 +152,11 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ours .message-text {
|
.ours .message-text {
|
||||||
color: var(--light-cyan);
|
color: var(--bluegrey);
|
||||||
}
|
}
|
||||||
|
|
||||||
.system-message {
|
.system-message {
|
||||||
color: var(--onyx);
|
color: var(--gris);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -203,7 +194,7 @@ li.message {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#typing-indicator {
|
#typing-indicator {
|
||||||
color: var(--eggshell);
|
color: var(--bluewhite);
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
@ -216,8 +207,11 @@ li.message {
|
|||||||
#textbox input {
|
#textbox input {
|
||||||
flex-grow: 4;
|
flex-grow: 4;
|
||||||
|
|
||||||
color: var(--onyx);
|
color: var(--bluewhite);
|
||||||
background-color: var(--light-cyan);
|
background-color: var(--bluegrey);
|
||||||
|
border-color: var(--bluegrey);
|
||||||
|
border-width: 3px;
|
||||||
|
border-style: solid;
|
||||||
|
|
||||||
margin: 0.5em;
|
margin: 0.5em;
|
||||||
left: 1em;
|
left: 1em;
|
||||||
@ -228,23 +222,29 @@ li.message {
|
|||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: var(--vermilion);
|
background-color: var(--sky);
|
||||||
color: var(--light-cyan);
|
color: var(--bluegrey);
|
||||||
|
|
||||||
margin: 0.5em;
|
margin: 0.5em;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
right: 0;
|
right: 0;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
border-width: 3px;
|
||||||
|
border-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
color: var(--light-cyan);
|
color: var(--bluewhite);
|
||||||
background-color: var(--onyx);
|
background-color: var(--bluegrey);
|
||||||
|
border-color: var(--bluegrey);
|
||||||
|
border-width: 3px;
|
||||||
|
padding: 0;
|
||||||
|
border-style: solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-status {
|
.message-status {
|
||||||
color: var(--onyx);
|
color: var(--bluewhite);
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -1.75em;
|
bottom: -1.75em;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user