From e619bd31ad26a6a9dfa1f4eaf44b5c4b82982eda Mon Sep 17 00:00:00 2001
From: anetla <anetla@st.amu.edu.pl>
Date: Thu, 18 Jan 2024 23:28:35 +0100
Subject: [PATCH] modify index, add responsive features

---
 index.html | 178 +++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 159 insertions(+), 19 deletions(-)
diff --git a/index.html b/index.html
index 0e6e2f4..7da7de7 100644
--- a/index.html
+++ b/index.html
@@ -1,44 +1,173 @@
-<!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TomAIto</title>
     <style>
-        canvas {
-            border: 1px solid black;
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f5f5f5;
+            color: #333;
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        body.dark-mode {
+            background-color: #333;
+            color: #fff !important;
+        }
+
+        header {
+            background-color: #4CAF50;
+            color: white;
+            text-align: center;
+            padding: 15px;
+            font-size: 24px;
+            width: 100%;
+            position: relative;
             display: flex;
-            flex-direction: column;
-            max-width: 300px; /* Ustaw maksymalną szerokość formularza */
-            margin: auto; /* Centruj formularz na stronie */
-            margin-top: 10px;
+            justify-content: center;
+        }
+
+        header span {
+            color: #ff6600;
+            font-weight: bold;
+        }
+
+        #darkModeToggle {
+            width: 90px;
+            height: 30px;
+            background-color: #333;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            position: absolute;
+            top: 50%;
+            right: 20px;
+            transform: translateY(-50%);
+        }
+
+        #darkModeToggle:hover {
+            background-color: #001a33;
+        }
+
+        canvas {
+            border: 1px solid #ddd;
+            max-width: 100%;
+            display: block;
+            margin: auto;
+            margin-top: 20px;
+            background-color: white;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 5px;
         }
 
         #weatherInfo {
-            display: flex;
-            flex-direction: column;
-            max-width: 300px; /* Ustaw maksymalną szerokość formularza */
-            margin: auto; /* Centruj formularz na stronie */
-            margin-top: 10px;
-            }
-
+            max-width: 100%;
+            margin: auto;
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #fff;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 5px;
+            color: #333;
+        }
 
         form {
+            max-width: 600px;
+            width: 100%;
+            margin: auto;
+            padding: 20px;
             display: flex;
             flex-direction: column;
-            max-width: 300px; /* Ustaw maksymalną szerokość formularza */
-            margin: auto; /* Centruj formularz na stronie */
+            align-items: center;
+            background-color: #f9f9f9;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 5px;
+            color: #333;
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        body.dark-mode form {
+            background-color: #333;
+            color: #fff;
         }
 
         label {
             margin-top: 10px;
+            font-weight: bold;
+        }
+
+        input,
+        select {
+            width: 100%;
+            box-sizing: border-box;
+            margin-bottom: 15px;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background-color: #fff;
+            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;
+        }
+
+        input[type="file"]:focus {
+            outline: none;
+            border-color: #001a33;
         }
 
         button {
-            margin-top: 10px;
+            width: 100%;
+            padding: 15px;
+            border: none;
+            border-radius: 4px;
+            background-color: #4CAF50;
+            color: white;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            font-weight: bold;
+        }
+
+        button:hover {
+            background-color: #001a33;
         }
     </style>
 </head>
+
 <body>
+    <header>
+        Tom<span style="color: #ff6600;">AI</span>to
+        <button id="darkModeToggle" onclick="toggleDarkMode()">Dark Mode</button>
+    </header>
+
     <form id="uploadForm">
 
         <label for="cropType">Crop Type:</label>
@@ -57,7 +186,7 @@
         <label for="uploadInput">Choose an image:</label>
         <input id="uploadInput" type="file" required/>
         
-        <button type="Sprawdz">Sprawdz</button>
+        <button type="Sprawdz">Check the ripeness</button>
     </form>
     
     <canvas></canvas>
@@ -165,5 +294,16 @@
 }
 
     </script>  
+        <script>
+            // Dark mode toggle functionality
+            function toggleDarkMode() {
+                const body = document.body;
+                body.classList.toggle('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';
+            }
+        </script>
 </body>
 </html>
\ No newline at end of file
