32px نسخ تحميل 64px نسخ تحميل 128px نسخ تحميل 256px نسخ تحميل 512px نسخ تحميل مشاركة مع الآخرين 32px نسخ تحميل 64px نسخ تحميل 128px نسخ تحميل 256px نسخ تحميل 512px نسخ تحميل مشاركة مع الآخرين function copyImageSize(src,size) { if (navigator.userAgent.match(/Mobi/)) { navigator.clipboard.writeText(src).then(() => { alert(`✅ تم نسخ رابط الصورة بحجم ${size}px!`); }).catch(() => { alert('❌ فشل النسخ'); }); return; } const image = new Image(); image.crossOrigin = "anonymous"; image.src = src; image.onload = () => { const canvas = document.createElement("canvas"); canvas.width = size; canvas.height = size; const ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0, size, size); canvas.toBlob(blob => { const item = new ClipboardItem({ "image/png": blob }); navigator.clipboard.write([item]).then(() => { alert(`✅ تم نسخ الصورة بحجم ${size}px!`); }).catch(err => { alert('❌ فشل النسخ: ' + err); }); }, "image/png"); }; } function downloadImageSize(src,size) { const image = new Image(); image.crossOrigin = "anonymous"; image.src = src; image.onload = () => { const canvas = document.createElement("canvas"); canvas.width = size; canvas.height = size; const ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0, size, size); canvas.toBlob(blob => { const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = `Sticker-${size}px.png`; link.click(); URL.revokeObjectURL(link.href); }, "image/png"); }; } function shareArticle() { const articleUrl = window.location.href; navigator.clipboard.writeText(articleUrl).then(() => { alert("✅ تم نسخ رابط المقالة!"); }).catch(err => { alert("❌ فشل النسخ: " + err); }); } .dual-container { display: flex; gap: 20px; flex-wrap: wrap; } .image-preview-container { display: flex; gap: 20px; align-items: stretch; flex: 1 1 500px; } .image-container { flex: 0 0 256px; background: #f9f9f9; padding: 15px; border-radius: 10px; box-shadow: 1px 1px 6px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; } .image-container img { border-radius: 8px; max-width: 100%; height: auto; } .sizes { flex: 1; background: #f9f9f9; padding: 15px; border-radius: 10px; box-shadow: 1px 1px 6px rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: flex-start; } .size-option { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .size-option span { background-color: #f0e5f7; padding: 4px 8px; border-radius: 6px; display: inline-block; width: 140px; text-align: center; white-space: nowrap; } .size-option .buttons { display: flex; gap: 5px; } .copy-btn, .download-btn { background: #a61e69; color: #fff; border: none; padding: 5px 12px; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: bold; } .copy-btn:hover, .download-btn:hover { background: #8c1954; } .share-article-btn { background:#a61e69; color:white; width:100%; margin-top:12px; padding:10px; border:none; border-radius:6px; cursor:pointer; font-size:14px; font-weight:bold; } .share-article-btn:hover { background: #8c1954; } /* استجابة الموبايل */ @media (max-width: 768px) { .dual-container { flex-direction: column; align-items: center; } .image-preview-container { width: 100%; flex-direction: column; align-items: center; margin-bottom: 15px; } .sizes { width: 100%; margin-top: 10px; } .size-option { flex-direction: row; justify-content: space-between; width: 100%; } .size-option span { width: 140px; /* خلفيات متساوية بين كل القياسات */ text-align: center; display: inline-block; } .size-option .buttons { flex-wrap: wrap; gap: 5px; } } 32px نسخ تحميل 64px نسخ تحميل 128px نسخ تحميل 256px نسخ تحميل 512px نسخ تحميل مشاركة مع الآخرين 32px نسخ تحميل 64px نسخ تحميل 128px نسخ تحميل 256px نسخ تحميل 512px نسخ تحميل مشاركة مع الآخرين function copyImageSize(src,size) { if (navigator.userAgent.match(/Mobi/)) { navigator.clipboard.writeText(src).then(() => { alert(`✅ تم نسخ رابط الصورة بحجم ${size}px!`); }).catch(() => { alert('❌ فشل النسخ'); }); return; } const image = new Image(); image.crossOrigin = "anonymous"; image.src = src; image.onload = () => { const canvas = document.createElement("canvas"); canvas.width = size; canvas.height = size; const ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0, size, size); canvas.toBlob(blob => { const item = new ClipboardItem({ "image/png": blob }); navigator.clipboard.write([item]).then(() => { alert(`✅ تم نسخ الصورة بحجم ${size}px!`); }).catch(err => { alert('❌ فشل النسخ: ' + err); }); }, "image/png"); }; } function downloadImageSize(src,size) { const image = new Image(); image.crossOrigin = "anonymous"; image.src = src; image.onload = () => { const canvas = document.createElement("canvas"); canvas.width = size; canvas.height = size; const ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0, size, size); canvas.toBlob(blob => { const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = `Sticker-${size}px.png`; link.click(); URL.revokeObjectURL(link.href); }, "image/png"); }; } function shareArticle() { const articleUrl = window.location.href; navigator.clipboard.writeText(articleUrl).then(() => { alert("✅ تم نسخ رابط المقالة!"); }).catch(err => { alert("❌ فشل النسخ: " + err); }); } .dual-container { display: flex; gap: 20px; flex-wrap: wrap; } .image-preview-container { display: flex; gap: 20px; align-items: stretch; flex: 1 1 500px; } .image-container { flex: 0 0 256px; background: #f9f9f9; padding: 15px; border-radius: 10px; box-shadow: 1px 1px 6px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; } .image-container img { border-radius: 8px; max-width: 100%; height: auto; } .sizes { flex: 1; background: #f9f9f9; padding: 15px; border-radius: 10px; box-shadow: 1px 1px 6px rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: flex-start; } .size-option { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .size-option span { background-color: #f0e5f7; padding: 4px 8px; border-radius: 6px; display: inline-block; width: 140px; text-align: center; white-space: nowrap; } .size-option .buttons { display: flex; gap: 5px; } .copy-btn, .download-btn { background: #a61e69; color: #fff; border: none; padding: 5px 12px; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: bold; } .copy-btn:hover, .download-btn:hover { background: #8c1954; } .share-article-btn { background:#a61e69; color:white; width:100%; margin-top:12px; padding:10px; border:none; border-radius:6px; cursor:pointer; font-size:14px; font-weight:bold; } .share-article-btn:hover { background: #8c1954; } /* استجابة الموبايل */ @media (max-width: 768px) { .dual-container { flex-direction: column; align-items: center; } .image-preview-container { width: 100%; flex-direction: column; align-items: center; margin-bottom: 15px; } .sizes { width: 100%; margin-top: 10px; } .size-option { flex-direction: row; justify-content: space-between; width: 100%; } .size-option span { width: 140px; /* خلفيات متساوية بين كل القياسات */ text-align: center; display: inline-block; } .size-option .buttons { flex-wrap: wrap; gap: 5px; } }
