Add 1 files

index.html

@@ -9,6 +9,16 @@
     <script src="https://code.highcharts.com/maps/highmaps.js"></script>
     <script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
     <script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
+  <!-- Leaflet CSS -->
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/[email protected]/dist/leaflet.css"
+/>
+<!-- Leaflet JS -->
+<script
+  src="https://unpkg.com/[email protected]/dist/leaflet.js">
+</script>
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .sidebar {
@@ -64,7 +74,7 @@
             <div class="p-4 flex items-center justify-between border-b border-purple-700">
                 <div class="flex items-center space-x-2">
                     <i class="fas fa-users text-2xl"></i>
-                    <span class="sidebar-text text-xl font-bold">Youth Peer Initiative</span>
+                    <span class="sidebar-text text-l font-bold">Youth Peer Initiative</span>
                 </div>
                 <button id="toggleSidebar" class="text-white focus:outline-none">
                     <i class="fas fa-bars"></i>
@@ -78,8 +88,8 @@
                 </div>
                 <h3 class="font-semibold text-lg">Sarah Johnson</h3>
                 <p class="text-purple-200 text-sm">[email protected]</p>
-                <div class="mt-2 flex space-x-2">
-                    <button class="bg-purple-600 hover:bg-purple-700 px极速赛车开奖直播-3 py-1 rounded-full text-xs">
+              <div class="mt-2 flex space-x-2">
+                    <button class="bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded-full text-xs">
                         <i class="fas fa-cog"></i> <span class="sidebar-text">Settings</span>
                     </button>
                 </div>
@@ -333,13 +343,13 @@
                                     <div>
                                         <p class="font-medium">New member joined</p>
                                         <p class="text-sm text-gray-500">Alex Johnson joined the Coding Club at Lincoln High School</p>
-                                        <p class="text-xs text-gray-400">2 hours ago</极速赛车开奖直播p>
+                                        <p class="text-xs text-gray-400">2 hours ago</p>
                                     </div>
                                 </div>
                                 
                                 <div class="flex items-start">
                                     <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 mt-1">
-                                        <极速赛车开奖直播i class="fas fa-calendar-check text-blue-600"></i>
+                                        <i class="fas fa-calendar-check text-blue-600"></i>
                                     </div>
                                     <div>
                                         <p class="font-medium">New event created</p>
@@ -643,7 +653,7 @@
                                 <h3 class="font-semibold mb-4">School Directory</h3>
                                 <div class="relative mb-4">
                                     <input type="text" placeholder="Search schools..." class="w-full pl-10 pr-4 py-2 rounded-md border focus:outline-none focus:ring-2 focus:ring-purple-500">
-                                    <i class="fas fa-search absolute left-3 top-3 text-gray-400"></极速赛车开奖直播i>
+                                  
                                 </div>
                                 
                                 <div class="space-y-3 max-h-80 overflow-y-auto">
@@ -863,50 +873,7 @@
                                             </div>
                                         </div>
                                         
-                                        <div>
-                                            <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
-                                            <input type="text" value="Sarah Johnson" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
-                                        </div>
-                                        
-                                        <div>
-                                            <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
-                                            <input type="email" value="[email protected]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
-                                        </div>
-                                        
-                                        <div>
-                                            <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
-                                            <input type="password" placeholder="••••••••" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            
-                            <div>
-                                <div class="bg-gray-50 rounded-lg p-6 mb-6">
-                                    <h3 class="text-lg font-semibold mb-4">Preferences</h3>
-                                    <div class="space-y-4">
-                                        <div>
-                                            <label class="block text-sm font-medium text-gray-700 mb-2">Notification Preferences</label>
-                                            <div class="space-y-2">
-                                                <div class="flex items-center">
-                                                    <input id="email-notifications" name="email-notifications" type="checkbox" checked class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
-                                                    <label for="email-notifications" class="ml-2 block text-sm text-gray-700">Email Notifications</label>
-                                                </div>
-                                                <div class="flex items-center">
-                                                    <input id="push-notifications" name="push-notifications" type="checkbox" checked class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
-                                                    <label for="push-notifications" class="ml-2 block text-sm text-gray-700">Push Notifications</label>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        
-                                        <div>
-                                            <label class="block text-sm font-medium text-gray-700 mb-2">Language</label>
-                                            <select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
-                                                <option>English</option>
-                                                <option>Spanish</option>
-                                                <option>French</option>
-                                            </select>
-                                        </div>
+                                        <!-- More profile settings would go here -->
                                     </div>
                                 </div>
                             </div>
@@ -1258,5 +1225,80 @@
             });
         });
     </script>
+  <script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const schoolData = [
+      {
+        name: "Lincoln High School",
+        address: "123 Education St, Springfield",
+        lat: 37.208957,
+        lng: -93.292299,
+      },
+      {
+        name: "Jefferson High School",
+        address: "456 Knowledge Ave, Jefferson",
+        lat: 38.5767,
+        lng: -92.1735,
+      },
+      {
+        name: "Washington High School",
+        address: "789 Wisdom Blvd, Washington",
+        lat: 38.9072,
+        lng: -77.0369,
+      },
+    ];
+
+    // Initialize map
+    const map = L.map("detailedMap").setView([37.8, -96], 5);
+
+    // Add tile layer
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution: "&copy; OpenStreetMap contributors",
+    }).addTo(map);
+
+    // Store marker references
+    const markers = {};
+
+    // Add markers
+    schoolData.forEach((school) => {
+      const marker = L.marker([school.lat, school.lng])
+        .addTo(map)
+        .bindPopup(`<strong>${school.name}</strong><br>${school.address}`);
+      markers[school.name] = marker;
+    });
+
+    // Highlight clicked item and pan to map
+    const schoolItems = document.querySelectorAll(".school-item");
+
+    schoolItems.forEach((item) => {
+      item.addEventListener("click", () => {
+        const name = item.querySelector("h4")?.textContent.trim();
+        const school = schoolData.find((s) => s.name === name);
+        if (!school) return;
+
+        // Remove highlight from others
+        schoolItems.forEach((el) => el.classList.remove("ring-2", "ring-purple-500"));
+        item.classList.add("ring-2", "ring-purple-500");
+
+        // Pan to marker
+        const marker = markers[school.name];
+        map.setView([school.lat, school.lng], 14);
+        marker.openPopup();
+      });
+    });
+
+    // Optional: fix map size on tab switch (if hidden initially)
+    const observer = new MutationObserver(() => {
+      map.invalidateSize();
+    });
+
+    const tabContainer = document.getElementById("location");
+    if (tabContainer) {
+      observer.observe(tabContainer, { attributes: true, attributeFilter: ["class"] });
+    }
+  });
+</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=Ishwinder/webbuilder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>