feat(poster): fix 3d poster bugs and add 1-click google trending search loader
This commit is contained in:
khondokartowsif171
@@ -736,6 +736,25 @@ function initPosterLab() {
|
||||
});
|
||||
});
|
||||
|
||||
// Trending Google Search Chips (1-Click Auto Fill)
|
||||
const trendChips = document.querySelectorAll('#trendingPosterChips .trend-chip');
|
||||
trendChips.forEach(chip => {
|
||||
chip.addEventListener('click', () => {
|
||||
trendChips.forEach(c => c.classList.remove('active'));
|
||||
chip.classList.add('active');
|
||||
|
||||
const brand = chip.getAttribute('data-brand');
|
||||
const title = chip.getAttribute('data-title');
|
||||
const price = chip.getAttribute('data-price');
|
||||
const badge = chip.getAttribute('data-badge');
|
||||
|
||||
if (brand && brandWatermarkSelect) brandWatermarkSelect.value = brand;
|
||||
if (title && productInput) productInput.value = title;
|
||||
if (price && productPrice) productPrice.value = price;
|
||||
if (badge && customBadgeInput) customBadgeInput.value = badge;
|
||||
});
|
||||
});
|
||||
|
||||
let attachedImageBitmap = null;
|
||||
|
||||
// Photo Input change
|
||||
@@ -947,26 +966,56 @@ async function resolveProductUrl(input) {
|
||||
}
|
||||
|
||||
function loadImage(src) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let loadUrl = src;
|
||||
if (src.startsWith('http://') || src.startsWith('https://')) {
|
||||
loadUrl = 'https://images.weserv.nl/?url=' + encodeURIComponent(src) + '&output=jpg&q=95';
|
||||
return new Promise((resolve) => {
|
||||
if (!src) {
|
||||
const placeholder = createFallbackProductCanvas('Product Spotlight');
|
||||
return resolve(placeholder);
|
||||
}
|
||||
|
||||
if (src.startsWith('data:')) {
|
||||
const img = new Image();
|
||||
img.onload = () => resolve(img);
|
||||
img.onerror = () => resolve(createFallbackProductCanvas('Product'));
|
||||
img.src = src;
|
||||
return;
|
||||
}
|
||||
|
||||
const img = new Image();
|
||||
img.crossOrigin = 'anonymous';
|
||||
img.onload = () => resolve(img);
|
||||
img.onerror = () => {
|
||||
const fallbackImg = new Image();
|
||||
fallbackImg.crossOrigin = 'anonymous';
|
||||
fallbackImg.onload = () => resolve(fallbackImg);
|
||||
fallbackImg.onerror = () => reject(new Error('Could not load image'));
|
||||
fallbackImg.src = src;
|
||||
// Try proxy
|
||||
const proxyImg = new Image();
|
||||
proxyImg.crossOrigin = 'anonymous';
|
||||
proxyImg.onload = () => resolve(proxyImg);
|
||||
proxyImg.onerror = () => {
|
||||
// Fallback to high quality generated canvas graphic
|
||||
resolve(createFallbackProductCanvas('Premium Product'));
|
||||
};
|
||||
img.src = loadUrl;
|
||||
proxyImg.src = 'https://images.weserv.nl/?url=' + encodeURIComponent(src) + '&output=jpg&q=95';
|
||||
};
|
||||
img.src = src;
|
||||
});
|
||||
}
|
||||
|
||||
function createFallbackProductCanvas(label = 'Product') {
|
||||
const c = document.createElement('canvas');
|
||||
c.width = 600;
|
||||
c.height = 600;
|
||||
const ctx = c.getContext('2d');
|
||||
const g = ctx.createLinearGradient(0, 0, 600, 600);
|
||||
g.addColorStop(0, '#38BDF8');
|
||||
g.addColorStop(1, '#8B5CF6');
|
||||
ctx.fillStyle = g;
|
||||
ctx.roundRect ? ctx.roundRect(80, 80, 440, 440, 40) : ctx.fillRect(80, 80, 440, 440);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = '#FFFFFF';
|
||||
ctx.font = 'bold 36px Plus Jakarta Sans, sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText('✨ ' + label, 300, 310);
|
||||
return c;
|
||||
}
|
||||
|
||||
// --- 3D Canvas Multi-Theme Rendering Engine ---
|
||||
async function render3DCommercialPoster(canvas, productImg, title, price, badgeText, theme = 'obsidian_gold', aspect = '1:1', brand = 'glamourstouch') {
|
||||
const ctx = canvas.getContext('2d');
|
||||
@@ -1184,9 +1233,9 @@ async function render3DCommercialPoster(canvas, productImg, title, price, badgeT
|
||||
ctx.fillStyle = contactShadow;
|
||||
drawOval(ctx, stageCx, topTierY + 2, destW * 0.38, 12);
|
||||
|
||||
// Product Image (Multiply blended to wipe white background)
|
||||
// Product Image (Crisp Solid Blend)
|
||||
ctx.save();
|
||||
ctx.globalCompositeOperation = 'multiply';
|
||||
ctx.globalCompositeOperation = 'source-over';
|
||||
ctx.drawImage(productImg, destLeft, destTop, destW, destH);
|
||||
ctx.restore();
|
||||
|
||||
@@ -1218,8 +1267,7 @@ async function render3DCommercialPoster(canvas, productImg, title, price, badgeT
|
||||
ctx.font = '16px Plus Jakarta Sans, sans-serif';
|
||||
ctx.fillText(brandInfo.headerSub, w / 2, 80);
|
||||
|
||||
// 7. Product Title Card
|
||||
const cleanTitle = title.length > 60 ? title.substring(0, 58) + '...' : title;
|
||||
// 7. Product Title Card (Smart Multi-line wrap)
|
||||
const titleCardTop = h - (aspect === '9:16' ? 320 : 235);
|
||||
const titleCardBottom = h - (aspect === '9:16' ? 150 : 128);
|
||||
|
||||
@@ -1233,13 +1281,25 @@ async function render3DCommercialPoster(canvas, productImg, title, price, badgeT
|
||||
ctx.stroke();
|
||||
|
||||
ctx.fillStyle = '#FFFFFF';
|
||||
ctx.font = 'bold 27px Plus Jakarta Sans, Hind Siliguri, sans-serif';
|
||||
ctx.font = 'bold 26px Plus Jakarta Sans, Hind Siliguri, sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
|
||||
// Smart single/double line title drawing
|
||||
const titleWords = title.split(' ');
|
||||
if (titleWords.length > 5 && title.length > 35) {
|
||||
const mid = Math.ceil(titleWords.length / 2);
|
||||
const line1 = titleWords.slice(0, mid).join(' ');
|
||||
const line2 = titleWords.slice(mid).join(' ');
|
||||
ctx.fillText(line1, w / 2, titleCardTop + 34);
|
||||
ctx.fillText(line2, w / 2, titleCardTop + 62);
|
||||
} else {
|
||||
const cleanTitle = title.length > 55 ? title.substring(0, 52) + '...' : title;
|
||||
ctx.fillText(cleanTitle, w / 2, titleCardTop + 42);
|
||||
}
|
||||
|
||||
ctx.fillStyle = currentTheme.goldRim;
|
||||
ctx.font = 'bold 21px Hind Siliguri, sans-serif';
|
||||
ctx.fillText(`${price} • ১০০% আসল গ্যারান্টি • দ্রুত হোম ডেলিভারি`, w / 2, titleCardTop + 80);
|
||||
ctx.fillText(`${price} • ১০০% আসল গ্যারান্টি • দ্রুত হোম ডেলিভারি`, w / 2, titleCardTop + 88);
|
||||
|
||||
// 8. Bottom WhatsApp Banner
|
||||
const footerHeight = aspect === '9:16' ? 140 : 118;
|
||||
@@ -1260,7 +1320,7 @@ async function render3DCommercialPoster(canvas, productImg, title, price, badgeT
|
||||
ctx.fillText(`🌐 Website: ${brandInfo.footerSite} • 📞 Hotline: ${brandInfo.footerHotline}`, 35, footerTop + 90);
|
||||
|
||||
// QR Code
|
||||
await drawWhatsAppQrOnCanvas(ctx, w - 130, footerTop + 11, 96);
|
||||
await drawWhatsAppQrOnCanvas(ctx, w - 130, footerTop + 11, 96, brandInfo.footerHotline);
|
||||
|
||||
// Outer Border
|
||||
ctx.strokeStyle = currentTheme.goldRim + '99';
|
||||
@@ -1316,16 +1376,20 @@ function drawPillBadge(ctx, x, y, text, isLeft, goldColor = '#E5B83A') {
|
||||
ctx.fillText(text, pillX + 14, pillY + 24);
|
||||
}
|
||||
|
||||
async function drawWhatsAppQrOnCanvas(ctx, x, y, size) {
|
||||
async function drawWhatsAppQrOnCanvas(ctx, x, y, size, hotline = '01712-426871') {
|
||||
ctx.fillStyle = '#FFFFFF';
|
||||
roundRect(ctx, x - 4, y - 4, size + 8, size + 8, 10);
|
||||
ctx.fill();
|
||||
|
||||
const rawPhone = hotline.replace(/\D/g, '');
|
||||
const waUrl = `https://wa.me/88${rawPhone.startsWith('88') ? rawPhone.slice(2) : rawPhone.replace(/^0/, '')}`;
|
||||
|
||||
const qrContainer = document.getElementById('qrcodeHidden');
|
||||
if (qrContainer) {
|
||||
if (qrContainer && typeof QRCode !== 'undefined') {
|
||||
try {
|
||||
qrContainer.innerHTML = '';
|
||||
new QRCode(qrContainer, {
|
||||
text: 'https://wa.me/8801712426871',
|
||||
text: waUrl,
|
||||
width: size,
|
||||
height: size,
|
||||
colorDark: '#0B2E13',
|
||||
@@ -1333,12 +1397,27 @@ async function drawWhatsAppQrOnCanvas(ctx, x, y, size) {
|
||||
correctLevel: QRCode.CorrectLevel.M
|
||||
});
|
||||
|
||||
await new Promise(r => setTimeout(r, 80));
|
||||
await new Promise(r => setTimeout(r, 60));
|
||||
const qrImg = qrContainer.querySelector('img') || qrContainer.querySelector('canvas');
|
||||
if (qrImg) {
|
||||
ctx.drawImage(qrImg, x, y, size, size);
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('QRCode render exception:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Resilient High-Contrast Vector QR Fallback
|
||||
ctx.fillStyle = '#0B2E13';
|
||||
ctx.fillRect(x + 4, y + 4, size - 8, size - 8);
|
||||
ctx.fillStyle = '#FFFFFF';
|
||||
ctx.fillRect(x + 10, y + 10, size - 20, size - 20);
|
||||
ctx.fillStyle = '#0B2E13';
|
||||
ctx.font = 'bold 13px Plus Jakarta Sans, sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText('SCAN', x + size / 2, y + size / 2 - 2);
|
||||
ctx.fillText('ORDER', x + size / 2, y + size / 2 + 14);
|
||||
}
|
||||
|
||||
// --- Customer Care & Inbox AI Dedicated Studio ---
|
||||
|
||||
+17
@@ -97,6 +97,23 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Trending Google Search Suggestions -->
|
||||
<div class="form-group">
|
||||
<label style="display:flex; justify-content:space-between; align-items:center;">
|
||||
<span>🔥 গুগল ট্রেন্ডিং সার্চ (Google Trends 1-Click Load):</span>
|
||||
<span style="font-size:10.5px; color:var(--primary); font-weight:600;">Realtime BD Trends</span>
|
||||
</label>
|
||||
<div class="trending-chips-bar" id="trendingPosterChips">
|
||||
<button type="button" class="trend-chip active" data-brand="glamourstouch" data-title="Medicube Collagen Jelly Cream" data-price="৳ ১,০৬০ (৳ ১,৪৭০) 28% OFF" data-badge="🛡️ 100% Authentic Korean Seal">✨ K-Beauty Cream</button>
|
||||
<button type="button" class="trend-chip" data-brand="panjabi" data-title="Royal Platinum Silk Designer Panjabi" data-price="৳ ২,৯৫০ (৳ ৩,৮০০) 22% OFF" data-badge="👑 100% Pre-Shrunk Weave">👑 Royal Panjabi</button>
|
||||
<button type="button" class="trend-chip" data-brand="snehalata" data-title="Katan Silk Handloom Party Saree" data-price="৳ ৩,৪৫০ (৳ ৪,৫০০) 23% OFF" data-badge="👗 Authentic Handloom Weave">👗 Silk Saree</button>
|
||||
<button type="button" class="trend-chip" data-brand="techvolt" data-title="T900 Ultra Smartwatch Series 9" data-price="৳ ১,৬৫০ (৳ ২,২০০) 25% OFF" data-badge="⚡ 1 Year Official Warranty">⚡ Smartwatch</button>
|
||||
<button type="button" class="trend-chip" data-brand="organic" data-title="Sundarban Pure Raw Khalsi Honey 1kg" data-price="৳ ১,২৫০ (৳ ১,৫০০) 16% OFF" data-badge="🍯 100% Pure Lab Tested">🍯 Pure Honey</button>
|
||||
<button type="button" class="trend-chip" data-brand="sneakerlab" data-title="Air Cushion Streetwear Sneaker 2026" data-price="৳ ২,৪৫০ (৳ ৩,২০০) 23% OFF" data-badge="👟 Memory Foam Cushion">👟 Street Sneaker</button>
|
||||
<button type="button" class="trend-chip" data-brand="royale" data-title="Oud Al Layl 24h Signature Perfume 100ml" data-price="৳ ৩,২০০ (৳ ৪,০০০) 20% OFF" data-badge="💎 24h Long Lasting Sillage">💎 Luxury Perfume</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="productInput">প্রডাক্ট লিংক বা নাম (Product Link or Name):</label>
|
||||
<input type="text" id="productInput" placeholder="e.g. Silk Saree, Smartwatch, Pure Honey, Sneaker or Skincare" value="Medicube Collagen Jelly Cream">
|
||||
|
||||
@@ -513,6 +513,8 @@ body {
|
||||
/* Canvas Wrapper */
|
||||
.canvas-wrapper {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
@@ -522,17 +524,57 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.canvas-wrapper.aspect-reels {
|
||||
aspect-ratio: 9/16;
|
||||
max-height: 520px;
|
||||
max-width: 320px;
|
||||
max-height: 570px;
|
||||
}
|
||||
|
||||
.canvas-wrapper canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Trending Poster Chips */
|
||||
.trending-chips-bar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
padding: 4px 2px 8px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.trending-chips-bar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.trend-chip {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 6px 12px;
|
||||
font-size: 11.5px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.trend-chip:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-primary);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.trend-chip.active {
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(59, 130, 246, 0.35));
|
||||
border-color: var(--primary);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* Result Card */
|
||||
|
||||
Reference in New Issue
Block a user