Update index.html

index.html

@@ -270,6 +270,28 @@
         #submit-btn:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; opacity: 0.7; }
         #submit-btn .spinner { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: none; }
         
+        /* === START: NEW STYLE FOR DOWNLOAD BUTTON === */
+        .download-button {
+            display: flex; align-items: center; justify-content: center; gap: 0.75rem;
+            width: 100%; max-width: 280px; margin: 1.5rem auto 0; padding: 0.9rem;
+            font-size: 1rem; font-weight: 600;
+            background: var(--accent-primary); color: #fff; border: none;
+            border-radius: var(--radius-btn); cursor: pointer; transition: all 0.3s ease;
+            box-shadow: var(--shadow-md);
+        }
+        .download-button svg { width: 20px; height: 20px; }
+        .download-button:hover:not(:disabled) {
+            background: var(--accent-primary-hover);
+            transform: translateY(-3px);
+            box-shadow: var(--shadow-lg);
+        }
+        .download-button:disabled {
+            background: var(--text-tertiary);
+            cursor: not-allowed;
+            opacity: 0.8;
+        }
+        /* === END: NEW STYLE FOR DOWNLOAD BUTTON === */
+        
         #result-container { min-height: 250px; position: relative; padding: 1rem; background-color: var(--input-bg); border-radius: var(--radius-card); border: 2px dashed var(--input-border); box-shadow: var(--shadow-sm) inset; transition: var(--transition-smooth); display: flex; align-items: center; justify-content: center; flex-direction: column; box-sizing: border-box; }
         #result-container.loading,
         #result-container.has-error-guide {
@@ -2308,7 +2330,6 @@
                     <div class="progress-bar" id="loading-progress-bar"></div>
                 </div>
             </div>`;
-        const resultWrapperHTML = `<div id="result-image-wrapper"><img id="result-image-display" src="" alt="تصویر خلق شده"></div>`;
         
         const startCountdown = (durationInSeconds) => {
             stopCountdown(); 
@@ -2361,12 +2382,75 @@
             }
         };
 
+        // === START: MODIFIED FUNCTION TO ADD DOWNLOAD BUTTON ===
         const displayResult = (imageUrl) => {
             resultContainer.classList.remove('loading', 'has-error-guide');
             resultContainer.classList.add('has-content');
-            resultContainer.innerHTML = resultWrapperHTML;
-            document.getElementById('result-image-display').src = imageUrl;
+            
+            // Create elements
+            const wrapper = document.createElement('div');
+            wrapper.id = 'result-image-wrapper';
+            wrapper.style.animation = 'fadeIn 0.5s';
+            wrapper.style.textAlign = 'center';
+
+            const img = document.createElement('img');
+            img.id = 'result-image-display';
+            img.src = imageUrl;
+            img.alt = 'تصویر خلق شده';
+            img.style.maxWidth = '100%';
+            img.style.maxHeight = '500px';
+            img.style.objectFit = 'contain';
+            img.style.borderRadius = 'var(--radius-input)';
+            img.style.boxShadow = 'var(--shadow-md)';
+            img.style.border = '1px solid var(--panel-border)';
+            wrapper.appendChild(img);
+
+            const downloadBtn = document.createElement('button');
+            downloadBtn.id = 'download-btn';
+            downloadBtn.className = 'download-button';
+            downloadBtn.innerHTML = `
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                    <polyline points="7 10 12 15 17 10"/>
+                    <line x1="12" y1="15" x2="12" y2="3"/>
+                </svg>
+                <span>دانلود تصویر</span>
+            `;
+
+            // Clear container and append new elements
+            resultContainer.innerHTML = '';
+            resultContainer.appendChild(wrapper);
+            resultContainer.appendChild(downloadBtn);
+
+            // Add event listener for the download button
+            downloadBtn.addEventListener('click', async (event) => {
+                const button = event.currentTarget;
+                const buttonText = button.querySelector('span');
+                const originalText = buttonText.textContent;
+                
+                button.disabled = true;
+                buttonText.textContent = 'در حال آماده‌سازی...';
+
+                try {
+                    const response = await fetch(img.src);
+                    const blob = await response.blob();
+                    const filename = `generated-image-${Date.now()}.png`;
+
+                    window.parent.postMessage({
+                        type: 'DOWNLOAD_IMAGE',
+                        payload: { blob, filename }
+                    }, '*');
+
+                } catch (error) {
+                    console.error('Error preparing file for download:', error);
+                    alert('خطا در آماده‌سازی فایل برای دانلود. لطفاً دوباره تلاش کنید.');
+                } finally {
+                    button.disabled = false;
+                    buttonText.textContent = originalText;
+                }
+            });
         };
+        // === END: MODIFIED FUNCTION ===
         
         const clearResult = () => {
             resultContainer.classList.remove('has-content', 'loading', 'has-error-guide');