Files
khondokar c176fe4cb6 Rebrand: Google Opal AI / DeepMind -> Aura Studio (drop impersonation)
Renamed the product across index.html + app.js + manifest.json + sw.js: Google Opal AI -> Aura
Studio, Google DeepMind -> Aura AI, Opal Mini-Apps -> Aura Mini-Apps, Gemini 2.0 -> Gemini 3.5.
Kept accurate tech attribution (Google Veo/Gemini). Internal identifiers (localStorage keys, SW
cache) unchanged except a version bump to force PWA refresh (aura-studio-v9, sw.js?v=9).
2026-09-05 02:05:59 +00:00

1077 lines
65 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Aura Studio - AI Mini-App Engine</title>
<!-- iOS & Android PWA Meta Tags -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Aura Studio">
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%238B5CF6'/><text x='50' y='65' font-size='50' text-anchor='middle' fill='white'>💎</text></svg>">
<!-- Google Fonts & QR Code Library -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Hind+Siliguri:wght@400;600;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<link rel="stylesheet" href="style.css?v=6">
</head>
<body>
<!-- Top App Header -->
<header class="app-header">
<div class="brand-group" onclick="switchToTab('tabApps')">
<div class="logo-box">💎</div>
<div class="brand-titles">
<h1>Aura Studio <span>Studio</span> <span class="brand-badge">PRO</span></h1>
<p data-i18n="brand_subtitle">Aura AI • Mini-App Engine</p>
</div>
</div>
<div class="header-actions">
<button class="pill-btn primary" onclick="switchToTab('tabBuilder')">
<span data-i18n="btn_add_miniapp">✨ + Mini-App</span>
</button>
<button id="langToggleBtn" class="pill-btn">🌐 EN</button>
</div>
</header>
<!-- Main Scrollable App Container -->
<main class="main-container">
<!-- TAB 1: 3D Poster Lab (Universal 3D Stage Engine) -->
<section id="tabPosterLab" class="tab-page">
<div class="card">
<div class="card-header">
<span class="icon">🎨</span>
<div>
<h2 data-i18n="poster_title">3D Commercial Poster Lab</h2>
<p data-i18n="poster_subtitle">আসল প্রডাক্টের ছবি, ৩ডি মার্বেল স্টেজ ও WhatsApp QR সহ বিজ্ঞাপন পোস্টার বানান</p>
</div>
</div>
<!-- 8K Natural Photography & 3D Stage Theme Selector -->
<div class="form-group">
<label style="display:flex; justify-content:space-between; align-items:center;">
<span data-i18n="theme_arch_label">৮কে ন্যাচারাল ও কমার্শিয়াল স্টুডিও ফ্রেম (8K Natural & 3D Styles):</span>
<span style="font-size:10.5px; color:var(--primary); font-weight:700;" data-i18n="theme_arch_badge">32 Photorealistic & Commercial Styles</span>
</label>
<!-- Theme Category Filter Chips -->
<div class="category-filter-bar" id="themeCategoryFilter" style="margin-bottom: 10px;">
<button type="button" class="filter-chip active" data-filter="all" data-i18n="theme_cat_all">🔥 All (32)</button>
<button type="button" class="filter-chip" data-filter="natural" data-i18n="theme_cat_natural">🌿 8K Natural (7)</button>
<button type="button" class="filter-chip" data-filter="stage" data-i18n="theme_cat_stage">👑 3D Stages (20)</button>
<button type="button" class="filter-chip" data-filter="grid" data-i18n="theme_cat_grid">🔲 Grid Layouts (5)</button>
</div>
<div class="theme-selector-group" id="themeSelectorGroup">
<!-- 🌿 8K NATURAL & LIFESTYLE COMMERCIAL STYLES -->
<div class="theme-chip active" data-theme="natural_scandi_wood" data-category="natural">
<span class="icon">🪵</span>
<span class="name">Scandi Oak Studio</span>
<span class="tag">8K Natural Wood</span>
</div>
<div class="theme-chip" data-theme="natural_botanical_sun" data-category="natural">
<span class="icon">🌿</span>
<span class="name">Botanical Sunbeam</span>
<span class="tag">8K Organic Sun</span>
</div>
<div class="theme-chip" data-theme="natural_kbeauty_glow" data-category="natural">
<span class="icon">🪞</span>
<span class="name">K-Beauty Travertine</span>
<span class="tag">8K Morning Glow</span>
</div>
<div class="theme-chip" data-theme="natural_warm_cafe" data-category="natural">
<span class="icon">☕</span>
<span class="name">Artisan Walnut</span>
<span class="tag">8K Warm Café</span>
</div>
<div class="theme-chip" data-theme="natural_sunlit_travertine" data-category="natural">
<span class="icon">🏖️</span>
<span class="name">Sun-Kissed Sand</span>
<span class="tag">8K Golden Hour</span>
</div>
<div class="theme-chip" data-theme="natural_minimal_flatlay" data-category="natural">
<span class="icon">📐</span>
<span class="name">Studio Flatlay Pro</span>
<span class="tag">8K Clean Flatlay</span>
</div>
<div class="theme-chip" data-theme="natural_velvet_drape" data-category="natural">
<span class="icon">👑</span>
<span class="name">Royal Silk Drape</span>
<span class="tag">8K Silk Lifestyle</span>
</div>
<!-- 🔲 GRID LAYOUT ARCHITECTURES -->
<div class="theme-chip" data-theme="bento_grid_luxe" data-category="grid">
<span class="icon">🍱</span>
<span class="name">Apple Bento Grid</span>
<span class="tag">4-Card Bento</span>
</div>
<div class="theme-chip" data-theme="swiss_modular_grid" data-category="grid">
<span class="icon">📐</span>
<span class="name">Swiss Modular Grid</span>
<span class="tag">4-Quadrant CAD</span>
</div>
<div class="theme-chip" data-theme="blueprint_cad_grid" data-category="grid">
<span class="icon">📏</span>
<span class="name">Blueprint CAD Grid</span>
<span class="tag">Engineering</span>
</div>
<div class="theme-chip" data-theme="polaroid_film_grid" data-category="grid">
<span class="icon">🎞️</span>
<span class="name">Filmstrip Gallery Grid</span>
<span class="tag">3-Panel Film</span>
</div>
<div class="theme-chip" data-theme="cyber_hud_grid" data-category="grid">
<span class="icon">🛸</span>
<span class="name">Tron Cyber HUD Grid</span>
<span class="tag">Telemetry 4-Box</span>
</div>
<!-- 👑 3D COMMERCIAL STAGES & PODIUMS -->
<div class="theme-chip" data-theme="obsidian_gold" data-category="stage">
<span class="icon">👑</span>
<span class="name">Obsidian Gold</span>
<span class="tag">Royal Slate</span>
</div>
<div class="theme-chip" data-theme="mughal_heritage" data-category="stage">
<span class="icon">🏛️</span>
<span class="name">Mughal Heritage</span>
<span class="tag">Antique Arch</span>
</div>
<div class="theme-chip" data-theme="brutalist_street" data-category="stage">
<span class="icon">🛹</span>
<span class="name">Brutalist Street</span>
<span class="tag">Urban Bold</span>
</div>
<div class="theme-chip" data-theme="cyber_neon" data-category="stage">
<span class="icon">⚡</span>
<span class="name">Cyber Neon</span>
<span class="tag">Tech Matrix</span>
</div>
<div class="theme-chip" data-theme="editorial_vogue" data-category="stage">
<span class="icon">📰</span>
<span class="name">Vogue Editorial</span>
<span class="tag">Magazine Cover</span>
</div>
<div class="theme-chip" data-theme="botanical_eco" data-category="stage">
<span class="icon">🌿</span>
<span class="name">Botanical Eco</span>
<span class="tag">Rainforest</span>
</div>
<div class="theme-chip" data-theme="holographic_prism" data-category="stage">
<span class="icon">🌈</span>
<span class="name">Holographic 3D</span>
<span class="tag">Iridescent Prism</span>
</div>
<div class="theme-chip" data-theme="tokyo_synthwave" data-category="stage">
<span class="icon">🌆</span>
<span class="name">Tokyo Synthwave</span>
<span class="tag">Neon Sunset</span>
</div>
<div class="theme-chip" data-theme="frost_titanium" data-category="stage">
<span class="icon">🪐</span>
<span class="name">Frost Titanium</span>
<span class="tag">Aerospace Steel</span>
</div>
<div class="theme-chip" data-theme="vip_blackcard" data-category="stage">
<span class="icon">🖤</span>
<span class="name">VIP Black Card</span>
<span class="tag">Embossed Foil</span>
</div>
<div class="theme-chip" data-theme="sunset_amber" data-category="stage">
<span class="icon">🍯</span>
<span class="name">Sunset Amber</span>
<span class="tag">Golden Hour</span>
</div>
<div class="theme-chip" data-theme="flash_sale_matrix" data-category="stage">
<span class="icon">🔥</span>
<span class="name">Flash Sale Matrix</span>
<span class="tag">Hot Deals</span>
</div>
<div class="theme-chip" data-theme="velvet_burgundy" data-category="stage">
<span class="icon">🍷</span>
<span class="name">Velvet Burgundy</span>
<span class="tag">Silk Nights</span>
</div>
<div class="theme-chip" data-theme="rose_quartz" data-category="stage">
<span class="icon">🌸</span>
<span class="name">Rose Quartz</span>
<span class="tag">K-Beauty Glass</span>
</div>
<div class="theme-chip" data-theme="midnight_sapphire" data-category="stage">
<span class="icon">💎</span>
<span class="name">Midnight Sapphire</span>
<span class="tag">Cobalt Crystal</span>
</div>
<div class="theme-chip" data-theme="nordic_minimal" data-category="stage">
<span class="icon">❄️</span>
<span class="name">Nordic Apple</span>
<span class="tag">Clean Studio</span>
</div>
<div class="theme-chip" data-theme="art_deco_gilded" data-category="stage">
<span class="icon">✨</span>
<span class="name">Art Deco Gilded</span>
<span class="tag">Gatsby 1920</span>
</div>
<div class="theme-chip" data-theme="cosmic_nebula" data-category="stage">
<span class="icon">🌌</span>
<span class="name">Cosmic Nebula</span>
<span class="tag">Deep Space</span>
</div>
<div class="theme-chip" data-theme="kraft_artisan" data-category="stage">
<span class="icon">📜</span>
<span class="name">Kraft Artisan</span>
<span class="tag">Vintage Paper</span>
</div>
<div class="theme-chip" data-theme="arcade_retro" data-category="stage">
<span class="icon">🕹️</span>
<span class="name">Arcade Cyber Pixel</span>
<span class="tag">8-Bit Pixel</span>
</div>
</div>
</div>
<!-- Aspect Ratio Switcher -->
<div class="form-group">
<label data-i18n="poster_aspect_label">পোস্টার সাইজ ও ব্র্যান্ড ওয়াটারমার্ক:</label>
<div class="form-row">
<select id="aspectRatioSelect">
<option value="1:1" selected>Square (1:1 • 1080x1080) — Facebook/Instagram Feed</option>
<option value="9:16">Portrait (9:16 • 1080x1920) — Stories & Reels</option>
</select>
<select id="brandWatermarkSelect">
<option value="glamourstouch" selected>✨ Glamour's Touch (Cosmetics & K-Beauty)</option>
<option value="snehalata">👗 Snehalata (Fashion, Saree & Lifestyle)</option>
<option value="panjabi">👑 Aura Heritage (Royal Designer Panjabi & Kabli)</option>
<option value="techvolt">📱 TechVolt (Gadgets & Smart Electronics)</option>
<option value="organic">🍯 Pranon Organic (Pure Honey & Natural Food)</option>
<option value="sneakerlab">👟 SneakerLab (Footwear & Streetwear)</option>
<option value="royale">💎 Aura Royale (Luxury Jewelry & Fragrance)</option>
<option value="custom">🛍️ Universal E-Commerce Merchant</option>
</select>
</div>
</div>
<!-- Poster Display Mode Switcher (Single vs Multi-Product Grid) -->
<div class="form-group">
<label data-i18n="poster_mode_label">ডিসপ্লে মোড (Display Mode):</label>
<div class="poster-mode-switcher" id="posterModeSwitcher">
<button type="button" class="poster-mode-btn active" data-mode="single" id="modeSingleBtn">
<span data-i18n="mode_single_btn">🎯 ১টি প্রোডাক্ট হিরো ৩ডি স্টেজ</span>
</button>
<button type="button" class="poster-mode-btn" data-mode="multi_grid" id="modeMultiBtn">
<span data-i18n="mode_multi_btn">🔲 মাল্টি-প্রোডাক্ট গ্রিড ভিউ (৩-৪টি প্রোডাক্ট)</span>
</button>
</div>
</div>
<!-- ================= SINGLE PRODUCT FORM ================= -->
<div id="singleProductFormContainer">
<!-- Trending Google Search Suggestions -->
<div class="form-group">
<label style="display:flex; justify-content:space-between; align-items:center;">
<span data-i18n="trends_label">🔥 গুগল ট্রেন্ডিং সার্চ (Google Trends 1-Click Load):</span>
<span style="font-size:10.5px; color:var(--primary); font-weight:600;" data-i18n="trends_badge">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" style="position: relative;">
<label for="productInput" style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px;">
<span data-i18n="product_input_label">প্রডাক্ট লিংক বা নাম (Product Link or Name):</span>
<button type="button" id="openCatalogModalBtn" class="pill-btn primary" style="padding:4px 10px; font-size:11px; cursor:pointer;" data-i18n="open_catalog_btn">🛍️ GT ক্যাটালগ লিস্ট (560+)</button>
</label>
<input type="text" id="productInput" data-i18n-ph="product_input_ph" placeholder="e.g. Silk Saree, Smartwatch, Pure Honey, Sneaker or Skincare" value="Medicube Collagen Jelly Cream" autocomplete="off">
<div id="productAutocompleteList" class="autocomplete-dropdown hidden"></div>
</div>
<div class="form-row">
<div class="form-group">
<label for="productPrice" data-i18n="product_price_label">মূল্য ও অফার (Price & Discount):</label>
<input type="text" id="productPrice" data-i18n-ph="product_price_ph" placeholder="e.g. ৳ ১,০৬০ (৳ ১,৪৭০) 28% OFF" value="৳ ১,০৬০ (৳ ১,৪৭০) 28% OFF">
</div>
<div class="form-group">
<label for="customBadgeInput" data-i18n="product_badge_label">কাস্টম ব্যাজ টেক্সট (Trust Badge):</label>
<input type="text" id="customBadgeInput" data-i18n-ph="product_badge_ph" placeholder="e.g. 🛡️ 100% Original Guarantee" value="🛡️ 100% Original Guarantee">
</div>
</div>
<div class="form-row">
<label class="file-upload-btn" for="photoFileInput">
📸 <span data-i18n="upload_photo_btn">iPhone / পিসি গ্যালারি থেকে ছবি আপলোড</span>
<input type="file" id="photoFileInput" accept="image/*">
</label>
<button id="clearPhotoBtn" class="pill-btn danger-text hidden" data-i18n="clear_photo_btn">✖ ছবি মুছুন</button>
</div>
<div id="photoPreviewContainer" class="photo-preview-box hidden">
<img id="attachedPhotoImg" src="" alt="Attached Photo">
<span class="badge-attached" data-i18n="photo_attached_badge">✅ Photo Attached</span>
</div>
</div>
<!-- ================= MULTI-PRODUCT GRID FORM ================= -->
<div id="multiProductFormContainer" class="hidden">
<div class="form-group">
<label style="display:flex; justify-content:space-between; align-items:center;">
<span data-i18n="grid_layout_label">গ্রিড লেআউট ফ্রেম (Multi-Product Grid Layout):</span>
<span style="font-size:10.5px; color:var(--primary); font-weight:700;" data-i18n="grid_layout_badge">3-4 Products Collage Engine</span>
</label>
<div class="form-row">
<select id="gridLayoutSelect">
<option value="2x2_quad" selected>🔲 2x2 Quad Grid (৪টি প্রোডাক্ট সমান গ্রিড)</option>
<option value="1_hero_3_bento">🏆 1 Hero + 3 Side Cards (১টি বড় + ৩টি ছোট বেন্টো)</option>
<option value="1_hero_2_trio">🥉 1 Hero + 2 Companion (৩টি প্রোডাক্ট ট্রায়ো গ্রিড)</option>
<option value="3_panel_strip">🎞️ 3-Panel Lookbook Strip (৩টি ভার্টিক্যাল কলাম)</option>
</select>
<input type="text" id="gridMainHeadlineInput" data-i18n-ph="grid_headline_ph" placeholder="পোস্টার মেইন হেডলাইন (e.g. ✨ 4-IN-1 MEGA COMBO)" value="✨ 4-IN-1 MEGA COMBO ROUTINE">
</div>
</div>
<!-- Multi-Product 1-Click Combos -->
<div class="form-group">
<label style="display:flex; justify-content:space-between; align-items:center;">
<span data-i18n="multi_combos_label">🎁 ট্রেন্ডিং মাল্টি-প্যাক কম্বো (1-Click Multi Combos):</span>
<span style="font-size:10.5px; color:var(--primary); font-weight:600;" data-i18n="multi_combos_badge">Full Catalog Combos</span>
</label>
<div class="trending-chips-bar" id="multiComboChips">
<button type="button" class="trend-chip active" data-combo="kbeauty_4">🌸 K-Beauty 4-Pack</button>
<button type="button" class="trend-chip" data-combo="panjabi_3">👑 Royal Panjabi Trio</button>
<button type="button" class="trend-chip" data-combo="tech_3">📱 TechVolt Trio</button>
<button type="button" class="trend-chip" data-combo="organic_3">🍯 Pure Nature Trio</button>
<button type="button" class="trend-chip" data-combo="sneaker_4">👟 SneakerLab 4-Pack</button>
</div>
</div>
<!-- 4 Interactive Product Slots -->
<div class="multi-product-slots-grid" id="multiSlotsContainer">
<!-- SLOT 1 -->
<div class="product-slot-card" id="slotCard1">
<div class="slot-header">
<span class="slot-title" data-i18n="slot1_title">🥇 Slot 1 (Hero/Top-Left)</span>
<label class="slot-upload-label" for="slotFile1">📸 <span data-i18n="slot_upload_btn">ছবি</span> <input type="file" id="slotFile1" class="slot-file-input" accept="image/*"></label>
</div>
<div class="slot-thumb-container" id="slotThumbBox1">
<img id="slotImg1" src="" class="hidden" alt="Slot 1">
<span id="slotPlaceholder1" style="font-size:11px; color:#64748B;" data-i18n="slot_placeholder_text">ছবি সিলেক্ট করুন</span>
</div>
<div class="slot-inputs-row">
<input type="text" id="slotTitle1" class="slot-input" data-i18n-ph="slot_title_ph" placeholder="প্রোডাক্ট নাম" value="Medicube Collagen Jelly Cream">
<input type="text" id="slotPrice1" class="slot-input" data-i18n-ph="slot_price_ph" placeholder="মূল্য" value="৳ ১,০৬০">
</div>
<input type="text" id="slotBadge1" class="slot-input" data-i18n-ph="slot_badge_ph" placeholder="ব্যাজ" value="🛡️ 100% Original">
</div>
<!-- SLOT 2 -->
<div class="product-slot-card" id="slotCard2">
<div class="slot-header">
<span class="slot-title" data-i18n="slot2_title">🥈 Slot 2 (Top-Right)</span>
<label class="slot-upload-label" for="slotFile2">📸 <span data-i18n="slot_upload_btn">ছবি</span> <input type="file" id="slotFile2" class="slot-file-input" accept="image/*"></label>
</div>
<div class="slot-thumb-container" id="slotThumbBox2">
<img id="slotImg2" src="" class="hidden" alt="Slot 2">
<span id="slotPlaceholder2" style="font-size:11px; color:#64748B;" data-i18n="slot_placeholder_text">ছবি সিলেক্ট করুন</span>
</div>
<div class="slot-inputs-row">
<input type="text" id="slotTitle2" class="slot-input" data-i18n-ph="slot_title_ph" placeholder="প্রোডাক্ট নাম" value="Anua Heartleaf 77% Toner">
<input type="text" id="slotPrice2" class="slot-input" data-i18n-ph="slot_price_ph" placeholder="মূল্য" value="৳ ১,৪৮০">
</div>
<input type="text" id="slotBadge2" class="slot-input" data-i18n-ph="slot_badge_ph" placeholder="ব্যাজ" value="🌿 Soothing Care">
</div>
<!-- SLOT 3 -->
<div class="product-slot-card" id="slotCard3">
<div class="slot-header">
<span class="slot-title" data-i18n="slot3_title">🥉 Slot 3 (Bottom-Left)</span>
<label class="slot-upload-label" for="slotFile3">📸 <span data-i18n="slot_upload_btn">ছবি</span> <input type="file" id="slotFile3" class="slot-file-input" accept="image/*"></label>
</div>
<div class="slot-thumb-container" id="slotThumbBox3">
<img id="slotImg3" src="" class="hidden" alt="Slot 3">
<span id="slotPlaceholder3" style="font-size:11px; color:#64748B;" data-i18n="slot_placeholder_text">ছবি সিলেক্ট করুন</span>
</div>
<div class="slot-inputs-row">
<input type="text" id="slotTitle3" class="slot-input" data-i18n-ph="slot_title_ph" placeholder="প্রোডাক্ট নাম" value="COSRX Snail 96 Mucin Essence">
<input type="text" id="slotPrice3" class="slot-input" data-i18n-ph="slot_price_ph" placeholder="মূল্য" value="৳ ১,৩৫০">
</div>
<input type="text" id="slotBadge3" class="slot-input" data-i18n-ph="slot_badge_ph" placeholder="ব্যাজ" value="✨ Glass Skin Glow">
</div>
<!-- SLOT 4 -->
<div class="product-slot-card" id="slotCard4">
<div class="slot-header">
<span class="slot-title" data-i18n="slot4_title">🏅 Slot 4 (Bottom-Right)</span>
<label class="slot-upload-label" for="slotFile4">📸 <span data-i18n="slot_upload_btn">ছবি</span> <input type="file" id="slotFile4" class="slot-file-input" accept="image/*"></label>
</div>
<div class="slot-thumb-container" id="slotThumbBox4">
<img id="slotImg4" src="" class="hidden" alt="Slot 4">
<span id="slotPlaceholder4" style="font-size:11px; color:#64748B;" data-i18n="slot_placeholder_text">ছবি সিলেক্ট করুন</span>
</div>
<div class="slot-inputs-row">
<input type="text" id="slotTitle4" class="slot-input" data-i18n-ph="slot_title_ph" placeholder="প্রোডাক্ট নাম" value="Beauty of Joseon Sun Relief">
<input type="text" id="slotPrice4" class="slot-input" data-i18n-ph="slot_price_ph" placeholder="মূল্য" value="৳ ১,১৫০">
</div>
<input type="text" id="slotBadge4" class="slot-input" data-i18n-ph="slot_badge_ph" placeholder="ব্যাজ" value="☀️ SPF50+ PA++++">
</div>
</div>
</div>
<button id="generatePosterBtn" class="btn-primary">
<span class="btn-icon">🚀</span> <span data-i18n="btn_generate_poster">Generate 3D Commercial Poster (Canvas GPU)</span>
</button>
<p id="posterStatusText" class="status-msg hidden"></p>
</div>
<!-- Poster Canvas & Export Section -->
<div id="posterResultCard" class="card result-card hidden">
<div class="result-header">
<h3 id="posterResultTitle" data-i18n="poster_result_title">✨ Commercial Ad Poster Generated</h3>
<span class="gold-badge" id="posterThemeBadge">3D Obsidian & Gold</span>
</div>
<div id="canvasContainer" class="canvas-wrapper">
<canvas id="posterCanvas" width="1080" height="1080"></canvas>
</div>
<div class="action-buttons-row">
<button id="downloadPosterBtn" class="btn-action success-btn" data-i18n="btn_save_photos">
💾 Save to Photos
</button>
<button id="shareWhatsAppBtn" class="btn-action whatsapp-btn" data-i18n="btn_whatsapp_order">
💬 WhatsApp Order
</button>
</div>
<button id="autoPostN8nBtn" class="btn-primary" style="margin-top: 12px; background: linear-gradient(135deg, #1877F2, #0A58CA);">
<span class="btn-icon">🚀</span> <span data-i18n="btn_autopost_n8n">1-Click Auto Post to Facebook Page (via n8n)</span>
</button>
<p id="n8nPostStatusMsg" class="status-msg hidden"></p>
</div>
</section>
<!-- TAB 2: Curated & Dynamic Aura Mini-Apps Hub (DEFAULT HOME) -->
<section id="tabApps" class="tab-page active">
<div class="section-title-row">
<div>
<h2 data-i18n="hub_title">✨ Aura Mini-Apps Hub</h2>
<p style="font-size: 11.5px; color: var(--text-secondary); margin-top: 2px;" data-i18n="hub_subtitle">
সকল ক্যাটাগরির ই-কমার্সের জন্য কাস্টম এআই মিনি-অ্যাপ তৈরি ও এম্বেড করুন
</p>
</div>
<button class="pill-btn primary" onclick="switchToTab('tabBuilder')" data-i18n="btn_create_app">
+ Create App
</button>
</div>
<!-- Universal Category Filter Bar -->
<div class="category-filter-bar">
<button class="filter-chip active" data-cat="all" data-i18n="cat_all">🔥 All Niches</button>
<button class="filter-chip" data-cat="fashion" data-i18n="cat_fashion">👗 Fashion & Apparel</button>
<button class="filter-chip" data-cat="electronics" data-i18n="cat_electronics">📱 Tech & Gadgets</button>
<button class="filter-chip" data-cat="cosmetics" data-i18n="cat_cosmetics">💄 Beauty & Skincare</button>
<button class="filter-chip" data-cat="footwear" data-i18n="cat_footwear">👟 Shoes & Leather</button>
<button class="filter-chip" data-cat="organic" data-i18n="cat_organic">🍯 Organic & Food</button>
<button class="filter-chip" data-cat="sales" data-i18n="cat_sales">💬 Sales & Care</button>
<button class="filter-chip" data-cat="tools" data-i18n="cat_tools">⚙️ AI Logistics</button>
<button class="filter-chip" data-cat="custom" data-i18n="cat_custom">💎 Custom Apps</button>
</div>
<!-- Grid of Pre-built & Custom Mini-Apps -->
<div id="appsGridContainer" class="apps-grid">
<!-- Dynamically rendered by app.js -->
</div>
</section>
<!-- TAB 3: Visual Mini-App Builder (Create New Custom App) -->
<section id="tabBuilder" class="tab-page">
<div class="card">
<div class="card-header">
<span class="icon">🛠️</span>
<div>
<h2 data-i18n="builder_title">Visual Mini-App Builder</h2>
<p data-i18n="builder_subtitle">আপনার ক্লায়েন্ট ড্যাশবোর্ডের জন্য কয়েক ক্লিকে কাস্টম এআই মিনি-অ্যাপ তৈরি করুন</p>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="builderAppName" data-i18n="builder_app_name">অ্যাপের নাম (Mini-App Name):</label>
<input type="text" id="builderAppName" data-i18n-ph="builder_app_name_ph" placeholder="e.g. VIP Customer Offer Generator">
</div>
<div class="form-group">
<label for="builderAppEmoji" data-i18n="builder_app_emoji">আইকন/ইমোজি (App Icon):</label>
<input type="text" id="builderAppEmoji" placeholder="e.g. 🎁" value="🎁">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="builderCategory" data-i18n="builder_app_cat">ক্যাটাগরি (Category):</label>
<select id="builderCategory">
<option value="ecommerce">🛍️ E-Commerce & Retail</option>
<option value="social">📱 Social Media & Marketing</option>
<option value="sales">💬 Sales & Customer Care</option>
<option value="tools">⚙️ AI Utility & Automation</option>
</select>
</div>
<div class="form-group">
<label for="builderModel" data-i18n="builder_app_model">ডিফল্ট এআই মডেল (AI Model):</label>
<select id="builderModel">
<option value="gemini-2.0-flash">Gemini 3.5 Flash (Recommended)</option>
<option value="gemini-1.5-flash">Google Gemini 1.5 Flash</option>
<option value="gemma-2-27b-it">Google Gemma 2 (27B Open Weights)</option>
</select>
</div>
</div>
<div class="form-group">
<label for="builderDesc" data-i18n="builder_app_desc">সংক্ষিপ্ত বিবরণ (Short Description):</label>
<input type="text" id="builderDesc" data-i18n-ph="builder_app_desc_ph" placeholder="e.g. বিশেষ কাস্টমারদের জন্য আকর্ষণীয় অফার মেসেজ তৈরি করে।">
</div>
<div class="form-group">
<label data-i18n="builder_app_fields">ইনপুট ফিল্ডস (Input Fields for User):</label>
<div class="form-row">
<input type="text" id="builderField1" data-i18n-ph="builder_field1_ph" placeholder="Field 1 Label (e.g. Customer Name / Product)" value="কাস্টমারের নাম বা প্রডাক্ট">
<input type="text" id="builderField2" data-i18n-ph="builder_field2_ph" placeholder="Field 2 Label (e.g. Offer / Discount / Context)" value="অফার বা ডিসকাউন্টের পরিমাণ">
</div>
</div>
<div class="form-group">
<label for="builderPromptTemplate" data-i18n="builder_prompt_template">এআই প্রম্পট টেমপ্লেট (Prompt Template with Variables):</label>
<textarea id="builderPromptTemplate" rows="4" data-i18n-ph="builder_prompt_template_ph" placeholder="You are an expert AI copywriter. Generate a high converting message based on {{field1}} and {{field2}} in natural Bangla.">You are a professional Bangladeshi e-commerce sales assistant.
Create 3 high-converting, sweet and polite customer messages in Bengali for:
- Item/Subject: {{field1}}
- Offer/Context: {{field2}}
Format with clear bullet points, emojis, and a call-to-action.</textarea>
<small class="hint-text" data-i18n="builder_hint">💡 টেমপ্লেটের মধ্যে <code>{{field1}}</code> এবং <code>{{field2}}</code> স্বয়ংক্রিয়ভাবে ইউজারের ইনপুট দিয়ে প্রতিস্থাপিত হবে।</small>
</div>
<div class="form-row">
<button id="saveMiniAppBtn" class="btn-primary" data-i18n="btn_save_miniapp">
💾 Save Mini-App & Add to Hub
</button>
<button id="testMiniAppBtn" class="pill-btn" style="height: 100%; justify-content: center;" data-i18n="btn_test_miniapp">
🧪 Test Run App
</button>
</div>
<p id="builderStatusMsg" class="status-msg hidden"></p>
</div>
</section>
<!-- TAB UGC: Google Flow & Omni UGC Video Ads Studio (Veo 3.1) -->
<section id="tabUgcStudio" class="tab-page">
<div class="card">
<div class="card-header">
<span class="icon">🎬</span>
<div>
<h2 data-i18n="ugc_title">UGC Video Ads & Google Flow Studio</h2>
<p data-i18n="ugc_subtitle">Google Veo 3.1 ও Omni Video ইঞ্জিনের জন্য হাই-কনভার্টিং UGC স্টাইল প্রম্পট ও স্ক্রিপ্ট তৈরি করুন</p>
</div>
</div>
<!-- UGC Preset Templates Selector -->
<div class="form-group">
<label data-i18n="ugc_presets_label">জনপ্রিয় UGC স্টাইল লাইব্রেরি (Select UGC Style Preset):</label>
<div class="ugc-presets-grid" id="ugcPresetsGrid">
<div class="ugc-preset-card active" data-preset="unhinged_review">
<span class="icon">📱</span>
<h4 data-i18n="ugc_card_unhinged_title">Raw iPhone Review</h4>
<p data-i18n="ugc_card_unhinged_desc">রুমের আলোয় ফ্রন্ট ক্যামেরায় আনফিল্টার্ড বাস্তব রিভিউ ও প্রডাক্ট টেস্ট (Universal)।</p>
</div>
<div class="ugc-preset-card" data-preset="fashion_tryon">
<span class="icon">👗</span>
<h4 data-i18n="ugc_card_fashion_title">Fashion OOTD & Drape</h4>
<p data-i18n="ugc_card_fashion_desc">শাড়ি/লেডিস ড্রেস ট্রাই-অন, ফেব্রিকে জুম, ফিটিং ও স্লো-মো ওয়াক ট্রায়াল।</p>
</div>
<div class="ugc-preset-card" data-preset="panjabi_royal">
<span class="icon">👑</span>
<h4 data-i18n="ugc_card_panjabi_title">Royal Panjabi & Kabli</h4>
<p data-i18n="ugc_card_panjabi_desc">প্রিমিয়াম পাঞ্জাবি/কাবলি শোকেস, কলারের সূক্ষ্ম সুতার কাজ ও রাজকীয় ফিট।</p>
</div>
<div class="ugc-preset-card" data-preset="gadget_unboxing">
<span class="icon">⚡</span>
<h4 data-i18n="ugc_card_gadget_title">Gadget Sound & Stress Test</h4>
<p data-i18n="ugc_card_gadget_desc">স্মার্টওয়াচ/ইয়ারবাডস আনবক্সিং, ANC সাউন্ড টেস্ট ও ওয়াটারপ্রুফ ড্রপ টেস্ট।</p>
</div>
<div class="ugc-preset-card" data-preset="sneaker_flex">
<span class="icon">👟</span>
<h4 data-i18n="ugc_card_sneaker_title">Sneaker Flex & Kick Test</h4>
<p data-i18n="ugc_card_sneaker_desc">স্নিকার আনবক্সিং, সোল বেন্ড টেস্ট ও স্ট্রিট ওয়াক স্টাইলিশ লুক।</p>
</div>
<div class="ugc-preset-card" data-preset="organic_purity">
<span class="icon">🍯</span>
<h4 data-i18n="ugc_card_organic_title">Organic Honey Purity Test</h4>
<p data-i18n="ugc_card_organic_desc">১০০% খাঁটি মধুর পানির গ্লাসে দ্রবীভূত পরীক্ষা ও টেস্ট রিভিউ।</p>
</div>
<div class="ugc-preset-card" data-preset="perfume_reaction">
<span class="icon">💎</span>
<h4 data-i18n="ugc_card_perfume_title">Luxury Perfume 24h Test</h4>
<p data-i18n="ugc_card_perfume_desc">পারফিউমের লং লাস্টিং সুবাস ও পাবলিক কমপ্লিমেন্ট রিয়েকশন।</p>
</div>
<div class="ugc-preset-card" data-preset="grwm_mirror">
<span class="icon">🪞</span>
<h4 data-i18n="ugc_card_grwm_title">Bathroom Mirror GRWM</h4>
<p data-i18n="ugc_card_grwm_desc">সকালে মুখে ড্রপ দিয়ে স্কিনকেয়ার টেক্সচার ও গ্লাস স্কিন গ্লো প্রদর্শন।</p>
</div>
<div class="ugc-preset-card" data-preset="unboxing_asmr">
<span class="icon">📦</span>
<h4 data-i18n="ugc_card_asmr_title">POV Unboxing ASMR</h4>
<p data-i18n="ugc_card_asmr_desc">হাতে পার্সেল খোলা, ক্রিস্পি বাবল র‍্যাপ ও প্রডাক্টের স্যাটিস্ফাইং সাউন্ড।</p>
</div>
<div class="ugc-preset-card" data-preset="skeptic_test">
<span class="icon">⚠️</span>
<h4 data-i18n="ugc_card_skeptic_title">Viral Claim Skeptic</h4>
<p data-i18n="ugc_card_skeptic_desc">"সত্যিই কি কাজ করে?"—হাতে-কলমে কার্যকারিতা লাইভ পরীক্ষা।</p>
</div>
<div class="ugc-preset-card" data-preset="founder_story">
<span class="icon">🚀</span>
<h4 data-i18n="ugc_card_founder_title">Founder's Direct Hook</h4>
<p data-i18n="ugc_card_founder_desc">কুরিয়ার পার্সেলের স্তূপের সামনে দাঁড়িয়ে প্রডাক্ট কোয়ালিটি ও মানি-ব্যাক গল্প।</p>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="ugcProductName" data-i18n="ugc_prod_label">প্রডাক্টের নাম ও ব্র্যান্ড (Product):</label>
<input type="text" id="ugcProductName" data-i18n-ph="ugc_prod_ph" placeholder="e.g. Medicube Collagen Jelly Cream" value="Medicube Collagen Jelly Cream">
</div>
<div class="form-group">
<label for="ugcTargetAudience" data-i18n="ugc_aud_label">টার্গেট অডিয়েন্স ও সমস্যা (Audience/Problem):</label>
<input type="text" id="ugcTargetAudience" data-i18n-ph="ugc_aud_ph" placeholder="e.g. যাদের ত্বক খসখসে ও রোদে পোড়া দাগ রয়েছে" value="যাদের ত্বক খসখসে ও রোদে পোড়া দাগ রয়েছে">
</div>
</div>
<div class="form-row-3">
<div class="form-group">
<label for="ugcCreatorPersona" data-i18n="ugc_persona_label">ক্রিয়েটর টাইপ (Persona):</label>
<select id="ugcCreatorPersona">
<option value="21yo Bangladeshi University Student in casual cozy room" selected>👩 21yo University Student (Cozy Room)</option>
<option value="26yo Professional Working Woman getting ready">💼 26yo Working Woman (Morning Routine)</option>
<option value="24yo Beauty Vlogger with natural ring light">💄 24yo Beauty Creator (Natural Lighting)</option>
<option value="Bangladeshi Male Creator testing skincare">👨 Male Creator (Daily Grooming)</option>
</select>
</div>
<div class="form-group">
<label for="ugcVideoDuration" data-i18n="ugc_duration_label">ভিডিও দৈর্ঘ্য (Duration):</label>
<select id="ugcVideoDuration">
<option value="15s" selected>⚡ 15 Seconds (TikTok / Reels Viral)</option>
<option value="30s">⏱️ 30 Seconds (In-depth UGC Ad)</option>
<option value="6s">🔥 6 Seconds (Veo Quick Bumper)</option>
</select>
</div>
<div class="form-group">
<label for="ugcVideoEngine" data-i18n="ugc_engine_label">এআই ভিডিও ইঞ্জিন (Target Engine):</label>
<select id="ugcVideoEngine">
<option value="Google Veo 3.1" selected>🎬 Google Veo 3.1 (Omni Video)</option>
<option value="Runway Gen-3 Alpha">🎥 Runway Gen-3 Alpha</option>
<option value="Luma Dream Machine">✨ Luma Dream Machine</option>
<option value="OpenAI Sora">🌟 OpenAI Sora</option>
</select>
</div>
</div>
<button id="generateUgcPromptBtn" class="btn-primary">
<span class="btn-icon">⚡</span> <span data-i18n="btn_generate_ugc">Generate Google Flow Storyboard & Master Veo Prompt</span>
</button>
<p id="ugcStatusMsg" class="status-msg hidden"></p>
</div>
<!-- Generated UGC Storyboard & Prompt Result Card -->
<div id="ugcResultCard" class="card hidden">
<div class="result-header">
<h3 data-i18n="ugc_result_title">🎬 UGC Video Ad Storyboard & Master Prompt</h3>
<span class="gold-badge" id="ugcEngineBadge">Google Veo 3.1 • 9:16</span>
</div>
<label style="font-size: 11px; font-weight: 700; color: #38BDF8; margin-bottom: 4px; display: block;" data-i18n="ugc_master_prompt_label">
🎯 Master Cinematic AI Prompt for Veo 3.1 (English Prompt):
</label>
<div class="ugc-prompt-box" id="ugcMasterPromptText"></div>
<button class="pill-btn primary" onclick="copyText('ugcMasterPromptText')" style="width: 100%; justify-content: center; margin-top: 8px; margin-bottom: 16px;" data-i18n="btn_copy_master_prompt">
📋 Copy Master Prompt for Veo 3.1
</button>
<label style="font-size: 11px; font-weight: 700; color: #F59E0B; margin-bottom: 4px; display: block;" data-i18n="ugc_timeline_label">
⏱️ Google Flow Shot-by-Shot Timeline (Storyboard & Bengali Dialogue):
</label>
<div id="ugcTimelineContainer" class="ugc-timeline-container">
<!-- Dynamically populated timeline cards -->
</div>
<div class="action-buttons-row" style="margin-top: 16px;">
<button id="copyAllUgcScriptBtn" class="btn-action success-btn" data-i18n="btn_copy_complete_flow">
📋 Copy Complete Flow
</button>
<button id="sendToAuraVeoBtn" class="btn-action whatsapp-btn" style="background: linear-gradient(135deg, #8B5CF6, #6366F1);" data-i18n="btn_send_veo">
🚀 Send to Aura Veo 3.1 Engine
</button>
</div>
</div>
</section>
<!-- TAB: 3D CGI Master Prompt Studio & Catalog Library -->
<section id="tabCgiLibrary" class="tab-page">
<div class="card">
<div class="card-header">
<span class="icon">🎨</span>
<div>
<h2 data-i18n="cgi_title">3D CGI Master Prompt Studio & Catalog Library</h2>
<p data-i18n="cgi_subtitle">GT ও সকল ব্র্যান্ডের জন্য 8K আল্ট্রা-রিয়েলিস্টিক কমার্শিয়াল স্টুডিও প্রম্পট লাইব্রেরি</p>
</div>
</div>
<!-- Store Filter Chips -->
<div class="category-filter-bar" id="cgiFilterChips">
<button class="filter-chip active" data-cat="all" data-i18n="cgi_cat_all">🔥 All Stores</button>
<button class="filter-chip" data-cat="glamourstouch">✨ Glamour's Touch (Skincare)</button>
<button class="filter-chip" data-cat="panjabi">👑 Aura Heritage (Panjabi)</button>
<button class="filter-chip" data-cat="snehalata">👗 Snehalata (Saree & Fashion)</button>
<button class="filter-chip" data-cat="techvolt">⚡ TechVolt (Gadgets)</button>
<button class="filter-chip" data-cat="organic">🍯 Pranon Organic (Honey)</button>
<button class="filter-chip" data-cat="sneakerlab">👟 SneakerLab (Footwear)</button>
<button class="filter-chip" data-cat="royale">💎 Aura Royale (Perfumes)</button>
</div>
<div class="form-group" style="margin-top: 14px;">
<input type="text" id="cgiSearchInput" data-i18n-ph="cgi_search_ph" placeholder="🔍 Search product or ingredient (e.g. Collagen, Retinol, Silk, Smartwatch, Honey)...">
</div>
<!-- CGI Prompt Cards Grid -->
<div id="cgiPromptCardsContainer" class="cgi-library-grid">
<!-- Injected dynamically by app.js -->
</div>
</div>
</section>
<!-- TAB 4: Dedicated Customer Care & Inbox AI Studio -->
<section id="tabInboxAI" class="tab-page">
<div class="card">
<div class="card-header">
<span class="icon">💬</span>
<div>
<h2 data-i18n="inbox_title">Omnichannel Customer Care & Sales Closer AI</h2>
<p data-i18n="inbox_subtitle">কাস্টমারের মেসেজ দিলে ১-ক্লিকে ৩টি মিষ্টি ও হাই-কনভার্টিং উত্তর তৈরি করে</p>
</div>
</div>
<div class="form-group">
<label for="inboxCustomerMsg" data-i18n="inbox_query_label">কাস্টমার ইনবক্সে কী লিখেছে? (Customer Query):</label>
<textarea id="inboxCustomerMsg" rows="3" data-i18n-ph="inbox_query_ph" placeholder="e.g. আপনাদের কাছে কি গ্লাস স্কিন সিরাম আছে? দাম কত আর ডেলিভারি চার্জ কত?">আপনাদের কাছে কি কোরিয়ান গ্লাস স্কিন সিরাম আছে? দাম কত আর হোম ডেলিভারি হবে?</textarea>
</div>
<div class="form-group">
<label for="inboxStoreContext" data-i18n="inbox_store_label">দোকানের পলিসি ও হটলাইন (Store Info):</label>
<input type="text" id="inboxStoreContext" data-i18n-ph="inbox_store_ph" value="Store: Glamour's Touch (glamourstouch.com), Hotline: 01712-426871, 100% Authentic Korean Skincare, Delivery: Dhaka ৳70, Outside Dhaka ৳130, Free delivery on ৳2000+">
</div>
<button id="generateInboxReplyBtn" class="btn-primary">
<span class="btn-icon">⚡</span> <span data-i18n="btn_generate_inbox">Generate 3 Ready-to-Send Replies with Gemini AI</span>
</button>
<p id="inboxStatusMsg" class="status-msg hidden"></p>
</div>
<!-- Generated Replies Container -->
<div id="inboxRepliesCard" class="card hidden">
<div class="reply-block">
<div class="reply-header">
<h4 data-i18n="reply1_header">⚡ ১. দ্রুত ও মিষ্টি উত্তর (Instant Polite Greeting & Price)</h4>
<button class="copy-chip-btn" onclick="copyText('replyText1')" data-i18n="btn_copy">📋 Copy</button>
</div>
<p id="replyText1" class="reply-content"></p>
</div>
<div class="reply-block">
<div class="reply-header">
<h4 data-i18n="reply2_header">🛍️ ২. সেলস অর্ডার কনফার্মেশন (Direct Order Closer)</h4>
<button class="copy-chip-btn" onclick="copyText('replyText2')" data-i18n="btn_copy">📋 Copy</button>
</div>
<p id="replyText2" class="reply-content"></p>
</div>
<div class="reply-block">
<div class="reply-header">
<h4 data-i18n="reply3_header">💬 ৩. ১-ক্লিক WhatsApp লিঙ্ক (Instant WhatsApp Closer)</h4>
<button class="copy-chip-btn" onclick="copyText('replyText3')" data-i18n="btn_copy">📋 Copy</button>
</div>
<p id="replyText3" class="reply-content"></p>
</div>
</div>
</section>
<!-- TAB 5: Saved History -->
<section id="tabHistory" class="tab-page">
<div class="section-title-row">
<h2 data-i18n="history_title">📜 Saved Generation History</h2>
<button id="clearHistoryBtn" class="pill-btn danger-text" data-i18n="btn_clear_history">Clear All</button>
</div>
<div id="historyListContainer" class="history-list">
<div class="empty-state">
<span class="icon-empty">📭</span>
<p data-i18n="history_empty">No generations yet. Create your first 3D poster or mini-app generation!</p>
</div>
</div>
</section>
<!-- TAB 6: Settings & Gemini Configuration -->
<section id="tabSettings" class="tab-page">
<div class="card">
<div class="card-header">
<span class="icon">⚙️</span>
<div>
<h2 data-i18n="settings_title">Settings & Google AI Configuration</h2>
<p data-i18n="settings_subtitle">গুগল জেমিনি ২.০ ও গ্যামা ওপেন মডেল সেটআপ</p>
</div>
</div>
<div class="form-group">
<label for="apiKeyInput" data-i18n="settings_apikey_label">Google Gemini API Key (100% Free from AI Studio):</label>
<input type="password" id="apiKeyInput" data-i18n-ph="settings_apikey_ph" placeholder="Paste your AI Studio API key (AIzaSy...)">
<small class="hint-text" data-i18n="settings_apikey_hint">API Key is saved securely in your browser/device local storage.</small>
</div>
<div class="form-group">
<label for="modelSelect" data-i18n="settings_model_label">Default AI Model (এআই মডেল):</label>
<select id="modelSelect">
<option value="gemini-2.0-flash">Gemini 3.5 Flash (Recommended, Ultra Fast)</option>
<option value="gemini-1.5-flash">Google Gemini 1.5 Flash (Stable)</option>
<option value="gemma-2-27b-it">Google Gemma 2 (27B Open-Weights)</option>
</select>
</div>
<div class="form-group">
<label for="n8nWebhookInput" data-i18n="settings_webhook_label">n8n Auto-Post Webhook URL (Aura Ajentic AI):</label>
<input type="text" id="n8nWebhookInput" placeholder="https://n8n.auraajenticai.cloud/webhook/gt-auto-post" value="https://n8n.auraajenticai.cloud/webhook/gt-auto-post">
<small class="hint-text" data-i18n="settings_webhook_hint">Pre-configured with your n8n cloud instance at n8n.auraajenticai.cloud</small>
</div>
<button id="saveApiKeyBtn" class="btn-primary" data-i18n="btn_save_settings">
💾 Save Settings & Test Connection
</button>
<p id="settingsStatusMsg" class="status-msg hidden"></p>
</div>
<div class="card info-card" style="margin-top: 14px;">
<h3 data-i18n="about_title">💎 About Aura Studio</h3>
<p style="font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.6;" data-i18n="about_desc">
This web studio is engineered specifically for <strong>iPhone (iOS Safari / PWA)</strong> and client dashboards with 0ms latency, native 2D canvas GPU rendering, and official Gemini 3.5 AI integration.
</p>
<div class="safari-hint" data-i18n="iphone_tips">
<strong>📲 iPhone টিপস:</strong> Safari-এর নিচে থাকা <strong>Share (📤)</strong> বাটনে ট্যাপ করে <strong>"Add to Home Screen"</strong> চাপুন। তাহলে এটি আপনার আইফোনে একদম আসল অ্যাপের মতো ফুল-স্ক্রিনে চলবে!
</div>
</div>
</section>
</main>
<!-- Bottom Navigation Bar (iOS 18 Style) -->
<nav class="bottom-nav">
<button class="nav-item active" data-tab="tabApps">
<span class="nav-icon">🏠</span>
<span class="nav-label" data-i18n="nav_apps">অ্যাপস হাব</span>
</button>
<button class="nav-item" data-tab="tabPosterLab">
<span class="nav-icon">🎨</span>
<span class="nav-label" data-i18n="nav_poster">৩ডি পোস্টার</span>
</button>
<button class="nav-item" data-tab="tabCgiLibrary">
<span class="nav-icon">💡</span>
<span class="nav-label" data-i18n="nav_cgi">CGI প্রম্পট</span>
</button>
<button class="nav-item" data-tab="tabUgcStudio">
<span class="nav-icon">🎬</span>
<span class="nav-label" data-i18n="nav_ugc">UGC স্টুডিও</span>
</button>
<button class="nav-item" data-tab="tabBuilder">
<span class="nav-icon">🛠️</span>
<span class="nav-label" data-i18n="nav_builder">অ্যাপ মেকার</span>
</button>
<button class="nav-item" data-tab="tabInboxAI">
<span class="nav-icon">💬</span>
<span class="nav-label" data-i18n="nav_inbox">ইনবক্স এআই</span>
</button>
<button class="nav-item" data-tab="tabSettings">
<span class="nav-icon">⚙️</span>
<span class="nav-label" data-i18n="nav_settings">সেটিংস</span>
</button>
</nav>
<!-- MODAL 1: Interactive Mini-App Runner / Playground -->
<div id="appRunnerModal" class="modal-backdrop hidden">
<div class="modal-content">
<div class="modal-header">
<h3 id="runnerModalTitle" data-i18n="runner_modal_title">🚀 Mini-App Runner</h3>
<button class="btn-close-modal" onclick="closeAppRunner()">✖</button>
</div>
<p id="runnerModalDesc" style="font-size: 12px; color: var(--text-secondary); margin-bottom: 16px;"></p>
<div id="runnerDynamicForm">
<!-- Injected dynamically based on app definition -->
</div>
<button id="runnerExecuteBtn" class="btn-primary" style="margin-top: 14px;" data-i18n="btn_runner_generate">
⚡ Generate with AI
</button>
<p id="runnerStatusMsg" class="status-msg hidden"></p>
<div id="runnerResultBox" class="reply-block hidden" style="margin-top: 16px;">
<div class="reply-header">
<h4 data-i18n="runner_output_title">✨ Generated Output</h4>
<button class="copy-chip-btn" onclick="copyText('runnerResultContent')" data-i18n="btn_copy">📋 Copy</button>
</div>
<p id="runnerResultContent" class="reply-content"></p>
</div>
</div>
</div>
<!-- MODAL 2: 1-Click Client Dashboard Embed Code Modal -->
<div id="embedModal" class="modal-backdrop hidden">
<div class="modal-content">
<div class="modal-header">
<h3 id="embedModalTitle" data-i18n="embed_modal_title">📦 Embed in Client Dashboard</h3>
<button class="btn-close-modal" onclick="closeEmbedModal()">✖</button>
</div>
<p style="font-size: 12px; color: var(--text-secondary); margin-bottom: 14px;" data-i18n="embed_modal_desc">
আপনার ক্লায়েন্ট ড্যাশবোর্ডে (যেমন <code>aura client dashboard</code>) এই মিনি-অ্যাপটি ১-ক্লিকে যুক্ত করতে নিচের কোডটি কপি করুন:
</p>
<label style="font-size: 11px; font-weight: 700; color: #CBD5E1; margin-bottom: 4px; display: block;" data-i18n="embed_iframe_label">
HTML / Iframe Embed Snippet:
</label>
<div class="code-snippet-box" id="embedIframeCode"></div>
<button class="pill-btn primary" onclick="copyText('embedIframeCode')" style="width: 100%; justify-content: center; margin-bottom: 14px;" data-i18n="btn_copy_iframe">
📋 Copy Iframe Code
</button>
<label style="font-size: 11px; font-weight: 700; color: #CBD5E1; margin-bottom: 4px; display: block;" data-i18n="embed_api_label">
Direct Webhook / API URL:
</label>
<div class="code-snippet-box" id="embedApiUrl"></div>
<button class="pill-btn" onclick="copyText('embedApiUrl')" style="width: 100%; justify-content: center;" data-i18n="btn_copy_api">
📋 Copy Direct API URL
</button>
</div>
</div>
<!-- MODAL 3: Universal Multi-Store Catalog & Client URL Sync Engine -->
<div id="catalogModal" class="modal-backdrop hidden">
<div class="modal-content catalog-modal-content">
<div class="modal-header">
<div style="display:flex; align-items:center; gap:8px;">
<span style="font-size:24px;">🛍️</span>
<div>
<h3 id="catalogModalMainTitle" style="margin:0; font-size:16px;" data-i18n="catalog_modal_title">Universal E-Commerce Catalog & Store Sync</h3>
<p id="catalogCountText" style="font-size:11.5px; color:var(--text-secondary); margin:2px 0 0 0;" data-i18n="catalog_count_default">৫৬০+ রিয়েল প্রডাক্ট লাইব্রেরি</p>
</div>
</div>
<button class="btn-close-modal" onclick="closeCatalogModal()">✖</button>
</div>
<!-- Store Switcher Box Tabs -->
<div class="store-switcher-bar" id="storeSwitcherBar">
<button type="button" class="store-chip-btn active" data-store-id="glamourstouch">
<span>✨</span> Glamour's Touch (563)
</button>
<!-- Synced Store chips will be injected here -->
<button type="button" class="store-chip-btn add-store-btn" id="toggleSyncPanelBtn">
<span>➕</span> <span data-i18n="btn_sync_new_store">নতুন ক্লায়েন্ট স্টোর সিঙ্ক</span>
</button>
</div>
<!-- Client URL Sync Input Panel (Collapsible) -->
<div id="storeSyncPanel" class="store-sync-panel hidden">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
<span style="font-size:12px; font-weight:800; color:#38BDF8;" data-i18n="sync_panel_title">🌐 ক্লায়েন্টের ওয়েবসাইট URL থেকে প্রডাক্ট সিঙ্ক করুন:</span>
<button type="button" class="pill-btn danger-text" id="closeSyncPanelBtn" style="padding:2px 6px; font-size:10px;" data-i18n="btn_close_sync">✖ বন্ধ করুন</button>
</div>
<div class="form-row">
<input type="url" id="clientStoreUrlInput" data-i18n-ph="sync_url_ph" placeholder="e.g. https://snehalata.com বা ক্লায়েন্টের শপ লিঙ্ক..." style="flex:2;">
<input type="text" id="clientStoreNameInput" data-i18n-ph="sync_name_ph" placeholder="স্টোরের নাম (অপশনাল)" style="flex:1;">
</div>
<div class="form-row" style="margin-top:8px;">
<select id="clientStoreCategorySelect" style="flex:1;">
<option value="cosmetics">💄 Cosmetics & Beauty</option>
<option value="fashion">👗 Fashion, Saree & Lifestyle</option>
<option value="panjabi">👑 Royal Panjabi & Kabli</option>
<option value="electronics">⚡ Gadgets & Electronics</option>
<option value="organic">🍯 Organic Food & Honey</option>
<option value="sneakerlab">👟 Shoes & Streetwear</option>
<option value="general" selected>🛍️ General E-Commerce</option>
</select>
<button type="button" id="startStoreSyncBtn" class="btn-primary" style="flex:1.2; padding:8px 12px; font-size:12px;">
<span data-i18n="btn_start_sync">⚡ সিঙ্ক করুন ও নতুন স্টোর বক্স বানান</span>
</button>
</div>
<p id="storeSyncStatusMsg" class="status-msg hidden" style="margin-top:8px;"></p>
</div>
<!-- Active Store Info Banner -->
<div id="storeInfoBanner" class="store-info-banner">
<div class="store-info-left">
<span id="activeStoreIcon">✨</span>
<strong id="activeStoreTitle">Glamour's Touch (GT)</strong>
<span id="activeStoreBadge" class="store-badge-tag">KOREAN COSMETICS</span>
</div>
<div style="display:flex; align-items:center; gap:8px;">
<a id="activeStoreUrlLink" href="https://glamourstouch.com" target="_blank" style="font-size:11px; color:#38BDF8; text-decoration:none;">🔗 Visit Store</a>
<button type="button" id="deleteCurrentStoreBtn" class="btn-delete-store hidden" data-i18n="btn_delete_store">🗑️ মুছুন</button>
</div>
</div>
<div class="catalog-search-bar">
<input type="text" id="catalogSearchInput" data-i18n-ph="catalog_search_ph" placeholder="🔍 প্রডাক্ট বা ব্র্যান্ড খুঁজুন (e.g. Medicube, Anua, Snail, Sunscreen, Serum, Cream)..." style="flex:1;">
</div>
<!-- Quick Brand Filter Chips Bar -->
<div class="category-filter-bar" id="catalogBrandFilterChips" style="margin-bottom:12px; overflow-x:auto; padding-bottom:4px;">
<!-- Dynamically rendered based on active store -->
</div>
<!-- Product Cards Grid -->
<div id="catalogGridContainer" class="catalog-grid">
<!-- Dynamically rendered by app.js -->
</div>
</div>
</div>
<!-- Hidden container for generating QR code SVG/Canvas -->
<div id="qrcodeHidden" style="display:none;"></div>
<script src="app.js?v=8"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js?v=9').then(reg => {
reg.update();
reg.onupdatefound = () => {
const installingWorker = reg.installing;
if (installingWorker) {
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed' && navigator.serviceWorker.controller) {
window.location.reload();
}
};
}
};
}).catch(err => console.log('SW reg error:', err));
});
}
</script>
</body>
</html>