Spaces:
Running
Running
| <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> |