إلى القائمة
linkedinItem.appendChild(linkedinLink);
const socialList = document.querySelector('.store-footer__contacts-row ul');
if (socialList) {
socialList.appendChild(linkedinItem);
}
//===========================
// كود JavaScript لإضافة الصور كـ div ثالث منفصل في الفوتر
//=======================
document.addEventListener('DOMContentLoaded', function() {
addImagesAsNewSection();
});
function addImagesAsNewSection() {
// البحث عن الحاوي الرئيسي للفوتر
const footerContainer = document.querySelector('.store-footer__inner .container.grid');
if (footerContainer && !footerContainer.querySelector('.images-section')) {
// إنشاء div جديد للصور
const imagesDiv = document.createElement('div');
imagesDiv.className = 'images-section';
// إضافة HTML للصور
imagesDiv.innerHTML = `
×
`;
// إضافة CSS للتنسيق
if (!document.querySelector('#images-footer-styles')) {
const style = document.createElement('style');
style.id = 'images-footer-styles';
style.textContent = `
.images-section {
width: 100%;
}
.images-list {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
justify-content: center;
}
.image-item {
display: flex;
align-items: center;
justify-content: center;
}
.image-item a {
display: block;
transition: opacity 0.3s ease, transform 0.3s ease;
cursor: pointer;
}
.image-item a:hover {
opacity: 0.8;
transform: scale(1.05);
}
.image-item img {
max-width: 150px;
height: auto;
display: block;
}
/* Modal Styles */
.certificate-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.certificate-modal-content {
position: relative;
margin: auto;
padding: 20px;
width: 90%;
max-width: 900px;
top: 50%;
transform: translateY(-50%);
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from {
transform: translateY(-50%) scale(0.7);
opacity: 0;
}
to {
transform: translateY(-50%) scale(1);
opacity: 1;
}
}
.certificate-modal-content img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.certificate-close {
position: absolute;
top: -40px;
right: 0;
color: #fff;
font-size: 40px;
font-weight: bold;
cursor: pointer;
transition: color 0.3s ease;
z-index: 10000;
}
.certificate-close:hover,
.certificate-close:focus {
color: #bbb;
}
/* تنسيق متجاوب */
@media (max-width: 1024px) {
.images-section {
margin-top: 1rem;
}
.image-item img {
max-width: 130px;
}
}
@media (max-width: 768px) {
.images-list {
gap: 0.75rem;
}
.image-item img {
max-width: 120px;
}
.certificate-modal-content {
width: 95%;
padding: 10px;
}
.certificate-close {
font-size: 35px;
top: -35px;
}
}
@media (max-width: 480px) {
.image-item img {
max-width: 100px;
}
.certificate-close {
font-size: 30px;
top: -30px;
}
}
`;
document.head.appendChild(style);
}
// البحث عن المكان المناسب للإدراج (بين روابط مهمة وتواصل معنا)
const contactsDiv = footerContainer.querySelector('div:has(salla-contacts)');
const menuDiv = footerContainer.querySelector('div:has(salla-menu)');
if (contactsDiv) {
// إدراج قبل قسم تواصل معنا
contactsDiv.insertAdjacentElement('beforebegin', imagesDiv);
} else if (menuDiv) {
// إدراج بعد قسم روابط مهمة إذا لم نجد تواصل معنا
menuDiv.insertAdjacentElement('afterend', imagesDiv);
} else {
// إدراج في المكان الثاني إذا لم نجد أي منهما
const secondChild = footerContainer.children[1];
if (secondChild) {
secondChild.insertAdjacentElement('afterend', imagesDiv);
} else {
footerContainer.appendChild(imagesDiv);
}
}
// إضافة وظيفة البوب أب
setupCertificateModal();
}
}
function setupCertificateModal() {
const modal = document.getElementById('certificateModal');
const modalImg = document.getElementById('certificateImage');
const closeBtn = document.querySelector('.certificate-close');
const certificateTriggers = document.querySelectorAll('.certificate-trigger');
if (certificateTriggers.length > 0) {
certificateTriggers.forEach(function(trigger) {
trigger.addEventListener('click', function(e) {
e.preventDefault();
const certificateSrc = this.getAttribute('data-certificate');
modal.style.display = 'block';
modalImg.src = certificateSrc;
document.body.style.overflow = 'hidden'; // منع التمرير
});
});
}
if (closeBtn) {
closeBtn.addEventListener('click', function() {
modal.style.display = 'none';
document.body.style.overflow = ''; // إعادة التمرير
});
}
if (modal) {
// إغلاق عند الضغط خارج الصورة
modal.addEventListener('click', function(e) {
if (e.target === modal) {
modal.style.display = 'none';
document.body.style.overflow = '';
}
});
// إغلاق بزر Escape
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && modal.style.display === 'block') {
modal.style.display = 'none';
document.body.style.overflow = '';
}
});
}
}
// محاولات متعددة للتأكد من التحميل
let attempts = 0;
const maxAttempts = 15;
const checkAndAddSection = setInterval(function() {
attempts++;
const footerContainer = document.querySelector('.store-footer__inner .container.grid');
if (footerContainer && !footerContainer.querySelector('.images-section')) {
addImagesAsNewSection();
clearInterval(checkAndAddSection);
} else if (attempts >= maxAttempts) {
clearInterval(checkAndAddSection);
}
}, 1000);
// استخدام MutationObserver للمراقبة الأكثر كفاءة
if (typeof MutationObserver !== 'undefined') {
const footerObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1) { // Element node
// التحقق من وجود الفوتر أو أي من عناصره
if (node.classList?.contains('store-footer') ||
node.querySelector('.store-footer') ||
node.classList?.contains('container') ||
node.querySelector('.container.grid')) {
setTimeout(addImagesAsNewSection, 200);
}
}
});
}
});
});
// بدء المراقبة
footerObserver.observe(document.body, {
childList: true,
subtree: true
});
// إيقاف المراقبة بعد 30 ثانية لتوفير الموارد
setTimeout(function() {
footerObserver.disconnect();
}, 30000);
}
