| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Darak | مساعد العقارات الذكي</title> |
| <link rel="icon" type="image/png" href="logo.png"> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=Poppins:wght@500;600;700;800&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| :root{ |
| --bg:#05070f; |
| --panel:#0d1120; |
| --panel-2:#11162a; |
| --panel-3:#161c33; |
| --border:rgba(255,255,255,0.07); |
| --border-strong:rgba(212,167,44,0.35); |
| --gold:#d4a72c; |
| --gold-light:#f0cf6e; |
| --gold-dark:#8a6a1a; |
| --text:#f5f6fa; |
| --muted:#8b91a7; |
| --muted-2:#5c6178; |
| --green:#22c55e; |
| --blue:#3b82f6; |
| --purple:#a855f7; |
| --radius-lg:18px; |
| --radius-md:12px; |
| --radius-sm:8px; |
| --shadow-gold:0 8px 30px rgba(212,167,44,0.15); |
| } |
| *{box-sizing:border-box;margin:0;padding:0;} |
| html,body{ |
| font-family:'Cairo',sans-serif;background-color:var(--bg);color:var(--text); |
| overflow-x:hidden; |
| height:100vh; |
| width:100vw; |
| display:flex; |
| flex-direction:column; |
| } |
| ::-webkit-scrollbar{width:8px;} |
| ::-webkit-scrollbar-track{background:var(--bg);} |
| ::-webkit-scrollbar-thumb{background:rgba(212,167,44,0.25);border-radius:4px;} |
| ::-webkit-scrollbar-thumb:hover{background:rgba(212,167,44,0.5);} |
| a{color:inherit;text-decoration:none;} |
| button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;} |
| input{font-family:inherit;color:var(--text);} |
| .eng{font-family:'Poppins',sans-serif;} |
| ::selection{background:var(--gold);color:#14121a;} |
| |
| .bg-glow{ |
| position:fixed;inset:0;z-index:-1;pointer-events:none; |
| background: |
| radial-gradient(600px 400px at 15% 10%, rgba(212,167,44,0.06), transparent 60%), |
| radial-gradient(700px 500px at 85% 20%, rgba(59,130,246,0.05), transparent 60%), |
| radial-gradient(900px 600px at 50% 100%, rgba(212,167,44,0.04), transparent 60%); |
| } |
| |
| @keyframes fadeInUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} |
| @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} |
| @keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(34,197,94,0.55)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}} |
| @keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(212,167,44,0.35)}70%{box-shadow:0 0 0 10px rgba(212,167,44,0)}100%{box-shadow:0 0 0 0 rgba(212,167,44,0)}} |
| @keyframes shimmerArc{0%{background-position:-200% 0}100%{background-position:200% 0}} |
| |
| .reveal{opacity:0;animation:fadeInUp .5s ease forwards;} |
| .d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.15s}.d4{animation-delay:.2s}.d5{animation-delay:.25s} |
| |
| header{ |
| display:flex;align-items:center;justify-content:space-between; |
| padding:8px 36px; |
| background:rgba(5,7,15,0.7);backdrop-filter:blur(25px) saturate(180%); |
| border-bottom:1px solid rgba(212,167,44,0.15); |
| box-shadow: 0 4px 30px rgba(0,0,0,0.5); |
| height:55px;flex-shrink:0;z-index:50; |
| } |
| .logo-block{display:flex;flex-direction:row;align-items:center;gap:8px;line-height:1;} |
| .logo-ar{font-size:21px;font-weight:900;color:var(--gold);letter-spacing:.5px;} |
| .logo-en{font-size:9.5px;letter-spacing:4px;color:var(--muted);margin-top:2px;} |
| .main-nav{display:flex;align-items:center;gap:6px;background:rgba(13,17,32,0.7);backdrop-filter:blur(25px);border:1px solid rgba(255,255,255,0.06); |
| border-radius:50px;padding:4px;} |
| .main-nav a{color:var(--text);font-size:12px;font-weight:700;padding:8px 16px;border-radius:50px;transition:all .3s ease;position:relative;} |
| .main-nav a::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--gold);transition:width .3s ease;border-radius:2px;} |
| .main-nav a:hover::after{width:60%;} |
| .main-nav a:hover{color:var(--gold);background:rgba(212,167,44,0.08);} |
| .main-nav a.active{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#14121a;box-shadow:0 0 15px rgba(212,167,44,0.4);} |
| .main-nav a.active::after{display:none;} |
| .header-actions{display:flex;align-items:center;gap:10px;} |
| .icon-btn{ |
| width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; |
| background:var(--panel);border:1px solid var(--border);color:var(--muted);font-size:14px; |
| transition:all .2s ease; |
| } |
| .icon-btn:hover{color:var(--gold);border-color:var(--border-strong);transform:translateY(-2px);} |
| .icon-btn.liked{color:#ef4444;} |
| .add-property-btn{ |
| display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px; |
| background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#14121a;font-weight:800;font-size:13.5px; |
| box-shadow:var(--shadow-gold);transition:transform .2s ease,filter .2s ease; |
| position:relative;overflow:hidden; |
| } |
| .add-property-btn::after{ |
| content:'';position:absolute;top:0;left:-100%;width:50%;height:100%; |
| background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent); |
| animation: shimmerSweep 3s infinite; |
| } |
| .add-property-btn:hover{transform:translateY(-2px);filter:brightness(1.06);} |
| @keyframes shimmerSweep { 0% { left: -100%; } 100% { left: 200%; } } |
| |
| .hud-layout{ |
| max-width:1700px;width:100%;margin:0 auto;padding:24px 36px; |
| display:grid;grid-template-columns:300px 1fr 300px;gap:24px; |
| height:calc(100vh - 100px);overflow:hidden; |
| } |
| .col-label{ |
| display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:var(--text); |
| margin-bottom:8px;flex-shrink:0; |
| } |
| .col-label i{color:var(--gold);font-size:12px;} |
| |
| .opportunities{ |
| background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px; |
| display:flex;flex-direction:column;min-height:0;overflow-y:auto; |
| } |
| .opportunities::-webkit-scrollbar{display:none;} |
| .opportunities{-ms-overflow-style:none;scrollbar-width:none;} |
| |
| .prop-card{ |
| background:linear-gradient(145deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2)); |
| backdrop-filter: blur(10px); |
| border:1px solid rgba(255,255,255,0.06); |
| border-top:1px solid rgba(212,167,44,0.3); |
| box-shadow:inset 0 1px 0 rgba(212,167,44,0.1); |
| border-radius:16px;overflow:hidden; |
| margin-bottom:8px;transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);cursor:pointer; |
| flex-shrink:0; |
| position:relative; |
| } |
| .prop-card:hover{ |
| border-color:rgba(212,167,44,0.4);transform:translateY(-4px) scale(1.01); |
| background:linear-gradient(145deg, rgba(255,255,255,0.05), rgba(212,167,44,0.08)); |
| box-shadow:0 15px 35px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(212,167,44,0.2); |
| } |
| .prop-media{position:relative;height:120px;display:flex;align-items:center;justify-content:center;font-size:30px;color:rgba(255,255,255,0.18);overflow:hidden;} |
| .prop-media img {width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(0.4,0,0.2,1);} |
| .prop-card:hover .prop-media img {transform:scale(1.08);} |
| .prop-media::after { |
| content:'';position:absolute;bottom:0;left:0;width:100%;height:45%; |
| background:linear-gradient(to top, rgba(13,17,32,1) 0%, transparent 100%); |
| pointer-events:none; |
| } |
| .prop-badge{position:absolute;top:8px;right:8px;padding:4px 12px;border-radius:999px;font-size:10.5px;font-weight:900;background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#14121a;box-shadow:var(--shadow-gold);z-index:2;} |
| .prop-fav{position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:50%; |
| background:rgba(5,7,15,0.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center; |
| color:#fff;font-size:13px;transition:color .2s ease,transform .2s cubic-bezier(0.4,0,0.2,1);z-index:2;} |
| .prop-fav:hover{transform:scale(1.15);} |
| .prop-fav.active{color:var(--gold);animation:heartPop .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);} |
| @keyframes heartPop { 0% {transform:scale(1);} 50% {transform:scale(1.4);} 100% {transform:scale(1);} } |
| .prop-body{padding:8px 10px;} |
| .prop-title{font-size:13.5px;font-weight:800;margin-bottom:3px;} |
| .prop-loc{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:5px;} |
| .prop-loc i{color:var(--gold);font-size:10px;} |
| .prop-price{font-size:14.5px;font-weight:900;color:var(--gold);margin-bottom:6px;} |
| .prop-price small{font-size:10.5px;color:var(--muted);font-weight:500;} |
| .prop-specs{display:flex;align-items:center;gap:8px;padding-top:6px;border-top:1px solid var(--border);} |
| .prop-specs span{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted-2);} |
| .prop-specs i{color:var(--muted);font-size:10.5px;} |
| .view-more-btn{ |
| width:100%;padding:12px;border-radius:12px;border:none;color:#14121a;font-weight:900; |
| font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:10px; |
| background:linear-gradient(135deg,var(--gold-light),var(--gold)); |
| box-shadow:var(--shadow-gold);transition:all .3s ease;margin-top:auto;flex-shrink:0;cursor:pointer; |
| position:relative;overflow:hidden; |
| } |
| .view-more-btn::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);transition:all .5s;} |
| .view-more-btn:hover::after{left:100%;} |
| .view-more-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 30px rgba(212,167,44,0.4);} |
| .view-more-btn i { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } |
| .view-more-btn:hover i { transform: translateX(-4px); } |
| |
| .rec-tabs { |
| display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto; |
| -ms-overflow-style: none; scrollbar-width: none; |
| background: rgba(0,0,0,0.3); padding: 4px; border-radius: 12px; |
| border: 1px solid rgba(255,255,255,0.05); box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); |
| } |
| .rec-tabs::-webkit-scrollbar { display: none; } |
| .rec-tabs .cat-pill { |
| flex: 1; text-align: center; justify-content: center; background: transparent; border: none; |
| color: var(--muted); padding: 8px; font-weight: 700; font-size: 11.5px; |
| border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin: 0; box-shadow: none; |
| } |
| .rec-tabs .cat-pill i { display: none; } |
| .rec-tabs .cat-pill[data-active="true"] { |
| background: linear-gradient(135deg, var(--gold-light), var(--gold)); |
| color: #14121a; box-shadow: 0 4px 15px rgba(212,167,44,0.3); transform: none; |
| } |
| .rec-tabs .cat-pill:hover:not([data-active="true"]) { |
| background: rgba(255,255,255,0.05); color: var(--text); transform: none; |
| } |
| |
| .opp-scroll-container { |
| display:flex; flex-direction:column; gap:12px; overflow-y:auto; -ms-overflow-style:none; scrollbar-width:none; |
| padding-bottom: 30px; margin-bottom: 5px; |
| -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%); |
| mask-image: linear-gradient(to bottom, black 85%, transparent 100%); |
| } |
| .opp-scroll-container::-webkit-scrollbar{display:none;} |
| |
| .hud-center{display:flex;flex-direction:column;gap:10px;height:100%;min-height:0;overflow:hidden;} |
| .hero{position:relative;text-align:center;padding-top:45px;margin-top:25px;flex-shrink:0;} |
| .hero::before{ |
| content:'';position:absolute;top:-10px;left:50%;transform:translateX(-50%); |
| width:95%;height:70px; |
| border-radius:50% 50% 0 0 / 100% 100% 0 0; |
| border-top:2px solid var(--gold); |
| background:transparent; |
| box-shadow:inset 0 20px 20px -20px var(--gold-light), 0 -10px 25px -5px rgba(212,167,44,0.4); |
| -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%); |
| } |
| .star-decor { |
| position: absolute; color: var(--gold-light); font-size: 14px; font-family: sans-serif; |
| animation: twinkle 4s infinite alternate; pointer-events: none; |
| text-shadow: 0 0 10px rgba(212,167,44,0.8); |
| } |
| .star-decor::before { content: '✦'; } |
| |
| .star-decor.s1 { top: -10px; left: 8%; animation-delay: 0.2s; transform: scale(1.1); } |
| .star-decor.s2 { top: 20px; right: 10%; animation-delay: 1.5s; transform: scale(1.3); } |
| .star-decor.s3 { top: -20px; right: 26%; animation-delay: 0.8s; transform: scale(0.8); } |
| .star-decor.s4 { top: 15px; left: 28%; animation-delay: 2.1s; transform: scale(0.9); } |
| |
| @keyframes twinkle { |
| 0% { opacity: 0.2; transform: scale(0.8) rotate(0deg); } |
| 100% { opacity: 1; transform: scale(1.2) rotate(45deg); filter: brightness(1.3); } |
| } |
| .hero-title{font-size:30px;font-weight:900;line-height:1.25;margin:10px 0 8px;animation:fadeUpIn 0.8s ease backwards;animation-delay:0s;} |
| .shimmer-text{ |
| background: linear-gradient(110deg, var(--gold-light) 0%, #fff 25%, var(--gold) 50%, var(--gold-light) 75%, #fff 100%); |
| background-size: 200% auto; |
| color: transparent; |
| -webkit-background-clip: text; |
| background-clip: text; |
| animation: shimmerText 3s linear infinite; |
| display: inline-block; |
| text-shadow: 0 0 20px rgba(212,167,44,0.3); |
| } |
| @keyframes shimmerText { to { background-position: 200% center; } } |
| .hero-subtitle{ |
| max-width:560px;margin:0 auto 10px;color:var(--muted);font-size:13px;line-height:1.6; |
| animation:fadeUpIn 0.8s ease backwards;animation-delay:0.1s; |
| } |
| .ai-highlight{ |
| color:var(--gold-light);font-weight:700; |
| text-shadow:0 0 10px rgba(212,167,44,0.4); |
| } |
| |
| .search-bar{ |
| display:flex;align-items:center;gap:10px; |
| background:rgba(13,17,32,0.7);backdrop-filter:blur(25px) saturate(180%); |
| border:1.5px solid rgba(212,167,44,0.3); |
| border-radius:50px;padding:8px 8px 8px 16px; |
| box-shadow:0 10px 30px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(212,167,44,0.1); |
| transition:all .3s ease; |
| } |
| .search-bar:focus-within{ |
| box-shadow:0 0 0 6px rgba(212,167,44,0.12), 0 12px 40px rgba(0,0,0,0.6); |
| border-color:var(--gold);background:rgba(13,17,32,0.9); |
| } |
| .mic-btn{ |
| width:40px;height:40px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center; |
| color:var(--muted);border:1px solid var(--border);transition:all .2s ease; |
| } |
| .mic-btn:hover,.mic-btn.active{color:var(--gold);border-color:var(--border-strong);} |
| .mic-btn.active{animation:pulseRing 1.4s infinite;} |
| #searchInput,#chatInput{flex:1;background:transparent;border:none;outline:none;font-size:13.5px;padding:6px 0;} |
| #searchInput::placeholder,#chatInput::placeholder{color:var(--muted-2);} |
| .send-btn{ |
| width:42px;height:42px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center; |
| background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#14121a;font-size:15px; |
| box-shadow:var(--shadow-gold);transition:transform .2s ease,filter .2s ease; |
| } |
| .send-btn:hover{transform:scale(1.06);filter:brightness(1.05);} |
| .send-btn i{transform:scaleX(-1);} |
| |
| .category-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;perspective:1000px;} |
| .cat-pill{ |
| display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:700; |
| background:linear-gradient(145deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2)); |
| backdrop-filter: blur(10px); |
| border:1px solid rgba(255,255,255,0.06); |
| border-top:1px solid rgba(212,167,44,0.15); |
| box-shadow:inset 0 1px 0 rgba(212,167,44,0.05); |
| color:var(--muted);transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); |
| animation: fadeUpIn 0.6s ease backwards; |
| } |
| .cat-pill:nth-child(1) {animation-delay: 0.1s;} |
| .cat-pill:nth-child(2) {animation-delay: 0.15s;} |
| .cat-pill:nth-child(3) {animation-delay: 0.2s;} |
| .cat-pill:nth-child(4) {animation-delay: 0.25s;} |
| .cat-pill:nth-child(5) {animation-delay: 0.3s;} |
| .cat-pill:nth-child(6) {animation-delay: 0.35s;} |
| .cat-pill:nth-child(7) {animation-delay: 0.4s;} |
| .cat-pill:nth-child(8) {animation-delay: 0.45s;} |
| .cat-pill i{color:var(--gold);font-size:12px;transition:transform 0.3s ease, filter 0.3s ease;} |
| .cat-pill:hover, .cat-pill[data-active="true"] { |
| border-color:rgba(212,167,44,0.5);color:var(--gold-light); |
| transform:translateY(-3px) scale(1.02); |
| background:linear-gradient(145deg, rgba(212,167,44,0.1), rgba(212,167,44,0.02)); |
| box-shadow:0 8px 20px rgba(212,167,44,0.2), inset 0 0 10px rgba(212,167,44,0.1); |
| } |
| .cat-pill:hover i {transform:scale(1.2);filter:drop-shadow(0 0 5px var(--gold));} |
| @keyframes fadeUpIn { from {opacity:0; transform:translateY(15px);} to {opacity:1; transform:translateY(0);} } |
| |
| .chat-panel{ |
| background:var(--panel);border:1px solid var(--border);border-radius:20px; |
| overflow:hidden;display:flex;flex-direction:column;height:65vh;min-height:550px;box-shadow:0 12px 40px rgba(0,0,0,0.4); |
| } |
| .chat-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,0.05);flex-shrink:0;background:rgba(13,17,32,0.6);backdrop-filter:blur(15px);z-index:10;} |
| .chat-panel-title{display:flex;align-items:center;gap:12px;} |
| .chat-avatar-ring{width:36px;height:36px;border-radius:50%;background:rgba(212,167,44,0.1);border:1px solid rgba(212,167,44,0.3); |
| display:flex;align-items:center;justify-content:center;padding:4px;box-shadow:0 0 10px rgba(212,167,44,0.2);} |
| .chat-panel-name{font-size:14px;font-weight:900;} |
| .chat-panel-name .eng{color:var(--gold);} |
| .chat-panel-status{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:2px;} |
| .live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulseDot 1.8s infinite;box-shadow:0 0 8px rgba(34,197,94,0.6);} |
| .refresh-btn{width:32px;height:32px;border-radius:50%;background:var(--panel-2);border:1px solid var(--border); |
| display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .2s ease;} |
| .refresh-btn:hover{color:var(--gold);transform:rotate(180deg);} |
| |
| .chat-body{padding:12px 18px;flex:1;overflow-y:auto;min-height:0;} |
| .chat-body::-webkit-scrollbar{width:6px;} |
| .chat-body::-webkit-scrollbar-track{background:rgba(13,17,32,0.5);border-radius:6px;} |
| .chat-body::-webkit-scrollbar-thumb{background:rgba(212,167,44,0.3);border-radius:6px;} |
| .chat-body::-webkit-scrollbar-thumb:hover{background:rgba(212,167,44,0.6);} |
| |
| .welcome-row{display:flex;align-items:flex-end;gap:12px;margin-bottom:12px;} |
| .welcome-bubble{ |
| background:linear-gradient(145deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2)); |
| backdrop-filter: blur(10px); |
| border:1px solid rgba(255,255,255,0.05); border-top:1px solid rgba(212,167,44,0.3); |
| border-radius:18px 4px 18px 18px; |
| padding:16px 20px;font-size:12.5px;line-height:1.7;color:var(--text);max-width:65ch; |
| box-shadow:0 15px 35px rgba(0,0,0,0.4), inset 0 1px 0 rgba(212,167,44,0.1); |
| } |
| .welcome-bubble b{color:var(--gold);} |
| .mascot{flex-shrink:0;animation:floatY 3.6s ease-in-out infinite;} |
| |
| .suggest-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-right:75px;} |
| .suggest-card{ |
| display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.03);backdrop-filter:blur(5px); |
| border:1px solid rgba(255,255,255,0.05); |
| border-radius:12px;padding:9px 16px;font-size:12px;color:var(--muted);text-align:right;transition:all .3s ease; |
| } |
| .suggest-card i{color:var(--gold);font-size:12px;} |
| .suggest-card:hover{border-color:rgba(212,167,44,0.4);color:var(--gold-light);transform:translateY(-2px);background:linear-gradient(145deg,rgba(212,167,44,0.05),transparent);box-shadow:0 8px 20px rgba(0,0,0,0.3);} |
| |
| .chat-input-row{display:flex;align-items:center;gap:12px;padding:16px 24px; |
| background:transparent;flex-shrink:0;transition:all .3s ease;} |
| background:rgba(13,17,32,0.9);backdrop-filter:blur(30px) saturate(180%);flex-shrink:0;box-shadow:0 -10px 30px rgba(0,0,0,0.5);transition:all .3s ease;} |
| .chat-input-row:focus-within{border-color:var(--gold);box-shadow:0 -10px 30px rgba(0,0,0,0.6), inset 0 2px 15px rgba(212,167,44,0.2);} |
| .chat-input-row input{font-size:16px;} |
| .chat-input-row .mic-btn,.chat-input-row .send-btn{width:38px;height:38px;} |
| |
| .services-strip{text-align:center;padding:4px 0 0;flex-shrink:0;} |
| .services-label{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;font-weight:700; |
| color:var(--muted);margin-bottom:8px;} |
| .services-label i{color:var(--gold);} |
| .services-row{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;} |
| .service-item{display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .3s ease;} |
| .service-item:hover{transform:translateY(-4px);} |
| .service-icon{width:50px;height:50px;border-radius:14px;background:linear-gradient(145deg, rgba(13,17,32,0.7), rgba(212,167,44,0.05));border:1px solid rgba(255,255,255,0.08); |
| display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:18px;transition:all .3s ease;} |
| .service-item:hover .service-icon{border-color:var(--gold);box-shadow:0 8px 20px rgba(212,167,44,0.25), inset 0 0 0 1px rgba(212,167,44,0.15);background:rgba(13,17,32,0.95);} |
| .service-name{font-size:11.5px;color:var(--muted);font-weight:600;} |
| |
| aside{display:flex;flex-direction:column;min-height:0;overflow-y:auto;} |
| aside::-webkit-scrollbar{display:none;} |
| aside{-ms-overflow-style:none;scrollbar-width:none;} |
| |
| .tools-list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;flex-shrink:0;} |
| .tool-card{ |
| display:flex;align-items:center;gap:16px;background:linear-gradient(145deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2)); |
| backdrop-filter: blur(10px); |
| border:1px solid rgba(255,255,255,0.06); |
| border-top:1px solid rgba(212,167,44,0.2); |
| border-radius:18px;padding:16px 20px;transition:all .4s cubic-bezier(0.4, 0, 0.2, 1); |
| box-shadow:inset 0 1px 0 rgba(212,167,44,0.05); |
| } |
| .tool-card:hover{ |
| border-color:rgba(212,167,44,0.4);transform:translateX(-5px) scale(1.01); |
| background:linear-gradient(145deg, rgba(255,255,255,0.05), rgba(212,167,44,0.08)); |
| box-shadow:0 15px 35px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(212,167,44,0.2); |
| } |
| .tool-card:hover .tool-icon img{transform:scale(1.18) rotate(8deg);transition:transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);filter:drop-shadow(0 8px 12px rgba(212,167,44,0.4));} |
| .tool-chevron{color:var(--muted);font-size:13px;transition:all 0.3s ease;} |
| .tool-card:hover .tool-chevron{color:var(--gold);transform:translateX(-4px);} |
| .tool-text{flex:1;} |
| .tool-title{font-size:15px;font-weight:800;margin-bottom:4px;color:var(--text);transition:color 0.3s ease;} |
| .tool-card:hover .tool-title{color:var(--gold-light);} |
| .tool-desc{font-size:11.5px;color:var(--muted);line-height:1.5;} |
| .tool-icon{ |
| width:48px;height:48px;border-radius:12px;flex-shrink:0; |
| display:flex;align-items:center;justify-content:center; |
| } |
| .tool-icon img{width:48px !important;height:48px !important;} |
| |
| .assistant-card{ |
| position:relative; |
| background:linear-gradient(160deg, rgba(255,255,255,0.02), rgba(0,0,0,0.3)); |
| backdrop-filter: blur(15px); |
| border:1px solid rgba(255,255,255,0.08); |
| border-top:1px solid rgba(212,167,44,0.4); |
| border-radius:24px; |
| padding:20px 18px 18px; |
| text-align:center; |
| overflow:hidden; |
| margin-top:auto; |
| flex-shrink:0; |
| box-shadow: 0 15px 35px rgba(0,0,0,0.6), inset 0 1px 0 rgba(212,167,44,0.15); |
| transition: all 0.4s cubic-bezier(0.4,0,0.2,1); |
| } |
| .assistant-card:hover{ |
| border-color:rgba(212,167,44,0.4); |
| box-shadow: 0 20px 50px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(212,167,44,0.25); |
| transform: translateY(-3px); |
| } |
| .assistant-card::before{ |
| content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:160px;height:160px;border-radius:50%; |
| background:radial-gradient(circle,rgba(212,167,44,0.25) 0%,transparent 70%);pointer-events:none; |
| animation:pulseGlow 4s ease-in-out infinite; |
| } |
| @keyframes pulseGlow { 0% {transform:translate(-50%, -50%) scale(1);opacity:0.6;} 50% {transform:translate(-50%, -50%) scale(1.4);opacity:1;} 100% {transform:translate(-50%, -50%) scale(1);opacity:0.6;} } |
| .ai-badge{ |
| position:absolute;top:16px;left:16px;width:auto;height:auto;padding:3px 10px;border-radius:10px; |
| background:rgba(212,167,44,0.15);border:1px solid rgba(212,167,44,0.3);color:var(--gold);font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center; |
| box-shadow: 0 0 15px rgba(212,167,44,0.2);backdrop-filter:blur(4px);z-index:2; |
| } |
| .assistant-mascot{margin:0 auto 10px;animation:floatY 3.2s ease-in-out infinite;position:relative;z-index:1; filter: drop-shadow(0 15px 25px rgba(212,167,44,0.4));} |
| .assistant-title{font-size:16px;font-weight:900;position:relative;z-index:1;letter-spacing:-0.3px;} |
| .assistant-title .eng{color:var(--gold);font-weight:900;} |
| .assistant-sub{font-size:11.5px;color:var(--gold);margin:4px 0 8px;position:relative;z-index:1;font-weight:700;} |
| .assistant-desc{font-size:11.5px;color:var(--muted);line-height:1.6;margin-bottom:14px;position:relative;z-index:1;} |
| .assistant-btn{ |
| position:relative;z-index:1;width:100%;padding:12px;border-radius:12px;font-weight:900;font-size:13.5px; |
| background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#14121a;display:flex;align-items:center; |
| justify-content:center;gap:10px;transition:all .3s ease; |
| box-shadow:var(--shadow-gold);border:none;cursor:pointer;overflow:hidden; |
| } |
| .assistant-btn::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);transition:all .5s;} |
| .assistant-btn:hover::after{left:100%;} |
| .assistant-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 30px rgba(212,167,44,0.4);} |
| |
| .main-footer{ |
| max-width:1700px;width:100%;margin:0 auto;padding:6px 36px;border-top:1px solid rgba(212,167,44,0.15); |
| display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:16px; |
| height:35px;flex-shrink:0;background:rgba(5,7,15,0.85);z-index:50; |
| } |
| .footer-brand{font-size:12px;color:var(--muted);white-space:nowrap;} |
| .footer-brand .eng{color:var(--gold);font-weight:800;} |
| .footer-links{display:flex;gap:18px;flex-wrap:nowrap;} |
| .footer-links a{font-size:11.5px;color:var(--muted);transition:color .2s ease;white-space:nowrap;} |
| .footer-links a:hover{color:var(--gold);} |
| .footer-social{display:flex;gap:8px;} |
| .footer-social a{ |
| width:30px;height:30px;border-radius:50%;background:var(--panel);border:1px solid var(--border); |
| display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;transition:all .2s ease; |
| } |
| .footer-social a:hover{color:var(--gold-light);border-color:var(--gold);transform:translateY(-3px);box-shadow:0 5px 15px rgba(212,167,44,0.3);} |
| |
| @media (max-width:1300px){ |
| .hud-layout{grid-template-columns: 1fr 1fr;} |
| } |
| @media (max-width:1000px){ |
| html,body{overflow:auto;height:auto;} |
| .hud-layout{ |
| grid-template-areas: |
| "center" |
| "props" |
| "tools"; |
| grid-template-columns: 1fr; |
| padding: 16px; |
| } |
| .chat-panel{height:75vh;min-height:500px;} |
| header{padding:10px 18px;} |
| .main-nav{display:none;} |
| .suggest-chips{padding:12px 12px 0;} |
| } |
| </style> |
| </head> |
| <body> |
| <div class="bg-glow"></div> |
| <div class="aurora-glow aurora-1"></div> |
| <div class="aurora-glow aurora-2"></div> |
|
|
| <header> |
| <div class="logo-block"> |
| <img src="logo.png" alt="Darak Logo" style="height:38px;width:auto;object-fit:contain;"> |
| <span class="logo-ar" style="margin-right:6px;">داراك</span> |
| <span class="logo-en eng">DARAK</span> |
| </div> |
| <nav class="main-nav" aria-label="التنقل الرئيسي"> |
| <a href="index.html" class="nav-link active">الرئيسية</a> |
| <a href="explore.html" class="nav-link">العقارات</a> |
| <a href="onboarding.html" class="nav-link">المناطق</a> |
| <a href="services.html" class="nav-link">الخدمات</a> |
| </nav> |
| <div class="header-actions"> |
| <a href="login.html" class="icon-btn" aria-label="حسابي" title="حسابي"><i class="fa-regular fa-user"></i></a> |
| <button class="icon-btn" id="notifBtn" aria-label="الإشعارات" title="الإشعارات"><i class="fa-regular fa-bell"></i></button> |
| <button class="icon-btn" id="favBtn" aria-label="المفضلة" title="المفضلة"><i class="fa-regular fa-heart"></i></button> |
| <a href="add-property.html" class="add-property-btn"><i class="fa-solid fa-plus"></i> أضف عقارك</a> |
| </div> |
| </header> |
|
|
| <main class="hud-layout"> |
|
|
| <aside class="opportunities reveal d1"> |
| <div class="col-label"><span>أفضل الفرص اليوم</span> <i class="fa-solid fa-sparkles"></i></div> |
| <div class="rec-tabs" id="sidebarTabs"> |
| <button class="cat-pill" data-filter="اليوم" data-active="true">اليوم</button> |
| <button class="cat-pill" data-filter="موصى به" data-active="false">موصى به</button> |
| <button class="cat-pill" data-filter="فاخر" data-active="false">فاخر</button> |
| <button class="cat-pill" data-filter="استثماري" data-active="false">استثماري</button> |
| </div> |
|
|
| <div class="opp-scroll-container"> |
| <div class="prop-card"> |
| <div class="prop-media sale"><img src="assets/property_v2_1_1781334814886.png" alt=""> |
| <div class="prop-badge"><i class="fa-solid fa-bolt" style="margin-left:4px;"></i> فرصة نادرة</div> |
| <button class="prop-fav" aria-label="أضف للمفضلة"><i class="fa-regular fa-heart"></i></button> |
| </div> |
| <div class="prop-body"> |
| <div style="color:var(--gold);font-size:10px;margin-bottom:4px;letter-spacing:2px;"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div> |
| <div class="prop-title">شقة فاخرة في تاج سيتي</div> |
| <div class="prop-loc" style="font-size:11px;color:var(--muted);margin-top:2px;margin-bottom:6px;"><i class="fa-solid fa-map-location-dot" style="color:var(--gold);margin-left:4px;"></i> القاهرة الجديدة</div> |
| <div class="prop-price" style="font-size:15px;color:var(--gold-light);font-weight:900;display:flex;flex-direction:column;"> |
| ٤٬٥٠٠٬٠٠٠ ج.م |
| <small style="font-size:10.5px;color:var(--muted-2);font-weight:600;margin-top:2px;">(٢٥,٠٠٠ ج.م للمتر)</small> |
| </div> |
| <div class="prop-specs" style="margin:8px 0;border-top:1px solid rgba(212,167,44,0.15);padding-top:8px;"> |
| <span><i class="fa-solid fa-building" style="color:var(--gold);"></i> Apartment</span> |
| <span><i class="fa-solid fa-ruler-combined" style="color:var(--gold);"></i> ١٨٠ م²</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="prop-card"> |
| <div class="prop-media rent" style="padding:0;height:120px;"><img src="assets/property_v2_2_1781334832278.png" alt="" style="width:100%;height:100%;object-fit:cover;"> |
| <span class="prop-badge rent">للإيجار</span> |
| <button class="prop-fav" aria-label="أضف للمفضلة"><i class="fa-regular fa-heart"></i></button> |
| </div> |
| <div class="prop-body"> |
| <div style="color:var(--gold);font-size:10px;margin-bottom:4px;letter-spacing:2px;"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div> |
| <div class="prop-title">فيلا مستقلة بكمبوند ميفيدا</div> |
| <div class="prop-price" style="font-size:15px;color:var(--gold-light);font-weight:900;">١٨٬٠٠٠٬٠٠٠ ج.م</div> |
| <div class="prop-specs" style="margin:8px 0;border-top:1px solid rgba(255,255,255,0.05);padding-top:8px;"> |
| <span><i class="fa-solid fa-house"></i> Villa</span> |
| <span><i class="fa-solid fa-ruler-combined"></i> ١٨٠ م²</span> |
| </div> |
| </div> |
| </div> |
|
|
|
|
| </div> |
|
|
| <button class="view-more-btn"><i class="fa-solid fa-arrow-left"></i> عرض المزيد من الفرص</button> |
| </aside> |
|
|
| <div class="hud-center"> |
| <div class="hero reveal d2"> |
| <div class="star-decor s1"></div> |
| <div class="star-decor s2"></div> |
| <div class="star-decor s3"></div> |
| <div class="star-decor s4"></div> |
| <h1 class="hero-title">اسأل <span class="brand eng shimmer-text">Darak</span> عن أي شيء في العقارات</h1> |
| <p class="hero-subtitle">نساعدك في العثور على أفضل عقار، أفضل سعر، أفضل منطقة، وأفضل مقدمي الخدمات من خلال <span class="ai-highlight">الذكاء الاصطناعي</span>.</p> |
|
|
| <div class="category-pills"> |
| <button class="cat-pill"><i class="fa-solid fa-house"></i> شراء</button> |
| <button class="cat-pill"><i class="fa-solid fa-key"></i> إيجار</button> |
| <button class="cat-pill"><i class="fa-solid fa-chart-line"></i> استثمار</button> |
| <button class="cat-pill"><i class="fa-solid fa-vault"></i> تخصص</button> |
| <button class="cat-pill"><i class="fa-solid fa-paint-roller"></i> تشطيب</button> |
| <button class="cat-pill"><i class="fa-solid fa-couch"></i> ديكور</button> |
| <button class="cat-pill"><i class="fa-solid fa-building-columns"></i> تمويل</button> |
| <button class="cat-pill"><i class="fa-solid fa-map-location-dot"></i> قارن مناطق</button> |
| </div> |
| </div> |
|
|
| <div class="chat-panel reveal d3"> |
| <div class="chat-panel-header"> |
| <div class="chat-panel-title"> |
| <div class="chat-avatar-ring"><i class="fa-solid fa-wand-magic-sparkles" style="color:var(--gold);font-size:16px;"></i></div> |
| <div> |
| <div class="chat-panel-name"><span class="eng">Darak AI</span></div> |
| <div class="chat-panel-status"><span class="live-dot"></span> مستشارك العقاري بالذكاء الاصطناعي</div> |
| </div> |
| </div> |
| <button class="refresh-btn" id="clearChatBtn" title="محادثة جديدة" aria-label="بدء محادثة جديدة"><i class="fa-solid fa-rotate-right"></i></button> |
| </div> |
|
|
| <div class="chat-body" id="chatBody"> |
| <div class="welcome-row"> |
| <div class="welcome-bubble"> |
| مرحباً! أنا مساعد <b>Darak</b> الذكي.<br> |
| اسألني عن العقارات، المناطق، الأسعار، التشطيب، الديكور، أو أي خدمة عقارية.<br> |
| أنا هنا لمساعدتك في اتخاذ أفضل قرار. |
| </div> |
| </div> |
|
|
| </div> |
|
|
|
|
|
|
| <div id="filePreviewBar" style="display:none;padding:6px 18px;background:var(--panel-2);border-top:1px solid var(--border);align-items:center;justify-content:space-between;font-size:12px;color:var(--gold);"> |
| <span id="filePreviewName"></span> |
| <button id="removeFileBtn" style="color:#ef4444;font-weight:bold;cursor:pointer;">✖ إلغاء</button> |
| </div> |
| <div class="chat-input-row" style="background:transparent;border:none;box-shadow:none;padding:12px 24px 20px;"> |
| <div class="chat-input-wrapper" style="display:flex;align-items:center;flex:1;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.1);border-radius:50px;padding:6px 6px 6px 18px;transition:all .3s ease;"> |
| <button class="mic-btn" id="chatFileBtn" aria-label="إرفاق ملف" title="إرفاق صورة أو ملف PDF/TXT" style="border:none;background:transparent;"><i class="fa-solid fa-paperclip"></i></button> |
| <input type="file" id="chatFileInput" accept="image/*,.pdf,.txt,.doc,.docx,.csv,.json" style="display:none;"> |
| <input type="text" id="chatInput" placeholder="🔍 اسأل أي شيء عن العقارات..." maxlength="1000" style="flex:1;background:transparent;border:none;outline:none;font-size:14px;color:var(--text);padding:8px 8px;width:100%;"> |
| <button class="mic-btn" id="chatMicBtn" aria-label="بحث صوتي" style="border:none;background:transparent;"><i class="fa-solid fa-microphone"></i></button> |
| <button class="send-btn" id="chatSend" aria-label="إرسال" style="margin-right:8px;"><i class="fa-solid fa-paper-plane"></i></button> |
| </div> |
| </div> |
| </div> |
|
|
| </div> |
|
|
| <aside class="reveal d5"> |
| <div class="col-label" style="justify-content:flex-end"><span>أدوات <span class="eng" style="color:var(--gold)">Darak</span> الذكية</span> <i class="fa-solid fa-sparkles"></i></div> |
|
|
| <div class="tools-list"> |
| <a href="onboarding.html" class="tool-card"> |
| <div class="tool-icon" style="background:none;padding:0;"><img src="assets/icon_house_1781332970134.png" alt="" style="width:38px;height:38px;object-fit:contain;"></div> |
| <div class="tool-text"><div class="tool-title">اختر لي عقاراً</div><div class="tool-desc">نختار لك أفضل العقارات حسب أولوياتك</div></div> |
| <i class="fa-solid fa-chevron-left tool-chevron"></i> |
| </a> |
| <a href="design.html" class="tool-card"> |
| <div class="tool-icon" style="background:none;padding:0;"><img src="assets/icon_room_1781332981672.png" alt="" style="width:38px;height:38px;object-fit:contain;"></div> |
| <div class="tool-text"><div class="tool-title">صمم غرفتك بصورة</div><div class="tool-desc">حوّل صورتك إلى تصميم داخلي احترافي بالذكاء الاصطناعي</div></div> |
| <i class="fa-solid fa-chevron-left tool-chevron"></i> |
| </a> |
| <a href="calculator.html" class="tool-card"> |
| <div class="tool-icon" style="background:none;padding:0;"><img src="assets/icon_calculator_1781332992881.png" alt="" style="width:38px;height:38px;object-fit:contain;"></div> |
| <div class="tool-text"><div class="tool-title">حاسبة التشطيب والفرش</div><div class="tool-desc">احسب تكلفة التشطيب والفرش بدقة</div></div> |
| <i class="fa-solid fa-chevron-left tool-chevron"></i> |
| </a> |
| <a href="evaluate.html" class="tool-card"> |
| <div class="tool-icon" style="background:none;padding:0;"><img src="assets/icon_chart_1781333002728.png" alt="" style="width:38px;height:38px;object-fit:contain;"></div> |
| <div class="tool-text"><div class="tool-title">تقييم العقار</div><div class="tool-desc">تحليل ذكي لقيمة العقار وسعره في السوق</div></div> |
| <i class="fa-solid fa-chevron-left tool-chevron"></i> |
| </a> |
| <a href="compare.html" class="tool-card"> |
| <div class="tool-icon" style="background:none;padding:0;"><img src="assets/icon_scales_1781333012031.png" alt="" style="width:38px;height:38px;object-fit:contain;"></div> |
| <div class="tool-text"><div class="tool-title">قارن بين عقارين</div><div class="tool-desc">قارن بين خصائص وأسعار وعوائد أكثر من عقار</div></div> |
| <i class="fa-solid fa-chevron-left tool-chevron"></i> |
| </a> |
| </div> |
|
|
| <div class="assistant-card"> |
| <div class="ai-badge">AI</div> |
| <img src="assets/robot_avatar_1781332718861.png" alt="Darak AI" class="assistant-mascot" style="width:70px;height:70px;object-fit:contain;"> |
| <div class="assistant-title">مساعد <span class="eng">Darak</span></div> |
| <div class="assistant-sub">هنا لمساعدتك <span class="eng">24/7</span></div> |
| <div class="assistant-desc">اسألني عن أي شيء في العقارات، الاستثمار، أو أي استفسار عقاري</div> |
| <button class="assistant-btn" id="startChatBtn"><i class="fa-solid fa-comment-dots"></i> ابدأ محادثة جديدة</button> |
| </div> |
| </aside> |
|
|
| </main> |
|
|
| <footer class="main-footer"> |
| <div class="footer-brand"><span class="eng">Darak</span> <i class="fa-solid fa-sparkles" style="color:var(--gold);margin:0 4px;"></i> © 2026. جميع الحقوق محفوظة</div> |
| <div class="footer-links"> |
| <a href="#">اتصل بنا</a> |
| <a href="#">شروط الاستخدام</a> |
| <a href="#">سياسة الخصوصية</a> |
| <a href="#">مدونة دارك</a> |
| <a href="#">من نحن</a> |
| </div> |
| <div class="footer-social"> |
| <a href="#" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a> |
| <a href="#" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a> |
| <a href="#" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a> |
| </div> |
| </footer> |
|
|
| <script type="module"> |
| import { fetchChatResponse, fetchAllProperties, semanticSearch, logInteraction, triggerScraping } from './api.js'; |
| |
| document.querySelectorAll('.prop-fav').forEach(btn=>{ |
| btn.addEventListener('click',e=>{ |
| e.preventDefault();e.stopPropagation(); |
| btn.classList.toggle('active'); |
| const icon=btn.querySelector('i'); |
| icon.classList.toggle('fa-regular'); |
| icon.classList.toggle('fa-solid'); |
| }); |
| }); |
| document.getElementById('favBtn').addEventListener('click',()=>{ |
| const btn=document.getElementById('favBtn'); |
| btn.classList.toggle('liked'); |
| const icon=btn.querySelector('i'); |
| icon.classList.toggle('fa-regular'); |
| icon.classList.toggle('fa-solid'); |
| }); |
| |
| const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; |
| |
| function setupVoiceInput(btnId, inputId) { |
| const btn = document.getElementById(btnId); |
| const input = document.getElementById(inputId); |
| if (!btn || !input) return; |
| |
| let recognition = null; |
| let isRecording = false; |
| const oldPlaceholder = input.placeholder; |
| |
| let isFallback = false; |
| |
| const triggerMockFallback = () => { |
| isFallback = true; |
| isRecording = true; |
| btn.classList.add('active'); |
| input.classList.add('listening-glow'); |
| input.placeholder = 'جاري الاستماع... تَكَلَّم الآن بالعربية 🎙️'; |
| |
| setTimeout(() => { |
| input.value = "أريد البحث عن فيلا في التجمع الخامس"; |
| isRecording = false; |
| isFallback = false; |
| btn.classList.remove('active'); |
| input.classList.remove('listening-glow'); |
| input.placeholder = oldPlaceholder; |
| if (inputId === 'searchInput') document.getElementById('searchSend').click(); |
| else if (inputId === 'chatInput') document.getElementById('chatSend').click(); |
| }, 2500); |
| }; |
| |
| btn.addEventListener('click', () => { |
| if (isRecording) { |
| if (recognition && !isFallback) recognition.stop(); |
| return; |
| } |
| |
| if (!SpeechRecognition) { |
| triggerMockFallback(); |
| return; |
| } |
| |
| try { |
| recognition = new SpeechRecognition(); |
| recognition.lang = 'ar-EG'; |
| recognition.interimResults = true; |
| recognition.continuous = false; |
| |
| recognition.onstart = () => { |
| if (isFallback) return; |
| isRecording = true; |
| btn.classList.add('active'); |
| input.classList.add('listening-glow'); |
| input.placeholder = 'جاري الاستماع... تَكَلَّم الآن بالعربية 🎙️'; |
| }; |
| |
| recognition.onresult = (event) => { |
| if (isFallback) return; |
| let transcript = ''; |
| for (let i = event.resultIndex; i < event.results.length; i++) { |
| transcript += event.results[i][0].transcript; |
| } |
| input.value = transcript; |
| }; |
| |
| recognition.onend = () => { |
| if (isFallback) return; |
| isRecording = false; |
| btn.classList.remove('active'); |
| input.classList.remove('listening-glow'); |
| input.placeholder = oldPlaceholder; |
| if (input.value.trim()) { |
| if (inputId === 'searchInput') document.getElementById('searchSend').click(); |
| else if (inputId === 'chatInput') document.getElementById('chatSend').click(); |
| } |
| }; |
| |
| recognition.onerror = (event) => { |
| console.error('Speech recognition error:', event.error); |
| if (event.error === 'not-allowed' || event.error === 'service-not-allowed' || event.error === 'network') { |
| triggerMockFallback(); |
| } else { |
| if (isFallback) return; |
| isRecording = false; |
| btn.classList.remove('active'); |
| input.classList.remove('listening-glow'); |
| input.placeholder = oldPlaceholder; |
| } |
| }; |
| |
| recognition.start(); |
| } catch (e) { |
| console.error(e); |
| triggerMockFallback(); |
| } |
| }); |
| } |
| |
| |
| |
| setupVoiceInput('micBtn', 'searchInput'); |
| setupVoiceInput('chatMicBtn', 'chatInput'); |
| |
| const chatBody=document.getElementById('chatBody'); |
| const chatInput=document.getElementById('chatInput'); |
| |
| let currentAttachment = null; |
| const fileBtn = document.getElementById('chatFileBtn'); |
| const fileInput = document.getElementById('chatFileInput'); |
| const fileBar = document.getElementById('filePreviewBar'); |
| const fileNameSpan = document.getElementById('filePreviewName'); |
| const removeFileBtn = document.getElementById('removeFileBtn'); |
| |
| fileBtn.addEventListener('click', () => fileInput.click()); |
| fileInput.addEventListener('change', (e) => { |
| const file = e.target.files[0]; |
| if (!file) return; |
| const reader = new FileReader(); |
| reader.onload = (event) => { |
| currentAttachment = { name: file.name, type: file.type, base64: event.target.result }; |
| fileNameSpan.innerHTML = `<i class="fa-solid fa-file"></i> تم إرفاق: <b>${file.name}</b>`; |
| fileBar.style.display = 'flex'; |
| }; |
| reader.readAsDataURL(file); |
| }); |
| removeFileBtn.addEventListener('click', () => { |
| currentAttachment = null; |
| fileInput.value = ''; |
| fileBar.style.display = 'none'; |
| }); |
| |
| async function sendMessage(text){ |
| if((!text || !text.trim()) && !currentAttachment) return; |
| const row=document.createElement('div'); |
| row.className='welcome-row'; |
| row.style.flexDirection='row-reverse'; |
| |
| let attachHtml = ''; |
| if (currentAttachment) { |
| if (currentAttachment.type.startsWith('image/')) { |
| attachHtml = `<img src="${currentAttachment.base64}" style="max-width:200px;max-height:150px;border-radius:8px;margin-bottom:6px;display:block;border:1px solid var(--border-strong);">`; |
| } else { |
| attachHtml = `<div style="display:flex;align-items:center;gap:6px;background:rgba(0,0,0,0.3);padding:6px 10px;border-radius:6px;margin-bottom:6px;font-size:12px;"><i class="fa-solid fa-file-lines" style="color:var(--gold);"></i> <span>${currentAttachment.name}</span></div>`; |
| } |
| } |
| |
| const displayText = text ? text : (currentAttachment ? `[تحليل ملف: ${currentAttachment.name}]` : ''); |
| row.innerHTML=`<div class="welcome-bubble" style="background:linear-gradient(135deg,#f0cf6e,#d4a72c);color:#14121a;border-radius:14px 14px 14px 4px;">${attachHtml}${displayText}</div> |
| <div style="width:32px;height:32px;border-radius:50%;background:rgba(212,167,44,0.15);border:1px solid rgba(212,167,44,0.3);display:flex;align-items:center;justify-content:center;align-self:flex-end;flex-shrink:0;"><i class="fa-solid fa-user" style="color:var(--gold);font-size:14px;"></i></div>`; |
| chatBody.appendChild(row); |
| chatBody.scrollTop=chatBody.scrollHeight; |
| |
| const sentAttachment = currentAttachment; |
| currentAttachment = null; |
| fileInput.value = ''; |
| fileBar.style.display = 'none'; |
| |
| const reply=document.createElement('div'); |
| reply.className='welcome-row'; |
| reply.innerHTML=`<div class="bubble-wrapper" style="display:flex;flex-direction:column;gap:8px;"> |
| <div class="welcome-bubble thinking-bubble"><div class="thinking-waveform"><span></span><span></span><span></span></div> <span style="margin-right:4px;">يفكر... يبحث في العقارات والأسعار...</span></div> |
| </div> |
| <img src="assets/robot_avatar_1781332718861.png" class="mascot" style="width:65px;height:65px;object-fit:contain;animation:floatY 3.6s ease-in-out infinite;">`; |
| chatBody.appendChild(reply); |
| chatBody.scrollTop=chatBody.scrollHeight; |
| |
| try { |
| const response = await fetchChatResponse(displayText, sentAttachment); |
| const wrapper = reply.querySelector('.bubble-wrapper'); |
| const bubble = wrapper.querySelector('.welcome-bubble'); |
| bubble.classList.remove('thinking-bubble'); |
| bubble.innerHTML = response; |
| |
| if(response.includes("فيلا") || response.includes("شقة")) { |
| const isVilla = response.includes("فيلا"); |
| bubble.innerHTML += ` |
| <div style="margin-top:16px;border-top:1px solid rgba(212,167,44,0.2);padding-top:12px;"> |
| <div style="display:flex;align-items:center;gap:12px;background:rgba(0,0,0,0.3);padding:8px;border-radius:12px;border:1px solid rgba(255,255,255,0.05);"> |
| <img src="assets/property_v2_${isVilla?'1_1781334814886':'2_1781334832278'}.png" style="width:60px;height:60px;border-radius:8px;object-fit:cover;"> |
| <div style="flex:1;"> |
| <div style="font-size:12.5px;font-weight:800;color:var(--text);">${isVilla?'فيلا فاخرة':'شقة مميزة'}</div> |
| <div style="font-size:11px;color:var(--muted);margin:2px 0;"><i class="fa-solid fa-location-dot"></i> التجمع الخامس</div> |
| <div style="font-size:13px;color:var(--gold-light);font-weight:800;">${isVilla?'180M':'35,000'} EGP</div> |
| </div> |
| <button class="assistant-btn action-btn action-view-prop" style="padding:6px 12px;font-size:11px;border-radius:6px;width:auto;margin:0;">عرض <i class="fa-solid fa-arrow-left"></i></button> |
| </div> |
| </div> |
| `; |
| } |
| |
| wrapper.innerHTML += ` |
| <div class="chat-actions" style="display:flex;gap:8px;padding-right:12px;"> |
| <button class="cat-pill action-btn action-like" style="padding:4px 8px;font-size:11px;background:transparent;border-color:rgba(255,255,255,0.1);cursor:pointer;" title="أعجبني"><i class="fa-regular fa-thumbs-up"></i></button> |
| <button class="cat-pill action-btn action-dislike" style="padding:4px 8px;font-size:11px;background:transparent;border-color:rgba(255,255,255,0.1);cursor:pointer;" title="لم يعجبني"><i class="fa-regular fa-thumbs-down"></i></button> |
| <button class="cat-pill action-btn action-copy" style="padding:4px 8px;font-size:11px;background:transparent;border-color:rgba(255,255,255,0.1);cursor:pointer;" title="نسخ"><i class="fa-regular fa-copy"></i> نسخ</button> |
| <button class="cat-pill action-btn action-share" style="padding:4px 8px;font-size:11px;background:transparent;border-color:rgba(255,255,255,0.1);cursor:pointer;" title="مشاركة"><i class="fa-solid fa-share-nodes"></i> مشاركة</button> |
| <button class="cat-pill action-btn action-regenerate" style="padding:4px 8px;font-size:11px;background:transparent;border-color:rgba(255,255,255,0.1);cursor:pointer;" title="إعادة التوليد"><i class="fa-solid fa-rotate-right"></i> إعادة</button> |
| </div> |
| `; |
| |
| } catch (error) { |
| const bubble = reply.querySelector('.welcome-bubble'); |
| bubble.classList.remove('thinking-bubble'); |
| bubble.innerHTML = "عذراً، حدث خطأ في الاتصال. يرجى المحاولة لاحقاً."; |
| } |
| chatBody.scrollTop=chatBody.scrollHeight; |
| } |
| |
| document.getElementById('chatSend').addEventListener('click',()=>{ |
| sendMessage(chatInput.value); |
| chatInput.value=''; |
| }); |
| chatInput.addEventListener('keydown',e=>{ |
| if(e.key==='Enter'){sendMessage(chatInput.value);chatInput.value='';} |
| }); |
| document.querySelectorAll('.suggest-card').forEach(card=>{ |
| card.addEventListener('click',()=>sendMessage(card.dataset.q)); |
| }); |
| document.getElementById('clearChatBtn').addEventListener('click',()=>{ |
| chatBody.innerHTML=`<div class="welcome-row"> |
| <div class="welcome-bubble">مرحباً! أنا مساعد <b>Darak</b> الذكي.<br>اسألني عن العقارات، المناطق، الأسعار، التشطيب، الديكور، أو أي خدمة عقارية.<br>أنا هنا لمساعدتك في اتخاذ أفضل قرار.</div> |
| <img src="assets/robot_avatar_1781332718861.png" class="mascot" style="width:65px;height:65px;object-fit:contain;animation:floatY 3.6s ease-in-out infinite;"> |
| </div> |
| <div class="suggest-grid"> |
| <button class="suggest-card" data-q="أريد شقة في الشيخ زايد بميزانية ٤ مليون"><i class="fa-solid fa-house"></i> أريد شقة في الشيخ زايد بميزانية ٤ مليون</button> |
| <button class="suggest-card" data-q="ما أفضل المناطق للاستثمار الآن؟"><i class="fa-solid fa-chart-line"></i> ما أفضل المناطق للاستثمار الآن؟</button> |
| <button class="suggest-card" data-q="قارن بين التجمع الخامس ومدينة الرحاب"><i class="fa-solid fa-scale-balanced"></i> قارن بين التجمع الخامس ومدينة الرحاب</button> |
| <button class="suggest-card" data-q="أفضل شركات التشطيب في القاهرة الجديدة؟"><i class="fa-solid fa-paint-roller"></i> أفضل شركات التشطيب في القاهرة الجديدة؟</button> |
| </div>`; |
| document.querySelectorAll('.suggest-card').forEach(card=>{ |
| card.addEventListener('click',()=>sendMessage(card.dataset.q)); |
| }); |
| }); |
| |
| document.getElementById('startChatBtn').addEventListener('click',()=>{ |
| document.querySelector('.chat-panel').scrollIntoView({behavior:'smooth',block:'center'}); |
| chatInput.focus(); |
| }); |
| |
| |
| |
| let currentOffset = 0; |
| async function loadLiveProperties() { |
| try { |
| const props = await fetchAllProperties(2, currentOffset); |
| if (props && props.length > 0) { |
| renderLiveProperties(props); |
| } |
| } catch(err) { console.error(err); } |
| } |
| |
| function renderLiveProperties(props) { |
| const container = document.querySelector('.opportunities'); |
| if (!container) return; |
| const oldCards = container.querySelectorAll('.prop-card'); |
| oldCards.forEach(c => c.remove()); |
| const btn = container.querySelector('.view-more-btn'); |
| |
| props.slice(0, 2).forEach((prop, idx) => { |
| const card = document.createElement('div'); |
| card.className = 'prop-card card-animate-in'; |
| card.style.animationDelay = (idx * 0.15) + 's'; |
| const badgeClass = prop.status === 'للإيجار' ? 'rent' : (prop.type === 'Commercial' ? 'invest' : 'sale'); |
| const imgUrl = prop.image || 'assets/property_v2_1_1781334814886.png'; |
| card.innerHTML = ` |
| <div class="prop-media ${badgeClass}"><img src="${imgUrl}" alt="" onerror="this.src='assets/property_v2_1_1781334814886.png'"> |
| <div class="prop-badge"><i class="fa-solid fa-bolt" style="margin-left:4px;"></i> ${prop.status === 'للإيجار' ? 'عائد إيجاري 12%' : 'فرصة نادرة'}</div> |
| <button class="prop-fav" aria-label="أضف للمفضلة"><i class="fa-regular fa-heart"></i></button> |
| </div> |
| <div class="prop-body"> |
| <div style="color:var(--gold);font-size:10px;margin-bottom:4px;letter-spacing:2px;"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div> |
| <div class="prop-title">${prop.title}</div> |
| <div class="prop-loc" style="font-size:11px;color:var(--muted);margin-top:2px;margin-bottom:6px;"><i class="fa-solid fa-map-location-dot" style="color:var(--gold);margin-left:4px;"></i> ${prop.location || 'القاهرة'}</div> |
| <div class="prop-price" style="font-size:15px;color:var(--gold-light);font-weight:900;display:flex;flex-direction:column;"> |
| ${prop.price} ${String(prop.price).includes('جم') || String(prop.price).includes('ج.م') || String(prop.price).includes('/') ? '' : 'ج.م'} |
| <small style="font-size:10.5px;color:var(--muted-2);font-weight:600;margin-top:2px;">(٢٥,٠٠٠ ج.م للمتر)</small> |
| </div> |
| <div class="prop-specs" style="margin:8px 0;border-top:1px solid rgba(212,167,44,0.15);padding-top:8px;"> |
| <span><i class="fa-solid fa-building" style="color:var(--gold);"></i> ${prop.type || 'عقار'}</span> |
| <span><i class="fa-solid fa-ruler-combined" style="color:var(--gold);"></i> ${prop.area || '١٨٠'} م²</span> |
| </div> |
| </div> |
| `; |
| card.addEventListener('click', (e) => { |
| if (e.target.closest('.prop-fav')) return; |
| logInteraction(prop.title || 'prop', 'click'); |
| sendMessage(`أخبرني بتفاصيل وتقييم وسعر هذا العقار: ${prop.title} في ${prop.location} بسعر ${prop.price}`); |
| }); |
| const favBtn = card.querySelector('.prop-fav'); |
| favBtn.addEventListener('click', (e) => { |
| e.preventDefault(); e.stopPropagation(); |
| favBtn.classList.toggle('active'); |
| const icon = favBtn.querySelector('i'); |
| icon.classList.toggle('fa-regular'); |
| icon.classList.toggle('fa-solid'); |
| logInteraction(prop.title || 'prop', 'like'); |
| }); |
| container.insertBefore(card, btn); |
| }); |
| setup3DTilts(); |
| } |
| |
| const viewMoreBtn = document.querySelector('.view-more-btn'); |
| if (viewMoreBtn) { |
| viewMoreBtn.addEventListener('click', () => { |
| window.location.href = 'explore.html'; |
| }); |
| } |
| |
| const sidebarTabs = document.querySelectorAll('#sidebarTabs .cat-pill'); |
| sidebarTabs.forEach(tab => { |
| tab.addEventListener('click', async (e) => { |
| sidebarTabs.forEach(t => t.dataset.active = 'false'); |
| const clicked = e.currentTarget; |
| clicked.dataset.active = 'true'; |
| |
| const filter = clicked.dataset.filter; |
| const container = document.querySelector('.opportunities'); |
| const oldCards = container.querySelectorAll('.prop-card'); |
| oldCards.forEach(c => { c.style.opacity = '0.5'; }); |
| |
| try { |
| let results = []; |
| if (filter === 'اليوم') { |
| results = await fetchAllProperties(2, 0); |
| } else if (filter === 'موصى به') { |
| results = await fetchAllProperties(2, 3); |
| } else if (filter === 'فاخر') { |
| results = await semanticSearch("شقة أو فيلا فاخرة جداً الترا سوبر لوكس"); |
| } else if (filter === 'استثماري') { |
| results = await semanticSearch("تجاري إداري استثمار عائد محل"); |
| } |
| |
| if (results && results.length > 0) { |
| renderLiveProperties(results); |
| } |
| } catch (e) { |
| console.error(e); |
| oldCards.forEach(c => { c.style.opacity = '1'; }); |
| } |
| }); |
| }); |
| |
| |
| loadLiveProperties(); |
| |
| function setup3DTilts() { |
| const cards = document.querySelectorAll('.prop-card, .tool-card, .suggest-card, .assistant-card'); |
| cards.forEach(card => { |
| if (card.dataset.tiltInit) return; |
| card.dataset.tiltInit = 'true'; |
| card.classList.add('card-3d-tilt'); |
| card.addEventListener('mousemove', (e) => { |
| const rect = card.getBoundingClientRect(); |
| const x = e.clientX - rect.left - rect.width / 2; |
| const y = e.clientY - rect.top - rect.height / 2; |
| const rotateX = (-y / (rect.height / 2)) * 6; |
| const rotateY = (x / (rect.width / 2)) * 6; |
| card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`; |
| card.style.boxShadow = `0 15px 35px rgba(212, 167, 44, 0.22)`; |
| }); |
| card.addEventListener('mouseleave', () => { |
| card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)'; |
| card.style.boxShadow = ''; |
| }); |
| }); |
| } |
| setup3DTilts(); |
| |
| function showToast(message, type = 'success') { |
| let container = document.getElementById('toast-container'); |
| if (!container) { |
| container = document.createElement('div'); |
| container.id = 'toast-container'; |
| container.style.cssText = 'position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:10px;z-index:9999;'; |
| document.body.appendChild(container); |
| } |
| const toast = document.createElement('div'); |
| toast.style.cssText = `background:linear-gradient(135deg, rgba(13,17,32,0.95), rgba(13,17,32,0.98));backdrop-filter:blur(10px);border:1px solid ${type==='success'?'rgba(212,167,44,0.5)':'rgba(239,68,68,0.5)'};border-radius:50px;padding:12px 24px;color:var(--text);font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,0.5);opacity:0;transform:translateY(20px);transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);`; |
| toast.innerHTML = `<i class="fa-solid ${type==='success'?'fa-circle-check':'fa-circle-info'}" style="color:${type==='success'?'var(--gold)':'#ef4444'};font-size:16px;"></i> <span>${message}</span>`; |
| container.appendChild(toast); |
| requestAnimationFrame(() => { toast.style.opacity='1'; toast.style.transform='translateY(0)'; }); |
| setTimeout(() => { toast.style.opacity='0'; toast.style.transform='translateY(20px)'; setTimeout(()=>toast.remove(),400); }, 3500); |
| } |
| |
| document.addEventListener('click', (e) => { |
| const btn = e.target.closest('.action-btn'); |
| if (!btn) return; |
| const icon = btn.querySelector('i'); |
| |
| if (btn.classList.contains('action-like')) { |
| if (icon.classList.contains('fa-regular')) { |
| icon.className = 'fa-solid fa-thumbs-up'; icon.style.color = 'var(--gold)'; btn.style.borderColor = 'var(--gold)'; |
| showToast('شكراً لملاحظاتك! سيساعدنا هذا في تحسين Darak.'); |
| } else { |
| icon.className = 'fa-regular fa-thumbs-up'; icon.style.color = ''; btn.style.borderColor = 'rgba(255,255,255,0.1)'; |
| } |
| } else if (btn.classList.contains('action-dislike')) { |
| if (icon.classList.contains('fa-regular')) { |
| icon.className = 'fa-solid fa-thumbs-down'; icon.style.color = '#ef4444'; btn.style.borderColor = '#ef4444'; |
| showToast('شكراً لملاحظاتك، سنعمل على تحسين النموذج.', 'error'); |
| } else { |
| icon.className = 'fa-regular fa-thumbs-down'; icon.style.color = ''; btn.style.borderColor = 'rgba(255,255,255,0.1)'; |
| } |
| } else if (btn.classList.contains('action-copy')) { |
| const bubble = btn.closest('.chat-row')?.querySelector('.welcome-bubble'); |
| if (bubble) { |
| const temp = document.createElement('div'); |
| temp.innerHTML = bubble.innerHTML.replace(/<br>/g, '\\n'); |
| navigator.clipboard.writeText(temp.textContent || temp.innerText).then(() => showToast('تم نسخ النص بنجاح')); |
| } |
| } else if (btn.classList.contains('action-share')) { |
| showToast('تم نسخ رابط المشاركة بنجاح'); |
| } else if (btn.classList.contains('action-regenerate')) { |
| icon.classList.add('fa-spin'); |
| setTimeout(() => { icon.classList.remove('fa-spin'); showToast('تم تسجيل طلب إعادة الصياغة لتطوير النموذج'); }, 1000); |
| } else if (btn.classList.contains('action-view-prop')) { |
| showToast('جاري تحويلك لتفاصيل العقار...'); |
| setTimeout(() => { window.location.href = 'explore.html'; }, 1500); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
