Update index.html

index.html

@@ -16,6 +16,7 @@
             --text-primary: #1A202C;  
             --text-secondary: #626F86;  
             --accent-primary: #4A6CFA;  
+            --accent-secondary: #9F7AEA; /* رنگ دوم برای گرادینت */
             --accent-glow: rgba(74, 108, 250, 0.2);  
             --success-color: #38A169;  
             --radius-card: 20px;  
@@ -83,45 +84,56 @@
         textarea { min-height: 120px; resize: vertical; }
         textarea:focus, input:focus, select:focus { border-color: var(--accent-primary); background: #fff; }
 
-        /* --- دکمه اصلی جدید و جذاب --- */
+        /* --- START: دکمه اصلی کاملاً جدید و خفن --- */
+        @keyframes move-gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+
         .btn-main { 
             width: 100%; padding: 16px; 
-            background: linear-gradient(135deg, #3b5bdb, var(--accent-primary), #3b5bdb);
-            background-size: 250% 100%;
-            background-position: 100% 0;
+            background: linear-gradient(110deg, var(--accent-secondary), var(--accent-primary), var(--accent-secondary));
+            background-size: 200% 100%;
             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.4s ease-out;
+            transition: all 0.3s ease-out;
             position: relative;
-            overflow: hidden; /* برای افکت درخشش */
+            z-index: 1;
+        }
+        .btn-main-content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            transition: transform 0.3s ease;
         }
-        .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);
+            transform: translateY(-4px);
+            box-shadow: 0 12px 28px -5px rgba(124, 93, 250, 0.4);
         }
-        .btn-main:hover span {
-            transform: translateX(-4px) rotate(-10deg);
+        .btn-main:hover .btn-main-content {
+            transform: scale(1.05);
         }
-        .btn-main::before { /* افکت درخشش */
+        .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;
+            top: -2px; left: -2px; right: -2px; bottom: -2px;
+            background: linear-gradient(110deg, var(--accent-secondary), var(--accent-primary), var(--accent-secondary));
+            background-size: 400%;
+            border-radius: 16px;
+            z-index: -1;
+            opacity: 0;
+            transition: opacity 0.4s ease-out;
         }
         .btn-main:hover::before {
-            left: 100%;
-            transition: left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            opacity: 1;
+            animation: move-gradient 4s linear infinite;
         }
         .btn-main:active { transform: scale(0.98); }
         .btn-main:disabled { opacity: 0.7; cursor: not-allowed; filter: grayscale(1); }
+        /* --- END: دکمه اصلی کاملاً جدید --- */
 
         .btn-outline {
             background: transparent; border: 2px solid var(--input-border);
@@ -224,7 +236,7 @@
                 </div>
                 <div class="checkbox-wrapper"><input type="checkbox" id="think_checkbox" checked><label for="think_checkbox" style="font-size: 0.9rem; cursor: pointer;"><b>فعال‌سازی تفکر مدل</b><br><span style="font-size: 0.8rem; color: #666;">افزایش کیفیت آهنگ</span></label></div>
             </div>
-            <button id="processBtn" class="btn-main" style="margin-top: 15px;"><span>ساخت آهنگ 🎵</span></button>
+            <button id="processBtn" class="btn-main" style="margin-top: 15px;"><div class="btn-main-content">ساخت آهنگ <span>🎵</span></div></button>
         </div>
 
         <div id="loader" style="display: none;">
@@ -256,7 +268,6 @@
         const ACE_SPACE_URL = "https://ace-step-ace-step-v1-5.hf.space/";
         let db;
 
-        // المان‌ها
         const ideaInput = document.getElementById('ideaInput');
         const processBtn = document.getElementById('processBtn');
         const step1 = document.getElementById('step1');
@@ -273,7 +284,6 @@
         const getNum = (id) => Number(document.getElementById(id).value);
         const getChk = (id) => document.getElementById(id).checked;
 
-        // آکاردئون
         const acc = document.getElementsByClassName("accordion");
         for (let i = 0; i < acc.length; i++) {
             acc[i].addEventListener("click", function() {
@@ -283,14 +293,12 @@
             });
         }
 
-        // --- مدیریت پایگاه داده IndexedDB ---
         function initDB() {
             const request = indexedDB.open("alphaMusicDB", 1);
-            request.onerror = (event) => console.error("خطای IndexedDB:", event);
+            request.onerror = (event) => console.error("IndexedDB error:", event);
             request.onsuccess = (event) => { db = event.target.result; loadHistory(); };
             request.onupgradeneeded = (event) => {
-                const db = event.target.result;
-                db.createObjectStore("songs", { keyPath: "id" });
+                event.target.result.createObjectStore("songs", { keyPath: "id" });
             };
         }
 
@@ -316,9 +324,7 @@
                     }
                 };
                 transaction.oncomplete = () => loadHistory();
-            } catch (error) {
-                console.error("خطا در ذخیره آهنگ:", error);
-            }
+            } catch (error) { console.error("Error saving song:", error); }
         }
 
         function loadHistory() {
@@ -361,7 +367,6 @@
         
         initDB();
 
-        // --- فرآیند اصلی ساخت آهنگ ---
         processBtn.addEventListener('click', async () => {
             if (!ideaInput.value.trim()) return alert("لطفا موضوع آهنگ را بنویسید");
             
@@ -456,7 +461,6 @@
 
         function formatLyrics(text) { return text.replace(/\[(.*?)\]/g, '<span class="lyrics-tag">[$1]</span>'); }
 
-        // انیمیشن پس‌زمینه
         const canvas = document.getElementById('music-canvas');
         const ctx = canvas.getContext('2d');
         let t = 0;