This app isn't working I don't know why but when I try to go into my projects it won't open the project and it won't connect with the target devices please fix the problem right away

projects.html

@@ -16,21 +16,21 @@
             <h1 class="text-2xl font-bold mb-6 text-emerald-500">My Projects</h1>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div class="bg-black border border-emerald-500 p-4 rounded-lg shadow hover:shadow-md transition">
-<h3 class="font-medium mb-2">Project 1</h3>
+                    <h3 class="font-medium mb-2">Project 1</h3>
                     <p class="text-sm text-gray-600 mb-2">Last edited: Today</p>
-                    <a href="#" class="text-blue-600 text-sm">Open →</a>
+                    <a href="/create.html?project=1" class="text-blue-600 text-sm">Open →</a>
                 </div>
-                <div class="bg-white p-4 rounded-lg shadow border hover:shadow-md transition">
+                <div class="bg-black border border-emerald-500 p-4 rounded-lg shadow hover:shadow-md transition">
                     <h3 class="font-medium mb-2">Project 2</h3>
                     <p class="text-sm text-gray-600 mb-2">Last edited: Yesterday</p>
-                    <a href="#" class="text-blue-600 text-sm">Open →</a>
+                    <a href="/create.html?project=2" class="text-blue-600 text-sm">Open →</a>
                 </div>
-                <div class="bg-white p-4 rounded-lg shadow border hover:shadow-md transition">
+                <div class="bg-black border border-emerald-500 p-4 rounded-lg shadow hover:shadow-md transition">
                     <h3 class="font-medium mb-2">Project 3</h3>
                     <p class="text-sm text-gray-600 mb-2">Last edited: 2 days ago</p>
-                    <a href="#" class="text-blue-600 text-sm">Open →</a>
+                    <a href="/create.html?project=3" class="text-blue-600 text-sm">Open →</a>
                 </div>
-            </div>
+</div>
         </div>
     </main>
 

script.js

@@ -1,4 +1,11 @@
 
+// Mock database for projects
+const projectsDB = {
+    1: { name: 'Project 1', type: 'Blank Canvas', content: '' },
+    2: { name: 'Project 2', type: 'Document', content: '' },
+    3: { name: 'Project 3', type: 'Design', content: '' }
+};
+
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize feather icons
     if (typeof feather !== 'undefined') {
@@ -29,4 +36,24 @@ document.addEventListener('DOMContentLoaded', function() {
             waveSpeed: 0.5
         });
     }
+
+    // Load project data if on create page with project ID
+    const urlParams = new URLSearchParams(window.location.search);
+    const projectId = urlParams.get('project');
+    if (projectId && window.location.pathname.includes('create.html')) {
+        const project = projectsDB[projectId];
+        if (project) {
+            document.querySelector('input[type="text"]').value = project.name;
+            document.querySelector('select').value = project.type;
+        }
+    }
 });
+
+// Device connection simulation
+async function connectToDevice(deviceId) {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve({ status: 'connected', deviceId });
+        }, 1000);
+    });
+}

tracking.html

@@ -87,12 +87,36 @@
             `;
             deviceList.appendChild(deviceElement);
         });
-
-        // Refresh button
-        document.getElementById('refresh-btn').addEventListener('click', () => {
-            // In a real app, this would fetch new locations from an API
-            alert('Refreshing device locations...');
+        // Refresh button with actual connection logic
+        document.getElementById('refresh-btn').addEventListener('click', async () => {
+            try {
+                const updatedDevices = await Promise.all(
+                    devices.map(async device => {
+                        const connection = await connectToDevice(device.id);
+                        if (connection.status === 'connected') {
+                            // Update marker position (simulate slight movement)
+                            const lat = device.lat + (Math.random() * 0.01 - 0.005);
+                            const lng = device.lng + (Math.random() * 0.01 - 0.005);
+                            markers[device.id].setLatLng([lat, lng]);
+                            return { ...device, lat, lng };
+                        }
+                        return device;
+                    })
+                );
+                
+                // Update battery levels (simulate drain)
+                updatedDevices.forEach(device => {
+                    device.battery = Math.max(10, device.battery - 5);
+                    markers[device.id].setPopupContent(
+                        `<b>${device.name}</b><br>Battery: ${device.battery}%`
+                    );
+                });
+                
+                console.log('Devices refreshed successfully');
+            } catch (error) {
+                console.error('Error refreshing devices:', error);
+            }
         });
-    </script>
+</script>
 </body>
 </html>