ho wdo i add backend into this to make it functional and live can you help me - Follow Up Deployment

index.html

@@ -96,7 +96,11 @@
         <div class="container mx-auto px-4 py-3 flex justify-between items-center">
             <div class="flex items-center space-x-2">
                 <i class="fas fa-leaf text-2xl text-green-600"></i>
-                <h1 class="text-xl font-bold text-gray-800">Dr. Plant</h1>
+                <div>
+                    <h1 class="text-xl font-bold text-gray-800">Dr. Plant</h1>
+                    <p class="text-xs text-gray-500">Your plant's health is our priority</p>
+                    <div id="backend-status" class="text-xs text-green-600 hidden md:block">Backend: Connected</div>
+                </div>
             </div>
             <nav class="hidden md:flex space-x-8">
                 <a href="#" class="nav-item active text-green-600 font-medium">Home</a>
@@ -232,7 +236,7 @@
             
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                 <!-- Remedy Card 1 -->
-                <div class="remedy-card bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition">
+                <div class="remedy-card bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition" data-remedy-id="neem-oil">
                     <img src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                          alt="Neem leaves" 
                          class="w-full h-48 object-cover">
@@ -253,7 +257,7 @@
                 </div>
                 
                 <!-- Remedy Card 2 -->
-                <div class="remedy-card bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition">
+                <div class="remedy-card bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition" data-remedy-id="turmeric-fungal">
                     <img src="https://images.unsplash.com/photo-1601493700896-4b8ac38ba0e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                          alt="Turmeric powder" 
                          class="w-full h-48 object-cover">
@@ -274,7 +278,7 @@
                 </div>
                 
                 <!-- Remedy Card 3 -->
-                <div class="remedy-card bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition">
+                <div class="remedy-card bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition" data-remedy-id="banana-fertilizer">
                     <img src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                          alt="Banana peel" 
                          class="w-full h-48 object-cover">
@@ -576,32 +580,282 @@
     </div>
 
     <script>
-        // Simple JavaScript for demonstration
+        // Backend API configuration - replace with your actual backend URL
+        const API_BASE_URL = 'http://localhost:3000/api'; // or your deployed backend URL
+        
+        // Global state
+        let currentUser = null;
+        
         document.addEventListener('DOMContentLoaded', function() {
-            // Mobile menu toggle would go here
-            // Camera button functionality
-            const cameraBtn = document.querySelector('.camera-btn');
-            cameraBtn.addEventListener('click', function() {
-                alert('Camera functionality would open here to scan your plant');
+            // Check authentication status
+            checkAuthStatus();
+            
+            // Check backend connection
+            checkBackendStatus();
+            
+            // Setup event listeners
+            setupEventListeners();
+        });
+
+        function setupEventListeners() {
+            // Camera/scan functionality
+            document.querySelectorAll('.camera-btn, .scan-btn').forEach(btn => {
+                btn.addEventListener('click', handleScanClick);
             });
             
-            // Plant card hover effect
-            const plantCards = document.querySelectorAll('.plant-card');
-            plantCards.forEach(card => {
-                card.addEventListener('mouseenter', function() {
-                    this.style.transition = 'all 0.3s ease';
+            // Sign in/out buttons
+            document.querySelector('.signin-btn')?.addEventListener('click', showAuthModal);
+            document.querySelector('.signout-btn')?.addEventListener('click', handleSignOut);
+            
+            // Plant management
+            document.querySelector('.add-plant-btn')?.addEventListener('click', showAddPlantModal);
+            
+            // Form submissions
+            document.getElementById('auth-form')?.addEventListener('submit', handleAuthSubmit);
+            document.getElementById('scan-form')?.addEventListener('submit', handleScanSubmit);
+            document.getElementById('add-plant-form')?.addEventListener('submit', handleAddPlantSubmit);
+        }
+
+        // Authentication functions
+        async function checkAuthStatus() {
+            try {
+                const token = localStorage.getItem('plantcare_token');
+                if (!token) return;
+                
+                const response = await fetch(`${API_BASE_URL}/auth/check`, {
+                    headers: { 'Authorization': `Bearer ${token}` }
                 });
-            });
+                
+                if (response.ok) {
+                    currentUser = await response.json();
+                    updateAuthUI(true);
+                }
+            } catch (error) {
+                console.error('Auth check failed:', error);
+            }
+        }
+
+        async function handleAuthSubmit(e) {
+            e.preventDefault();
+            const formData = new FormData(e.target);
+            const credentials = Object.fromEntries(formData);
             
-            // Remedy card click
-            const remedyCards = document.querySelectorAll('.remedy-card');
-            remedyCards.forEach(card => {
-                card.addEventListener('click', function() {
-                    // In a real app, this would navigate to remedy details
-                    console.log('Viewing remedy details');
+            try {
+                const response = await fetch(`${API_BASE_URL}/auth/login`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(credentials)
                 });
-            });
-        });
+                
+                if (response.ok) {
+                    const { token, user } = await response.json();
+                    localStorage.setItem('plantcare_token', token);
+                    currentUser = user;
+                    updateAuthUI(true);
+                    hideAuthModal();
+                } else {
+                    alert('Login failed. Please check your credentials.');
+                }
+            } catch (error) {
+                console.error('Login error:', error);
+                alert('Login failed. Please try again.');
+            }
+        }
+
+        // Plant scanning functions
+        async function handleScanSubmit(e) {
+            e.preventDefault();
+            const formData = new FormData(e.target);
+            const fileInput = e.target.querySelector('input[type="file"]');
+            
+            if (!fileInput.files.length) {
+                alert('Please select an image first');
+                return;
+            }
+            
+            try {
+                const formData = new FormData();
+                formData.append('image', fileInput.files[0]);
+                
+                const token = localStorage.getItem('plantcare_token');
+                const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
+                
+                const response = await fetch(`${API_BASE_URL}/scan`, {
+                    method: 'POST',
+                    headers,
+                    body: formData
+                });
+                
+                if (response.ok) {
+                    const result = await response.json();
+                    displayScanResult(result);
+                } else {
+                    throw new Error('Scan failed');
+                }
+            } catch (error) {
+                console.error('Scan error:', error);
+                alert('Scan failed. Please try again.');
+            }
+        }
+
+        // Plant management functions
+        async function handleAddPlantSubmit(e) {
+            e.preventDefault();
+            const formData = new FormData(e.target);
+            const plantData = Object.fromEntries(formData);
+            
+            try {
+                const token = localStorage.getItem('plantcare_token');
+                if (!token) throw new Error('Not authenticated');
+                
+                const response = await fetch(`${API_BASE_URL}/plants`, {
+                    method: 'POST',
+                    headers: { 
+                        'Authorization': `Bearer ${token}`,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(plantData)
+                });
+                
+                if (response.ok) {
+                    const newPlant = await response.json();
+                    addPlantToUI(newPlant);
+                    hideAddPlantModal();
+                } else {
+                    throw new Error('Failed to add plant');
+                }
+            } catch (error) {
+                console.error('Add plant error:', error);
+                alert('Failed to add plant. Please try again.');
+            }
+        }
+
+        // UI update functions
+        function updateAuthUI(isLoggedIn) {
+            if (isLoggedIn) {
+                document.querySelector('.signin-btn').classList.add('hidden');
+                document.querySelector('.signout-btn').classList.remove('hidden');
+                document.querySelector('.user-greeting').textContent = `Hi, ${currentUser.name}`;
+            } else {
+                document.querySelector('.signin-btn').classList.remove('hidden');
+                document.querySelector('.signout-btn').classList.add('hidden');
+                document.querySelector('.user-greeting').textContent = '';
+            }
+        }
+
+        function displayScanResult(result) {
+            const resultContainer = document.getElementById('scan-result');
+            resultContainer.innerHTML = `
+                <h3 class="text-xl font-bold mb-2">Scan Result</h3>
+                <p>Status: <span class="font-semibold">${result.healthy ? 'Healthy' : 'Disease Detected'}</span></p>
+                ${result.disease ? `<p>Disease: <span class="font-semibold">${result.disease}</span></p>` : ''}
+                ${result.confidence ? `<p>Confidence: <span class="font-semibold">${result.confidence}%</span></p>` : ''}
+                ${result.remedies ? `<div class="mt-4">
+                    <h4 class="font-bold">Suggested Remedies:</h4>
+                    <ul class="list-disc pl-5 mt-2">
+                        ${result.remedies.map(r => `<li>${r}</li>`).join('')}
+                    </ul>
+                </div>` : ''}
+            `;
+        }
+
+        // Modal functions
+        function showAuthModal() {
+            document.getElementById('auth-modal').classList.remove('hidden');
+        }
+
+        function hideAuthModal() {
+            document.getElementById('auth-modal').classList.add('hidden');
+        }
+
+        // Add these modal templates before the closing body tag
+        document.body.insertAdjacentHTML('beforeend', `
+            <!-- Auth Modal -->
+            <div id="auth-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+                <div class="bg-white rounded-lg p-6 max-w-md w-full">
+                    <h2 class="text-2xl font-bold mb-4">Sign In</h2>
+                    <form id="auth-form">
+                        <div class="mb-4">
+                            <label class="block text-gray-700 mb-2">Email</label>
+                            <input type="email" name="email" required 
+                                   class="w-full px-3 py-2 border rounded-lg">
+                        </div>
+                        <div class="mb-4">
+                            <label class="block text-gray-700 mb-2">Password</label>
+                            <input type="password" name="password" required 
+                                   class="w-full px-3 py-2 border rounded-lg">
+                        </div>
+                        <button type="submit" 
+                                class="w-full bg-green-600 text-white py-2 rounded-lg">
+                            Sign In
+                        </button>
+                    </form>
+                    <button onclick="hideAuthModal()" 
+                            class="mt-4 text-gray-500 hover:text-gray-700">
+                        Cancel
+                    </button>
+                </div>
+            </div>
+
+            <!-- Scan Modal -->
+            <div id="scan-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+                <div class="bg-white rounded-lg p-6 max-w-md w-full">
+                    <h2 class="text-2xl font-bold mb-4">Scan Your Plant</h2>
+                    <form id="scan-form">
+                        <div class="mb-4">
+                            <label class="block text-gray-700 mb-2">Plant Image</label>
+                            <input type="file" name="image" accept="image/*" capture="environment" required 
+                                   class="w-full px-3 py-2 border rounded-lg">
+                        </div>
+                        <button type="submit" 
+                                class="w-full bg-green-600 text-white py-2 rounded-lg">
+                            Analyze Plant
+                        </button>
+                    </form>
+                    <div id="scan-result" class="mt-4"></div>
+                    <button onclick="hideScanModal()" 
+                            class="mt-4 text-gray-500 hover:text-gray-700">
+                        Close
+                    </button>
+                </div>
+            </div>
+
+            <!-- Add Plant Modal -->
+            <div id="add-plant-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+                <div class="bg-white rounded-lg p-6 max-w-md w-full">
+                    <h2 class="text-2xl font-bold mb-4">Add New Plant</h2>
+                    <form id="add-plant-form">
+                        <div class="mb-4">
+                            <label class="block text-gray-700 mb-2">Plant Name</label>
+                            <input type="text" name="name" required 
+                                   class="w-full px-3 py-2 border rounded-lg">
+                        </div>
+                        <div class="mb-4">
+                            <label class="block text-gray-700 mb-2">Plant Type</label>
+                            <select name="type" class="w-full px-3 py-2 border rounded-lg">
+                                <option value="indoor">Indoor</option>
+                                <option value="outdoor">Outdoor</option>
+                                <option value="succulent">Succulent</option>
+                                <option value="herb">Herb</option>
+                            </select>
+                        </div>
+                        <div class="mb-4">
+                            <label class="block text-gray-700 mb-2">Watering Frequency (days)</label>
+                            <input type="number" name="water_frequency" min="1" value="7" 
+                                   class="w-full px-3 py-2 border rounded-lg">
+                        </div>
+                        <button type="submit" 
+                                class="w-full bg-green-600 text-white py-2 rounded-lg">
+                            Add Plant
+                        </button>
+                    </form>
+                    <button onclick="hideAddPlantModal()" 
+                            class="mt-4 text-gray-500 hover:text-gray-700">
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        `);
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Dc0der-x/dr-plant" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>