Update styling

web/static/styles.css

@@ -1,58 +1,53 @@
 body {
   font-family: 'Helvetica';
-  margin-top: 100px;
-  margin-left: 100px;
-  margin-right: 100px;
+  margin: 0;
   padding: 0;
 }
 
 .header {
-  margin-top: 40px;
-  margin-bottom: 20px;
-
-  color: #000000;
-  position: absolute;
   text-align: center;
-  top: 40px;
-  left: 50%;
-  transform: translateX(-50%);
+  margin: 20px 0;
+  color: #000000;
+}
+
+.feature-select {
+  display: flex;
+  justify-content: center;
+  margin: 20px 0;
 }
 
 .container {
-  margin-top: 120px;
-  height: auto;
-  top: 100px;
   display: flex;
-  justify-content: space-around;
-  padding: 20px;
-  position: relative;
-  align-items: stretch;
+  flex-direction: column;
+  align-items: center;
 }
 
-.left-container {
-  width: 52%;
-  padding: 20px;
-  text-align: center;
+.dropzone {
+  width: 90%;
+  min-height: 300px;
+  border: 2px solid #000000;
+  display: flex;
+  justify-content: center;
   align-items: center;
-  align-content: center;
+  margin-bottom: 20px;
+  cursor: pointer;
 }
 
 .right-container {
-  margin-left:-2px;
-  width: 48%;
+  width: 90%;
   padding: 20px;
   border: 2px solid #000000;
   text-align: left;
+  margin-bottom: 20px;
 }
 
-.dropzone {
-  width: 52%;
-  min-height: 500px;
-  border: 2px solid #000000;
-  display: flex;
-  justify-content: center;
+.left-container {
+  width: 90%;
+  padding: 20px;
+  text-align: center;
   align-items: center;
-  cursor: pointer;
+  align-content: center;
+  margin-bottom: 20px;
 }
 
 #uploaded-image {
@@ -62,106 +57,48 @@ body {
   align-items: center;
 }
 
-.github-container {
-  display: flex;
-  justify-content: center;
-  margin-top: 100px;
-}
-
-.github-container a {
-  display: flex;
-  color:#000000;
-  align-items: center;
-}
-
-.feature-select {
-  display: flex;
-  justify-content: center;
-  margin-top: 10px;
-}
-
-/* The container for the predicted images */
 #predicted-images {
+  width: 90%;
   display: grid;
   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 */
+  grid-template-columns: repeat(1, 1fr);
 }
 
-/* The predicted image */
-#predicted-images img {
-  width: 100%; 
-  height: auto;
-  display: block; 
-  align-items: center;
-}
+/* ... Rest of the styles remain unchanged ... */
 
-/* The tooltip */
-.image-tooltip {
-  position: absolute;
-  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-left: 10px;
-  padding-right: 10px;
-  padding-top: 10px;
-  padding-bottom: 20px;
-  color: white;
-  font-size: 12px;
-  pointer-events: none;
-  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) */
+.github-container {
+  display: flex;
+  justify-content: center;
+  margin: 20px 0;
 }
 
-#predicted-images img:hover {
-  filter: brightness(70%);
-  transform: scale(1.07); /* Scale the image up to 1.1 times its original size on hover */
+.github-container a {
+  display: flex;
+  color: #000000;
+  align-items: center;
 }
 
-/* Show the tooltip on image hover */
-#predicted-images .image-container:hover .image-tooltip {
-opacity: 1; /* Make the tooltip visible on image hover */
-visibility: visible; /* Show the tooltip on image hover */
-}
+/* For tablets and desktops, add a breakpoint */
+@media (min-width: 768px) {
+  body {
+    margin: 100px;
+  }
 
-/* The caption */
-.image-caption {
-  bottom: 0;
-  left: 0;
-  width: auto;
-  gap: 0%;
-  padding: 10px;
-  align-items: center;
-  text-decoration: none; 
-  font-size: 14px;
-  text-align: center;
-  font-weight: normal;
-  pointer-events: none; /* Prevent caption from blocking clicks */
-}
+  .container {
+    flex-direction: row;
+    justify-content: space-around;
+  }
 
-.image-species {
-  opacity: 0;
-}
+  .left-container, .dropzone {
+    width: 48%;
+  }
 
-#predicted-images a {
-  color: #4e4e4e;
-  text-decoration: none; 
-  font-weight: normal;
-}
+  .right-container {
+    width: 48%;
+  }
 
-#predicted-images > div > a:hover .image-caption{
-  color: #000000;
-  font-size:  14px;
-  transition: 0.5s;
+  #predicted-images {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
-

web/templates/index.html

@@ -1,52 +1,27 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <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">
-</head>
-<body>
-  <div class="header">
-    <h1>What Plant is This?</h1>
-    <p> Have a neural net try to identify the plant you found.</p>
+<div class="header">
+  <h1>What Plant is This?</h1>
+  <p> Have a neural net try to identify the plant you found.</p>
+</div>
 
-    <div class="feature-select">
-    <label for="feature">This is a picture of a...</label>
-    <select name="feature" id="feature-select">
-      <option value="flower">flower</option>
-      <option value="leaf">leaf</option>
-      <option value="fruit">fruit</option>
-    </select>
-  </div>
-
-  </div>
+<div class="feature-select">
+  <label for="feature">This is a picture of a...</label>
+  <select name="feature" id="feature-select">
+    <option value="flower">flower</option>
+    <option value="leaf">leaf</option>
+    <option value="fruit">fruit</option>
+  </select>
+</div>
 
-  <div class="container">
+<div class="container">
+  <div class="right-container">
     <div id="image-dropzone" class="dropzone">
       <p>Drop an image</p>
     </div>
-    <img id="uploaded-image" src="#" alt="Uploaded Image" />
-    <div class="right-container">
-      <h2 id="thinking-text">Suggestions will appear here...</h2>
-      <div class="image-grid">
-        <div id="predicted-images">
-        </div>
+    <h2 id="thinking-text">Suggestions will appear here...</h2>
+    <div class="image-grid">
+      <div id="predicted-images">
       </div>
     </div>
   </div>
-
-  <!-- Add the GitHub link and icon below the container -->
-  <div class="github-container">
-    <a href="https://github.com/brayden1moore/What-Plant-Is-This" target="_blank">
-      <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" height=20px />
-      <p> See the code</p>
-    </a>
-  </div>
-
-  <div class="spacing">
-    <p><br> <br> <br> </p>
-  </div>
-  <script src="https://cdn.jsdelivr.net/gh/alexcorvi/heic2any/dist/heic2any.js"></script>
-  <script src="static/script.js"></script>
-</body>
-</html>
+  <img id="uploaded-image" src="#" alt="Uploaded Image" />
+</div>