Update templates/index.html

templates/index.html

@@ -45,13 +45,11 @@
             --space-xl: 3rem;
             --space-2xl: 4rem;
         }
-
         * {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
         }
-
         body {
             background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
             font-family: 'Outfit', sans-serif;
@@ -59,13 +57,11 @@
             min-height: 100vh;
             line-height: 1.6;
         }
-
         .main-container {
             max-width: 1400px;
             margin: 0 auto;
             padding: 0 var(--space-md);
         }
-
         .heading {
             background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
             color: white;
@@ -76,7 +72,6 @@
             margin: 0 0 var(--space-xl) 0;
             border-radius: 0 0 var(--radius-xl) var(--radius-xl);
         }
-
         .heading::before {
             content: '';
             position: absolute;
@@ -89,14 +84,12 @@
                 radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08) 0%, transparent 50%);
             pointer-events: none;
         }
-
         .heading i {
             font-size: 3rem;
             margin-bottom: var(--space-sm);
             display: block;
             opacity: 0.9;
         }
-
         .heading h1 {
             font-size: 2.5rem;
             font-weight: 700;
@@ -106,14 +99,12 @@
             text-shadow: 0 2px 10px rgba(0,0,0,0.1);
             margin: 0;
         }
-
         .heading p {
             font-size: 1.1rem;
             margin-top: var(--space-sm);
             opacity: 0.95;
             font-weight: 300;
         }
-
         .input-container {
             background: var(--bg-light);
             border-radius: 20px;
@@ -125,12 +116,10 @@
             border: 2px solid var(--border);
             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         }
-
         .input-container:hover {
             transform: translateY(-4px);
             box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18);
         }
-
         .input-container::before {
             content: '';
             position: absolute;
@@ -141,11 +130,9 @@
             background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
             border-radius: var(--radius-xl) var(--radius-xl) 0 0;
         }
-
         .form-group {
             margin-bottom: var(--space-md);
         }
-
         .form-group label {
             display: flex;
             align-items: center;
@@ -155,17 +142,14 @@
             margin-bottom: var(--space-xs);
             font-size: 0.95rem;
         }
-
         .form-group label i {
             font-size: 1.1rem;
             color: var(--color-accent);
         }
-
         .form-control {
             background: var(--bg-light);
             border: 2px solid transparent;
             border-radius: var(--radius-md);
-            
             font-family: 'Outfit', sans-serif;
             font-size: 1rem;
             color: var(--text);
@@ -173,11 +157,9 @@
             transition: all 0.3s ease;
             box-shadow: var(--shadow-sm);
         }
-
         .form-control:hover {
             border-color: var(--border-light);
         }
-
         .form-control:focus {
             background: var(--surface);
             outline: none;
@@ -185,12 +167,6 @@
             box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.1), var(--shadow-md);
             transform: translateY(-1px);
         }
-
-        .form-control::placeholder {
-            color: var(--text-light);
-            font-weight: 300;
-        }
-
         .predict-btn {
             background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
             color: white;
@@ -207,36 +183,57 @@
             overflow: hidden;
             transition: all 0.3s ease;
             box-shadow: 0 4px 15px rgba(26, 93, 58, 0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
         }
-
-        .predict-btn::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-            transition: left 0.5s ease;
-        }
-
-        .predict-btn:hover::before {
-            left: 100%;
-        }
-
         .predict-btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 6px 25px rgba(26, 93, 58, 0.4);
         }
 
-        .predict-btn:active {
-            transform: translateY(0);
+        /* --- LOADER STYLES --- */
+        #loader-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(8px);
+            display: none; /* Hidden by default */
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            z-index: 9999;
+        }
+        .loader-spinner {
+            width: 80px;
+            height: 80px;
+            border: 6px solid var(--bg-light);
+            border-top: 6px solid var(--color-primary);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-bottom: 20px;
+            box-shadow: var(--shadow-md);
+        }
+        .loader-text {
+            font-weight: 600;
+            color: var(--color-primary);
+            font-size: 1.2rem;
+            letter-spacing: 1px;
+            animation: pulse 1.5s ease-in-out infinite;
         }
-
-        .predict-btn:disabled {
-            opacity: 0.7;
-            cursor: not-allowed;
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; transform: scale(1); }
+            50% { opacity: 0.6; transform: scale(1.05); }
+        }
+        /* -------------------- */
 
         .result-container {
             display: grid;
@@ -246,13 +243,11 @@
             margin-bottom: var(--space-2xl);
             animation: fadeInUp 0.6s ease-out;
         }
-
         @media (max-width: 968px) {
             .result-container {
                 grid-template-columns: 1fr;
             }
         }
-
         .left-container,
         .right-container {
             background: var(--surface);
@@ -264,7 +259,6 @@
             position: relative;
             overflow: hidden;
         }
-
         .left-container::before,
         .right-container::before {
             content: '';
@@ -275,21 +269,6 @@
             height: 3px;
             background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
         }
-
-        .left-container:hover,
-        .right-container:hover {
-            transform: translateY(-6px);
-            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
-        }
-
-        .section-heading {
-            color: var(--color-primary);
-            font-weight: 600;
-            text-align: center;
-            margin-bottom: var(--space-lg);
-            font-size: 1.5rem;
-        }
-
         .fertilizer-name {
             background: linear-gradient(135deg, rgba(26, 93, 58, 0.08) 0%, rgba(25, 135, 84, 0.08) 100%);
             color: var(--color-primary);
@@ -302,7 +281,6 @@
             margin: var(--space-md) 0;
             box-shadow: var(--shadow-sm);
         }
-
         .fertilizer-info {
             background: var(--bg-light);
             padding: var(--space-lg);
@@ -313,80 +291,38 @@
             color: var(--text);
             font-size: 1.05rem;
         }
-
-        .fertilizer-info strong {
+        .section-heading {
             color: var(--color-primary);
             font-weight: 600;
+            text-align: center;
+            margin-bottom: var(--space-lg);
+            font-size: 1.5rem;
         }
-
-        .gauge-container {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: var(--space-md);
-            background: var(--bg-light);
-            border-radius: var(--radius-md);
-        }
-
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(30px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .input-container {
-            animation: fadeInUp 0.5s ease-out;
-        }
-
         .form-row {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: var(--space-md);
             margin-bottom: 0;
         }
-
         @media (max-width: 768px) {
             .form-row {
                 grid-template-columns: 1fr;
             }
-            
-            .heading h1 {
-                font-size: 2rem;
-            }
-        }
-
-        button:focus,
-        input:focus,
-        select:focus {
-            outline: 2px solid var(--color-accent);
-            outline-offset: 2px;
-        }
-
-        ::-webkit-scrollbar {
-            width: 10px;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: var(--bg-light);
         }
-
-        ::-webkit-scrollbar-thumb {
-            background: var(--color-primary);
-            border-radius: 5px;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--color-primary-dark);
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(30px); }
+            to { opacity: 1; transform: translateY(0); }
         }
     </style>
 </head>
 
 <body>
+    <!-- Full Screen Loader Overlay -->
+    <div id="loader-overlay">
+        <div class="loader-spinner"></div>
+        <div class="loader-text">Analyzing Soil Conditions...</div>
+    </div>
+
     <div class="heading">
         <i class="bi bi-flower2"></i>
         <h1>Fertilizer Recommender & Usage Requirement Estimator</h1>
@@ -394,7 +330,8 @@
     </div>
 
     <div class="main-container">
-        <form method="post" class="input-container">
+        <!-- Added id="predictionForm" for JS handling -->
+        <form method="post" id="predictionForm" class="input-container">
             <div class="form-row">
                 <div class="form-group">
                     <label for="temperature"><i class="bi bi-thermometer-half"></i> Temperature (°C)</label>
@@ -479,7 +416,7 @@
             
             <div class="right-container">
                 <h3 class="section-heading">Optimal Fertilizer Usage (kg/Acres)</h3>
-                <div class="gauge-container">
+                <div class="gauge-container" style="display: flex; justify-content: center;">
                     <div id="gauge"></div>
                 </div>
                 <script>
@@ -489,51 +426,42 @@
                         mode: 'gauge+number',
                         value: optimalUsage,
                         gauge: {
-                            axis: { 
-                                range: [0, 100], 
-                                tickwidth: 2, 
-                                tickcolor: "#1a5d3a" 
-                            },
+                            axis: { range: [0, 100], tickwidth: 2, tickcolor: "#1a5d3a" },
                             bar: { color: "#198754" },
                             bgcolor: "white",
-                            bordercolor: "#143d2e",
                             borderwidth: 2,
                             steps: [
                                 { range: [0, 33], color: "#e8f5e9" },
                                 { range: [33, 66], color: "#a5d6a7" },
                                 { range: [66, 100], color: "#66bb6a" }
-                            ],
-                            threshold: {
-                                line: { color: "#c62828", width: 4 },
-                                thickness: 0.75,
-                                value: 90
-                            }
+                            ]
                         }
                     }];
-
                     var layout = {
-                        width: 400,
-                        height: 300,
+                        width: 350, height: 250,
                         margin: { t: 25, b: 25, l: 25, r: 25 },
                         paper_bgcolor: 'rgba(0,0,0,0)',
-                        font: { 
-                            family: 'Outfit, sans-serif',
-                            size: 14,
-                            color: '#1f2937'
-                        }
-                    };
-
-                    var config = {
-                        responsive: true,
-                        displayModeBar: false
+                        font: { family: 'Outfit, sans-serif', color: '#1f2937' }
                     };
-
-                    Plotly.newPlot('gauge', gaugeData, layout, config);
+                    Plotly.newPlot('gauge', gaugeData, layout, {responsive: true, displayModeBar: false});
                 </script>
             </div>
         </div>
         {% endif %}
     </div>
+
+    <!-- Script to Trigger Loader -->
+    <script>
+        document.getElementById('predictionForm').addEventListener('submit', function() {
+            // Show the loader overlay
+            document.getElementById('loader-overlay').style.display = 'flex';
+            
+            // Optional: Disable the button to prevent double submission
+            const btn = this.querySelector('.predict-btn');
+            btn.disabled = true;
+            btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Processing...';
+        });
+    </script>
 </body>
 
 </html>