Update templates/editor.html

templates/editor.html

@@ -92,12 +92,18 @@
         .upgrade-btn { display: none; width: 100%; margin-top: 1rem; padding: 1rem; background: linear-gradient(90deg, #FFD54F, #FFC107); border: none; border-radius: var(--radius-btn); color: #212529; font-weight: 800; font-size: 1.1rem; cursor: pointer; text-align: center; font-family: inherit; box-shadow: 0 6px 15px rgba(255, 193, 7, 0.3); transition: transform 0.3s; }
         .upgrade-btn:hover { transform: translateY(-3px); }
 
-        /* Result Area */
-        #image-result-container { min-height: 350px; 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; }
-        #image-result-container.loading { border-style: solid; border-color: var(--panel-border); }
-        #image-result-container.has-content { border-style: solid; border-color: var(--panel-border); background-color: transparent; padding: 0;}
+        /* --- Result Area Standardized --- */
+        #image-result-container { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 2rem; border-top: 1px solid var(--panel-border); animation: fadeIn 0.5s ease-out; }
         
-        .generator-container { position: relative; width: 400px; max-width: 100%; height: 300px; border: 2px solid #38bdf8; border-radius: 20px; overflow: hidden; box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); animation: pulse-loader 5s infinite cubic-bezier(0.4, 0, 0.6, 1); background-color: #161b22; color: #f0f6fc; display: none; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; }
+        .empty-placeholder { width: 400px; max-width: 100%; height: 300px; border: 2px dashed var(--input-border); border-radius: 20px; background-color: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
+        .empty-placeholder svg { color: var(--text-tertiary); margin-bottom: 15px; opacity: 0.5; width: 48px; height: 48px; }
+        .empty-placeholder p { color: var(--text-tertiary); font-size: 0.95rem; font-weight: 600; margin: 0; }
+
+        .generated-image-box { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
+        .generated-image-box img { max-width: 100%; max-height: 500px; border-radius: var(--radius-input); border: 1px solid var(--panel-border); box-shadow: var(--shadow-lg); object-fit: contain; cursor: pointer; transition: transform 0.2s;}
+        .generated-image-box img:hover { transform: scale(1.02); }
+        
+        .generator-container { position: relative; width: 400px; max-width: 100%; height: 300px; border: 2px solid #38bdf8; border-radius: 20px; overflow: hidden; box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); animation: pulse-loader 5s infinite cubic-bezier(0.4, 0, 0.6, 1); background-color: #161b22; color: #f0f6fc; margin: 0 auto; }
         .noise-layer, .sketch-layer, .building-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
         .noise-layer { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="none"/><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.6"/></svg>') repeat; opacity: 1; animation: fade-noise 7s infinite ease-in-out; }
         @keyframes fade-noise { 0% { opacity: 1; filter: blur(5px); } 30% { opacity: 0.8; filter: blur(2px); } 100% { opacity: 0; filter: blur(0px); } }
@@ -112,13 +118,10 @@
         .text-overlay { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: 700; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8); animation: glow-text 7s infinite ease-in-out; font-family: var(--app-font); z-index: 2; text-align: center; width: 90%; }
         .progress-bar { position: absolute; bottom: 0; left: 0; width: 0%; height: 6px; background: linear-gradient(to right, #38bdf8, #bb86fc, #facc15); transition: width 0.3s linear; z-index: 2; }
         
-        #result-image-wrapper { display: none; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
-        #result-image-display { max-width: 100%; border-radius: var(--radius-input); box-shadow: var(--shadow-lg); border: 1px solid var(--panel-border); }
-        
         .download-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 300px; padding: 0.9rem; background: var(--accent-primary); color: #fff; border: none; border-radius: var(--radius-btn); font-family: inherit; font-weight: 700; cursor: pointer; transition: var(--transition-smooth); box-shadow: 0 4px 10px rgba(74, 108, 250, 0.3); }
         .download-btn:hover { background: var(--accent-primary-hover); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(74, 108, 250, 0.4); }
 
-        /* --- History Section Styles (Identical to fluxpro.html) --- */
+        /* --- History Section Styles --- */
         .history-section { display: none; animation: fadeIn 0.5s ease-out; }
         .history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
         .history-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; margin: 0; }
@@ -136,7 +139,7 @@
         .history-delete-btn { margin-top: auto; padding: 6px; background: transparent; color: var(--danger-color); border: 1px dashed var(--danger-color); border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 0.8rem; font-weight: 600; transition: var(--transition-smooth); }
         .history-delete-btn:hover { background: var(--danger-color); color: white; border-style: solid; }
 
-        /* --- Image View Modal & Toolbar (Identical to fluxpro.html) --- */
+        /* --- Image View Modal & Toolbar --- */
         .image-view-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 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; 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: 100%; border-radius: var(--radius-card); box-shadow: 0 0 30px rgba(0,0,0,0.5); object-fit: contain; }
@@ -226,12 +229,9 @@
                      ۳. نتیجه نهایی
                 </div>
                 <div id="image-result-container">
-                    <p id="idle-text" style="color: var(--text-tertiary); font-weight: 600; text-align: center;">تصویر و دستور خود را وارد کنید.</p>
-                    
-                    <div class="generator-container" id="loading-box">
-                        <div class="noise-layer"></div><div class="sketch-layer"></div><div class="building-layer"></div><div class="pixel-grid"></div><div class="particles"></div>
-                        <div class="text-overlay" id="loading-text">در حال پردازش...</div>
-                        <div class="progress-bar" id="tv-progress-bar"></div>
+                    <div class="empty-placeholder">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                        <p>تصویر و دستور خود را وارد کنید.</p>
                     </div>
                 </div>
             </div>
@@ -718,8 +718,6 @@
                     <div class="progress-bar" id="tv-progress-bar"></div>
                 </div>
             `;
-            imageResultContainer.classList.remove('has-content');
-            imageResultContainer.classList.add('loading');
             imageResultContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
 
             // تایمر هشدار ۲ دقیقه‌ای
@@ -783,14 +781,12 @@
 
                                 const absoluteUrl = window.location.origin + statusData.url;
                                 
-                                imageResultContainer.classList.remove('loading');
-                                imageResultContainer.classList.add('has-content');
                                 imageResultContainer.innerHTML = `
-                                    <div style="font-weight: bold; margin-bottom: 10px; color: var(--accent-primary); text-align:center;">ویرایش شما آماده شد! 🎨</div>
-                                    <div id="result-image-wrapper" style="display:flex;">
-                                        <img id="result-image-display" src="${statusData.url}" alt="تصویر ویرایش شده">
+                                    <div style="font-weight: bold; margin-bottom: 15px; color: var(--accent-primary); text-align:center; font-size: 1.1rem;">ویرایش شما آماده شد! 🎨</div>
+                                    <div class="generated-image-box">
+                                        <img id="result-image-display" src="${statusData.url}" alt="تصویر ویرایش شده" onload="this.scrollIntoView({behavior: 'smooth', block: 'center'})">
                                         <button class="download-btn" onclick="triggerDownload('${absoluteUrl}')">
-                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
+                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 22px; height: 22px;"><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>
@@ -823,7 +819,6 @@
             clearInterval(fakeProgressInterval);
             clearTimeout(activeTimeoutTimer);
             imageResultContainer.innerHTML = `<div style="color: var(--danger-color); font-weight:bold; text-align:center; padding: 2rem;">خطا: ${msg}</div>`;
-            imageResultContainer.classList.remove('loading');
             resetBtn();
         }