Update styling

web/static/styles.css

@@ -1,11 +1,16 @@
 body {
   font-family: 'Helvetica';
-  margin: 100px 100px 0;
+  margin-top: 100px;
+  margin-left: 100px;
+  margin-right: 100px;
   padding: 0;
 }
 
 .header {
-  color: #000;
+  margin-top: 40px;
+  margin-bottom: 20px;
+
+  color: #000000;
   position: absolute;
   text-align: center;
   top: 40px;
@@ -15,31 +20,35 @@ body {
 
 .container {
   margin-top: 120px;
+  height: auto;
+  top: 100px;
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   padding: 20px;
+  position: relative;
   align-items: stretch;
 }
 
-.left-container, .right-container, .dropzone {
-  padding: 20px;
-  box-sizing: border-box; /* Include padding and border in the element's total width and height */
-}
-
 .left-container {
   width: 52%;
+  padding: 20px;
   text-align: center;
+  align-items: center;
+  align-content: center;
 }
 
 .right-container {
+  margin-left:-2px;
   width: 48%;
-  border: 2px solid #000;
+  padding: 20px;
+  border: 2px solid #000000;
+  text-align: left;
 }
 
 .dropzone {
   width: 52%;
   min-height: 500px;
-  border: 2px solid #000;
+  border: 2px solid #000000;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -50,9 +59,10 @@ body {
   max-width: 100%;
   max-height: 200px;
   display: none;
+  align-items: center;
 }
 
-.github-container, .feature-select {
+.github-container {
   display: flex;
   justify-content: center;
   margin-top: 100px;
@@ -60,58 +70,98 @@ body {
 
 .github-container a {
   display: flex;
-  color: #000;
+  color:#000000;
+  align-items: center;
+}
+
+.feature-select {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
 }
 
+/* The container for the predicted images */
 #predicted-images {
   display: grid;
-  gap: 1%;
+  row-gap: 1%;
+  column-gap: 1%;
+  width: 100%;
   grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, fr);
+  position: relative; /* Set the container as a relative positioning context */
 }
 
+/* The predicted image */
 #predicted-images img {
   width: 100%; 
-  transition: all 0.3s ease-in-out;
-}
-
-#predicted-images img:hover {
-  filter: brightness(70%);
-  transform: scale(1.07);
+  height: auto;
+  display: block; 
+  align-items: center;
 }
 
+/* The tooltip */
 .image-tooltip {
   position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translate(-50%, -60%);
+  bottom: 100%; /* Position the tooltip above the image */
+  left: 50%; /* Center the tooltip horizontally */
+  transform: translate(0%, -60%); /* Center both horizontally and vertically */
   background-color: rgba(0, 0, 0, 0.6);
-  padding: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 10px;
+  padding-bottom: 20px;
   color: white;
   font-size: 12px;
   pointer-events: none;
-  opacity: 0;
+  opacity: 0; /* Initially set the tooltip to be transparent */
+}
+
+/* Apply the hover effect */
+#predicted-images img {
+  /* Set initial transition properties */
+  transition: all 0.3s ease-in-out;
+  transform: scale(1); /* Set the initial scale to 1 (normal size) */
 }
 
+#predicted-images img:hover {
+  filter: brightness(70%);
+  transform: scale(1.07); /* Scale the image up to 1.1 times its original size on hover */
+}
+
+/* Show the tooltip on image hover */
 #predicted-images .image-container:hover .image-tooltip {
-  opacity: 1;
-  visibility: visible;
+opacity: 1; /* Make the tooltip visible on image hover */
+visibility: visible; /* Show the tooltip on image hover */
 }
 
+/* The caption */
 .image-caption {
   bottom: 0;
   left: 0;
+  width: auto;
+  gap: 0%;
   padding: 10px;
-  text-align: center;
+  align-items: center;
+  text-decoration: none; 
   font-size: 14px;
-  pointer-events: none;
+  text-align: center;
+  font-weight: normal;
+  pointer-events: none; /* Prevent caption from blocking clicks */
+}
+
+.image-species {
+  opacity: 0;
 }
 
 #predicted-images a {
   color: #4e4e4e;
-  text-decoration: none;
+  text-decoration: none; 
+  font-weight: normal;
 }
 
-#predicted-images > div > a:hover .image-caption {
-  color: #000;
+#predicted-images > div > a:hover .image-caption{
+  color: #000000;
+  font-size:  14px;
   transition: 0.5s;
 }
+

web/templates/index.html

@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>What Plant Is This?</title>
   <link rel="stylesheet" href="static/styles.css">
   <link rel="icon" type="image/png" href="https://images.squarespace-cdn.com/content/v1/64790f5777b5d772678cce83/6d71eaee-f825-4324-be9b-2def32469eac/Untitled+drawing+%2811%29.png?format=100w">