Update index.html

index.html

@@ -87,7 +87,6 @@
         }
         .form-label svg { width: 24px; height: 24px; color: var(--accent-primary); }
 
-        /* --- CHANGE 1: Uploader styles completely reworked for single-panel preview --- */
         #upload-area {
             position: relative;
             border: 2px dashed var(--input-border);
@@ -102,7 +101,7 @@
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            overflow: hidden; /* To keep rounded corners on the image */
+            overflow: hidden;
         }
         #upload-area.drag-over, #upload-area:hover:not(.has-file) {
             border-color: var(--accent-primary);
@@ -126,16 +125,16 @@
         #upload-area p { margin: 0; color: var(--text-secondary); font-weight: 500; }
 
         #preview-image-main {
-            display: none; /* Hidden by default */
+            display: none;
             width: 100%;
             height: 100%;
-            object-fit: contain; /* Shows the full image as requested */
+            object-fit: contain;
             position: absolute;
             top: 0;
             left: 0;
         }
         #remove-file-btn-main {
-            display: none; /* Hidden by default */
+            display: none;
             position: absolute;
             top: 12px;
             right: 12px;
@@ -157,13 +156,11 @@
             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); }
@@ -189,21 +186,33 @@
         #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; }
+        
+        /* --- History Gallery Styles --- */
         .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); }
         #clear-history-btn svg { width: 18px; height: 18px; }
-        #history-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
+        
+        /* --- CHANGE: Changed to a two-column layout --- */
+        #history-grid { 
+            display: grid; 
+            grid-template-columns: repeat(2, 1fr); 
+            gap: 1.5rem; 
+            margin-top: 1.5rem; 
+        }
+
         #history-grid:empty::before { content: 'هنوز تصویری خلق نکرده‌اید. اولین ویرایش شما اینجا ذخیره خواهد شد.'; color: var(--text-secondary); grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; background-color: var(--input-bg); border-radius: var(--radius-card); }
-        .history-item { position: relative; background-color: var(--input-bg); border-radius: var(--radius-card); border: 1px solid var(--panel-border); padding: 1.5rem; transition: var(--transition-smooth); }
+        .history-item { position: relative; background-color: var(--input-bg); border-radius: var(--radius-card); border: 1px solid var(--panel-border); padding: 1.5rem; transition: var(--transition-smooth); display: flex; flex-direction: column; }
         .history-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
         .history-item-prompt { font-weight: 600; margin: 0 0 1rem 0; word-break: break-word; padding-left: 30px; }
-        .history-item-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
+        .history-item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 0.75rem; margin-top: auto; }
         .history-item-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-input); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid var(--panel-border); }
         .history-item-grid img:hover { transform: scale(1.1); box-shadow: var(--shadow-md); z-index: 5; position: relative; }
         .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 Styles --- */
         #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; }
@@ -213,13 +222,15 @@
         #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: 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) {
             main, .gallery-section { padding: 1.5rem; }
             h1 { font-size: 2.2rem; }
-            .history-item-grid { grid-template-columns: repeat(2, 1fr); }
+            /* --- CHANGE: Revert history grid to single column on mobile --- */
+            #history-grid {
+                grid-template-columns: 1fr;
+            }
         }
     </style>
 </head>
@@ -236,14 +247,11 @@
                     <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>
-                <!-- --- 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>
                     </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>
@@ -297,7 +305,6 @@
         <div id="lightbox-content">
              <img id="lightbox-img" src="">
              <button id="lightbox-close" class="lightbox-btn">&times;</button>
-             <!-- --- 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>
@@ -308,7 +315,6 @@
     <script>
         const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
         
-        // --- CHANGE 1: Updated element selectors for the new uploader ---
         const uploadArea = document.getElementById('upload-area');
         const fileInput = document.getElementById('file-input');
         const previewImage = document.getElementById('preview-image-main');
@@ -329,9 +335,8 @@
         const clearHistoryBtn = document.getElementById('clear-history-btn');
 
         let uploadedFile = null;
-        let currentLightboxUrl = null; // --- CHANGE 2: Variable to store the current image URL for download
+        let currentLightboxUrl = null;
 
-        // --- Uploader Logic (Reworked for new structure) ---
         const resetUploader = () => {
             uploadedFile = null;
             fileInput.value = '';
@@ -353,9 +358,8 @@
             clearResult();
         };
 
-        // Event listener for the new remove button
         removeFileBtn.addEventListener('click', (e) => {
-            e.preventDefault(); // Prevent label from triggering file input
+            e.preventDefault();
             e.stopPropagation();
             resetUploader();
         });
@@ -366,7 +370,6 @@
         ['dragleave', 'drop'].forEach(e => uploadArea.addEventListener(e, () => uploadArea.classList.remove('drag-over')));
         uploadArea.addEventListener('drop', e => { if (!uploadArea.classList.contains('has-file')) handleFile(e.dataTransfer.files[0]); });
 
-        // --- Form & Submission ---
         promptInput.addEventListener('input', checkFormState);
         function checkFormState() { submitBtn.disabled = !uploadedFile || promptInput.value.trim() === ''; }
         submitBtn.addEventListener('click', async () => {
@@ -427,15 +430,14 @@
             errorMessage.style.display = 'block';
         }
 
-        // --- CHANGE 2: Re-implemented robust download and lightbox logic ---
         function openLightbox(url) {
-            currentLightboxUrl = url; // Store the URL
+            currentLightboxUrl = url;
             lightboxImg.src = url;
             lightbox.classList.add('visible');
         }
         function closeLightbox() {
             lightbox.classList.remove('visible');
-            currentLightboxUrl = null; // Clear the URL
+            currentLightboxUrl = null;
         }
         async function handleDownload() {
             if (!currentLightboxUrl) return;
@@ -448,22 +450,15 @@
             lightboxDownload.disabled = true;
 
             try {
-                // Fetch the image data
                 const response = await fetch(currentLightboxUrl);
                 if (!response.ok) throw new Error('Network response was not ok.');
-
-                // Convert it to a blob
                 const blob = await response.blob();
-                
-                // Create a temporary link to trigger the download
                 const objectUrl = URL.createObjectURL(blob);
                 const a = document.createElement('a');
                 a.href = objectUrl;
-                a.download = `ai-edited-image-${Date.now()}.png`; // Set a filename
+                a.download = `ai-edited-image-${Date.now()}.png`;
                 document.body.appendChild(a);
                 a.click();
-                
-                // Clean up
                 document.body.removeChild(a);
                 URL.revokeObjectURL(objectUrl);
             } catch (e) {
@@ -479,7 +474,6 @@
         lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
         lightboxDownload.addEventListener('click', handleDownload);
         
-        // --- History Management (No changes needed here) ---
         const getHistory = () => JSON.parse(localStorage.getItem('aiPhotoshopHistory') || '[]');
         const saveHistory = (history) => {
             localStorage.setItem('aiPhotoshopHistory', JSON.stringify(history));