From d53eafaecf6961be43edace7e8b211a6e791d102 Mon Sep 17 00:00:00 2001
From: anetla <anetla@st.amu.edu.pl>
Date: Fri, 19 Jan 2024 12:16:55 +0100
Subject: [PATCH] remove variety, adjust buttons

---
 index.html | 259 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 150 insertions(+), 109 deletions(-)
diff --git a/index.html b/index.html
index 568784d..fb184b5 100644
--- a/index.html
+++ b/index.html
@@ -1,27 +1,42 @@
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- dodałem ten tag, aby ustawić viewport strony -->
     <title>TomAIto</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <style>
+        /* Użyłem zmiennych CSS, aby łatwiej zmieniać kolory i czcionki */
+        :root {
+            --primary-color: #409c0f;
+            --secondary-color: #e2513b;
+            --dark-color: #333;
+            --light-color: #fff;
+            --font-family: 'Roboto', sans-serif;
+        }
+
         body {
-            font-family: 'Arial', sans-serif;
+            font-family: var(--font-family);
             margin: 0;
-            padding: 0;
-            background-color: #f5f5f5;
-            color: #333;
+            padding: 20px;
+            background-color: var(--light-color);
+            color: var(--dark-color);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
             transition: background-color 0.3s, color 0.3s;
         }
 
         body.dark-mode {
-            background-color: #333;
-            color: #fff !important;
+            background-color: var(--dark-color);
+            color: var(--light-color) !important;
         }
 
         header {
-            background-color: #4CAF50;
-            color: white;
+            background-color: var(--primary-color);
+            color: var(--light-color);
             text-align: center;
-            padding: 15px;
+            padding: 20pt;
+            padding-right: 10%;
+            padding-left: 10%;
             font-size: 24px;
             width: 100%;
             position: relative;
@@ -30,17 +45,18 @@
         }
 
         header span {
-            color: #ff6600;
+            color: var(--secondary-color);
             font-weight: bold;
         }
 
         #darkModeToggle {
             width: 90px;
-            height: 30px;
-            background-color: #333;
-            color: white;
-            border: none;
-            border-radius: 5px;
+            height: 45px;
+            font-size: 18px;
+            background-color: var(--secondary-color);
+            color: var(--light-color);
+            border: var(--light-color);
+            border-radius: 10px;
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -54,16 +70,16 @@
         }
 
         #darkModeToggle:hover {
-            background-color: #001a33;
+            background-color: var(--secondary-color);
         }
 
         canvas {
-            border: 1px solid #ddd;
+            border: 1px solid var(--dark-color);
             max-width: 100%;
             display: block;
             margin: auto;
             margin-top: 20px;
-            background-color: white;
+            background-color: var(--light-color);
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
             border-radius: 5px;
         }
@@ -73,75 +89,57 @@
             margin: auto;
             margin-top: 20px;
             padding: 15px;
-            background-color: #fff;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            background-color: var(--light-color);
+            box-shadow: 0 0 10px rgba(52, 47, 47, 0.1);
             border-radius: 5px;
-            color: #333;
+            color: var(--dark-color);
         }
 
         form {
             max-width: 600px;
             width: 100%;
             margin: auto;
+            margin-top: 20px;
             padding: 20px;
             display: flex;
             flex-direction: column;
             align-items: center;
-            background-color: #f9f9f9;
+            background-color: var(--light-color);
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
             border-radius: 5px;
-            color: #333;
+            color: var(--dark-color);
             transition: background-color 0.3s, color 0.3s;
         }
 
         body.dark-mode form {
-            background-color: #333;
-            color: #fff;
+            background-color: var(--dark-color);
+            color: var(--light-color);
+            
         }
 
         label {
-            margin-top: 10px;
-            font-weight: bold;
+            display: block;
+            margin-bottom: 5px;
+            font-size: 18px;
         }
 
         input,
         select {
             width: 100%;
             box-sizing: border-box;
-            margin-bottom: 15px;
+            margin-bottom: 20px;
             padding: 10px;
-            border: 1px solid #ddd;
+            border: 1px solid var(--dark-color);
             border-radius: 4px;
-            background-color: #fff;
+            background-color: var(--light-color);
             transition: border-color 0.3s;
             font-weight: bold;
-        }
-
-        @media (min-width: 768px) {
-            form {
-                max-width: 50%;
-            }
-
-            input,
-            select {
-                width: auto;
-            }
-        }
-
-        input:focus,
-        select:focus {
-            outline: none;
-            border-color: #4CAF50;
-        }
-
-        input[type="file"] {
-            background-color: #4CAF50;
-            color: white;
+            font-size: 16px;
         }
 
         input[type="file"]:focus {
             outline: none;
-            border-color: #001a33;
+            border-color: var(--secondary-color); /* użyłem zmiennej CSS zamiast koloru szesnastkowego */
         }
 
         button {
@@ -149,19 +147,56 @@
             padding: 15px;
             border: none;
             border-radius: 4px;
-            background-color: #4CAF50;
-            color: white;
+            background-color: var(--secondary-color); /* użyłem zmiennej CSS zamiast koloru szesnastkowego */
+            color: var(--light-color);
             cursor: pointer;
-            transition: background-color 0.3s;
+            transition: background-color 0.3s, transform 0.3s;
             font-weight: bold;
+            font-size: 18px;
         }
 
         button:hover {
-            background-color: #001a33;
+            background-color: var(--primary-color); /* użyłem zmiennej CSS zamiast koloru szesnastkowego */
+            transform: scale(1.05);
+        }
+
+        /* dodałem zapytania medialne, aby dostosować styl strony do różnych szerokości okna przeglądarki */
+        @media (max-width: 768px) {
+            
+
+            #darkModeToggle {
+                position: right;
+                transform: none;
+                margin-top: 10px;
+            }
+        }
+
+        @media (max-width: 600px) {
+            body {
+                padding: 10px;
+            }
+
+            header {
+                padding: 10pt;
+                font-size: 20px;
+            }
+
+            form {
+                padding: 10px;
+            }
+
+            label {
+                font-size: 16px;
+            }
+
+            input,
+            select,
+            button {
+                font-size: 14px;
+            }
         }
     </style>
 </head>
-
 <body>
     <header>
         Tom<span style="color: #ff6600;">AI</span>to
@@ -179,28 +214,38 @@
         
         <label for="location">Location:</label>
         <input type="text" id="location" name="location" required/>
-        
-        <label for="variety">Variety:</label>
-        <input type="text" id="variety" name="variety" required/>
 
         <label for="uploadInput">Choose an image:</label>
         <input id="uploadInput" type="file" required/>
         
-        <button type="Sprawdz">Check the ripeness</button>
+        <button type="submit" id="checkRipenessBtn">Check the ripeness</button>
     </form>
     
-    <canvas></canvas>
-    <div id="weatherInfo"></div>
+    <div id="loadingMessage" style="display: none;">Loading...</div>
+
+    <canvas style="display: none; max-width: 100%;"></canvas>
+    
+    <div id="weatherInfo" style="display: none;"></div>
+
     <script>
         const form = document.getElementById("uploadForm");
+        const loadingMessage = document.getElementById("loadingMessage");
+        const weatherInfo = document.getElementById("weatherInfo");
+        const canvas = document.querySelector("canvas");
 
         form.addEventListener("submit", async (event) => {
             event.preventDefault();
 
+            // Show loading message and weather info
+            loadingMessage.style.display = "block";
+            weatherInfo.style.display = "block";
+
+            // Disable the button to prevent multiple submissions
+            document.getElementById("checkRipenessBtn").disabled = true;
+
             const fileInput = document.getElementById("uploadInput");
             const cropTypeInput = document.getElementById("cropType");
             const locationInput = document.getElementById("location");
-            const varietyInput = document.getElementById("variety");
 
             const file = fileInput.files[0];
 
@@ -208,7 +253,6 @@
             data.append("image_file", file);
             data.append("cropType", cropTypeInput.value);
             data.append("location", locationInput.value);
-            data.append("variety", varietyInput.value);
 
             const response = await fetch("/detect", {
                 method: "post",
@@ -218,37 +262,33 @@
             const boxes = await response.json();
             draw_image_and_boxes(file, boxes);
 
-            const location = locationInput.value;
+            // Hide loading message and enable the button after canvas is loaded
+            loadingMessage.style.display = "none";
+            document.getElementById("checkRipenessBtn").disabled = false;
 
-            if (cropTypeInput.value == "external") {
-                getWeather(location);
-            } 
-            
-            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)];
-            document.getElementById("weatherInfo").innerText = "TIP! To maximalize your yields " + randomTip;
-            }
+            // Update weather info text
+            updateWeatherInfo(locationInput.value, cropTypeInput.value);
         });
 
         function draw_image_and_boxes(file, boxes) {
             const img = new Image()
             img.src = URL.createObjectURL(file);
             img.onload = () => {
-                const canvas = document.querySelector("canvas");
+                // Show canvas once the image is loaded
+                canvas.style.display = "block";
+                weatherInfo.innerText = ""; // Clear previous weather info
+
+                const ctx = canvas.getContext("2d");
                 canvas.width = img.width;
                 canvas.height = img.height;
-                const ctx = canvas.getContext("2d");
                 ctx.drawImage(img, 0, 0);
                 ctx.strokeStyle = "#00FF00";
                 ctx.lineWidth = 5;
                 ctx.font = "20px serif";
+
+                // Draw bounding boxes
                 boxes.forEach(([x1, y1, x2, y2, object_type, prob]) => {
-                    const label = `${object_type}`;
+                    const label = `${object_type} ${prob.toFixed(2)}`;
                     ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
                     ctx.fillStyle = "#00ff00";
                     const width = ctx.measureText(label).width;
@@ -259,39 +299,40 @@
             }
         }
 
-        async function getWeather(location) {
-    const apiKey = "1fc6a52c96331d035a828cc0c1606241";
-    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}`;
+        async function updateWeatherInfo(location, cropType) {
+            const apiKey = "1fc6a52c96331d035a828cc0c1606241";
+            const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}`;
 
-    try {
-        const weatherResponse = await fetch(apiUrl);
-        const weatherData = await weatherResponse.json();
+            try {
+                const weatherResponse = await fetch(apiUrl);
+                const weatherData = await weatherResponse.json();
 
-        if (weatherData.main && weatherData.main.temp) {
-            const temperatureKelvin = weatherData.main.temp;
-            const temperatureCelsius = temperatureKelvin - 273.15;
-            const tempRound = Math.round(temperatureCelsius);
+                if (weatherData.main && weatherData.main.temp) {
+                    const temperatureKelvin = weatherData.main.temp;
+                    const temperatureCelsius = temperatureKelvin - 273.15;
+                    const tempRound = Math.round(temperatureCelsius);
 
-            const weatherCondition = weatherData.weather[0].main;
-            const isRaining = weatherCondition === 'Rain';
+                    const weatherCondition = weatherData.weather[0].main;
+                    const isRaining = weatherCondition === 'Rain';
 
-            let additionalInfo = `${isRaining ? 'Rain is expected in your town today, so you dont have to water your tomatoes' :
-             'No rainfall is expected in the city today, so you need to water your tomatoes!'} Temperature in ${location} is ${tempRound} °C.`;
+                    let additionalInfo = `${isRaining ? 'Rain is expected in your town today, so you dont have to water your tomatoes' :
+                        'No rainfall is expected in the city today, so you need to water your tomatoes!'} Temperature in ${location} is ${tempRound} °C.`;
 
-            if (tempRound < 15) {
-                additionalInfo += ' So you need to cover your tomatoes!';
+                    if (tempRound < 15) {
+                        additionalInfo += ' So you need to cover your tomatoes!';
+                    }
+
+                    weatherInfo.innerText = additionalInfo;
+                } else {
+                    weatherInfo.innerText = "Unable to fetch weather data.";
+                }
+
+            } catch (error) {
+                console.error("Error fetching weather data:", error);
+                weatherInfo.innerText = "Error fetching weather data.";
             }
-
-            document.getElementById("weatherInfo").innerText = additionalInfo;
-        } else {
-            document.getElementById("weatherInfo").innerText = "Unable to fetch weather data.";
         }
 
-    } catch (error) {
-        console.error("Error fetching weather data:", error);
-        document.getElementById("weatherInfo").innerText = "Error fetching weather data.";
-    }
-}
 
     </script>  
         <script>
