Update styling

web/static/script.js

@@ -44,15 +44,38 @@ document.addEventListener("DOMContentLoaded", () => {
       uploadedImage.classList.add("uploaded-image");
       uploadedImage.onload = async () => {
 
-        const imageWidth = uploadedImage.width;
+  const imageWidth = uploadedImage.width;
         const imageHeight = uploadedImage.height;
-        const widthScale = 225 / imageWidth;
-        const heightScale = 225 / imageHeight;
-        const scaleFactor = Math.min(widthScale, heightScale);
-        uploadedImage.width = imageWidth * (scaleFactor-0.1);
-        uploadedImage.height = imageHeight * (scaleFactor-0.1);
+        
+        // Create a canvas to draw cropped image
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        canvas.width = 225;
+        canvas.height = 225;
+
+        let sourceX, sourceY, sourceWidth, sourceHeight;
+
+        if (imageWidth > imageHeight) {
+            // Image is wider than it is tall
+            sourceHeight = imageHeight;
+            sourceWidth = imageHeight;
+            sourceX = (imageWidth - sourceWidth) / 2;
+            sourceY = 0;
+        } else {
+            // Image is taller than it is wide or square
+            sourceWidth = imageWidth;
+            sourceHeight = imageWidth;
+            sourceY = (imageHeight - sourceHeight) / 2;
+            sourceX = 0;
+        }
+
+        ctx.drawImage(uploadedImage, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, 225, 225);
+        
+        const croppedImage = new Image();
+        croppedImage.src = canvas.toDataURL();
+        croppedImage.classList.add("uploaded-image");
         dropzone.innerHTML = "";
-        dropzone.appendChild(uploadedImage);
+        dropzone.appendChild(croppedImage);
       };
     };
 

web/static/styles.css

@@ -3,7 +3,7 @@ body {
   margin-top: 40px;
   margin-left: 10px;
   margin-right: 10px;
-  margin-bottom: 40px;
+  margin-bottom: 400px;
   padding: 0;
   text-align: center;
 }