Update index.html

index.html

@@ -35,6 +35,8 @@
 
         @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
         @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
+        @keyframes pulse-icon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
 
         body {
             font-family: var(--app-font);
@@ -65,15 +67,34 @@
             height: 100%;
             z-index: 1;
         }
-        h1, .subtitle {
+        .header-content {
             position: relative;
             z-index: 2;
         }
+        
+        .studio-logo {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 1.5rem;
+            animation: float 4s ease-in-out infinite;
+        }
+        .logo-icon { 
+            width: 70px; 
+            height: 70px; 
+            filter: drop-shadow(0 8px 16px rgba(74, 108, 250, 0.3));
+        }
+        .logo-icon svg { 
+            width: 100%; 
+            height: 100%; 
+            animation: pulse-icon 2.5s ease-in-out infinite;
+        }
 
         h1 {
             font-size: 2.8rem;
             font-weight: 800;
-            margin: 0 0 0.8rem 0;
+            margin: 0;
             background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
@@ -149,7 +170,7 @@
         .status-message.error { border-left: 4px solid var(--danger-color); color: var(--danger-color); }
         .status-icon { width: 18px; height: 18px; }
 
-        /* --- NEW LOADING ANIMATION (FROM PHOTOSHOP CODE) --- */
+        /* --- LOADING ANIMATION (FROM PHOTOSHOP CODE) --- */
         #aiLoader { align-items: center; justify-content: center; }
         .generator-container {
             position: relative; width: 400px; max-width: 100%; height: 300px;
@@ -177,7 +198,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; }
-        /* --- END OF NEW LOADING ANIMATION --- */
+        /* --- END OF LOADING ANIMATION --- */
 
         /* Video Output Styling */
         #outputVideo { width: 100%; max-width: 500px; border-radius: var(--radius-input); margin: 1rem auto; display: block; background-color: #000; box-shadow: var(--shadow-md); }
@@ -207,8 +228,33 @@
     <div class="container">
         <header>
             <canvas id="neural-network-canvas"></canvas>
-            <h1>استودیو ویدیو هوش مصنوعی آلفا</h1>
-            <p class="subtitle">تصاویر خود را با قدرت هوش مصنوعی به ویدیو سینمایی تبدیل کنید</p>
+            <div class="header-content">
+                <div class="studio-logo">
+                    <div class="logo-icon">
+                        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <defs>
+                                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+                                    <stop offset="0%" style="stop-color:#4A6CFA;stop-opacity:1" />
+                                    <stop offset="50%" style="stop-color:#667eea;stop-opacity:1" />
+                                    <stop offset="100%" style="stop-color:#0FD4A8;stop-opacity:1" />
+                                </linearGradient>
+                                <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
+                                    <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+                                    <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+                                </linearGradient>
+                            </defs>
+                            <rect x="25" y="35" width="35" height="30" rx="4" fill="url(#grad1)" opacity="0.8"/>
+                            <circle cx="42.5" cy="50" r="12" fill="url(#grad2)" opacity="0.9"/>
+                            <circle cx="42.5" cy="50" r="8" stroke="white" stroke-width="2" fill="none"/>
+                            <circle cx="42.5" cy="50" r="4" fill="white" opacity="0.8"/>
+                            <rect x="58" y="42" width="8" height="16" rx="2" fill="url(#grad1)" opacity="0.7"/>
+                            <polygon points="75,45 85,50 75,55" fill="white" opacity="0.9"/>
+                        </svg>
+                    </div>
+                    <h1>استودیو ویدیو هوش مصنوعی</h1>
+                </div>
+                <p class="subtitle">تصاویر خود را با قدرت هوش مصنوعی به ویدیو سینمایی تبدیل کنید</p>
+            </div>
         </header>
 
         <main>
@@ -564,7 +610,7 @@
                             if (data.progress_data?.[0]) {
                                 const progress = Math.round((data.progress_data[0].progress || 0) * 100);
                                 if(loaderProgressBar) {
-                                    loaderProgressBar.style.animation = 'none'; // Stop CSS animation to take JS control
+                                    loaderProgressBar.style.animation = 'none'; 
                                     loaderProgressBar.style.width = `${progress}%`;
                                 }
                             }
@@ -634,17 +680,9 @@
             document.addEventListener('DOMContentLoaded', initializeForm);
     
             imageDropZone.addEventListener('click', () => imageFileInput.click());
-            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-                imageDropZone.addEventListener(eventName, e => { e.preventDefault(); e.stopPropagation(); });
-            });
-            ['dragenter', 'dragover'].forEach(eventName => {
-                imageDropZone.addEventListener(eventName, () => {
-                    if (!imageDropZone.classList.contains('has-image')) { imageDropZone.classList.add('drag-over'); }
-                });
-            });
-            ['dragleave', 'drop'].forEach(eventName => {
-                imageDropZone.addEventListener(eventName, () => { imageDropZone.classList.remove('drag-over'); });
-            });
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { e.addEventListener(eventName, ev => { ev.preventDefault(); ev.stopPropagation(); }); });
+            ['dragenter', 'dragover'].forEach(eventName => { imageDropZone.addEventListener(eventName, () => { if (!imageDropZone.classList.contains('has-image')) { imageDropZone.classList.add('drag-over'); } }); });
+            ['dragleave', 'drop'].forEach(eventName => { imageDropZone.addEventListener(eventName, () => { imageDropZone.classList.remove('drag-over'); }); });
             imageDropZone.addEventListener('drop', e => {
                 if (!imageDropZone.classList.contains('has-image') && e.dataTransfer.files.length > 0) {
                     imageFileInput.files = e.dataTransfer.files;
@@ -765,7 +803,7 @@
                 resultContainer.classList.add('active');
                 statusSection.classList.add('active');
                 aiLoader.style.display = 'block';
-                if(loaderProgressBar) loaderProgressBar.style.animation = ''; // Re-enable CSS animation if needed.
+                if(loaderProgressBar) loaderProgressBar.style.animation = ''; // Re-enable CSS animation for progress if needed
                 outputSection.classList.remove('active');
     
                 const [ratioW_str, ratioH_str] = autoSelectedAspectRatio.split(':');