Spaces:

privateuserh
/

AR-City-Explorer

Running

App Files Files Community

privateuserh commited on Jun 13

Commit

1005640

verified ·

1 Parent(s): bf2b7a0

Update index.html

Browse files

Files changed (1) hide show

index.html +18 -46

index.html CHANGED Viewed

@@ -4,17 +4,17 @@
     <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">
-    <link rel="stylesheet" href="style.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>
 </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">
@@ -33,13 +33,12 @@
         <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">
-              <pre id="debug-log" style="background-color: #ffdddd; color: #a00; border: 1px solid #a00; padding: 10px; margin: 10px; white-space: pre-wrap; word-break: break-all;"></pre>
                 <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">
@@ -61,68 +60,41 @@
                 </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 id="aerodeckSection" class="mt-4 hidden">
-        <h4 class="font-bold text-gray-800 mb-2">AeroDeck Network</h4>
-        <div id="aerodeckList" class="space-y-2">
-          </div>
-      </div>
-      <div class="flex space-x-2">
         </div>
     </div>
-  <div id="settingsModal" 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 mx-4">
-            <div class="flex justify-between items-center mb-6">
-                <h3 class="text-xl font-bold text-gray-800">Settings</h3>
-                <button id="closeSettingsModal" class="text-gray-500 hover:text-gray-800">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
             <div class="space-y-4">
                 <div>
                     <h4 class="font-medium text-gray-800 mb-2">AR Preferences</h4>
                     <div class="space-y-2">
-                        <label class="flex items-center space-x-3 cursor-pointer">
-                            <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" data-setting="showHistorical" checked>
-                            <span>Show historical information</span>
-                        </label>
-                        <label class="flex items-center space-x-3 cursor-pointer">
-                            <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" data-setting="showMenus" checked>
-                            <span>Show restaurant menus</span>
-                        </label>
-                        <label class="flex items-center space-x-3 cursor-pointer">
-                            <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" data-setting="showNavigation">
-                            <span>Show AR navigation guides</span>
-                        </label>
                     </div>
                 </div>
                 <div>
                     <h4 class="font-medium text-gray-800 mb-2">AI Assistant</h4>
-                    <div class="space-y-2">
-                         <label class="flex items-center space-x-3 cursor-pointer">
-                            <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" data-setting="voiceResponses" checked>
-                            <span>Voice responses</span>
-                        </label>
-                    </div>
                 </div>
             </div>
         </div>
     </div>
     <script src="main.js" defer></script>
-</body>
-  <script src="main.js" defer></script>
 </body>
 </html>

     <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>
+    <link rel="stylesheet" href="style.css">
 </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">
         <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>
             </div>
         </main>
         <nav class="bg-white border-t border-gray-200 p-2 flex justify-around">
+             <button class="p-2 text-indigo-600 flex flex-col items-center"><i class="fas fa-compass text-xl"></i><span class="text-xs mt-1">Explore</span></button>
+             <button class="p-2 text-gray-500 flex flex-col items-center"><i class="fas fa-map-marked-alt text-xl"></i><span class="text-xs mt-1">Map</span></button>
+             <button class="p-2 text-gray-500 flex flex-col items-center"><i class="fas fa-glasses text-xl"></i><span class="text-xs mt-1">Glasses</span></button>
+        </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 mx-4">
+            <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 hover:text-gray-800"><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 id="aerodeckSection" class="mt-4 hidden"><h4 class="font-bold text-gray-800 mb-2">AeroDeck Network</h4><div id="aerodeckList" class="space-y-2"></div></div>
         </div>
     </div>
+    <div id="settingsModal" 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 mx-4">
+            <div class="flex justify-between items-center mb-6"><h3 class="text-xl font-bold text-gray-800">Settings</h3><button id="closeSettingsModal" class="text-gray-500 hover:text-gray-800"><i class="fas fa-times"></i></button></div>
             <div class="space-y-4">
                 <div>
                     <h4 class="font-medium text-gray-800 mb-2">AR Preferences</h4>
                     <div class="space-y-2">
+                        <label class="flex items-center space-x-3 cursor-pointer"><input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" data-setting="showHistorical" checked><span>Show historical information</span></label>
+                        <label class="flex items-center space-x-3 cursor-pointer"><input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" data-setting="showMenus" checked><span>Show restaurant menus</span></label>
+                        <label class="flex items-center space-x-3 cursor-pointer"><input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" data-setting="showNavigation"><span>Show AR navigation guides</span></label>
                     </div>
                 </div>
                 <div>
                     <h4 class="font-medium text-gray-800 mb-2">AI Assistant</h4>
+                    <div class="space-y-2"><label class="flex items-center space-x-3 cursor-pointer"><input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" data-setting="voiceResponses" checked><span>Voice responses</span></label></div>
                 </div>
             </div>
         </div>
     </div>
     <script src="main.js" defer></script>
 </body>
 </html>