snxraven/ravenscott-blog
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update AI page

Browse Source
This commit is contained in:
Raven Scott 2024-10-02 04:43:43 -04:00
parent a5cb7efff1
commit e745cc0cff
2 changed files with 248 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

247
public/css/chat.css Normal file
View 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
View File

@ -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">