forked from snxraven/ravenscott-blog
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">
|
||||
<!-- Custom 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="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<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>
|
||||
|
||||
<body class="bg-dark text-white">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user