modify legend colors, widen box line

index.html

@@ -86,12 +86,11 @@
 
         #weatherInfo {
             max-width: 100%;
+            position: relative;
             margin: auto;
-            margin-top: 20px;
+            margin-top: 10px; /* Add some margin between legend and weatherInfo */
             padding: 15px;
             background-color: var(--light-color);
-            box-shadow: 0 0 10px rgba(52, 47, 47, 0.1);
-            border-radius: 5px;
             color: var(--dark-color);
         }
 
@@ -161,31 +160,34 @@
         }
 
         #legend {
-    position: absolute;
+            position: relative;
-    top: 20px;
+            top: 0px;
-    left: 20px;
+            align-items: center;
-    background-color: rgba(255, 255, 255, 0.8); /* Tło legenda z lekkim przezroczystością */
+            display: flex;
+            background-color: rgba(255, 255, 255, 0.8);
             padding: 10px;
-    border-radius: 5px;
             font-size: 16px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+            flex-wrap: wrap;
+            justify-content: center;
+            margin-top: 0;
         }
 
         #legend h3 {
             margin-bottom: 10px;
             font-size: 18px;
+            position: relative;
         }
 
         .legend-item {
             display: flex;
             align-items: center;
-    margin-bottom: 5px;
+            margin-right: 15px; /* Add some spacing between legend items */
         }
 
         .legend-color {
             width: 20px;
             height: 20px;
-    margin-right: 10px;
+            margin-right: 5px;
             border-radius: 5px;
         }
 
@@ -193,16 +195,42 @@
             font-weight: bold;
         }
 
+        #weatherInfo.dark-mode {
+            background-color: var(--dark-color);
+            color: var(--light-color);
+        }
+
+        #legend.dark-mode {
+            background-color: rgba(0, 0, 0, 0.8);
+            color: var(--light-color);
+        }
+
+
         /* dodałem zapytania medialne, aby dostosować styl strony do różnych szerokości okna przeglądarki */
         @media (max-width: 768px) {
 
+            #legend {
+                position: relative;
+                align-items: left;
+                display: flex;
+                top: auto; /* Reset the top position */
+                bottom: 20px; /* Add some distance from the bottom of the page */
+                justify-content: center;
+                margin-top: 10px;
+            }
+
+            .legend-item {
+                margin-right: 0; /* Remove right margin on smaller screens */
+                margin-bottom: 10px; /* Add some spacing between legend items */
+            }
+        }
+            
 
             #darkModeToggle {
                 position: right;
                 transform: none;
                 margin-top: 10px;
             }
-        }
 
         @media (max-width: 600px) {
             body {
@@ -227,6 +255,21 @@
             button {
                 font-size: 14px;
             }
+            #legend {
+                
+                align-items: left;
+                top: auto; /* Reset the top position */
+                bottom: 20px; /* Add some distance from the bottom of the page */
+                margin-top: 10px;
+                flex-direction: column;
+                justify-content: left;
+            }
+
+            .legend-item {
+                margin-right: 0; /* Remove right margin on smaller screens */
+                margin-bottom: 10px; /* Add some spacing between legend items */
+                justify-content: left;
+            }
         }
     </style>
 </head>
@@ -258,6 +301,8 @@
 
     <canvas style="display: none; max-width: 100%;"></canvas>
 
+    <div id="legend" style="display: none;"></div>
+    
     <div id="weatherInfo" style="display: none;"></div>
 
     <script>
@@ -299,8 +344,20 @@
         loadingMessage.style.display = "none";
         document.getElementById("checkRipenessBtn").disabled = false;
 
-            // Update weather info text
+        const location = locationInput.value;
-            updateWeatherInfo(locationInput.value, cropTypeInput.value);
+
+        if (cropTypeInput.value === "external") {
+            updateWeatherInfo(location, cropTypeInput.value);
+        } else {
+            const randomTips = [
+                "water your tomatoes every day.",
+                "keep the temperature between 20-25 degrees Celsius.",
+                "place the tomatoes in sunlight."
+            ];
+
+            const randomTip = randomTips[Math.floor(Math.random() * randomTips.length)];
+            weatherInfo.innerText = "TIP! To maximize your yields " + randomTip;
+        }
     });
 
     function draw_image_and_boxes(file, boxes) {
@@ -309,45 +366,71 @@
         img.onload = () => {
             // Show canvas once the image is loaded
             canvas.style.display = "block";
-        weatherInfo.innerText = ""; // Clear previous weather info
+            //weatherInfo.innerText = ""; // Clear previous weather info
 
             const ctx = canvas.getContext("2d");
             canvas.width = img.width;
             canvas.height = img.height;
             ctx.drawImage(img, 0, 0);
-        ctx.lineWidth = 5;
+            ctx.lineWidth = 15;
             ctx.font = "30px serif"; // Zwiększono rozmiar czcionki
 
             // Draw bounding boxes
             boxes.forEach(([x1, y1, x2, y2, object_type, prob]) => {
+                
+                switch (object_type) {
+                    case "b_fully_ripened":
+                        object_type = "big fully ripened"; 
+                        break;
+                    case "b_half_ripened":
+                        object_type = "big half ripened"; 
+                        break;
+                    case "b_green":
+                        object_type = "big unripe";
+                        break;
+                    case "l_fully_ripened":
+                        object_type = "small fully ripened"; 
+                        break;
+                    case "l_half_ripened":
+                        object_type = "small half ripened"; 
+                        break;
+                    case "l_green":
+                        object_type = "small unripe"; 
+                        break;
+                    default:
+                        object_type = "#000000";
+                        break;
+                }
+                
                 const label = `${object_type}`;
                 
                 // Przypisz różne kolory do różnych klas
                 let boxColor;
                 switch (object_type) {
-                case "b_fully_ripened":
+                    case "big fully ripened":
-                    boxColor = "#ff0000"; // Czerwony dla b_fully_ripened
+                        boxColor = "#0077FF"; 
                         break;
-                case "b_half_ripened":
+                    case "big half ripened":
-                    boxColor = "#00ff00"; // Zielony dla b_half_ripened
+                        boxColor = "#00FFDE"; 
                         break;
-                case "b_green":
+                    case "big unripe":
-                    boxColor = "#0000ff"; // Niebieski dla b_green
+                        boxColor = "#B2EBF2";
                         break;
-                case "l_fully_ripened":
+                    case "small fully ripened":
-                    boxColor = "#ffcc00"; // Pomarańczowy dla l_fully_ripened
+                        boxColor = "#C62828"; 
                         break;
-                case "l_half_ripened":
+                    case "small half ripened":
-                    boxColor = "#9900cc"; // Fioletowy dla l_half_ripened
+                        boxColor = "#E57373"; 
                         break;
-                case "l_green":
+                    case "small unripe":
-                    boxColor = "#ff9900"; // Pomarańczowy dla l_green
+                        boxColor = "#FBD943"; 
                         break;
                     default:
-                    boxColor = "#000000"; // Domyślny kolor dla nieznanych klas
+                        boxColor = "#000000";
                         break;
                 }
 
+
                 ctx.strokeStyle = boxColor;
                 ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
                 ctx.fillStyle = boxColor;
@@ -359,29 +442,37 @@
 
             // Draw legend
             drawLegend(ctx);
-    }
+            
+        };
 }
 
 function drawLegend(ctx) {
+    // Remove existing legend container
+    const existingLegend = document.getElementById("legend");
+    if (existingLegend) {
+        existingLegend.parentNode.removeChild(existingLegend);
+    }
+
     const legendContainer = document.createElement("div");
     legendContainer.id = "legend";
 
     const legendTitle = document.createElement("h3");
-    legendTitle.textContent = "Legend";
+    legendTitle.textContent = "";
 
     legendContainer.appendChild(legendTitle);
 
     const legendItems = [
-        { label: "b_fully_ripened", color: "#ff0000" },
+        { label: "big fully ripened", color: "#0077FF" },
-        { label: "b_half_ripened", color: "#00ff00" },
+        { label: "big half ripened", color: "#00FFDE" },
-        { label: "b_green", color: "#0000ff" },
+        { label: "big unripe", color: "#B2EBF2" },
-        { label: "l_fully_ripened", color: "#ffcc00" },
+        { label: "small fully ripened", color: "#C62828" },
-        { label: "l_half_ripened", color: "#9900cc" },
+        { label: "small half ripened", color: "#E58633" },
-        { label: "l_green", color: "#ff9900" },
+        { label: "small unripe", color: "#FBD943" },
     ];
 
     legendItems.forEach(item => {
         const legendItem = document.createElement("div");
+        
         legendItem.classList.add("legend-item");
 
         const legendColor = document.createElement("div");
@@ -444,6 +535,20 @@ function drawLegend(ctx) {
         const body = document.body;
         body.classList.toggle('dark-mode');
 
+        // Toggle dark mode for weatherInfo and legend
+        const weatherInfo = document.getElementById('weatherInfo');
+        const legend = document.getElementById('legend');
+
+        if (body.classList.contains('dark-mode')) {
+            weatherInfo.classList.add('dark-mode');
+            legend.classList.add('dark-mode');
+            
+        } else {
+            weatherInfo.classList.remove('dark-mode');
+            legend.classList.remove('dark-mode');
+            
+        }
+
         // Change the text content of the toggle icon
         const toggleIcon = document.getElementById('darkModeToggle');
         toggleIcon.textContent = body.classList.contains('dark-mode') ? 'Light Mode' : 'Dark Mode';