`); printWindow.document.close(); printWindow.print(); } // حفظ الشعار كفيديو (محاكاة) function saveLogoAsVideo() { recordingIndicator.classList.add('active'); // محاكاة عملية التسجيل setTimeout(() => { recordingIndicator.classList.remove('active'); alert('تم حفظ الفيديو بنجاح! (هذه محاكاة - في التطبيق الحقيقي سيتم حفظ الفيديو فعليًا)'); }, 2000); } // إعادة تعيين الشعار إلى الإعدادات الافتراضية function resetLogo() { currentLogo = { text: 'شعارك', font: 'Cairo', fontSize: 48, textColor: '#000000', bgColor: '#ffffff', animation: 'none', template: 'simple', icon: 'none', customIcon: null, filters: { brightness: 100, contrast: 100, saturation: 100, blur: 0 } }; // تحديث واجهة المستخدم logoTextInput.value = currentLogo.text; fontSizeSlider.value = currentLogo.fontSize; fontSizeValue.textContent = `${currentLogo.fontSize}px`; brightnessSlider.value = currentLogo.filters.brightness; contrastSlider.value = currentLogo.filters.contrast; saturationSlider.value = currentLogo.filters.saturation; blurSlider.value = currentLogo.filters.blur; brightnessValue.textContent = `${currentLogo.filters.brightness}%`; contrastValue.textContent = `${currentLogo.filters.contrast}%`; saturationValue.textContent = `${currentLogo.filters.saturation}%`; blurValue.textContent = `${currentLogo.filters.blur}px`; // تحديث الأزرار النشطة document.querySelectorAll('.color-option.active').forEach(el => el.classList.remove('active')); document.querySelector(`.color-option[data-color="${currentLogo.textColor}"]`).classList.add('active'); document.querySelector(`.color-option[data-color="${currentLogo.bgColor}"]`).classList.add('active'); document.querySelectorAll('.font-option.active').forEach(el => el.classList.remove('active')); document.querySelector(`.font-option[data-font="${currentLogo.font}"]`).classList.add('active'); document.querySelectorAll('.animation-btn.active').forEach(el => el.classList.remove('active')); document.querySelector(`.animation-btn[data-animation="${currentLogo.animation}"]`).classList.add('active'); document.querySelectorAll('.template.active').forEach(el => el.classList.remove('active')); document.querySelector(`.template[data-template="${currentLogo.template}"]`).classList.add('active'); document.querySelectorAll('.icon-option.active').forEach(el => el.classList.remove('active')); document.querySelector(`.icon-option[data-icon="none"]`).classList.add('active'); // إعادة تعيين معاينة الأيقونة المخصصة customIconPreview.innerHTML = 'معاينة الأيقونة'; // إعادة رسم الشعار drawLogo(); applyAnimation(); } // إعادة تعيين الفلاتر function resetFilters() { currentLogo.filters = { brightness: 100, contrast: 100, saturation: 100, blur: 0 }; brightnessSlider.value = currentLogo.filters.brightness; contrastSlider.value = currentLogo.filters.contrast; saturationSlider.value = currentLogo.filters.saturation; blurSlider.value = currentLogo.filters.blur; brightnessValue.textContent = `${currentLogo.filters.brightness}%`; contrastValue.textContent = `${currentLogo.filters.contrast}%`; saturationValue.textContent = `${currentLogo.filters.saturation}%`; blurValue.textContent = `${currentLogo.filters.blur}px`; drawLogo(); } // فتح نافذة المعاينة function openPreview() { previewImage.src = canvas.toDataURL('image/png'); previewModal.style.display = 'flex'; } // إغلاق نافذة المعاينة function closePreview() { previewModal.style.display = 'none'; } // مسح سجل الشعارات function clearHistory() { logoHistory = []; localStorage.setItem('logoHistory', JSON.stringify(logoHistory)); renderHistory(); } // معالجة رفع الأيقونة المخصصة function handleCustomIconUpload(event) { const file = event.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(e) { const img = new Image(); img.onload = function() { currentLogo.customIcon = img; currentLogo.icon = 'none'; // إلغاء اختيار الأيقونة الافتراضية // تحديث الأيقونات النشطة document.querySelectorAll('.icon-option.active').forEach(el => { el.classList.remove('active'); }); // عرض معاينة الأيقونة customIconPreview.innerHTML = ''; const previewImg = document.createElement('img'); previewImg.src = e.target.result; customIconPreview.appendChild(previewImg); drawLogo(); }; img.src = e.target.result; }; reader.readAsDataURL(file); } // إظهار المزيد من الألوان function showMoreColors(type) { const colorPicker = type === 'text' ? textColorPicker : bgColorPicker; const currentColor = type === 'text' ? currentLogo.textColor : currentLogo.bgColor; colorPicker.innerHTML = ''; [...basicColors, ...additionalColors].forEach(color => { const colorElement = document.createElement('div'); colorElement.className = `color-option ${color === currentColor ? 'active' : ''}`; colorElement.style.backgroundColor = color; colorElement.setAttribute('data-color', color); colorPicker.appendChild(colorElement); }); // تحديث حدث النقر على الألوان const colorOptions = colorPicker.querySelectorAll('.color-option'); colorOptions.forEach(option => { option.addEventListener('click', function() { colorOptions.forEach(el => el.classList.remove('active')); this.classList.add('active'); if (type === 'text') { currentLogo.textColor = this.dataset.color; } else { currentLogo.bgColor = this.dataset.color; } drawLogo(); }); }); } // استماع للأحداث // تغيير نص الشعار logoTextInput.addEventListener('input', function() { currentLogo.text = this.value || 'شعارك'; drawLogo(); }); // تغيير حجم الخط fontSizeSlider.addEventListener('input', function() { currentLogo.fontSize = parseInt(this.value); fontSizeValue.textContent = `${this.value}px`; drawLogo(); }); // تغيير لون النص textColorPicker.addEventListener('click', function(e) { if (e.target.classList.contains('color-option')) { document.querySelectorAll('#text-color-picker .color-option.active').forEach(el => { el.classList.remove('active'); }); e.target.classList.add('active'); currentLogo.textColor = e.target.dataset.color; drawLogo(); } }); // تغيير لون الخلفية bgColorPicker.addEventListener('click', function(e) { if (e.target.classList.contains('color-option')) { document.querySelectorAll('#bg-color-picker .color-option.active').forEach(el => { el.classList.remove('active'); }); e.target.classList.add('active'); currentLogo.bgColor = e.target.dataset.color; drawLogo(); } }); // تغيير الخط fontOptions.forEach(option => { option.addEventListener('click', function() { document.querySelectorAll('.font-option.active').forEach(el => { el.classList.remove('active'); }); this.classList.add('active'); currentLogo.font = this.dataset.font; drawLogo(); }); }); // تغيير الحركة animationButtons.forEach(button => { button.addEventListener('click', function() { document.querySelectorAll('.animation-btn.active').forEach(el => { el.classList.remove('active'); }); this.classList.add('active'); currentLogo.animation = this.dataset.animation; applyAnimation(); }); }); // تغيير القالب templates.forEach(template => { template.addEventListener('click', function() { document.querySelectorAll('.template.active').forEach(el => { el.classList.remove('active'); }); this.classList.add('active'); currentLogo.template = this.dataset.template; drawLogo(); }); }); // تغيير الأيقونة document.addEventListener('click', function(e) { if (e.target.closest('.icon-option')) { const iconOption = e.target.closest('.icon-option'); document.querySelectorAll('.icon-option.active').forEach(el => { el.classList.remove('active'); }); iconOption.classList.add('active'); currentLogo.icon = iconOption.dataset.icon; currentLogo.customIcon = null; // إزالة الأيقونة المخصصة عند اختيار أيقونة افتراضية drawLogo(); } }); // تغيير الفلاتر brightnessSlider.addEventListener('input', function() { currentLogo.filters.brightness = parseInt(this.value); brightnessValue.textContent = `${this.value}%`; drawLogo(); }); contrastSlider.addEventListener('input', function() { currentLogo.filters.contrast = parseInt(this.value); contrastValue.textContent = `${this.value}%`; drawLogo(); }); saturationSlider.addEventListener('input', function() { currentLogo.filters.saturation = parseInt(this.value); saturationValue.textContent = `${this.value}%`; drawLogo(); }); blurSlider.addEventListener('input', function() { currentLogo.filters.blur = parseInt(this.value); blurValue.textContent = `${this.value}px`; drawLogo(); }); // الأزرار الرئيسية saveBtn.addEventListener('click', saveLogo); printBtn.addEventListener('click', printLogo); saveVideoBtn.addEventListener('click', saveLogoAsVideo); resetBtn.addEventListener('click', resetLogo); clearHistoryBtn.addEventListener('click', clearHistory); resetFiltersBtn.addEventListener('click', resetFilters); // فتح نافذة المعاينة عند النقر على الشعار logoPreview.addEventListener('click', openPreview); // أحداث نافذة المعاينة previewClose.addEventListener('click', closePreview); previewSaveBtn.addEventListener('click', saveLogo); previewPrintBtn.addEventListener('click', printLogo); previewSaveVideoBtn.addEventListener('click', saveLogoAsVideo); // إغلاق نافذة المعاينة عند النقر خارجها previewModal.addEventListener('click', function(e) { if (e.target === previewModal) { closePreview(); } }); // رفع الأيقونة المخصصة customIconInput.addEventListener('change', handleCustomIconUpload); // إظهار المزيد من الألوان moreTextColorsBtn.addEventListener('click', () => showMoreColors('text')); moreBgColorsBtn.addEventListener('click', () => showMoreColors('bg')); // التهيئة الأولية initializeColors(); initializeIcons(); drawLogo(); applyAnimation(); renderHistory();