642 lines
33 KiB
HTML
642 lines
33 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>Google Opal AI - iOS Studio & 3D Mini-App Engine</title>
|
|
|
|
<!-- iOS PWA Meta Tags -->
|
|
<meta name="apple-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="Opal AI">
|
|
<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=5">
|
|
</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>Opal AI <span>Studio</span> <span class="brand-badge">PRO</span></h1>
|
|
<p>Google DeepMind • Mini-App Engine</p>
|
|
</div>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="pill-btn primary" onclick="switchToTab('tabBuilder')">
|
|
<span>✨ + Mini-App</span>
|
|
</button>
|
|
<button id="langToggleBtn" class="pill-btn">🌐 বাং</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>3D Commercial Poster Lab</h2>
|
|
<p>আসল প্রডাক্টের ছবি, ৩ডি মার্বেল স্টেজ ও WhatsApp QR সহ বিজ্ঞাপন পোস্টার বানান</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3D Stage Theme Selector -->
|
|
<div class="form-group">
|
|
<label>৩ডি স্টেজ থিম সিলেক্ট করুন (Stage Theme):</label>
|
|
<div class="theme-selector-group" id="themeSelectorGroup">
|
|
<div class="theme-chip active" data-theme="obsidian_gold">
|
|
<span class="icon">👑</span>
|
|
<span class="name">Obsidian & Gold</span>
|
|
</div>
|
|
<div class="theme-chip" data-theme="rose_quartz">
|
|
<span class="icon">🌸</span>
|
|
<span class="name">Rose Quartz Glass</span>
|
|
</div>
|
|
<div class="theme-chip" data-theme="cyber_neon">
|
|
<span class="icon">💎</span>
|
|
<span class="name">Cyberpunk Neon</span>
|
|
</div>
|
|
<div class="theme-chip" data-theme="botanical_eco">
|
|
<span class="icon">🌿</span>
|
|
<span class="name">Botanical Eco</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Aspect Ratio Switcher -->
|
|
<div class="form-group">
|
|
<label>পোস্টার সাইজ ও রেশিও (Aspect Ratio):</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>
|
|
|
|
<div class="form-group">
|
|
<label for="productInput">প্রডাক্ট লিংক বা নাম (Product Link or Name):</label>
|
|
<input type="text" id="productInput" placeholder="e.g. Silk Saree, Smartwatch, Pure Honey, Sneaker or Skincare" value="Medicube Collagen Jelly Cream">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="productPrice">মূল্য ও অফার (Price & Discount):</label>
|
|
<input type="text" id="productPrice" placeholder="e.g. ৳ ১,০৬০ (৳ ১,৪৭০) 28% OFF" value="৳ ১,০৬০ (৳ ১,৪৭০) 28% OFF">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="customBadgeInput">কাস্টম ব্যাজ টেক্সট (Trust Badge):</label>
|
|
<input type="text" id="customBadgeInput" placeholder="e.g. 🛡️ 100% Original Guarantee" value="🛡️ 100% Original Guarantee">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label class="file-upload-btn" for="photoFileInput">
|
|
📸 <span>iPhone / পিসি গ্যালারি থেকে ছবি আপলোড</span>
|
|
<input type="file" id="photoFileInput" accept="image/*">
|
|
</label>
|
|
<button id="clearPhotoBtn" class="pill-btn danger-text hidden">✖ ছবি মুছুন</button>
|
|
</div>
|
|
<div id="photoPreviewContainer" class="photo-preview-box hidden">
|
|
<img id="attachedPhotoImg" src="" alt="Attached Photo">
|
|
<span class="badge-attached">✅ Photo Attached</span>
|
|
</div>
|
|
|
|
<button id="generatePosterBtn" class="btn-primary">
|
|
<span class="btn-icon">🚀</span> Generate 3D Commercial Poster (Canvas GPU)
|
|
</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">✨ 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">
|
|
💾 Save to Photos
|
|
</button>
|
|
<button id="shareWhatsAppBtn" class="btn-action whatsapp-btn">
|
|
💬 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> 1-Click Auto Post to Facebook Page (via n8n)
|
|
</button>
|
|
<p id="n8nPostStatusMsg" class="status-msg hidden"></p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TAB 2: Curated & Dynamic Opal Mini-Apps Hub (DEFAULT HOME) -->
|
|
<section id="tabApps" class="tab-page active">
|
|
<div class="section-title-row">
|
|
<div>
|
|
<h2>✨ Opal Mini-Apps Hub</h2>
|
|
<p style="font-size: 11.5px; color: var(--text-secondary); margin-top: 2px;">
|
|
সকল ক্যাটাগরির ই-কমার্সের জন্য কাস্টম এআই মিনি-অ্যাপ তৈরি ও এম্বেড করুন
|
|
</p>
|
|
</div>
|
|
<button class="pill-btn primary" onclick="switchToTab('tabBuilder')">
|
|
+ Create App
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Universal Category Filter Bar -->
|
|
<div class="category-filter-bar">
|
|
<button class="filter-chip active" data-cat="all">🔥 All Niches</button>
|
|
<button class="filter-chip" data-cat="fashion">👗 Fashion & Apparel</button>
|
|
<button class="filter-chip" data-cat="electronics">📱 Tech & Gadgets</button>
|
|
<button class="filter-chip" data-cat="cosmetics">💄 Beauty & Skincare</button>
|
|
<button class="filter-chip" data-cat="footwear">👟 Shoes & Leather</button>
|
|
<button class="filter-chip" data-cat="organic">🍯 Organic & Food</button>
|
|
<button class="filter-chip" data-cat="sales">💬 Sales & Care</button>
|
|
<button class="filter-chip" data-cat="tools">⚙️ AI Logistics</button>
|
|
<button class="filter-chip" data-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>Visual Mini-App Builder</h2>
|
|
<p>আপনার ক্লায়েন্ট ড্যাশবোর্ডের জন্য কয়েক ক্লিকে কাস্টম এআই মিনি-অ্যাপ তৈরি করুন</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="builderAppName">অ্যাপের নাম (Mini-App Name):</label>
|
|
<input type="text" id="builderAppName" placeholder="e.g. VIP Customer Offer Generator">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="builderAppEmoji">আইকন/ইমোজি (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">ক্যাটাগরি (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">ডিফল্ট এআই মডেল (AI Model):</label>
|
|
<select id="builderModel">
|
|
<option value="gemini-2.0-flash">Google Gemini 2.0 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">সংক্ষিপ্ত বিবরণ (Short Description):</label>
|
|
<input type="text" id="builderDesc" placeholder="e.g. বিশেষ কাস্টমারদের জন্য আকর্ষণীয় অফার মেসেজ তৈরি করে।">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>ইনপুট ফিল্ডস (Input Fields for User):</label>
|
|
<div class="form-row">
|
|
<input type="text" id="builderField1" placeholder="Field 1 Label (e.g. Customer Name / Product)" value="কাস্টমারের নাম বা প্রডাক্ট">
|
|
<input type="text" id="builderField2" placeholder="Field 2 Label (e.g. Offer / Discount / Context)" value="অফার বা ডিসকাউন্টের পরিমাণ">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="builderPromptTemplate">এআই প্রম্পট টেমপ্লেট (Prompt Template with Variables):</label>
|
|
<textarea id="builderPromptTemplate" rows="4" 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">💡 টেমপ্লেটের মধ্যে <code>{{field1}}</code> এবং <code>{{field2}}</code> স্বয়ংক্রিয়ভাবে ইউজারের ইনপুট দিয়ে প্রতিস্থাপিত হবে।</small>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<button id="saveMiniAppBtn" class="btn-primary">
|
|
💾 Save Mini-App & Add to Hub
|
|
</button>
|
|
<button id="testMiniAppBtn" class="pill-btn" style="height: 100%; justify-content: center;">
|
|
🧪 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>UGC Video Ads & Google Flow Studio</h2>
|
|
<p>Google Veo 3.1 ও Omni Video ইঞ্জিনের জন্য হাই-কনভার্টিং UGC স্টাইল প্রম্পট ও স্ক্রিপ্ট তৈরি করুন</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- UGC Preset Templates Selector -->
|
|
<div class="form-group">
|
|
<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>Raw iPhone Review</h4>
|
|
<p>রুমের আলোয় ফ্রন্ট ক্যামেরায় আনফিল্টার্ড বাস্তব রিভিউ ও প্রডাক্ট টেস্ট (Universal)।</p>
|
|
</div>
|
|
<div class="ugc-preset-card" data-preset="fashion_tryon">
|
|
<span class="icon">👗</span>
|
|
<h4>Fashion OOTD & Drape</h4>
|
|
<p>শাড়ি/লেডিস ড্রেস ট্রাই-অন, ফেব্রিকে জুম, ফিটিং ও স্লো-মো ওয়াক ট্রায়াল।</p>
|
|
</div>
|
|
<div class="ugc-preset-card" data-preset="panjabi_royal">
|
|
<span class="icon">👑</span>
|
|
<h4>Royal Panjabi & Kabli</h4>
|
|
<p>প্রিমিয়াম পাঞ্জাবি/কাবলি শোকেস, কলারের সূক্ষ্ম সুতার কাজ ও রাজকীয় ফিট।</p>
|
|
</div>
|
|
<div class="ugc-preset-card" data-preset="gadget_unboxing">
|
|
<span class="icon">⚡</span>
|
|
<h4>Gadget Sound & Stress Test</h4>
|
|
<p>স্মার্টওয়াচ/ইয়ারবাডস আনবক্সিং, ANC সাউন্ড টেস্ট ও ওয়াটারপ্রুফ ড্রপ টেস্ট।</p>
|
|
</div>
|
|
<div class="ugc-preset-card" data-preset="sneaker_flex">
|
|
<span class="icon">👟</span>
|
|
<h4>Sneaker Flex & Kick Test</h4>
|
|
<p>স্নিকার আনবক্সিং, সোল বেন্ড টেস্ট ও স্ট্রিট ওয়াক স্টাইলিশ লুক।</p>
|
|
</div>
|
|
<div class="ugc-preset-card" data-preset="organic_purity">
|
|
<span class="icon">🍯</span>
|
|
<h4>Organic Honey Purity Test</h4>
|
|
<p>১০০% খাঁটি মধুর পানির গ্লাসে দ্রবীভূত পরীক্ষা ও টেস্ট রিভিউ।</p>
|
|
</div>
|
|
<div class="ugc-preset-card" data-preset="perfume_reaction">
|
|
<span class="icon">💎</span>
|
|
<h4>Luxury Perfume 24h Test</h4>
|
|
<p>পারফিউমের লং লাস্টিং সুবাস ও পাবলিক কমপ্লিমেন্ট রিয়েকশন।</p>
|
|
</div>
|
|
<div class="ugc-preset-card" data-preset="grwm_mirror">
|
|
<span class="icon">🪞</span>
|
|
<h4>Bathroom Mirror GRWM</h4>
|
|
<p>সকালে মুখে ড্রপ দিয়ে স্কিনকেয়ার টেক্সচার ও গ্লাস স্কিন গ্লো প্রদর্শন।</p>
|
|
</div>
|
|
<div class="ugc-preset-card" data-preset="unboxing_asmr">
|
|
<span class="icon">📦</span>
|
|
<h4>POV Unboxing ASMR</h4>
|
|
<p>হাতে পার্সেল খোলা, ক্রিস্পি বাবল র্যাপ ও প্রডাক্টের স্যাটিস্ফাইং সাউন্ড।</p>
|
|
</div>
|
|
<div class="ugc-preset-card" data-preset="skeptic_test">
|
|
<span class="icon">⚠️</span>
|
|
<h4>Viral Claim Skeptic</h4>
|
|
<p>"সত্যিই কি কাজ করে?"—হাতে-কলমে কার্যকারিতা লাইভ পরীক্ষা।</p>
|
|
</div>
|
|
<div class="ugc-preset-card" data-preset="founder_story">
|
|
<span class="icon">🚀</span>
|
|
<h4>Founder's Direct Hook</h4>
|
|
<p>কুরিয়ার পার্সেলের স্তূপের সামনে দাঁড়িয়ে প্রডাক্ট কোয়ালিটি ও মানি-ব্যাক গল্প।</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="ugcProductName">প্রডাক্টের নাম ও ব্র্যান্ড (Product):</label>
|
|
<input type="text" id="ugcProductName" placeholder="e.g. Medicube Collagen Jelly Cream" value="Medicube Collagen Jelly Cream">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="ugcTargetAudience">টার্গেট অডিয়েন্স ও সমস্যা (Audience/Problem):</label>
|
|
<input type="text" id="ugcTargetAudience" placeholder="e.g. যাদের ত্বক খসখসে ও রোদে পোড়া দাগ রয়েছে" value="যাদের ত্বক খসখসে ও রোদে পোড়া দাগ রয়েছে">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row-3">
|
|
<div class="form-group">
|
|
<label for="ugcCreatorPersona">ক্রিয়েটর টাইপ (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">ভিডিও দৈর্ঘ্য (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">এআই ভিডিও ইঞ্জিন (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> Generate Google Flow Storyboard & Master Veo Prompt
|
|
</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>🎬 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;">
|
|
🎯 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;">
|
|
📋 Copy Master Prompt for Veo 3.1
|
|
</button>
|
|
|
|
<label style="font-size: 11px; font-weight: 700; color: #F59E0B; margin-bottom: 4px; display: block;">
|
|
⏱️ 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">
|
|
📋 Copy Complete Flow
|
|
</button>
|
|
<button id="sendToAuraVeoBtn" class="btn-action whatsapp-btn" style="background: linear-gradient(135deg, #8B5CF6, #6366F1);">
|
|
🚀 Send to Aura Veo 3.1 Engine
|
|
</button>
|
|
</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>Omnichannel Customer Care & Sales Closer AI</h2>
|
|
<p>কাস্টমারের মেসেজ দিলে ১-ক্লিকে ৩টি মিষ্টি ও হাই-কনভার্টিং উত্তর তৈরি করে</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="inboxCustomerMsg">কাস্টমার ইনবক্সে কী লিখেছে? (Customer Query):</label>
|
|
<textarea id="inboxCustomerMsg" rows="3" placeholder="e.g. আপনাদের কাছে কি গ্লাস স্কিন সিরাম আছে? দাম কত আর ডেলিভারি চার্জ কত?">আপনাদের কাছে কি কোরিয়ান গ্লাস স্কিন সিরাম আছে? দাম কত আর হোম ডেলিভারি হবে?</textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="inboxStoreContext">দোকানের পলিসি ও হটলাইন (Store Info):</label>
|
|
<input type="text" id="inboxStoreContext" 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> Generate 3 Ready-to-Send Replies with Gemini AI
|
|
</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>⚡ ১. দ্রুত ও মিষ্টি উত্তর (Instant Polite Greeting & Price)</h4>
|
|
<button class="copy-chip-btn" onclick="copyText('replyText1')">📋 Copy</button>
|
|
</div>
|
|
<p id="replyText1" class="reply-content"></p>
|
|
</div>
|
|
|
|
<div class="reply-block">
|
|
<div class="reply-header">
|
|
<h4>🛍️ ২. সেলস অর্ডার কনফার্মেশন (Direct Order Closer)</h4>
|
|
<button class="copy-chip-btn" onclick="copyText('replyText2')">📋 Copy</button>
|
|
</div>
|
|
<p id="replyText2" class="reply-content"></p>
|
|
</div>
|
|
|
|
<div class="reply-block">
|
|
<div class="reply-header">
|
|
<h4>💬 ৩. ১-ক্লিক WhatsApp লিঙ্ক (Instant WhatsApp Closer)</h4>
|
|
<button class="copy-chip-btn" onclick="copyText('replyText3')">📋 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>📜 Saved Generation History</h2>
|
|
<button id="clearHistoryBtn" class="pill-btn danger-text">Clear All</button>
|
|
</div>
|
|
<div id="historyListContainer" class="history-list">
|
|
<div class="empty-state">
|
|
<span class="icon-empty">📭</span>
|
|
<p>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>Settings & Google AI Configuration</h2>
|
|
<p>গুগল জেমিনি ২.০ ও গ্যামা ওপেন মডেল সেটআপ</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="apiKeyInput">Google Gemini API Key (100% Free from AI Studio):</label>
|
|
<input type="password" id="apiKeyInput" placeholder="Paste your AI Studio API key (AIzaSy...)">
|
|
<small class="hint-text">API Key is saved securely in your browser/device local storage.</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="modelSelect">Default AI Model (এআই মডেল):</label>
|
|
<select id="modelSelect">
|
|
<option value="gemini-2.0-flash">Google Gemini 2.0 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">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">Pre-configured with your n8n cloud instance at n8n.auraajenticai.cloud</small>
|
|
</div>
|
|
|
|
<button id="saveApiKeyBtn" class="btn-primary">
|
|
💾 Save Settings & Test Connection
|
|
</button>
|
|
<p id="settingsStatusMsg" class="status-msg hidden"></p>
|
|
</div>
|
|
|
|
<div class="card info-card" style="margin-top: 14px;">
|
|
<h3>💎 About Google Opal AI (iOS Edition)</h3>
|
|
<p style="font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.6;">
|
|
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 Google Gemini 2.0 AI integration.
|
|
</p>
|
|
<div class="safari-hint">
|
|
<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">অ্যাপস হাব</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="tabUgcStudio">
|
|
<span class="nav-icon">🎬</span>
|
|
<span class="nav-label">UGC স্টুডিও</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="tabPosterLab">
|
|
<span class="nav-icon">🎨</span>
|
|
<span class="nav-label">৩ডি পোস্টার</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="tabBuilder">
|
|
<span class="nav-icon">🛠️</span>
|
|
<span class="nav-label">অ্যাপ মেকার</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="tabInboxAI">
|
|
<span class="nav-icon">💬</span>
|
|
<span class="nav-label">ইনবক্স এআই</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="tabSettings">
|
|
<span class="nav-icon">⚙️</span>
|
|
<span class="nav-label">সেটিংস</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">🚀 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;">
|
|
⚡ 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>✨ Generated Output</h4>
|
|
<button class="copy-chip-btn" onclick="copyText('runnerResultContent')">📋 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">📦 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;">
|
|
আপনার ক্লায়েন্ট ড্যাশবোর্ডে (যেমন <code>aura client dashboard</code>) এই মিনি-অ্যাপটি ১-ক্লিকে যুক্ত করতে নিচের কোডটি কপি করুন:
|
|
</p>
|
|
|
|
<label style="font-size: 11px; font-weight: 700; color: #CBD5E1; margin-bottom: 4px; display: block;">
|
|
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;">
|
|
📋 Copy Iframe Code
|
|
</button>
|
|
|
|
<label style="font-size: 11px; font-weight: 700; color: #CBD5E1; margin-bottom: 4px; display: block;">
|
|
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;">
|
|
📋 Copy Direct API URL
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden container for generating QR code SVG/Canvas -->
|
|
<div id="qrcodeHidden" style="display:none;"></div>
|
|
|
|
<script src="app.js?v=5"></script>
|
|
<script>
|
|
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker.register('sw.js').catch(err => console.log('SW reg error:', err));
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|