Update templates/index.html

templates/index.html

@@ -12,7 +12,7 @@
 
 <style>
     body {
-        background-color: #2f2f2f;
+        background-color: #000;
         font-family: Arial, sans-serif;
         color: white;
         margin: 0;
@@ -23,6 +23,7 @@
         background-attachment: fixed;
         background-position: center center;
     }
+
     nav {
         background-color: #444;
         padding: 5px;
@@ -31,38 +32,45 @@
         height: auto;
         top: 0;
     }
+
     .sticky {
         position: absolute;
         top: 20px;
         right: 20px;
         z-index: 1000;
     }
+
     .sticky2 {
         position: absolute;
         top: 20px;
         right: 80px;
         z-index: 1000;
     }
+
     .sticky3 {
         position: absolute;
         top: 20px;
         right: 140px;
         z-index: 1000;
     }
+
     /* Dropdown Styles */
     .dropdown {
         position: relative;
         display: inline-block;
     }
+
     .btn {
         background-color: transparent;
         color: white;
         border: none;
         cursor: pointer;
     }
+
     .btn:hover {
         background-color: #494949;
     }
+
     .dropdown-content {
         display: none;
         position: absolute;
@@ -75,11 +83,13 @@
         z-index: 1;
         text-align: center;
     }
+
     .dropdown-content h3 {
         margin: 5px 0;
         color: white;
         text-align: center;
     }
+
     .dropdown-content a {
         color: white;
         padding: 12px 16px;
@@ -87,12 +97,15 @@
         display: block;
         border-top: 1px solid transparent;
     }
+
     .dropdown-content a:hover {
         background-color: #bebebe;
     }
+
     .dropdown:hover .dropdown-content {
         display: block;
     }
+
     main {
         display: flex;
         flex-direction: column;
@@ -102,6 +115,7 @@
         /* adjust if header height changes */
         text-align: center;
     }
+
     /* Input and Button Styles */
     #question {
         padding: 10px;
@@ -110,12 +124,13 @@
         border: 1px solid #ccc;
         margin-right: 10px;
     }
+
     .user {
-        background-color: transparent;
+        background-color: #2f2f2f;
         backdrop-filter: blur(5px);
         padding: 10px;
         padding-right: 10px;
-        border-radius: 5px;
+        border-radius: 100px;
         border: solid #ccc;
         margin: 10px;
         text-align: center;
@@ -123,32 +138,36 @@
         width: 80%;
         color: rgb(227, 227, 227)
     }
-  .ai{
-        padding: 10px;
-        text-align: center;
-        justify-content: right;
-        width: 80%;
+
+    .ai {
+        align-self: flex-start;
         color: rgb(227, 227, 227);
-        white-space: pre-wrap;     /* preserve line breaks, wrap long lines */
-  }
+        padding: 10px 20px;
+        white-space: pre-wrap;
+        text-align: center;
+    }
+
     .text1 {
         display: flex;
         justify-content: right;
         align-items: center;
         margin: 10px;
     }
+
     .text2 {
         display: flex;
-        justify-content: left;
+        justify-content: center;
         align-items: center;
         margin: 10px;
     }
+
     .chat-input-container {
         display: flex;
         align-items: center;
         justify-content: center;
         margin-top: 20px;
     }
+
     #sendButton {
         margin-left: 10px;
         padding: 10px 20px;
@@ -158,9 +177,11 @@
         cursor: pointer;
         transition: background-color 0.3s;
     }
+
     #sendButton:hover {
         background-color: #e0e0e0;
     }
+
     .inputWrapper {
         flex-direction: column;
         align-items: center;
@@ -173,23 +194,28 @@
         gap: 10px;
         z-index: 1000;
     }
+
     .inputWrapper input {
         width: 100%;
         padding: 10px;
     }
+
     .tools button {
         font-size: 18px;
         padding: 10px 20px;
         border-radius: 50px;
         cursor: pointer;
     }
+
     #welcomeMessage {
         text-align: center;
         margin-top: 20%;
     }
+
     .tools-content {
         display: none;
     }
+
     .tools:hover {
         .tools-content {
             display: block
@@ -198,7 +224,7 @@
 </style>
 
 <body>
-    
+
     <H1 id="welcomeMessage">Hello 👋, what can I help with?</H1>
     <div id="chatArea">
         <div class="text1">
@@ -228,12 +254,12 @@
                         <a href="/think"><button
                                 style="color: greenyellow;background-color: black;">Think</button></a><br>
                     </div>
-                    <button style="background-color: black;">
+                    <button style="background-color: #101010;">
                         <i class="fa-solid fa-sliders fa-2xl" style="color: #63E6BE;"></i>
                     </button>
                 </div>
                 <button id="sendButton" onclick="answer()"
-                    style="font-weight: bold; background-color: black; color: greenyellow">&#8593</button>
+                    style="font-weight: bold; background-color: #101010; color: greenyellow">&#8593</button>
             </div>
         </div>
     </main>