fixed index.html

templates/index.html

@@ -21,6 +21,7 @@
         }
         body {
             font-family: 'Lora', sans-serif;
+            font-size: 16px;
             background-color: #eaf4ea; /* Light green background */
             color: #333; /* Dark text color */
         }
@@ -80,7 +81,7 @@
             background-color: #218838; /* Slightly darker green on hover */
         }
 
-        #predictionsList:hover::before {
+        #predictions:hover::before {
             content: "Tables displaying TPM values corresponding to plant tissues";
             position: absolute;
             bottom: 100%; /* Position the tooltip above the text */
@@ -109,12 +110,12 @@
                     </div>
                 </div>
             </div>
-            <button type="button" class="btn btn-primary" id="uploadButton" onclick="processFiles()">Upload</button>
+            <button type="button" class="btn btn-primary" id="uploadButton" onclick="processFiles()">Upload and Process</button>
             <p id="uploadMessage" class="text-muted mt-2"></p>
             <div id="selectedFiles" class="mt-2"></div>
         </form>
 
-        <h2 class="mt-5" id="predictionsList" title="Table displaying TPM values corresponding to plant tissues">Predictions</h2>
+        <h2 class="mt-5" id="predictions" title="Table displaying TPM values corresponding to plant tissues">Predictions</h2>
         <div id="loadingIcon" class="d-none">
             <p class="text-muted">Processing... <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></p>
         </div>
@@ -228,7 +229,7 @@
                                 </div>
                             </div>
                         `;
-                        predictionsList.innerHTML += cardHtml;
+                        predictionsList.innerHTML = cardHtml + predictionsList.innerHTML;
 
                         // Trigger fade-in effect
                         setTimeout(() => {
@@ -237,7 +238,7 @@
                     }
 
                     // Update upload message immediately
-                    uploadMessage.innerText = `Uploaded file ${i + 1} of ${files.length}.`;
+                    uploadMessage.innerText = `Processed files!`;
 
                     // Clear the message after a short delay (e.g., 2000 milliseconds)
                     setTimeout(() => {