Update index.html

index.html

@@ -142,22 +142,122 @@
         #loading-placeholder { display: none; }
         #result-container.loading #loading-placeholder { display: flex; animation: fadeIn 0.5s; justify-content: center; align-items: center; width: 100%; }
         
-        .generator-container { position: relative; width: 400px; max-width: 100%; height: 300px; border: 2px solid #38bdf8; border-radius: 20px; overflow: hidden; box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); animation: pulse 5s infinite cubic-bezier(0.4, 0, 0.6, 1); background-color: #161b22; color: #f0f6fc; }
-        @keyframes pulse { 0% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); } 50% { box-shadow: 0 0 60px rgba(56, 189, 248, 0.7); } 100% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); } }
-        .noise-layer, .sketch-layer, .building-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="none"/><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.6"/></svg>') repeat; }
-        .noise-layer { opacity: 1; animation: fade-noise 7s infinite ease-in-out; }
-        @keyframes fade-noise { 0% { opacity: 1; filter: blur(5px); } 30% { opacity: 0.8; filter: blur(2px); } 100% { opacity: 0; filter: blur(0px); } }
-        .sketch-layer { filter: grayscale(1) contrast(1.5) blur(3px); opacity: 0; animation: reveal-sketch 7s infinite ease-in-out; }
-        @keyframes reveal-sketch { 0% { opacity: 0; filter: grayscale(1) contrast(1.5) blur(3px); } 20% { opacity: 1; filter: grayscale(1) contrast(1.2) blur(1px); } 60% { opacity: 0.5; filter: grayscale(0.5) contrast(1) blur(0px); } 100% { opacity: 0; } }
-        .building-layer { filter: blur(15px) saturate(0.5) brightness(0.7); opacity: 0; animation: denoise-color 7s infinite ease-in-out; }
-        @keyframes denoise-color { 0% { opacity: 0; filter: blur(15px) saturate(0.5) brightness(0.7); } 40% { opacity: 0.6; filter: blur(5px) saturate(1) brightness(1); } 100% { opacity: 1; filter: blur(0px) saturate(1.5) brightness(1.1); } }
-        .pixel-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px), repeating-linear-gradient(90deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px); opacity: 1; animation: dissolve-grid 7s infinite ease-in-out; }
-        @keyframes dissolve-grid { 0% { opacity: 1; } 70% { opacity: 0.5; } 100% { opacity: 0; } }
-        .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 50%), radial-gradient(circle at 30% 70%, rgba(187, 134, 252, 0.2) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(250, 204, 21, 0.2) 0%, transparent 50%); animation: flow-particles 7s infinite cubic-bezier(0.4, 0, 0.6, 1); }
-        @keyframes flow-particles { 0% { transform: translate(0, 0) scale(1); opacity: 0.5; } 50% { transform: translate(10px, -15px) scale(1.05); opacity: 0.8; } 100% { transform: translate(0, 0) scale(1); opacity: 0.5; } }
-        .text-overlay { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: 700; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8), 0 0 30px rgba(187, 134, 252, 0.5); animation: glow-text 7s infinite ease-in-out; }
-        @keyframes glow-text { 0% { opacity: 0.7; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8); } 50% { opacity: 1; text-shadow: 0 0 30px rgba(56, 189, 248, 1), 0 0 40px rgba(187, 134, 252, 0.7); } 100% { opacity: 0.7; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8); } }
-        .progress-bar { position: absolute; bottom: 0; left: 0; width: 0%; height: 6px; background: linear-gradient(to right, #38bdf8, #bb86fc, #facc15); animation: progress 7s infinite linear; }
+        /* --- START: NEW LOADING ANIMATION STYLES --- */
+        .generator-container {
+            position: relative;
+            width: 400px;
+            max-width: 100%;
+            height: 300px;
+            border: 2px solid #38bdf8;
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: 0 0 40px rgba(56, 189, 248, 0.3);
+            animation: pulse 5s infinite cubic-bezier(0.4, 0, 0.6, 1);
+            background-color: #161b22;
+            color: #f0f6fc;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); }
+            50% { box-shadow: 0 0 60px rgba(56, 189, 248, 0.7); }
+            100% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); }
+        }
+        .noise-layer, .sketch-layer, .building-layer {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .noise-layer {
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="none"/><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.6"/></svg>') repeat;
+            opacity: 1;
+            animation: fade-noise 7s infinite ease-in-out;
+        }
+        @keyframes fade-noise {
+            0% { opacity: 1; filter: blur(5px); }
+            30% { opacity: 0.8; filter: blur(2px); }
+            100% { opacity: 0; filter: blur(0px); }
+        }
+        .sketch-layer {
+            filter: grayscale(1) contrast(1.5) blur(3px);
+            opacity: 0;
+            animation: reveal-sketch 7s infinite ease-in-out;
+        }
+        @keyframes reveal-sketch {
+            0% { opacity: 0; filter: grayscale(1) contrast(1.5) blur(3px); }
+            20% { opacity: 1; filter: grayscale(1) contrast(1.2) blur(1px); }
+            60% { opacity: 0.5; filter: grayscale(0.5) contrast(1) blur(0px); }
+            100% { opacity: 0; }
+        }
+        .building-layer {
+            filter: blur(15px) saturate(0.5) brightness(0.7);
+            opacity: 0;
+            animation: denoise-color 7s infinite ease-in-out;
+        }
+        @keyframes denoise-color {
+            0% { opacity: 0; filter: blur(15px) saturate(0.5) brightness(0.7); }
+            40% { opacity: 0.6; filter: blur(5px) saturate(1) brightness(1); }
+            100% { opacity: 1; filter: blur(0px) saturate(1.5) brightness(1.1); }
+        }
+        .pixel-grid {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: repeating-linear-gradient(0deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px), repeating-linear-gradient(90deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px);
+            opacity: 1;
+            animation: dissolve-grid 7s infinite ease-in-out;
+        }
+        @keyframes dissolve-grid {
+            0% { opacity: 1; }
+            70% { opacity: 0.5; }
+            100% { opacity: 0; }
+        }
+        .particles {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 50%), radial-gradient(circle at 30% 70%, rgba(187, 134, 252, 0.2) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(250, 204, 21, 0.2) 0%, transparent 50%);
+            animation: flow-particles 7s infinite cubic-bezier(0.4, 0, 0.6, 1);
+        }
+        @keyframes flow-particles {
+            0% { transform: translate(0, 0) scale(1); opacity: 0.5; }
+            50% { transform: translate(10px, -15px) scale(1.05); opacity: 0.8; }
+            100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
+        }
+        .text-overlay {
+            position: absolute;
+            top: 45%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 24px;
+            font-weight: 700;
+            text-shadow: 0 0 20px rgba(56, 189, 248, 0.8), 0 0 30px rgba(187, 134, 252, 0.5);
+            animation: glow-text 7s infinite ease-in-out;
+            font-family: var(--app-font);
+        }
+        @keyframes glow-text {
+            0% { opacity: 0.7; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8); }
+            50% { opacity: 1; text-shadow: 0 0 30px rgba(56, 189, 248, 1), 0 0 40px rgba(187, 134, 252, 0.7); }
+            100% { opacity: 0.7; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8); }
+        }
+        .progress-bar {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 0%;
+            height: 6px;
+            background: linear-gradient(to right, #38bdf8, #bb86fc, #facc15);
+            animation: progress 7s infinite linear;
+        }
+        @keyframes progress {
+            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; }
@@ -234,7 +334,6 @@
         </header>
 
         <main>
-            <!-- ... Main content ... -->
              <div class="form-group">
                 <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>
@@ -269,13 +368,19 @@
                      ۳. نتیجه را ببینید
                 </div>
                 <div id="result-container">
+                    <!-- START: MODIFIED LOADING PLACEHOLDER -->
                     <div id="loading-placeholder">
                         <div class="generator-container">
-                            <div class="noise-layer"></div><div class="sketch-layer"></div><div class="building-layer"></div>
-                            <div class="pixel-grid"></div><div class="particles"></div>
-                            <div class="text-overlay">در حال ساخت تصویر...</div><div class="progress-bar"></div>
+                            <div class="noise-layer"></div>
+                            <div class="sketch-layer"></div>
+                            <div class="building-layer"></div>
+                            <div class="pixel-grid"></div>
+                            <div class="particles"></div>
+                            <div class="text-overlay">در حال ساخت تصویر...</div>
+                            <div class="progress-bar"></div>
                         </div>
                     </div>
+                    <!-- END: MODIFIED LOADING PLACEHOLDER -->
                     <div id="result-grid"></div>
                 </div>
             </div>
@@ -324,26 +429,20 @@
     </div>
 
     <script>
-        // --- START OF APPLICATION LOGIC SCRIPT ---
-
-        // ... (all selectors are the same) ...
+        // --- START OF APPLICATION LOGIC SCRIPT (Unchanged) ---
         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;
-
-        // --- NEW: Function to convert any image file to a PNG File object ---
         const convertToPNG = (file) => {
             return new Promise((resolve, reject) => {
                 const image = new Image();
                 const reader = new FileReader();
-
                 image.onload = () => {
                     const canvas = document.createElement('canvas');
                     canvas.width = image.width;
                     canvas.height = image.height;
                     const ctx = canvas.getContext('2d');
                     ctx.drawImage(image, 0, 0);
-
                     canvas.toBlob((blob) => {
                         if (!blob) {
                             reject(new Error('تبدیل به PNG ناموفق بود.'));
@@ -352,57 +451,43 @@
                         const originalName = file.name.substring(0, file.name.lastIndexOf('.')) || file.name;
                         const pngFile = new File([blob], `${originalName}.png`, { type: 'image/png' });
                         resolve(pngFile);
-                    }, 'image/png', 1.0); // 1.0 for max quality
+                    }, 'image/png', 1.0);
                 };
-                
                 image.onerror = () => reject(new Error('فایل تصویر قابل خواندن نیست.'));
                 reader.onload = e => { image.src = e.target.result; };
                 reader.onerror = () => reject(new Error('خطا در خواندن فایل.'));
-                
                 reader.readAsDataURL(file);
             });
         };
-
-        // --- MODIFIED: The handleFile function is now async to handle conversion ---
         const handleFile = async (file) => {
             if (!file || !file.type.startsWith('image/')) {
                 displayError('لطفا یک فایل تصویری معتبر انتخاب کنید.');
                 return;
             }
-            
             let fileToProcess = file;
-            // Optimize: If the file is not PNG or JPEG, convert it.
             if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
                 try {
-                    // console.log(`Converting ${file.type} to PNG...`);
                     fileToProcess = await convertToPNG(file);
                 } catch (error) {
                     console.error('Image conversion failed:', error);
                     displayError('خطا در تبدیل فرمت تصویر. لطفا فایل دیگری را امتحان کنید.');
-                    resetUploader(); // Clear the uploader on failure
+                    resetUploader();
                     return;
                 }
             }
-
             uploadedFile = fileToProcess;
-
-            // Use the original file for preview to avoid delay
             const reader = new FileReader();
             reader.onload = (e) => { previewImage.src = e.target.result; };
             reader.readAsDataURL(file);
-
             uploadArea.classList.add('has-file');
             checkFormState();
             clearResult();
         };
-
-        // ... (The rest of the JS functions are unchanged) ...
         const showConfirmationModal = (message, onConfirm) => { modalMessageText.textContent = message; confirmationModal.classList.add('visible'); modalConfirmBtn.onclick = () => { onConfirm(); hideConfirmationModal(); }; modalCancelBtn.onclick = () => { hideConfirmationModal(); }; }; const hideConfirmationModal = () => { confirmationModal.classList.remove('visible'); modalConfirmBtn.onclick = null; modalCancelBtn.onclick = null; }; const resetUploader = () => { uploadedFile = null; fileInput.value = ''; previewImage.src = ''; uploadArea.classList.remove('has-file'); checkFormState(); }; const checkFormState = () => { submitBtn.disabled = !uploadedFile || promptInput.value.trim() === ''; }; const setLoading = (isLoading) => { const btnSpinner = submitBtn.querySelector('.spinner'); const btnText = document.getElementById('btn-text'); const btnIcon = submitBtn.querySelector('svg'); if (isLoading) { resultContainer.classList.remove('has-content'); resultContainer.classList.add('loading'); btnSpinner.style.display = 'inline-block'; btnIcon.style.display = 'none'; btnText.textContent = 'در حال پردازش...'; submitBtn.disabled = true; resultGrid.innerHTML = ''; errorMessage.style.display = 'none'; } else { resultContainer.classList.remove('loading'); btnSpinner.style.display = 'none'; btnIcon.style.display = 'inline-block'; btnText.textContent = 'خلق کن'; checkFormState(); } }; const displayResult = (imageUrls) => { resultGrid.innerHTML = ''; imageUrls.forEach((url) => { const img = document.createElement('img'); img.src = url; img.alt = 'تصویر ویرایش شده'; img.addEventListener('click', () => openLightbox(url, imageUrls)); resultGrid.appendChild(img); }); resultContainer.classList.add('has-content'); }; const clearResult = () => { resultGrid.innerHTML = ''; errorMessage.style.display = 'none'; resultContainer.classList.remove('has-content'); }; const displayError = (message) => { errorMessage.textContent = message; errorMessage.style.display = 'block'; }; const updateLightboxImage = () => { const newUrl = currentLightboxGroup[currentLightboxIndex]; lightboxImg.src = newUrl; currentLightboxUrl = newUrl; }; const openLightbox = (clickedUrl, urlGroup) => { currentLightboxGroup = urlGroup; currentLightboxIndex = urlGroup.indexOf(clickedUrl); updateLightboxImage(); lightboxNext.style.display = urlGroup.length > 1 ? 'flex' : 'none'; lightbox.classList.add('visible'); }; const closeLightbox = () => { lightbox.classList.remove('visible'); currentLightboxGroup = []; }; const handleDownload = async () => { if (!currentLightboxUrl) return; const spinner = lightboxDownload.querySelector('.spinner'); const icon = lightboxDownload.querySelector('svg'); spinner.style.display = 'block'; icon.style.display = 'none'; lightboxDownload.disabled = true; try { const response = await fetch(currentLightboxUrl); if (!response.ok) throw new Error('Network response was not ok.'); const blob = await response.blob(); const objectUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = objectUrl; a.download = `ai-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.disabled = false; } }; const getHistory = () => JSON.parse(localStorage.getItem('aiPhotoshopHistory') || '[]'); const saveHistory = (history) => { localStorage.setItem('aiPhotoshopHistory', JSON.stringify(history)); renderHistory(); }; const addToHistory = (item) => { let history = getHistory(); history.unshift(item); if (history.length > 15) history.pop(); saveHistory(history); }; const handleClearHistory = () => { showConfirmationModal('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟ این عمل غیرقابل بازگشت است.', () => { saveHistory([]); }); }; const handleDeleteItem = (index) => { showConfirmationModal('آیا از حذف این مورد از تاریخچه مطمئن هستید؟', () => { let history = getHistory(); history.splice(index, 1); saveHistory(history); }); }; const renderHistory = () => { 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 deleteBtn = document.createElement('button'); deleteBtn.className = 'history-delete-btn'; deleteBtn.title = 'حذف این مورد'; deleteBtn.innerHTML = `<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>`; deleteBtn.onclick = () => handleDeleteItem(index); card.appendChild(deleteBtn); const imageGrid = document.createElement('div'); imageGrid.className = 'history-item-grid'; item.urls.forEach(url => { const img = document.createElement('img'); img.src = url; img.alt = 'تصویر از تاریخچه'; img.addEventListener('click', () => openLightbox(url, item.urls)); imageGrid.appendChild(img); }); card.appendChild(imageGrid); historyGrid.appendChild(card); }); };
         document.addEventListener('DOMContentLoaded', () => { renderHistory(); checkFormState(); });
         removeFileBtn.addEventListener('click', (e) => { e.preventDefault(); 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, () => { 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 => { if (!uploadArea.classList.contains('has-file')) handleFile(e.dataTransfer.files[0]); }); promptInput.addEventListener('input', checkFormState);
         submitBtn.addEventListener('click', async () => { if (submitBtn.disabled) return; setLoading(true); const formData = new FormData(); formData.append('image', uploadedFile); formData.append('prompt', promptInput.value.trim()); try { const response = await fetch(API_URL, { method: 'POST', body: formData }); if (!response.ok) { const errorData = await response.json().catch(() => ({ error: `خطای سرور: ${response.statusText}` })); throw new Error(errorData.error || `یک خطای ناشناخته رخ داد.`); } const result = await response.json(); if (result.image_urls && Array.isArray(result.image_urls) && result.image_urls.length > 0) { displayResult(result.image_urls); addToHistory({ prompt: promptInput.value.trim(), urls: result.image_urls }); } else { throw new Error('پاسخ معتبری از سرور دریافت نشد.'); } } catch (error) { displayError(error.message); } finally { setLoading(false); } });
         lightboxClose.addEventListener('click', closeLightbox); lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); }); lightboxDownload.addEventListener('click', handleDownload); lightboxNext.addEventListener('click', () => { currentLightboxIndex = (currentLightboxIndex + 1) % currentLightboxGroup.length; updateLightboxImage(); }); clearHistoryBtn.addEventListener('click', handleClearHistory);
-    
     </script>
     
     <script>