بيع التعبئة

/* ----------------------------------------------------- */ /* 1. المتغيرات والألوان */ /* ----------------------------------------------------- */ :root { /* الألوان الأساسية */ --primary-color: #673ab7; --primary-light: #d6c6f7; --primary-dark: #522d99; /* الوضع النهاري */ --border-light: #e0e0e0; --page-bg: transparent; --card-bg: transparent; --modal-input-bg: transparent; --header-bg-light: #e6e0f7; --header-border-light: #a48de7; --header-text-dark: #3a255c; --warning-bg: #fff3cd; --warning-text: #856404; --info-bg: #d1ecf1; --info-text: #0c5460; --file-icon-color: #777; --min-notice-color: #522d99; /* لون إبراز الحد الأدنى */ --input-text-color: var(--text-dark); /* نصوص الحقول ديناميكي */ }

/* ----------------------------------------------------- */ /* 2. الوضع الليلي - الألوان الداكنة */ /* ----------------------------------------------------- */ .dark-mode { --text-dark: #e4e6eb; --border-light: #555; --page-bg: transparent; --card-bg: transparent; --modal-input-bg: transparent; --info-bg: #1a4f59; --info-text: #96c4cc; --warning-bg: #4e4e3b; --warning-text: #ffeb83; --file-icon-color: #e4e6eb; --min-notice-color: #ffeb83; /* لون إبراز الحد الأدنى في الوضع الليلي */ --input-text-color: #e4e6eb; /* نصوص الحقول في الوضع الليلي */ }

/* التنسيق الجديد لإبراز الرقم فقط في الوضع الليلي */ .dark-mode .min-notice-highlight .highlighted-value { color: #ffeb83; }

/* ----------------------------------------------------- */ /* 3. التنسيق العام والصفحة الرئيسية */ /* ----------------------------------------------------- */ #recharge-sell-page-wrapper * { font-family:'Cairo',sans-serif; box-sizing:border-box; color: var(--text-dark); /* نصوص عامة ديناميكية */ } #recharge-sell-page-wrapper { padding:20px 10px; margin:-20px -10px; background-color: var(--page-bg); }

.sell-page-container { max-width:800px; margin:2rem auto; padding:25px; border-radius:16px; box-shadow:0 8px 25px rgba(0,0,0,.08); background-color: var(--card-bg); } .dark-mode .sell-page-container { box-shadow: none; }

.page-header { text-align:center; margin-bottom:30px; padding:20px 15px; background-color: var(--header-bg-light); border-radius:12px; border:1px solid var(--header-border-light); } .page-header h2 { color:var(--header-text-dark); margin-bottom:8px; font-size:26px; font-weight:800; } .page-header p { font-size:16px; color:var(--header-text-dark); margin:0; }

/* نموذج بيع التعبئة */ #sellingForm { padding: 20px; background-color: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-light); }

/* مجموعات النماذج */ .form-group { margin-bottom:18px } .form-group label { font-size:14px; margin-bottom:6px; display:block; font-weight:600; color:var(--text-dark); } .form-group input, .form-group select { padding:10px 12px; font-size:15px; width:100%; border-radius:8px; background-color: var(--modal-input-bg); border:1px solid var(--border-light); color: var(--input-text-color); transition: border-color 0.2s, color 0.2s; }

/* الحقول المطلوبة بلون ثابت (النصوص تتغير مع الوضع) */ #fullName, #ribAccountNumber { background-color: transparent; color: var(--input-text-color); }

/* عند التركيز */ .form-group input:focus, .form-group select:focus { border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(103, 58, 183,.15); outline:none; }

/* زر الإرسال */ .submit-btn { padding:12px 20px; font-size:16px; border:none; width:100%; border-radius:8px; background-color:var(--primary-color); color:#fff; cursor:pointer; transition: background-color 0.2s, transform 0.2s; } .submit-btn:hover:not(:disabled) { background-color:var(--primary-dark); transform: translateY(-2px); } .submit-btn:disabled { background-color:#6c757d; cursor:not-allowed; }

/* إشعار الحد الأدنى */ .min-notice-highlight { display: block; font-weight: 700; font-size: 1em; color: var(--min-notice-color); margin-top: 5px; }

/* التنسيق الجديد لإبراز الرقم فقط */ .min-notice-highlight .highlighted-value { font-size: 1.2em; font-weight: 900; color: var(--primary-dark); }

/* تصميم أيقونات البنوك */ .bank-selection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; margin-bottom: 18px; } .bank-option { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 5px; border: 2px solid var(--border-light); border-radius: 8px; cursor: pointer; background-color: var(--card-bg); color: var(--input-text-color); transition: all 0.2s; } .bank-option.selected { border-color: var(--primary-color); background-color: var(--primary-light); box-shadow: 0 0 0 1px var(--primary-color); } .dark-mode .bank-option.selected { background-color: #3a255c; } .bank-logo-container img { max-height: 100%; max-width: 100%; object-fit: contain; } .bank-option span { font-size: 13px; font-weight: 600; line-height: 1.2; color: inherit; text-align: center; }

/* زر رفع الصورة */ .file-upload-wrapper { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: 8px; background-color: var(--modal-input-bg); cursor: pointer; transition: border-color 0.2s; } .file-upload-wrapper:hover { border-color: var(--primary-color); } .file-upload-wrapper input[type="file"] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit; } .file-upload-display { flex-grow: 1; color: var(--input-text-color); font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 10px; } .upload-icon-box { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background-color: var(--primary-light); } .upload-icon { width: 20px; height: 20px; fill: var(--primary-dark); } .dark-mode .upload-icon-box { background-color: var(--primary-dark); } .dark-mode .upload-icon { fill: var(--text-dark); }

/* التنبيهات */ .alert { padding: 15px; border-radius: 8px; margin-bottom: 20px; font-size: 15px; font-weight: 600; } .alert-info { background-color: var(--info-bg); color: var(--info-text); border: 1px solid #96c4cc; } .alert-warning { background-color: var(--warning-bg); color: var(--warning-text); border: 1px solid #ffeeba; }

/* زر واتساب */ .whatsapp-btn-info { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; font-size: 14px; border: none; border-radius: 6px; background-color: #25D366; color: #fff; text-align: center; text-decoration: none; cursor: pointer; margin-top: 10px; } .whatsapp-btn-info:hover { background-color: #128C7E; } .whatsapp-icon { width: 20px; height: 20px; fill: white; }

/* رسالة النجاح بعد الإرسال */ .success-modal .modal-content { background-color: #2b2b2b; /* غامق */ color: #fff; /* نصوص واضحة */ } .success-modal .modal-content button { background-color: var(--primary-color); color: #fff; }

💰 نموذج بيع التعبئة املأ النموذج أدناه لبيع بطاقات التعبئة الفائضة لديك مقابل تحويل مالي فوري.

معلومات التعبئة المراد بيعها نوع التعبئة -- اختر نوع التعبئة -- Inwi Orange إتصالات المغرب (IAM)

قيمة بطاقة التعبئة (بالدرهم)

⚠️ **تنبيه:** قيمة التعبئة ** درهم** تتطلب تواصلاً مباشراً لإتمام البيع. اضغط للتواصل الآن.

<path d="M12 2C6.48 2 2 6.48 2 12c0 3.32 1.58 6.3 4.05 8.24l-.26.97-1.02 3.69 3.8-.97c1.76.48 3.65.74 5.5.74 5.52 0 10-4.48 10-10S17.52 2 12 2zm3.83 14.12c-.2.2-.4.3-.64.38-.24.08-.5.12-.76.12-.26 0-.52-.04-.76-.12-.24-.08-.44-.18-.64-.38l-.66-.64c-.2-.2-.4-.3-.64-.38s-.5-.12-.76-.12c-.26 0-.52.04-.76.12-.24.08-.44.18-.64.38l-.66.64c-.2.2-.4.3-.64.38s-.5.12-.76.12c-.26 0-.52-.04-.76-.12-.24-.08-.44-.18-.64-.38l-.66-.64c-.2-.2-.4-.3-.64-.38s-.5-.12-.76-.12c-.26 0-.52.04-.76.12-.24.08-.44.18-.64.38l-1.01 1.01c-.3.3-.66.45-1.09.45-.43 0-.8-.15-1.12-.45-.3-.3-.45-.66-.45-1.09 0-.43.15-.8.45-1.12l.66-.64c.2-.2.4-.3.64-.38s.5-.12.76-.12c.26 0 .52.04.76.12.24.08.44.18.64.38l.66.64c.2.2.4.3.64.38s.5.12.76.12c-.26 0-.52.04-.76.12.24.08.44.18.64.38l.66-.64c-.2-.2-.4-.3-.64-.38s-.5-.12-.76-.12c-.26 0-.52.04-.76.12.24.08.44.18.64.38l1.01 1.01c.3.3.66.45 1.09.45.43 0 .8-.15 1.12-.45.3-.3.45-.66.45-1.09 0-.43-.15-.8-.45-1.12z"/> تواصل معنا عبر الواتساب

يجب أن تكون قيمة التعبئة **50 درهم** كحد أدنى لـ Inwi.

معلومات الدفع الخاصة بك

طريقة استلام المال (اختر البنك)

الاسم الكامل (كما في حسابك البنكي)

رقم الحساب:

صورة بطاقة التعبئة المراد بيعها اضغط لاختيار صورة الوصل

إرسال طلب البيع والتحويل

تم بنجاح! تم استلام طلب بيع التعبئة بنجاح. سنقوم بمراجعته وإرسال التحويل المالي إليك في أقرب وقت ممكن.

إغلاق

/* 1. بناء شبكة البنوك */ function buildBankGrid() { bankGrid.innerHTML = ''; Object.keys(BANKS_DATA).forEach(bankName => { const data = BANKS_DATA[bankName]; const div = document.createElement('div'); div.className = 'bank-option'; div.setAttribute('data-bank', bankName); div.innerHTML = ` ${bankName} `; div.addEventListener('click', () => selectBank(bankName)); bankGrid.appendChild(div); }); } buildBankGrid();

/* 2. اختيار البنك */ function selectBank(bankName) { document.querySelectorAll('.bank-option').forEach(el => el.classList.remove('selected')); document.querySelector(`[data-bank="${bankName}"]`).classList.add('selected');

selectedBankInput.value = bankName; const accountType = BANKS_DATA[bankName].type; ribAccountNumberLabel.textContent = accountType === 'RIB' ? 'رقم RIB (24 رقم):' : 'رقم الحساب:'; ribAccountNumberInput.placeholder = accountType === 'RIB' ? 'أدخل رقم RIB (مطلوب لـ ' + bankName + ')' : 'أدخل رقم الحساب (مطلوب لـ ' + bankName + ')'; ribAccountNumberInput.value = ''; }

/* 3. التحقق من القيم */ function checkFormRules() { const operator = rechargeType.value; const value = parseInt(rechargeValue.value) || 0;

minimumAlert.style.display = 'none'; whatsappNotice.style.display = 'none'; submitBtn.disabled = false; rechargeValue.placeholder = 'يرجى إدخال القيمة'; minNotice.textContent = ''; rechargeValue.min = 1;

// ستايل الرقم والعملة (أخضر فاتح ساطع وخط عريض) // تم تغيير الكود هنا من الأحمر إلى الأخضر const highlightStyle = 'color: #1cc93b; font-size: 19px; font-weight: 800;';

if (operator === 'Inwi') { rechargeValue.min = 50; // النص سيظهر بالأخضر الآن minNotice.innerHTML = `الحد الأدنى للبيع: 50 درهم .`; if (value > 0 && value < 50) { alertMessage.innerHTML = `❌ **خطأ:** قيمة التعبئة **${value} درهم** أقل من الحد الأدنى (50 درهم).`; minimumAlert.style.display = 'block'; submitBtn.disabled = true; } } else if (operator === 'Orange') { rechargeValue.min = 500; // النص سيظهر بالأخضر الآن minNotice.innerHTML = `الحد الأدنى للنموذج: 500 درهم .`; if (value > 0 && value < 500) { whatsappValueNotice.textContent = value; whatsappNotice.style.display = 'block'; const message = encodeURIComponent(`مرحبا - أرغب في بيع تعبئة Orange بقيمة ${value} درهم. يرجى إرشادي.`); whatsappLinkNotice.href = `https://wa.me/${WHATSAPP_NUMBER}?text=${message}`; submitBtn.disabled = true; } } else if (operator === 'IAM') { rechargeValue.min = 500; // النص سيظهر بالأخضر الآن minNotice.innerHTML = `الحد الأدنى للبيع: 500 درهم .`; if (value > 0 && value < 500) { alertMessage.innerHTML = `❌ **خطأ:** قيمة تعبئة اتصالات المغرب يجب أن تكون **500 درهم** أو أكثر.`; minimumAlert.style.display = 'block'; submitBtn.disabled = true; } } } rechargeType.addEventListener('change', checkFormRules); rechargeValue.addEventListener('input', checkFormRules); rechargeValue.addEventListener('change', checkFormRules);

/* 4. عرض اسم الملف */ rechargeProofInput.addEventListener('change', function() { fileDisplay.textContent = this.files.length > 0 ? this.files[0].name : 'اضغط لاختيار صورة الوصل'; });

/* 5. إرسال البيانات إلى تيليجرام */ form.addEventListener('submit', async function(e) { e.preventDefault(); const operator = rechargeType.value; const value = parseInt(rechargeValue.value) || 0;

if ((operator === 'Inwi' && value < 50) || (operator === 'IAM' && value < 500) || (operator === 'Orange' && value < 500)) { alert('الرجاء تعديل قيمة التعبئة وفق الحد الأدنى أو استخدام واتساب للـOrange أقل من 500.'); return; }

if (!form.checkValidity() || !selectedBankInput.value) { alert('الرجاء ملء جميع الحقول المطلوبة واختيار البنك.'); return; }

submitBtn.disabled = true; submitBtn.textContent = 'جار الإرسال...';

const file = rechargeProofInput.files[0]; const bankName = selectedBankInput.value; const fullName = document.getElementById('fullName').value; const ribAccountNumber = ribAccountNumberInput.value; const accountType = BANKS_DATA[bankName].type;

if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.description || 'فشل إرسال البيانات إلى تيليجرام.'); }

form.reset(); fileDisplay.textContent = 'اضغط لاختيار صورة الوصل'; document.querySelectorAll('.bank-option').forEach(el => el.classList.remove('selected')); checkFormRules();

// عرض رسالة النجاح successModal.style.display = 'flex'; } catch (error) { alert(`❌ حدث خطأ: ${error.message}`); console.error(error); } finally { submitBtn.disabled = false; submitBtn.textContent = 'إرسال طلب البيع والتحويل'; } });

/* 6. زر رسالة النجاح ينقل للواجهة الرئيسية */ successModal.addEventListener('click', function(event) { if (event.target === successModal || event.target.tagName === 'BUTTON') { window.location.href = '/'; // رابط الصفحة الرئيسية } });

});

محتويات السلة

تنبيه هام!

بيع التعبئة

💰 نموذج بيع التعبئة

معلومات التعبئة المراد بيعها

معلومات الدفع الخاصة بك

تم بنجاح!