Update index.html

index.html

@@ -6,7 +6,7 @@
     <title>Pro Video Prompt Workspace</title>
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Lucide Icons (Using a more reliable CDN) -->
+    <!-- Lucide Icons -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/lucide/0.460.0/umd/lucide.min.js"></script>
     <style>
         /* Forces Android Webviews to allow long-press context menus */
@@ -136,7 +136,7 @@
                 <h3 class="font-bold text-white flex items-center gap-2">
                     <i data-lucide="download-cloud" class="w-5 h-5 text-blue-400"></i> Export Hub
                 </h3>
-                <button onclick="window.App.closeExportModal()" class="text-neutral-400 hover:text-white p-1">
+                <button data-action="close-export" class="text-neutral-400 hover:text-white p-1">
                     <i data-lucide="x" class="w-5 h-5"></i>
                 </button>
             </div>
@@ -149,13 +149,13 @@
             </div>
 
             <div class="space-y-3">
-                <button onclick="window.App.executeCopyImage()" class="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-500 text-white px-4 py-3 rounded-xl font-medium transition-colors shadow-lg">
+                <button data-action="export-copy" class="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-500 text-white px-4 py-3 rounded-xl font-medium transition-colors shadow-lg">
                     <i data-lucide="clipboard-copy" class="w-4 h-4"></i> Copy Image to Clipboard
                 </button>
-                <button onclick="window.App.executeShare()" class="w-full flex items-center justify-center gap-2 bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 text-white px-4 py-3 rounded-xl font-medium transition-colors">
+                <button data-action="export-share" class="w-full flex items-center justify-center gap-2 bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 text-white px-4 py-3 rounded-xl font-medium transition-colors">
                     <i data-lucide="share-2" class="w-4 h-4"></i> Force Native Share
                 </button>
-                <button onclick="window.App.executeDownload()" class="w-full flex items-center justify-center gap-2 bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 text-white px-4 py-3 rounded-xl font-medium transition-colors">
+                <button data-action="export-download" class="w-full flex items-center justify-center gap-2 bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 text-white px-4 py-3 rounded-xl font-medium transition-colors">
                     <i data-lucide="download-cloud" class="w-4 h-4"></i> Fallback Download
                 </button>
             </div>
@@ -166,7 +166,6 @@
 
     <!-- Application Logic -->
     <script>
-        // Attach to window globally to ensure all mobile browsers can execute the inline onclick handlers perfectly
         window.App = {
             state: {
                 concept: '',
@@ -181,7 +180,6 @@
                 exportData: null 
             },
 
-            // Safe icon renderer to prevent crashes if CDN is blocked
             refreshIcons() {
                 if (typeof lucide !== 'undefined') {
                     try { lucide.createIcons(); } catch (e) { console.warn("Icon render skipped"); }
@@ -199,6 +197,37 @@
                 document.getElementById('negativeTags').addEventListener('input', (e) => { this.state.negativeTags = e.target.value; this.renderSegments(); });
                 document.getElementById('customApiKey').addEventListener('input', (e) => { this.state.customApiKey = e.target.value; });
 
+                // BYPASS BROWSER PROTECTION: Global Event Delegation (No inline onclick handlers!)
+                document.addEventListener('click', (e) => {
+                    const btn = e.target.closest('[data-action]');
+                    if (!btn) return;
+                    
+                    const action = btn.dataset.action;
+                    const segmentNum = btn.dataset.segment ? parseInt(btn.dataset.segment) : null;
+                    const type = btn.dataset.type;
+
+                    if (action === 'copy-prompt') {
+                        const text = this.generatePromptText(segmentNum);
+                        this.copyToClipboard(text, btn.id);
+                    } else if (action === 'generate-image') {
+                        this.triggerGenerate(segmentNum, type);
+                    } else if (action === 'open-export') {
+                        const stateKey = `${segmentNum}-${type}`;
+                        const imgState = this.state.images[stateKey];
+                        if (imgState && imgState.data) {
+                            this.openExportModal(imgState.data, segmentNum, type);
+                        }
+                    } else if (action === 'close-export') {
+                        this.closeExportModal();
+                    } else if (action === 'export-copy') {
+                        this.executeCopyImage();
+                    } else if (action === 'export-share') {
+                        this.executeShare();
+                    } else if (action === 'export-download') {
+                        this.executeDownload();
+                    }
+                });
+
                 this.renderSegments();
             },
 
@@ -296,36 +325,4 @@
                 }
             },
 
-            setImageState(segmentNum, type, status, data = null, errorMsg = '') {
-                const key = `${segmentNum}-${type}`;
-                this.state.images[key] = { status, data, errorMsg };
-                
-                const boxContainer = document.getElementById(`img-box-${segmentNum}-${type.replace(/\s+/g, '-')}`);
-                if (boxContainer) {
-                    boxContainer.innerHTML = this.getImageBoxInnerHtml(segmentNum, type);
-                    this.refreshIcons();
-                }
-            },
-
-            openExportModal(base64Data, segmentNum, type) {
-                this.state.exportData = { base64: base64Data, segmentNum, type };
-                document.getElementById('exportModalImage').src = base64Data;
-                document.getElementById('exportModal').style.display = 'flex';
-                this.setExportStatus('');
-            },
-
-            closeExportModal() {
-                document.getElementById('exportModal').style.display = 'none';
-            },
-
-            setExportStatus(msg) {
-                const el = document.getElementById('exportStatus');
-                if (msg) {
-                    el.innerText = msg;
-                    el.style.display = 'block';
-                } else {
-                    el.style.display = 'none';
-                }
-            },
-
-            getBlobFromBase64(base64D
+