From e745cc0cff81b13e1d3b98e27014e31dc207a637 Mon Sep 17 00:00:00 2001
From: Raven Scott <raven@ssh.surf>
Date: Wed, 2 Oct 2024 04:43:43 -0400
Subject: [PATCH] update AI page

---
 public/css/chat.css | 247 +++++++++++++++++++++++++++++++++++++++++++
 views/chat.ejs      | 249 +-------------------------------------------
 2 files changed, 248 insertions(+), 248 deletions(-)
 create mode 100644 public/css/chat.css

diff --git a/public/css/chat.css b/public/css/chat.css
new file mode 100644
index 0000000..56185c5
--- /dev/null
+++ b/public/css/chat.css
@@ -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;
+}
\ No newline at end of file
diff --git a/views/chat.ejs b/views/chat.ejs
index 5345a0d..e6dff95 100644
--- a/views/chat.ejs
+++ b/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">