Update application/templates/index.html

application/templates/index.html

@@ -13,7 +13,7 @@
     width: 12px;
 }
 ::-webkit-scrollbar-track {
-    background: transparent; 
+    background: transparent;
 }
 ::-webkit-scrollbar-thumb {
     background: rgb(43, 43, 43);
@@ -29,7 +29,7 @@ html,body{
     width: 100vw;
     height: 100vh;
     overflow: hidden;
-    scrollbar-width: thin; 
+    scrollbar-width: thin;
     scrollbar-color: rgb(41, 41, 41) transparent;
     font-family: 'Inter';
 }
@@ -105,7 +105,7 @@ nav{
     gap: 1vh;
     position: relative;
     font-size: medium;
-    
+
 }
 .prevChat{
     min-height: 5vh;
@@ -145,8 +145,8 @@ nav{
     z-index: 50;
     top: 8vh;
     display: flex;
-    flex-direction: column; 
-    justify-content: flex-end; 
+    flex-direction: column;
+    justify-content: flex-end;
     z-index: 1;
 }
 .inputs {
@@ -162,8 +162,8 @@ nav{
     border-top-left-radius: 20px;
     border-bottom-right-radius: 50px;
     font-size: large;
-    position: relative; 
-    margin-top: auto; 
+    position: relative;
+    margin-top: auto;
     align-self: center;
 }
 .textBox{
@@ -185,11 +185,11 @@ nav{
     height: 6vh;
 }
 .messages {
-    overflow-y: auto; 
+    overflow-y: auto;
     color: white;
     padding: 10px;
     display: flex;
-    flex-direction: column; 
+    flex-direction: column;
     position: relative;
 }
 .user{
@@ -201,7 +201,7 @@ nav{
     font-weight: 300;
     border-radius: 10px;
     line-height: 130%;
-    
+
 }
 .user p{
     color: #b4b4b4;
@@ -217,10 +217,10 @@ nav{
 }
 .ai p {
     opacity: 0.9;
-    font-weight: 300; 
+    font-weight: 300;
     font-size: medium;
     line-height: 1.6;
-    color: #c5c5c5; 
+    color: #c5c5c5;
     background-color: rgba(28, 28, 28, 0.5);
     padding: 20px;
     border-radius: 10px;
@@ -284,7 +284,7 @@ code{
     font-family: 'Inter';
     font-weight: 300;
     font-size: 15px;
-    color: #cfcfcf; 
+    color: #cfcfcf;
     opacity: 0.9;
     padding-left: 10px;
 }
@@ -325,6 +325,24 @@ code{
     border: none;
     font-size: x-large;
 }
+/*Image Button*/
+.image-button {
+    background: transparent;
+    border: none;
+    color: rgb(233, 233, 233);
+    cursor: pointer;
+    font-size: x-large;
+    padding: 0; /* Remove padding to fit exactly the icon */
+    display: flex; /* Use flexbox for alignment */
+    align-items: center; /* Vertically center the icon */
+    justify-content: center; /* Horizontally center the icon */
+}
+
+.image-button i {
+  margin: 0;
+}
+
+
 @media screen and (max-width: 780px){
     .menu{
     background-color: rgba(20, 20, 20);
@@ -409,6 +427,10 @@ code{
         </div>
         <div class="inputs">
             <button id="webSearch" class="webSearch"><i class="fa-solid fa-globe"></i></button>
+            <!-- Image Button -->
+            <a href="https://reality123b-iris.hf.space" target="_blank" rel="noopener noreferrer">
+                <button class="image-button"><i class="fa-solid fa-image"></i></button>
+            </a>
             <textarea name="" id="textBox" class="textBox" placeholder="Enter your message..."></textarea>
             <button id="sendBtn" class="sendBtn"><i class="fa-solid fa-arrow-up"></i></button>
         </div>
@@ -418,31 +440,31 @@ code{
         function createThinkingElement(thinkingContent) {
             const container = document.createElement('div');
             container.className = 'thinking-container';
-            
+
             const header = document.createElement('div');
             header.className = 'thinking-header';
-            
+
             const title = document.createElement('span');
             title.className = 'thinking-title';
             title.textContent = 'Reasoning about it';
-            
+
             const arrow = document.createElement('i');
             arrow.className = 'fa-solid fa-chevron-down thinking-arrow';
-            
+
             const content = document.createElement('div');
             content.className = 'thinking-content';
             content.textContent = thinkingContent;
-            
+
             header.appendChild(title);
             header.appendChild(arrow);
             container.appendChild(header);
             container.appendChild(content);
-            
+
             header.addEventListener('click', () => {
                 arrow.classList.toggle('open');
                 content.classList.toggle('open');
             });
-            
+
             return container;
         }
         // Example usage in your message processing logic: