Spaces:
Running
Running
Download index.html from Tejas123we/map-com: direct link, hf CLI and curl.
- Browser
- Download file 31.8 kB
-
https://huggingface.co/spaces/Tejas123we/map-com/resolve/main/index.html
- Command line
-
hf download hf://spaces/Tejas123we/map-com/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Tejas123we/map-com/resolve/main/index.html
31.8 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Frontier - Advanced Interactive Map</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Geologica:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #1a365d; | |
| --secondary: #2a4365; | |
| --accent: #4299e1; | |
| --text: #ebf8ff; | |
| --map-bg: #1a202c; | |
| } | |
| body { | |
| font-family: 'Geologica', sans-serif; | |
| background-color: var(--map-bg); | |
| color: var(--text); | |
| overflow: hidden; | |
| height: 100vh; | |
| } | |
| #map { | |
| height: 100%; | |
| width: 100%; | |
| z-index: 1; | |
| } | |
| .map-overlay { | |
| position: absolute; | |
| z-index: 2; | |
| pointer-events: none; | |
| } | |
| .map-control { | |
| pointer-events: all; | |
| background-color: rgba(26, 32, 44, 0.8); | |
| border-radius: 8px; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); | |
| } | |
| .chat-container { | |
| position: absolute; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 350px; | |
| max-height: 500px; | |
| display: flex; | |
| flex-direction: column; | |
| transition: all 0.3s ease; | |
| transform: translateY(calc(100% - 60px)); | |
| } | |
| .chat-container.open { | |
| transform: translateY(0); | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--accent) var(--secondary); | |
| } | |
| .chat-messages::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .chat-messages::-webkit-scrollbar-track { | |
| background: var(--secondary); | |
| } | |
| .chat-messages::-webkit-scrollbar-thumb { | |
| background-color: var(--accent); | |
| border-radius: 6px; | |
| } | |
| .ai-message { | |
| background-color: rgba(42, 67, 101, 0.8); | |
| border-left: 3px solid var(--accent); | |
| } | |
| .user-message { | |
| background-color: rgba(26, 32, 44, 0.8); | |
| border-right: 3px solid #48bb78; | |
| } | |
| .marker-popup { | |
| background-color: var(--map-bg); | |
| color: var(--text); | |
| border-radius: 8px; | |
| padding: 8px; | |
| font-family: 'Geologica', sans-serif; | |
| } | |
| .marker-popup h3 { | |
| color: var(--accent); | |
| font-weight: 600; | |
| margin-bottom: 4px; | |
| } | |
| .marker-popup p { | |
| font-size: 0.9rem; | |
| margin-bottom: 6px; | |
| } | |
| .marker-popup img { | |
| border-radius: 4px; | |
| margin-bottom: 8px; | |
| max-width: 100%; | |
| } | |
| .rainbow { | |
| background: linear-gradient(to right, #4299e1, #48bb78, #f6e05e, #ed8936, #f56565); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| animation: rainbow 8s ease infinite; | |
| background-size: 400% 100%; | |
| } | |
| @keyframes rainbow { | |
| 0%, 100% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(66, 153, 225, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(66, 153, 225, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(66, 153, 225, 0); } | |
| } | |
| .location-card { | |
| background-color: rgba(26, 32, 44, 0.9); | |
| transition: all 0.3s ease; | |
| } | |
| .location-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| .search-suggestions { | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| </style> | |
| </head> | |
| <body class="h-screen overflow-hidden"> | |
| <!-- Map Container --> | |
| <div id="map"></div> | |
| <!-- Top Controls --> | |
| <div class="map-overlay top-4 left-4"> | |
| <div class="map-control p-3 w-64"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h1 class="text-xl font-bold rainbow">Frontier</h1> | |
| <div class="text-xs bg-blue-600 px-2 py-1 rounded-full">v2.1.0</div> | |
| </div> | |
| <div class="relative"> | |
| <input type="text" id="search-input" placeholder="Search locations..." class="w-full bg-gray-800 text-white px-3 py-2 rounded border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <div id="search-suggestions" class="search-suggestions absolute left-0 right-0 mt-1 bg-gray-800 rounded shadow-lg hidden z-10"> | |
| <!-- Suggestions will appear here --> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between text-xs"> | |
| <button id="locate-me" class="px-2 py-1 bg-blue-600 hover:bg-blue-700 rounded flex items-center"> | |
| <i class="fas fa-location-arrow mr-1"></i> Locate Me | |
| </button> | |
| <button id="map-style" class="px-2 py-1 bg-gray-700 hover:bg-gray-600 rounded flex items-center"> | |
| <i class="fas fa-layer-group mr-1"></i> Satellite | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Layer Controls --> | |
| <div class="map-overlay top-4 right-4"> | |
| <div class="map-control p-3 w-48"> | |
| <h3 class="font-medium mb-2">Map Layers</h3> | |
| <div class="space-y-2"> | |
| <label class="flex items-center space-x-2 text-sm"> | |
| <input type="checkbox" id="poi-toggle" class="form-checkbox text-blue-500" checked> | |
| <span>Points of Interest</span> | |
| </label> | |
| <label class="flex items-center space-x-2 text-sm"> | |
| <input type="checkbox" id="traffic-toggle" class="form-checkbox text-blue-500"> | |
| <span>Traffic</span> | |
| </label> | |
| <label class="flex items-center space-x-2 text-sm"> | |
| <input type="checkbox" id="weather-toggle" class="form-checkbox text-blue-500" checked> | |
| <span>Weather</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Location Info Panel --> | |
| <div id="location-panel" class="map-overlay bottom-4 left-4 hidden"> | |
| <div class="map-control p-4 w-80 location-card"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h2 id="location-name" class="text-lg font-bold text-blue-400">Location Name</h2> | |
| <p id="location-address" class="text-sm text-gray-400">123 Main St, City</p> | |
| </div> | |
| <button id="close-panel" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="location-image" class="mb-3 rounded bg-gray-700 h-32 flex items-center justify-center"> | |
| <i class="fas fa-image text-gray-500 text-3xl"></i> | |
| </div> | |
| <div id="location-details" class="text-sm space-y-2"> | |
| <p><i class="fas fa-info-circle text-blue-400 mr-2"></i> <span id="location-description">Description of the location.</span></p> | |
| <p><i class="fas fa-tag text-blue-400 mr-2"></i> <span id="location-category">Category</span></p> | |
| <p><i class="fas fa-star text-blue-400 mr-2"></i> <span id="location-rating">4.5/5 (120 reviews)</span></p> | |
| <p><i class="fas fa-clock text-blue-400 mr-2"></i> <span id="location-hours">Open now: 9AM - 5PM</span></p> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <button class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm"> | |
| <i class="fas fa-directions mr-1"></i> Directions | |
| </button> | |
| <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded text-sm"> | |
| <i class="fas fa-bookmark mr-1"></i> Save | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Frontier AI Chat --> | |
| <div id="chat-container" class="chat-container map-control bg-gray-800 rounded-lg shadow-xl"> | |
| <div class="bg-blue-600 px-4 py-3 rounded-t-lg flex justify-between items-center cursor-pointer" id="chat-header"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-blue-600"></i> | |
| </div> | |
| <div> | |
| <div class="font-bold">Frontier AI</div> | |
| <div class="text-xs opacity-80">Ask me about any location</div> | |
| </div> | |
| </div> | |
| <div> | |
| <i class="fas fa-chevron-up" id="chat-toggle-icon"></i> | |
| </div> | |
| </div> | |
| <div class="chat-messages p-4 space-y-3" id="chat-messages"> | |
| <div class="ai-message p-3 rounded-lg"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium text-blue-300">Frontier AI</div> | |
| <div class="mt-1 text-sm">Hello! I'm Frontier, your intelligent map assistant. Ask me about any location, get recommendations, or learn about points of interest. How can I help you explore today?</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 border-t border-gray-700"> | |
| <div class="flex items-center bg-gray-700 rounded-lg"> | |
| <input type="text" id="chat-input" placeholder="Ask about a location..." class="flex-1 bg-transparent border-none px-3 py-2 text-sm outline-none"> | |
| <button id="send-message" class="px-3 py-2 text-blue-400 hover:text-blue-300"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Weather Widget --> | |
| <div class="map-overlay top-20 right-4"> | |
| <div class="map-control p-3 w-48 bg-gradient-to-br from-blue-900 to-blue-800 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div> | |
| <div class="text-sm">Current Weather</div> | |
| <div class="text-xl font-bold" id="weather-temp">24°C</div> | |
| </div> | |
| <div class="text-3xl" id="weather-icon"> | |
| <i class="fas fa-sun text-yellow-300"></i> | |
| </div> | |
| </div> | |
| <div class="text-xs space-y-1"> | |
| <div class="flex justify-between"> | |
| <span>Humidity:</span> | |
| <span id="weather-humidity">65%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Wind:</span> | |
| <span id="weather-wind">12 km/h</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Precip:</span> | |
| <span id="weather-precip">0%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> | |
| <script> | |
| // Initialize the map | |
| const map = L.map('map').setView([51.505, -0.09], 13); | |
| // Add base tile layers | |
| const osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | |
| }); | |
| const satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { | |
| attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' | |
| }); | |
| osmLayer.addTo(map); | |
| // Sample points of interest data | |
| const poiData = [ | |
| { | |
| id: 1, | |
| name: "Central Park", | |
| lat: 51.505, | |
| lng: -0.09, | |
| category: "Park", | |
| description: "A large public park with walking trails, lakes, and recreational facilities.", | |
| rating: 4.7, | |
| reviews: 1245, | |
| hours: "Open 24 hours", | |
| address: "Park Lane, London W1K 1QA" | |
| }, | |
| { | |
| id: 2, | |
| name: "Museum of Modern Art", | |
| lat: 51.508, | |
| lng: -0.095, | |
| category: "Museum", | |
| description: "World-renowned museum featuring contemporary art exhibitions and collections.", | |
| rating: 4.8, | |
| reviews: 982, | |
| hours: "10AM - 6PM", | |
| address: "25 Museum St, London WC1A 1BA" | |
| }, | |
| { | |
| id: 3, | |
| name: "The Grand Restaurant", | |
| lat: 51.503, | |
| lng: -0.087, | |
| category: "Restaurant", | |
| description: "Award-winning fine dining with panoramic city views and seasonal menus.", | |
| rating: 4.6, | |
| reviews: 756, | |
| hours: "12PM - 11PM", | |
| address: "1 Riverside, London SE1 2AA" | |
| }, | |
| { | |
| id: 4, | |
| name: "City Shopping Mall", | |
| lat: 51.507, | |
| lng: -0.083, | |
| category: "Shopping", | |
| description: "Largest shopping center in the city with over 300 stores and restaurants.", | |
| rating: 4.4, | |
| reviews: 1543, | |
| hours: "9AM - 9PM", | |
| address: "400 Oxford St, London W1A 1AB" | |
| }, | |
| { | |
| id: 5, | |
| name: "Historic Cathedral", | |
| lat: 51.501, | |
| lng: -0.085, | |
| category: "Landmark", | |
| description: "Gothic cathedral with 700 years of history and stunning architecture.", | |
| rating: 4.9, | |
| reviews: 2301, | |
| hours: "8AM - 5PM", | |
| address: "St. Paul's Churchyard, London EC4M 8AD" | |
| } | |
| ]; | |
| // Create markers for points of interest | |
| const poiMarkers = []; | |
| poiData.forEach(poi => { | |
| const marker = L.marker([poi.lat, poi.lng], { | |
| icon: L.divIcon({ | |
| className: 'pulse', | |
| html: `<div class="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-lg"> | |
| <i class="fas ${getIconForCategory(poi.category)} text-xs"></i> | |
| </div>`, | |
| iconSize: [24, 24] | |
| }) | |
| }).addTo(map); | |
| marker.bindPopup(` | |
| <div class="marker-popup"> | |
| <h3>${poi.name}</h3> | |
| <p><i class="fas ${getIconForCategory(poi.category)} text-blue-400 mr-1"></i> ${poi.category}</p> | |
| <p>${poi.description}</p> | |
| <p><i class="fas fa-star text-yellow-400 mr-1"></i> ${poi.rating}/5 (${poi.reviews} reviews)</p> | |
| <button onclick="showLocationDetails(${poi.id})" class="mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white text-sm py-1 rounded"> | |
| More Info | |
| </button> | |
| </div> | |
| `); | |
| marker.poiData = poi; | |
| poiMarkers.push(marker); | |
| }); | |
| // Function to get appropriate icon for category | |
| function getIconForCategory(category) { | |
| switch(category.toLowerCase()) { | |
| case 'park': return 'fa-tree'; | |
| case 'museum': return 'fa-landmark'; | |
| case 'restaurant': return 'fa-utensils'; | |
| case 'shopping': return 'fa-shopping-bag'; | |
| case 'landmark': return 'fa-monument'; | |
| default: return 'fa-map-marker-alt'; | |
| } | |
| } | |
| // Show location details in panel | |
| function showLocationDetails(id) { | |
| const poi = poiData.find(item => item.id === id); | |
| if (!poi) return; | |
| document.getElementById('location-name').textContent = poi.name; | |
| document.getElementById('location-address').textContent = poi.address; | |
| document.getElementById('location-description').textContent = poi.description; | |
| document.getElementById('location-category').textContent = poi.category; | |
| document.getElementById('location-rating').textContent = `${poi.rating}/5 (${poi.reviews} reviews)`; | |
| document.getElementById('location-hours').textContent = poi.hours; | |
| // Simulate loading an image | |
| const imageContainer = document.getElementById('location-image'); | |
| imageContainer.innerHTML = ` | |
| <div class="w-full h-full bg-gradient-to-br from-blue-900 to-blue-700 rounded flex items-center justify-center"> | |
| <i class="fas fa-image text-gray-300 text-4xl"></i> | |
| </div> | |
| `; | |
| // In a real app, you would load actual images here | |
| setTimeout(() => { | |
| imageContainer.innerHTML = ` | |
| <div class="w-full h-full bg-cover bg-center rounded" style="background-image: url('https://source.unsplash.com/random/400x200/?${poi.category},${poi.name.split(' ').join(',')}')"></div> | |
| `; | |
| }, 500); | |
| document.getElementById('location-panel').classList.remove('hidden'); | |
| map.closePopup(); | |
| } | |
| // Close location panel | |
| document.getElementById('close-panel').addEventListener('click', () => { | |
| document.getElementById('location-panel').classList.add('hidden'); | |
| }); | |
| // Toggle map style | |
| let currentLayer = 'street'; | |
| document.getElementById('map-style').addEventListener('click', () => { | |
| if (currentLayer === 'street') { | |
| map.removeLayer(osmLayer); | |
| satelliteLayer.addTo(map); | |
| document.getElementById('map-style').innerHTML = '<i class="fas fa-map mr-1"></i> Street'; | |
| currentLayer = 'satellite'; | |
| } else { | |
| map.removeLayer(satelliteLayer); | |
| osmLayer.addTo(map); | |
| document.getElementById('map-style').innerHTML = '<i class="fas fa-layer-group mr-1"></i> Satellite'; | |
| currentLayer = 'street'; | |
| } | |
| }); | |
| // Locate me button | |
| document.getElementById('locate-me').addEventListener('click', () => { | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition( | |
| (position) => { | |
| map.flyTo([position.coords.latitude, position.coords.longitude], 15); | |
| L.marker([position.coords.latitude, position.coords.longitude], { | |
| icon: L.divIcon({ | |
| className: 'pulse', | |
| html: `<div class="w-8 h-8 rounded-full bg-green-600 flex items-center justify-center text-white shadow-lg"> | |
| <i class="fas fa-user text-sm"></i> | |
| </div>`, | |
| iconSize: [32, 32] | |
| }) | |
| }).addTo(map).bindPopup("Your location").openPopup(); | |
| }, | |
| (error) => { | |
| alert("Could not get your location: " + error.message); | |
| } | |
| ); | |
| } else { | |
| alert("Geolocation is not supported by your browser"); | |
| } | |
| }); | |
| // Toggle POI markers | |
| document.getElementById('poi-toggle').addEventListener('change', (e) => { | |
| poiMarkers.forEach(marker => { | |
| if (e.target.checked) { | |
| map.addLayer(marker); | |
| } else { | |
| map.removeLayer(marker); | |
| } | |
| }); | |
| }); | |
| // Search functionality | |
| document.getElementById('search-input').addEventListener('input', (e) => { | |
| const query = e.target.value.toLowerCase(); | |
| const suggestionsContainer = document.getElementById('search-suggestions'); | |
| if (query.length < 2) { | |
| suggestionsContainer.classList.add('hidden'); | |
| return; | |
| } | |
| const matches = poiData.filter(poi => | |
| poi.name.toLowerCase().includes(query) || | |
| poi.category.toLowerCase().includes(query) || | |
| poi.description.toLowerCase().includes(query) | |
| ); | |
| if (matches.length > 0) { | |
| suggestionsContainer.innerHTML = matches.slice(0, 5).map(poi => ` | |
| <div class="px-3 py-2 hover:bg-gray-700 cursor-pointer flex items-center" onclick="selectSearchResult(${poi.id})"> | |
| <i class="fas ${getIconForCategory(poi.category)} text-blue-400 mr-2"></i> | |
| <div> | |
| <div class="font-medium">${poi.name}</div> | |
| <div class="text-xs text-gray-400">${poi.category} • ${poi.address}</div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| suggestionsContainer.classList.remove('hidden'); | |
| } else { | |
| suggestionsContainer.innerHTML = ` | |
| <div class="px-3 py-2 text-gray-400 text-sm"> | |
| No results found for "${query}" | |
| </div> | |
| `; | |
| suggestionsContainer.classList.remove('hidden'); | |
| } | |
| }); | |
| // Select search result | |
| function selectSearchResult(id) { | |
| const poi = poiData.find(item => item.id === id); | |
| if (!poi) return; | |
| map.flyTo([poi.lat, poi.lng], 15); | |
| showLocationDetails(id); | |
| document.getElementById('search-input').value = poi.name; | |
| document.getElementById('search-suggestions').classList.add('hidden'); | |
| } | |
| // Chat functionality | |
| const chatContainer = document.getElementById('chat-container'); | |
| const chatMessages = document.getElementById('chat-messages'); | |
| const chatInput = document.getElementById('chat-input'); | |
| const chatToggle = document.getElementById('chat-header'); | |
| const chatToggleIcon = document.getElementById('chat-toggle-icon'); | |
| let isChatOpen = false; | |
| chatToggle.addEventListener('click', () => { | |
| isChatOpen = !isChatOpen; | |
| if (isChatOpen) { | |
| chatContainer.classList.add('open'); | |
| chatToggleIcon.classList.remove('fa-chevron-up'); | |
| chatToggleIcon.classList.add('fa-chevron-down'); | |
| chatInput.focus(); | |
| } else { | |
| chatContainer.classList.remove('open'); | |
| chatToggleIcon.classList.remove('fa-chevron-down'); | |
| chatToggleIcon.classList.add('fa-chevron-up'); | |
| } | |
| }); | |
| function addMessage(sender, message, isAI = false) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = isAI ? 'ai-message p-3 rounded-lg' : 'user-message p-3 rounded-lg'; | |
| messageDiv.innerHTML = ` | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full ${isAI ? 'bg-blue-600' : 'bg-green-600'} flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i class="fas ${isAI ? 'fa-robot' : 'fa-user'} text-white"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium ${isAI ? 'text-blue-300' : 'text-green-300'}">${sender}</div> | |
| <div class="mt-1 text-sm">${message}</div> | |
| </div> | |
| </div> | |
| `; | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| function sendMessage() { | |
| const message = chatInput.value.trim(); | |
| if (!message) return; | |
| addMessage('You', message, false); | |
| chatInput.value = ''; | |
| // Simulate AI response | |
| setTimeout(() => { | |
| const response = generateAIResponse(message); | |
| addMessage('Frontier AI', response, true); | |
| }, 1000); | |
| } | |
| chatInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| document.getElementById('send-message').addEventListener('click', sendMessage); | |
| // Simple AI response generator | |
| function generateAIResponse(query) { | |
| const lowerQuery = query.toLowerCase(); | |
| if (lowerQuery.includes('hello') || lowerQuery.includes('hi')) { | |
| return "Hello! I'm Frontier, your intelligent map assistant. How can I help you explore today?"; | |
| } | |
| if (lowerQuery.includes('restaurant') || lowerQuery.includes('eat') || lowerQuery.includes('food')) { | |
| return "I can recommend several great restaurants in the area. The Grand Restaurant has excellent reviews (4.6/5) and offers fine dining with panoramic city views. Would you like directions there?"; | |
| } | |
| if (lowerQuery.includes('park') || lowerQuery.includes('green')) { | |
| return "Central Park is a beautiful public space with walking trails and lakes. It's open 24 hours and has a 4.7/5 rating from visitors. Would you like more information about it?"; | |
| } | |
| if (lowerQuery.includes('museum') || lowerQuery.includes('art')) { | |
| return "The Museum of Modern Art is a world-renowned institution with contemporary art exhibitions. It's open from 10AM to 6PM and has a 4.8/5 rating. I can show you its location on the map if you'd like."; | |
| } | |
| if (lowerQuery.includes('shop') || lowerQuery.includes('mall') || lowerQuery.includes('store')) { | |
| return "The City Shopping Mall is the largest shopping center in the area with over 300 stores. It's open from 9AM to 9PM and has a 4.4/5 rating. Would you like to see its location?"; | |
| } | |
| if (lowerQuery.includes('historic') || lowerQuery.includes('landmark') || lowerQuery.includes('cathedral')) { | |
| return "The Historic Cathedral is a stunning gothic building with 700 years of history. It's open from 8AM to 5PM and has excellent reviews (4.9/5). I can provide more details if you're interested."; | |
| } | |
| if (lowerQuery.includes('help')) { | |
| return "I can help you with: <br>- Finding points of interest <br>- Getting directions <br>- Providing location details <br>- Recommending places to visit <br>- Answering questions about the area <br>What would you like to know?"; | |
| } | |
| // Default response if no specific match | |
| const randomResponses = [ | |
| "I found some information about that location. Would you like me to show it on the map?", | |
| "That's an interesting question! I can provide details about that place if you'd like.", | |
| "I have information about that area. Would you like to learn more?", | |
| "I can help you explore that location. Would you like directions or more details?" | |
| ]; | |
| return randomResponses[Math.floor(Math.random() * randomResponses.length)]; | |
| } | |
| // Simulate weather data | |
| function updateWeather() { | |
| const weatherConditions = ['sun', 'cloud', 'cloud-rain', 'bolt']; | |
| const weatherIcons = { | |
| 'sun': 'fa-sun', | |
| 'cloud': 'fa-cloud', | |
| 'cloud-rain': 'fa-cloud-rain', | |
| 'bolt': 'fa-bolt' | |
| }; | |
| const condition = weatherConditions[Math.floor(Math.random() * weatherConditions.length)]; | |
| const temp = Math.floor(Math.random() * 15) + 15; // 15-30°C | |
| const humidity = Math.floor(Math.random() * 30) + 50; // 50-80% | |
| const wind = Math.floor(Math.random() * 10) + 5; // 5-15 km/h | |
| const precip = Math.floor(Math.random() * 30); // 0-30% | |
| document.getElementById('weather-temp').textContent = `${temp}°C`; | |
| document.getElementById('weather-icon').innerHTML = `<i class="fas ${weatherIcons[condition]} text-yellow-300"></i>`; | |
| document.getElementById('weather-humidity').textContent = `${humidity}%`; | |
| document.getElementById('weather-wind').textContent = `${wind} km/h`; | |
| document.getElementById('weather-precip').textContent = `${precip}%`; | |
| } | |
| // Update weather every 30 minutes | |
| updateWeather(); | |
| setInterval(updateWeather, 1800000); | |
| // Close suggestions when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!e.target.closest('#search-input') && !e.target.closest('#search-suggestions')) { | |
| document.getElementById('search-suggestions').classList.add('hidden'); | |
| } | |
| }); | |
| </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=Tejas123we/map-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |