Update index.html

index.html

@@ -62,20 +62,15 @@
         }  
         .subtitle { font-size: 0.9rem; color: var(--text-secondary); margin-top: 5px; }  
 
-        /* کارت‌ها */
         .card { 
             background: var(--panel-bg); 
             border-radius: var(--radius-card); 
             box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05); 
             border: 1px solid var(--panel-border); 
             padding: 25px; margin-bottom: 20px;
-            transition: transform 0.3s ease;
         }
         
-        .form-label { 
-            display: flex; align-items: center; gap: 8px; 
-            font-weight: 700; margin-bottom: 12px; color: #2d3748; 
-        }
+        .form-label { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 12px; color: #2d3748; }
         .form-label svg { color: var(--accent-primary); width: 20px; }
 
         textarea, input, select { 
@@ -83,32 +78,47 @@
             border: 2px solid var(--input-border); 
             border-radius: 12px; padding: 15px; 
             font-family: inherit; font-size: 1rem; color: #2d3748;
-            outline: none;
-            transition: border-color 0.3s;
+            outline: none; transition: border-color 0.3s;
         }
         textarea { min-height: 120px; resize: vertical; }
         textarea:focus, input:focus, select:focus { border-color: var(--accent-primary); background: #fff; }
 
-        /* دکمه اصلی زیباتر شده */
+        /* --- دکمه اصلی جدید و جذاب --- */
         .btn-main { 
             width: 100%; padding: 16px; 
-            background: linear-gradient(135deg, var(--accent-primary), #3b5bdb); 
+            background: linear-gradient(135deg, #3b5bdb, var(--accent-primary), #3b5bdb);
+            background-size: 250% 100%;
+            background-position: 100% 0;
             color: #fff; border: none; border-radius: var(--radius-btn); 
             font-size: 1.1rem; font-weight: 700; cursor: pointer; 
             display: flex; justify-content: center; align-items: center; gap: 10px;
             box-shadow: 0 5px 15px var(--accent-glow);
-            transition: all 0.25s ease-out;
+            transition: all 0.4s ease-out;
+            position: relative;
+            overflow: hidden; /* برای افکت درخشش */
         }
+        .btn-main span { transition: transform 0.3s ease; display: inline-block; }
         .btn-main:hover {
             transform: translateY(-3px);
+            background-position: 0% 0;
             box-shadow: 0 10px 25px rgba(74, 108, 250, 0.35);
         }
         .btn-main:hover span {
-            transform: translateX(-4px); /* حرکت آیکون */
+            transform: translateX(-4px) rotate(-10deg);
+        }
+        .btn-main::before { /* افکت درخشش */
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 75%;
+            height: 100%;
+            background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
+            transition: none;
         }
-        .btn-main span {
-            display: inline-block; /* برای اعمال transform */
-            transition: transform 0.25s ease-out;
+        .btn-main:hover::before {
+            left: 100%;
+            transition: left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         }
         .btn-main:active { transform: scale(0.98); }
         .btn-main:disabled { opacity: 0.7; cursor: not-allowed; filter: grayscale(1); }
@@ -116,6 +126,7 @@
         .btn-outline {
             background: transparent; border: 2px solid var(--input-border);
             color: var(--text-secondary); margin-top: 10px;
+            transition: all 0.2s;
         }
         .btn-outline:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
 
@@ -341,7 +352,7 @@
 
             mainDownloadLink.href = audioURL;
             mainDownloadLink.style.display = 'inline-block';
-            playerWrapper.innerHTML = `<audio controls autoplay src="${audioURL}"></audio>`; // autoplay اضافه شد
+            playerWrapper.innerHTML = `<audio controls autoplay src="${audioURL}"></audio>`;
             finalLyricsBox.innerHTML = formatLyrics(item.lyrics);
             
             finalResult.style.display = 'block';
@@ -411,14 +422,12 @@
                 processedUrls.add(fullUrl);
                 hasResult = true;
 
-                // برای آهنگ اول، دکمه دانلود اصلی را تنظیم و در سابقه ذخیره کن
                 if (processedUrls.size === 1) {
                     mainDownloadLink.href = fullUrl;
                     mainDownloadLink.style.display = 'inline-block';
                     saveToHistory(idea, lyrics, fullUrl);
                 }
-
-                // autoplay برای آهنگ جدید اضافه شد
+                
                 playerWrapper.innerHTML += `<div class="audio-item"><audio controls autoplay src="${fullUrl}"></audio></div>`;
             }