Initial release of Google Opal AI iOS Web Studio

2026-09-01 09:01:09 +06:00
commit b85c5cf065
10 changed files with 1839 additions and 0 deletions
@@ -0,0 +1,731 @@
+// Google Opal AI - iOS Studio & 3D Poster Lab Engine
+
+document.addEventListener('DOMContentLoaded', () => {
+  initNavigation();
+  initSettings();
+  initPosterLab();
+  initInboxAI();
+  initHistory();
+});
+
+// --- 1. Tab Navigation ---
+function initNavigation() {
+  const navItems = document.querySelectorAll('.nav-item');
+  const tabPages = document.querySelectorAll('.tab-page');
+
+  navItems.forEach(item => {
+    item.addEventListener('click', () => {
+      const targetTabId = item.getAttribute('data-tab');
+      
+      navItems.forEach(n => n.classList.remove('active'));
+      tabPages.forEach(p => p.classList.remove('active'));
+
+      item.classList.add('active');
+      const targetPage = document.getElementById(targetTabId);
+      if (targetPage) targetPage.classList.add('active');
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+  });
+
+  // Language Toggle
+  const langBtn = document.getElementById('langToggleBtn');
+  let currentLang = 'BN';
+  langBtn.addEventListener('click', () => {
+    currentLang = currentLang === 'BN' ? 'EN' : 'BN';
+    langBtn.textContent = currentLang === 'BN' ? '🌐 বাং' : '🌐 EN';
+  });
+}
+
+// Global App Switcher
+window.openAppRunner = function(appType) {
+  if (appType === 'inbox_ai') {
+    document.querySelector('.nav-item[data-tab="tabInboxAI"]').click();
+  } else {
+    document.querySelector('.nav-item[data-tab="tabPosterLab"]').click();
+  }
+};
+
+window.copyText = function(elementId) {
+  const el = document.getElementById(elementId);
+  if (el && el.textContent) {
+    navigator.clipboard.writeText(el.textContent).then(() => {
+      alert('✅ Copied to Clipboard!');
+    });
+  }
+};
+
+// --- 2. Settings & Gemini/Gemma API ---
+function initSettings() {
+  const apiKeyInput = document.getElementById('apiKeyInput');
+  const modelSelect = document.getElementById('modelSelect');
+  const n8nWebhookInput = document.getElementById('n8nWebhookInput');
+  const saveBtn = document.getElementById('saveApiKeyBtn');
+  const statusMsg = document.getElementById('settingsStatusMsg');
+
+  // Load saved settings
+  const savedKey = localStorage.getItem('opal_gemini_api_key') || '';
+  const savedModel = localStorage.getItem('opal_selected_model') || 'gemini-3.6-flash';
+  const savedN8n = localStorage.getItem('opal_n8n_webhook') || 'https://n8n.auraajenticai.cloud/webhook/gt-auto-post';
+  apiKeyInput.value = savedKey;
+  modelSelect.value = savedModel;
+  if (n8nWebhookInput) n8nWebhookInput.value = savedN8n;
+
+  saveBtn.addEventListener('click', async () => {
+    const key = apiKeyInput.value.trim();
+    const model = modelSelect.value;
+    const n8nUrl = n8nWebhookInput ? n8nWebhookInput.value.trim() : '';
+
+    if (n8nUrl) {
+      localStorage.setItem('opal_n8n_webhook', n8nUrl);
+    }
+    
+    if (!key) {
+      alert('Settings saved!');
+      return;
+    }
+
+    statusMsg.classList.remove('hidden');
+    statusMsg.style.color = '#F472B6';
+    statusMsg.textContent = '⏳ Testing AI connection with Google...';
+
+    try {
+      const res = await callGeminiApi(key, model, "Respond with: 'Opal AI Connected successfully!'");
+      if (res) {
+        localStorage.setItem('opal_gemini_api_key', key);
+        localStorage.setItem('opal_selected_model', model);
+        statusMsg.style.color = '#10B981';
+        statusMsg.textContent = `✅ Settings Saved & Verified: ${res.trim()}`;
+      }
+    } catch (e) {
+      statusMsg.style.color = '#EF4444';
+      statusMsg.textContent = `❌ Error: ${e.message}`;
+    }
+  });
+}
+
+async function callGeminiApi(apiKey, model, prompt) {
+  const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
+  const payload = {
+    contents: [{ parts: [{ text: prompt }] }],
+    generationConfig: { temperature: 0.7, maxOutputTokens: 2048 }
+  };
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload)
+  });
+
+  if (!response.ok) {
+    const errData = await response.json();
+    throw new Error(errData?.error?.message || `HTTP ${response.status}`);
+  }
+
+  const data = await response.json();
+  return data?.candidates?.[0]?.content?.parts?.[0]?.text || '';
+}
+
+// --- 3. 3D Poster Lab Engine (True 3D Dual-Tier Gold Podium) ---
+function initPosterLab() {
+  const productInput = document.getElementById('productInput');
+  const productPrice = document.getElementById('productPrice');
+  const photoFileInput = document.getElementById('photoFileInput');
+  const clearPhotoBtn = document.getElementById('clearPhotoBtn');
+  const photoPreviewContainer = document.getElementById('photoPreviewContainer');
+  const attachedPhotoImg = document.getElementById('attachedPhotoImg');
+  const generatePosterBtn = document.getElementById('generatePosterBtn');
+  const posterStatusText = document.getElementById('posterStatusText');
+  const posterResultCard = document.getElementById('posterResultCard');
+  const posterCanvas = document.getElementById('posterCanvas');
+  const downloadPosterBtn = document.getElementById('downloadPosterBtn');
+  const shareWhatsAppBtn = document.getElementById('shareWhatsAppBtn');
+
+  let attachedImageBitmap = null;
+
+  // Photo Input change
+  photoFileInput.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        attachedPhotoImg.src = event.target.result;
+        photoPreviewContainer.classList.remove('hidden');
+        clearPhotoBtn.classList.remove('hidden');
+
+        const img = new Image();
+        img.onload = () => { attachedImageBitmap = img; };
+        img.src = event.target.result;
+      };
+      reader.readAsDataURL(file);
+    }
+  });
+
+  clearPhotoBtn.addEventListener('click', () => {
+    photoFileInput.value = '';
+    attachedImageBitmap = null;
+    photoPreviewContainer.classList.add('hidden');
+    clearPhotoBtn.classList.add('hidden');
+  });
+
+  // Generate 3D Poster
+  generatePosterBtn.addEventListener('click', async () => {
+    const inputVal = productInput.value.trim();
+    const priceVal = productPrice.value.trim();
+
+    posterStatusText.classList.remove('hidden');
+    posterStatusText.textContent = '⏳ Resolving product image & rendering 3D gold stage...';
+    generatePosterBtn.disabled = true;
+
+    try {
+      let productImg = attachedImageBitmap;
+      let title = "Authentic Korean K-Beauty Care";
+
+      if (!productImg) {
+        // Universal Product / Image Link Resolver
+        const resolved = await resolveProductUrl(inputVal);
+        if (resolved && resolved.imageUrl) {
+          title = resolved.title || inputVal;
+          productImg = await loadImage(resolved.imageUrl);
+        } else {
+          // Fallback packshot image
+          const fallbackUrl = `https://image.pollinations.ai/prompt/${encodeURIComponent(inputVal + " luxury cosmetic container jar bottle on podium 8k")}?width=1024&height=1024&nologo=true`;
+          productImg = await loadImage(fallbackUrl);
+          title = inputVal;
+        }
+      }
+
+      if (productImg) {
+        // Render True 3D Poster on Canvas
+        await render3DCommercialPoster(posterCanvas, productImg, title, priceVal);
+        posterResultCard.classList.remove('hidden');
+        posterStatusText.classList.add('hidden');
+        posterResultCard.scrollIntoView({ behavior: 'smooth' });
+
+        // Save to History
+        saveGenerationToHistory({
+          type: '3D Poster',
+          title: title,
+          price: priceVal,
+          date: new Date().toLocaleTimeString()
+        });
+      } else {
+        posterStatusText.textContent = '❌ Failed to load product image. Please check link.';
+      }
+    } catch (err) {
+      posterStatusText.textContent = `❌ Error: ${err.message}`;
+    }
+
+    generatePosterBtn.disabled = false;
+  });
+
+  // Download Button (Save to iPhone Camera Roll)
+  downloadPosterBtn.addEventListener('click', () => {
+    const link = document.createElement('a');
+    link.download = `GT_Poster_${Date.now()}.jpg`;
+    link.href = posterCanvas.toDataURL('image/jpeg', 0.95);
+    link.click();
+  });
+
+  // WhatsApp Order Button
+  shareWhatsAppBtn.addEventListener('click', () => {
+    const text = encodeURIComponent(`✨ 100% Authentic Korean Skincare Order!\nProduct: ${productInput.value}\nPrice: ${productPrice.value}\nWebsite: https://glamourstouch.com`);
+    window.open(`https://wa.me/8801712426871?text=${text}`, '_blank');
+  });
+
+  // 1-Click Auto Post to Facebook Page (via n8n Webhook)
+  const autoPostN8nBtn = document.getElementById('autoPostN8nBtn');
+  const n8nPostStatusMsg = document.getElementById('n8nPostStatusMsg');
+
+  if (autoPostN8nBtn) {
+    autoPostN8nBtn.addEventListener('click', async () => {
+      const webhookUrl = localStorage.getItem('opal_n8n_webhook');
+      if (!webhookUrl) {
+        alert('⚠️ Please set your n8n Webhook URL in Settings first!');
+        document.querySelector('.nav-item[data-tab="tabSettings"]').click();
+        return;
+      }
+
+      n8nPostStatusMsg.classList.remove('hidden');
+      n8nPostStatusMsg.style.color = '#38BDF8';
+      n8nPostStatusMsg.textContent = '⏳ Sending 3D poster & caption to n8n Webhook...';
+      autoPostN8nBtn.disabled = true;
+
+      try {
+        const posterDataUrl = posterCanvas.toDataURL('image/jpeg', 0.92);
+        const payload = {
+          title: productInput.value.trim() || 'Authentic Korean K-Beauty Skincare',
+          price: productPrice.value.trim() || '৳ ১,০৬০',
+          caption: `✨ ${productInput.value.trim()} ✨\n\n💰 অফার মূল্য: ${productPrice.value.trim()}\n🛡️ ১০০% অরিজিনাল কোরিয়ান কসমেটিক্স গ্যারান্টি!\n\n💬 সরাসরি WhatsApp এ অর্ডার করতে ইনবক্স করুন:\n👉 https://wa.me/8801712426871\n📞 হটলাইন: 01712-426871\n🌐 ওয়েবসাইট: https://glamourstouch.com`,
+          image_url: posterDataUrl,
+          store: "Glamour's Touch",
+          website: "https://glamourstouch.com",
+          whatsapp: "01712-426871",
+          timestamp: new Date().toISOString()
+        };
+
+        const res = await fetch(webhookUrl, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        });
+
+        if (res.ok) {
+          const resData = await res.json().catch(() => ({}));
+          n8nPostStatusMsg.style.color = '#10B981';
+          n8nPostStatusMsg.textContent = `✅ ${resData.message || '🎉 পোস্টটি সফলভাবে n8n-এর মাধ্যমে Facebook Page-এ পাবলিশ হয়েছে!'}`;
+        } else {
+          n8nPostStatusMsg.style.color = '#EF4444';
+          n8nPostStatusMsg.textContent = `❌ n8n Webhook returned HTTP ${res.status}`;
+        }
+      } catch (err) {
+        n8nPostStatusMsg.style.color = '#EF4444';
+        n8nPostStatusMsg.textContent = `❌ Connection Error: ${err.message}`;
+      }
+
+      autoPostN8nBtn.disabled = false;
+    });
+  }
+}
+
+// Universal Link Resolver
+async function resolveProductUrl(input) {
+  if (input.match(/\.(jpeg|jpg|gif|png|webp)($|\?)/i)) {
+    return { title: 'Authentic Korean Product', imageUrl: input };
+  }
+
+  // Glamour's Touch Supabase UUID regex
+  const uuidMatch = input.match(/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/);
+  if (uuidMatch) {
+    const productId = uuidMatch[0];
+    try {
+      const res = await fetch(`https://fmcltrjnuvuooarkvufn.supabase.co/rest/v1/products?id=eq.${productId}&select=*`, {
+        headers: {
+          'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZtY2x0cmpudXZ1b29hcmt2dWZuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjY3MjEzNzgsImV4cCI6MjA0MjI5NzM3OH0.528YkG1V7c8UoK5QvW_V1hS0W1oQ5W_V1hS0W1oQ5W8',
+          'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZtY2x0cmpudXZ1b29hcmt2dWZuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjY3MjEzNzgsImV4cCI6MjA0MjI5NzM3OH0.528YkG1V7c8UoK5QvW_V1hS0W1oQ5W_V1hS0W1oQ5W8'
+        }
+      });
+      const data = await res.json();
+      if (data && data.length > 0) {
+        const p = data[0];
+        let imgUrl = p.image_url || '';
+        if (p.images && p.images.length > 0) imgUrl = p.images[0];
+        return {
+          title: p.name || 'Authentic Korean Skincare',
+          imageUrl: imgUrl
+        };
+      }
+    } catch (e) {
+      console.warn('GT Supabase fetch failed:', e);
+    }
+  }
+
+  return { title: input, imageUrl: input };
+}
+
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => resolve(img);
+    img.onerror = (e) => reject(new Error('Could not load image across CORS'));
+    img.src = src;
+  });
+}
+
+// --- 4. Masterpiece 3D Canvas Rendering Engine ---
+async function render3DCommercialPoster(canvas, productImg, title, price) {
+  const ctx = canvas.getContext('2d');
+  const w = 1080;
+  const h = 1080;
+
+  // 1. Midnight Obsidian Background
+  const bgGrad = ctx.createRadialGradient(w / 2, h * 0.44, 50, w / 2, h * 0.44, w * 0.72);
+  bgGrad.addColorStop(0, '#18212D');
+  bgGrad.addColorStop(0.6, '#0C1117');
+  bgGrad.addColorStop(1, '#05080C');
+  ctx.fillStyle = bgGrad;
+  ctx.fillRect(0, 0, w, h);
+
+  // 2. White-to-Midnight Luxury Radial Spotlight (Smooth Studio Blend)
+  const stageCx = w / 2;
+  const stageCy = h * 0.44;
+  const stageRadius = w * 0.38;
+
+  const spotGrad = ctx.createRadialGradient(stageCx, stageCy, 0, stageCx, stageCy, stageRadius);
+  spotGrad.addColorStop(0, '#FFFFFF');
+  spotGrad.addColorStop(0.46, '#FFFFFF');
+  spotGrad.addColorStop(0.64, '#F0F5FA');
+  spotGrad.addColorStop(0.82, '#8E9FAC');
+  spotGrad.addColorStop(0.94, '#283545');
+  spotGrad.addColorStop(1, '#0C1117');
+
+  ctx.fillStyle = spotGrad;
+  ctx.beginPath();
+  ctx.arc(stageCx, stageCy, stageRadius, 0, Math.PI * 2);
+  ctx.fill();
+
+  // Luxury Gold Dashed Rings
+  ctx.strokeStyle = '#66E5B83A';
+  ctx.lineWidth = 2.5;
+  ctx.beginPath();
+  ctx.arc(stageCx, stageCy, stageRadius * 0.96, 0, Math.PI * 2);
+  ctx.stroke();
+
+  ctx.strokeStyle = '#99E5B83A';
+  ctx.lineWidth = 1.8;
+  ctx.setLineDash([12, 12]);
+  ctx.beginPath();
+  ctx.arc(stageCx, stageCy, stageRadius * 0.91, 0, Math.PI * 2);
+  ctx.stroke();
+  ctx.setLineDash([]);
+
+  // 3. True 3D Dual-Tier Cylindrical Podium
+  // --- TIER 1: Lower Base ---
+  const baseTierY = 745;
+  const baseTierRx = w * 0.38;
+  const baseTierRy = 34;
+  const baseTierHeight = 26;
+
+  // Tier 1 Ground Shadow
+  const baseShadow = ctx.createRadialGradient(stageCx, baseTierY + baseTierHeight + 16, 20, stageCx, baseTierY + baseTierHeight + 16, baseTierRx * 1.15);
+  baseShadow.addColorStop(0, 'rgba(0,0,0,0.7)');
+  baseShadow.addColorStop(1, 'transparent');
+  ctx.fillStyle = baseShadow;
+  drawOval(ctx, stageCx, baseTierY + baseTierHeight + baseTierRy * 0.6, baseTierRx * 1.15, baseTierRy * 1.6);
+
+  // Tier 1 Cylinder Body
+  const baseCylGrad = ctx.createLinearGradient(stageCx - baseTierRx, 0, stageCx + baseTierRx, 0);
+  baseCylGrad.addColorStop(0, '#090D12');
+  baseCylGrad.addColorStop(0.2, '#1C2633');
+  baseCylGrad.addColorStop(0.5, '#6C829E');
+  baseCylGrad.addColorStop(0.8, '#1C2633');
+  baseCylGrad.addColorStop(1, '#090D12');
+  ctx.fillStyle = baseCylGrad;
+  ctx.fillRect(stageCx - baseTierRx, baseTierY, baseTierRx * 2, baseTierHeight);
+  drawOval(ctx, stageCx, baseTierY + baseTierHeight, baseTierRx, baseTierRy);
+
+  // Tier 1 Top Cap
+  const baseTopGrad = ctx.createLinearGradient(stageCx - baseTierRx, baseTierY - baseTierRy, stageCx + baseTierRx, baseTierY + baseTierRy);
+  baseTopGrad.addColorStop(0, '#222D3A');
+  baseTopGrad.addColorStop(1, '#0B1017');
+  ctx.fillStyle = baseTopGrad;
+  drawOval(ctx, stageCx, baseTierY, baseTierRx, baseTierRy);
+
+  // --- TIER 2: Upper Product Pedestal ---
+  const topTierY = 708;
+  const topTierRx = w * 0.31;
+  const topTierRy = 28;
+  const topTierHeight = 34;
+
+  // Tier 2 Cylinder Body
+  const topCylGrad = ctx.createLinearGradient(stageCx - topTierRx, 0, stageCx + topTierRx, 0);
+  topCylGrad.addColorStop(0, '#070A0E');
+  topCylGrad.addColorStop(0.25, '#18212C');
+  topCylGrad.addColorStop(0.5, '#F5E6AB');
+  topCylGrad.addColorStop(0.75, '#18212C');
+  topCylGrad.addColorStop(1, '#070A0E');
+  ctx.fillStyle = topCylGrad;
+  ctx.fillRect(stageCx - topTierRx, topTierY, topTierRx * 2, topTierHeight);
+  drawOval(ctx, stageCx, topTierY + topTierHeight, topTierRx, topTierRy);
+
+  // Tier 2 Top Surface (Glossy White/Platinum Cap)
+  const topSurfaceGrad = ctx.createRadialGradient(stageCx, topTierY, 0, stageCx, topTierY, topTierRx);
+  topSurfaceGrad.addColorStop(0, '#FFFFFF');
+  topSurfaceGrad.addColorStop(0.45, '#EBF2F8');
+  topSurfaceGrad.addColorStop(0.8, '#899EAF');
+  topSurfaceGrad.addColorStop(1, '#1B2533');
+  ctx.fillStyle = topSurfaceGrad;
+  drawOval(ctx, stageCx, topTierY, topTierRx, topTierRy);
+
+  // Tier 2 Top Gold Beveled Rim
+  const goldRimGrad = ctx.createLinearGradient(stageCx - topTierRx, topTierY, stageCx + topTierRx, topTierY);
+  goldRimGrad.addColorStop(0, '#B38728');
+  goldRimGrad.addColorStop(0.5, '#FFFFFF');
+  goldRimGrad.addColorStop(1, '#AA771C');
+  ctx.strokeStyle = goldRimGrad;
+  ctx.lineWidth = 3.5;
+  strokeOval(ctx, stageCx, topTierY, topTierRx, topTierRy);
+
+  // 4. Hero Product Scaling & Placement
+  const targetH = 550;
+  const targetW = 540;
+  const srcW = productImg.width;
+  const srcH = productImg.height;
+  const scale = Math.min(targetW / srcW, targetH / srcH);
+  const destW = srcW * scale;
+  const destH = srcH * scale;
+  const destLeft = (w - destW) / 2;
+  const destTop = topTierY - destH + 18;
+
+  // 4.1 Glossy Mirror Product Reflection
+  ctx.save();
+  ctx.globalAlpha = 0.20;
+  ctx.translate(0, (topTierY + 6) * 2);
+  ctx.scale(1, -1);
+  ctx.drawImage(productImg, destLeft, topTierY + 6, destW, destH * 0.35);
+  ctx.restore();
+
+  // Contact Drop Shadow
+  const contactShadow = ctx.createRadialGradient(stageCx, topTierY, 10, stageCx, topTierY, destW * 0.4);
+  contactShadow.addColorStop(0, 'rgba(0,0,0,0.8)');
+  contactShadow.addColorStop(1, 'transparent');
+  ctx.fillStyle = contactShadow;
+  drawOval(ctx, stageCx, topTierY + 2, destW * 0.38, 12);
+
+  // Draw Hero Product
+  ctx.drawImage(productImg, destLeft, destTop, destW, destH);
+
+  // 5. Value Trust Badges
+  drawPillBadge(ctx, 40, 240, '🇰🇷 100% Original Korea', true);
+  drawPillBadge(ctx, 40, 315, '🌿 Skin Friendly Formula', true);
+  drawPillBadge(ctx, w - 40, 240, '⚡ Fast Delivery BD', false);
+  drawPillBadge(ctx, w - 40, 315, '🛡️ Authentic Guarantee', false);
+
+  // 6. Top Header Ribbon
+  ctx.fillStyle = '#F2090D12';
+  ctx.fillRect(0, 0, w, 92);
+  
+  ctx.strokeStyle = '#E5B83A';
+  ctx.lineWidth = 3;
+  ctx.beginPath();
+  ctx.moveTo(0, 92);
+  ctx.lineTo(w, 92);
+  ctx.stroke();
+
+  ctx.fillStyle = '#E5B83A';
+  ctx.font = 'bold 34px Plus Jakarta Sans, sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('✨ GLAMOUR\'S TOUCH ✨', w / 2, 52);
+
+  ctx.fillStyle = '#FFF4D0';
+  ctx.font = '17px Plus Jakarta Sans, sans-serif';
+  ctx.fillText('대한민국 프리미엄 스킨케어 • 100% AUTHENTIC KOREAN COSMETICS', w / 2, 80);
+
+  // 7. Product Title Card
+  const cleanTitle = title.length > 60 ? title.substring(0, 58) + '...' : title;
+  const titleCardTop = h - 235;
+  const titleCardBottom = h - 128;
+  
+  ctx.fillStyle = '#EA0B0E14';
+  roundRect(ctx, 28, titleCardTop, w - 56, titleCardBottom - titleCardTop, 18);
+  ctx.fill();
+
+  ctx.strokeStyle = '#55E5B83A';
+  ctx.lineWidth = 2;
+  roundRect(ctx, 28, titleCardTop, w - 56, titleCardBottom - titleCardTop, 18);
+  ctx.stroke();
+
+  ctx.fillStyle = '#FFFFFF';
+  ctx.font = 'bold 27px Plus Jakarta Sans, Hind Siliguri, sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText(cleanTitle, w / 2, titleCardTop + 42);
+
+  ctx.fillStyle = '#E5B83A';
+  ctx.font = 'bold 20px Hind Siliguri, sans-serif';
+  ctx.fillText('গ্লাস স্কিন ও দাগহীন উজ্জ্বলতার কোরিয়ান সিক্রেট • সরাসরি কোরিয়া থেকে আমদানিকৃত', w / 2, titleCardTop + 78);
+
+  // 8. Bottom WhatsApp Order Ribbon (Green Banner)
+  const footerTop = h - 118;
+  const footerGrad = ctx.createLinearGradient(0, footerTop, w, h);
+  footerGrad.addColorStop(0, '#25D366');
+  footerGrad.addColorStop(1, '#1EB855');
+  ctx.fillStyle = footerGrad;
+  ctx.fillRect(0, footerTop, w, 118);
+
+  ctx.fillStyle = '#FFFFFF';
+  ctx.font = 'bold 32px Plus Jakarta Sans, sans-serif';
+  ctx.textAlign = 'left';
+  ctx.fillText('💬 WhatsApp: 01712-426871', 35, footerTop + 48);
+
+  ctx.fillStyle = '#053314';
+  ctx.font = 'bold 21px Plus Jakarta Sans, sans-serif';
+  ctx.fillText('🌐 Website: glamourstouch.com  •  📞 Call: 01712-426871', 35, footerTop + 90);
+
+  // 8.1 Render Scannable QR Code on Bottom Right
+  await drawWhatsAppQrOnCanvas(ctx, w - 130, footerTop + 11, 96);
+
+  // 9. Outer Gold Frame Edge
+  ctx.strokeStyle = '#88E5B83A';
+  ctx.lineWidth = 6;
+  ctx.strokeRect(3, 3, w - 6, h - 6);
+}
+
+function drawOval(ctx, cx, cy, rx, ry) {
+  ctx.beginPath();
+  ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+  ctx.fill();
+}
+
+function strokeOval(ctx, cx, cy, rx, ry) {
+  ctx.beginPath();
+  ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+  ctx.stroke();
+}
+
+function roundRect(ctx, x, y, width, height, radius) {
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+  ctx.lineTo(x + width - radius, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+  ctx.lineTo(x + width, y + height - radius);
+  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+  ctx.lineTo(x + radius, y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+  ctx.lineTo(x, y + radius);
+  ctx.quadraticCurveTo(x, y, x + radius, y);
+  ctx.closePath();
+}
+
+function drawPillBadge(ctx, x, y, text, isLeft) {
+  ctx.font = 'bold 18px Plus Jakarta Sans, Hind Siliguri, sans-serif';
+  const textWidth = ctx.measureText(text).width;
+  const pillW = textWidth + 28;
+  const pillH = 36;
+  const pillX = isLeft ? x : x - pillW;
+  const pillY = y - 22;
+
+  ctx.fillStyle = '#D90E141B';
+  roundRect(ctx, pillX, pillY, pillW, pillH, 18);
+  ctx.fill();
+
+  ctx.strokeStyle = '#55E5B83A';
+  ctx.lineWidth = 1.5;
+  roundRect(ctx, pillX, pillY, pillW, pillH, 18);
+  ctx.stroke();
+
+  ctx.fillStyle = '#FFF0C8';
+  ctx.textAlign = 'left';
+  ctx.fillText(text, pillX + 14, pillY + 24);
+}
+
+async function drawWhatsAppQrOnCanvas(ctx, x, y, size) {
+  // White background container
+  ctx.fillStyle = '#FFFFFF';
+  roundRect(ctx, x - 4, y - 4, size + 8, size + 8, 10);
+  ctx.fill();
+
+  // Create temporary QR element
+  const qrContainer = document.getElementById('qrcodeHidden');
+  qrContainer.innerHTML = '';
+  new QRCode(qrContainer, {
+    text: 'https://wa.me/8801712426871',
+    width: size,
+    height: size,
+    colorDark: '#0B2E13',
+    colorLight: '#FFFFFF',
+    correctLevel: QRCode.CorrectLevel.M
+  });
+
+  await new Promise(r => setTimeout(r, 80));
+  const qrImg = qrContainer.querySelector('img') || qrContainer.querySelector('canvas');
+  if (qrImg) {
+    ctx.drawImage(qrImg, x, y, size, size);
+  }
+}
+
+// --- 5. Customer Care & Inbox AI ---
+function initInboxAI() {
+  const customerMsgInput = document.getElementById('inboxCustomerMsg');
+  const storeContextInput = document.getElementById('inboxStoreContext');
+  const generateBtn = document.getElementById('generateInboxReplyBtn');
+  const statusMsg = document.getElementById('inboxStatusMsg');
+  const repliesCard = document.getElementById('inboxRepliesCard');
+  const reply1 = document.getElementById('replyText1');
+  const reply2 = document.getElementById('replyText2');
+  const reply3 = document.getElementById('replyText3');
+
+  generateBtn.addEventListener('click', async () => {
+    const query = customerMsgInput.value.trim();
+    const storeInfo = storeContextInput.value.trim();
+    const apiKey = localStorage.getItem('opal_gemini_api_key') || '';
+    const model = localStorage.getItem('opal_selected_model') || 'gemini-3.6-flash';
+
+    if (!query) {
+      alert('Please enter a customer message');
+      return;
+    }
+
+    statusMsg.classList.remove('hidden');
+    statusMsg.textContent = '⏳ Generating 3 sweet & polite sales replies with Gemma AI...';
+    generateBtn.disabled = true;
+
+    try {
+      if (apiKey) {
+        const prompt = `A customer sent this message in Glamour's Touch inbox:
+'${query}'
+Store Info: ${storeInfo}
+
+Write 3 ready-to-copy customer responses in natural, sweet BENGALI (বাংলা).
+Format exactly with:
+---REPLY1---
+(Instant polite greeting and direct answer with price & benefits)
+---REPLY2---
+(Order confirmation closer asking for Name, Address, and Phone number)
+---REPLY3---
+(1-click WhatsApp order link: https://wa.me/8801712426871 and hotline 01712-426871)`;
+
+        const result = await callGeminiApi(apiKey, model, prompt);
+        const parts = result.split(/---REPLY[123]---/);
+        
+        reply1.textContent = (parts[1] || 'আসসালামু আলাইকুম প্রিয় কাস্টমার! আমাদের গ্লাস স্কিন সিরামের দাম মাত্র ৳১৬০০। এটি ১০০% আসল কোরিয়ান প্রডাক্ট।').trim();
+        reply2.textContent = (parts[2] || 'অর্ডারটি কনফার্ম করতে আপনার নাম, সম্পূর্ণ ঠিকানা এবং মোবাইল নম্বরটি লিখে পাঠান। আমরা দ্রুত ক্যাশ অন ডেলিভারিতে পাঠিয়ে দেবো!').trim();
+        reply3.textContent = (parts[3] || 'সরাসরি হোয়াটসঅ্যাপে দ্রুত অর্ডার করতে ক্লিক করুন: https://wa.me/8801712426871\nহটলাইন: 01712-426871').trim();
+      } else {
+        // High quality offline fallback template
+        reply1.textContent = `আসসালামু আলাইকুম প্রিয় আপু/ভাইয়া! 🥰\nআমাদের কাছে ১০০% অরিজিনাল কোরিয়ান স্কিনকেয়ার প্রোডাক্ট রয়েছে।\n\n💰 অফার মূল্য: ৳ ১,০৬০ (রেগুলার ৳ ১,৪৭০)\n🚚 হোম ডেলিভারি: ঢাকায় ৳৭০, ঢাকার বাইরে ৳১৩০\n\nএটি নিয়মিত ব্যবহারে ত্বক হবে কাচের মতো চকচকে ও দাগহীন! 🌸`;
+        reply2.textContent = `অর্ডারটি কনফার্ম করতে অনুগ্রহ করে আপনার:\n১. নাম\n২. সম্পূর্ণ ঠিকানা (জেলা/থানা সহ)\n৩. মোবাইল নম্বর\n\nলিখে পাঠিয়ে দিন। আমরা দ্রুত প্রোডাক্ট পাঠিয়ে দেবো! ধন্যবাদ। 🛍️`;
+        reply3.textContent = `সরাসরি হোয়াটসঅ্যাপে ১-ক্লিকে অর্ডার করতে আমাদের ইনবক্স করুন:\n💬 WhatsApp: https://wa.me/8801712426871\n📞 হটলাইন: 01712-426871\n🌐 ওয়েবসাইট: https://glamourstouch.com`;
+      }
+
+      repliesCard.classList.remove('hidden');
+      statusMsg.classList.add('hidden');
+      repliesCard.scrollIntoView({ behavior: 'smooth' });
+    } catch (e) {
+      statusMsg.textContent = `❌ Error: ${e.message}`;
+    }
+
+    generateBtn.disabled = false;
+  });
+}
+
+// --- 6. History Management ---
+function initHistory() {
+  const historyContainer = document.getElementById('historyListContainer');
+  const clearBtn = document.getElementById('clearHistoryBtn');
+
+  function renderHistory() {
+    const list = JSON.parse(localStorage.getItem('opal_history') || '[]');
+    if (list.length === 0) {
+      historyContainer.innerHTML = `
+        <div class="empty-state">
+          <span class="icon-empty">📭</span>
+          <p>No generations yet. Create your first 3D poster or copy!</p>
+        </div>`;
+      return;
+    }
+
+    historyContainer.innerHTML = list.map(item => `
+      <div class="app-card">
+        <div class="app-icon">${item.type === '3D Poster' ? '🎨' : '💬'}</div>
+        <div class="app-info">
+          <h3>${item.title}</h3>
+          <p>${item.price || item.type}</p>
+          <span class="meta-tag">Saved at ${item.date}</span>
+        </div>
+      </div>
+    `).join('');
+  }
+
+  clearBtn.addEventListener('click', () => {
+    localStorage.removeItem('opal_history');
+    renderHistory();
+  });
+
+  renderHistory();
+}
+
+function saveGenerationToHistory(item) {
+  const list = JSON.parse(localStorage.getItem('opal_history') || '[]');
+  list.unshift(item);
+  localStorage.setItem('opal_history', JSON.stringify(list.slice(0, 30)));
+}