Update templates/index.html

templates/index.html

@@ -25,7 +25,7 @@
 
         body {
             font-family: 'Outfit', sans-serif;
-            background-color:#ffff;
+            background-color: var(--light-bg);
             color: #1f2937;
             padding-bottom: 3rem;
         }
@@ -34,17 +34,18 @@
         .header-section {
             background-color: var(--primary-green);
             color: white;
-            padding: 2rem 1rem 2rem;
+            padding: 3rem 1rem 6rem;
             text-align: center;
-            margin-bottom: 2rem;
+            border-bottom-left-radius: 50% 20px;
+            border-bottom-right-radius: 50% 20px;
+            margin-bottom: -4rem;
         }
 
         .main-container {
             max-width: 900px;
             /* Reduced width for focus */
             margin: 0 auto;
-            border:3px dashed var(--primary-green);
-            border-radius: 20px;
+            padding: 0 1rem;
         }
 
         /* --- Focused Card --- */
@@ -52,7 +53,7 @@
             background: white;
             border-radius: 20px;
             box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
-            padding: 1.5rem;
+            padding: 2.5rem;
             border: 1px solid rgba(0, 0, 0, 0.04);
             position: relative;
         }
@@ -63,10 +64,10 @@
             letter-spacing: 1px;
             font-weight: 700;
             color: var(--accent-green);
-            margin-bottom: 0.5rem;
+            margin-bottom: 1rem;
             display: block;
             border-bottom: 2px solid #f3f4f6;
-
+            padding-bottom: 0.5rem;
         }
 
         /* --- Map --- */
@@ -74,7 +75,7 @@
             border-radius: 12px;
             overflow: hidden;
             height: 250px;
-
+            margin-bottom: 1.5rem;
             box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
             position: relative;
         }
@@ -89,18 +90,17 @@
             font-size: 0.9rem;
             font-weight: 600;
             color: #4b5563;
-
+            margin-bottom: 0.4rem;
         }
 
         .form-select,
         .form-control {
             border-radius: 10px;
-            padding: 0.5rem 0.5rem;
+            padding: 0.75rem 1rem;
             border: 1px solid #e5e7eb;
             font-size: 1rem;
             transition: 0.2s;
             background-color: #f9fafb;
-            border: 1px solid var(--accent-green);
         }
 
         .form-select:focus,
@@ -196,7 +196,7 @@
             <span class="section-label">02. Crop Profile</span>
             <div class="row g-3 mb-4">
                 <div class="col-md-6">
-                    <label class="form-label">🌾 Crop Type</label>
+                    <label class="form-label">Crop Type</label>
                     <select class="form-select" id="crop_type" name="crop_type" required>
                         <option value="" selected disabled>Select Crop...</option>
                         <option value="Rice (Paddy)">Rice (Paddy)</option>
@@ -213,7 +213,7 @@
                     </select>
                 </div>
                 <div class="col-md-6">
-                    <label class="form-label">🏞️ Soil Type</label>
+                    <label class="form-label">Soil Type</label>
                     <select class="form-select" id="soil_type" name="soil_type" required>
                         <option value="Black Soil">Black Soil</option>
                         <option value="Red Soil">Red Soil</option>
@@ -228,7 +228,7 @@
             <span class="section-label">03. Cropping Season</span>
             <div class="row g-3 mb-4">
                 <div class="col-md-6">
-                    <label class="form-label">📅 Select Season</label>
+                    <label class="form-label">Select Season</label>
                     <div class="input-group">
                         <span class="input-group-text bg-light"><i class="bi bi-calendar-range"></i></span>
                         <select class="form-select" id="season" name="season" required>
@@ -240,7 +240,7 @@
                     </div>
                 </div>
                 <div class="col-md-6">
-                    <label class="form-label">🌐 Report Language</label>
+                    <label class="form-label">Report Language</label>
                     <select class="form-select" id="language" name="language">
                         <option value="English">English</option>
                         <option value="Hindi">Hindi</option>
@@ -258,7 +258,9 @@
                 ANALYZE CROP RISK <i class="bi bi-stars ms-2"></i>
             </button>
 
-            
+            <div class="text-center mt-3 text-muted small">
+                Powered by Gemini 2.0 Flash • Open-Meteo Historical Data
+            </div>
 
         </div>
     </form>