Files
opal-ios-studio/index.html
T

659 lines
36 KiB
HTML
Raw 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>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>
<!-- Trending Google Search Suggestions -->
<div class="form-group">
<label style="display:flex; justify-content:space-between; align-items:center;">
<span>🔥 গুগল ট্রেন্ডিং সার্চ (Google Trends 1-Click Load):</span>
<span style="font-size:10.5px; color:var(--primary); font-weight:600;">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">
<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>