Spaces:

privateuserh
/

AR-City-Explorer

Running

App Files Files Community

privateuserh commited on Jun 12

Commit

74e7a9d

verified ·

1 Parent(s): 1353374

Create index.html

Browse files

Files changed (1) hide show

index.html +251 -0

index.html ADDED Viewed

	@@ -0,0 +1,251 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AR City Explorer | Smart Glasses Companion</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">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe.min.js"></script>
+    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
+    <style>
+        /* Your original CSS styles are fine, no changes needed here. */
+        @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
+        .pulse { animation: pulse 2s infinite; }
+        .ar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; }
+        .ai-message { max-width: 80%; margin-bottom: 10px; padding: 12px; border-radius: 18px; position: relative; }
+        .user-message { background-color: #3b82f6; color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
+        .assistant-message { background-color: #f3f4f6; color: #111827; align-self: flex-start; border-bottom-left-radius: 4px; }
+        .glasses-pairing { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
+        .loading-spinner { width: 50px; height: 50px; border: 5px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+    </style>
+</head>
+<body class="bg-gray-100 font-sans">
+    <div class="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden min-h-screen flex flex-col">
+        <header class="bg-indigo-900 text-white p-4 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i class="fas fa-glasses text-2xl"></i>
+                <h1 class="text-xl font-bold">AR City Explorer</h1>
+            </div>
+            <div class="flex space-x-3">
+                <button id="arToggle" class="bg-indigo-700 hover:bg-indigo-600 px-3 py-1 rounded-full text-sm flex items-center">
+                    <i class="fas fa-vr-cardboard mr-1"></i> AR Mode
+                </button>
+                <button id="settingsBtn" class="bg-indigo-700 hover:bg-indigo-600 px-3 py-1 rounded-full text-sm">
+                    <i class="fas fa-cog"></i>
+                </button>
+            </div>
+        </header>
+        <main class="flex-1 overflow-hidden">
+            <div id="arViewport" class="hidden relative">
+                 <a-scene id="arScene" vr-mode-ui="enabled: false" arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'>
+                    <a-camera gps-new-camera='gpsMinDistance: 5'></a-camera>
+                </a-scene>
+            </div>
+            <div id="normalView" class="h-full flex flex-col">
+                <div id="aiAssistant" class="flex-1 overflow-y-auto p-4 bg-gray-50">
+                    <div class="flex flex-col space-y-2">
+                        <div class="ai-message assistant-message">
+                            <div class="font-bold text-indigo-800 mb-1">AR Guide</div>
+                            <p>Hello! Ask me about nearby landmarks, or switch to AR mode to explore.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="p-4 border-t border-gray-200 bg-white">
+                    <div class="flex space-x-2">
+                        <input type="text" id="userInput" placeholder="Ask about places..." class="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                        <button id="sendBtn" class="bg-indigo-600 text-white rounded-full w-10 h-10 flex items-center justify-center">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                        <button id="voiceBtn" class="bg-gray-200 text-gray-700 rounded-full w-10 h-10 flex items-center justify-center">
+                            <i class="fas fa-microphone"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <nav class="bg-white border-t border-gray-200 p-2 flex justify-around">
+            </nav>
+    </div>
+    <div id="objectModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+        <div class="bg-white rounded-xl p-6 max-w-sm w-full">
+            <div class="flex justify-between items-center mb-4">
+                <h3 id="objectTitle" class="text-xl font-bold text-gray-800"></h3>
+                <button id="closeObjectModal" class="text-gray-500"><i class="fas fa-times"></i></button>
+            </div>
+            <img id="objectImage" src="" alt="Landmark" class="w-full h-48 object-cover rounded-lg mb-4">
+            <div id="objectDescription" class="text-gray-700 mb-4"></div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // --- CONFIGURATION ---
+            const config = {
+                // IMPORTANT: Paste your full and correct Cloudflare Worker URL here
+                backendUrl: 'https://ar-city-explorer-backend.<your-subdomain>.workers.dev'
+            };
+            // --- GLOBAL STATE ---
+            let poisData = []; // This will hold all our landmark data from the backend
+            let arActive = false;
+            let glassesPaired = false; // You can manage this state as needed
+            // --- DOM ELEMENT SELECTORS ---
+            const arToggle = document.getElementById('arToggle');
+            const arViewport = document.getElementById('arViewport');
+            const normalView = document.getElementById('normalView');
+            const aiAssistant = document.getElementById('aiAssistant');
+            const userInput = document.getElementById('userInput');
+            const sendBtn = document.getElementById('sendBtn');
+            const objectModal = document.getElementById('objectModal');
+            const objectTitle = document.getElementById('objectTitle');
+            const objectDescription = document.getElementById('objectDescription');
+            const objectImage = document.getElementById('objectImage');
+            const closeObjectModal = document.getElementById('closeObjectModal');
+            // --- CORE FUNCTIONS ---
+            function toggleARView(showAR) {
+                arActive = showAR;
+                if (arActive) {
+                    normalView.classList.add('hidden');
+                    arViewport.classList.remove('hidden');
+                    arToggle.innerHTML = '<i class="fas fa-times mr-1"></i> Exit AR';
+                    // Fetch data only if it hasn't been fetched yet
+                    if (poisData.length === 0) {
+                        fetchPoisAndCreateAREntities();
+                    }
+                } else {
+                    arViewport.classList.add('hidden');
+                    normalView.classList.remove('hidden');
+                    arToggle.innerHTML = '<i class="fas fa-vr-cardboard mr-1"></i> AR Mode';
+                }
+            }
+            function fetchPoisAndCreateAREntities() {
+                console.log('Fetching POIs from backend...');
+                fetch(`${config.backendUrl}/api/pois`)
+                    .then(response => {
+                        if (!response.ok) throw new Error(`Network error: ${response.statusText}`);
+                        return response.json();
+                    })
+                    .then(pois => {
+                        console.log('POIs received:', pois);
+                        poisData = pois; // Store the data globally
+                        const scene = document.querySelector('a-scene');
+                        if (!scene) return console.error('A-Frame scene not found!');
+                        pois.forEach(poi => {
+                            const entity = document.createElement('a-entity');
+                            entity.setAttribute('gps-new-entity-place', {
+                                latitude: poi.latitude,
+                                longitude: poi.longitude
+                            });
+                            const box = document.createElement('a-box');
+                            box.setAttribute('material', 'color: red; opacity: 0.7;');
+                            box.setAttribute('scale', '10 10 10');
+                            box.setAttribute('position', '0 5 0');
+                            box.setAttribute('data-poi-id', poi.id); // Set ID for click detection
+                            entity.appendChild(box);
+                            const text = document.createElement('a-text');
+                            text.setAttribute('value', poi.name);
+                            text.setAttribute('look-at', '[gps-new-camera]');
+                            text.setAttribute('scale', '50 50 50');
+                            text.setAttribute('position', '0 15 0');
+                            entity.appendChild(text);
+                            scene.appendChild(entity);
+                        });
+                    })
+                    .catch(error => {
+                        console.error('Failed to load POIs:', error);
+                        alert('Could not load city data. Check your connection and the backend URL.');
+                        toggleARView(false);
+                    });
+            }
+            // --- MODAL AND UI FUNCTIONS ---
+            function showObjectInfo(poiId) {
+                const poi = poisData.find(p => p.id === poiId);
+                if (!poi) return;
+                objectTitle.textContent = poi.name;
+                objectDescription.textContent = poi.description || "No description available.";
+                objectImage.src = `https://via.placeholder.com/300x200?text=${encodeURIComponent(poi.name)}`;
+                objectModal.classList.remove('hidden');
+            }
+            function addUserMessage(message) {
+                const chatContainer = aiAssistant.querySelector('.flex-col');
+                const msg = `<div class="ai-message user-message"><p>${message}</p></div>`;
+                chatContainer.insertAdjacentHTML('beforeend', msg);
+                aiAssistant.scrollTop = aiAssistant.scrollHeight;
+            }
+            function addAIMessage(message) {
+                const chatContainer = aiAssistant.querySelector('.flex-col');
+                const msg = `<div class="ai-message assistant-message"><div class="font-bold text-indigo-800 mb-1">AR Guide</div><p>${message}</p></div>`;
+                chatContainer.insertAdjacentHTML('beforeend', msg);
+                aiAssistant.scrollTop = aiAssistant.scrollHeight;
+            }
+            function handleSearch() {
+                const searchTerm = userInput.value.trim();
+                if (!searchTerm) return;
+                addUserMessage(searchTerm);
+                userInput.value = '';
+                if (poisData.length === 0) {
+                    addAIMessage("I'm still loading location data. Please try again in a moment.");
+                    return;
+                }
+                const results = poisData.filter(poi =>
+                    poi.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                    (poi.description && poi.description.toLowerCase().includes(searchTerm.toLowerCase()))
+                );
+                if (results.length > 0) {
+                    let response = `I found ${results.length} result(s):<ul>`;
+                    results.forEach(poi => { response += `<li class="mt-2 list-disc list-inside">${poi.name}</li>`; });
+                    response += "</ul>";
+                    addAIMessage(response);
+                } else {
+                    addAIMessage(`Sorry, I couldn't find anything matching "${searchTerm}".`);
+                }
+            }
+            // --- EVENT LISTENERS ---
+            arToggle.addEventListener('click', () => toggleARView(!arActive));
+            document.querySelector('a-scene').addEventListener('click', (event) => {
+                if (event.target.hasAttribute('data-poi-id')) {
+                    const poiId = parseInt(event.target.getAttribute('data-poi-id'), 10);
+                    showObjectInfo(poiId);
+                }
+            });
+            closeObjectModal.addEventListener('click', () => objectModal.classList.add('hidden'));
+            sendBtn.addEventListener('click', handleSearch);
+            userInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') handleSearch();
+            });
+            // Initial fetch of data for the search bar to work immediately
+            fetchPoisAndCreateAREntities();
+        });
+    </script>
+</body>
+</html>