Spaces:

Alinabil1
/

Darak

Sleeping

File size: 24,739 Bytes

<!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">
    
    <!-- Leaflet Map -->
    <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 Styles */
        #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 Overlays */
        .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); }

        /* Questionnaire UI */
        .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 Fade Animations */
        .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">

    <!-- LEFT PANEL: Live Data Map -->
    <div class="flex-1 relative h-full">
        <div id="map"></div>
        <div class="map-vignette"></div>
        
        <!-- Live Data Overlay -->
        <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>

    <!-- RIGHT PANEL: Profiler Sidebar -->
    <div class="w-full md:w-[450px] shrink-0 sidebar h-full flex flex-col relative">
        
        <!-- Header -->
        <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>

        <!-- Progress Tracker -->
        <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>

        <!-- Steps Container -->
        <div class="flex-1 relative overflow-hidden overflow-y-auto">
            
            <!-- STEP 1: Goal -->
            <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>

            <!-- STEP 2: Property Type -->
            <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>

            <!-- STEP 3: Budget -->
            <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>

            <!-- STEP 4: Contact -->
            <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>

            <!-- STEP 5: Processing -->
            <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>
        // --- 1. LEAFLET MAP INITIALIZATION ---
        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); // Cairo
            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 = [];
        }

        // --- 2. MAP UPDATE LOGIC ---
        function updateMapForGoal(goal) {
            clearLayers();
            overlay.classList.add('visible');

            if (goal === 'استثمار عقاري') {
                // Fly to New Capital / East Cairo
                map.flyTo([30.0131, 31.7401], 12, { duration: 2 });
                titleEl.innerText = "تحليل العاصمة الإدارية";
                descEl.innerText = "مناطق النمو الرأسمالي المرتفع...";

                // Draw Heatmap-like circles
                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 === 'سكن دائم') {
                // Fly to New Cairo / Zayed
                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})...`;
            
            // Scatter dummy markers
            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);
        }

        // --- 3. QUESTIONNAIRE LOGIC ---
        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'); // Hide data overlay

            // Move to processing
            document.getElementById('step-4').classList.replace('step-active', 'step-hidden-prev');
            document.querySelector('.px-6.py-4.flex.gap-2').style.opacity = '0'; // Hide pips
            
            setTimeout(async () => {
                document.getElementById('step-5').classList.replace('step-hidden', 'step-active');
                
                // Fly map out
                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>