UI enhancements generate page

ombhojane · Feb 14, 2024 · fdc4070 · fdc4070
1 parent 6ba41a8
commit fdc4070
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/static/predict.js b/static/predict.js
@@ -8,7 +8,7 @@ tailwind.init();
       var farmImage = document.getElementById('farmImage');
 
       if (landSize >= 1 && landSize < 10) {
-          farmImage.src = 'https://github.com/ombhojane/chalokisaanai/blob/main/assets/small.png?raw=true';
+          farmImage.src = 'https://i.postimg.cc/RCw9z1Kv/Screenshot-2024-02-14-205114.png';
           farmImage.classList.remove('hidden');
       } else if (landSize >= 10 && landSize < 20) {
           farmImage.src = 'https://github.com/ombhojane/chalokisaanai/blob/main/assets/mid.png?raw=true';

diff --git a/templates/generate.html b/templates/generate.html
@@ -14,6 +14,9 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
     />
     <link rel="stylesheet" href="../static/styles.css" />
+
+    <link rel="stylesheet" href="../static/predict.css" /> 
+
   </head>
   <body class="bg-gray-50 text-gray-800">
     <nav class="flex justify-between items-center py-6">
@@ -49,16 +52,20 @@ <h2 class="text-xl font-bold text-green-600">
             <div class="{{ 'text-green-600' if progress == 100 else 'text-gray-600' }}">Budget</div>
         </div>
     </div>
+    <div class="container mx-auto px-4 py-8">
+      <div class="bg-white p-8 shadow-lg rounded-lg max-w-3xl mx-auto">
       <form method="post" class="mt-4">
         <input type="hidden" name="current_section" value="{{ current_section }}">
         <input type="hidden" name="service_name" value="{{ service_name }}">
             <div class="form-section">
                 <label for="service_name" class="block text-gray-700 text-sm font-bold mb-2">Enter the Agrotourism Service Name:</label>
+
                 <input type="text" id="service_name" name="service_name" required class="form-input" />
             </div>
 
             <div class="form-section">
                 <label class="font-semibold text-lg mb-2 block">Land Size</label>
+                <img id="farmImage" class="mt-4 hidden" src="https://placehold.co/600x400" alt="Farm Image" />
                 <input type="number" name="land_size" class="form-input" placeholder="Enter land size in hectares" aria-label="Land Size" required>
             </div>
 
@@ -91,6 +98,8 @@ <h2 class="text-xl font-bold text-green-600">
 
             <input type="submit" value="Start Generation" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline cursor-pointer" />
           </form>
+      </div>
+    </div>
       {% if sections %}
       <div class="mt-8">
         {% for section in sections %}
@@ -152,5 +161,6 @@ <h4 class="font-bold text-green-600">
     });
 
     </script>
+    <script src="../static/predict.js"></script>
   </body>
 </html>