Update index.html

index.html

@@ -142,7 +142,6 @@
         #loading-placeholder { display: none; }
         #result-container.loading #loading-placeholder { display: flex; animation: fadeIn 0.5s; justify-content: center; align-items: center; width: 100%; }
         
-        /* --- START: NEW LOADING ANIMATION STYLES --- */
         .generator-container {
             position: relative;
             width: 400px;
@@ -257,7 +256,6 @@
             0% { width: 0%; }
             100% { width: 100%; }
         }
-        /* --- END: NEW LOADING ANIMATION STYLES --- */
         
         #result-grid { display: none; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; width: 100%; }
         #result-container.has-content #result-grid { display: grid; }
@@ -281,11 +279,29 @@
         .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; pointer-events: none; }
-        #lightbox.visible { opacity: 1; pointer-events: auto; }
+        /* --- FIX: Corrected Lightbox CSS --- */
+        #lightbox { 
+            position: fixed; 
+            inset: 0; 
+            background-color: rgba(18, 24, 38, 0.6); 
+            backdrop-filter: blur(10px) saturate(150%); 
+            display: flex; /* Changed from none to flex */
+            align-items: center; 
+            justify-content: center; 
+            z-index: 1000; 
+            opacity: 0; 
+            transition: opacity 0.3s; 
+            pointer-events: none; 
+        }
+        #lightbox.visible { 
+            opacity: 1; 
+            pointer-events: auto; 
+        }
+        /* --- END OF FIX --- */
+
         #lightbox-content { position: relative; animation: fadeIn 0.3s ease; display: flex; align-items: center; justify-content: center; }
         #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 { 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; font-size: 24px; }
         .lightbox-btn:hover { background-color: rgba(255, 255, 255, 0.2); transform: scale(1.1); }
         #lightbox-close { top: -50px; right: 0; }
         #lightbox-download { top: -50px; left: 0; }
@@ -368,7 +384,6 @@
                      ۳. نتیجه را ببینید
                 </div>
                 <div id="result-container">
-                    <!-- START: MODIFIED LOADING PLACEHOLDER -->
                     <div id="loading-placeholder">
                         <div class="generator-container">
                             <div class="noise-layer"></div>
@@ -380,7 +395,6 @@
                             <div class="progress-bar"></div>
                         </div>
                     </div>
-                    <!-- END: MODIFIED LOADING PLACEHOLDER -->
                     <div id="result-grid"></div>
                 </div>
             </div>
@@ -402,7 +416,7 @@
     <div id="lightbox">
         <div id="lightbox-content">
              <img id="lightbox-img" src="">
-             <button id="lightbox-close" class="lightbox-btn">&times;</button>
+             <button id="lightbox-close" class="lightbox-btn" title="بستن">&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>
                  <div class="spinner"></div>
@@ -429,7 +443,7 @@
     </div>
 
     <script>
-        // --- START OF APPLICATION LOGIC SCRIPT (Unchanged) ---
+        // --- START OF APPLICATION LOGIC SCRIPT (No changes needed here) ---
         const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
         const uploadArea = document.getElementById('upload-area'); const fileInput = document.getElementById('file-input'); 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 resultContainer = document.getElementById('result-container'); const resultGrid = document.getElementById('result-grid'); const errorMessage = document.getElementById('error-message'); const lightbox = document.getElementById('lightbox'); const lightboxImg = document.getElementById('lightbox-img'); const lightboxClose = document.getElementById('lightbox-close'); const lightboxDownload = document.getElementById('lightbox-download'); const lightboxNext = document.getElementById('lightbox-next'); const historyGrid = document.getElementById('history-grid'); const clearHistoryBtn = document.getElementById('clear-history-btn'); const confirmationModal = document.getElementById('confirmation-modal'); const modalMessageText = document.getElementById('modal-message-text'); const modalConfirmBtn = document.getElementById('modal-confirm-btn'); const modalCancelBtn = document.getElementById('modal-cancel-btn');
         let uploadedFile = null; let currentLightboxUrl = null; let currentLightboxGroup = []; let currentLightboxIndex = 0;