Update styling

web/static/script.js

@@ -12,14 +12,14 @@ document.addEventListener("DOMContentLoaded", () => {
 
     const imageElement = document.createElement("img");
     imageElement.src = "static/loading.gif";
-    imageElement.style.height = "50px";
-    imageElement.style.width = "50px";
+    imageElement.style.height = "100px";
+    imageElement.style.width = "100px";
     imageElement.style.margin = 'auto';
     predictionContainer.appendChild(imageElement);
 
     const selectedFeature = featureSelect.value;
     const formData = new FormData();
-    //thinkingText.innerText = "Loading the model, it might take a second...";
+    thinkingText.innerText = "";
     formData.append("uploaded-image", file);
     formData.append("feature", selectedFeature);
     lastUploadedImage = file;

web/static/styles.css

@@ -1,6 +1,6 @@
 body {
   font-family: 'Helvetica';
-  margin-top: 40px;
+  margin-top: 50px;
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: 4000px;
@@ -22,9 +22,9 @@ body {
 
 .dropzone {
   margin-top: 20px;
-  width: 95%;
+  width: 90%;
   min-height: 100px;
-  border: 2px dashed #000000;
+  border: 2px dashed  #0b0f19;;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -35,7 +35,7 @@ body {
 .prediction-container {
   margin-top: 20px;
   min-height: 100px;
-  width: 95%;
+  width: 90%;
   border: 2px solid #000000;
   display: flex;
   justify-content: center;
@@ -54,10 +54,11 @@ body {
 /* The container for the predicted images */
 #predicted-images {
   margin: auto;
+  margin-top: 20px;
   display: grid;
   row-gap: 1%;
   column-gap: 1%;
-  width: 95%;
+  width: 90%;
   justify-content: center;
   align-items: center;
   grid-template-columns: repeat(3, 1fr);