Antigravity AI
Fix hardcoded localhost URLs to use relative paths for Hugging Face deployment
3f5ff7f | <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dark - Financial Hologram</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;700;900&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| dark: { bg: '#050A15', accent: '#F59E0B' } | |
| }, | |
| fontFamily: { sans: ['Cairo', 'sans-serif'] } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| :root { | |
| --holo-color: #3b82f6; /* Blue by default */ | |
| --holo-glow: rgba(59, 130, 246, 0.5); | |
| } | |
| body { margin: 0; padding: 0; overflow: hidden; font-family: 'Cairo', sans-serif; background: #000; color: #fff; } | |
| /* Cinematic Background */ | |
| .spatial-bg { | |
| position: absolute; inset: -50px; | |
| background-image: url('assets/bg_cityscape_v2_1781334786259.png'); | |
| background-size: cover; background-position: center; | |
| filter: blur(40px) brightness(0.2); z-index: 0; | |
| } | |
| /* Glass Panel */ | |
| .glass-panel { | |
| background: rgba(10, 15, 30, 0.4); | |
| backdrop-filter: blur(25px); | |
| -webkit-backdrop-filter: blur(25px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 1.5rem; | |
| box-shadow: 0 30px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05); | |
| } | |
| /* Input Sliders */ | |
| input[type=range] { | |
| -webkit-appearance: none; width: 100%; background: transparent; margin: 15px 0; | |
| } | |
| input[type=range]:focus { outline: none; } | |
| input[type=range]::-webkit-slider-runnable-track { | |
| width: 100%; height: 6px; cursor: pointer; | |
| background: rgba(255,255,255,0.1); border-radius: 10px; | |
| } | |
| input[type=range]::-webkit-slider-thumb { | |
| height: 20px; width: 20px; border-radius: 50%; | |
| background: #fff; cursor: pointer; | |
| -webkit-appearance: none; margin-top: -7px; | |
| box-shadow: 0 0 15px var(--holo-color); | |
| border: 2px solid var(--holo-color); | |
| transition: box-shadow 0.3s; | |
| } | |
| .select-input { | |
| width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); | |
| color: white; padding: 0.75rem 1rem; border-radius: 0.75rem; | |
| outline: none; transition: all 0.3s; | |
| } | |
| .select-input:focus { border-color: var(--holo-color); box-shadow: 0 0 15px var(--holo-glow); } | |
| .select-input option { background: #050A15; color: white; } | |
| /* THE HOLOGRAM */ | |
| .hologram-container { | |
| perspective: 1200px; | |
| display: flex; justify-content: center; align-items: center; | |
| width: 100%; height: 100%; | |
| } | |
| .hologram-core { | |
| width: 250px; height: 250px; | |
| position: relative; | |
| transform-style: preserve-3d; | |
| animation: spinHolo 15s infinite linear; | |
| } | |
| @keyframes spinHolo { | |
| 0% { transform: rotateX(60deg) rotateZ(0deg); } | |
| 100% { transform: rotateX(60deg) rotateZ(360deg); } | |
| } | |
| .holo-face { | |
| position: absolute; width: 250px; height: 250px; | |
| border: 2px solid var(--holo-color); | |
| background: radial-gradient(circle, transparent 20%, var(--holo-glow) 150%); | |
| box-shadow: inset 0 0 40px var(--holo-glow), 0 0 40px var(--holo-glow); | |
| transition: all 0.5s ease; | |
| } | |
| .holo-front { transform: translateZ(125px); } | |
| .holo-back { transform: rotateY(180deg) translateZ(125px); } | |
| .holo-right { transform: rotateY(90deg) translateZ(125px); } | |
| .holo-left { transform: rotateY(-90deg) translateZ(125px); } | |
| .holo-top { transform: rotateX(90deg) translateZ(125px); } | |
| .holo-bottom { transform: rotateX(-90deg) translateZ(125px); } | |
| .holo-pedestal { | |
| position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); | |
| width: 400px; height: 100px; | |
| background: radial-gradient(ellipse, var(--holo-glow) 0%, transparent 70%); | |
| filter: blur(20px); opacity: 0.6; z-index: -1; | |
| transition: background 0.5s ease; | |
| } | |
| .price-display { | |
| position: absolute; top: 15%; left: 50%; transform: translateX(-50%); | |
| text-align: center; text-shadow: 0 0 20px var(--holo-color); | |
| transition: color 0.5s, text-shadow 0.5s; | |
| color: var(--holo-color); | |
| } | |
| .analyze-btn { | |
| background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.0)); | |
| border: 1px solid var(--holo-color); | |
| box-shadow: 0 0 20px var(--holo-glow); | |
| transition: all 0.3s; | |
| } | |
| .analyze-btn:hover { background: var(--holo-color); color: #000; transform: translateY(-2px); } | |
| /* Results Panel */ | |
| .results-panel { | |
| opacity: 0; pointer-events: none; transform: translateX(-20px); | |
| transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .results-panel.active { | |
| opacity: 1; pointer-events: auto; transform: translateX(0); | |
| } | |
| </style> | |
| </head> | |
| <body class="w-screen h-screen relative flex items-center justify-between p-8 gap-8"> | |
| <!-- Cinematic Background --> | |
| <div class="spatial-bg"></div> | |
| <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_transparent_0%,_#000_100%)] opacity-80 z-0"></div> | |
| <!-- Top Nav (Floating) --> | |
| <nav class="absolute top-8 left-8 right-8 z-50 flex justify-between items-center pointer-events-none"> | |
| <div class="flex items-center gap-3 cursor-pointer pointer-events-auto hover:scale-105 transition" onclick="window.location.href='index.html'"> | |
| <div class="text-2xl font-black text-white drop-shadow-[0_0_15px_rgba(255,255,255,0.5)]"> | |
| DARAK <span class="text-gray-400 font-light">EVALUATOR</span> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- LEFT PANEL: INPUTS --> | |
| <div class="w-[350px] glass-panel p-6 flex flex-col z-10 h-full mt-12 relative"> | |
| <h2 class="text-lg font-bold mb-6 text-gray-200 border-b border-white/10 pb-4"><i class="fa-solid fa-sliders"></i> متغيرات التقييم</h2> | |
| <div class="space-y-6 flex-1 overflow-y-auto pr-2"> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <label class="text-sm text-gray-400 font-bold">السعر المعروض</label> | |
| <span id="priceVal" class="text-sm font-black text-white">3,000,000 ج</span> | |
| </div> | |
| <input type="range" id="propPrice" min="500000" max="50000000" step="100000" value="3000000" oninput="updateHologram()"> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <label class="text-sm text-gray-400 font-bold">المساحة (م٢)</label> | |
| <span id="areaVal" class="text-sm font-black text-white">150 م٢</span> | |
| </div> | |
| <input type="range" id="propArea" min="50" max="1000" step="5" value="150" oninput="updateHologram()"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 font-bold mb-2">نوع العقار</label> | |
| <select id="propType" class="select-input"> | |
| <option value="apartment">شقة</option> | |
| <option value="villa">فيلا</option> | |
| <option value="townhouse">تاون هاوس</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 font-bold mb-2">المنطقة</label> | |
| <select id="propLocation" class="select-input"> | |
| <option value="التجمع الخامس">التجمع الخامس</option> | |
| <option value="الشيخ زايد">الشيخ زايد</option> | |
| <option value="العاصمة الإدارية">العاصمة الإدارية</option> | |
| <option value="الساحل الشمالي">الساحل الشمالي</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 font-bold mb-2">التشطيب</label> | |
| <select id="propFinish" class="select-input"> | |
| <option value="super_lux">سوبر لوكس</option> | |
| <option value="core">نصف تشطيب</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button id="runAnalysisBtn" class="analyze-btn w-full mt-6 py-4 rounded-xl text-white font-bold flex items-center justify-center gap-2"> | |
| <i class="fa-solid fa-wand-magic-sparkles"></i> تنفيذ التحليل الذكي للبيانات | |
| </button> | |
| </div> | |
| <!-- CENTER: FINANCIAL HOLOGRAM --> | |
| <div class="flex-1 relative z-10 h-full flex flex-col justify-center items-center pointer-events-none"> | |
| <div class="price-display"> | |
| <div class="text-6xl font-black mb-2" id="holoPriceTxt">3,000,000</div> | |
| <div class="text-xl font-bold opacity-80" id="holoSqmTxt">20,000 ج / م٢</div> | |
| </div> | |
| <div class="hologram-container"> | |
| <div class="hologram-core"> | |
| <div class="holo-face holo-front"></div> | |
| <div class="holo-face holo-back"></div> | |
| <div class="holo-face holo-right"></div> | |
| <div class="holo-face holo-left"></div> | |
| <div class="holo-face holo-top"></div> | |
| <div class="holo-face holo-bottom"></div> | |
| </div> | |
| </div> | |
| <div class="holo-pedestal"></div> | |
| </div> | |
| <!-- RIGHT PANEL: API RESULTS --> | |
| <div id="resultsPanel" class="w-[350px] glass-panel p-6 flex flex-col z-10 h-full mt-12 results-panel"> | |
| <h2 class="text-lg font-bold mb-6 text-gray-200 border-b border-white/10 pb-4 flex items-center gap-2"> | |
| <i class="fa-solid fa-file-invoice-dollar text-[var(--holo-color)]"></i> التقرير النهائي | |
| </h2> | |
| <div class="flex-1 overflow-y-auto pr-2 space-y-6"> | |
| <div class="text-center p-4 bg-white/5 rounded-2xl border border-white/10"> | |
| <h3 class="text-2xl font-black mb-2" id="verdictTitle" style="color: var(--holo-color);">جاري التحليل...</h3> | |
| <p class="text-xs text-gray-400" id="verdictDesc">يرجى الانتظار...</p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="bg-black/40 p-4 rounded-xl border border-white/5 text-center"> | |
| <div class="text-[10px] text-gray-500 font-bold mb-1">المتوسط في السوق</div> | |
| <div class="text-lg font-black text-white" id="valAvgSqM">--</div> | |
| </div> | |
| <div class="bg-black/40 p-4 rounded-xl border border-white/5 text-center"> | |
| <div class="text-[10px] text-gray-500 font-bold mb-1">السعر العادل الإجمالي</div> | |
| <div class="text-lg font-black text-white" id="valEstimated">--</div> | |
| </div> | |
| </div> | |
| <div class="bg-[var(--holo-glow)] border border-[var(--holo-color)] p-5 rounded-2xl"> | |
| <div class="flex items-center gap-2 text-[var(--holo-color)] font-bold mb-2 text-sm"> | |
| <i class="fa-solid fa-lightbulb"></i> نصيحة المستشار الذكي | |
| </div> | |
| <p class="text-xs leading-relaxed text-white font-medium" id="aiDirective"> | |
| -- | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const root = document.documentElement; | |
| function updateHologram() { | |
| const price = parseInt(document.getElementById('propPrice').value); | |
| const area = parseInt(document.getElementById('propArea').value); | |
| // Update Labels | |
| document.getElementById('priceVal').innerText = price.toLocaleString() + " ج"; | |
| document.getElementById('areaVal').innerText = area + " م٢"; | |
| // Center Display | |
| document.getElementById('holoPriceTxt').innerText = price.toLocaleString(); | |
| const sqm = Math.round(price / area); | |
| document.getElementById('holoSqmTxt').innerText = sqm.toLocaleString() + " ج / م٢"; | |
| // Color Logic (Rough Frontend Estimation) | |
| // Assuming base average is ~30k depending on area. We just do a simple gradient shift for visual effect. | |
| let color = "#3b82f6"; // Blue (Neutral) | |
| let glow = "rgba(59, 130, 246, 0.5)"; | |
| if (sqm < 20000) { | |
| // Cheap -> Green | |
| color = "#4ade80"; | |
| glow = "rgba(74, 222, 128, 0.5)"; | |
| } else if (sqm > 40000) { | |
| // Expensive -> Red | |
| color = "#f87171"; | |
| glow = "rgba(248, 113, 113, 0.5)"; | |
| } else { | |
| // Fair -> Gold/Yellow | |
| color = "#fbbf24"; | |
| glow = "rgba(251, 191, 36, 0.5)"; | |
| } | |
| root.style.setProperty('--holo-color', color); | |
| root.style.setProperty('--holo-glow', glow); | |
| // Hide results if sliders are touched again | |
| document.getElementById('resultsPanel').classList.remove('active'); | |
| } | |
| // Initialize | |
| updateHologram(); | |
| document.getElementById('runAnalysisBtn').addEventListener('click', async function() { | |
| const btn = this; | |
| const resultsPanel = document.getElementById('resultsPanel'); | |
| const type = document.getElementById('propType').value; | |
| const location = document.getElementById('propLocation').value; | |
| const area = parseFloat(document.getElementById('propArea').value); | |
| const finish = document.getElementById('propFinish').value; | |
| const price = parseFloat(document.getElementById('propPrice').value); | |
| btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> جاري الاتصال بالمحرك...'; | |
| btn.disabled = true; | |
| // Make hologram spin faster during analysis | |
| document.querySelector('.hologram-core').style.animationDuration = '3s'; | |
| try { | |
| const response = await fetch('/api/evaluate', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ prop_type: type, location: location, area: area, finish: finish, price: price }) | |
| }); | |
| const result = await response.json(); | |
| btn.innerHTML = '<i class="fa-solid fa-wand-magic-sparkles"></i> تحديث التحليل'; | |
| btn.disabled = false; | |
| document.querySelector('.hologram-core').style.animationDuration = '15s'; | |
| if (result.success) { | |
| const data = result.data; | |
| // Force Hologram Color based on actual API result score | |
| let finalColor = "#3b82f6"; | |
| let finalGlow = "rgba(59, 130, 246, 0.5)"; | |
| if(data.score_percentage >= 70) { finalColor = "#4ade80"; finalGlow = "rgba(74, 222, 128, 0.5)"; } | |
| else if(data.score_percentage <= 40) { finalColor = "#f87171"; finalGlow = "rgba(248, 113, 113, 0.5)"; } | |
| else { finalColor = "#fbbf24"; finalGlow = "rgba(251, 191, 36, 0.5)"; } | |
| root.style.setProperty('--holo-color', finalColor); | |
| root.style.setProperty('--holo-glow', finalGlow); | |
| // Populate Panel | |
| document.getElementById('verdictTitle').innerHTML = data.verdict_title; | |
| document.getElementById('verdictDesc').innerText = data.verdict_description; | |
| document.getElementById('valAvgSqM').innerText = data.average_sqm_price.toLocaleString() + ' ج/م٢'; | |
| document.getElementById('valEstimated').innerText = data.estimated_value.toLocaleString() + ' ج'; | |
| document.getElementById('aiDirective').innerText = data.smart_tip; | |
| // Reveal | |
| resultsPanel.classList.add('active'); | |
| } else { | |
| alert("حدث خطأ أثناء التحليل: " + result.error); | |
| } | |
| } catch (error) { | |
| console.error(error); | |
| btn.innerHTML = '<i class="fa-solid fa-wand-magic-sparkles"></i> تنفيذ التحليل الذكي للبيانات'; | |
| btn.disabled = false; | |
| document.querySelector('.hologram-core').style.animationDuration = '15s'; | |
| alert("تعذر الاتصال بالخادم."); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |