تعبئة اتصالات المغرب

/* ------------------------------------------------ */ /* 1. تنسيقات اتصالات المغرب (IAM) - تصميم شفاف وعصري */ /* ------------------------------------------------ */ :root { --iam-primary: #0055A5; /* الأزرق الخاص بإتصالات المغرب */ --iam-hover: #003d7a; --iam-bg-light: rgba(255, 255, 255, 0.05); /* خلفية شفافة للصور */ }

.iam-products-wrapper * { box-sizing: border-box; font-family: 'Cairo', sans-serif !important; }

.iam-products-wrapper { padding: 10px 20px 90px 20px; max-width: 1200px; margin: 0 auto; direction: rtl; /* النصوص ترث لون القالب (أسود في النهاري / أبيض في الليلي) */ color: inherit; }

/* ------------------------------------------------ */ /* 2. الهيدر والشبكة */ /* ------------------------------------------------ */ .product-header { text-align: center; margin-bottom: 40px; position: relative !important; } .product-header h2 { font-size: 2rem; font-weight: 800; color: var(--iam-primary); /* العنوان بالأزرق */ margin-bottom: 10px; } .product-header p { font-size: 1.1rem; opacity: 0.9; }

.products-grid { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }

.product-card { /* خلفية شفافة بالكامل */ background-color: transparent; /* حدود خفيفة جداً */ border: 1px solid rgba(128, 128, 128, 0.2); border-radius: 12px; overflow: hidden; padding: 15px; text-align: center; transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s; flex-grow: 1; position: relative; min-width: 200px; max-width: calc(25% - 12px); color: inherit; }

.product-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); transform: translateY(-5px); border-color: var(--iam-primary); }

/* الصور */ .product-image { width: 100%; height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 10px; background-color: var(--iam-bg-light); border-radius: 8px; padding: 10px; } .product-image img { max-width: 80%; max-height: 60px; object-fit: contain; margin-bottom: 5px; } .logo-title { font-size: 0.8em; font-weight: 600; color: var(--iam-primary); }

/* النصوص */ .product-title { font-size: 1.2rem; font-weight: 700; color: var(--iam-primary); margin-bottom: 5px; } .product-description { font-size: 0.95em; min-height: 38px; opacity: 0.8; margin-bottom: 10px; display: block; color: inherit; }

/* ------------------------------------------------ */ /* 3. حقول الإدخال */ /* ------------------------------------------------ */ .input-control { margin-bottom: 15px; } .input-control label { display: block; font-size: 0.9em; font-weight: 600; margin-bottom: 5px; opacity: 0.9; color: inherit; }

.amount-input, .phone-input { width: 100%; padding: 8px; text-align: center; border: 2px solid rgba(128, 128, 128, 0.3); border-radius: 6px; font-size: 1.2em; font-weight: 700; color: #333; /* لون النص داكن للقراءة */ background-color: rgba(255, 255, 255, 0.9); /* خلفية شبه بيضاء */ transition: border-color 0.3s; } .dark-mode .amount-input, .dark-mode .phone-input { background-color: #e0e0e0; color: #000; } .amount-input:focus, .phone-input:focus { border-color: var(--iam-primary); outline: none; } .amount-input::-webkit-outer-spin-button, .amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .amount-input[type=number] { -moz-appearance: textfield; }

/* زر الإضافة */ .add-to-cart-btn { background-color: var(--iam-primary); color: white; border: none; padding: 10px 20px; border-radius: 25px; font-size: 1.1em; font-weight: 700; cursor: pointer; width: 100%; transition: background-color 0.3s, transform 0.2s; } .add-to-cart-btn:hover { background-color: var(--iam-hover); }

/* ------------------------------------------------ */ /* 4. التنبيهات (نمط موحد أخضر) */ /* ------------------------------------------------ */ .custom-toast-container { position: fixed; top: 30px; left: 50%; transform: translateX(-50%); z-index: 999999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast-message { background-color: #2ecc71; color: #ffffff; padding: 12px 24px; border-radius: 50px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 12px; min-width: 300px; max-width: 90vw; font-size: 15px; font-weight: 700; opacity: 0; transform: translateY(-20px); animation: slideDownFade 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; pointer-events: auto; border: 1px solid rgba(255,255,255,0.2); } .toast-message.error-toast { background-color: #27ae60; } .toast-icon { width: 24px; height: 24px; flex-shrink: 0; fill: #ffffff; }

@keyframes slideDownFade { to { opacity: 1; transform: translateY(0); } } .toast-message.hiding { animation: slideUpFadeOut 0.3s forwards; } @keyframes slideUpFadeOut { to { opacity: 0; transform: translateY(-20px); } }

/* ------------------------------------------------ */ /* 5. حركة الطيران */ /* ------------------------------------------------ */ @keyframes flyToCart { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.1); } } .flying-to-cart { position: fixed; z-index: 10000; pointer-events: none; animation: flyToCart 0.8s forwards cubic-bezier(0.4, 0.0, 1, 1); border: 2px solid var(--iam-primary); border-radius: 50%; }

@media (max-width: 992px) { .product-card { max-width: calc(33.33% - 10px); } } @media (max-width: 650px) { .product-card { max-width: calc(50% - 7.5px); } .products-grid { gap: 15px; } } @media (max-width: 400px) { .product-card { max-width: 100%; } }

خدمات تعبئة اتصالات المغرب (IAM) حدد المبلغ ورقم الهاتف الذي تريد شحنه (الحد الأدنى 20 درهم).

رصيد عادي Recharge Normal تعبئة الرصيد الأساسي (مكالمات دون إنترنت).

المبلغ (د.م) رقم الهاتف (06/07) إضافة إلى السلة

Pass SMS *1 Pass SMS *1 عرض الرسائل القصيرة SMS فقط.

المبلغ (د.م) رقم الهاتف (06/07) إضافة إلى السلة

Pass *2 Pass national et internet *2 عرض يجمع بين المكالمات الوطنية والإنترنت. المبلغ (د.م) رقم الهاتف (06/07) إضافة إلى السلة

Internet *3 Pass internet *3 عرض مخصص للإنترنت (Data) فقط. المبلغ (د.م) رقم الهاتف (06/07) إضافة إلى السلة

International *4 Pass national et international *4 للمكالمات الوطنية والدولية المخفضة. المبلغ (د.م) رقم الهاتف (06/07) إضافة إلى السلة Tout en un *5 Pass tout en un *5 رصيد شامل (مكالمات، إنترنت، رسائل). المبلغ (د.م) رقم الهاتف (06/07) إضافة إلى السلة

Pass Social *6 Pass réseaux sociaux *6 تصفح مواقع التواصل الاجتماعي (فيسبوك، انستاغرام..). المبلغ (د.م) رقم الهاتف (06/07) إضافة إلى السلة

Pass Premium *9 Pass premium *9 عروض مميزة وساعات إضافية (عرض خاص). المبلغ (د.م) رقم الهاتف (06/07) إضافة إلى السلة

//<![CDATA[

// ------------------------------------------------------------------ // ملاحظة هامة: تم تغيير أسماء الدوال لـ IAM لتجنب التعارض // وتم إزالة تعريف الثوابت (const) التي كانت تسبب المشكلة // ------------------------------------------------------------------

function showToastIAM(message, type = 'success') { let container = document.querySelector('.custom-toast-container'); if (!container) { container = document.createElement('div'); container.className = 'custom-toast-container'; document.body.appendChild(container); }

const toast = document.createElement('div'); toast.className = `toast-message ${type === 'error' ? 'error-toast' : ''}`; let iconPath = 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'; if (type === 'error') { iconPath = 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'; }

toast.innerHTML = ` ${message} `;

container.appendChild(toast);

setTimeout(() => { toast.classList.add('hiding'); toast.addEventListener('animationend', () => { if(toast.parentElement) toast.remove(); }); }, 4000); }

// دالة خاصة بصفحة IAM window.addToCartIAM = function(button) { const card = button.closest('.product-card'); const productId = card.getAttribute('data-product-id'); const productName = card.getAttribute('data-product-name'); const amountInput = card.querySelector('.amount-input'); const productPrice = parseFloat(amountInput.value); const phoneInput = card.querySelector('.phone-input'); const productPhone = phoneInput.value.trim();

// التحقق if (isNaN(productPrice) || productPrice <= 0) { showToastIAM('يرجى تحديد مبلغ صحيح للشحن.', 'error'); return; } // الحد الأدنى 20 درهم if (productPrice < 20) { showToastIAM('عذراً، أقل مبلغ يمكن شحنه هو 20 درهم.', 'error'); return; }

try { // نستخدم المفتاح 'ta3biaCart' مباشرة لتجنب تكرار التعريف let cart = JSON.parse(localStorage.getItem('ta3biaCart')) || []; cart.push(itemToAdd); localStorage.setItem('ta3biaCart', JSON.stringify(cart)); window.dispatchEvent(new Event('cartUpdated')); flyToCartIAM(card); showToastIAM('تمت الإضافة إلى السلة بنجاح'); phoneInput.value = ''; } catch (e) { showToastIAM('حدث خطأ أثناء الحفظ.', 'error'); console.error(e); } };

function flyToCartIAM(card) { const cartButton = document.getElementById('open-central-cart-btn'); if (!cartButton) return;

const flyingEl = card.cloneNode(true); flyingEl.classList.add('flying-to-cart'); document.body.appendChild(flyingEl); const cardRect = card.getBoundingClientRect(); flyingEl.style.left = cardRect.left + 'px'; flyingEl.style.top = cardRect.top + 'px'; flyingEl.style.width = cardRect.width + 'px';

const cartRect = cartButton.getBoundingClientRect();

const dx = (cartRect.left + (cartRect.width / 2)) - (cardRect.left + (cardRect.width / 2)); const dy = (cartRect.top + (cartRect.height / 2)) - (cardRect.top + (cardRect.height / 2)); flyingEl.style.setProperty('--dx', dx + 'px'); flyingEl.style.setProperty('--dy', dy + 'px');

flyingEl.addEventListener('animationend', () => { flyingEl.remove(); }); } //]]>

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

تنبيه هام!

تعبئة اتصالات المغرب