| <!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 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@400;600;700;800;900&family=Outfit:wght@300;400;600;800;900&display=swap" rel="stylesheet"> |
| |
| <style> |
| :root { |
| --bg: #05070f; |
| --panel: rgba(13, 17, 32, 0.75); |
| --border: rgba(255, 255, 255, 0.08); |
| --border-strong: rgba(212, 167, 44, 0.3); |
| --gold: #d4a72c; |
| --gold-light: #fbe58a; |
| --text: #ffffff; |
| --muted: #94a3b8; |
| --font-ar: 'Cairo', sans-serif; |
| --font-en: 'Outfit', sans-serif; |
| } |
| |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| |
| body { |
| font-family: var(--font-ar); background-color: var(--bg); color: var(--text); |
| min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; |
| } |
| .eng { font-family: var(--font-en); } |
| |
| .bg-glow { |
| position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; 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 shimmerSweep { 0% { left: -100%; } 100% { left: 200%; } } |
| @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } |
| @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 15px rgba(212,167,44,0.3); } 50% { box-shadow: 0 0 35px rgba(212,167,44,0.9); } } |
| |
| |
| header { display: flex; align-items: center; justify-content: space-between; padding: 8px 36px; background: rgba(5,7,15,0.7); backdrop-filter: blur(25px); border-bottom: 1px solid rgba(212,167,44,0.15); box-shadow: 0 4px 30px rgba(0,0,0,0.5); height: 55px; position: sticky; top: 0; z-index: 50; } |
| .logo-block { display: flex; align-items: center; gap: 8px; line-height: 1; } |
| .logo-ar { font-size: 21px; font-weight: 900; color: var(--gold); } |
| .logo-en { font-size: 9.5px; letter-spacing: 4px; color: var(--muted); margin-top: 2px; } |
| .main-nav { display: flex; gap: 6px; background: rgba(13,17,32,0.7); 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; text-decoration: none; transition: all .3s; } |
| .main-nav a:hover { color: var(--gold); } |
| .main-nav a.active { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #14121a; } |
| .header-actions { display: flex; gap: 10px; } |
| .icon-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--border); color: var(--muted); cursor: pointer; } |
| |
| .main-footer { padding: 6px 36px; border-top: 1px solid rgba(212,167,44,0.15); display: flex; justify-content: space-between; align-items: center; height: 35px; background: rgba(5,7,15,0.85); margin-top: auto; } |
| .footer-brand { font-size: 12px; color: var(--muted); } |
| .footer-brand .eng { color: var(--gold); font-weight: 800; } |
| .footer-links { display: flex; gap: 18px; } |
| .footer-links a { font-size: 11.5px; color: var(--muted); text-decoration: none; } |
| |
| |
| main { |
| flex: 1; padding: 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; max-width: 1400px; margin: 0 auto; width: 100%; align-items: start; |
| } |
| @media (max-width: 1000px) { main { grid-template-columns: 1fr; flex-direction: column-reverse; display: flex; } } |
| |
| |
| .form-section { |
| background: linear-gradient(145deg, rgba(20,25,45,0.8), rgba(13,17,32,0.95)); |
| backdrop-filter: blur(30px); border: 1px solid rgba(212,167,44,0.2); border-radius: 24px; |
| padding: 40px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); animation: fadeInUp 0.8s ease forwards; |
| } |
| |
| .form-header { margin-bottom: 30px; } |
| .form-header h1 { font-size: 28px; font-weight: 900; color: var(--text); margin-bottom: 8px; } |
| |
| |
| .progress-container { display: flex; justify-content: space-between; margin-bottom: 30px; position: relative; } |
| .progress-line { position: absolute; top: 15px; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.1); z-index: 0; } |
| .progress-fill { position: absolute; top: 15px; left: 0; width: 0%; height: 2px; background: var(--gold); z-index: 0; transition: width 0.4s ease; } |
| .step-indicator { width: 32px; height: 32px; border-radius: 50%; background: var(--panel); border: 2px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; position: relative; z-index: 1; transition: all 0.4s ease; color: var(--muted); } |
| .step-indicator.active { background: var(--gold); border-color: var(--gold-light); color: #14121a; box-shadow: 0 0 15px rgba(212,167,44,0.5); } |
| .step-indicator.completed { background: var(--gold-light); border-color: var(--gold); color: #14121a; } |
| |
| |
| .role-toggle { display: flex; background: rgba(0,0,0,0.4); border-radius: 12px; padding: 4px; margin-bottom: 30px; border: 1px solid rgba(255,255,255,0.05); position: relative; } |
| .role-btn { flex: 1; padding: 12px; text-align: center; font-size: 15px; font-weight: 700; color: var(--muted); cursor: pointer; border-radius: 8px; transition: all 0.3s; position: relative; z-index: 1; } |
| .role-btn.active { color: #14121a; } |
| .role-slider { position: absolute; top: 4px; right: 4px; width: calc(50% - 4px); height: calc(100% - 8px); background: linear-gradient(135deg, var(--gold-light), var(--gold)); border-radius: 8px; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 0; } |
| .role-slider.company { transform: translateX(-100%); } |
| |
| |
| .form-step { display: none; animation: fadeInUp 0.4s ease forwards; } |
| .form-step.active { display: block; } |
| |
| .form-group { margin-bottom: 20px; } |
| .form-group label { display: block; font-size: 14px; font-weight: 700; color: var(--gold-light); margin-bottom: 8px; } |
| .form-control { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--border); color: var(--text); padding: 14px 16px; border-radius: 12px; font-size: 15px; font-family: var(--font-ar); transition: all 0.3s ease; } |
| .form-control:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 15px rgba(212,167,44,0.2); } |
| |
| .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } |
| |
| |
| .amenities-grid { display: flex; flex-wrap: wrap; gap: 12px; } |
| .amenity-badge { padding: 10px 16px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.3); color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 700; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; } |
| .amenity-badge i { font-size: 16px; } |
| .amenity-badge.active { background: rgba(212,167,44,0.15); border-color: var(--gold); color: var(--gold-light); box-shadow: 0 0 15px rgba(212,167,44,0.2); } |
| |
| .dropzone { border: 2px dashed rgba(212,167,44,0.4); border-radius: 16px; padding: 30px; text-align: center; background: rgba(212,167,44,0.02); cursor: pointer; transition: all 0.3s ease; } |
| .dropzone:hover { background: rgba(212,167,44,0.05); border-color: var(--gold); } |
| .dropzone i { font-size: 32px; color: var(--gold); margin-bottom: 12px; } |
| |
| .step-actions { display: flex; justify-content: space-between; margin-top: 30px; } |
| .btn-secondary { padding: 12px 24px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.3); color: var(--text); font-family: var(--font-ar); font-weight: 700; cursor: pointer; transition: all 0.3s; } |
| .btn-secondary:hover { background: rgba(255,255,255,0.05); } |
| .btn-primary { padding: 12px 32px; border-radius: 12px; border: none; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #14121a; font-family: var(--font-ar); font-weight: 800; cursor: pointer; transition: all 0.3s; box-shadow: 0 5px 15px rgba(212,167,44,0.3); } |
| .btn-primary:hover { transform: translateY(-2px); animation: pulseGlow 1.5s infinite; } |
| |
| |
| .preview-section { |
| position: sticky; top: 100px; |
| } |
| .preview-header { margin-bottom: 16px; font-size: 16px; font-weight: 800; color: var(--muted); display: flex; align-items: center; gap: 8px; } |
| |
| .property-card { |
| background: linear-gradient(145deg, rgba(20,25,45,0.8), rgba(13,17,32,0.95)); |
| border: 1px solid rgba(255,255,255,0.05); border-radius: 20px; overflow: hidden; |
| box-shadow: 0 20px 40px rgba(0,0,0,0.4); transition: all 0.3s ease; |
| } |
| .card-image-wrapper { width: 100%; height: 220px; background: #1a1a2e; position: relative; display: flex; align-items: center; justify-content: center; } |
| .card-image-wrapper i { font-size: 48px; color: rgba(255,255,255,0.05); z-index: 0; } |
| .card-image { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: opacity 0.3s; z-index: 1; opacity: 0.4; filter: grayscale(50%); } |
| .card-badge { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 800; color: var(--gold-light); border: 1px solid rgba(212,167,44,0.3); z-index: 2; } |
| |
| .card-content { padding: 20px; } |
| .card-price { font-size: 24px; font-weight: 900; color: var(--gold-light); margin-bottom: 4px; } |
| .card-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
| .card-location { font-size: 13px; color: var(--muted); margin-bottom: 16px; } |
| .card-location i { color: var(--gold); } |
| |
| .card-metrics { display: flex; gap: 16px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 16px; } |
| .metric { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; } |
| .metric i { color: var(--gold); } |
| |
| .amenities-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; } |
| .amenities-preview span { font-size: 11px; background: rgba(212,167,44,0.1); color: var(--gold); padding: 4px 10px; border-radius: 50px; } |
| |
| |
| .toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 10px; } |
| .toast { background: rgba(20,25,45,0.95); backdrop-filter: blur(10px); border: 1px solid var(--gold); border-radius: 12px; padding: 12px 24px; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 12px; animation: fadeInUp 0.3s ease forwards; } |
| |
| </style> |
| </head> |
| <body> |
|
|
| <div class="bg-glow"></div> |
|
|
| <header> |
| <div class="logo-block"> |
| <img src="logo.png" alt="Darak Logo" style="height:38px;width:auto;object-fit:contain; filter: drop-shadow(0 0 10px rgba(212,167,44,0.5));"> |
| <span class="logo-ar">داراك</span> |
| <span class="logo-en eng">DARAK</span> |
| </div> |
| <nav class="main-nav"> |
| <a href="index.html">الرئيسية</a> |
| <a href="explore.html">العقارات</a> |
| <a href="services.html">الخدمات</a> |
| <a href="add-property.html" class="active">أضف عقارك</a> |
| </nav> |
| <div class="header-actions"> |
| <a href="login.html" class="icon-btn"><i class="fa-regular fa-user"></i></a> |
| </div> |
| </header> |
|
|
| <main> |
| |
| <div class="form-section"> |
| <div class="form-header"> |
| <h1>أضف عقارك إلى شبكة داراك</h1> |
| |
| <div class="role-toggle"> |
| <div class="role-slider individual" id="roleSlider"></div> |
| <div class="role-btn active" id="btnIndividual" onclick="setRole('individual')">فرد / مالك</div> |
| <div class="role-btn" id="btnCompany" onclick="setRole('company')">شركة / مطور</div> |
| </div> |
|
|
| <div class="progress-container"> |
| <div class="progress-line"></div> |
| <div class="progress-fill" id="progressFill"></div> |
| <div class="step-indicator active" id="ind1">1</div> |
| <div class="step-indicator" id="ind2">2</div> |
| <div class="step-indicator" id="ind3">3</div> |
| </div> |
| </div> |
|
|
| <form id="addPropertyForm"> |
| |
| |
| <div class="form-step active" id="step1"> |
| <div class="form-group"> |
| <label>عنوان العقار الإعلاني</label> |
| <input type="text" class="form-control" id="inpTitle" name="title" placeholder="شقة فاخرة للبيع..." oninput="updatePreview()"> |
| </div> |
| <div class="form-group"> |
| <label>وصف العقار</label> |
| <textarea class="form-control" name="description" rows="3" placeholder="أدخل تفاصيل ومميزات العقار..."></textarea> |
| </div> |
| <div class="grid-2"> |
| <div class="form-group"> |
| <label>السعر (جنيه مصري)</label> |
| <input type="number" class="form-control" id="inpPrice" name="price" placeholder="5,000,000" oninput="updatePreview()"> |
| </div> |
| <div class="form-group"> |
| <label>المساحة (م²)</label> |
| <input type="number" class="form-control" id="inpArea" name="area" placeholder="150" oninput="updatePreview()"> |
| </div> |
| </div> |
| <div class="step-actions"> |
| <div></div> |
| <button type="button" class="btn-primary" onclick="nextStep(2)">التالي <i class="fa-solid fa-arrow-left"></i></button> |
| </div> |
| </div> |
|
|
| |
| <div class="form-step" id="step2"> |
| <div class="grid-2"> |
| <div class="form-group"> |
| <label>المنطقة</label> |
| <input type="text" class="form-control" id="inpLocation" name="location" placeholder="التجمع الخامس، شارع التسعين" oninput="updatePreview()"> |
| </div> |
| <div class="grid-2"> |
| <div class="form-group"> |
| <label>غرف النوم</label> |
| <input type="number" class="form-control" id="inpBeds" name="bedrooms" placeholder="3" oninput="updatePreview()"> |
| </div> |
| <div class="form-group"> |
| <label>الحمامات</label> |
| <input type="number" class="form-control" id="inpBaths" name="bathrooms" placeholder="2" oninput="updatePreview()"> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="form-group" style="margin-top:20px;"> |
| <label>المرافق والمميزات (اختر ما ينطبق)</label> |
| <div class="amenities-grid" id="amenitiesGrid"> |
| <div class="amenity-badge" onclick="toggleAmenity(this, 'مسبح')"><i class="fa-solid fa-water-ladder"></i> مسبح</div> |
| <div class="amenity-badge" onclick="toggleAmenity(this, 'جيم')"><i class="fa-solid fa-dumbbell"></i> جيم رياضي</div> |
| <div class="amenity-badge" onclick="toggleAmenity(this, 'أمن')"><i class="fa-solid fa-shield-halved"></i> أمن وحراسة</div> |
| <div class="amenity-badge" onclick="toggleAmenity(this, 'حديقة')"><i class="fa-solid fa-tree"></i> حديقة خاصة</div> |
| <div class="amenity-badge" onclick="toggleAmenity(this, 'سمارت هوم')"><i class="fa-solid fa-house-signal"></i> سمارت هوم</div> |
| </div> |
| </div> |
|
|
| <div class="step-actions"> |
| <button type="button" class="btn-secondary" onclick="prevStep(1)"><i class="fa-solid fa-arrow-right"></i> السابق</button> |
| <button type="button" class="btn-primary" onclick="nextStep(3)">التالي <i class="fa-solid fa-arrow-left"></i></button> |
| </div> |
| </div> |
|
|
| |
| <div class="form-step" id="step3"> |
| <div class="grid-2"> |
| <div class="form-group"> |
| <label>صور العقار الرئيسية</label> |
| <div class="dropzone" onclick="document.getElementById('mainImages').click()"> |
| <i class="fa-regular fa-images"></i> |
| <p>اسحب الصور هنا أو اضغط للرفع</p> |
| <input type="file" id="mainImages" hidden multiple accept="image/*" onchange="previewImage(this)"> |
| </div> |
| </div> |
| <div class="form-group"> |
| <label>وثائق الملكية للعقار</label> |
| <div class="dropzone" onclick="document.getElementById('legalDocs').click()"> |
| <i class="fa-solid fa-file-shield"></i> |
| <p>ارفع مستندات العقار (.pdf, .doc)</p> |
| <input type="file" id="legalDocs" hidden accept=".pdf,.doc,.docx,image/*"> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="companyFields" style="display:none; margin-top:30px; border-top:1px solid rgba(255,255,255,0.05); padding-top:20px;"> |
| <h3 style="color:var(--text); margin-bottom: 16px; font-size: 18px;"><i class="fa-solid fa-building-circle-check" style="color:var(--gold);"></i> ميزات عرض المطورين</h3> |
| |
| <div class="grid-2"> |
| <div class="form-group"> |
| <label>الملف التعريفي للشركة</label> |
| <div class="dropzone" style="padding:15px;" onclick="document.getElementById('companyProfile').click()"> |
| <i class="fa-solid fa-file-pdf" style="font-size:20px; margin-bottom:4px;"></i> |
| <p style="font-size:12px;">ارفع ملف الـ Profile</p> |
| <input type="file" id="companyProfile" hidden accept=".pdf"> |
| </div> |
| </div> |
| <div class="form-group"> |
| <label>المخطط الهندسي (2D Layout / CAD)</label> |
| <div class="dropzone" style="padding:15px;" onclick="document.getElementById('layout2d').click()"> |
| <i class="fa-solid fa-pen-ruler" style="font-size:20px; margin-bottom:4px;"></i> |
| <p style="font-size:12px;">ارفع ملفات التصميم (.dwg)</p> |
| <input type="file" id="layout2d" hidden accept="image/*,application/pdf,.dwg,.dxf"> |
| </div> |
| </div> |
| </div> |
|
|
|
|
| </div> |
|
|
| <div class="step-actions"> |
| <button type="button" class="btn-secondary" onclick="prevStep(2)"><i class="fa-solid fa-arrow-right"></i> السابق</button> |
| <button type="submit" class="btn-primary" id="submitBtn"><i class="fa-solid fa-cloud-arrow-up"></i> نشر العقار</button> |
| </div> |
| </div> |
|
|
| </form> |
| </div> |
|
|
| |
| <div class="preview-section"> |
| <div class="preview-header"><i class="fa-solid fa-eye"></i> معاينة حية للإعلان</div> |
| |
| <div class="property-card"> |
| <div class="card-image-wrapper"> |
| <i class="fa-solid fa-image"></i> |
| <img src="assets/property_v2_1_1781334814886.png" class="card-image" id="prevImg"> |
| <div class="card-badge" id="prevBadge">فردي</div> |
| </div> |
| <div class="card-content"> |
| <div class="card-price"><span id="prevPrice">---,---</span> <span style="font-size:14px; font-weight:700; color:var(--muted);">EGP</span></div> |
| <div class="card-title" id="prevTitle" style="color:var(--muted);">عنوان العقار سيظهر هنا...</div> |
| <div class="card-location"><i class="fa-solid fa-location-dot"></i> <span id="prevLoc">أدخل المنطقة</span></div> |
| |
| <div class="card-metrics"> |
| <div class="metric"><i class="fa-solid fa-bed"></i> <span id="prevBeds">-</span> غرف</div> |
| <div class="metric"><i class="fa-solid fa-bath"></i> <span id="prevBaths">-</span> حمامات</div> |
| <div class="metric"><i class="fa-solid fa-ruler-combined"></i> <span id="prevArea">--</span> م²</div> |
| </div> |
|
|
| <div class="amenities-preview" id="prevAmenities"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="main-footer"> |
| <div class="footer-brand"><span class="eng">Darak</span> © 2026</div> |
| </footer> |
|
|
| <div class="toast-container" id="toastContainer"></div> |
|
|
| |
| <script type="module"> |
| import { ingestProperty } from './api.js'; |
| |
| let currentRole = 'individual'; |
| let currentStep = 1; |
| let selectedAmenities = []; |
| |
| |
| window.setRole = function(role) { |
| currentRole = role; |
| const slider = document.getElementById('roleSlider'); |
| const companyFields = document.getElementById('companyFields'); |
| const badge = document.getElementById('prevBadge'); |
| |
| if (role === 'individual') { |
| document.getElementById('btnIndividual').classList.add('active'); |
| document.getElementById('btnCompany').classList.remove('active'); |
| slider.classList.add('individual'); |
| slider.classList.remove('company'); |
| companyFields.style.display = 'none'; |
| badge.innerText = 'فردي'; |
| } else { |
| document.getElementById('btnCompany').classList.add('active'); |
| document.getElementById('btnIndividual').classList.remove('active'); |
| slider.classList.add('company'); |
| slider.classList.remove('individual'); |
| companyFields.style.display = 'block'; |
| badge.innerText = 'مطور'; |
| } |
| }; |
| |
| |
| window.nextStep = function(step) { |
| document.getElementById(`step${currentStep}`).classList.remove('active'); |
| document.getElementById(`step${step}`).classList.add('active'); |
| |
| document.getElementById(`ind${step}`).classList.add('active'); |
| document.getElementById(`ind${currentStep}`).classList.add('completed'); |
| |
| currentStep = step; |
| updateProgress(); |
| }; |
| |
| window.prevStep = function(step) { |
| document.getElementById(`step${currentStep}`).classList.remove('active'); |
| document.getElementById(`step${step}`).classList.add('active'); |
| |
| document.getElementById(`ind${currentStep}`).classList.remove('active'); |
| document.getElementById(`ind${currentStep}`).classList.remove('completed'); |
| |
| currentStep = step; |
| updateProgress(); |
| }; |
| |
| function updateProgress() { |
| const fill = document.getElementById('progressFill'); |
| if (currentStep === 1) fill.style.width = '0%'; |
| if (currentStep === 2) fill.style.width = '50%'; |
| if (currentStep === 3) fill.style.width = '100%'; |
| } |
| |
| |
| window.toggleAmenity = function(element, name) { |
| element.classList.toggle('active'); |
| if (element.classList.contains('active')) { |
| selectedAmenities.push(name); |
| } else { |
| selectedAmenities = selectedAmenities.filter(a => a !== name); |
| } |
| updatePreview(); |
| }; |
| |
| |
| window.updatePreview = function() { |
| const titleInp = document.getElementById('inpTitle').value; |
| const titleEl = document.getElementById('prevTitle'); |
| titleEl.innerText = titleInp || 'عنوان العقار سيظهر هنا...'; |
| titleEl.style.color = titleInp ? 'var(--text)' : 'var(--muted)'; |
| |
| const price = document.getElementById('inpPrice').value; |
| document.getElementById('prevPrice').innerText = price ? Number(price).toLocaleString() : '---,---'; |
| document.getElementById('prevArea').innerText = document.getElementById('inpArea').value || '--'; |
| document.getElementById('prevLoc').innerText = document.getElementById('inpLocation').value || 'أدخل المنطقة'; |
| document.getElementById('prevBeds').innerText = document.getElementById('inpBeds').value || '-'; |
| document.getElementById('prevBaths').innerText = document.getElementById('inpBaths').value || '-'; |
| |
| const amContainer = document.getElementById('prevAmenities'); |
| amContainer.innerHTML = ''; |
| selectedAmenities.slice(0,3).forEach(am => { |
| amContainer.innerHTML += `<span>${am}</span>`; |
| }); |
| if (selectedAmenities.length > 3) amContainer.innerHTML += `<span>+${selectedAmenities.length - 3}</span>`; |
| }; |
| |
| window.previewImage = function(input) { |
| if (input.files && input.files[0]) { |
| const reader = new FileReader(); |
| reader.onload = function(e) { |
| const img = document.getElementById('prevImg'); |
| img.src = e.target.result; |
| img.style.opacity = '1'; |
| img.style.filter = 'grayscale(0%)'; |
| } |
| reader.readAsDataURL(input.files[0]); |
| } |
| }; |
| |
| |
| window.showToast = function(message, isError = false) { |
| const container = document.getElementById('toastContainer'); |
| const toast = document.createElement('div'); |
| toast.className = 'toast'; |
| toast.innerHTML = `<i class="fa-solid ${isError ? 'fa-triangle-exclamation' : 'fa-check-circle'}" style="color:${isError ? '#ef4444' : 'var(--gold)'}; font-size:18px;"></i> <span>${message}</span>`; |
| container.appendChild(toast); |
| setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 300); }, 4000); |
| }; |
| |
| document.getElementById('addPropertyForm').addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| const btn = document.getElementById('submitBtn'); |
| btn.disabled = true; |
| btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> جاري النشر...'; |
| |
| const formData = new FormData(e.target); |
| const payload = { |
| title: formData.get('title'), |
| description: formData.get('description'), |
| location: formData.get('location'), |
| price: parseFloat(formData.get('price')), |
| area: parseFloat(formData.get('area')), |
| bedrooms: parseInt(formData.get('bedrooms')), |
| bathrooms: parseInt(formData.get('bathrooms')), |
| features: selectedAmenities, |
| role: currentRole |
| }; |
| |
| try { |
| const result = await ingestProperty(payload); |
| if (result) { |
| showToast('تم نشر العقار بنجاح!'); |
| setTimeout(() => { window.location.href = 'explore.html'; }, 2000); |
| } else { |
| showToast('حدث خطأ أثناء الاتصال بالخادم.', true); |
| } |
| } catch (err) { |
| showToast('حدث خطأ غير متوقع.', true); |
| } finally { |
| btn.disabled = false; |
| btn.innerHTML = '<i class="fa-solid fa-cloud-arrow-up"></i> نشر العقار'; |
| } |
| }); |
| |
| </script> |
| </body> |
| </html> |
|
|
