/* Add custom Js styles below */ (function() { // ننتظر حتى يتم تحميل الصفحة بالكامل document.addEventListener('DOMContentLoaded', function() { const buttonId = 'custom-floating-whatsapp-btn-v3'; // تغيير الـ ID لتجنب التعارض if (document.getElementById(buttonId)) { console.log('زر الواتساب المخصص (متقدم) موجود بالفعل.'); return; } // --- إعدادات الرابط --- const phoneNumber = '966530270400'; const defaultMessage = 'السلام عليكم،'; // رسالتك المسبقة // يمكنك إضافة "علامة تتبع" هنا إذا أردت، مثال: // const trackingInfo = 'مصدر:متجر_سلة'; // const fullMessage = `${defaultMessage} (ref: ${trackingInfo})`; // const encodedMessage = encodeURIComponent(fullMessage); const encodedMessage = encodeURIComponent(defaultMessage); // استخدم هذا إذا لم تضف trackingInfo // --- إنشاء العناصر --- const floatingLink = document.createElement('a'); floatingLink.id = buttonId; floatingLink.href = `https://wa.me/${phoneNumber}?text=${encodedMessage}`; floatingLink.target = '_blank'; floatingLink.setAttribute('aria-label', 'تواصل معنا عبر واتساب'); const iconImage = document.createElement('img'); iconImage.src = 'https://protasmim.com/wp-content/uploads/2025/05/whatsapp.png'; iconImage.alt = 'أيقونة واتساب'; // --- أنماط الأيقونة (بما في ذلك القلب الأفقي) --- iconImage.style.width = '100%'; iconImage.style.height = '100%'; iconImage.style.display = 'block'; iconImage.style.transform = 'scaleX(-1)'; // لقلب الأيقونة أفقيًا floatingLink.appendChild(iconImage); // --- أنماط الرابط/الزر الأساسية (بما في ذلك الرفع) --- floatingLink.style.position = 'fixed'; // رفع الأيقونة: 30px (أساسي) + 20px (الرفع المطلوب) = 50px floatingLink.style.bottom = '60px'; // (30px الأصلي + 20px للرفع) floatingLink.style.right = '30px'; floatingLink.style.width = '45px'; // الحجم الافتراضي (للديسكتوب) floatingLink.style.height = '45px'; // الحجم الافتراضي (للديسكتوب) floatingLink.style.backgroundColor = 'transparent'; floatingLink.style.borderRadius = '50%'; floatingLink.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)'; floatingLink.style.zIndex = '10000'; floatingLink.style.cursor = 'pointer'; floatingLink.style.transition = 'transform 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out'; // إضافة width/height للانتقال // تأثيرات عند مرور الفأرة (hover) floatingLink.onmouseover = function() { this.style.transform = 'scale(1.1)'; }; floatingLink.onmouseout = function() { this.style.transform = 'scale(1)'; }; // --- إضافة الزر إلى الصفحة --- document.body.appendChild(floatingLink); // --- تطبيق أنماط الموبايل باستخدام Media Query عبر JavaScript --- // سننشئ وسم