add resources

static/app.css

@@ -34,31 +34,52 @@ em{
 .convo{
     height: 75%;
     width: 100%;
-    
+    overflow-y: auto; 
+    padding: 10px;
+    box-sizing: border-box;
 }
+
+
 .qt{
-    height: 10%;
-    width: 100%;
+    width: 70%;
+    height: 50%;
+    border: none;
+    background-color: #8d8b8b;
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    background-color: white;
-    gap: 2%;
+    border-radius: 10px;
+    margin: 10px;
 }
 
-.qt{
-    width: 100%;
-    height: 100%;
+.qt input{
+ width: 70%;
+ height: 70%;
+ border: none;
+ background-color: #8d8b8b;
+ color:white;
+ margin : 10px
+}
+.qt input::placeholder{
+color: white;
+}
+.qt input:focus{
     border: none;
-    background-color: rgb(103, 103, 246);
+    outline: none;
+}
+.qtdoc{
+    width: 100%;
+    height: 10%;
     display: flex;
-
+    justify-content: center;
+    align-items: center;
 }
 
-.qt i{
+.icons{
+    width: 18%;
+    display: flex;
+    gap: 2%;
+    font-size: large;
     cursor: pointer;
-}
-
-.qtdoc{
-    
+    justify-content: space-around;
 }

static/application.js

@@ -0,0 +1,62 @@
+const inputField = document.querySelector(".qt input");
+    const icons = document.querySelectorAll(".icons i");
+    const convo = document.querySelector(".convo");
+  
+    // Create hidden file inputs dynamically
+    const imageInput = document.createElement("input");
+    imageInput.type = "file";
+    imageInput.accept = "image/*";
+    imageInput.style.display = "none";
+  
+    const docInput = document.createElement("input");
+    docInput.type = "file";
+    docInput.accept = ".pdf,.docx,.pptx,.xlsx";
+    docInput.style.display = "none";
+  
+    document.body.appendChild(imageInput);
+    document.body.appendChild(docInput);
+  
+    let selectedFile = null;
+    let selectedType = null;
+  
+    // Icon click handlers
+    icons[0].addEventListener("click", () => imageInput.click()); // image icon
+    icons[1].addEventListener("click", () => docInput.click());   // file icon
+    icons[2].addEventListener("click", handleSubmit);             // send icon
+  
+    imageInput.addEventListener("change", () => {
+      selectedFile = imageInput.files[0];
+      selectedType = "Image";
+      showSelectedFile(selectedFile.name, "🖼️");
+    });
+  
+    docInput.addEventListener("change", () => {
+      selectedFile = docInput.files[0];
+      selectedType = "Document";
+      showSelectedFile(selectedFile.name, "📄");
+    });
+  
+    function handleSubmit() {
+      const question = inputField.value.trim();
+      if (!question && !selectedFile) {
+        alert("Please type a question or select a file.");
+        return;
+      }
+  
+      convo.innerHTML = `
+        <div style="padding: 1rem; border-radius: 10px; background-color: #f1f1f1; margin: 1rem;">
+          <strong>Question:</strong> ${question || "(No question)"}<br>
+          ${selectedFile ? `<strong>${selectedType}:</strong> ${selectedFile.name}` : ""}
+          <br><em>(Simulated - No backend yet)</em>
+        </div>
+      `;
+    }
+  
+    function showSelectedFile(fileName, icon) {
+      convo.innerHTML = `
+        <div style="padding: 0.8rem; background-color: #f3f3f3; border-radius: 10px; margin: 1rem;">
+          ${icon} <strong>Selected file:</strong> ${fileName}
+        </div>
+      `;
+    }
+    inputField.value=""

templates/home.html

@@ -17,10 +17,17 @@
    </div>
    <div class="qtdoc">
    <div class="qt">
-    <input type="text" placeholder="    Ask me anything about any document :D "> 
+    <input type="text" placeholder="Ask me anything about any document :D "> 
+    <div class="icons">
+    <i class="fa-solid fa-image"></i>
     <i class="fa-solid fa-file"></i>
     <i class="fa-solid fa-share-from-square"></i>
+    
+    </div>
     </div>
    </div>
+   <script src="/static/application.js"> </script>
+  
+  
 </body>
 </html>