Update index.html

index.html

@@ -22,7 +22,6 @@
             --accent-secondary: #0FD4A8;
             --danger-color: #e53e3e;
             --danger-color-hover: #c53030;
-            --success-color: #38a169;
             --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03);
             --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04);
             --shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06), 0 4px 6px -4px rgba(26, 32, 44, 0.05);
@@ -36,7 +35,6 @@
         @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
         @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
         
-        /* --- MODIFICATION START: Shake Animation & Toast Notification --- */
         @keyframes shake {
             10%, 90% { transform: translate3d(-1px, 0, 0); }
             20%, 80% { transform: translate3d(2px, 0, 0); }
@@ -47,44 +45,6 @@
             animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
         }
 
-        #toast-container {
-            position: fixed;
-            bottom: 2rem;
-            left: 50%;
-            transform: translateX(-50%);
-            z-index: 9999;
-            display: flex;
-            flex-direction: column-reverse;
-            gap: 0.75rem;
-        }
-        .toast {
-            padding: 1rem 1.5rem;
-            border-radius: var(--radius-btn);
-            color: white;
-            font-weight: 600;
-            box-shadow: var(--shadow-xl);
-            animation: toast-in 0.5s cubic-bezier(0.25, 1, 0.5, 1);
-            opacity: 0;
-        }
-        .toast.show {
-            opacity: 1;
-        }
-        .toast.hide {
-            animation: toast-out 0.5s forwards cubic-bezier(0.5, 0, 0.75, 0);
-        }
-        .toast.error {
-            background-color: var(--danger-color);
-        }
-        @keyframes toast-in {
-            from { opacity: 0; transform: translateY(30px) scale(0.9); }
-            to { opacity: 1; transform: translateY(0) scale(1); }
-        }
-        @keyframes toast-out {
-            from { opacity: 1; transform: translateY(0) scale(1); }
-            to { opacity: 0; transform: translateY(30px) scale(0.9); }
-        }
-        /* --- MODIFICATION END --- */
-
         body {
             font-family: var(--app-font);
             background-color: var(--app-bg);
@@ -192,8 +152,6 @@
         }
         #submit-btn svg { width: 24px; height: 24px; margin-left: 4px; filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); transition: transform 0.3s ease; }
         
-        /* --- MODIFICATION START: Shake Animation & Toast Notification --- */
-        /* Changed hover to only apply when not in loading state */
         #submit-btn:hover:not(.loading) {
             background-position: right center;
             transform: translateY(-4px);
@@ -205,7 +163,6 @@
         #submit-btn.loading {
              cursor: wait;
         }
-        /* --- MODIFICATION END --- */
         
         #submit-btn .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; }
         
@@ -217,7 +174,7 @@
         .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.w.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; }
+        .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; } }
@@ -234,7 +191,16 @@
         #result-container.has-content #result-grid { display: grid; }
         #result-grid img { max-width: 100%; max-height: 400px; width: auto; height: auto; object-fit: contain; 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; }
+        
+        /* --- MODIFICATION: Updated error message style for validation --- */
+        #error-message {
+            color: var(--danger-color); /* Kept red for error indication */
+            text-align: center;
+            margin-top: 1rem;
+            display: none;
+            font-weight: 500;
+        }
+
         .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); }
@@ -286,7 +252,7 @@
         <main>
              <div class="form-group">
                 <div 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>
+                    <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>
                 <label id="upload-area" for="file-input">
@@ -305,7 +271,6 @@
                     ۲. دستور ویرایش را بنویسید
                 </label>
                 <textarea id="prompt-input" rows="3" placeholder="مثال: پس‌زمینه را حذف کن و یک ساحل آفتابی قرار بده"></textarea>
-                <!-- MODIFICATION: Removed 'disabled' attribute -->
                 <button id="submit-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="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/></svg>
                     <span id="btn-text">ایجاد کن</span>
@@ -315,7 +280,7 @@
             </div>
             <div class="form-group">
                  <div 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="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>
+                    <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>
                      ۳. نتیجه را ببینید
                 </div>
                 <div id="result-container">
@@ -377,9 +342,6 @@
         </div>
     </div>
     
-    <!-- MODIFICATION: Toast Notification Container -->
-    <div id="toast-container"></div>
-
     <script>
         // --- START OF MODIFIED APPLICATION LOGIC SCRIPT ---
         const API_BASE_URL = "https://ginigen-nano-banana-video.hf.space/gradio_api/";
@@ -387,31 +349,12 @@
         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;
         
-        // --- MODIFICATION START: Shake Animation & Toast Notification ---
-        const showToast = (message, type = 'error') => {
-            const toastContainer = document.getElementById('toast-container');
-            const toast = document.createElement('div');
-            toast.className = `toast ${type}`;
-            toast.textContent = message;
-            toastContainer.appendChild(toast);
-            
-            // Trigger the animation
-            setTimeout(() => toast.classList.add('show'), 10);
-            
-            // Hide after 3 seconds
-            setTimeout(() => {
-                toast.classList.add('hide');
-                // Remove from DOM after animation finishes
-                toast.addEventListener('animationend', () => toast.remove());
-            }, 3000);
-        };
         const triggerButtonShake = () => {
             submitBtn.classList.add('shake-error');
             setTimeout(() => {
                 submitBtn.classList.remove('shake-error');
-            }, 820); // Corresponds to animation duration
+            }, 820);
         };
-        // --- MODIFICATION END ---
         
         // --- HELPER FUNCTIONS ---
         const convertToPNG = (file) => {
@@ -462,6 +405,7 @@
             reader.readAsDataURL(file);
             uploadArea.classList.add('has-file');
             clearResult();
+            errorMessage.style.display = 'none'; // Hide error message on file upload
         };
         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'); }; 
         
@@ -496,7 +440,6 @@
         
         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); }); };
 
-        // --- GRADIO API HELPER FUNCTIONS ---
         async function uploadFileToGradio(file) {
             const formData = new FormData();
             formData.append('files', file);
@@ -543,20 +486,27 @@
         document.addEventListener('DOMContentLoaded', renderHistory);
         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]); });
         
-        // --- MODIFIED SUBMIT BUTTON LOGIC ---
+        // --- MODIFICATION: Hide error message on input ---
+        promptInput.addEventListener('input', () => {
+            if (errorMessage.style.display === 'block') {
+                errorMessage.style.display = 'none';
+            }
+        });
+
         submitBtn.addEventListener('click', async () => {
-            // Prevent multiple submissions while loading
             if (submitBtn.classList.contains('loading')) return;
             
-            // --- MODIFICATION: Validation Check ---
+            // --- MODIFICATION: Validation Check using the <p> tag ---
             if (!uploadedFile) {
                 triggerButtonShake();
-                showToast('لطفا ابتدا یک تصویر انتخاب کنید.');
+                errorMessage.textContent = 'لطفا ابتدا یک تصویر انتخاب کنید.';
+                errorMessage.style.display = 'block';
                 return;
             }
             if (promptInput.value.trim() === '') {
                 triggerButtonShake();
-                showToast('لطفا دستور ویرایش را بنویسید.');
+                errorMessage.textContent = 'لطفا دستور ویرایش را بنویسید.';
+                errorMessage.style.display = 'block';
                 return;
             }