Update templates/image_studio.html

templates/image_studio.html

@@ -115,12 +115,12 @@
         .ratio-btn:hover { border-color: var(--accent-primary); transform: translateY(-3px); }
         .ratio-btn.active { background: #fff; border-color: var(--accent-primary); color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-glow); }
         
-        .ratio-icon-box { background-color: var(--panel-bg); border: 2px solid var(--text-tertiary); border-radius: 4px; transition: var(--transition-smooth); }
-        .ratio-btn.active .ratio-icon-box { border-color: var(--accent-primary); background-color: var(--accent-primary-glow); }
+        .ratio-icon-box { background-color: var(--panel-bg); border: 2px solid var(--text-tertiary); border-radius: 4px; transition: var(--transition-smooth); display:flex; align-items:center; justify-content:center;}
+        .ratio-btn.active .ratio-icon-box { border-color: var(--accent-primary); background-color: var(--accent-primary-glow); color: var(--accent-primary); }
         .icon-1-1 { width: 28px; height: 28px; }
         .icon-16-9 { width: 40px; height: 22px; }
         .icon-9-16 { width: 22px; height: 40px; }
-        .icon-4-3 { width: 34px; height: 25px; }
+        .icon-custom { width: 34px; height: 25px; border-style: dashed !important; color: var(--text-tertiary); }
 
         /* Model Selector Grid (Square) */
         .model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
@@ -219,7 +219,7 @@
         @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 --- */
+        /* --- Custom Dialogs (Confirm & Input) --- */
         .confirm-modal-backdrop {
             position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
             background-color: rgba(26, 32, 44, 0.7); z-index: 3000;
@@ -245,6 +245,8 @@
         .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); }
+        .btn-primary-action { background: var(--accent-primary); color: white; box-shadow: 0 4px 10px rgba(74, 108, 250, 0.3); }
+        .btn-primary-action:hover { background: var(--accent-primary-hover); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(74, 108, 250, 0.4); }
 
         /* --- History Section Styles --- */
         .history-section {
@@ -268,7 +270,7 @@
         .danger-btn:hover { background: var(--danger-color); color: #fff; }
         
         .history-grid {
-            display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; /* تنظیم نمایش دقیقاً ۲ تصویر در هر ردیف */
+            display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;
         }
         .history-item {
             background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm);
@@ -301,30 +303,37 @@
         /* --- 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;
+            background-color: rgba(26, 32, 44, 0.95); z-index: 2000;
+            display: flex; flex-direction: column; align-items: center;
             opacity: 0; animation: fadeInBackdrop 0.3s forwards;
-            flex-direction: column;
+            overflow-y: auto; /* امکان اسکرول برای موبایل */
+            padding: 40px 20px;
+        }
+        .image-view-wrapper {
+            margin: auto; /* قرارگیری در مرکز عمودی اگر فضا بود */
+            display: flex; flex-direction: column; align-items: center; gap: 12px;
+            width: 100%; max-width: 800px; position: relative;
         }
         .image-view-modal img {
-            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;
+            max-width: 100%; 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);
+            position: fixed; top: 20px; right: 20px; background: rgba(255,255,255,0.15); 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; z-index: 2002;
+            backdrop-filter: blur(5px);
         }
         .image-view-close:hover {
-            background: rgba(255,255,255,0.2); border-color: white; transform: scale(1.1);
+            background: rgba(255,255,255,0.3); 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);
+            width: 100%; display: flex; gap: 15px; justify-content: center;
+            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);
+            font-family: inherit; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: 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; }
@@ -339,8 +348,10 @@
             .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;}
+            
+            .image-view-modal { padding: 60px 15px 30px; } /* فضای بالا برای دکمه خروج */
+            .image-view-toolbar { flex-direction: row; flex-wrap: wrap; padding: 10px; border-radius: 15px; gap: 10px;}
+            .iv-action-btn { flex: 1; min-width: 130px; font-size: 0.85rem; padding: 10px 12px;}
         }
     </style>
 </head>
@@ -398,9 +409,12 @@
                         <div class="ratio-icon-box icon-9-16"></div>
                         <span>۹:۱۶ استوری</span>
                     </button>
-                    <button class="ratio-btn" data-ratio="4:3" data-name="۴:۳ کلاسیک">
-                        <div class="ratio-icon-box icon-4-3"></div>
-                        <span>۴:۳ کلاسیک</span>
+                    <!-- Custom Size Button -->
+                    <button class="ratio-btn" data-ratio="custom" data-name="اندازه دلخواه">
+                        <div class="ratio-icon-box icon-custom">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
+                        </div>
+                        <span>اندازه دلخواه</span>
                     </button>
                 </div>
             </div>
@@ -462,7 +476,7 @@
     </div>
 
     <script>
-        // --- توابع پاپ‌آپ سفارشی (تاییدیه حذف) ---
+        // --- توابع پاپ‌آپ سفارشی (تاییدیه حذف و اندازه دلخواه) ---
         function showCustomConfirm(title, message, onConfirm) {
             const backdrop = document.createElement('div');
             backdrop.className = 'confirm-modal-backdrop';
@@ -500,6 +514,74 @@
             }
         }
 
+        // متغیرهای ذخیره ابعاد دلخواه
+        let userCustomWidth = 1024;
+        let userCustomHeight = 1024;
+
+        function showCustomSizeModal(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" style="color: var(--accent-primary); background: var(--accent-primary-glow);">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:32px;height:32px;"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><path d="M3 9h18"></path><path d="M9 21V9"></path></svg>
+                </div>
+                <div class="confirm-title">اندازه دلخواه تصویر</div>
+                <div class="confirm-message">ابعاد مورد نظر خود را وارد کنید (بین ۲۵۶ تا ۲۰۴۸)</div>
+                <div style="display:flex; gap:10px; margin-bottom: 20px; flex-direction:row-reverse;">
+                    <div style="flex:1;">
+                        <label style="display:block; font-size:0.85rem; margin-bottom:5px; color:var(--text-secondary); font-weight:bold;">عرض (Width)</label>
+                        <input type="number" id="inp-width" value="${userCustomWidth}" min="256" max="2048" style="width:100%; padding:10px; border-radius:10px; border:2px solid var(--input-border); font-family:inherit; text-align:center; font-weight:bold; font-size:1.1rem; outline:none;">
+                    </div>
+                    <div style="flex:1;">
+                        <label style="display:block; font-size:0.85rem; margin-bottom:5px; color:var(--text-secondary); font-weight:bold;">ارتفاع (Height)</label>
+                        <input type="number" id="inp-height" value="${userCustomHeight}" min="256" max="2048" style="width:100%; padding:10px; border-radius:10px; border:2px solid var(--input-border); font-family:inherit; text-align:center; font-weight:bold; font-size:1.1rem; outline:none;">
+                    </div>
+                </div>
+                <div class="confirm-actions">
+                    <button class="confirm-btn btn-cancel" id="size-cancel">انصراف</button>
+                    <button class="confirm-btn btn-primary-action" id="size-ok">تایید اندازه</button>
+                </div>
+            `;
+            
+            backdrop.appendChild(content);
+            document.body.appendChild(backdrop);
+            
+            // Focus styling
+            const inputs = backdrop.querySelectorAll('input');
+            inputs.forEach(inp => {
+                inp.addEventListener('focus', () => inp.style.borderColor = 'var(--accent-primary)');
+                inp.addEventListener('blur', () => inp.style.borderColor = 'var(--input-border)');
+            });
+
+            const close = () => {
+                backdrop.style.opacity = '0';
+                setTimeout(() => backdrop.remove(), 300);
+            };
+            
+            backdrop.querySelector('#size-cancel').onclick = close;
+            
+            backdrop.querySelector('#size-ok').onclick = () => {
+                const w = parseInt(backdrop.querySelector('#inp-width').value);
+                const h = parseInt(backdrop.querySelector('#inp-height').value);
+                if(w >= 256 && w <= 2048 && h >= 256 && h <= 2048) {
+                    userCustomWidth = w;
+                    userCustomHeight = h;
+                    onConfirm(w, h);
+                    close();
+                } else {
+                    alert('لطفا مقادیری بین ۲۵۶ تا ۲۰۴۸ وارد کنید.');
+                }
+            };
+
+            backdrop.onclick = (e) => {
+                if(e.target === backdrop) close();
+            }
+        }
+
         // --- مدیریت دیتابیس تصاویر (IndexedDB) ---
         const dbName = 'ImageStudioDB';
         const storeName = 'ImageHistory';
@@ -603,7 +685,7 @@
                         <div class="history-prompt" dir="auto" title="${safeTitle}">${item.prompt}</div>
                         <div class="history-meta">
                             <span>${item.model}</span>
-                            <span>${item.ratio}</span>
+                            <span dir="ltr">${item.ratio}</span>
                         </div>
                         <button class="history-delete-btn">حذف تصویر</button>
                     </div>
@@ -651,21 +733,24 @@
             });
         });
 
+        // نمایش عکس بزرگ همراه با نوار ابزار در زیر آن (با قابلیت اسکرول)
         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" 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 class="image-view-wrapper" onclick="event.stopPropagation()">
+                    <img src="${url}" alt="Full Image" class="full-view-img">
+                    <div class="image-view-toolbar">
+                        <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>
                 </div>
             `;
             
@@ -696,7 +781,7 @@
             };
 
             modal.onclick = (e) => {
-                if(e.target === modal || e.target.classList.contains('full-view-img')) modal.remove();
+                if(e.target === modal) modal.remove();
             };
             document.body.appendChild(modal);
         };
@@ -801,10 +886,6 @@
             } 
         });
 
-        document.getElementById('upgrade-button').addEventListener('click', () => { 
-            parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM' }, '*'); 
-        });
-
         document.addEventListener('DOMContentLoaded', async () => { 
             userFingerprint = await getBrowserFingerprint(); 
             parent.postMessage({ type: 'REQUEST_USER_DATA' }, '*'); 
@@ -822,7 +903,6 @@
         let selectedModelName = 'Flux Pro';
         let selectedRatio = '1:1';
         let selectedRatioName = '۱:۱ مربع';
-        let selectedRatioClass = 'ratio-1-1';
 
         modelSelector.addEventListener('click', (e) => {
             const card = e.target.closest('.model-card');
@@ -836,18 +916,33 @@
         ratioSelector.addEventListener('click', (e) => {
             const btn = e.target.closest('.ratio-btn');
             if (!btn) return;
-            ratioSelector.querySelectorAll('.ratio-btn').forEach(c => c.classList.remove('active'));
-            btn.classList.add('active');
-            selectedRatio = btn.dataset.ratio;
-            selectedRatioName = btn.dataset.name;
-            selectedRatioClass = 'ratio-' + btn.dataset.ratio.replace(':', '-');
+            
+            if (btn.dataset.ratio === 'custom') {
+                showCustomSizeModal((w, h) => {
+                    // Update UI after confirm
+                    ratioSelector.querySelectorAll('.ratio-btn').forEach(c => c.classList.remove('active'));
+                    btn.classList.add('active');
+                    selectedRatio = 'custom';
+                    selectedRatioName = `${w}x${h} دلخواه`;
+                    btn.querySelector('span').textContent = `${w}x${h} دلخواه`;
+                });
+            } else {
+                ratioSelector.querySelectorAll('.ratio-btn').forEach(c => c.classList.remove('active'));
+                btn.classList.add('active');
+                selectedRatio = btn.dataset.ratio;
+                selectedRatioName = btn.dataset.name;
+                
+                // Reset custom button text
+                const customBtn = ratioSelector.querySelector('[data-ratio="custom"]');
+                if(customBtn) customBtn.querySelector('span').textContent = 'اندازه دلخواه';
+            }
         });
 
         const getDimensions = (ratio) => {
             switch (ratio) {
                 case '9:16': return { width: 768, height: 1344 };
                 case '16:9': return { width: 1344, height: 768 };
-                case '4:3': return { width: 1152, height: 864 };
+                case 'custom': return { width: userCustomWidth, height: userCustomHeight };
                 case '1:1': default: return { width: 1024, height: 1024 };
             }
         };
@@ -986,7 +1081,7 @@
                                                 ${currentModelName}
                                             </span>
                                             <span>|</span>
-                                            <span>
+                                            <span dir="ltr">
                                                 <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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                                                 ${currentRatioName}
                                             </span>