Update index.html

index.html

@@ -86,6 +86,27 @@
                         <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 to enable 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>
                 <div>
                     <h4 class="font-medium text-gray-800 mb-2">AI Assistant</h4>