Update templates/index.html

templates/index.html

@@ -20,6 +20,8 @@
             --accent-primary-hover: #3553D6;
             --accent-primary-glow: rgba(74, 108, 250, 0.25);
             --accent-secondary: #0FD4A8;
+            --accent-premium: #FFC107; 
+            --accent-premium-glow: rgba(255, 193, 7, 0.3);
             --success-color: #38A169;
             --danger-color: #e53e3e;
             --danger-color-hover: #c53030;
@@ -50,6 +52,7 @@
         @keyframes background-pan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
         @keyframes igadlmAlphaV2fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
         @keyframes fill-progress { from { width: 0%; } to { width: 100%; } }
+        @keyframes badge-fade-in { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
 
         body { font-family: var(--app-font); background-color: var(--app-bg); color: var(--text-primary); margin: 0; padding: 2.5rem 1rem; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; }
         .container { max-width: 820px; width: 100%; }
@@ -68,10 +71,6 @@
         h1 { font-size: 2.8rem; font-weight: 800; margin: 0; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1px; }
         .subtitle { font-size: 1.1rem; color: var(--text-secondary); margin-top: 0.5rem; }
         .instruction { font-size: 0.95rem; color: var(--text-tertiary); margin-top: 0.75rem; font-weight: 500; }
-        /* [جدید] استایل برای متن زیرنویس نسخه */
-        .header-version-info { margin-top: 1rem; font-size: 0.9rem; color: var(--text-tertiary); }
-        .header-version-info span { font-weight: 600; color: var(--text-secondary); }
-
         main { padding: 3rem; background-color: var(--panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border); animation: fadeIn 0.8s 0.3s ease-out backwards; }
         .form-group { margin-bottom: 2.5rem; }
         .form-group:last-child { margin-bottom: 0; }
@@ -141,14 +140,16 @@
         .gpu-error-actions .action-button.back-button:hover:not(:disabled) { background-color: var(--input-bg); }
         .gpu-error-actions .action-button.retry-button { background: linear-gradient(60deg, var(--igadlm-alpha-color-primary) 0%, var(--igadlm-alpha-color-secondary) 100%); color: white; flex-grow: 1; }
         .gpu-error-actions .action-button.retry-button:hover:not(:disabled) { background: linear-gradient(60deg, var(--igadlm-alpha-color-primary-darker) 0%, var(--igadlm-alpha-color-secondary-darker) 100%); }
+        
+        /* بخش جدید: استایل‌های مربوط به اعتبار و اشتراک */
+        #subscription-status-badge { display: none; padding: 6px 16px; border-radius: 20px; font-size: 0.9em; font-weight: 700; margin-top: 1.25rem; letter-spacing: 0.5px; animation: badge-fade-in 0.6s 0.5s ease-out backwards; }
+        #subscription-status-badge.free-badge { background: linear-gradient(45deg, #6c757d, #495057); color: white; box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3); }
+        #subscription-status-badge.paid-badge { background: linear-gradient(45deg, var(--accent-premium), #ffca2c); color: #333; box-shadow: 0 4px 10px var(--accent-premium-glow); }
+        
         #credit-info-section { margin-top: 1.5rem; margin-bottom: 0.5rem; padding: 1rem; background-color: var(--input-bg); border-radius: var(--radius-input); text-align: center; font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); border: 1px solid var(--input-border); display: none; }
         #upgrade-button { margin-top: 1rem; width: 100%; padding: 1rem; font-size: 1.1rem; font-weight: 700; background: linear-gradient(95deg, #FFD54F, #FFC107 100%); color: #212529; border: none; border-radius: var(--radius-btn); cursor: pointer; box-shadow: 0 8px 20px -5px rgba(255, 193, 7, 0.3); display: none; }
         
-        @media (max-width: 768px) {
-            main { padding: 1.5rem; } h1 { font-size: 2.2rem; }
-            .generator-container { height: 250px; }
-            .text-overlay { font-size: 18px; }
-        }
+        @media (max-width: 768px) { main { padding: 1.5rem; } h1 { font-size: 2.2rem; } .generator-container { height: 250px; } .text-overlay { font-size: 18px; } }
     </style>
 </head>
 <body>
@@ -169,11 +170,9 @@
                 </div>
                 <h1>استودیو ویدیو هوش مصنوعی</h1>
                 <p class="subtitle">تصاویر خود را با قدرت هوش مصنوعی به ویدیو سینمایی تبدیل کنید</p>
-                <p class="instruction">ابتدا تصویر خود را با فلاکس پرو تولید کنید و بعد تصویر خود را اینجا آپلود کرده و ویدیوی خود را بسازید</p>
-                <!-- [جدید] بخش نمایش نسخ�� -->
-                <div class="header-version-info">
-                    <span>نسخه رایگان</span> و <span>نسخه نامحدود</span>
-                </div>
+                <!-- بخش جدید: متن راهنما و بج وضعیت اشتراک -->
+                <p class="instruction">ابتدا تصویر خود را با فلاکس پرو تولید کنید و بعد تصویر خود را اینجا آپلود کرده و ویدیوی خود را بسازید.</p>
+                <div id="subscription-status-badge" style="display:inline-block;"></div>
             </div>
         </header>
 
@@ -255,7 +254,7 @@
         import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
 
         (function() {
-            // === START: بخش ارتباط با Iframe و مدیریت اعتبار ===
+            // === START: بخش مدیریت اعتبار و ارتباط با والد ===
             let userSubscriptionStatus = 'free'; // 'free' or 'paid'
             let userFingerprint = null;
             let countdownInterval = null;
@@ -287,15 +286,21 @@
                 const creditInfoDiv = document.getElementById('credit-info-section');
                 const upgradeBtn = document.getElementById('upgrade-button');
                 const genBtn = document.getElementById('generateButton');
+                const subscriptionBadge = document.getElementById('subscription-status-badge');
                 
                 if (status === 'paid') {
+                    subscriptionBadge.textContent = 'نسخه نامحدود';
+                    subscriptionBadge.className = 'paid-badge';
                     creditInfoDiv.style.display = 'none';
                     upgradeBtn.style.display = 'none';
                     genBtn.disabled = false;
                     if(countdownInterval) clearInterval(countdownInterval);
                 } else {
+                    subscriptionBadge.textContent = 'نسخه رایگان';
+                    subscriptionBadge.className = 'free-badge';
                     checkFreeUserCredit();
                 }
+                subscriptionBadge.style.display = 'inline-block';
             }
 
             async function checkFreeUserCredit() {
@@ -368,7 +373,7 @@
             document.getElementById('upgrade-button').addEventListener('click', () => {
                 parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM' }, '*');
             });
-            // === END: بخش ارتباط و اعتبار ===
+            // === END: بخش مدیریت اعتبار ===
 
 
             // DOM Elements
@@ -410,7 +415,6 @@
                     showCriticalError("اطلاعات کافی برای تلاش مجدد وجود ندارد. لطفاً از نو شروع کنید.");
                     return;
                 }
-                promptInput.value = lastAttemptedVideoPayload.persianPrompt;
                 generateButton.click();
             }
             
@@ -513,10 +517,29 @@
                     return;
                 }
                 
+                // === تغییر اصلی: کسر اعتبار بعد از موفقیت ===
+                if (userSubscriptionStatus === 'free') {
+                    try {
+                        addStatusMessage('ویدیو ساخته شد، در حال ثبت اعتبار...', 'info');
+                        const creditResponse = await fetch('/api/use-credit', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify({ fingerprint: userFingerprint })
+                        });
+                        if (!creditResponse.ok) {
+                            console.warn("Credit deduction failed AFTER video generation.");
+                        }
+                        // UI را با تعداد اعتبار جدید بروزرسانی می‌کنیم
+                        checkFreeUserCredit();
+                    } catch (creditError) {
+                        console.error("Critical error deducting credit:", creditError);
+                    }
+                }
+                // === پایان تغییر ===
+
                 addStatusMessage('ویدیو آماده شد! 🎉', 'success');
                 const videoUrl = result.data[0].video.url;
                 const usedSeed = result.data[1];
-                
                 setTimeout(() => {
                     statusSection.classList.remove('active');
                     outputSection.classList.add('active');
@@ -524,27 +547,6 @@
                     finalSeedElement.textContent = `Seed: ${usedSeed}`;
                     prepareCustomDownloadLink(videoUrl);
                 }, 300);
-
-                // [تغییر اصلی] کسر اعتبار فقط پس از موفقیت
-                if (userSubscriptionStatus === 'free') {
-                    try {
-                        const response = await fetch('/api/use-credit', {
-                            method: 'POST',
-                            headers: {'Content-Type': 'application/json'},
-                            body: JSON.stringify({ fingerprint: userFingerprint })
-                        });
-                        if (response.ok) {
-                            console.log('Credit used successfully.');
-                            // بروزرسانی نمایش اعتبار باقی‌مانده
-                            checkFreeUserCredit(); 
-                        } else {
-                            console.warn('Could not use credit after successful generation.');
-                        }
-                    } catch (err) {
-                        console.error('Error while using credit:', err);
-                    }
-                }
-                
                 generateButton.disabled = false;
             }
 
@@ -615,14 +617,16 @@
                         negative_prompt: DEFAULT_NEGATIVE_PROMPT, duration_seconds: DEFAULT_VIDEO_DURATION,
                         guidance_scale: 1, guidance_scale_2: 1, seed: 0, randomize_seed: true
                     });
-                    handleSuccessfulVideoGeneration(result);
+                    
+                    // حالا این تابع مسئول کسر اعتبار هم هست
+                    await handleSuccessfulVideoGeneration(result);
+
                 } catch (errorCaught) {
                     const isTranslationErr = errorCaught.message.toLowerCase().includes("مترجم");
                     showCriticalError(`خطا: ${errorCaught.message}`, isTranslationErr);
                 }
             };
 
-            // [تغییر اصلی] بازنویسی منطق دکمه ساخت ویدیو
             generateButton.addEventListener('click', async () => {
                 if (generateButton.disabled) return;
                 
@@ -637,9 +641,8 @@
                             body: JSON.stringify({ fingerprint: userFingerprint })
                         });
                         const result = await response.json();
-                        
-                        if (result.limit_reached) {
-                            checkFreeUserCredit(); // UI را با پیام اتمام اعتبار آپدیت می‌کند
+                        if(result.limit_reached) {
+                            updateUIForSubscriptionStatus('free'); // UI را با پیام اتمام اعتبار آپدیت می‌کند
                             return;
                         }
                         // اگر اعتبار داشت، فرآیند ساخت را شروع می‌کنیم