Update index.html

index.html

@@ -115,52 +115,14 @@
             cursor: default;
         }
 
-        #upload-content {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 1rem;
-        }
+        #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;
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-        #remove-file-btn-main {
-            display: none;
-            position: absolute;
-            top: 12px;
-            right: 12px;
-            background-color: rgba(26, 32, 44, 0.6);
-            color: white;
-            border: none;
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            cursor: pointer;
-            font-size: 1.2rem;
-            line-height: 1;
-            z-index: 10;
-            transition: var(--transition-smooth);
-            padding: 0;
-        }
-        #remove-file-btn-main:hover {
-            background-color: var(--danger-color);
-            transform: scale(1.1);
-        }
-
+        #preview-image-main { display: none; width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0; left: 0; }
+        #remove-file-btn-main { display: none; position: absolute; top: 12px; right: 12px; background-color: rgba(26, 32, 44, 0.6); color: white; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; line-height: 1; z-index: 10; transition: var(--transition-smooth); padding: 0; }
+        #remove-file-btn-main:hover { background-color: var(--danger-color); transform: scale(1.1); }
         #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;
-        }
+        #upload-area.has-file #preview-image-main, #upload-area.has-file #remove-file-btn-main { display: block; }
         
         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); }
@@ -192,36 +154,21 @@
         #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; }
-        
-        /* --- CHANGE: The grid of history CARDS is now two-column on ALL screen sizes --- */
-        #history-grid { 
-            display: grid; 
-            grid-template-columns: repeat(2, 1fr);
-            gap: 1.5rem; 
-            margin-top: 1.5rem; 
-        }
-
+        #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); 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(2, 1fr); 
-            gap: 0.75rem; 
-        }
-        
+        .history-item-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
         .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 { position: absolute; top: 1rem; right: 1rem; /* CHANGED: Moved to top-right for better alignment without text */ 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); z-index: 5; }
         .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; }
+        #lightbox-content { position: relative; animation: fadeIn 0.3s ease; display: flex; align-items: center; justify-content: center; } /* Flex for alignment */
         #lightbox-img { max-width: 85vw; max-height: 80vh; object-fit: contain; border-radius: var(--radius-card); box-shadow: var(--shadow-xl); }
         .lightbox-btn { position: absolute; background-color: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255,255,255,0.2); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s; text-decoration: none; }
         .lightbox-btn:hover { background-color: rgba(255, 255, 255, 0.2); transform: scale(1.1); }
@@ -229,11 +176,27 @@
         #lightbox-download { top: -50px; left: 0; }
         #lightbox-download svg { width: 22px; height: 22px; }
         #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; }
+        
+        /* --- CHANGE 1: Styles for new lightbox navigation buttons --- */
+        .lightbox-nav {
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 1.5rem;
+            width: 50px;
+            height: 50px;
+            font-family: monospace;
+            z-index: 1001;
+        }
+        #lightbox-prev { left: 1rem; }
+        #lightbox-next { right: 1rem; }
+        .lightbox-nav:disabled { opacity: 0.3; cursor: not-allowed; transform: translateY(-50%) scale(1); }
+        .lightbox-nav:disabled:hover { background-color: rgba(255, 255, 255, 0.1); }
+
 
         @media (max-width: 768px) {
             main, .gallery-section { padding: 1.5rem; }
             h1 { font-size: 2.2rem; }
-            /* The responsive rule for #history-grid has been REMOVED so it stays 2-column on mobile */
+            #history-grid { grid-template-columns: 1fr; }
         }
     </style>
 </head>
@@ -306,7 +269,11 @@
 
     <div id="lightbox">
         <div id="lightbox-content">
+             <!-- --- CHANGE 1: Added navigation buttons --- -->
+             <button id="lightbox-prev" class="lightbox-btn lightbox-nav" title="قبلی">&#10094;</button>
              <img id="lightbox-img" src="">
+             <button id="lightbox-next" class="lightbox-btn lightbox-nav" title="بعدی">&#10095;</button>
+
              <button id="lightbox-close" class="lightbox-btn">&times;</button>
              <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>
@@ -316,7 +283,6 @@
     </div>
     
     <script>
-        // جاوا اسکریپت بدون تغییر باقی می‌ماند
         const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
         
         const uploadArea = document.getElementById('upload-area');
@@ -338,8 +304,12 @@
         const historyGrid = document.getElementById('history-grid');
         const clearHistoryBtn = document.getElementById('clear-history-btn');
 
+        // --- CHANGE 1: New elements and variables for lightbox navigation ---
+        const lightboxPrevBtn = document.getElementById('lightbox-prev');
+        const lightboxNextBtn = document.getElementById('lightbox-next');
+        let currentLightboxGallery = [];
+        let currentLightboxIndex = 0;
         let uploadedFile = null;
-        let currentLightboxUrl = null;
 
         const resetUploader = () => {
             uploadedFile = null;
@@ -419,7 +389,8 @@
                 const img = document.createElement('img');
                 img.src = url;
                 img.alt = 'تصویر ویرایش شده';
-                img.addEventListener('click', () => openLightbox(url));
+                // --- CHANGE 1: Pass the whole gallery to the openLightbox function ---
+                img.addEventListener('click', () => openLightbox(url, imageUrls));
                 resultGrid.appendChild(img);
             });
             resultContainer.classList.add('has-content');
@@ -434,17 +405,47 @@
             errorMessage.style.display = 'block';
         }
 
-        function openLightbox(url) {
-            currentLightboxUrl = url;
-            lightboxImg.src = url;
+        // --- CHANGE 1: Updated lightbox functions to handle navigation ---
+        function updateLightboxNavButtons() {
+            lightboxPrevBtn.disabled = currentLightboxIndex === 0;
+            lightboxNextBtn.disabled = currentLightboxIndex === currentLightboxGallery.length - 1;
+        }
+
+        function showImageAtIndex(index) {
+            currentLightboxIndex = index;
+            const newUrl = currentLightboxGallery[currentLightboxIndex];
+            lightboxImg.src = newUrl;
+            lightboxDownload.dataset.url = newUrl; // Keep track for download
+            updateLightboxNavButtons();
+        }
+
+        function openLightbox(clickedUrl, galleryUrls) {
+            currentLightboxGallery = galleryUrls;
+            const clickedIndex = galleryUrls.findIndex(url => url === clickedUrl);
             lightbox.classList.add('visible');
+            showImageAtIndex(clickedIndex !== -1 ? clickedIndex : 0);
         }
+        
         function closeLightbox() {
             lightbox.classList.remove('visible');
-            currentLightboxUrl = null;
+            currentLightboxGallery = [];
         }
+
+        lightboxPrevBtn.addEventListener('click', () => {
+            if (currentLightboxIndex > 0) {
+                showImageAtIndex(currentLightboxIndex - 1);
+            }
+        });
+
+        lightboxNextBtn.addEventListener('click', () => {
+            if (currentLightboxIndex < currentLightboxGallery.length - 1) {
+                showImageAtIndex(currentLightboxIndex + 1);
+            }
+        });
+
         async function handleDownload() {
-            if (!currentLightboxUrl) return;
+            const urlToDownload = lightboxDownload.dataset.url;
+            if (!urlToDownload) return;
 
             const spinner = lightboxDownload.querySelector('.spinner');
             const icon = lightboxDownload.querySelector('svg');
@@ -454,7 +455,7 @@
             lightboxDownload.disabled = true;
 
             try {
-                const response = await fetch(currentLightboxUrl);
+                const response = await fetch(urlToDownload);
                 if (!response.ok) throw new Error('Network response was not ok.');
                 const blob = await response.blob();
                 const objectUrl = URL.createObjectURL(blob);
@@ -475,7 +476,7 @@
             }
         }
         lightboxClose.addEventListener('click', closeLightbox);
-        lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
+        lightbox.addEventListener('click', (e) => { if (e.target === lightbox || e.target === lightboxImg) closeLightbox(); });
         lightboxDownload.addEventListener('click', handleDownload);
         
         const getHistory = () => JSON.parse(localStorage.getItem('aiPhotoshopHistory') || '[]');
@@ -502,15 +503,33 @@
             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="تصویر از تاریخچه">`).join('');
+                
+                // --- CHANGE 2: Removed prompt paragraph from the card ---
+                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>
+                    <div class="history-item-grid">${imagesHTML}</div>`;
                 historyGrid.appendChild(card);
             });
         }
         clearHistoryBtn.addEventListener('click', handleClearHistory);
+        // --- CHANGE 1: Combined event listener for history grid ---
         historyGrid.addEventListener('click', (e) => {
             const deleteBtn = e.target.closest('.history-delete-btn');
-            if (deleteBtn) { handleDeleteItem(parseInt(deleteBtn.dataset.index, 10)); }
+            if (deleteBtn) {
+                handleDeleteItem(parseInt(deleteBtn.dataset.index, 10));
+                return;
+            }
+
+            if (e.target.tagName === 'IMG') {
+                const clickedUrl = e.target.src;
+                const grid = e.target.closest('.history-item-grid');
+                const allImages = Array.from(grid.querySelectorAll('img'));
+                const galleryUrls = allImages.map(img => img.src);
+                openLightbox(clickedUrl, galleryUrls);
+            }
         });
         document.addEventListener('DOMContentLoaded', () => { renderHistory(); checkFormState(); });
     </script>