Spaces:
Running
Running
| <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> | |
| <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"> | |
| <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: true;'> | |
| <a-camera gps-new-camera='gpsMinDistance: 0'></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"> | |
| <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 id="mapBtn" 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 id="glassesBtn" 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 id="glassesModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-gradient-to-br from-blue-900 to-indigo-700 rounded-xl p-6 max-w-sm w-full mx-4 text-white"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold">Pair Smart Glasses</h3> | |
| <button id="closeGlassesModal" class="text-white hover:text-gray-300"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="text-center mb-6"> | |
| <div class="inline-block bg-white bg-opacity-20 rounded-full p-4 mb-4"> | |
| <i class="fas fa-glasses text-4xl"></i> | |
| </div> | |
| <p>Enable Bluetooth and select your device for hands-free AR navigation.</p> | |
| </div> | |
| <button id="pairBtn" class="w-full bg-white text-indigo-900 py-3 rounded-lg font-bold flex items-center justify-center hover:bg-gray-200"> | |
| <i class="fas fa-link mr-2"></i> Find and Pair Device | |
| </button> | |
| </div> | |
| </div> | |
| <script src="main.js" defer></script> | |
| </body> | |
| </div> | |
| <script src="main.js" defer></script> | |
| </body> | |
| </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> |