Spaces:

wasmdashai
/

sh-35

Running

App Files Files Community

wasmdashai commited on 23 days ago

Commit

7e84459

verified ·

1 Parent(s): 5dc221c

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +581 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Sh 35
-emoji: 🦀
-colorFrom: gray
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: sh-35
+emoji: 🐳
+colorFrom: yellow
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,581 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>تجربة الواقع المعزز - دليل عسير الذكي</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">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
+        body {
+            font-family: 'Tajawal', sans-serif;
+        }
+        .ar-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+        .ar-marker {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+            background-color: rgba(255, 255, 255, 0.2);
+            border: 2px dashed #fff;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(0.95); opacity: 0.7; }
+            50% { transform: scale(1.05); opacity: 1; }
+            100% { transform: scale(0.95); opacity: 0.7; }
+        }
+        .location-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+        .map-marker {
+            width: 20px;
+            height: 20px;
+            background-color: #3B82F6;
+            border-radius: 50%;
+            border: 2px solid white;
+            cursor: pointer;
+        }
+        .map-marker.active {
+            background-color: #10B981;
+            transform: scale(1.3);
+        }
+    </style>
+</head>
+<body class="bg-gray-100 text-gray-800">
+    <!-- Header -->
+    <header class="bg-gradient-to-r from-blue-600 to-green-500 text-white py-4 px-6 shadow-lg">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-2 space-x-reverse">
+                <i class="fas fa-mobile-screen text-2xl"></i>
+                <h1 class="text-2xl font-bold">دليل عسير الذكي</h1>
+            </div>
+            <button class="bg-white text-blue-600 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition">
+                <i class="fas fa-sign-in-alt ml-2"></i> تسجيل الدخول
+            </button>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Page Title -->
+        <div class="flex items-center justify-between mb-8">
+            <div>
+                <h2 class="text-3xl font-bold text-gray-800">تجربة الواقع المعزز</h2>
+                <p class="text-gray-600 mt-2">استكشف معالم عسير السياحية بتقنية الواقع المعزز</p>
+            </div>
+            <div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-full flex items-center">
+                <i class="fas fa-info-circle ml-2"></i>
+                <span>كيفية الاستخدام</span>
+            </div>
+        </div>
+        <!-- AR Experience Section -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Locations List -->
+            <div class="lg:col-span-1 bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-4 text-white">
+                    <h3 class="text-xl font-bold flex items-center">
+                        <i class="fas fa-map-marked-alt ml-2"></i>
+                        <span>اختر موقعًا سياحيًا</span>
+                    </h3>
+                </div>
+                <!-- Search and Filter -->
+                <div class="p-4 border-b">
+                    <div class="relative">
+                        <input type="text" placeholder="ابحث عن موقع..." class="w-full pr-10 pl-4 py-2 border rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
+                    </div>
+                    <div class="flex mt-4 space-x-2 space-x-reverse">
+                        <button class="filter-btn active bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">الكل</button>
+                        <button class="filter-btn bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">طبيعة</button>
+                        <button class="filter-btn bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">تراث</button>
+                        <button class="filter-btn bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">فعاليات</button>
+                    </div>
+                </div>
+                <!-- Locations List -->
+                <div class="overflow-y-auto h-96">
+                    <div class="location-card p-4 border-b cursor-pointer transition duration-300 hover:bg-blue-50" data-location="souda">
+                        <div class="flex">
+                            <img src="https://images.unsplash.com/photo-1581431886210-8c668d690d3a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="منتزه السودة" class="w-20 h-20 object-cover rounded-lg">
+                            <div class="mr-3">
+                                <h4 class="font-bold">منتزه السودة</h4>
+                                <p class="text-sm text-gray-600 mt-1">أعلى قمة في المملكة بارتفاع 3,015 متر</p>
+                                <div class="flex mt-2">
+                                    <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">طبيعة</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="location-card p-4 border-b cursor-pointer transition duration-300 hover:bg-blue-50" data-location="almas">
+                        <div class="flex">
+                            <img src="https://images.unsplash.com/photo-1582719474627-64d53c51a4e3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="قرية رجال ألمع" class="w-20 h-20 object-cover rounded-lg">
+                            <div class="mr-3">
+                                <h4 class="font-bold">قرية رجال ألمع</h4>
+                                <p class="text-sm text-gray-600 mt-1">قرية تراثية تعود لأكثر من 400 عام</p>
+                                <div class="flex mt-2">
+                                    <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">تراث</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="location-card p-4 border-b cursor-pointer transition duration-300 hover:bg-blue-50" data-location="habala">
+                        <div class="flex">
+                            <img src="https://images.unsplash.com/photo-1527631746610-bca00a040d60?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="قرية حبلة" class="w-20 h-20 object-cover rounded-lg">
+                            <div class="mr-3">
+                                <h4 class="font-bold">قرية حبلة</h4>
+                                <p class="text-sm text-gray-600 mt-1">قرية معلقة على حافة جبلية شاهقة</p>
+                                <div class="flex mt-2">
+                                    <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">طبيعة</span>
+                                    <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full mr-2">تراث</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="location-card p-4 border-b cursor-pointer transition duration-300 hover:bg-blue-50" data-location="alqara">
+                        <div class="flex">
+                            <img src="https://images.unsplash.com/photo-1519046904884-53103b34b206?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="جبل القارة" class="w-20 h-20 object-cover rounded-lg">
+                            <div class="mr-3">
+                                <h4 class="font-bold">جبل القارة</h4>
+                                <p class="text-sm text-gray-600 mt-1">موقع أثري يحتوي على نقوش ورسومات قديمة</p>
+                                <div class="flex mt-2">
+                                    <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">تراث</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="location-card p-4 border-b cursor-pointer transition duration-300 hover:bg-blue-50" data-location="alnomas">
+                        <div class="flex">
+                            <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="منتزه النماص" class="w-20 h-20 object-cover rounded-lg">
+                            <div class="mr-3">
+                                <h4 class="font-bold">منتزه النماص</h4>
+                                <p class="text-sm text-gray-600 mt-1">منتزه طبيعي غني بالتنوع النباتي والحيواني</p>
+                                <div class="flex mt-2">
+                                    <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">طبيعة</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Map and AR View -->
+            <div class="lg:col-span-2">
+                <!-- Map Preview -->
+                <div id="map-container" class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
+                    <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-4 text-white flex justify-between items-center">
+                        <h3 class="text-xl font-bold flex items-center">
+                            <i class="fas fa-map ml-2"></i>
+                            <span>خريطة عسير السياحية</span>
+                        </h3>
+                        <button id="start-ar-btn" class="bg-white text-blue-600 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition hidden">
+                            <i class="fas fa-camera ml-2"></i> بدء تجربة AR
+                        </button>
+                    </div>
+                    <div class="p-4">
+                        <div class="relative bg-gray-200 rounded-lg overflow-hidden" style="height: 300px;">
+                            <!-- Simple Map Representation -->
+                            <img src="https://maps.googleapis.com/maps/api/staticmap?center=19.0965,42.8633&zoom=8&size=800x400&maptype=roadmap&key=YOUR_API_KEY" alt="Asir Map" class="w-full h-full object-cover">
+                            <!-- Map Markers -->
+                            <div class="map-marker absolute" style="top: 30%; left: 40%;" data-location="souda"></div>
+                            <div class="map-marker absolute" style="top: 50%; left: 60%;" data-location="almas"></div>
+                            <div class="map-marker absolute" style="top: 45%; left: 30%;" data-location="habala"></div>
+                            <div class="map-marker absolute" style="top: 35%; left: 50%;" data-location="alqara"></div>
+                            <div class="map-marker absolute" style="top: 60%; left: 45%;" data-location="alnomas"></div>
+                        </div>
+                    </div>
+                </div>
+                <!-- AR View (Initially Hidden) -->
+                <div id="ar-view" class="bg-white rounded-xl shadow-md overflow-hidden hidden">
+                    <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-4 text-white flex justify-between items-center">
+                        <h3 class="text-xl font-bold flex items-center">
+                            <i class="fas fa-vr-cardboard ml-2"></i>
+                            <span>تجربة الواقع المعزز</span>
+                        </h3>
+                        <button id="back-to-map" class="bg-white text-blue-600 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition">
+                            <i class="fas fa-arrow-left ml-2"></i> العودة للخريطة
+                        </button>
+                    </div>
+                    <div class="relative" style="height: 500px;">
+                        <!-- Camera Feed -->
+                        <video id="camera-feed" autoplay playsinline class="w-full h-full object-cover"></video>
+                        <!-- AR Overlay Content -->
+                        <div id="ar-overlay" class="ar-overlay">
+                            <!-- This will be populated with AR content based on location -->
+                        </div>
+                        <!-- AR Controls -->
+                        <div class="absolute bottom-4 left-4 right-4 flex justify-center space-x-4 space-x-reverse">
+                            <button id="toggle-camera" class="bg-white bg-opacity-80 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center shadow-lg">
+                                <i class="fas fa-camera-retro text-xl"></i>
+                            </button>
+                            <button id="toggle-audio" class="bg-white bg-opacity-80 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center shadow-lg">
+                                <i class="fas fa-volume-up text-xl"></i>
+                            </button>
+                            <button id="toggle-info" class="bg-white bg-opacity-80 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center shadow-lg">
+                                <i class="fas fa-info-circle text-xl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <!-- Info Panel (Initially Hidden) -->
+                    <div id="info-panel" class="bg-white border-t p-4 hidden">
+                        <h4 class="font-bold text-lg mb-2" id="location-title">منتزه السودة</h4>
+                        <p id="location-description">أعلى قمة في المملكة العربية السعودية، حيث يصل ارتفاعها إلى 3,015 متراً فوق سطح البحر. يتميز المنتزه بمناخه المعتدل صيفاً والبارد شتاءً، ويوفر إطلالات بانورامية خلابة على جبال عسير.</p>
+                        <div class="mt-4">
+                            <h5 class="font-bold mb-2">المعالم البارزة:</h5>
+                            <ul class="list-disc mr-5 space-y-1">
+                                <li>قمة السودة - أعلى نقطة في المملكة</li>
+                                <li>منتزه السودة الوطني</li>
+                                <li>مسار المشي الجبلي</li>
+                                <li>منطقة التخييم</li>
+                            </ul>
+                        </div>
+                        <div class="mt-4 flex space-x-3 space-x-reverse">
+                            <button class="bg-blue-100 text-blue-800 px-4 py-2 rounded-full flex items-center">
+                                <i class="fas fa-headphones ml-2"></i>
+                                <span>جولة صوتية</span>
+                            </button>
+                            <button class="bg-green-100 text-green-800 px-4 py-2 rounded-full flex items-center">
+                                <i class="fas fa-video ml-2"></i>
+                                <span>مشاهدة فيديو</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-8 px-6 mt-12">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h4 class="text-lg font-bold mb-4">دليل عسير الذكي</h4>
+                    <p class="text-gray-400">منصة سياحية متكاملة تقدم تجارب تفاعلية للزوار باستخدام أحدث التقنيات.</p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">روابط سريعة</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">الرئيسية</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">المواقع السياحية</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">الفعاليات</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">تجربة AR</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">تواصل معنا</h4>
+                    <ul class="space-y-2">
+                        <li class="flex items-center">
+                            <i class="fas fa-phone ml-2 text-gray-400"></i>
+                            <span class="text-gray-400">920000000</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-envelope ml-2 text-gray-400"></i>
+                            <span class="text-gray-400">[email protected]</span>
+                        </li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">تابعنا</h4>
+                    <div class="flex space-x-4 space-x-reverse">
+                        <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-600 transition">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-800 transition">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-pink-600 transition">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-red-600 transition">
+                            <i class="fab fa-youtube"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
+                <p>© 2023 دليل عسير الذكي. جميع الحقوق محفوظة.</p>
+            </div>
+        </div>
+    </footer>
+    <!-- AR Content Templates (Hidden) -->
+    <div id="ar-content-templates" class="hidden">
+        <!-- Souda Park Content -->
+        <div id="souda-content">
+            <div class="ar-marker" style="top: 30%; left: 40%;">
+                <i class="fas fa-mountain text-white text-2xl"></i>
+            </div>
+            <div class="absolute top-20 left-20 bg-white bg-opacity-90 p-3 rounded-lg max-w-xs shadow-lg">
+                <h5 class="font-bold">قمة السودة</h5>
+                <p class="text-sm mt-1">أعلى نقطة في المملكة (3,015 م)</p>
+            </div>
+            <div class="absolute bottom-40 right-20 bg-white bg-opacity-90 p-3 rounded-lg max-w-xs shadow-lg">
+                <img src="https://images.unsplash.com/photo-1581431886210-8c668d690d3a?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Old Souda" class="rounded mb-2">
+                <p class="text-sm">منتزه السودة في الثمانينات الميلادية</p>
+            </div>
+        </div>
+        <!-- Almas Village Content -->
+        <div id="almas-content">
+            <div class="ar-marker" style="top: 50%; left: 60%;">
+                <i class="fas fa-home text-white text-2xl"></i>
+            </div>
+            <div class="absolute top-20 right-20 bg-white bg-opacity-90 p-3 rounded-lg max-w-xs shadow-lg">
+                <h5 class="font-bold">قرية رجال ألمع</h5>
+                <p class="text-sm mt-1">قرية تراثية عمرها 400 عام</p>
+            </div>
+            <div class="absolute bottom-40 left-20 bg-white bg-opacity-90 p-3 rounded-lg max-w-xs shadow-lg">
+                <img src="https://images.unsplash.com/photo-1582719474627-64d53c51a4e3?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Old Almas" class="rounded mb-2">
+                <p class="text-sm">القرية في بداية القرن العشرين</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Elements
+            const locationCards = document.querySelectorAll('.location-card');
+            const mapMarkers = document.querySelectorAll('.map-marker');
+            const startArBtn = document.getElementById('start-ar-btn');
+            const backToMapBtn = document.getElementById('back-to-map');
+            const mapContainer = document.getElementById('map-container');
+            const arView = document.getElementById('ar-view');
+            const cameraFeed = document.getElementById('camera-feed');
+            const arOverlay = document.getElementById('ar-overlay');
+            const toggleCameraBtn = document.getElementById('toggle-camera');
+            const toggleAudioBtn = document.getElementById('toggle-audio');
+            const toggleInfoBtn = document.getElementById('toggle-info');
+            const infoPanel = document.getElementById('info-panel');
+            const locationTitle = document.getElementById('location-title');
+            const locationDescription = document.getElementById('location-description');
+            // Location data
+            const locations = {
+                souda: {
+                    title: "منتزه السودة",
+                    description: "أعلى قمة في المملكة العربية السعودية، حيث يصل ارتفاعها إلى 3,015 متراً فوق سطح البحر. يتميز المنتزه بمناخه المعتدل صيفاً والبارد شتاءً، ويوفر إطلالات بانورامية خلابة على جبال عسير.",
+                    features: [
+                        "قمة السودة - أعلى نقطة في المملكة",
+                        "منتزه السودة الوطني",
+                        "مسار المشي الجبلي",
+                        "منطقة التخييم"
+                    ]
+                },
+                almas: {
+                    title: "قرية رجال ألمع",
+                    description: "قرية تراثية تعود لأكثر من 400 عام، تتميز ببيوتها الحجرية المبنية بطريقة فريدة. القرية مدرجة على قائمة اليونسكو للتراث العالمي وتقدم لمحة عن حياة الأجداد في المنطقة.",
+                    features: [
+                        "المتحف التراثي",
+                        "البيو�� الحجرية التقليدية",
+                        "سوق الحرف اليدوية",
+                        "معرض الفنون القديمة"
+                    ]
+                },
+                habala: {
+                    title: "قرية حبلة",
+                    description: "قرية معلقة على حافة جبلية شاهقة الارتفاع، كانت تُعرف سابقاً باسم 'قرية السحب' بسبب موقعها المرتفع. يمكن الوصول إليها عبر التلفريك الذي يقدم إطلالات رائعة على الوادي.",
+                    features: [
+                        "التلفريك المعلق",
+                        "المنحدرات الصخرية",
+                        "المدرجات الزراعية",
+                        "المناظر البانورامية"
+                    ]
+                }
+            };
+            // Selected location
+            let selectedLocation = null;
+            // Select location
+            function selectLocation(locationId) {
+                // Update UI
+                locationCards.forEach(card => {
+                    if (card.dataset.location === locationId) {
+                        card.classList.add('bg-blue-50', 'border-blue-200');
+                    } else {
+                        card.classList.remove('bg-blue-50', 'border-blue-200');
+                    }
+                });
+                mapMarkers.forEach(marker => {
+                    if (marker.dataset.location === locationId) {
+                        marker.classList.add('active');
+                    } else {
+                        marker.classList.remove('active');
+                    }
+                });
+                // Set selected location
+                selectedLocation = locationId;
+                // Show start AR button
+                startArBtn.classList.remove('hidden');
+                // Update info panel if visible
+                if (!infoPanel.classList.contains('hidden')) {
+                    updateInfoPanel(locationId);
+                }
+            }
+            // Update info panel
+            function updateInfoPanel(locationId) {
+                const location = locations[locationId];
+                if (location) {
+                    locationTitle.textContent = location.title;
+                    locationDescription.textContent = location.description;
+                    // You would update features list here as well
+                }
+            }
+            // Start AR Experience
+            function startAR() {
+                if (!selectedLocation) return;
+                // Request camera access
+                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+                    navigator.mediaDevices.getUserMedia({ video: true })
+                        .then(function(stream) {
+                            cameraFeed.srcObject = stream;
+                            // Switch to AR view
+                            mapContainer.classList.add('hidden');
+                            arView.classList.remove('hidden');
+                            // Load AR content for selected location
+                            loadARContent(selectedLocation);
+                        })
+                        .catch(function(error) {
+                            alert('يجب السماح باستخدام الكاميرا لتجربة الواقع المعزز');
+                            console.error('Camera access error:', error);
+                        });
+                } else {
+                    alert('عذرًا، تجربة الواقع المعزز غير مدعومة في متصفحك');
+                }
+            }
+            // Load AR content
+            function loadARContent(locationId) {
+                // Clear previous content
+                arOverlay.innerHTML = '';
+                // Get template for this location
+                const template = document.getElementById(`${locationId}-content`);
+                if (template) {
+                    arOverlay.innerHTML = template.innerHTML;
+                } else {
+                    // Default AR marker if no specific content
+                    const marker = document.createElement('div');
+                    marker.className = 'ar-marker';
+                    marker.style.top = '50%';
+                    marker.style.left = '50%';
+                    marker.innerHTML = '<i class="fas fa-map-marker-alt text-white text-2xl"></i>';
+                    arOverlay.appendChild(marker);
+                    const info = document.createElement('div');
+                    info.className = 'absolute top-20 left-1/2 transform -translate-x-1/2 bg-white bg-opacity-90 p-3 rounded-lg max-w-xs shadow-lg';
+                    info.innerHTML = `<h5 class="font-bold">${locations[locationId]?.title || 'موقع سياحي'}</h5>
+                                     <p class="text-sm mt-1">توجيه الكاميرا نحو المعلم السياحي</p>`;
+                    arOverlay.appendChild(info);
+                }
+                // Update info panel
+                updateInfoPanel(locationId);
+            }
+            // Back to map
+            function backToMap() {
+                // Stop camera
+                if (cameraFeed.srcObject) {
+                    cameraFeed.srcObject.getTracks().forEach(track => track.stop());
+                    cameraFeed.srcObject = null;
+                }
+                // Switch views
+                arView.classList.add('hidden');
+                mapContainer.classList.remove('hidden');
+                // Hide info panel
+                infoPanel.classList.add('hidden');
+            }
+            // Event Listeners
+            locationCards.forEach(card => {
+                card.addEventListener('click', function() {
+                    selectLocation(this.dataset.location);
+                });
+            });
+            mapMarkers.forEach(marker => {
+                marker.addEventListener('click', function() {
+                    selectLocation(this.dataset.location);
+                });
+            });
+            startArBtn.addEventListener('click', startAR);
+            backToMapBtn.addEventListener('click', backToMap);
+            toggleCameraBtn.addEventListener('click', function() {
+                alert('سيتم تبديل الكاميرا الأمامية/الخلفية في التطبيق الكامل');
+            });
+            toggleAudioBtn.addEventListener('click', function() {
+                this.querySelector('i').classList.toggle('fa-volume-up');
+                this.querySelector('i').classList.toggle('fa-volume-mute');
+                alert('سيتم تبديل الصوت في التطبيق الكامل');
+            });
+            toggleInfoBtn.addEventListener('click', function() {
+                infoPanel.classList.toggle('hidden');
+            });
+            // Filter buttons
+            document.querySelectorAll('.filter-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+                    this.classList.add('active');
+                    // In a real app, you would filter locations here
+                });
+            });
+            // Initial selection
+            selectLocation('souda');
+        });
+    </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=wasmdashai/sh-35" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>