Update index.html

index.html

@@ -89,7 +89,7 @@
         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); 
@@ -97,11 +97,18 @@
             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.2s ease-out;
+            transition: all 0.25s ease-out;
         }
         .btn-main:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px var(--accent-glow);
+            transform: translateY(-3px);
+            box-shadow: 0 10px 25px rgba(74, 108, 250, 0.35);
+        }
+        .btn-main:hover span {
+            transform: translateX(-4px); /* حرکت آیکون */
+        }
+        .btn-main span {
+            display: inline-block; /* برای اعمال transform */
+            transition: transform 0.25s ease-out;
         }
         .btn-main:active { transform: scale(0.98); }
         .btn-main:disabled { opacity: 0.7; cursor: not-allowed; filter: grayscale(1); }
@@ -236,7 +243,7 @@
 
     <script>
         const ACE_SPACE_URL = "https://ace-step-ace-step-v1-5.hf.space/";
-        let db; // متغیر برای نگهداری اتصال به پایگاه داده
+        let db;
 
         // المان‌ها
         const ideaInput = document.getElementById('ideaInput');
@@ -268,12 +275,8 @@
         // --- مدیریت پایگاه داده IndexedDB ---
         function initDB() {
             const request = indexedDB.open("alphaMusicDB", 1);
-
             request.onerror = (event) => console.error("خطای IndexedDB:", event);
-            request.onsuccess = (event) => {
-                db = event.target.result;
-                loadHistory(); // بارگذاری سوابق پس از اتصال موفق
-            };
+            request.onsuccess = (event) => { db = event.target.result; loadHistory(); };
             request.onupgradeneeded = (event) => {
                 const db = event.target.result;
                 db.createObjectStore("songs", { keyPath: "id" });
@@ -282,69 +285,45 @@
 
         async function saveToHistory(idea, lyrics, audioUrl) {
             try {
-                // دریافت فایل صوتی به صورت Blob
                 const response = await fetch(audioUrl);
                 const audioBlob = await response.blob();
-                
                 const newItem = {
-                    id: Date.now(), idea: idea, lyrics: lyrics, audioBlob: audioBlob,
+                    id: Date.now(), idea, lyrics, audioBlob,
                     date: new Date().toLocaleDateString('fa-IR', { hour: '2-digit', minute: '2-digit' })
                 };
-
                 const transaction = db.transaction(["songs"], "readwrite");
                 const store = transaction.objectStore("songs");
                 store.add(newItem);
 
-                // مدیریت محدودیت 10 آیتم
                 const countReq = store.count();
                 countReq.onsuccess = () => {
                     if (countReq.result > 10) {
-                        const cursorReq = store.openCursor(); // قدیمی‌ترین اولین است
-                        cursorReq.onsuccess = (e) => {
+                        store.openCursor().onsuccess = (e) => {
                             const cursor = e.target.result;
-                            if (cursor) {
-                                cursor.delete();
-                            }
+                            if (cursor) cursor.delete();
                         };
                     }
                 };
-
                 transaction.oncomplete = () => loadHistory();
-
             } catch (error) {
                 console.error("خطا در ذخیره آهنگ:", error);
-                alert("خطایی در ذخیره آهنگ در مرورگر رخ داد. ممکن است لینک موقتی باشد.");
             }
         }
 
         function loadHistory() {
             if (!db) return;
-            const transaction = db.transaction(["songs"], "readonly");
-            const store = transaction.objectStore("songs");
-            const allReq = store.getAll();
-
-            allReq.onsuccess = () => {
-                const history = allReq.result.sort((a, b) => b.id - a.id); // جدیدترین‌ها اول
+            const store = db.transaction(["songs"], "readonly").objectStore("songs");
+            store.getAll().onsuccess = (e) => {
+                const history = e.target.result.sort((a, b) => b.id - a.id);
                 historyList.innerHTML = '';
-                
                 if (history.length === 0) {
                     historyList.innerHTML = '<div style="text-align:center; color:#999; padding:20px;">هنوز آهنگی نساخته‌اید</div>';
                     return;
                 }
-
                 history.forEach((item) => {
                     const div = document.createElement('div');
                     div.className = 'history-card';
-                    div.innerHTML = `
-                        <div class="h-info">
-                            <div class="h-icon">🎵</div>
-                            <div class="h-details">
-                                <h4>${item.idea.substring(0, 30)}${item.idea.length > 30 ? '...' : ''}</h4>
-                                <span>${item.date}</span>
-                            </div>
-                        </div>
-                        <div class="h-play">▶ نمایش</div>
-                    `;
+                    div.innerHTML = `<div class="h-info"><div class="h-icon">🎵</div><div class="h-details"><h4>${item.idea.substring(0, 30)}${item.idea.length > 30 ? '...' : ''}</h4><span>${item.date}</span></div></div><div class="h-play">▶ نمایش</div>`;
                     div.onclick = () => openHistoryItem(item);
                     historyList.appendChild(div);
                 });
@@ -355,23 +334,20 @@
             step1.style.display = 'none';
             historySection.style.display = 'none';
             
-            // تبدیل Blob به URL قابل پخش
             const audioURL = URL.createObjectURL(item.audioBlob);
-
             const headerText = document.getElementById('resultHeaderText');
             headerText.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg> آهنگ آرشیو شده`;
             headerText.style.color = 'var(--accent-primary)';
 
             mainDownloadLink.href = audioURL;
             mainDownloadLink.style.display = 'inline-block';
-            playerWrapper.innerHTML = `<audio controls autoplay src="${audioURL}"></audio>`;
+            playerWrapper.innerHTML = `<audio controls autoplay src="${audioURL}"></audio>`; // autoplay اضافه شد
             finalLyricsBox.innerHTML = formatLyrics(item.lyrics);
             
             finalResult.style.display = 'block';
             window.scrollTo({ top: 0, behavior: 'smooth' });
         }
         
-        // شروع به کار پایگاه داده
         initDB();
 
         // --- فرآیند اصلی ساخت آهنگ ---
@@ -435,12 +411,15 @@
                 processedUrls.add(fullUrl);
                 hasResult = true;
 
+                // برای آهنگ اول، دکمه دانلود اصلی را تنظیم و در سابقه ذخیره کن
                 if (processedUrls.size === 1) {
                     mainDownloadLink.href = fullUrl;
                     mainDownloadLink.style.display = 'inline-block';
-                    saveToHistory(idea, lyrics, fullUrl); // ذخیره سازی در IndexedDB
+                    saveToHistory(idea, lyrics, fullUrl);
                 }
-                playerWrapper.innerHTML += `<div class="audio-item"><audio controls src="${fullUrl}"></audio></div>`;
+
+                // autoplay برای آهنگ جدید اضافه شد
+                playerWrapper.innerHTML += `<div class="audio-item"><audio controls autoplay src="${fullUrl}"></audio></div>`;
             }
 
             function traverse(obj) {
@@ -468,6 +447,7 @@
 
         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;