khondokartowsif171
479 lines
23 KiB
HTML
479 lines
23 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>Brand: Glamour's Touch</option>
|
|
<option value="snehalata">Brand: Snehalata</option>
|
|
<option value="aura">Brand: Aura Enterprise</option>
|
|
<option value="custom">Custom 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. https://www.glamourstouch.com/product/... অথবা প্রডাক্টের নাম" 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 Korea" value="🇰🇷 100% Original Korea">
|
|
</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>
|
|
|
|
<!-- Category Filter Bar -->
|
|
<div class="category-filter-bar">
|
|
<button class="filter-chip active" data-cat="all">🔥 All Mini-Apps</button>
|
|
<button class="filter-chip" data-cat="ecommerce">🛍️ E-Commerce</button>
|
|
<button class="filter-chip" data-cat="social">📱 Social & Video</button>
|
|
<button class="filter-chip" data-cat="sales">💬 Sales & Care</button>
|
|
<button class="filter-chip" data-cat="tools">⚙️ AI Utilities</button>
|
|
<button class="filter-chip" data-cat="custom">💎 My 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 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="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>
|