c176fe4cb6
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).
1077 lines
65 KiB
HTML
1077 lines
65 KiB
HTML
<!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>
|