sections!

templates/admin_base.html

@@ -95,6 +95,15 @@
             </div>
             <span class="badge-product text-xs font-semibold px-2 py-0.5 rounded">{{ product_count }}</span>
         </a>
+        <a href="{{ url_for('manage_sections') }}" class="nav-sections flex items-center justify-between p-4 rounded-lg transition-colors hover:bg-[#e6f0f7]">
+            <div class="flex items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18m9-9H3" />
+                </svg>
+                <span class="font-medium">Sections</span>
+            </div>
+            <span class="badge-section text-xs font-semibold px-2 py-0.5 rounded">{{ section_count }}</span>
+        </a>
     </nav>
     <!-- Only admin content is inside the background wrapper now -->
     <div class="bg-[#f5f7f2] shadow-lg rounded-xl p-8 mb-6">

templates/create_plant.html

@@ -14,8 +14,8 @@
                 </div>
                 <div>
                     <label for="picture" class="block text-sm font-semibold text-gray-700 mb-1">Picture</label>
-                    <input type="file" name="picture" id="picture"
-                        class="mt-1 block w-full text-sm text-gray-700 border border-gray-300 rounded-lg px-3 py-2 bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    <input type="file" name="picture" id="picture" accept="image/*"
+                        class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
                 </div>
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div>

templates/edit_care_difficulty.html

@@ -18,7 +18,8 @@
         </div>
         <div>
             <label for="icon" class="block text-sm font-medium text-gray-700">Icon (SVG)</label>
-            <input type="file" name="icon" id="icon" accept=".svg" class="mt-1 block w-full text-sm text-gray-700">
+            <input type="file" name="icon" id="icon" accept=".svg"
+                class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
             {% if difficulty.icon %}
             <div class="mt-2">
                 <span class="text-xs text-gray-500">Current icon:</span>

templates/edit_climate.html

@@ -18,15 +18,13 @@
         </div>
         <div>
             <label for="icon" class="block text-sm font-medium text-gray-700">Icon (SVG)</label>
-            <input type="file" name="icon" id="icon" accept=".svg" class="mt-1 block w-full text-sm text-gray-700">
+            <input type="file" name="icon" id="icon" accept=".svg"
+                class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
             {% if climate.icon %}
             <img src="{{ url_for('static', filename='icons/' ~ climate.icon) }}" alt="Icon" class="w-8 h-8 mt-2">
             {% endif %}
         </div>
-        <button type="submit"
-            class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-            Save Changes
-        </button>
+        <button type="submit" class="btn-main w-full">Save Changes</button>
         <a href="{{ url_for('manage_climates') }}" class="block text-center mt-4 text-gray-500 hover:text-gray-700">Cancel</a>
     </form>
 </div>

templates/edit_environment.html

@@ -23,10 +23,7 @@
             <img src="{{ url_for('static', filename='icons/' ~ environment.icon) }}" alt="Icon" class="w-8 h-8 mt-2">
             {% endif %}
         </div>
-        <button type="submit"
-            class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-            Save Changes
-        </button>
+        <button type="submit" class="btn-main w-full">Save Changes</button>
         <a href="{{ url_for('manage_environments') }}" class="block text-center mt-4 text-gray-500 hover:text-gray-700">Cancel</a>
     </form>
 </div>

templates/edit_growth_rate.html

@@ -18,7 +18,8 @@
         </div>
         <div>
             <label for="icon" class="block text-sm font-medium text-gray-700">Icon (SVG)</label>
-            <input type="file" name="icon" id="icon" accept=".svg" class="mt-1 block w-full text-sm text-gray-700">
+            <input type="file" name="icon" id="icon" accept=".svg"
+                class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
             {% if rate.icon %}
             <div class="mt-2">
                 <span class="text-xs text-gray-500">Current icon:</span>
@@ -26,7 +27,10 @@
             </div>
             {% endif %}
         </div>
-        <button type="submit" class="btn-main w-full">Save Changes</button>
+        <button type="submit"
+            class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+            Save Changes
+        </button>
     </form>
 </div>
 {% endblock %} 

templates/edit_light.html

@@ -18,7 +18,8 @@
         </div>
         <div>
             <label for="icon" class="block text-sm font-medium text-gray-700">Icon (SVG)</label>
-            <input type="file" name="icon" id="icon" accept=".svg" class="mt-1 block w-full text-sm text-gray-700">
+            <input type="file" name="icon" id="icon" accept=".svg"
+                class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
             {% if light.icon %}
             <div class="mt-2">
                 <span class="text-xs text-gray-500">Current icon:</span>
@@ -26,7 +27,10 @@
             </div>
             {% endif %}
         </div>
-        <button type="submit" class="btn-main w-full">Save Changes</button>
+        <button type="submit"
+            class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+            Save Changes
+        </button>
     </form>
 </div>
 {% endblock %} 

templates/edit_plant.html

@@ -14,8 +14,8 @@
                 </div>
                 <div>
                     <label for="picture" class="block text-sm font-semibold text-gray-700 mb-1">Picture</label>
-                    <input type="file" name="picture" id="picture"
-                        class="mt-1 block w-full text-sm text-gray-700 border border-gray-300 rounded-lg px-3 py-2 bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    <input type="file" name="picture" id="picture" accept="image/*"
+                        class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
                     {% if plant.picture %}
                         <img src="{{ url_for('static', filename='uploads/' ~ plant.picture) }}" alt="{{ plant.name }}" class="w-24 h-24 object-cover rounded mt-2">
                     {% endif %}
@@ -108,7 +108,10 @@
                     <div id="quill-care-guide" class="bg-white rounded border border-gray-300" style="min-height: 120px;">{{ plant.care_guide|safe }}</div>
                     <textarea name="care_guide" id="care_guide" style="display:none;">{{ plant.care_guide }}</textarea>
                 </div>
-                <button type="submit" class="w-full btn-main text-lg font-semibold">Save Changes</button>
+                <button type="submit"
+                    class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                    Save Changes
+                </button>
             </form>
         </div>
     </div>

templates/edit_product.html

@@ -16,10 +16,7 @@
             <textarea name="description" id="description" rows="3"
                 class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">{{ product.description }}</textarea>
         </div>
-        <button type="submit"
-            class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-            Save Changes
-        </button>
+        <button type="submit" class="btn-main w-full">Save Changes</button>
         <a href="{{ url_for('manage_products') }}" class="block text-center mt-4 text-gray-500 hover:text-gray-700">Cancel</a>
     </form>
 </div>

templates/edit_section.html

@@ -0,0 +1,34 @@
+{% extends "admin_base.html" %}
+
+{% block title %}Edit Section{% endblock %}
+
+{% block admin_content %}
+<div class="max-w-xl mx-auto bg-white p-8 rounded-lg shadow-md">
+    <h1 class="text-2xl font-bold mb-6">Edit Section</h1>
+    <form method="POST" enctype="multipart/form-data" class="space-y-4">
+        <div>
+            <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
+            <input type="text" name="name" id="name" value="{{ section.name }}" required
+                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
+        </div>
+        <div>
+            <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
+            <textarea name="description" id="description" rows="3"
+                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">{{ section.description }}</textarea>
+        </div>
+        <div>
+            <label for="icon" class="block text-sm font-medium text-gray-700">Icon</label>
+            {% if section.icon %}
+            <div class="mb-2">
+                <img src="{{ url_for('static', filename='icons/' + section.icon) }}" alt="{{ section.name }}" class="h-8 w-8 object-contain">
+            </div>
+            {% endif %}
+            <input type="file" name="icon" id="icon" accept="image/*"
+                class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
+            <p class="mt-1 text-sm text-gray-500">Leave empty to keep the current icon</p>
+        </div>
+        <button type="submit" class="btn-main w-full">Save Changes</button>
+        <a href="{{ url_for('manage_sections') }}" class="block text-center mt-4 text-gray-500 hover:text-gray-700">Cancel</a>
+    </form>
+</div>
+{% endblock %} 

templates/edit_size.html

@@ -18,7 +18,8 @@
         </div>
         <div>
             <label for="icon" class="block text-sm font-medium text-gray-700">Icon (SVG)</label>
-            <input type="file" name="icon" id="icon" accept=".svg" class="mt-1 block w-full text-sm text-gray-700">
+            <input type="file" name="icon" id="icon" accept=".svg"
+                class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
             {% if size.icon %}
             <div class="mt-2">
                 <span class="text-xs text-gray-500">Current icon:</span>
@@ -26,7 +27,10 @@
             </div>
             {% endif %}
         </div>
-        <button type="submit" class="btn-main w-full">Save Changes</button>
+        <button type="submit"
+            class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+            Save Changes
+        </button>
     </form>
 </div>
 {% endblock %} 

templates/edit_toxicity.html

@@ -18,7 +18,8 @@
         </div>
         <div>
             <label for="icon" class="block text-sm font-medium text-gray-700">Icon (SVG)</label>
-            <input type="file" name="icon" id="icon" accept=".svg" class="mt-1 block w-full text-sm text-gray-700">
+            <input type="file" name="icon" id="icon" accept=".svg"
+                class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
             {% if toxicity.icon %}
             <div class="mt-2">
                 <span class="text-xs text-gray-500">Current icon:</span>
@@ -26,7 +27,10 @@
             </div>
             {% endif %}
         </div>
-        <button type="submit" class="btn-main w-full">Save Changes</button>
+        <button type="submit"
+            class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+            Save Changes
+        </button>
     </form>
 </div>
 {% endblock %} 

templates/manage_care_difficulties.html

@@ -20,7 +20,8 @@
             </div>
             <div>
                 <label for="icon" class="block text-sm font-medium text-gray-700">Icon (SVG)</label>
-                <input type="file" name="icon" id="icon" accept=".svg" class="mt-1 block w-full text-sm text-gray-700">
+                <input type="file" name="icon" id="icon" accept=".svg"
+                    class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
             </div>
             <button type="submit" class="w-full btn-main text-lg font-semibold">Add Care Difficulty</button>
         </form>

templates/manage_climates.html

@@ -20,7 +20,8 @@
             </div>
             <div>
                 <label for="icon" class="block text-sm font-medium text-gray-700">Icon (SVG)</label>
-                <input type="file" name="icon" id="icon" accept=".svg" class="mt-1 block w-full text-sm text-gray-700">
+                <input type="file" name="icon" id="icon" accept=".svg"
+                    class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
             </div>
             <button type="submit" class="w-full btn-main text-lg font-semibold">Add Climate</button>
         </form>

templates/manage_environments.html

@@ -20,7 +20,8 @@
             </div>
             <div>
                 <label for="icon" class="block text-sm font-medium text-gray-700">Icon (SVG)</label>
-                <input type="file" name="icon" id="icon" accept=".svg" class="mt-1 block w-full text-sm text-gray-700">
+                <input type="file" name="icon" id="icon" accept=".svg"
+                    class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
             </div>
             <button type="submit" class="w-full btn-main text-lg font-semibold">Add Environment</button>
         </form>

templates/manage_growth_rates.html

@@ -20,7 +20,8 @@
             </div>
             <div>
                 <label for="icon" class="block text-sm font-medium text-gray-700">Icon (SVG)</label>
-                <input type="file" name="icon" id="icon" accept=".svg" class="mt-1 block w-full text-sm text-gray-700">
+                <input type="file" name="icon" id="icon" accept=".svg"
+                    class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
             </div>
             <button type="submit" class="w-full btn-main text-lg font-semibold">Add Growth Rate</button>
         </form>

templates/manage_lights.html

@@ -20,7 +20,8 @@
             </div>
             <div>
                 <label for="icon" class="block text-sm font-medium text-gray-700">Icon (SVG)</label>
-                <input type="file" name="icon" id="icon" accept=".svg" class="mt-1 block w-full text-sm text-gray-700">
+                <input type="file" name="icon" id="icon" accept=".svg"
+                    class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
             </div>
             <button type="submit" class="w-full btn-main text-lg font-semibold">Add Light Requirement</button>
         </form>

templates/manage_plants.html

@@ -23,8 +23,8 @@
                     </div>
                     <div>
                         <label for="picture" class="block text-sm font-medium text-gray-700">Picture</label>
-                        <input type="file" name="picture" id="picture"
-                            class="mt-1 block w-full text-sm text-gray-700">
+                        <input type="file" name="picture" id="picture" accept="image/*"
+                            class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
                     </div>
                     <div>
                         <label for="climate_id" class="block text-sm font-medium text-gray-700">Climate</label>

templates/manage_sections.html

@@ -0,0 +1,60 @@
+{% extends "admin_base.html" %}
+
+{% block title %}Manage Sections{% endblock %}
+
+{% block admin_content %}
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+    <!-- Add new section form -->
+    <div class="bg-gray-50 p-6 rounded-lg">
+        <h2 class="text-xl font-bold mb-4">Add New Section</h2>
+        <form method="POST" enctype="multipart/form-data" class="space-y-4">
+            <div>
+                <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
+                <input type="text" name="name" id="name" required
+                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
+            </div>
+            <div>
+                <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
+                <textarea name="description" id="description" rows="3"
+                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"></textarea>
+            </div>
+            <div>
+                <label for="icon" class="block text-sm font-medium text-gray-700">Icon</label>
+                <input type="file" name="icon" id="icon" accept="image/*"
+                    class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
+            </div>
+            <button type="submit" class="w-full btn-main text-lg font-semibold">Add Section</button>
+        </form>
+    </div>
+
+    <!-- List of existing sections -->
+    <div class="bg-gray-50 p-6 rounded-lg">
+        <h2 class="text-xl font-bold mb-4">Existing Sections</h2>
+        <div class="space-y-4">
+            {% for section in sections %}
+            <div class="p-4 rounded-lg shadow flex justify-between items-center">
+                <div class="flex items-center">
+                    {% if section.icon %}
+                    <img src="{{ url_for('static', filename='icons/' + section.icon) }}" alt="{{ section.name }}" class="h-8 w-8 object-contain mr-3">
+                    {% endif %}
+                    <div>
+                        <h3 class="font-bold">{{ section.name }}</h3>
+                        {% if section.description %}
+                        <p class="text-gray-600 mt-2">{{ section.description }}</p>
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="flex space-x-2">
+                    <a href="{{ url_for('edit_section', section_id=section.id) }}" class="btn-edit">Edit</a>
+                    <form method="POST" action="{{ url_for('delete_section', section_id=section.id) }}" onsubmit="return confirm('Are you sure you want to delete this section?');">
+                        <button type="submit" class="btn-delete">Delete</button>
+                    </form>
+                </div>
+            </div>
+            {% else %}
+            <p class="text-gray-500">No sections added yet.</p>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+{% endblock %} 

templates/manage_sizes.html

@@ -20,7 +20,8 @@
             </div>
             <div>
                 <label for="icon" class="block text-sm font-medium text-gray-700">Icon (SVG)</label>
-                <input type="file" name="icon" id="icon" accept=".svg" class="mt-1 block w-full text-sm text-gray-700">
+                <input type="file" name="icon" id="icon" accept=".svg"
+                    class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
             </div>
             <button type="submit" class="w-full btn-main text-lg font-semibold">Add Size Category</button>
         </form>

templates/manage_toxicities.html

@@ -20,7 +20,8 @@
             </div>
             <div>
                 <label for="icon" class="block text-sm font-medium text-gray-700">Icon (SVG)</label>
-                <input type="file" name="icon" id="icon" accept=".svg" class="mt-1 block w-full text-sm text-gray-700">
+                <input type="file" name="icon" id="icon" accept=".svg"
+                    class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
             </div>
             <button type="submit" class="w-full btn-main text-lg font-semibold">Add Toxicity Level</button>
         </form>