Update index.html

index.html

@@ -75,7 +75,9 @@
 
         .form-group { margin-bottom: 2.5rem; }
         .form-group:last-child { margin-bottom: 0; }
-        label.form-label {
+
+        /* --- CHANGE 1: Made the selector more generic to apply to any tag, not just label --- */
+        .form-label {
             display: flex;
             align-items: center;
             gap: 0.75rem;
@@ -84,7 +86,7 @@
             font-size: 1.2em;
             margin-bottom: 1.2rem;
         }
-        label.form-label svg { width: 24px; height: 24px; color: var(--accent-primary); }
+        .form-label svg { width: 24px; height: 24px; color: var(--accent-primary); }
 
         /* --- Uploader Style with Image Preview --- */
         #upload-container.has-file #upload-area { display: none; }
@@ -189,7 +191,7 @@
         #lightbox-close { top: -50px; right: 0; font-size: 1.8rem; }
         #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 2: Spinner CSS removed as it's no longer needed --- */
 
         @media (max-width: 768px) {
             main, .gallery-section { padding: 1.5rem; }
@@ -206,18 +208,19 @@
         </header>
 
         <main>
+            <!-- --- CHANGE 1: Simplified the structure to exactly match the screenshot's concept --- -->
             <div class="form-group">
-                <label for="upload-area" class="form-label">
-                    <svg xmlns="http://www.w.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 class="form-label">
+                    <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>
                     ۱. تصویر خود را انتخاب کنید
-                </label>
+                </div>
                 <div id="upload-container">
-                    <label id="upload-area">
+                    <label id="upload-area" for="file-input">
                         <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>
                     <div id="file-preview">
-                        <img id="preview-image" src="" alt="Preview"> <!-- NEW: Image preview element -->
+                        <img id="preview-image" src="" alt="Preview">
                         <div id="file-details">
                             <span id="file-name"></span>
                             <button type="button" id="remove-file-btn">حذف و انتخاب مجدد</button>
@@ -241,10 +244,10 @@
             </div>
             
             <div class="form-group">
-                 <label class="form-label">
+                 <div class="form-label">
                     <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="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/><path d="M21 14l-1.5 3-3-1.5 3-3 1.5 3z"/><path d="M19.5 2.5l-3 1.5 1.5 3 3-1.5-1.5-3z"/></svg>
                      ۳. نتیجه را ببینید
-                </label>
+                </div>
                 <div id="result-container">
                     <div id="loading-placeholder">
                         <div class="orbital-loader"><div class="orbit"><div class="satellite"></div></div><div class="orbit"><div class="satellite"></div></div></div>
@@ -257,10 +260,10 @@
         
         <section class="gallery-section">
             <div class="gallery-header">
-                 <label class="form-label">
+                 <div class="form-label">
                     <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"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
                     گالری و تاریخچه شما
-                </label>
+                </div>
                 <button id="clear-history-btn">
                     <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="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>
                     <span>پاک کردن همه</span>
@@ -274,9 +277,9 @@
         <div id="lightbox-content">
              <img id="lightbox-img" src="">
              <button id="lightbox-close" class="lightbox-btn">&times;</button>
-             <a id="lightbox-download" title="دانلود تصویر" class="lightbox-btn">
+             <!-- --- CHANGE 2: Added 'download' attribute and removed spinner div. It's now a simple download link. --- -->
+             <a id="lightbox-download" title="دانلود تصویر" class="lightbox-btn" download>
                  <svg fill="white" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
-                 <div class="spinner"></div>
              </a>
         </div>
     </div>
@@ -306,7 +309,6 @@
         const clearHistoryBtn = document.getElementById('clear-history-btn');
 
         let uploadedFile = null;
-        let currentLightboxUrl = null;
 
         // --- Uploader Logic ---
         const resetUploader = () => {
@@ -328,7 +330,11 @@
             checkFormState();
             clearResult();
         };
+        
+        // This line was slightly modified to not need a specific ID on the clickable area
+        // since the <label> now has a 'for' attribute pointing to the input.
         uploadArea.addEventListener('click', () => fileInput.click());
+
         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')));
@@ -397,47 +403,20 @@
             errorMessage.style.display = 'block';
         }
 
-        // --- Lightbox Functions & Download Fix ---
+        // --- CHANGE 2: Simplified Lightbox and Download logic ---
         function openLightbox(url) {
-            currentLightboxUrl = url;
             lightboxImg.src = url;
+            lightboxDownload.href = url; // Set the href for the download link
             lightbox.classList.add('visible');
         }
         function closeLightbox() {
             lightbox.classList.remove('visible');
-            currentLightboxUrl = null;
-        }
-        async function handleDownload() {
-            if (!currentLightboxUrl) return;
-            const downloadBtn = lightboxDownload;
-            const spinner = downloadBtn.querySelector('.spinner');
-            const icon = downloadBtn.querySelector('svg');
-            
-            spinner.style.display = 'block';
-            icon.style.display = 'none';
-            try {
-                const response = await fetch(currentLightboxUrl);
-                const blob = await response.blob();
-                const objectUrl = URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = objectUrl;
-                a.download = `edited-image-${Date.now()}.png`;
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                URL.revokeObjectURL(objectUrl);
-            } catch (e) {
-                console.error('Download failed:', e);
-                alert('خطا در دانلود تصویر. لطفا دوباره تلاش کنید.');
-            } finally {
-                spinner.style.display = 'none';
-                icon.style.display = 'block';
-            }
+            lightboxDownload.href = '#'; // Clear href on close
         }
+
         lightboxClose.addEventListener('click', closeLightbox);
         lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
-        lightboxDownload.addEventListener('click', handleDownload);
-
+        // The complex handleDownload function and its event listener are no longer needed.
 
         // --- History Management with Individual Delete ---
         const getHistory = () => JSON.parse(localStorage.getItem('aiPhotoshopHistory') || '[]');