Update index.html

index.html

@@ -97,6 +97,8 @@
         .status-message.success { border-left: 4px solid var(--success-color); color: var(--success-color); }
         .status-message.error { border-left: 4px solid var(--danger-color); color: var(--danger-color); }
         .status-icon { width: 18px; height: 18px; }
+        
+        /* --- LOADING ANIMATION STYLES (ORIGINAL AND UNCHANGED) --- */
         #aiLoader { align-items: center; justify-content: center; }
         .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-loader 5s infinite cubic-bezier(0.4, 0, 0.6, 1); background-color: #161b22; color: #f0f6fc; }
         @keyframes pulse-loader { 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); } }
@@ -114,6 +116,7 @@
         .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); animation: glow-text 7s infinite ease-in-out; font-family: var(--app-font); width: 90%; text-align: center;}
         @keyframes glow-text { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } }
         .progress-bar { position: absolute; bottom: 0; left: 0; width: 0%; height: 6px; background: linear-gradient(to right, #38bdf8, #bb86fc, #facc15); transition: width 0.4s ease; }
+
         #outputVideo { width: 100%; max-width: 500px; border-radius: var(--radius-input); margin: 1rem auto; display: block; background-color: #000; box-shadow: var(--shadow-md); }
         #finalSeed { text-align: center; color: var(--text-tertiary); font-size: 0.85rem; margin-top: 1rem; }
         .video-controls { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
@@ -296,7 +299,7 @@
                     generateButton.disabled = true;
                     resultContainer.classList.add('active');
                     statusSection.classList.add('active');
-                    aiLoader.style.display = 'flex'; // Use flex for centering
+                    aiLoader.style.display = 'block'; // بازگردانی به حالت اولیه
                     setAiLoaderText("تلاش مجدد...");
                     addStatusMessage('تلاش مجدد...', 'info', true);
     
@@ -351,7 +354,7 @@
                         <h2><span class="icon">💡</span> راهنمای رفع محدودیت ویدیو</h2>
                         <div class="error-content">
                             <strong class="error-message-title">ارور محدودیت استفاده از GPU</strong>
-                            <p>مدل‌های هوش مصنوعی برای اجرا به کارت‌های گرافیک بسیار قدرتمند نیاز دارند که این امر گاهی محدودیت‌هایی جی پی یو را در استفاده از آن‌ها ایجاد می‌کند. با این حال، خبر خوب این است که این محدودیت‌ها با استفاده از یک ترفند ساده قابل رفع هستند.</p>
+                            <p>مدل‌های هوش مصنوعی برای اجرا به کارت‌های گرافیک بسیار قدرمند نیاز دارند که این امر گاهی محدودیت‌هایی جی پی یو را در استفاده از آن‌ها ایجاد می‌کند. با این حال، خبر خوب این است که این محدودیت‌ها با استفاده از یک ترفند ساده قابل رفع هستند.</p>
                             <p><strong>برای رفع محدودیت هر بار اینگونه عمل کنید:</strong></p>
                             <ul>
                                 <li>اگر از اینترنت سیم‌کارت استفاده می‌کنید، فیلترشکن خود را حتما خاموش کنید.</li>
@@ -370,7 +373,7 @@
                     document.getElementById('gpuErrorRetryBtn').addEventListener('click', retryLastAttempt);
                 } else {
                     criticalErrorSection.innerHTML = `
-                        <div style="color: var(--danger-color); font-weight: 500; margin-bottom: 1.5rem; line-height: 1.6;"><p>${message}</p></div>
+                        <div id="criticalErrorMessage" style="color: var(--danger-color); font-weight: 500; margin-bottom: 1.5rem; line-height: 1.6;"><p>${message}</p></div>
                         <div class="video-controls">
                             <button id="simpleErrorGoBackBtn" class="video-button">بازگشت</button>
                             <button id="simpleErrorRetryBtn" class="video-button primary">تلاش مجدد</button>
@@ -521,7 +524,7 @@
             async function uploadImageToServerForVideoOriginal(file) {
                 addStatusMessage('آماده‌سازی تصویر برای آپلود...', 'info', true);
                 setAiLoaderText("در حال آماده سازی تصویر...");
-                aiLoader.style.display = 'flex';
+                aiLoader.style.display = 'block';
     
                 const uploadId = generateRandomHash(12);
                 const formData = new FormData();
@@ -555,7 +558,7 @@
             async function submitToVideoQueue(payload) {
                 addStatusMessage('ارسال درخواست ساخت ویدیو...', 'info', true);
                 setAiLoaderText("در حال ارسال درخواست ساخت ویدیو...");
-                aiLoader.style.display = 'flex';
+                aiLoader.style.display = 'block';
                 try {
                     const response = await fetch(`${VIDEO_SPACE_URL_BASE}/queue/join`, {
                         method: 'POST',
@@ -573,7 +576,7 @@
             function listenForVideoResults(eventId) {
                 addStatusMessage('در حال ساخت ویدیو...', 'info', true);
                 setAiLoaderText("هوش مصنوعی در حال پردازش...");
-                aiLoader.style.display = 'flex';
+                aiLoader.style.display = 'block';
                 hideCriticalError();
                 statusSection.classList.add('active');
                 outputSection.classList.remove('active');
@@ -730,7 +733,7 @@
                 generateButton.disabled = true;
                 resultContainer.classList.add('active');
                 statusSection.classList.add('active');
-                aiLoader.style.display = 'flex'; // Use flex for centering
+                aiLoader.style.display = 'block'; // بازگردانی به حالت اولیه
                 if(loaderProgressBar) loaderProgressBar.style.animation = ''; 
                 outputSection.classList.remove('active');