update AI page
This commit is contained in:
Raven Scott
parent
a5cb7efff1
commit
e745cc0cff
247
public/css/chat.css
Normal file
247
public/css/chat.css
Normal file
@ -0,0 +1,247 @@
|
|||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #121212;
|
||||||
|
color: white;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-dark {
|
||||||
|
background-color: #121212 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
background-color: #1e1e1e;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages {
|
||||||
|
flex-grow: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #2e2e2e;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
margin-top: 10px;
|
||||||
|
text-align: center;
|
||||||
|
/* Center the text content */
|
||||||
|
display: flex;
|
||||||
|
/* Make sure the alert is a flex container */
|
||||||
|
justify-content: center;
|
||||||
|
/* Center flex items horizontally */
|
||||||
|
align-items: center;
|
||||||
|
/* Center flex items vertically (if needed) */
|
||||||
|
}
|
||||||
|
|
||||||
|
body,
|
||||||
|
.container {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Success Alert - Blue Theme */
|
||||||
|
.alert-success {
|
||||||
|
background-color: #007bff;
|
||||||
|
/* Blue background similar to your button */
|
||||||
|
color: white;
|
||||||
|
/* White text */
|
||||||
|
border: none;
|
||||||
|
/* Remove border */
|
||||||
|
padding: 10px 20px;
|
||||||
|
/* Padding for spacing */
|
||||||
|
border-radius: 5px;
|
||||||
|
/* Rounded corners */
|
||||||
|
text-align: center;
|
||||||
|
/* Center text */
|
||||||
|
display: flex;
|
||||||
|
/* Flex layout */
|
||||||
|
justify-content: center;
|
||||||
|
/* Center horizontally */
|
||||||
|
align-items: center;
|
||||||
|
/* Center vertically */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Error Alert - Maroon Red Theme */
|
||||||
|
.alert-danger {
|
||||||
|
background-color: #800000;
|
||||||
|
/* Maroon red background */
|
||||||
|
color: white;
|
||||||
|
/* White text */
|
||||||
|
border: none;
|
||||||
|
/* Remove border */
|
||||||
|
padding: 10px 20px;
|
||||||
|
/* Padding for spacing */
|
||||||
|
border-radius: 5px;
|
||||||
|
/* Rounded corners */
|
||||||
|
text-align: center;
|
||||||
|
/* Center text */
|
||||||
|
display: flex;
|
||||||
|
/* Flex layout */
|
||||||
|
justify-content: center;
|
||||||
|
/* Center horizontally */
|
||||||
|
align-items: center;
|
||||||
|
/* Center vertically */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Common alert styles */
|
||||||
|
.alert {
|
||||||
|
margin-top: 10px;
|
||||||
|
/* Add margin at the top */
|
||||||
|
font-size: 14px;
|
||||||
|
/* Adjust the font size for readability */
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.user {
|
||||||
|
background-color: #3a3a3a;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.assistant {
|
||||||
|
background-color: #282828;
|
||||||
|
color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
background-color: #2e2e2e;
|
||||||
|
color: white;
|
||||||
|
border-color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control:focus {
|
||||||
|
background-color: #2e2e2e;
|
||||||
|
color: white;
|
||||||
|
border-color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre code {
|
||||||
|
background-color: #1e1e1e;
|
||||||
|
color: #f8f8f2;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: block;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button {
|
||||||
|
background-color: #444;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button:hover {
|
||||||
|
background-color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-area {
|
||||||
|
background-color: #1e1e1e;
|
||||||
|
padding: 10px 20px;
|
||||||
|
z-index: 10;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
flex-shrink: 0;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #121212;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button {
|
||||||
|
background-color: #444;
|
||||||
|
/* Button background color */
|
||||||
|
color: white;
|
||||||
|
/* Button text color */
|
||||||
|
border: none;
|
||||||
|
/* Remove border */
|
||||||
|
cursor: pointer;
|
||||||
|
/* Pointer cursor for interaction */
|
||||||
|
padding: 5px 10px;
|
||||||
|
/* Adjusted padding for smaller size */
|
||||||
|
margin-top: 5px;
|
||||||
|
/* Space at the top */
|
||||||
|
display: inline-block;
|
||||||
|
/* Keep the button in line */
|
||||||
|
font-size: 14px;
|
||||||
|
/* Slightly smaller font size for compactness */
|
||||||
|
width: 147px;
|
||||||
|
/* Prevent the button from stretching */
|
||||||
|
text-align: left;
|
||||||
|
/* Align the text left */
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button:hover {
|
||||||
|
background-color: #555;
|
||||||
|
/* Darker shade on hover */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add animations for the alerts */
|
||||||
|
@keyframes fadeSlideIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeSlideOut {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Success Alert with fade-in and slide-down animation */
|
||||||
|
.alert {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
animation: fadeSlideIn 0.5s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add class for fading out when alert is being removed */
|
||||||
|
.alert.fade-out {
|
||||||
|
animation: fadeSlideOut 0.5s forwards;
|
||||||
|
}
|
||||||
249
views/chat.ejs
249
views/chat.ejs
@ -17,261 +17,14 @@
|
|||||||
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css">
|
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css">
|
||||||
<!-- Custom CSS -->
|
<!-- Custom CSS -->
|
||||||
<link rel="stylesheet" href="<%= process.env.HOST_URL %>/css/styles.css">
|
<link rel="stylesheet" href="<%= process.env.HOST_URL %>/css/styles.css">
|
||||||
|
<link rel="stylesheet" href="<%= process.env.HOST_URL %>/css/chat.css">
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||||
<link rel="manifest" href="/site.webmanifest">
|
<link rel="manifest" href="/site.webmanifest">
|
||||||
<meta name="msapplication-TileColor" content="#da532c">
|
<meta name="msapplication-TileColor" content="#da532c">
|
||||||
<meta name="theme-color" content="#ffffff">
|
<meta name="theme-color" content="#ffffff">
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: #121212;
|
|
||||||
color: white;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-dark {
|
|
||||||
background-color: #121212 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-box {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-grow: 1;
|
|
||||||
background-color: #1e1e1e;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.messages {
|
|
||||||
flex-grow: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: #2e2e2e;
|
|
||||||
border-radius: 5px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert {
|
|
||||||
margin-top: 10px;
|
|
||||||
text-align: center;
|
|
||||||
/* Center the text content */
|
|
||||||
display: flex;
|
|
||||||
/* Make sure the alert is a flex container */
|
|
||||||
justify-content: center;
|
|
||||||
/* Center flex items horizontally */
|
|
||||||
align-items: center;
|
|
||||||
/* Center flex items vertically (if needed) */
|
|
||||||
}
|
|
||||||
|
|
||||||
body,
|
|
||||||
.container {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Success Alert - Blue Theme */
|
|
||||||
.alert-success {
|
|
||||||
background-color: #007bff;
|
|
||||||
/* Blue background similar to your button */
|
|
||||||
color: white;
|
|
||||||
/* White text */
|
|
||||||
border: none;
|
|
||||||
/* Remove border */
|
|
||||||
padding: 10px 20px;
|
|
||||||
/* Padding for spacing */
|
|
||||||
border-radius: 5px;
|
|
||||||
/* Rounded corners */
|
|
||||||
text-align: center;
|
|
||||||
/* Center text */
|
|
||||||
display: flex;
|
|
||||||
/* Flex layout */
|
|
||||||
justify-content: center;
|
|
||||||
/* Center horizontally */
|
|
||||||
align-items: center;
|
|
||||||
/* Center vertically */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Error Alert - Maroon Red Theme */
|
|
||||||
.alert-danger {
|
|
||||||
background-color: #800000;
|
|
||||||
/* Maroon red background */
|
|
||||||
color: white;
|
|
||||||
/* White text */
|
|
||||||
border: none;
|
|
||||||
/* Remove border */
|
|
||||||
padding: 10px 20px;
|
|
||||||
/* Padding for spacing */
|
|
||||||
border-radius: 5px;
|
|
||||||
/* Rounded corners */
|
|
||||||
text-align: center;
|
|
||||||
/* Center text */
|
|
||||||
display: flex;
|
|
||||||
/* Flex layout */
|
|
||||||
justify-content: center;
|
|
||||||
/* Center horizontally */
|
|
||||||
align-items: center;
|
|
||||||
/* Center vertically */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Common alert styles */
|
|
||||||
.alert {
|
|
||||||
margin-top: 10px;
|
|
||||||
/* Add margin at the top */
|
|
||||||
font-size: 14px;
|
|
||||||
/* Adjust the font size for readability */
|
|
||||||
}
|
|
||||||
|
|
||||||
.message.user {
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message.assistant {
|
|
||||||
background-color: #282828;
|
|
||||||
color: #f1f1f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control {
|
|
||||||
background-color: #2e2e2e;
|
|
||||||
color: white;
|
|
||||||
border-color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control:focus {
|
|
||||||
background-color: #2e2e2e;
|
|
||||||
color: white;
|
|
||||||
border-color: #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre code {
|
|
||||||
background-color: #1e1e1e;
|
|
||||||
color: #f8f8f2;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
display: block;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-button {
|
|
||||||
background-color: #444;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 5px;
|
|
||||||
margin-top: 5px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-button:hover {
|
|
||||||
background-color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-area {
|
|
||||||
background-color: #1e1e1e;
|
|
||||||
padding: 10px 20px;
|
|
||||||
z-index: 10;
|
|
||||||
flex-shrink: 0;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
flex-shrink: 0;
|
|
||||||
text-align: center;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #121212;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-button {
|
|
||||||
background-color: #444;
|
|
||||||
/* Button background color */
|
|
||||||
color: white;
|
|
||||||
/* Button text color */
|
|
||||||
border: none;
|
|
||||||
/* Remove border */
|
|
||||||
cursor: pointer;
|
|
||||||
/* Pointer cursor for interaction */
|
|
||||||
padding: 5px 10px;
|
|
||||||
/* Adjusted padding for smaller size */
|
|
||||||
margin-top: 5px;
|
|
||||||
/* Space at the top */
|
|
||||||
display: inline-block;
|
|
||||||
/* Keep the button in line */
|
|
||||||
font-size: 14px;
|
|
||||||
/* Slightly smaller font size for compactness */
|
|
||||||
width: 147px;
|
|
||||||
/* Prevent the button from stretching */
|
|
||||||
text-align: left;
|
|
||||||
/* Align the text left */
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-button:hover {
|
|
||||||
background-color: #555;
|
|
||||||
/* Darker shade on hover */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add animations for the alerts */
|
|
||||||
@keyframes fadeSlideIn {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeSlideOut {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-20px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Success Alert with fade-in and slide-down animation */
|
|
||||||
.alert {
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
animation: fadeSlideIn 0.5s forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add class for fading out when alert is being removed */
|
|
||||||
.alert.fade-out {
|
|
||||||
animation: fadeSlideOut 0.5s forwards;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="bg-dark text-white">
|
<body class="bg-dark text-white">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user