Update index.html

index.html

@@ -75,6 +75,7 @@
 
         .form-group { margin-bottom: 2.5rem; }
         .form-group:last-child { margin-bottom: 0; }
+        
         .form-label {
             display: flex;
             align-items: center;
@@ -86,11 +87,9 @@
         }
         .form-label svg { width: 24px; height: 24px; color: var(--accent-primary); }
 
-        /* --- CHANGE 1: Styles for the new uploader preview --- */
-        #upload-container.has-file #upload-area { display: none; }
-        #upload-container:not(.has-file) #file-preview { display: none; }
-
+        /* --- CHANGE 1: Uploader styles completely reworked for single-panel preview --- */
         #upload-area {
+            position: relative;
             border: 2px dashed var(--input-border);
             border-radius: var(--radius-input);
             padding: 2.5rem;
@@ -98,52 +97,73 @@
             cursor: pointer;
             transition: var(--transition-smooth);
             background-color: var(--input-bg);
+            min-height: 200px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden; /* To keep rounded corners on the image */
         }
-        #upload-area.drag-over, #upload-area:hover {
+        #upload-area.drag-over, #upload-area:hover:not(.has-file) {
             border-color: var(--accent-primary);
             background-color: #fff;
             box-shadow: 0 0 15px var(--accent-primary-glow);
         }
-        #upload-icon svg { width: 48px; height: 48px; color: var(--accent-primary); margin-bottom: 1rem; stroke-width: 1.5; opacity: 0.8; }
-        #upload-area p { margin: 0; color: var(--text-secondary); font-weight: 500; }
-        
-        #file-preview {
-            position: relative;
-            animation: fadeIn 0.3s;
+        #upload-area.has-file {
+            border-style: solid;
+            border-color: var(--panel-border);
+            padding: 0;
+            cursor: default;
         }
-        #preview-image {
-            display: block;
+
+        #upload-content {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1rem;
+        }
+        #upload-icon svg { width: 48px; height: 48px; color: var(--accent-primary); stroke-width: 1.5; opacity: 0.8; }
+        #upload-area p { margin: 0; color: var(--text-secondary); font-weight: 500; }
+
+        #preview-image-main {
+            display: none; /* Hidden by default */
             width: 100%;
-            max-height: 450px;
-            object-fit: contain;
-            border-radius: var(--radius-input);
-            border: 1px solid var(--panel-border);
-            background-color: var(--input-bg);
+            height: 100%;
+            object-fit: contain; /* Shows the full image as requested */
+            position: absolute;
+            top: 0;
+            left: 0;
         }
-        #remove-preview-btn {
+        #remove-file-btn-main {
+            display: none; /* Hidden by default */
             position: absolute;
-            top: 1rem;
-            left: 1rem;
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            border: none;
+            top: 12px;
+            right: 12px;
             background-color: rgba(26, 32, 44, 0.6);
             color: white;
-            font-size: 24px;
-            font-weight: bold;
-            display: flex;
-            align-items: center;
-            justify-content: center;
+            border: none;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
             cursor: pointer;
-            transition: var(--transition-smooth);
+            font-size: 1.2rem;
             line-height: 1;
-            padding-bottom: 4px; /* Optical alignment */
+            z-index: 10;
+            transition: var(--transition-smooth);
+            padding: 0;
         }
-        #remove-preview-btn:hover {
+        #remove-file-btn-main:hover {
             background-color: var(--danger-color);
             transform: scale(1.1);
         }
+
+        /* Logic to show/hide elements based on state */
+        #upload-area.has-file #upload-content { display: none; }
+        #upload-area.has-file #preview-image-main,
+        #upload-area.has-file #remove-file-btn-main {
+            display: block;
+        }
+        /* End of CHANGE 1 */
         
         textarea { width: 100%; padding: 1rem 1.2rem; border-radius: var(--radius-input); border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); box-shadow: var(--shadow-sm) inset; font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; transition: var(--transition-smooth); min-height: 90px; resize: vertical; }
         textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-sm) inset; background-color: var(--panel-bg); }
@@ -152,13 +172,7 @@
         #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; }
         
-        #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;
-        }
+        #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; }
         #result-container.loading, #result-container.has-content { border-style: solid; border-color: var(--panel-border); }
         #loading-placeholder { display: none; flex-direction: column; align-items: center; gap: 1.5rem; }
         #result-container.loading #loading-placeholder { display: flex; animation: fadeIn 0.5s; }
@@ -170,14 +184,11 @@
         .orbit:nth-child(1) .satellite { top: -5px; left: 50%; transform: translateX(-50%); }
         .orbit:nth-child(2) .satellite { top: 50%; left: -5px; background-color: var(--accent-secondary); transform: translateY(-50%); }
         .loading-text { font-weight: 500; color: var(--text-secondary); }
-        
         #result-grid { display: none; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; width: 100%; }
         #result-container.has-content #result-grid { display: grid; }
         #result-grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-input); cursor: pointer; transition: var(--transition-smooth); box-shadow: var(--shadow-md); border: 1px solid var(--panel-border); }
         #result-grid img:hover { transform: scale(1.05); box-shadow: var(--shadow-lg); z-index: 10; position: relative; }
         #error-message { color: var(--danger-color); text-align: center; margin-top: 1rem; display: none; font-weight: 500; }
-        
-        .gallery-section { margin-top: 3rem; animation-delay: 0.5s; }
         .gallery-header { display: flex; justify-content: space-between; align-items: center; }
         #clear-history-btn { background: none; border: 1px solid var(--panel-border); color: var(--text-secondary); padding: 0.5rem 1rem; border-radius: var(--radius-btn); cursor: pointer; display: none; align-items: center; gap: 0.5rem; font-family: var(--app-font); font-weight: 500; transition: all 0.2s; }
         #clear-history-btn:hover { border-color: var(--danger-color); color: var(--danger-color); }
@@ -193,7 +204,6 @@
         .history-delete-btn { position: absolute; top: 1rem; left: 1rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: var(--transition-smooth); }
         .history-delete-btn:hover { background-color: var(--panel-border); color: var(--danger-color); }
         .history-delete-btn svg { width: 18px; height: 18px; }
-
         #lightbox { position: fixed; inset: 0; background-color: rgba(18, 24, 38, 0.6); backdrop-filter: blur(10px) saturate(150%); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity 0.3s; }
         #lightbox.visible { display: flex; opacity: 1; }
         #lightbox-content { position: relative; animation: fadeIn 0.3s ease; }
@@ -203,7 +213,7 @@
         #lightbox-close { top: -50px; right: 0; font-size: 1.8rem; }
         #lightbox-download { top: -50px; left: 0; }
         #lightbox-download svg { width: 22px; height: 22px; }
-        /* --- CHANGE 2: Spinner CSS for download button is back --- */
+        /* --- CHANGE 2: Restored spinner for download button --- */
         #lightbox-download .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; }
 
         @media (max-width: 768px) {
@@ -226,17 +236,17 @@
                     <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 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg>
                     ۱. تصویر خود را انتخاب کنید
                 </div>
-                <div id="upload-container">
-                    <label id="upload-area" for="file-input">
+                <!-- --- CHANGE 1: Reworked HTML for single-panel uploader/preview --- -->
+                <label id="upload-area" for="file-input">
+                    <!-- State 1: Uploader prompt -->
+                    <div id="upload-content">
                         <div id="upload-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg></div>
                         <p>فایل تصویر را اینجا بکشید یا برای انتخاب کلیک کنید</p>
-                    </label>
-                    <!-- --- CHANGE 1: HTML for the new preview is simplified --- -->
-                    <div id="file-preview">
-                        <img id="preview-image" src="" alt="Preview">
-                        <button type="button" id="remove-preview-btn" title="حذف تصویر">&times;</button>
                     </div>
-                </div>
+                    <!-- State 2: Image Preview -->
+                    <img id="preview-image-main" src="" alt="Preview">
+                    <button type="button" id="remove-file-btn-main" title="حذف تصویر">&times;</button>
+                </label>
                 <input type="file" id="file-input" accept="image/*" hidden>
             </div>
 
@@ -287,24 +297,23 @@
         <div id="lightbox-content">
              <img id="lightbox-img" src="">
              <button id="lightbox-close" class="lightbox-btn">&times;</button>
-             <!-- --- CHANGE 2: Spinner is added back for download feedback --- -->
-             <a id="lightbox-download" title="دانلود تصویر" class="lightbox-btn">
+             <!-- --- CHANGE 2: Download button is now a button, not a link, and will be handled by JS --- -->
+             <button id="lightbox-download" title="دانلود تصویر" class="lightbox-btn">
                  <svg fill="white" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
                  <div class="spinner"></div>
-             </a>
+             </button>
         </div>
     </div>
     
     <script>
         const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
         
-        const uploadContainer = document.getElementById('upload-container');
+        // --- CHANGE 1: Updated element selectors for the new uploader ---
         const uploadArea = document.getElementById('upload-area');
         const fileInput = document.getElementById('file-input');
-        const filePreview = document.getElementById('file-preview');
-        const previewImage = document.getElementById('preview-image');
-        // --- CHANGE 1: Old variables removed, new one added ---
-        const removePreviewBtn = document.getElementById('remove-preview-btn');
+        const previewImage = document.getElementById('preview-image-main');
+        const removeFileBtn = document.getElementById('remove-file-btn-main');
+        
         const promptInput = document.getElementById('prompt-input');
         const submitBtn = document.getElementById('submit-btn');
         const btnText = document.getElementById('btn-text');
@@ -320,16 +329,17 @@
         const clearHistoryBtn = document.getElementById('clear-history-btn');
 
         let uploadedFile = null;
-        // --- CHANGE 2: Variable to store the current image URL for download ---
-        let currentLightboxUrl = null;
+        let currentLightboxUrl = null; // --- CHANGE 2: Variable to store the current image URL for download
 
-        // --- Uploader Logic ---
+        // --- Uploader Logic (Reworked for new structure) ---
         const resetUploader = () => {
             uploadedFile = null;
             fileInput.value = '';
-            uploadContainer.classList.remove('has-file');
+            previewImage.src = '';
+            uploadArea.classList.remove('has-file');
             checkFormState();
         };
+
         const handleFile = (file) => {
             if (!file || !file.type.startsWith('image/')) { displayError('لطفا یک فایل تصویری معتبر انتخاب کنید.'); return; }
             uploadedFile = file;
@@ -338,18 +348,23 @@
             reader.onload = (e) => { previewImage.src = e.target.result; };
             reader.readAsDataURL(file);
 
-            uploadContainer.classList.add('has-file');
+            uploadArea.classList.add('has-file');
             checkFormState();
             clearResult();
         };
-        uploadArea.addEventListener('click', () => fileInput.click());
+
+        // Event listener for the new remove button
+        removeFileBtn.addEventListener('click', (e) => {
+            e.preventDefault(); // Prevent label from triggering file input
+            e.stopPropagation();
+            resetUploader();
+        });
+        
         fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
         ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => uploadArea.addEventListener(e, p => { p.preventDefault(); p.stopPropagation(); }));
-        ['dragenter', 'dragover'].forEach(e => uploadArea.addEventListener(e, () => uploadArea.classList.add('drag-over')));
+        ['dragenter', 'dragover'].forEach(e => uploadArea.addEventListener(e, () => { if (!uploadArea.classList.contains('has-file')) uploadArea.classList.add('drag-over'); }));
         ['dragleave', 'drop'].forEach(e => uploadArea.addEventListener(e, () => uploadArea.classList.remove('drag-over')));
-        uploadArea.addEventListener('drop', e => handleFile(e.dataTransfer.files[0]));
-        // --- CHANGE 1: Event listener is now on the new 'X' button ---
-        removePreviewBtn.addEventListener('click', resetUploader);
+        uploadArea.addEventListener('drop', e => { if (!uploadArea.classList.contains('has-file')) handleFile(e.dataTransfer.files[0]); });
 
         // --- Form & Submission ---
         promptInput.addEventListener('input', checkFormState);
@@ -412,57 +427,59 @@
             errorMessage.style.display = 'block';
         }
 
-        // --- CHANGE 2: Robust download and lightbox logic ---
+        // --- CHANGE 2: Re-implemented robust download and lightbox logic ---
         function openLightbox(url) {
-            currentLightboxUrl = url;
+            currentLightboxUrl = url; // Store the URL
             lightboxImg.src = url;
             lightbox.classList.add('visible');
         }
         function closeLightbox() {
             lightbox.classList.remove('visible');
-            currentLightboxUrl = null;
+            currentLightboxUrl = null; // Clear the URL
         }
         async function handleDownload() {
             if (!currentLightboxUrl) return;
-            const downloadBtn = lightboxDownload;
-            const spinner = downloadBtn.querySelector('.spinner');
-            const icon = downloadBtn.querySelector('svg');
+
+            const spinner = lightboxDownload.querySelector('.spinner');
+            const icon = lightboxDownload.querySelector('svg');
             
             spinner.style.display = 'block';
             icon.style.display = 'none';
+            lightboxDownload.disabled = true;
+
             try {
                 // Fetch the image data
                 const response = await fetch(currentLightboxUrl);
-                // Convert it to a blob (a file-like object)
+                if (!response.ok) throw new Error('Network response was not ok.');
+
+                // Convert it to a blob
                 const blob = await response.blob();
-                // Create a temporary local URL for the blob
-                const objectUrl = URL.createObjectURL(blob);
                 
-                // Create a temporary link element to trigger the download
+                // Create a temporary link to trigger the download
+                const objectUrl = URL.createObjectURL(blob);
                 const a = document.createElement('a');
                 a.href = objectUrl;
-                a.download = `edited-image-${Date.now()}.png`; // Set a default filename
+                a.download = `ai-edited-image-${Date.now()}.png`; // Set a filename
                 document.body.appendChild(a);
-                a.click(); // Programmatically click the link
-                document.body.removeChild(a); // Clean up by removing the link
+                a.click();
                 
-                // Release the memory used by the object URL
+                // Clean up
+                document.body.removeChild(a);
                 URL.revokeObjectURL(objectUrl);
             } catch (e) {
                 console.error('Download failed:', e);
                 alert('خطا در دانلود تصویر. لطفا دوباره تلاش کنید.');
             } finally {
-                // Restore the button to its normal state
                 spinner.style.display = 'none';
                 icon.style.display = 'block';
+                lightboxDownload.disabled = false;
             }
         }
         lightboxClose.addEventListener('click', closeLightbox);
         lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
         lightboxDownload.addEventListener('click', handleDownload);
-
-
-        // --- History Management (No changes here) ---
+        
+        // --- History Management (No changes needed here) ---
         const getHistory = () => JSON.parse(localStorage.getItem('aiPhotoshopHistory') || '[]');
         const saveHistory = (history) => {
             localStorage.setItem('aiPhotoshopHistory', JSON.stringify(history));
@@ -474,11 +491,7 @@
             if (history.length > 15) history.pop();
             saveHistory(history);
         };
-        const handleClearHistory = () => {
-            if (confirm('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟')) {
-                saveHistory([]);
-            }
-        };
+        const handleClearHistory = () => { if (confirm('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟')) { saveHistory([]); } };
         const handleDeleteItem = (index) => {
             let history = getHistory();
             history.splice(index, 1);
@@ -488,37 +501,20 @@
             const history = getHistory();
             historyGrid.innerHTML = '';
             clearHistoryBtn.style.display = history.length > 0 ? 'flex' : 'none';
-
             history.forEach((item, index) => {
                 const card = document.createElement('div');
                 card.className = 'history-item';
-                const imagesHTML = item.urls.map(url => 
-                    `<img src="${url}" alt="تصویر از تاریخچه" onclick="openLightbox('${url}')">`
-                ).join('');
-                
-                card.innerHTML = `
-                    <button class="history-delete-btn" data-index="${index}" title="حذف این مورد">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
-                    </button>
-                    <p class="history-item-prompt">${item.prompt}</p>
-                    <div class="history-item-grid">${imagesHTML}</div>
-                `;
+                const imagesHTML = item.urls.map(url => `<img src="${url}" alt="تصویر از تاریخچه" onclick="openLightbox('${url}')">`).join('');
+                card.innerHTML = `<button class="history-delete-btn" data-index="${index}" title="حذف این مورد"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button><p class="history-item-prompt">${item.prompt}</p><div class="history-item-grid">${imagesHTML}</div>`;
                 historyGrid.appendChild(card);
             });
         }
         clearHistoryBtn.addEventListener('click', handleClearHistory);
         historyGrid.addEventListener('click', (e) => {
             const deleteBtn = e.target.closest('.history-delete-btn');
-            if (deleteBtn) {
-                const indexToDelete = parseInt(deleteBtn.dataset.index, 10);
-                handleDeleteItem(indexToDelete);
-            }
-        });
-        
-        document.addEventListener('DOMContentLoaded', () => {
-            renderHistory();
-            checkFormState();
+            if (deleteBtn) { handleDeleteItem(parseInt(deleteBtn.dataset.index, 10)); }
         });
+        document.addEventListener('DOMContentLoaded', () => { renderHistory(); checkFormState(); });
     </script>
 </body>
 </html>