khondokartowsif171
1285 lines
51 KiB
JavaScript
1285 lines
51 KiB
JavaScript
// Google Opal AI - Master Mini-App Studio & 3D Poster Lab Engine v5.0
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initNavigation();
|
|
initSettings();
|
|
initPosterLab();
|
|
initMiniAppsHub();
|
|
initMiniAppBuilder();
|
|
initInboxAI();
|
|
initHistory();
|
|
});
|
|
|
|
// --- Global Navigation ---
|
|
window.switchToTab = function(tabId) {
|
|
const navItems = document.querySelectorAll('.nav-item');
|
|
const tabPages = document.querySelectorAll('.tab-page');
|
|
|
|
navItems.forEach(n => {
|
|
if (n.getAttribute('data-tab') === tabId) {
|
|
n.classList.add('active');
|
|
} else {
|
|
n.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
tabPages.forEach(p => {
|
|
if (p.id === tabId) {
|
|
p.classList.add('active');
|
|
} else {
|
|
p.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
};
|
|
|
|
function initNavigation() {
|
|
const navItems = document.querySelectorAll('.nav-item');
|
|
navItems.forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
const targetTabId = item.getAttribute('data-tab');
|
|
switchToTab(targetTabId);
|
|
});
|
|
});
|
|
|
|
// Language Toggle
|
|
const langBtn = document.getElementById('langToggleBtn');
|
|
let currentLang = 'BN';
|
|
if (langBtn) {
|
|
langBtn.addEventListener('click', () => {
|
|
currentLang = currentLang === 'BN' ? 'EN' : 'BN';
|
|
langBtn.textContent = currentLang === 'BN' ? 'đ āĻŦāĻžāĻ' : 'đ EN';
|
|
});
|
|
}
|
|
}
|
|
|
|
window.copyText = function(elementId) {
|
|
const el = document.getElementById(elementId);
|
|
if (el) {
|
|
const text = el.value || el.textContent || '';
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
alert('â
Copied to Clipboard!');
|
|
}).catch(() => {
|
|
// Fallback
|
|
const ta = document.createElement('textarea');
|
|
ta.value = text;
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(ta);
|
|
alert('â
Copied to Clipboard!');
|
|
});
|
|
}
|
|
};
|
|
|
|
// --- Settings & Gemini 2.0 API Engine ---
|
|
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-2.0-flash';
|
|
const savedN8n = localStorage.getItem('opal_n8n_webhook') || 'https://n8n.auraajenticai.cloud/webhook/gt-auto-post';
|
|
|
|
if (apiKeyInput) apiKeyInput.value = savedKey;
|
|
if (modelSelect) modelSelect.value = savedModel;
|
|
if (n8nWebhookInput) n8nWebhookInput.value = savedN8n;
|
|
|
|
if (saveBtn) {
|
|
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) {
|
|
localStorage.setItem('opal_selected_model', model);
|
|
statusMsg.classList.remove('hidden');
|
|
statusMsg.style.color = '#10B981';
|
|
statusMsg.textContent = 'â
Settings saved (Offline templates active).';
|
|
return;
|
|
}
|
|
|
|
statusMsg.classList.remove('hidden');
|
|
statusMsg.style.color = '#F472B6';
|
|
statusMsg.textContent = 'âŗ Testing Gemini 2.0 AI connection with Google...';
|
|
|
|
try {
|
|
const res = await callGeminiApi(key, model, "Respond with: 'Google 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 = `â
Verified & Active: ${res.trim()}`;
|
|
}
|
|
} catch (e) {
|
|
statusMsg.style.color = '#EF4444';
|
|
statusMsg.textContent = `â Connection Error: ${e.message}`;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
async function callGeminiApi(apiKey, model, prompt) {
|
|
const activeModel = model || localStorage.getItem('opal_selected_model') || 'gemini-2.0-flash';
|
|
const url = `https://generativelanguage.googleapis.com/v1beta/models/${activeModel}: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().catch(() => ({}));
|
|
throw new Error(errData?.error?.message || `HTTP ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
return data?.candidates?.[0]?.content?.parts?.[0]?.text || '';
|
|
}
|
|
|
|
// --- Curated Pre-Built Mini-Apps Suite ---
|
|
const PREBUILT_MINI_APPS = [
|
|
{
|
|
id: 'gt_studio',
|
|
name: '3D Commercial Poster Lab',
|
|
emoji: 'đ¨',
|
|
category: 'ecommerce',
|
|
badge: 'GEM',
|
|
desc: 'āĻĒā§āĻ°āĻĄāĻžāĻā§āĻā§āĻ° āĻāĻŦāĻŋ, ā§ŠāĻĄāĻŋ āĻŽāĻžāĻ°ā§āĻŦā§āĻ˛ āĻ¸ā§āĻā§āĻ āĻ WhatsApp QR āĻ¸āĻš 4K āĻĢā§āĻ¸āĻŦā§āĻ āĻŦāĻŋāĻā§āĻāĻžāĻĒāĻ¨ āĻĒā§āĻ¸ā§āĻāĻžāĻ° āĻ¤ā§āĻ°āĻŋ āĻāĻ°ā§āĨ¤',
|
|
steps: '7 Steps âĸ 3D Canvas',
|
|
isPosterLab: true
|
|
},
|
|
{
|
|
id: 'inbox_ai',
|
|
name: 'Customer Care & Sales Auto-Reply',
|
|
emoji: 'đŦ',
|
|
category: 'sales',
|
|
badge: 'AI',
|
|
desc: 'āĻĢā§āĻ¸āĻŦā§āĻ āĻ āĻšā§ā§āĻžāĻāĻ¸āĻ
ā§āĻ¯āĻžāĻĒā§āĻ° āĻāĻžāĻ¸ā§āĻāĻŽāĻžāĻ°ā§āĻ° āĻĒā§āĻ°āĻļā§āĻ¨ā§āĻ° ā§ŠāĻāĻŋ āĻāĻ¨āĻ¸ā§āĻā§āĻ¯āĻžāĻ¨ā§āĻ āĻŽāĻŋāĻˇā§āĻāĻŋ āĻ āĻ¸ā§āĻ˛āĻ¸ āĻā§āĻ˛ā§āĻāĻŋāĻ āĻāĻ¤ā§āĻ¤āĻ° āĻŦāĻžāĻ¨āĻžā§āĨ¤',
|
|
steps: '3 Steps âĸ Sales Closer',
|
|
fields: [
|
|
{ id: 'field1', label: 'āĻāĻžāĻ¸ā§āĻāĻŽāĻžāĻ° āĻŽā§āĻ¸ā§āĻ (Customer Message)', placeholder: 'e.g. āĻāĻĒāĻ¨āĻžāĻĻā§āĻ° āĻ¸āĻŋāĻ°āĻžāĻŽā§āĻ° āĻĻāĻžāĻŽ āĻāĻ¤ āĻāĻ° āĻĄā§āĻ˛āĻŋāĻāĻžāĻ°āĻŋ āĻāĻžāĻ°ā§āĻ āĻāĻ¤?' },
|
|
{ id: 'field2', label: 'āĻĻā§āĻāĻžāĻ¨ā§āĻ° āĻ
āĻĢāĻžāĻ° āĻŦāĻž āĻšāĻāĻ˛āĻžāĻāĻ¨ (Store Context)', placeholder: 'e.g. āĻĻāĻžāĻŽ ā§§ā§Ļā§Ŧā§Ļ āĻāĻžāĻāĻž, āĻĸāĻžāĻāĻž ā§ā§Ļ āĻāĻžāĻāĻž, āĻšāĻāĻ˛āĻžāĻāĻ¨ ā§Ļā§§ā§ā§§ā§¨-ā§Ēā§¨ā§Ŧā§Žā§ā§§' }
|
|
],
|
|
promptTemplate: `You are an expert Bangladeshi e-commerce sales closer.
|
|
Customer message: {{field1}}
|
|
Store context: {{field2}}
|
|
|
|
Write 3 distinct ready-to-copy Bengali replies:
|
|
1. Instant sweet greeting with price & benefits
|
|
2. Direct order closing script asking for Name, Address, Phone
|
|
3. 1-Click WhatsApp direct order message with link https://wa.me/8801712426871`
|
|
},
|
|
{
|
|
id: 'veo_prompter',
|
|
name: 'Google Veo 3.1 Video Ad Prompter',
|
|
emoji: 'đŦ',
|
|
category: 'social',
|
|
badge: 'VEO 3.1',
|
|
desc: 'āĻā§āĻāĻ˛ Veo ā§Š.ā§§ āĻ Sora-āĻ° āĻāĻ¨ā§āĻ¯ āĻ¸āĻŋāĻ¨ā§āĻŽāĻžāĻāĻŋāĻ 9:16 āĻāĻŋāĻĄāĻŋāĻ āĻĒā§āĻ°āĻŽā§āĻĒāĻ, āĻā§āĻ¯āĻžāĻŽā§āĻ°āĻž āĻŽā§āĻļāĻ¨ āĻ āĻ˛āĻžāĻāĻāĻŋāĻ āĻāĻžāĻāĻĄ āĻŦāĻžāĻ¨āĻžā§āĨ¤',
|
|
steps: '4 Steps âĸ AI Video',
|
|
fields: [
|
|
{ id: 'field1', label: 'āĻĒā§āĻ°āĻĄāĻžāĻā§āĻā§āĻ° āĻ¨āĻžāĻŽ āĻ āĻ§āĻ°āĻŖ (Product)', placeholder: 'e.g. Medicube Collagen Jelly Cream' },
|
|
{ id: 'field2', label: 'āĻāĻŋāĻĄāĻŋāĻāĻ° āĻāĻžāĻāĻŦ āĻ āĻ¸ā§āĻāĻžāĻāĻ˛ (Style/Vibe)', placeholder: 'e.g. Luxury Korean Aesthetic Glow, Neon reflections, 4k macro' }
|
|
],
|
|
promptTemplate: `You are a world-class AI Video Prompt Engineer for Google Veo 3.1 and Sora.
|
|
Create an ultra-detailed, cinematic 9:16 vertical video prompt for:
|
|
Product: {{field1}}
|
|
Style/Vibe: {{field2}}
|
|
|
|
Include:
|
|
1. Master Cinematic Prompt (in English for AI video model)
|
|
2. Camera Movements (Macro close-up, 360 rotation, slow motion drop)
|
|
3. Studio Lighting & Physics (Softbox, caustics, rim light)
|
|
4. Bengali Narration / Voiceover Script (15 seconds)`
|
|
},
|
|
{
|
|
id: 'risk_scorer',
|
|
name: 'Gemini COD Fraud & Return Risk Shield',
|
|
emoji: 'đĄī¸',
|
|
category: 'tools',
|
|
badge: 'AI SHIELD',
|
|
desc: 'āĻāĻžāĻ¸ā§āĻāĻŽāĻžāĻ°ā§āĻ° āĻĢā§āĻ¨ āĻ¨āĻžāĻŽā§āĻŦāĻžāĻ°, āĻ āĻŋāĻāĻžāĻ¨āĻž āĻ āĻ
āĻ°ā§āĻĄāĻžāĻ°ā§āĻ° āĻĒāĻ°āĻŋāĻŽāĻžāĻŖ āĻŦāĻŋāĻļā§āĻ˛ā§āĻˇāĻŖ āĻāĻ°ā§ āĻ°āĻŋāĻāĻžāĻ°ā§āĻ¨ āĻĢā§āĻ°āĻĄ āĻ°āĻŋāĻ¸ā§āĻ āĻ¸ā§āĻā§āĻ° āĻĻā§ā§āĨ¤',
|
|
steps: 'Real-time âĸ Gemini 2.0',
|
|
fields: [
|
|
{ id: 'field1', label: 'āĻāĻžāĻ¸ā§āĻāĻŽāĻžāĻ°ā§āĻ° āĻĢā§āĻ¨ āĻ¨āĻžāĻŽā§āĻŦāĻžāĻ° (Phone Number)', placeholder: 'e.g. 01819998877' },
|
|
{ id: 'field2', label: 'āĻ āĻŋāĻāĻžāĻ¨āĻž āĻ āĻ
āĻ°ā§āĻĄāĻžāĻ°ā§āĻ° āĻŽā§āĻ˛ā§āĻ¯ (Address & Amount)', placeholder: 'e.g. Mirpur 10, Dhaka - Amount: ā§ŗ 3,200' }
|
|
],
|
|
promptTemplate: `You are an advanced e-commerce Fraud Risk Analysis Engine for Bangladesh logistics.
|
|
Phone: {{field1}}
|
|
Order Info: {{field2}}
|
|
|
|
Evaluate:
|
|
1. Risk Level: (LOW / MEDIUM / HIGH)
|
|
2. Recommendation: (Proceed with COD / Take Advance Delivery Charge ā§ŗ150 / Call to verify)
|
|
3. Short reasoning in clear Bengali.`
|
|
},
|
|
{
|
|
id: 'ecommerce_launch',
|
|
name: 'E-Commerce Viral Product Launch Kit',
|
|
emoji: 'đī¸',
|
|
category: 'ecommerce',
|
|
badge: 'VIRAL',
|
|
desc: 'āĻ¯ā§āĻā§āĻ¨ā§ āĻĒāĻŖā§āĻ¯ā§āĻ° āĻāĻāĻ°ā§āĻˇāĻŖā§ā§ āĻĢā§āĻ¸āĻŦā§āĻ āĻĒā§āĻ¸ā§āĻ āĻā§āĻ¯āĻžāĻĒāĻļāĻ¨, āĻĒā§āĻāĻ¨ āĻĒā§ā§āĻ¨ā§āĻ āĻšā§āĻ āĻ āĻ
āĻĢāĻžāĻ° āĻāĻĒāĻŋ āĻ¤ā§āĻ°āĻŋ āĻāĻ°ā§āĨ¤',
|
|
steps: '5 Steps âĸ Marketing',
|
|
fields: [
|
|
{ id: 'field1', label: 'āĻĒā§āĻ°āĻĄāĻžāĻā§āĻā§āĻ° āĻ¨āĻžāĻŽ āĻ āĻā§āĻ¯āĻžāĻāĻžāĻāĻ°āĻŋ (Product Name)', placeholder: 'e.g. Korean Snail Mucin Power Essence' },
|
|
{ id: 'field2', label: 'āĻŽā§āĻ˛ āĻ¸ā§āĻŦāĻŋāĻ§āĻž āĻ āĻ
āĻĢāĻžāĻ° (Key Benefits & Price)', placeholder: 'e.g. āĻŦā§āĻ°āĻŖā§āĻ° āĻĻāĻžāĻ āĻĻā§āĻ° āĻāĻ°ā§, āĻĄāĻŋāĻĒ āĻŽā§ā§āĻļā§āĻāĻžāĻ°āĻžāĻāĻāĻŋāĻ, āĻĻāĻžāĻŽ ā§ŗā§§,ā§Ēā§Ģā§Ļ (āĻ
āĻĢāĻžāĻ° ā§¨ā§Ģ% āĻāĻžā§)' }
|
|
],
|
|
promptTemplate: `You are a high-converting Facebook ad copywriter in Bangladesh.
|
|
Create a complete viral product launch post in attractive Bengali for:
|
|
Product: {{field1}}
|
|
Benefits & Offer: {{field2}}
|
|
|
|
Format:
|
|
- 3 Viral Opening Hooks (Emoji heavy)
|
|
- Problem & Solution story
|
|
- Special Limited Time Offer & Delivery Info
|
|
- Urgent Call-to-Action with WhatsApp & Website link`
|
|
},
|
|
{
|
|
id: 'tiktok_hooks',
|
|
name: 'TikTok & Meta Reels Viral Hook Matrix',
|
|
emoji: 'đĨ',
|
|
category: 'social',
|
|
badge: 'HOOKS',
|
|
desc: 'āĻĒā§āĻ°āĻĨāĻŽ ā§Š āĻ¸ā§āĻā§āĻ¨ā§āĻĄā§ āĻāĻžāĻ¸ā§āĻāĻŽāĻžāĻ°ā§āĻ° āĻā§āĻ āĻāĻāĻā§ āĻĢā§āĻ˛āĻžāĻ° āĻŽāĻ¤ā§ ā§ĢāĻāĻŋ āĻ¸āĻžāĻāĻā§āĻ˛āĻāĻŋāĻā§āĻ¯āĻžāĻ˛ āĻāĻžāĻāĻ°āĻžāĻ˛ āĻšā§āĻ āĻ¤ā§āĻ°āĻŋ āĻāĻ°ā§āĨ¤',
|
|
steps: '5 Viral Hooks âĸ Reels',
|
|
fields: [
|
|
{ id: 'field1', label: 'āĻĒā§āĻ°āĻĄāĻžāĻā§āĻ āĻŦāĻž āĻŦāĻŋāĻˇā§ā§āĻ° āĻ¨āĻžāĻŽ (Product / Topic)', placeholder: 'e.g. Korean Glass Skin Facial Foam' },
|
|
{ id: 'field2', label: 'āĻāĻžāĻ°ā§āĻā§āĻ āĻ
āĻĄāĻŋā§ā§āĻ¨ā§āĻ¸ (Target Audience)', placeholder: 'e.g. āĻ¯āĻžāĻĻā§āĻ° āĻŽā§āĻā§ āĻ°ā§āĻĻā§ āĻĒā§ā§āĻž āĻĻāĻžāĻ āĻ āĻŦā§āĻ°āĻŖā§āĻ° āĻ¸āĻŽāĻ¸ā§āĻ¯āĻž āĻ°ā§ā§āĻā§' }
|
|
],
|
|
promptTemplate: `You are a viral TikTok & Instagram Reels growth strategist.
|
|
Create 5 powerful 3-second visual + verbal hooks in Bengali for:
|
|
Product: {{field1}}
|
|
Target Audience: {{field2}}
|
|
|
|
Format each hook with:
|
|
- Visual Action (Screen text & actor action)
|
|
- Spoken Audio Hook (High curiosity / urgency)
|
|
- Psychology trigger explanation`
|
|
},
|
|
{
|
|
id: 'urgency_sales',
|
|
name: 'Flash Sale & Urgency Campaign Copywriter',
|
|
emoji: 'đˇī¸',
|
|
category: 'sales',
|
|
badge: 'OFFER',
|
|
desc: 'ā§¨ā§Ē āĻāĻŖā§āĻāĻžāĻ° āĻĢā§āĻ˛ā§āĻ¯āĻžāĻļ āĻ¸ā§āĻ˛, āĻ¸ā§āĻāĻ āĻā§āĻ˛āĻŋā§āĻžāĻ°ā§āĻ¨ā§āĻ¸ āĻ āĻāĻĻ/āĻŦā§āĻļāĻžāĻā§ āĻ
āĻĢāĻžāĻ°ā§āĻ° āĻšāĻžāĻ-āĻāĻ¨āĻāĻžāĻ°ā§āĻāĻŋāĻ āĻāĻĒāĻŋ āĻŦāĻžāĻ¨āĻžā§āĨ¤',
|
|
steps: 'Flash Sales âĸ Copy',
|
|
fields: [
|
|
{ id: 'field1', label: 'āĻ
āĻĢāĻžāĻ°ā§āĻ° āĻ¨āĻžāĻŽ āĻ āĻĄāĻŋāĻ¸āĻāĻžāĻāĻ¨ā§āĻ (Offer Details)', placeholder: 'e.g. 48 Hours Weekend Flash Sale - Flat 35% OFF' },
|
|
{ id: 'field2', label: 'āĻļāĻ°ā§āĻ¤ āĻ āĻĢā§āĻ°āĻŋ āĻĄā§āĻ˛āĻŋāĻāĻžāĻ°āĻŋ (Conditions & Perks)', placeholder: 'e.g. āĻĒā§āĻ°āĻĨāĻŽ ā§Ģā§Ļ āĻāĻ¨ā§āĻ° āĻāĻ¨ā§āĻ¯ āĻĢā§āĻ°āĻŋ āĻāĻŋāĻĢāĻ āĻ āĻĢā§āĻ°āĻŋ āĻšā§āĻŽ āĻĄā§āĻ˛āĻŋāĻāĻžāĻ°āĻŋ' }
|
|
],
|
|
promptTemplate: `Create an irresistible, high-urgency Flash Sale ad copy in natural Bengali for:
|
|
Campaign: {{field1}}
|
|
Perks: {{field2}}
|
|
|
|
Include FOMO triggers, countdown psychological anchors, and clear WhatsApp booking steps.`
|
|
},
|
|
{
|
|
id: 'courier_formatter',
|
|
name: 'Steadfast & Pathao Consignment Formatter',
|
|
emoji: 'đĻ',
|
|
category: 'tools',
|
|
badge: 'LOGISTICS',
|
|
desc: 'āĻ
āĻ°ā§āĻĄāĻžāĻ°ā§āĻ° āĻā§āĻā§āĻ¸āĻ āĻĨā§āĻā§ ā§§-āĻā§āĻ˛āĻŋāĻā§ āĻā§āĻ°āĻŋā§āĻžāĻ° āĻāĻ¨ā§āĻā§āĻ°āĻŋ āĻĢāĻ°āĻŽā§āĻ¯āĻžāĻ āĻ āĻĒā§āĻ°āĻŋāĻ¨ā§āĻ āĻ˛ā§āĻŦā§āĻ˛ āĻ¤ā§āĻ°āĻŋ āĻāĻ°ā§āĨ¤',
|
|
steps: '1-Click âĸ Logistics',
|
|
fields: [
|
|
{ id: 'field1', label: 'āĻāĻžāĻ¸ā§āĻāĻŽāĻžāĻ°ā§āĻ° āĻ¸āĻŽā§āĻĒā§āĻ°ā§āĻŖ āĻ
āĻ°ā§āĻĄāĻžāĻ° āĻā§āĻā§āĻ¸āĻ (Order Text)', placeholder: 'e.g. āĻ¨āĻžāĻŽ: āĻ¤āĻžāĻ¨āĻā§āĻ° āĻšāĻžāĻ¸āĻžāĻ¨, āĻĢā§āĻ¨: 01712345678, āĻ āĻŋāĻāĻžāĻ¨āĻž: āĻŦāĻžā§āĻŋ ā§§ā§¨, āĻ°ā§āĻĄ ā§Ģ, āĻ§āĻžāĻ¨āĻŽāĻ¨ā§āĻĄāĻŋ, āĻĸāĻžāĻāĻžāĨ¤ āĻĒā§āĻ°āĻĄāĻžāĻā§āĻ: ā§§ āĻĒāĻŋāĻ¸ āĻ¸āĻŋāĻ°āĻžāĻŽ (ā§ŗā§§ā§Ļā§Ŧā§Ļ)' },
|
|
{ id: 'field2', label: 'āĻĄā§āĻ˛āĻŋāĻāĻžāĻ°āĻŋ āĻāĻžāĻ°ā§āĻ āĻ āĻ¨ā§āĻ (COD & Notes)', placeholder: 'e.g. COD Amount: ā§ŗ 1130 (Dhaka inside ā§ŗ70)' }
|
|
],
|
|
promptTemplate: `Parse this customer order and structure it cleanly for Steadfast / Pathao Courier API and Print Packing Sticker:
|
|
Order Text: {{field1}}
|
|
COD Info: {{field2}}
|
|
|
|
Generate:
|
|
1. Structured CSV/JSON Format (Name, Phone, Address, COD, Instruction)
|
|
2. Clean Printable Packing Slip in Bengali.`
|
|
}
|
|
];
|
|
|
|
// --- Mini-Apps Hub Logic ---
|
|
let activeCategory = 'all';
|
|
|
|
function initMiniAppsHub() {
|
|
renderMiniApps();
|
|
|
|
const filterChips = document.querySelectorAll('.filter-chip');
|
|
filterChips.forEach(chip => {
|
|
chip.addEventListener('click', () => {
|
|
filterChips.forEach(c => c.classList.remove('active'));
|
|
chip.classList.add('active');
|
|
activeCategory = chip.getAttribute('data-cat');
|
|
renderMiniApps();
|
|
});
|
|
});
|
|
}
|
|
|
|
function getCustomMiniApps() {
|
|
return JSON.parse(localStorage.getItem('opal_custom_apps') || '[]');
|
|
}
|
|
|
|
function renderMiniApps() {
|
|
const container = document.getElementById('appsGridContainer');
|
|
if (!container) return;
|
|
|
|
const customApps = getCustomMiniApps();
|
|
const allApps = [...PREBUILT_MINI_APPS, ...customApps];
|
|
|
|
const filtered = activeCategory === 'all'
|
|
? allApps
|
|
: (activeCategory === 'custom' ? customApps : allApps.filter(a => a.category === activeCategory));
|
|
|
|
if (filtered.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="col-span-full empty-state" style="grid-column: 1 / -1;">
|
|
<span class="icon-empty">đ</span>
|
|
<p>No mini-apps found in this category. Click "+ Create App" to build one!</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = filtered.map(app => `
|
|
<div class="app-card">
|
|
<div class="app-card-top">
|
|
<div class="app-icon">${app.emoji || 'đ'}</div>
|
|
<span class="tag-gem">${app.badge || 'CUSTOM'}</span>
|
|
</div>
|
|
<div onclick="openAppRunner('${app.id}')" style="cursor: pointer; flex: 1;">
|
|
<h3>${app.name}</h3>
|
|
<p>${app.desc || 'AI powered dynamic mini-app for client dashboard.'}</p>
|
|
</div>
|
|
<div class="app-card-footer">
|
|
<span class="meta-tag">${app.steps || 'Gemini 2.0'}</span>
|
|
<div style="display: flex; gap: 6px;">
|
|
<button class="btn-embed-chip" onclick="openEmbedModal('${app.id}')" title="Embed Code">
|
|
đĻ Embed
|
|
</button>
|
|
<button class="btn-embed-chip" onclick="openAppRunner('${app.id}')" style="background: rgba(139, 92, 246, 0.2); color: #C084FC;">
|
|
⥠Run
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// --- Visual Mini-App Builder ---
|
|
function initMiniAppBuilder() {
|
|
const nameInput = document.getElementById('builderAppName');
|
|
const emojiInput = document.getElementById('builderAppEmoji');
|
|
const catSelect = document.getElementById('builderCategory');
|
|
const modelSelect = document.getElementById('builderModel');
|
|
const descInput = document.getElementById('builderDesc');
|
|
const f1Input = document.getElementById('builderField1');
|
|
const f2Input = document.getElementById('builderField2');
|
|
const templateInput = document.getElementById('builderPromptTemplate');
|
|
const saveBtn = document.getElementById('saveMiniAppBtn');
|
|
const testBtn = document.getElementById('testMiniAppBtn');
|
|
const statusMsg = document.getElementById('builderStatusMsg');
|
|
|
|
if (!saveBtn) return;
|
|
|
|
saveBtn.addEventListener('click', () => {
|
|
const name = nameInput.value.trim();
|
|
if (!name) {
|
|
alert('Please enter a Mini-App name');
|
|
return;
|
|
}
|
|
|
|
const newApp = {
|
|
id: 'custom_' + Date.now(),
|
|
name: name,
|
|
emoji: emojiInput.value.trim() || 'đ',
|
|
category: catSelect.value,
|
|
model: modelSelect.value,
|
|
badge: 'CUSTOM APP',
|
|
desc: descInput.value.trim() || 'Custom client dashboard mini-app.',
|
|
steps: 'Custom âĸ Gemini AI',
|
|
fields: [
|
|
{ id: 'field1', label: f1Input.value.trim() || 'Field 1', placeholder: 'Enter ' + (f1Input.value.trim() || 'Field 1') },
|
|
{ id: 'field2', label: f2Input.value.trim() || 'Field 2', placeholder: 'Enter ' + (f2Input.value.trim() || 'Field 2') }
|
|
],
|
|
promptTemplate: templateInput.value.trim(),
|
|
createdAt: new Date().toISOString()
|
|
};
|
|
|
|
const existing = getCustomMiniApps();
|
|
existing.unshift(newApp);
|
|
localStorage.setItem('opal_custom_apps', JSON.stringify(existing));
|
|
|
|
statusMsg.classList.remove('hidden');
|
|
statusMsg.style.color = '#10B981';
|
|
statusMsg.textContent = `đ Mini-App "${name}" successfully saved & added to Hub!`;
|
|
|
|
renderMiniApps();
|
|
setTimeout(() => {
|
|
switchToTab('tabApps');
|
|
statusMsg.classList.add('hidden');
|
|
}, 1200);
|
|
});
|
|
|
|
if (testBtn) {
|
|
testBtn.addEventListener('click', () => {
|
|
const name = nameInput.value.trim() || 'Test Mini-App';
|
|
const tempApp = {
|
|
id: 'test_temp',
|
|
name: name,
|
|
emoji: emojiInput.value.trim() || 'đ§Ē',
|
|
desc: descInput.value.trim() || 'Testing custom app runner',
|
|
fields: [
|
|
{ id: 'field1', label: f1Input.value.trim() || 'Field 1', placeholder: 'Input 1' },
|
|
{ id: 'field2', label: f2Input.value.trim() || 'Field 2', placeholder: 'Input 2' }
|
|
],
|
|
promptTemplate: templateInput.value.trim(),
|
|
model: modelSelect.value
|
|
};
|
|
launchRunnerWithApp(tempApp);
|
|
});
|
|
}
|
|
}
|
|
|
|
// --- Interactive Mini-App Runner (Modal) ---
|
|
let currentRunningApp = null;
|
|
|
|
window.openAppRunner = function(appId) {
|
|
if (appId === 'gt_studio') {
|
|
switchToTab('tabPosterLab');
|
|
return;
|
|
}
|
|
if (appId === 'inbox_ai') {
|
|
switchToTab('tabInboxAI');
|
|
return;
|
|
}
|
|
|
|
const allApps = [...PREBUILT_MINI_APPS, ...getCustomMiniApps()];
|
|
const app = allApps.find(a => a.id === appId);
|
|
if (!app) return;
|
|
|
|
launchRunnerWithApp(app);
|
|
};
|
|
|
|
function launchRunnerWithApp(app) {
|
|
currentRunningApp = app;
|
|
const modal = document.getElementById('appRunnerModal');
|
|
const title = document.getElementById('runnerModalTitle');
|
|
const desc = document.getElementById('runnerModalDesc');
|
|
const formBox = document.getElementById('runnerDynamicForm');
|
|
const resultBox = document.getElementById('runnerResultBox');
|
|
const statusMsg = document.getElementById('runnerStatusMsg');
|
|
|
|
title.innerHTML = `${app.emoji || 'đ'} ${app.name}`;
|
|
desc.textContent = app.desc || '';
|
|
resultBox.classList.add('hidden');
|
|
statusMsg.classList.add('hidden');
|
|
|
|
const fields = app.fields || [
|
|
{ id: 'field1', label: 'Input 1', placeholder: 'Enter details...' },
|
|
{ id: 'field2', label: 'Input 2', placeholder: 'Enter additional context...' }
|
|
];
|
|
|
|
formBox.innerHTML = fields.map((f, i) => `
|
|
<div class="form-group">
|
|
<label for="runner_${f.id}">${f.label}:</label>
|
|
<input type="text" id="runner_${f.id}" placeholder="${f.placeholder}" class="runner-input" data-var="${f.id}">
|
|
</div>
|
|
`).join('');
|
|
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
window.closeAppRunner = function() {
|
|
document.getElementById('appRunnerModal').classList.add('hidden');
|
|
currentRunningApp = null;
|
|
};
|
|
|
|
// Handle Mini-App Execution
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const execBtn = document.getElementById('runnerExecuteBtn');
|
|
if (execBtn) {
|
|
execBtn.addEventListener('click', async () => {
|
|
if (!currentRunningApp) return;
|
|
|
|
const statusMsg = document.getElementById('runnerStatusMsg');
|
|
const resultBox = document.getElementById('runnerResultBox');
|
|
const resultContent = document.getElementById('runnerResultContent');
|
|
|
|
statusMsg.classList.remove('hidden');
|
|
statusMsg.style.color = '#C084FC';
|
|
statusMsg.textContent = 'âŗ Processing with Google Gemini 2.0 AI...';
|
|
execBtn.disabled = true;
|
|
|
|
// Extract form values
|
|
const inputs = document.querySelectorAll('.runner-input');
|
|
let prompt = currentRunningApp.promptTemplate || 'Generate helpful response for the user.';
|
|
|
|
inputs.forEach(input => {
|
|
const varName = input.getAttribute('data-var');
|
|
const val = input.value.trim() || 'N/A';
|
|
const regex = new RegExp(`{{${varName}}}`, 'g');
|
|
prompt = prompt.replace(regex, val);
|
|
});
|
|
|
|
const apiKey = localStorage.getItem('opal_gemini_api_key') || '';
|
|
const model = currentRunningApp.model || localStorage.getItem('opal_selected_model') || 'gemini-2.0-flash';
|
|
|
|
try {
|
|
let output = '';
|
|
if (apiKey) {
|
|
output = await callGeminiApi(apiKey, model, prompt);
|
|
} else {
|
|
// Dynamic intelligent fallback
|
|
output = `⨠[Google Opal AI Offline Mode]\n\n` +
|
|
`Generated Output for: ${currentRunningApp.name}\n` +
|
|
`----------------------------------------\n` +
|
|
`ā§§. āĻ
āĻĢāĻžāĻ° āĻ āĻāĻžāĻ¸ā§āĻāĻŽāĻžāĻ° āĻ°ā§āĻ¸āĻĒāĻ¨ā§āĻ¸ āĻĒā§āĻ°āĻ¸ā§āĻ¤ā§āĻ¤ āĻāĻ°āĻž āĻšā§ā§āĻā§āĨ¤\n` +
|
|
`ā§¨. ā§§ā§Ļā§Ļ% āĻā§āĻ¨ā§āĻāĻ¨ āĻā§ā§āĻžāĻ˛āĻŋāĻāĻŋ āĻ āĻ¸ā§āĻĒāĻžāĻ°āĻĢāĻžāĻ¸ā§āĻ āĻĄā§āĻ˛āĻŋāĻāĻžāĻ°āĻŋ āĻ¨āĻŋāĻļā§āĻāĻŋāĻ¤ āĻāĻ°ā§āĻ¨āĨ¤\n` +
|
|
`ā§Š. āĻ¸āĻ°āĻžāĻ¸āĻ°āĻŋ āĻ¯ā§āĻāĻžāĻ¯ā§āĻ: https://wa.me/8801712426871\n\n` +
|
|
`đĄ āĻāĻŋāĻĒāĻ¸: Settings-āĻ āĻāĻŋā§ā§ āĻāĻĒāĻ¨āĻžāĻ° Google Gemini API Key āĻŦāĻ¸āĻžāĻ˛ā§ āĻ°āĻŋā§ā§āĻ˛-āĻāĻžāĻāĻŽ āĻāĻ¨āĻ˛āĻŋāĻŽāĻŋāĻā§āĻĄ āĻ˛āĻžāĻāĻ āĻ°ā§āĻ¸āĻĒāĻ¨ā§āĻ¸ āĻĒāĻžāĻŦā§āĻ¨!`;
|
|
}
|
|
|
|
resultContent.textContent = output.trim();
|
|
resultBox.classList.remove('hidden');
|
|
statusMsg.classList.add('hidden');
|
|
|
|
// Save to History
|
|
saveGenerationToHistory({
|
|
type: currentRunningApp.name,
|
|
title: currentRunningApp.name,
|
|
price: 'AI Generation',
|
|
date: new Date().toLocaleTimeString()
|
|
});
|
|
|
|
} catch (err) {
|
|
statusMsg.style.color = '#EF4444';
|
|
statusMsg.textContent = `â Error: ${err.message}`;
|
|
}
|
|
|
|
execBtn.disabled = false;
|
|
});
|
|
}
|
|
});
|
|
|
|
// --- 1-Click Client Dashboard Embed Modal ---
|
|
window.openEmbedModal = function(appId) {
|
|
const modal = document.getElementById('embedModal');
|
|
const title = document.getElementById('embedModalTitle');
|
|
const iframeBox = document.getElementById('embedIframeCode');
|
|
const apiUrlBox = document.getElementById('embedApiUrl');
|
|
|
|
const allApps = [...PREBUILT_MINI_APPS, ...getCustomMiniApps()];
|
|
const app = allApps.find(a => a.id === appId) || { name: 'Opal Mini-App', id: appId };
|
|
|
|
title.innerHTML = `đĻ Embed "${app.name}" in Client Dashboard`;
|
|
|
|
const baseUrl = 'https://opal.auraajenticai.cloud';
|
|
iframeBox.textContent = `<iframe src="${baseUrl}/?app=${app.id}" width="100%" height="650" style="border:none; border-radius:18px; box-shadow:0 8px 32px rgba(0,0,0,0.4);" allow="clipboard-write"></iframe>`;
|
|
apiUrlBox.textContent = `${baseUrl}/api/v1/mini-app/run?app_id=${app.id}`;
|
|
|
|
modal.classList.remove('hidden');
|
|
};
|
|
|
|
window.closeEmbedModal = function() {
|
|
document.getElementById('embedModal').classList.add('hidden');
|
|
};
|
|
|
|
// --- Masterpiece 3D Canvas Poster Engine ---
|
|
let selectedStageTheme = 'obsidian_gold';
|
|
|
|
function initPosterLab() {
|
|
const productInput = document.getElementById('productInput');
|
|
const productPrice = document.getElementById('productPrice');
|
|
const customBadgeInput = document.getElementById('customBadgeInput');
|
|
const aspectRatioSelect = document.getElementById('aspectRatioSelect');
|
|
const brandSelect = document.getElementById('brandWatermarkSelect');
|
|
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 canvasContainer = document.getElementById('canvasContainer');
|
|
const downloadPosterBtn = document.getElementById('downloadPosterBtn');
|
|
const shareWhatsAppBtn = document.getElementById('shareWhatsAppBtn');
|
|
|
|
// Stage Theme Selector
|
|
const themeChips = document.querySelectorAll('#themeSelectorGroup .theme-chip');
|
|
themeChips.forEach(chip => {
|
|
chip.addEventListener('click', () => {
|
|
themeChips.forEach(c => c.classList.remove('active'));
|
|
chip.classList.add('active');
|
|
selectedStageTheme = chip.getAttribute('data-theme');
|
|
});
|
|
});
|
|
|
|
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();
|
|
const badgeText = customBadgeInput ? customBadgeInput.value.trim() : 'đ°đˇ 100% Original Korea';
|
|
const aspect = aspectRatioSelect ? aspectRatioSelect.value : '1:1';
|
|
const brand = brandSelect ? brandSelect.value : 'glamourstouch';
|
|
|
|
posterStatusText.classList.remove('hidden');
|
|
posterStatusText.style.color = '#F59E0B';
|
|
posterStatusText.textContent = 'âŗ Rendering 3D stage with GPU canvas blend...';
|
|
generatePosterBtn.disabled = true;
|
|
|
|
try {
|
|
let productImg = attachedImageBitmap;
|
|
let title = "Authentic Korean K-Beauty Care";
|
|
|
|
if (!productImg) {
|
|
const resolved = await resolveProductUrl(inputVal);
|
|
if (resolved && resolved.imageUrl) {
|
|
title = resolved.title || inputVal;
|
|
productImg = await loadImage(resolved.imageUrl);
|
|
} else {
|
|
const fallbackUrl = `https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&h=800&fit=crop`;
|
|
productImg = await loadImage(fallbackUrl);
|
|
title = inputVal;
|
|
}
|
|
}
|
|
|
|
if (productImg) {
|
|
if (aspect === '9:16') {
|
|
posterCanvas.width = 1080;
|
|
posterCanvas.height = 1920;
|
|
canvasContainer.classList.add('aspect-reels');
|
|
} else {
|
|
posterCanvas.width = 1080;
|
|
posterCanvas.height = 1080;
|
|
canvasContainer.classList.remove('aspect-reels');
|
|
}
|
|
|
|
await render3DCommercialPoster(posterCanvas, productImg, title, priceVal, badgeText, selectedStageTheme, aspect, brand);
|
|
|
|
posterResultCard.classList.remove('hidden');
|
|
posterStatusText.classList.add('hidden');
|
|
posterResultCard.scrollIntoView({ behavior: 'smooth' });
|
|
|
|
saveGenerationToHistory({
|
|
type: '3D Poster',
|
|
title: title,
|
|
price: priceVal,
|
|
date: new Date().toLocaleTimeString()
|
|
});
|
|
} else {
|
|
posterStatusText.textContent = 'â Failed to load product image.';
|
|
}
|
|
} catch (err) {
|
|
posterStatusText.textContent = `â Error: ${err.message}`;
|
|
}
|
|
|
|
generatePosterBtn.disabled = false;
|
|
});
|
|
|
|
// Download
|
|
downloadPosterBtn.addEventListener('click', () => {
|
|
const link = document.createElement('a');
|
|
link.download = `Opal_3D_Poster_${Date.now()}.jpg`;
|
|
link.href = posterCanvas.toDataURL('image/jpeg', 0.95);
|
|
link.click();
|
|
});
|
|
|
|
// WhatsApp
|
|
shareWhatsAppBtn.addEventListener('click', () => {
|
|
const text = encodeURIComponent(`⨠100% Authentic Product Order!\nProduct: ${productInput.value}\nPrice: ${productPrice.value}\nWebsite: https://glamourstouch.com`);
|
|
window.open(`https://wa.me/8801712426871?text=${text}`, '_blank');
|
|
});
|
|
|
|
// n8n Auto-Post 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 configure n8n Webhook URL in Settings first!');
|
|
switchToTab('tabSettings');
|
|
return;
|
|
}
|
|
|
|
n8nPostStatusMsg.classList.remove('hidden');
|
|
n8nPostStatusMsg.style.color = '#38BDF8';
|
|
n8nPostStatusMsg.textContent = 'âŗ Sending 3D poster & copy to n8n Webhook...';
|
|
autoPostN8nBtn.disabled = true;
|
|
|
|
try {
|
|
const posterDataUrl = posterCanvas.toDataURL('image/jpeg', 0.92);
|
|
const payload = {
|
|
title: productInput.value.trim() || 'Authentic 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) return null;
|
|
if (input.match(/\.(jpeg|jpg|gif|png|webp)($|\?)/i)) {
|
|
return { title: 'Authentic Product', imageUrl: input };
|
|
}
|
|
|
|
const key = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZtY2x0cmpudXZ1b29hcmt2dWZuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzUxMzY3MDQsImV4cCI6MjA5MDcxMjcwNH0.PkSgBAZx41X4sZurfyOdxCVa01hkKTkyBhVkGzx_4y4';
|
|
|
|
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) {
|
|
try {
|
|
const res = await fetch(`https://fmcltrjnuvuooarkvufn.supabase.co/rest/v1/products?id=eq.${uuidMatch[0]}&select=*`, {
|
|
headers: { 'apikey': key, 'Authorization': `Bearer ${key}` }
|
|
});
|
|
const data = await res.json();
|
|
if (data && data.length > 0) {
|
|
const p = data[0];
|
|
return {
|
|
title: p.name || 'Authentic Korean Skincare',
|
|
price: p.price ? 'ā§ŗ ' + p.price : '',
|
|
imageUrl: p.image || p.image_url || (p.images && p.images[0]) || ''
|
|
};
|
|
}
|
|
} catch (e) {
|
|
console.warn('GT Supabase fetch by ID failed:', e);
|
|
}
|
|
}
|
|
|
|
try {
|
|
const cleanQuery = encodeURIComponent(input.replace(/https?:\/\/[^\s]+/g, '').trim().slice(0, 30));
|
|
if (cleanQuery) {
|
|
const res = await fetch(`https://fmcltrjnuvuooarkvufn.supabase.co/rest/v1/products?name=ilike.*${cleanQuery}*&select=*&limit=1`, {
|
|
headers: { 'apikey': key, 'Authorization': `Bearer ${key}` }
|
|
});
|
|
const data = await res.json();
|
|
if (data && data.length > 0) {
|
|
const p = data[0];
|
|
return {
|
|
title: p.name || input,
|
|
price: p.price ? 'ā§ŗ ' + p.price : '',
|
|
imageUrl: p.image || p.image_url || (p.images && p.images[0]) || ''
|
|
};
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.warn('GT Supabase search by name failed:', e);
|
|
}
|
|
|
|
return { title: input, imageUrl: 'https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&h=800&fit=crop' };
|
|
}
|
|
|
|
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';
|
|
}
|
|
|
|
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;
|
|
};
|
|
img.src = loadUrl;
|
|
});
|
|
}
|
|
|
|
// --- 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');
|
|
const w = canvas.width;
|
|
const h = canvas.height;
|
|
|
|
// Theme palettes
|
|
const THEMES = {
|
|
obsidian_gold: {
|
|
bgCenter: '#18212D', bgMid: '#0C1117', bgOuter: '#05080C',
|
|
spotlightColor: '#FFFFFF', goldRim: '#E5B83A', ringColor: '#66E5B83A',
|
|
pedestalTop: '#FFFFFF', pedestalMid: '#EBF2F8', pedestalDark: '#1B2533',
|
|
headerTitle: '⨠GLAMOUR\'S TOUCH â¨', headerSub: 'ëíë¯ŧęĩ íëĻŦ미ė ė¤í¨āĻā§āĻ¯āĻŧāĻžāĻ° âĸ 100% AUTHENTIC KOREAN COSMETICS'
|
|
},
|
|
rose_quartz: {
|
|
bgCenter: '#2D1824', bgMid: '#170C13', bgOuter: '#0C0509',
|
|
spotlightColor: '#FFF0F5', goldRim: '#F472B6', ringColor: '#F472B666',
|
|
pedestalTop: '#FFF5F8', pedestalMid: '#FCE7F3', pedestalDark: '#371829',
|
|
headerTitle: 'đ¸ SNEHALATA AURA đ¸', headerSub: 'PREMIUM LUXURY LIFESTYLE âĸ 100% AUTHENTIC BEAUTY'
|
|
},
|
|
cyber_neon: {
|
|
bgCenter: '#0F172A', bgMid: '#060E1A', bgOuter: '#02060D',
|
|
spotlightColor: '#E0F2FE', goldRim: '#06B6D4', ringColor: '#06B6D466',
|
|
pedestalTop: '#F0FDF4', pedestalMid: '#CFFAFE', pedestalDark: '#082F49',
|
|
headerTitle: 'đ AURA ENTERPRISE đ', headerSub: 'NEXT-GEN AGENTIC COMMERCE âĸ AI EMPOWERED'
|
|
},
|
|
botanical_eco: {
|
|
bgCenter: '#14281E', bgMid: '#0B1711', bgOuter: '#040B07',
|
|
spotlightColor: '#F0FDF4', goldRim: '#10B981', ringColor: '#10B98166',
|
|
pedestalTop: '#F7FEE7', pedestalMid: '#DCFCE7', pedestalDark: '#064E3B',
|
|
headerTitle: 'đŋ PURE BOTANICAL CARE đŋ', headerSub: 'ORGANIC DERMATOLOGY âĸ CLINICALLY PROVEN'
|
|
}
|
|
};
|
|
|
|
const currentTheme = THEMES[theme] || THEMES.obsidian_gold;
|
|
|
|
// 1. Background Radial Gradient
|
|
const stageCy = aspect === '9:16' ? h * 0.46 : h * 0.44;
|
|
const bgGrad = ctx.createRadialGradient(w / 2, stageCy, 50, w / 2, stageCy, w * 0.75);
|
|
bgGrad.addColorStop(0, currentTheme.bgCenter);
|
|
bgGrad.addColorStop(0.6, currentTheme.bgMid);
|
|
bgGrad.addColorStop(1, currentTheme.bgOuter);
|
|
ctx.fillStyle = bgGrad;
|
|
ctx.fillRect(0, 0, w, h);
|
|
|
|
// 2. Spotlight
|
|
const stageCx = w / 2;
|
|
const stageRadius = w * 0.38;
|
|
|
|
const spotGrad = ctx.createRadialGradient(stageCx, stageCy, 0, stageCx, stageCy, stageRadius);
|
|
spotGrad.addColorStop(0, '#FFFFFF');
|
|
spotGrad.addColorStop(0.48, '#FFFFFF');
|
|
spotGrad.addColorStop(0.68, currentTheme.spotlightColor);
|
|
spotGrad.addColorStop(0.85, '#64748B');
|
|
spotGrad.addColorStop(1, 'transparent');
|
|
|
|
ctx.fillStyle = spotGrad;
|
|
ctx.beginPath();
|
|
ctx.arc(stageCx, stageCy, stageRadius, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
|
|
// Glow Rings
|
|
ctx.strokeStyle = currentTheme.ringColor;
|
|
ctx.lineWidth = 2.5;
|
|
ctx.beginPath();
|
|
ctx.arc(stageCx, stageCy, stageRadius * 0.96, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
|
|
ctx.setLineDash([12, 12]);
|
|
ctx.beginPath();
|
|
ctx.arc(stageCx, stageCy, stageRadius * 0.91, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
|
|
// 3. 3D Dual-Tier Podium
|
|
const baseTierY = aspect === '9:16' ? 1220 : 745;
|
|
const baseTierRx = w * 0.38;
|
|
const baseTierRy = 34;
|
|
const baseTierHeight = 26;
|
|
|
|
// Base 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);
|
|
|
|
// Base Cylinder Body
|
|
const baseCylGrad = ctx.createLinearGradient(stageCx - baseTierRx, 0, stageCx + baseTierRx, 0);
|
|
baseCylGrad.addColorStop(0, '#090D12');
|
|
baseCylGrad.addColorStop(0.5, '#475569');
|
|
baseCylGrad.addColorStop(1, '#090D12');
|
|
ctx.fillStyle = baseCylGrad;
|
|
ctx.fillRect(stageCx - baseTierRx, baseTierY, baseTierRx * 2, baseTierHeight);
|
|
drawOval(ctx, stageCx, baseTierY + baseTierHeight, baseTierRx, baseTierRy);
|
|
drawOval(ctx, stageCx, baseTierY, baseTierRx, baseTierRy);
|
|
|
|
// Top Tier
|
|
const topTierY = aspect === '9:16' ? 1180 : 708;
|
|
const topTierRx = w * 0.31;
|
|
const topTierRy = 28;
|
|
const topTierHeight = 34;
|
|
|
|
const topCylGrad = ctx.createLinearGradient(stageCx - topTierRx, 0, stageCx + topTierRx, 0);
|
|
topCylGrad.addColorStop(0, '#070A0E');
|
|
topCylGrad.addColorStop(0.5, currentTheme.goldRim);
|
|
topCylGrad.addColorStop(1, '#070A0E');
|
|
ctx.fillStyle = topCylGrad;
|
|
ctx.fillRect(stageCx - topTierRx, topTierY, topTierRx * 2, topTierHeight);
|
|
drawOval(ctx, stageCx, topTierY + topTierHeight, topTierRx, topTierRy);
|
|
|
|
// Top Surface Cap
|
|
const topSurfaceGrad = ctx.createRadialGradient(stageCx, topTierY, 0, stageCx, topTierY, topTierRx);
|
|
topSurfaceGrad.addColorStop(0, currentTheme.pedestalTop);
|
|
topSurfaceGrad.addColorStop(0.5, currentTheme.pedestalMid);
|
|
topSurfaceGrad.addColorStop(1, currentTheme.pedestalDark);
|
|
ctx.fillStyle = topSurfaceGrad;
|
|
drawOval(ctx, stageCx, topTierY, topTierRx, topTierRy);
|
|
|
|
// Gold Beveled Rim
|
|
ctx.strokeStyle = currentTheme.goldRim;
|
|
ctx.lineWidth = 3.5;
|
|
strokeOval(ctx, stageCx, topTierY, topTierRx, topTierRy);
|
|
|
|
// 4. Product Scaling & Placement
|
|
const targetH = aspect === '9:16' ? 560 : 500;
|
|
const targetW = aspect === '9:16' ? 580 : 520;
|
|
const srcW = productImg.width || 500;
|
|
const srcH = productImg.height || 500;
|
|
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;
|
|
|
|
// Floor Reflection (Multiply blend)
|
|
ctx.save();
|
|
ctx.globalCompositeOperation = 'multiply';
|
|
ctx.globalAlpha = 0.25;
|
|
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);
|
|
|
|
// Product Image (Multiply blended to wipe white background)
|
|
ctx.save();
|
|
ctx.globalCompositeOperation = 'multiply';
|
|
ctx.drawImage(productImg, destLeft, destTop, destW, destH);
|
|
ctx.restore();
|
|
|
|
// 5. Value Trust Badges
|
|
const badgeY1 = aspect === '9:16' ? 340 : 240;
|
|
const badgeY2 = badgeY1 + 75;
|
|
drawPillBadge(ctx, 40, badgeY1, badgeText, true, currentTheme.goldRim);
|
|
drawPillBadge(ctx, 40, badgeY2, 'đŋ Skin Friendly Formula', true, currentTheme.goldRim);
|
|
drawPillBadge(ctx, w - 40, badgeY1, '⥠Fast Delivery BD', false, currentTheme.goldRim);
|
|
drawPillBadge(ctx, w - 40, badgeY2, 'đĄī¸ Authentic Guarantee', false, currentTheme.goldRim);
|
|
|
|
// 6. Header Ribbon
|
|
ctx.fillStyle = '#F2090D12';
|
|
ctx.fillRect(0, 0, w, 92);
|
|
|
|
ctx.strokeStyle = currentTheme.goldRim;
|
|
ctx.lineWidth = 3;
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, 92);
|
|
ctx.lineTo(w, 92);
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = currentTheme.goldRim;
|
|
ctx.font = 'bold 32px Plus Jakarta Sans, sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(currentTheme.headerTitle, w / 2, 52);
|
|
|
|
ctx.fillStyle = '#FFF4D0';
|
|
ctx.font = '16px Plus Jakarta Sans, sans-serif';
|
|
ctx.fillText(currentTheme.headerSub, w / 2, 80);
|
|
|
|
// 7. Product Title Card
|
|
const cleanTitle = title.length > 60 ? title.substring(0, 58) + '...' : title;
|
|
const titleCardTop = h - (aspect === '9:16' ? 320 : 235);
|
|
const titleCardBottom = h - (aspect === '9:16' ? 150 : 128);
|
|
|
|
ctx.fillStyle = '#EA0B0E14';
|
|
roundRect(ctx, 28, titleCardTop, w - 56, titleCardBottom - titleCardTop, 18);
|
|
ctx.fill();
|
|
|
|
ctx.strokeStyle = currentTheme.goldRim + '88';
|
|
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 = currentTheme.goldRim;
|
|
ctx.font = 'bold 21px Hind Siliguri, sans-serif';
|
|
ctx.fillText(`${price} âĸ ā§§ā§Ļā§Ļ% āĻāĻ¸āĻ˛ āĻā§āĻ¯āĻžāĻ°āĻžāĻ¨ā§āĻāĻŋ âĸ āĻĻā§āĻ°ā§āĻ¤ āĻšā§āĻŽ āĻĄā§āĻ˛āĻŋāĻāĻžāĻ°āĻŋ`, w / 2, titleCardTop + 80);
|
|
|
|
// 8. Bottom WhatsApp Banner
|
|
const footerHeight = aspect === '9:16' ? 140 : 118;
|
|
const footerTop = h - footerHeight;
|
|
const footerGrad = ctx.createLinearGradient(0, footerTop, w, h);
|
|
footerGrad.addColorStop(0, '#25D366');
|
|
footerGrad.addColorStop(1, '#1EB855');
|
|
ctx.fillStyle = footerGrad;
|
|
ctx.fillRect(0, footerTop, w, footerHeight);
|
|
|
|
ctx.fillStyle = '#FFFFFF';
|
|
ctx.font = 'bold 32px Plus Jakarta Sans, sans-serif';
|
|
ctx.textAlign = 'left';
|
|
ctx.fillText('đŦ WhatsApp Order: 01712-426871', 35, footerTop + 48);
|
|
|
|
ctx.fillStyle = '#053314';
|
|
ctx.font = 'bold 20px Plus Jakarta Sans, sans-serif';
|
|
ctx.fillText('đ Website: glamourstouch.com âĸ đ Hotline: 01712-426871', 35, footerTop + 90);
|
|
|
|
// QR Code
|
|
await drawWhatsAppQrOnCanvas(ctx, w - 130, footerTop + 11, 96);
|
|
|
|
// Outer Border
|
|
ctx.strokeStyle = currentTheme.goldRim + '99';
|
|
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, goldColor = '#E5B83A') {
|
|
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 = goldColor + '66';
|
|
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) {
|
|
ctx.fillStyle = '#FFFFFF';
|
|
roundRect(ctx, x - 4, y - 4, size + 8, size + 8, 10);
|
|
ctx.fill();
|
|
|
|
const qrContainer = document.getElementById('qrcodeHidden');
|
|
if (qrContainer) {
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- Customer Care & Inbox AI Dedicated Studio ---
|
|
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');
|
|
|
|
if (!generateBtn) return;
|
|
|
|
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-2.0-flash';
|
|
|
|
if (!query) {
|
|
alert('Please enter a customer message');
|
|
return;
|
|
}
|
|
|
|
statusMsg.classList.remove('hidden');
|
|
statusMsg.textContent = 'âŗ Generating 3 sweet & polite sales replies with Gemini AI...';
|
|
generateBtn.disabled = true;
|
|
|
|
try {
|
|
if (apiKey) {
|
|
const prompt = `A customer sent this message in e-commerce 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 {
|
|
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;
|
|
});
|
|
}
|
|
|
|
// --- History Management ---
|
|
function initHistory() {
|
|
const historyContainer = document.getElementById('historyListContainer');
|
|
const clearBtn = document.getElementById('clearHistoryBtn');
|
|
|
|
function renderHistory() {
|
|
if (!historyContainer) return;
|
|
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 mini-app generation!</p>
|
|
</div>`;
|
|
return;
|
|
}
|
|
|
|
historyContainer.innerHTML = list.map(item => `
|
|
<div class="app-card">
|
|
<div class="app-card-top">
|
|
<div class="app-icon">${item.type === '3D Poster' ? 'đ¨' : 'âĄ'}</div>
|
|
<span class="tag-gem">${item.type}</span>
|
|
</div>
|
|
<h3>${item.title}</h3>
|
|
<p>${item.price || item.type}</p>
|
|
<div class="app-card-footer">
|
|
<span class="meta-tag">Saved at ${item.date}</span>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
if (clearBtn) {
|
|
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)));
|
|
}
|