Update templates/index.html

templates/index.html

@@ -149,7 +149,6 @@
         .form-group label {
             display: flex;
             align-items: center;
-            justify-content: space-between; /* Adjusted to space label and value */
             gap: var(--space-xs);
             font-weight: 600;
             color: var(--text);
@@ -162,18 +161,6 @@
             color: var(--color-accent);
         }
 
-        /* Value display for sliders */
-        .slider-value {
-            color: var(--color-primary);
-            font-weight: 700;
-            background: var(--surface);
-            padding: 2px 8px;
-            border-radius: var(--radius-sm);
-            box-shadow: var(--shadow-sm);
-            min-width: 45px;
-            text-align: center;
-        }
-
         .form-control {
             background: var(--bg-light);
             border: 2px solid transparent;
@@ -204,71 +191,6 @@
             font-weight: 300;
         }
 
-        /* --- Custom Range Slider Styling --- */
-        input[type=range] {
-            -webkit-appearance: none; /* Hides default slider so we can create custom one */
-            width: 100%; 
-            background: transparent; 
-            margin: 10px 0;
-        }
-
-        input[type=range]:focus {
-            outline: none; 
-        }
-
-        /* Track Styles */
-        input[type=range]::-webkit-slider-runnable-track {
-            width: 100%;
-            height: 10px;
-            cursor: pointer;
-            background: #d1e7dd; /* Light green track */
-            border-radius: 5px;
-            border: 1px solid var(--border-light);
-        }
-        
-        input[type=range]::-moz-range-track {
-            width: 100%;
-            height: 10px;
-            cursor: pointer;
-            background: #d1e7dd;
-            border-radius: 5px;
-            border: 1px solid var(--border-light);
-        }
-
-        /* Thumb (Handle) Styles */
-        input[type=range]::-webkit-slider-thumb {
-            height: 24px;
-            width: 24px;
-            border-radius: 50%;
-            background: var(--color-accent);
-            cursor: pointer;
-            -webkit-appearance: none;
-            margin-top: -8px; /* Offset to center on track */
-            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
-            transition: background 0.2s, transform 0.2s;
-        }
-
-        input[type=range]::-moz-range-thumb {
-            height: 24px;
-            width: 24px;
-            border: none;
-            border-radius: 50%;
-            background: var(--color-accent);
-            cursor: pointer;
-            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
-            transition: background 0.2s, transform 0.2s;
-        }
-
-        input[type=range]:active::-webkit-slider-thumb {
-            transform: scale(1.1);
-            background: var(--color-primary);
-        }
-        input[type=range]:active::-moz-range-thumb {
-            transform: scale(1.1);
-            background: var(--color-primary);
-        }
-        /* ---------------------------------- */
-
         .predict-btn {
             background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
             color: white;
@@ -478,27 +400,17 @@
                     <label for="temperature"><i class="bi bi-thermometer-half"></i> Temperature (°C)</label>
                     <input type="number" class="form-control" id="temperature" name="temperature" placeholder="Enter temperature" step="0.1" required>
                 </div>
-                
-                <!-- Updated Humidity Slider -->
                 <div class="form-group">
-                    <label for="humidity">
-                        <span><i class="bi bi-droplet-half"></i> Humidity (%)</span>
-                        <span id="humidity-display" class="slider-value">50</span>
-                    </label>
-                    <input type="range" class="form-control-range" id="humidity" name="humidity" min="0" max="100" value="50" step="0.1" required>
+                    <label for="humidity"><i class="bi bi-droplet-half"></i> Humidity (%)</label>
+                    <input type="number" class="form-control" id="humidity" name="humidity" placeholder="Enter humidity" step="0.1" min="0" max="100" required>
                 </div>
             </div>
             
             <div class="form-row">
-                <!-- Updated Soil Moisture Slider -->
                 <div class="form-group">
-                    <label for="moisture">
-                        <span><i class="bi bi-moisture"></i> Soil Moisture (%)</span>
-                        <span id="moisture-display" class="slider-value">50</span>
-                    </label>
-                    <input type="range" class="form-control-range" id="moisture" name="moisture" min="0" max="100" value="50" step="0.1" required>
+                    <label for="moisture"><i class="bi bi-moisture"></i> Soil Moisture (%)</label>
+                    <input type="number" class="form-control" id="moisture" name="moisture" placeholder="Enter soil moisture" step="0.1" min="0" max="100" required>
                 </div>
-
                 <div class="form-group">
                     <label for="soil_type"><i class="bi bi-layers-fill"></i> Soil Type</label>
                     <select class="form-control" id="soil_type" name="soil_type" required>
@@ -622,26 +534,6 @@
         </div>
         {% endif %}
     </div>
-
-    <!-- Script to update slider values dynamically -->
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Function to update display
-            function setupSlider(inputId, displayId) {
-                const slider = document.getElementById(inputId);
-                const display = document.getElementById(displayId);
-                
-                if(slider && display) {
-                    slider.addEventListener('input', function() {
-                        display.textContent = this.value;
-                    });
-                }
-            }
-
-            setupSlider('humidity', 'humidity-display');
-            setupSlider('moisture', 'moisture-display');
-        });
-    </script>
 </body>
 
 </html>