Update templates/image_studio.html

templates/image_studio.html

@@ -219,6 +219,33 @@
         @keyframes fadeInBackdrop { from { opacity: 0; } to { opacity: 1; } }
         @keyframes fadeInModal { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
 
+        /* --- Custom Confirm Dialog --- */
+        .confirm-modal-backdrop {
+            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
+            background-color: rgba(26, 32, 44, 0.7); z-index: 3000;
+            display: flex; align-items: center; justify-content: center;
+            opacity: 0; animation: fadeInBackdrop 0.3s forwards;
+            backdrop-filter: blur(5px);
+        }
+        .confirm-modal-content {
+            background: var(--panel-bg); border-radius: var(--radius-card); padding: 25px;
+            width: 90%; max-width: 400px; text-align: center; box-shadow: var(--shadow-xl);
+            transform: scale(0.9); animation: popIn 0.3s forwards; border: 1px solid var(--panel-border);
+        }
+        @keyframes popIn { to { transform: scale(1); opacity: 1; } }
+        .confirm-icon {
+            width: 60px; height: 60px; color: var(--danger-color); margin: 0 auto 15px;
+            background: rgba(229, 62, 62, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;
+        }
+        .confirm-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 10px; }
+        .confirm-message { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 25px; line-height: 1.6; }
+        .confirm-actions { display: flex; gap: 10px; justify-content: center; }
+        .confirm-btn { flex: 1; padding: 12px; border-radius: var(--radius-btn); font-weight: 700; font-size: 1rem; cursor: pointer; border: none; transition: var(--transition-smooth); font-family: inherit; }
+        .btn-cancel { background: var(--input-bg); color: var(--text-secondary); border: 1px solid var(--input-border); }
+        .btn-cancel:hover { background: #e2e8f0; color: var(--text-primary); }
+        .btn-danger { background: var(--danger-color); color: white; box-shadow: 0 4px 10px rgba(229,62,62,0.3); }
+        .btn-danger:hover { background: #C53030; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(229,62,62,0.4); }
+
         /* --- History Section Styles --- */
         .history-section {
             margin-top: 1rem;
@@ -254,11 +281,12 @@
             width: 100%; height: 200px; object-fit: cover; cursor: pointer; border-bottom: 1px solid var(--input-border);
         }
         .history-details {
-            padding: 12px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1;
+            padding: 12px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; overflow: hidden;
         }
+        /* One line prompt with ellipsis */
         .history-prompt {
             font-size: 0.85rem; color: var(--text-primary); font-weight: 600;
-            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; direction: auto; text-align: right;
+            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: auto; text-align: right;
         }
         .history-meta {
             font-size: 0.75rem; color: var(--text-tertiary); display: flex; justify-content: space-between; font-weight: 600; background: var(--panel-bg); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--panel-border);
@@ -270,23 +298,38 @@
             background: var(--danger-color); color: white; border-style: solid;
         }
 
+        /* --- Image View Modal & Toolbar --- */
         .image-view-modal {
             position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
             background-color: rgba(26, 32, 44, 0.9); z-index: 2000;
             display: flex; align-items: center; justify-content: center;
             opacity: 0; animation: fadeInBackdrop 0.3s forwards;
+            flex-direction: column;
         }
         .image-view-modal img {
-            max-width: 90%; max-height: 90vh; border-radius: var(--radius-card); box-shadow: 0 0 30px rgba(0,0,0,0.5);
+            max-width: 90%; max-height: 80vh; border-radius: var(--radius-card); box-shadow: 0 0 30px rgba(0,0,0,0.5); object-fit: contain;
         }
         .image-view-close {
             position: absolute; top: 25px; right: 25px; background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.3);
             color: white; font-size: 1.5rem; cursor: pointer; width: 45px; height: 45px; border-radius: 50%;
-            display: flex; align-items: center; justify-content: center; transition: all 0.3s;
+            display: flex; align-items: center; justify-content: center; transition: all 0.3s; z-index: 2002;
         }
         .image-view-close:hover {
             background: rgba(255,255,255,0.2); border-color: white; transform: scale(1.1);
         }
+        
+        .image-view-toolbar {
+            position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
+            display: flex; gap: 15px; z-index: 2001; background: rgba(0,0,0,0.7); padding: 12px 20px; border-radius: 20px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1);
+        }
+        .iv-action-btn {
+            background: var(--accent-primary); color: white; border: none; padding: 10px 18px; border-radius: var(--radius-btn);
+            font-family: inherit; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s; font-size: 0.95rem; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+        }
+        .iv-action-btn:hover { background: var(--accent-primary-hover); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.4); }
+        .iv-action-btn svg { width: 20px; height: 20px; }
+        .iv-btn-copy { background: #4A5568; }
+        .iv-btn-copy:hover { background: #2D3748; }
 
         @media (max-width: 650px) {
             .model-grid { gap: 10px; }
@@ -296,6 +339,8 @@
             .empty-placeholder { height: 250px; }
             .text-overlay { font-size: 16px; }
             .history-item img { height: 140px; }
+            .image-view-toolbar { bottom: 20px; width: 90%; justify-content: center; padding: 10px; }
+            .iv-action-btn { padding: 8px 12px; font-size: 0.85rem; flex: 1; justify-content: center;}
         }
     </style>
 </head>
@@ -417,6 +462,44 @@
     </div>
 
     <script>
+        // --- توابع پاپ‌آپ سفارشی (تاییدیه حذف) ---
+        function showCustomConfirm(title, message, onConfirm) {
+            const backdrop = document.createElement('div');
+            backdrop.className = 'confirm-modal-backdrop';
+            
+            const content = document.createElement('div');
+            content.className = 'confirm-modal-content';
+            
+            content.innerHTML = `
+                <div class="confirm-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+                </div>
+                <div class="confirm-title">${title}</div>
+                <div class="confirm-message">${message}</div>
+                <div class="confirm-actions">
+                    <button class="confirm-btn btn-cancel" id="confirm-cancel">انصراف</button>
+                    <button class="confirm-btn btn-danger" id="confirm-ok">تایید و حذف</button>
+                </div>
+            `;
+            
+            backdrop.appendChild(content);
+            document.body.appendChild(backdrop);
+            
+            const close = () => {
+                backdrop.style.opacity = '0';
+                setTimeout(() => backdrop.remove(), 300);
+            };
+            
+            backdrop.querySelector('#confirm-cancel').onclick = close;
+            backdrop.querySelector('#confirm-ok').onclick = () => {
+                onConfirm();
+                close();
+            };
+            backdrop.onclick = (e) => {
+                if(e.target === backdrop) close();
+            }
+        }
+
         // --- مدیریت دیتابیس تصاویر (IndexedDB) ---
         const dbName = 'ImageStudioDB';
         const storeName = 'ImageHistory';
@@ -511,31 +594,41 @@
                 const div = document.createElement('div');
                 div.className = 'history-item';
                 
+                // پاک‌سازی نقل قول‌ها برای نمایش در تایتل (تولتیپ)
+                const safeTitle = item.prompt.replace(/"/g, '&quot;');
+
                 div.innerHTML = `
-                    <img src="${blobUrl}" alt="History Image" title="برای مشاهده کلیک کنید" onclick="viewHistoryImage('${blobUrl}')">
+                    <img src="${blobUrl}" alt="History Image" title="برای مشاهده کلیک کنید">
                     <div class="history-details">
-                        <div class="history-prompt" dir="auto" title="${item.prompt.replace(/"/g, '&quot;')}">${item.prompt}</div>
+                        <div class="history-prompt" dir="auto" title="${safeTitle}">${item.prompt}</div>
                         <div class="history-meta">
                             <span>${item.model}</span>
                             <span>${item.ratio}</span>
                         </div>
-                        <button class="history-delete-btn" onclick="deleteHistoryItem(${item.id})">حذف تصویر</button>
+                        <button class="history-delete-btn">حذف تصویر</button>
                     </div>
                 `;
+                
+                // استفاده از EventListener برای جلوگیری از بهم ریختگی کاراکترها هنگام کلیک
+                div.querySelector('img').addEventListener('click', () => {
+                    viewHistoryImage(blobUrl, item.prompt);
+                });
+                
+                div.querySelector('.history-delete-btn').addEventListener('click', () => {
+                    deleteHistoryItem(item.id);
+                });
+
                 grid.appendChild(div);
             });
         }
 
-        window.deleteHistoryItem = async function(id) {
-            if (!db) await initDB();
-            return new Promise((resolve, reject) => {
+        window.deleteHistoryItem = function(id) {
+            showCustomConfirm('حذف از سابقه', 'آیا از حذف دائمی این تصویر از حافظه مرورگر خود اطمینان دارید؟', async () => {
+                if (!db) await initDB();
                 const transaction = db.transaction([storeName], 'readwrite');
                 const store = transaction.objectStore(storeName);
                 store.delete(id);
-                transaction.oncomplete = () => {
-                    loadHistory();
-                    resolve();
-                };
+                transaction.oncomplete = () => loadHistory();
             });
         };
 
@@ -552,25 +645,62 @@
             });
         }
 
-        window.viewHistoryImage = function(url) {
+        document.getElementById('clear-history-btn').addEventListener('click', () => {
+            showCustomConfirm('حذف تمام تصاویر', 'آیا از پاک کردن تمامی ۵۰ تصویر آخر از سابقه مطمئن هستید؟ این عمل غیرقابل بازگشت است.', () => {
+                deleteAllHistory();
+            });
+        });
+
+        window.viewHistoryImage = function(url, promptText) {
             const modal = document.createElement('div');
             modal.className = 'image-view-modal';
             modal.innerHTML = `
                 <button class="image-view-close" onclick="this.parentElement.remove()">×</button>
-                <img src="${url}" alt="Full Image">
+                <img src="${url}" alt="Full Image" class="full-view-img">
+                <div class="image-view-toolbar" onclick="event.stopPropagation()">
+                    <button class="iv-action-btn iv-btn-copy" id="btn-copy-prompt">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+                        کپی پرامپت
+                    </button>
+                    <button class="iv-action-btn" id="btn-download-img">
+                        <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"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+                        دانلود تصویر
+                    </button>
+                </div>
             `;
+            
+            // رویداد دانلود تصویر لوکال
+            modal.querySelector('#btn-download-img').onclick = () => {
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'AI_Image_' + Date.now() + '.png';
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+            };
+            
+            // رویداد کپی پرامپت با افکت جذاب
+            const copyBtn = modal.querySelector('#btn-copy-prompt');
+            copyBtn.onclick = () => {
+                navigator.clipboard.writeText(promptText).then(() => {
+                    const originalHtml = copyBtn.innerHTML;
+                    copyBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> کپی شد!`;
+                    copyBtn.style.background = 'var(--accent-secondary)';
+                    copyBtn.style.color = '#1A202C';
+                    setTimeout(() => {
+                        copyBtn.innerHTML = originalHtml;
+                        copyBtn.style.background = '';
+                        copyBtn.style.color = '';
+                    }, 2000);
+                });
+            };
+
             modal.onclick = (e) => {
-                if(e.target === modal) modal.remove();
+                if(e.target === modal || e.target.classList.contains('full-view-img')) modal.remove();
             };
             document.body.appendChild(modal);
         };
 
-        document.getElementById('clear-history-btn').addEventListener('click', () => {
-            if(confirm('آیا از حذف تمام سابقه تصاویر اطمینان دارید؟')) {
-                deleteAllHistory();
-            }
-        });
-
 
         // --- سیستم اعتبا�� و شناسایی کاربر ---
         let userSubscriptionStatus = 'free';