crop_Recommendation_System_npk

Sleeping

App Files Files Community

pranit144 commited on Sep 16, 2025

Commit

a650dd6

verified ·

1 Parent(s): 550ee19

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +242 -153

templates/index.html CHANGED Viewed

@@ -1,153 +1,242 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Crop Recommendation System</title>
-    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-    <style>
-        body {
-            background-color: #eef7ee;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        .container {
-            margin: 50px auto;
-            padding: 30px;
-            border: 2px solid #28a745;
-            border-radius: 15px;
-            max-width: 1200px;
-            background-color: #f9fff9;
-            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
-        }
-        h1 {
-            color: #28a745;
-            font-weight: bold;
-            text-align: center;
-            margin-bottom: 30px;
-        }
-        .input-section {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-        }
-        .form-group {
-            width: 60%;
-        }
-        .form-label {
-            display: block;
-            margin-top: 15px;
-            font-weight: bold;
-        }
-        .form-control {
-            width: 100%;
-        }
-        .image-section {
-            width: 35%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-top: 50px; /* Moves the image section down */
-            margin-left: -30px; /* Aligns the image section a little to the left */
-        }
-        .image-section img {
-            max-width: 100%;
-            height: 580px;
-            border-radius: 10px;
-            border: 3px solid #28a745; /* Green border around the image */
-        }
-        .btn-predict {
-            background-color: #28a745;
-            color: white;
-            font-weight: bold;
-            margin-top: 20px;
-            width: 100%;
-        }
-        .result-container {
-            margin-top: 30px;
-            border: 2px solid #28a745;
-            padding: 20px;
-            background-color: #e3ffe3;
-            border-radius: 10px;
-            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-        }
-        .result-container h3 {
-            color: #28a745;
-            text-align: center;
-        }
-        .ai-suggestions {
-            margin-top: 20px;
-            background-color: #ffffff;
-            padding: 15px;
-            border-radius: 10px;
-            border: 1px solid #28a745;
-            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
-            text-align: left;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <h1>Crop Recommendation System</h1>
-        <form id="cropForm" method="POST">
-            <div class="input-section">
-                <div class="form-group">
-                    <label class="form-label" for="location">Enter Location</label>
-                    <input type="text" class="form-control" id="location" name="location" required>
-                    <label class="form-label" for="nitrogen">Enter Nitrogen (N)</label>
-                    <input type="text" class="form-control" id="nitrogen" name="nitrogen" required>
-                    <label class="form-label" for="phosphorus">Enter Phosphorus (p)</label>
-                    <input type="text" class="form-control" id="phosphorus" name="phosphorus" required>
-                    <label class="form-label" for="potassium">Enter Potassium (k)</label>
-                    <input type="text" class="form-control" id="potassium" name="potassium" required>
-                    <label class="form-label" for="temperature">Enter Temperature (°C)</label>
-                    <input type="text" class="form-control" id="temperature" name="temperature" required>
-                    <label class="form-label" for="humidity">Enter Humidity (%)</label>
-                    <input type="text" class="form-control" id="humidity" name="humidity" required>
-                    <label class="form-label" for="ph">Enter pH Level</label>
-                    <input type="text" class="form-control" id="ph" name="ph" required>
-                    <label class="form-label" for="rainfall">Enter Rainfall (mm)</label>
-                    <input type="text" class="form-control" id="rainfall" name="rainfall" required>
-                </div>
-                <div class="image-section">
-                    <img src="https://www.shutterstock.com/image-photo/young-corn-plants-growing-on-600nw-2299683499.jpg" alt="Crop Image">
-                </div>
-            </div>
-            <button type="submit" class="btn btn-predict">Predict Crop</button>
-        </form>
-        <!-- Results will be shown here -->
-        <div class="result-container" id="resultContainer" style="display:none;">
-            <h3>Predicted Crop: <span id="predictedCrop"></span></h3>
-            <div class="ai-suggestions" id="aiSuggestions"></div>
-        </div>
-    </div>
-    <!-- Bootstrap and jQuery JS -->
-    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
-    <script>
-        $(document).ready(function() {
-            $('#cropForm').on('submit', function(event) {
-                event.preventDefault();
-                $.ajax({
-                    url: '/predict',
-                    type: 'POST',
-                    data: $(this).serialize(),
-                    success: function(response) {
-                        $('#predictedCrop').text(response.predicted_crop);
-                        $('#aiSuggestions').text(response.ai_suggestions);
-                        $('#resultContainer').show();
-                    }
-                });
-            });
-        });
-    </script>
-</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crop Recommendation System</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-color: #eef7ee;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0; /* Remove default body margin */
+            padding: 0; /* Remove default body padding */
+        }
+        .container {
+            margin: 30px auto; /* Adjust margin for better spacing on all screens */
+            padding: 20px; /* Adjust padding */
+            border: 2px solid #28a745;
+            border-radius: 15px;
+            max-width: 1200px;
+            background-color: #f9fff9;
+            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+        }
+        h1 {
+            color: #28a745;
+            font-weight: bold;
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 2.5rem; /* Responsive font size for H1 */
+        }
+        .input-section {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            flex-wrap: wrap; /* Allow items to wrap on smaller screens */
+        }
+        .form-group {
+            width: 60%;
+            padding-right: 15px; /* Add some padding for spacing */
+        }
+        .form-label {
+            display: block;
+            margin-top: 15px;
+            font-weight: bold;
+        }
+        .form-control {
+            width: 100%;
+        }
+        .image-section {
+            width: 35%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 50px;
+            margin-left: -30px;
+            padding-left: 15px; /* Add some padding for spacing */
+        }
+        .image-section img {
+            max-width: 100%;
+            height: 580px; /* Keep height for larger screens */
+            border-radius: 10px;
+            border: 3px solid #28a745;
+            object-fit: cover; /* Ensures the image covers the area without distortion */
+        }
+        .btn-predict {
+            background-color: #28a745;
+            color: white;
+            font-weight: bold;
+            margin-top: 30px; /* Increase top margin for button */
+            width: 100%;
+            padding: 12px; /* Make button more clickable */
+            font-size: 1.1rem; /* Adjust button font size */
+        }
+        .result-container {
+            margin-top: 30px;
+            border: 2px solid #28a745;
+            padding: 20px;
+            background-color: #e3ffe3;
+            border-radius: 10px;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        }
+        .result-container h3 {
+            color: #28a745;
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 1.8rem; /* Responsive font size for H3 */
+        }
+        .ai-suggestions {
+            margin-top: 20px;
+            background-color: #ffffff;
+            padding: 15px;
+            border-radius: 10px;
+            border: 1px solid #28a745;
+            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+            text-align: left;
+            line-height: 1.6; /* Improve readability */
+        }
+        /* --- Media Queries for Responsiveness --- */
+        /* Tablets and smaller desktops (e.g., Bootstrap's md breakpoint) */
+        @media (max-width: 991.98px) {
+            .container {
+                margin: 20px auto;
+                padding: 15px;
+            }
+            h1 {
+                font-size: 2rem;
+            }
+            .form-group {
+                width: 100%; /* Full width for form inputs */
+                padding-right: 0;
+            }
+            .image-section {
+                width: 100%; /* Full width for image */
+                margin-top: 30px; /* Adjust top margin */
+                margin-left: 0; /* Reset left margin */
+                padding-left: 0;
+                order: -1; /* Place image above form fields on smaller screens */
+            }
+            .image-section img {
+                max-height: 400px; /* Limit image height on smaller screens */
+                height: auto; /* Allow height to adjust proportionally */
+            }
+        }
+        /* Mobile devices (e.g., Bootstrap's sm breakpoint) */
+        @media (max-width: 767.98px) {
+            h1 {
+                font-size: 1.8rem;
+                margin-bottom: 20px;
+            }
+            .form-label {
+                margin-top: 10px;
+            }
+            .btn-predict {
+                margin-top: 20px;
+                padding: 10px;
+                font-size: 1rem;
+            }
+            .result-container {
+                padding: 15px;
+            }
+            .result-container h3 {
+                font-size: 1.5rem;
+            }
+            .ai-suggestions {
+                padding: 10px;
+                font-size: 0.95rem;
+            }
+            .image-section {
+                margin-top: 20px;
+            }
+            .image-section img {
+                max-height: 250px; /* Further limit image height on very small screens */
+            }
+        }
+        /* Extra small devices */
+        @media (max-width: 575.98px) {
+            h1 {
+                font-size: 1.5rem;
+            }
+            .container {
+                margin: 15px;
+                padding: 10px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Crop Recommendation System</h1>
+        <form id="cropForm" method="POST">
+            <div class="input-section">
+                <div class="form-group">
+                    <label class="form-label" for="location">Enter Location</label>
+                    <input type="text" class="form-control" id="location" name="location" required>
+                    <label class="form-label" for="nitrogen">Enter Nitrogen (N)</label>
+                    <input type="text" class="form-control" id="nitrogen" name="nitrogen" required>
+                    <label class="form-label" for="phosphorus">Enter Phosphorus (p)</label>
+                    <input type="text" class="form-control" id="phosphorus" name="phosphorus" required>
+                    <label class="form-label" for="potassium">Enter Potassium (k)</label>
+                    <input type="text" class="form-control" id="potassium" name="potassium" required>
+                    <label class="form-label" for="temperature">Enter Temperature (°C)</label>
+                    <input type="text" class="form-control" id="temperature" name="temperature" required>
+                    <label class="form-label" for="humidity">Enter Humidity (%)</label>
+                    <input type="text" class="form-control" id="humidity" name="humidity" required>
+                    <label class="form-label" for="ph">Enter pH Level</label>
+                    <input type="text" class="form-control" id="ph" name="ph" required>
+                    <label class="form-label" for="rainfall">Enter Rainfall (mm)</label>
+                    <input type="text" class="form-control" id="rainfall" name="rainfall" required>
+                </div>
+                <div class="image-section">
+                    <img src="https://www.shutterstock.com/image-photo/young-corn-plants-growing-on-600nw-2299683499.jpg" alt="Crop Image">
+                </div>
+            </div>
+            <button type="submit" class="btn btn-predict">Predict Crop</button>
+        </form>
+        <!-- Results will be shown here -->
+        <div class="result-container" id="resultContainer" style="display:none;">
+            <h3>Predicted Crop: <span id="predictedCrop"></span></h3>
+            <div class="ai-suggestions" id="aiSuggestions"></div>
+        </div>
+    </div>
+    <!-- Bootstrap and jQuery JS -->
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
+    <script>
+        $(document).ready(function() {
+            $('#cropForm').on('submit', function(event) {
+                event.preventDefault();
+                $.ajax({
+                    url: '/predict', // Ensure this URL matches your backend endpoint
+                    type: 'POST',
+                    data: $(this).serialize(),
+                    success: function(response) {
+                        $('#predictedCrop').text(response.predicted_crop);
+                        $('#aiSuggestions').text(response.ai_suggestions);
+                        $('#resultContainer').show();
+                    },
+                    error: function(xhr, status, error) {
+                        console.error("AJAX Error:", status, error);
+                        $('#predictedCrop').text("Error predicting crop.");
+                        $('#aiSuggestions').text("Please try again or check your input values.");
+                        $('#resultContainer').show();
+                    }
+                });
+            });
+        });
+    </script>
+</body>
+</html>