| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Dark Real Estate - AI Profiler</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| |
| |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/> |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> |
|
|
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { sans: ['Cairo', 'sans-serif'] }, |
| colors: { |
| dark: { bg: '#0B0F19', surface: '#111827', accent: '#F59E0B' } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| body { margin: 0; padding: 0; background: #0B0F19; color: #FFFFFF; font-family: 'Cairo', sans-serif; overflow: hidden; } |
| |
| .gradient-text { |
| background: linear-gradient(135deg, #FCD34D, #F59E0B); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| |
| #map { width: 100%; height: 100%; background: #0B0F19; } |
| .leaflet-control-zoom { border: none !important; margin: 20px !important; } |
| .leaflet-bar a { background-color: rgba(11,15,25,0.9) !important; color: #F59E0B !important; border-color: rgba(255,255,255,0.1) !important; } |
| |
| |
| .map-vignette { |
| position: absolute; inset: 0; pointer-events: none; z-index: 500; |
| background: radial-gradient(circle, transparent 40%, rgba(11,15,25,0.9) 120%); |
| } |
| |
| .data-overlay { |
| position: absolute; top: 40px; left: 40px; z-index: 1000; |
| background: rgba(11, 15, 25, 0.8); backdrop-filter: blur(12px); |
| border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; |
| padding: 1.5rem; width: 300px; |
| opacity: 0; transform: translateY(-20px); transition: all 0.5s ease; |
| pointer-events: none; |
| } |
| .data-overlay.visible { opacity: 1; transform: translateY(0); } |
| |
| |
| .sidebar { |
| background: rgba(11, 15, 25, 0.95); |
| border-left: 1px solid rgba(255, 255, 255, 0.05); |
| box-shadow: -10px 0 30px rgba(0,0,0,0.5); |
| z-index: 1000; |
| } |
| |
| .option-btn { |
| background: rgba(255, 255, 255, 0.03); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| .option-btn:hover, .option-btn.selected { |
| border-color: #F59E0B; |
| background: rgba(245, 158, 11, 0.05); |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(245, 158, 11, 0.15); |
| } |
| |
| |
| .step-container { |
| transition: opacity 0.4s ease, transform 0.4s ease; |
| position: absolute; top: 0; left: 0; right: 0; padding: 2rem; |
| } |
| .step-hidden { opacity: 0; transform: translateX(30px); pointer-events: none; visibility: hidden; } |
| .step-hidden-prev { opacity: 0; transform: translateX(-30px); pointer-events: none; visibility: hidden; } |
| .step-active { opacity: 1; transform: translateX(0); visibility: visible; position: relative; } |
| |
| .spinner { |
| width: 60px; height: 60px; border: 3px solid transparent; border-top-color: #F59E0B; border-bottom-color: #FCD34D; |
| border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; |
| } |
| @keyframes spin { 100% { transform: rotate(360deg); } } |
| |
| .pulse-text { animation: pulse 2s infinite; } |
| @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } |
| </style> |
| </head> |
| <body class="flex h-screen w-screen"> |
|
|
| |
| <div class="flex-1 relative h-full"> |
| <div id="map"></div> |
| <div class="map-vignette"></div> |
| |
| |
| <div id="live-data-overlay" class="data-overlay"> |
| <h3 class="text-gray-400 text-xs font-bold uppercase tracking-widest mb-1">Live Market Analysis</h3> |
| <div id="map-status-title" class="text-xl font-black text-white mb-4">جاري تحليل منطقة القاهرة...</div> |
| |
| <div class="space-y-3"> |
| <div> |
| <div class="flex justify-between text-xs mb-1"><span class="text-gray-400">حجم الطلب</span> <span class="text-dark-accent font-bold">عالي</span></div> |
| <div class="w-full h-1.5 bg-white/10 rounded-full overflow-hidden"><div class="w-[85%] h-full bg-dark-accent rounded-full"></div></div> |
| </div> |
| <div> |
| <div class="flex justify-between text-xs mb-1"><span class="text-gray-400">متوسط العائد السنوي (ROI)</span> <span class="text-green-400 font-bold">12%</span></div> |
| <div class="w-full h-1.5 bg-white/10 rounded-full overflow-hidden"><div class="w-[60%] h-full bg-green-400 rounded-full"></div></div> |
| </div> |
| </div> |
| |
| <div class="mt-4 pt-4 border-t border-white/10 flex items-center gap-3"> |
| <i class="fa-solid fa-satellite-dish text-dark-accent animate-pulse"></i> |
| <span class="text-xs text-gray-400" id="map-status-desc">تحديث البيانات الجغرافية...</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="w-full md:w-[450px] shrink-0 sidebar h-full flex flex-col relative"> |
| |
| |
| <div class="p-6 pb-2 flex items-center justify-between z-10 border-b border-white/5 bg-dark-bg/80 backdrop-blur sticky top-0"> |
| <div class="flex items-center gap-3 cursor-pointer hover:scale-105 transition" onclick="window.location.href='index.html'"> |
| <img src="logo.png" alt="Dark Logo" class="h-8 object-contain"> |
| <span class="text-xs font-bold tracking-widest text-white/50 uppercase">AI Profiler</span> |
| </div> |
| <button onclick="window.location.href='index.html'" class="text-white/50 hover:text-white transition"> |
| إلغاء <i class="fa-solid fa-xmark"></i> |
| </button> |
| </div> |
|
|
| |
| <div class="px-6 py-4 flex gap-2"> |
| <div id="pip-1" class="h-1 rounded-full flex-1 bg-dark-accent shadow-[0_0_10px_#F59E0B] transition-all duration-500"></div> |
| <div id="pip-2" class="h-1 rounded-full flex-1 bg-white/10 transition-all duration-500"></div> |
| <div id="pip-3" class="h-1 rounded-full flex-1 bg-white/10 transition-all duration-500"></div> |
| <div id="pip-4" class="h-1 rounded-full flex-1 bg-white/10 transition-all duration-500"></div> |
| </div> |
|
|
| |
| <div class="flex-1 relative overflow-hidden overflow-y-auto"> |
| |
| |
| <div id="step-1" class="step-container step-active"> |
| <h2 class="text-3xl font-black mb-2">ما هو هدفك الرئيسي؟</h2> |
| <p class="text-gray-400 text-sm mb-8">يقوم الذكاء الاصطناعي بتوجيه الخريطة نحو المناطق ذات العوائد الأفضل بناءً على هدفك.</p> |
| |
| <div class="flex flex-col gap-4"> |
| <button onclick="selectGoal('سكن دائم')" class="option-btn p-5 rounded-2xl flex items-center gap-4 group text-right w-full"> |
| <div class="w-12 h-12 rounded-xl bg-dark-surface border border-white/5 flex items-center justify-center text-xl group-hover:text-dark-accent transition shrink-0"><i class="fa-solid fa-house-user"></i></div> |
| <div> |
| <div class="font-bold text-lg text-white">سكن دائم</div> |
| <div class="text-xs text-gray-500 mt-1">البحث عن مجتمعات سكنية متكاملة الخدمات.</div> |
| </div> |
| </button> |
| |
| <button onclick="selectGoal('استثمار عقاري')" class="option-btn p-5 rounded-2xl flex items-center gap-4 group text-right w-full"> |
| <div class="w-12 h-12 rounded-xl bg-dark-surface border border-white/5 flex items-center justify-center text-xl group-hover:text-dark-accent transition shrink-0"><i class="fa-solid fa-chart-line"></i></div> |
| <div> |
| <div class="font-bold text-lg text-white">استثمار عقاري</div> |
| <div class="text-xs text-gray-500 mt-1">مناطق ذات عائد إيجاري ونمو رأسمالي مرتفع.</div> |
| </div> |
| </button> |
|
|
| <button onclick="selectGoal('إيجار')" class="option-btn p-5 rounded-2xl flex items-center gap-4 group text-right w-full"> |
| <div class="w-12 h-12 rounded-xl bg-dark-surface border border-white/5 flex items-center justify-center text-xl group-hover:text-dark-accent transition shrink-0"><i class="fa-solid fa-key"></i></div> |
| <div> |
| <div class="font-bold text-lg text-white">إيجار</div> |
| <div class="text-xs text-gray-500 mt-1">وحدات جاهزة للسكن بأسعار تنافسية.</div> |
| </div> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step-2" class="step-container step-hidden"> |
| <button onclick="prevStep(2, 1)" class="text-white/50 hover:text-white transition flex items-center gap-2 mb-6 text-sm font-bold"><i class="fa-solid fa-arrow-right"></i> رجوع</button> |
| |
| <h2 class="text-3xl font-black mb-2">نوع العقار المفضل</h2> |
| <p class="text-gray-400 text-sm mb-8">سنقوم بتحديد المشاريع التي توفر هذا النوع على الخريطة.</p> |
| |
| <div class="grid grid-cols-2 gap-3"> |
| <button onclick="selectProperty('شقة فندقية')" class="option-btn py-6 rounded-xl flex flex-col items-center gap-3 group"> |
| <i class="fa-solid fa-building text-3xl text-gray-500 group-hover:text-dark-accent transition"></i> |
| <span class="font-bold text-sm">شقة فندقية</span> |
| </button> |
| <button onclick="selectProperty('فيلا مستقلة')" class="option-btn py-6 rounded-xl flex flex-col items-center gap-3 group"> |
| <i class="fa-solid fa-house text-3xl text-gray-500 group-hover:text-dark-accent transition"></i> |
| <span class="font-bold text-sm">فيلا مستقلة</span> |
| </button> |
| <button onclick="selectProperty('تاون هاوس')" class="option-btn py-6 rounded-xl flex flex-col items-center gap-3 group"> |
| <i class="fa-solid fa-door-open text-3xl text-gray-500 group-hover:text-dark-accent transition"></i> |
| <span class="font-bold text-sm">تاون هاوس</span> |
| </button> |
| <button onclick="selectProperty('تجاري / إداري')" class="option-btn py-6 rounded-xl flex flex-col items-center gap-3 group"> |
| <i class="fa-solid fa-store text-3xl text-gray-500 group-hover:text-dark-accent transition"></i> |
| <span class="font-bold text-sm">مقر تجاري</span> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step-3" class="step-container step-hidden"> |
| <button onclick="prevStep(3, 2)" class="text-white/50 hover:text-white transition flex items-center gap-2 mb-6 text-sm font-bold"><i class="fa-solid fa-arrow-right"></i> رجوع</button> |
| |
| <h2 class="text-3xl font-black mb-2">تحديد الميزانية</h2> |
| <p class="text-gray-400 text-sm mb-8">سيتم فلترة البيانات الجغرافية وعرض العقارات المناسبة فقط.</p> |
| |
| <div class="flex flex-col gap-3"> |
| <button onclick="selectBudget('أقل من 3 مليون')" class="option-btn p-5 rounded-xl flex justify-between items-center group"> |
| <span class="font-bold text-lg">أقل من 3 مليون ج.م</span> |
| <i class="fa-solid fa-chevron-left text-dark-accent opacity-0 group-hover:opacity-100 transition"></i> |
| </button> |
| <button onclick="selectBudget('3 - 8 مليون')" class="option-btn p-5 rounded-xl flex justify-between items-center group"> |
| <span class="font-bold text-lg">3 - 8 مليون ج.م</span> |
| <i class="fa-solid fa-chevron-left text-dark-accent opacity-0 group-hover:opacity-100 transition"></i> |
| </button> |
| <button onclick="selectBudget('أكثر من 8 مليون')" class="option-btn p-5 rounded-xl flex justify-between items-center group"> |
| <span class="font-bold text-lg">أكثر من 8 مليون ج.م</span> |
| <i class="fa-solid fa-chevron-left text-dark-accent opacity-0 group-hover:opacity-100 transition"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step-4" class="step-container step-hidden"> |
| <button onclick="prevStep(4, 3)" class="text-white/50 hover:text-white transition flex items-center gap-2 mb-6 text-sm font-bold"><i class="fa-solid fa-arrow-right"></i> رجوع</button> |
| |
| <h2 class="text-3xl font-black mb-2">حفظ التفضيلات</h2> |
| <p class="text-gray-400 text-sm mb-6">لإعداد تقرير التوصيات النهائي، يرجى إدخال تفاصيل التواصل.</p> |
| |
| <div class="space-y-4 mb-8"> |
| <div> |
| <label class="block text-xs font-bold text-gray-400 mb-1">الاسم بالكامل</label> |
| <input type="text" class="w-full bg-black/50 border border-white/10 rounded-xl p-3 text-white focus:border-dark-accent outline-none transition" placeholder="مثال: أحمد محمد"> |
| </div> |
| <div> |
| <label class="block text-xs font-bold text-gray-400 mb-1">رقم الهاتف</label> |
| <input type="tel" class="w-full bg-black/50 border border-white/10 rounded-xl p-3 text-white focus:border-dark-accent outline-none transition" placeholder="01xxxxxxxxx"> |
| </div> |
| <div> |
| <label class="block text-xs font-bold text-gray-400 mb-1">الموقع المفضل</label> |
| <select id="userLocation" class="w-full bg-black/50 border border-white/10 rounded-xl p-3 text-white focus:border-dark-accent outline-none transition appearance-none"> |
| <option value="التجمع الخامس" class="text-black">التجمع الخامس</option> |
| <option value="الشيخ زايد" class="text-black">الشيخ زايد</option> |
| <option value="الساحل الشمالي" class="text-black">الساحل الشمالي</option> |
| <option value="العاصمة الإدارية" class="text-black">العاصمة الإدارية</option> |
| </select> |
| </div> |
| </div> |
|
|
| <button onclick="submitQuiz()" class="w-full bg-dark-accent text-black py-4 rounded-xl font-black text-lg hover:brightness-110 transition shadow-[0_0_20px_rgba(245,158,11,0.3)]"> |
| توليد التوصيات <i class="fa-solid fa-bolt mr-2"></i> |
| </button> |
| </div> |
|
|
| |
| <div id="step-5" class="step-container step-hidden flex flex-col items-center justify-center h-[80%] text-center"> |
| <div class="spinner mb-6"></div> |
| <h2 id="processing-text" class="text-2xl font-black gradient-text mb-2 pulse-text">جاري معالجة البيانات...</h2> |
| <p class="text-gray-400 text-sm px-4">يقوم محرك الذكاء الاصطناعي بمطابقة أهدافك مع آلاف العقارات لتقديم أفضل النتائج.</p> |
| </div> |
|
|
| </div> |
| </div> |
|
|
| <script> |
| |
| let map; |
| let activeLayers = []; |
| const overlay = document.getElementById('live-data-overlay'); |
| const titleEl = document.getElementById('map-status-title'); |
| const descEl = document.getElementById('map-status-desc'); |
| |
| function initMap() { |
| map = L.map('map', { zoomControl: false, attributionControl: false }).setView([30.0444, 31.2357], 11); |
| L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { maxZoom: 19 }).addTo(map); |
| } |
| initMap(); |
| |
| function clearLayers() { |
| activeLayers.forEach(layer => map.removeLayer(layer)); |
| activeLayers = []; |
| } |
| |
| |
| function updateMapForGoal(goal) { |
| clearLayers(); |
| overlay.classList.add('visible'); |
| |
| if (goal === 'استثمار عقاري') { |
| |
| map.flyTo([30.0131, 31.7401], 12, { duration: 2 }); |
| titleEl.innerText = "تحليل العاصمة الإدارية"; |
| descEl.innerText = "مناطق النمو الرأسمالي المرتفع..."; |
| |
| |
| setTimeout(() => { |
| const circle1 = L.circle([30.0131, 31.7401], { color: '#F59E0B', fillColor: '#F59E0B', fillOpacity: 0.2, radius: 4000 }).addTo(map); |
| const circle2 = L.circle([30.05, 31.65], { color: '#ef4444', fillColor: '#ef4444', fillOpacity: 0.1, radius: 6000 }).addTo(map); |
| activeLayers.push(circle1, circle2); |
| }, 1500); |
| } |
| else if (goal === 'سكن دائم') { |
| |
| map.flyTo([30.0300, 31.4700], 13, { duration: 2 }); |
| titleEl.innerText = "تحليل التجمع الخامس"; |
| descEl.innerText = "المجتمعات السكنية المتكاملة..."; |
| |
| setTimeout(() => { |
| const circle = L.circle([30.0300, 31.4700], { color: '#3b82f6', fillColor: '#3b82f6', fillOpacity: 0.2, radius: 3000 }).addTo(map); |
| activeLayers.push(circle); |
| }, 1500); |
| } |
| else { |
| map.flyTo([30.0444, 31.2357], 12, { duration: 2 }); |
| titleEl.innerText = "تحليل الإيجارات بالقاهرة"; |
| descEl.innerText = "العوائد الإيجارية السريعة..."; |
| } |
| } |
| |
| function updateMapForProperty(type) { |
| descEl.innerText = `جاري تحديد مشاريع (${type})...`; |
| |
| |
| const center = map.getCenter(); |
| setTimeout(() => { |
| for(let i=0; i<5; i++) { |
| const latOffset = (Math.random() - 0.5) * 0.1; |
| const lngOffset = (Math.random() - 0.5) * 0.1; |
| const marker = L.circleMarker([center.lat + latOffset, center.lng + lngOffset], { |
| radius: 8, color: '#FFFFFF', weight: 2, fillColor: '#F59E0B', fillOpacity: 1 |
| }).addTo(map); |
| activeLayers.push(marker); |
| } |
| }, 500); |
| } |
| |
| |
| let userSelections = { goal: "", property_type: "", budget: "", location: "" }; |
| |
| function selectGoal(value) { |
| userSelections.goal = value; |
| updateMapForGoal(value); |
| nextStep(1, 2); |
| } |
| |
| function selectProperty(value) { |
| userSelections.property_type = value; |
| updateMapForProperty(value); |
| nextStep(2, 3); |
| } |
| |
| function selectBudget(value) { |
| userSelections.budget = value; |
| descEl.innerText = "تطبيق فلتر السعر على الخريطة..."; |
| nextStep(3, 4); |
| } |
| |
| function nextStep(current, next) { |
| document.getElementById(`step-${current}`).classList.replace('step-active', 'step-hidden-prev'); |
| setTimeout(() => { |
| const n = document.getElementById(`step-${next}`); |
| n.classList.remove('step-hidden', 'step-hidden-prev'); |
| n.classList.add('step-active'); |
| updateProgress(next); |
| }, 400); |
| } |
| |
| function prevStep(current, prev) { |
| document.getElementById(`step-${current}`).classList.replace('step-active', 'step-hidden'); |
| setTimeout(() => { |
| const p = document.getElementById(`step-${prev}`); |
| p.classList.remove('step-hidden', 'step-hidden-prev'); |
| p.classList.add('step-active'); |
| updateProgress(prev); |
| }, 400); |
| } |
| |
| function updateProgress(step) { |
| for(let i=1; i<=4; i++) { |
| const pip = document.getElementById(`pip-${i}`); |
| if(pip) { |
| if(i <= step) { |
| pip.classList.replace('bg-white/10', 'bg-dark-accent'); |
| pip.classList.add('shadow-[0_0_10px_#F59E0B]'); |
| } else { |
| pip.classList.replace('bg-dark-accent', 'bg-white/10'); |
| pip.classList.remove('shadow-[0_0_10px_#F59E0B]'); |
| } |
| } |
| } |
| } |
| |
| async function submitQuiz() { |
| userSelections.location = document.getElementById('userLocation').value; |
| overlay.classList.remove('visible'); |
| |
| |
| document.getElementById('step-4').classList.replace('step-active', 'step-hidden-prev'); |
| document.querySelector('.px-6.py-4.flex.gap-2').style.opacity = '0'; |
| |
| setTimeout(async () => { |
| document.getElementById('step-5').classList.replace('step-hidden', 'step-active'); |
| |
| |
| map.flyTo([30.0444, 31.2357], 8, { duration: 3 }); |
| |
| const processingText = document.getElementById('processing-text'); |
| |
| try { |
| const response = await fetch('/api/recommend', { |
| method: 'POST', |
| headers: {'Content-Type': 'application/json'}, |
| body: JSON.stringify(userSelections) |
| }); |
| if (response.ok) { |
| const data = await response.json(); |
| sessionStorage.setItem('aiRecommendations', JSON.stringify(data.recommendations)); |
| } |
| } catch (e) { |
| console.log("Backend offline, using fallback"); |
| sessionStorage.removeItem('aiRecommendations'); |
| } |
| |
| processingText.innerText = "جاري تحضير الخريطة التفاعلية..."; |
| setTimeout(() => { window.location.href = 'explore.html'; }, 2000); |
| }, 400); |
| } |
| </script> |
| </body> |
| </html> |
|
|
