display the tidechart below the map - Follow Up Deployment

index.html

@@ -12,6 +12,10 @@
             height: 400px;
             transition: all 0.3s ease;
         }
+        #beachTideInfo {
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
         .location-card {
             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
         }
@@ -42,7 +46,31 @@
                 <p class="text-gray-600">Enter any address or place to see it on the map</p>
             </div>
 
-            <div class="location-card bg-white rounded-xl p-6 mb-8">
+            <div id="beachTideInfo" class="bg-blue-50 rounded-xl p-6 mb-8 hidden">
+                <div class="flex flex-col md:flex-row gap-6">
+                    <div class="flex-1">
+                        <h2 class="text-2xl font-bold text-blue-800 mb-2" id="beachName">Nearby Beach</h2>
+                        <p class="text-blue-600" id="beachDistance">Distance: Calculating...</p>
+                    </div>
+                    <div class="flex-1">
+                        <h3 class="text-lg font-semibold text-blue-700 mb-2">Tide Information</h3>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="bg-white p-3 rounded-lg shadow">
+                                <p class="text-sm text-blue-500">Next High Tide</p>
+                                <p id="highTideTime" class="font-medium text-blue-800">-</p>
+                                <p id="highTideHeight" class="text-sm text-blue-600">-</p>
+                            </div>
+                            <div class="bg-white p-3 rounded-lg shadow">
+                                <p class="text-sm text-blue-500">Next Low Tide</p>
+                                <p id="lowTideTime" class="font-medium text-blue-800">-</p>
+                                <p id="lowTideHeight" class="text-sm text-blue-600">-</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="location-card bg-white rounded-xl p-6">
                 <div class="flex flex-col md:flex-row gap-4">
                     <div class="flex-grow">
                         <label for="locationInput" class="block text-sm font-medium text-gray-700 mb-1">Search Location</label>
@@ -201,11 +229,18 @@
                                     return new Date(timestamp * 1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
                                 };
                                 
-                                document.getElementById('tideInfo').classList.remove('hidden');
+                                document.getElementById('beachTideInfo').classList.remove('hidden');
                                 document.getElementById('highTideTime').textContent = formatTime(nextHigh.dt);
                                 document.getElementById('highTideHeight').textContent = `${nextHigh.height.toFixed(2)}m`;
                                 document.getElementById('lowTideTime').textContent = formatTime(nextLow.dt);
                                 document.getElementById('lowTideHeight').textContent = `${nextLow.height.toFixed(2)}m`;
+                                
+                                // Try to get nearest beach name (simplified example)
+                                const beachResponse = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}&zoom=10`);
+                                const beachData = await beachResponse.json();
+                                if (beachData.address && beachData.address.tourism === 'beach') {
+                                    document.getElementById('beachName').textContent = beachData.display_name || 'Nearby Beach';
+                                }
                             }
                         }
                     }