Update index.html

index.html

@@ -18,8 +18,8 @@
             --accent-primary: #4A6CFA;  
             --accent-secondary: #9F7AEA;
             --accent-glow: rgba(74, 108, 250, 0.2);  
-            --success-color: #38A169;  
-            --error-color: #e53e3e;
+            --success-color: #38A169;
+            --danger-color: #e53e3e;  
             --radius-card: 20px;  
             --radius-btn: 14px;  
         }  
@@ -27,9 +27,15 @@
         * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
         
         body { 
-            font-family: var(--app-font); background-color: var(--app-bg); color: var(--text-primary); 
-            margin: 0; padding: 20px 15px; min-height: 100vh;
-            display: flex; flex-direction: column; align-items: center;
+            font-family: var(--app-font); 
+            background-color: var(--app-bg); 
+            color: var(--text-primary); 
+            margin: 0; 
+            padding: 20px 15px; 
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
         }  
 
         .container { max-width: 650px; width: 100%; z-index: 2; position: relative; }  
@@ -38,37 +44,60 @@
             position: fixed; top: 0; left: 0; width: 100%; height: 400px; 
             z-index: 0; opacity: 0.5; pointer-events: none;
             mask-image: linear-gradient(to bottom, black, transparent);
+            -webkit-mask-image: linear-gradient(to bottom, black, transparent);
         }
 
         header { text-align: center; margin-bottom: 2rem; position: relative; }  
         
         .logo-box {
             width: 80px; height: 80px; margin: 0 auto 15px;
-            background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;
-            box-shadow: 0 10px 25px var(--accent-glow); color: var(--accent-primary);
+            background: #fff; border-radius: 50%;
+            display: flex; align-items: center; justify-content: center;
+            box-shadow: 0 10px 25px var(--accent-glow);
+            color: var(--accent-primary);
         }
         
-        h1 { font-size: 1.8rem; font-weight: 800; margin: 0; background: linear-gradient(90deg, #2d3748, #4A6CFA); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }  
+        h1 { 
+            font-size: 1.8rem; font-weight: 800; margin: 0; 
+            background: linear-gradient(90deg, #2d3748, #4A6CFA); 
+            -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
+        }  
         .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; }
+        .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;
+        }
         
         .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 { 
-            width: 100%; background: var(--input-bg); 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;
+            width: 100%; background: var(--input-bg); 
+            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;
         }
         textarea { min-height: 120px; resize: vertical; }
         textarea:focus, input:focus, select:focus { border-color: var(--accent-primary); background: #fff; }
 
         /* دکمه اصلی */
-        @keyframes move-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
+        @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(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;
+            width: 100%; padding: 16px; 
+            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;
             transition: all 0.3s ease-out; position: relative; z-index: 1;
         }
         .btn-main-content { display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform 0.3s ease; }
@@ -80,10 +109,12 @@
             background-size: 400%; border-radius: 16px; z-index: -1; opacity: 0; transition: opacity 0.4s ease-out;
         }
         .btn-main:hover::before { 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); }
 
-        .btn-outline { background: transparent; border: 2px solid var(--input-border); color: var(--text-secondary); margin-top: 10px; transition: all 0.2s; }
+        .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); }
 
         /* تنظیمات پیشرفته */
@@ -96,65 +127,94 @@
         .accordion:after { content: '⚙️'; font-size: 1rem; transition: transform 0.3s; }
         .accordion.active { border-radius: 12px 12px 0 0; border-bottom: none; }
         .accordion.active:after { content: '🔼'; }
-        
-        .panel { padding: 0 15px; background-color: var(--input-bg); max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; border-radius: 0 0 12px 12px; margin-bottom: 0; border: 1px solid var(--input-border); border-top: none; }
+        .panel {
+            padding: 0 15px; background-color: var(--input-bg); max-height: 0; overflow: hidden;
+            transition: max-height 0.3s ease-out; border-radius: 0 0 12px 12px;
+            margin-bottom: 0; border: 1px solid var(--input-border); border-top: none;
+        }
         .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 15px 0; }
-        .settings-group label { font-size: 0.8rem; color: var(--text-secondary); display: block; margin-bottom: 6px; font-weight: 500; }
         .checkbox-wrapper { display: flex; align-items: center; gap: 10px; margin-top: 5px; padding-bottom: 15px; border-top: 1px solid #e2e8f0; padding-top: 15px; }
-        .checkbox-wrapper input { width: 20px; height: 20px; cursor: pointer; }
+        .settings-group label { font-size: 0.8rem; color: var(--text-secondary); display: block; margin-bottom: 6px; font-weight: 500; }
 
         /* پلیر و متن */
         .player-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--panel-border); }
-        #mainDownloadLink { background-color: rgba(74, 108, 250, 0.1); color: var(--accent-primary); text-decoration: none; font-size: 0.9rem; font-weight: 700; padding: 8px 16px; border-radius: 10px; transition: 0.2s; display: none; }
+        #mainDownloadLink {
+            background-color: rgba(74, 108, 250, 0.1); color: var(--accent-primary); text-decoration: none; font-size: 0.9rem;
+            font-weight: 700; padding: 8px 16px; border-radius: 10px; transition: 0.2s; display: none;
+        }
         #mainDownloadLink:hover { background-color: rgba(74, 108, 250, 0.2); }
         .audio-item { margin-bottom: 10px; }
         audio { width: 100%; height: 45px; border-radius: 20px; margin-top: 5px; }
-        .lyrics-container { background: var(--input-bg); border-radius: 16px; padding: 20px; max-height: 350px; overflow-y: auto; white-space: pre-wrap; line-height: 2; font-size: 1rem; color: #4a5568; text-align: center; border: 1px solid var(--input-border); margin-top: 15px; }
+        .lyrics-container {
+            background: var(--input-bg); border-radius: 16px; padding: 20px; max-height: 350px; overflow-y: auto;
+            white-space: pre-wrap; line-height: 2; font-size: 1rem; color: #4a5568; text-align: center; border: 1px solid var(--input-border); margin-top: 15px;
+        }
         .lyrics-tag { color: var(--accent-primary); font-weight: 800; display: block; margin-top: 20px; margin-bottom: 5px; font-size: 0.9em; letter-spacing: 1px; text-transform: uppercase; }
 
         /* لودر */
         #loader { display: none; text-align: center; padding: 20px; }
         .wave-bars { display: flex; justify-content: center; gap: 4px; height: 30px; align-items: flex-end; }
         .bar { width: 5px; background: var(--accent-primary); animation: jump 1s infinite; border-radius: 2px; }
+        .bar:nth-child(2) { animation-delay: 0.1s; height: 60%; }
+        .bar:nth-child(3) { animation-delay: 0.2s; height: 80%; }
+        .bar:nth-child(4) { animation-delay: 0.3s; height: 50%; }
         @keyframes jump { 0%, 100% { height: 20%; } 50% { height: 100%; } }
 
-        /* تاریخچه */
+        /* --- استایل‌های جدید تاریخچه و حذف --- */
         #historySection { margin-top: 30px; width: 100%; }
         .history-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
         .history-list { display: grid; gap: 12px; }
-        .history-card { background: white; border-radius: 16px; padding: 15px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--panel-border); transition: all 0.3s; cursor: pointer; position: relative; }
+        .history-card {
+            background: white; border-radius: 16px; padding: 15px; display: flex; align-items: center; justify-content: space-between;
+            border: 1px solid var(--panel-border); transition: all 0.3s; cursor: pointer; position: relative; overflow: hidden;
+        }
         .history-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(74, 108, 250, 0.15); border-color: var(--accent-primary); }
         .h-info { display: flex; align-items: center; gap: 15px; }
         .h-icon { width: 45px; height: 45px; background: var(--input-bg); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--accent-primary); font-size: 1.2rem; }
-        .h-details h4 { margin: 0; font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
+        .h-details h4 { margin: 0; font-size: 1rem; color: var(--text-primary); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
         .h-details span { font-size: 0.8rem; color: var(--text-secondary); }
-        .h-delete-icon {
-            position: absolute; left: 15px; top: 50%; transform: translateY(-50%) scale(0.8);
-            color: var(--error-color); opacity: 0; transition: all 0.3s; font-size: 1.3rem;
+        
+        /* دکمه حذف در سمت چپ */
+        .h-delete {
+            position: absolute; left: 15px; /* سمت چپ فیزیکی */
+            background: #fee2e2; color: var(--danger-color);
+            width: 38px; height: 38px; border-radius: 50%;
+            display: flex; align-items: center; justify-content: center;
+            opacity: 0; transform: scale(0.8); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            z-index: 10; box-shadow: 0 4px 10px rgba(229, 62, 62, 0.2);
         }
-        .history-card:hover .h-delete-icon { opacity: 1; transform: translateY(-50%) scale(1); }
+        .history-card:hover .h-delete { opacity: 1; transform: scale(1); }
+        .h-delete:hover { background: var(--danger-color); color: white; transform: scale(1.1); }
 
         /* مودال حذف */
         .modal-overlay {
-            position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
-            z-index: 1000; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s;
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px);
+            z-index: 1000; display: none; align-items: center; justify-content: center;
+            opacity: 0; transition: opacity 0.3s;
         }
-        .modal-content {
-            width: 90%; max-width: 400px; background: white; border-radius: 20px; padding: 25px;
-            transform: scale(0.9); transition: transform 0.3s; text-align: center;
+        .modal-box {
+            background: white; width: 90%; max-width: 400px;
+            border-radius: 24px; padding: 30px; text-align: center;
+            transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
         }
+        .modal-icon-warn {
+            width: 60px; height: 60px; background: #fee2e2; color: var(--danger-color);
+            border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;
+        }
+        .modal-box h3 { margin: 0 0 10px; color: var(--text-primary); }
+        .modal-box p { color: var(--text-secondary); margin: 0 0 25px; font-size: 0.95rem; }
+        .modal-actions { display: flex; gap: 10px; justify-content: center; }
+        .btn-modal { padding: 12px 24px; border-radius: 12px; font-weight: 700; border: none; cursor: pointer; flex: 1; font-size: 1rem; transition: 0.2s; }
+        .btn-cancel { background: var(--input-bg); color: var(--text-secondary); }
+        .btn-cancel:hover { background: #e2e8f0; }
+        .btn-confirm { background: var(--danger-color); color: white; box-shadow: 0 5px 15px rgba(229, 62, 62, 0.3); }
+        .btn-confirm:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(229, 62, 62, 0.4); }
+
+        /* نمایش مودال */
         .modal-overlay.open { display: flex; opacity: 1; }
-        .modal-overlay.open .modal-content { transform: scale(1); }
-        .modal-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; }
-        .modal-text { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 20px; }
-        .modal-buttons { display: flex; gap: 10px; }
-        .modal-btn { flex: 1; padding: 12px; border-radius: 10px; border: none; cursor: pointer; font-weight: 700; transition: 0.2s; }
-        .btn-confirm { background-color: var(--error-color); color: white; }
-        .btn-confirm:hover { background-color: #c53030; }
-        .btn-cancel { background-color: var(--input-border); color: var(--text-secondary); }
-        .btn-cancel:hover { background-color: #cbd5e0; }
-
-        @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
+        .modal-overlay.open .modal-box { transform: scale(1); }
     </style>
 </head>  
 <body>  
@@ -162,20 +222,25 @@
 
     <div class="container">
         <header>  
-            <div class="logo-box"><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg></div>
+            <div class="logo-box">
+                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
+            </div>
             <h1>استودیو موزیک آلفا</h1>  
             <p class="subtitle">ساخت آهنگ حرفه‌ای با هوش مصنوعی</p>  
         </header>  
 
         <div id="step1" class="card">
-            <div class="form-label"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path></svg>موضوع آهنگ چیه؟</div>
+            <div class="form-label">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path></svg>
+                موضوع آهنگ چیه؟
+            </div>
             <textarea id="ideaInput" placeholder="مثال: آهنگ تولد برای سمیرا، سبک پاپ شاد..."></textarea>
             
             <button class="accordion">تنظیمات پیشرفته</button>
             <div class="panel">
                 <div class="settings-grid">
                     <div class="settings-group"><label>مدل هوش مصنوعی:</label><select id="model_select"><option value="acestep-v15-turbo-shift3" selected>Turbo-Shift3 (دقیق‌ترین)</option><option value="acestep-v15-turbo">Turbo (سریع‌ترین)</option></select></div>
-                    <div class="settings-group"><label>تعداد خروجی:</label><input type="number" id="batch_size" value="1" min="1" max="4"></div>
+                    <div class="settings-group"><label>تعداد خروجی (آهنگ):</label><input type="number" id="batch_size" value="1" min="1" max="4"></div>
                     <div class="settings-group"><label>تعداد گام (Steps):</label><input type="number" id="steps_input" value="8" min="4" max="50"></div>
                     <div class="settings-group"><label>سید (Seed) تصادفی=-1:</label><input type="number" id="seed_input" value="-1"></div>
                     <div class="settings-group"><label>مقیاس هدایت (CFG):</label><input type="number" id="cfg_input" value="7.0" step="0.5"></div>
@@ -202,29 +267,35 @@
         </div>
 
         <div id="historySection">
-            <div class="history-title"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>آخرین آهنگ‌های ساخته شده</div>
+            <div class="history-title">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
+                آخرین آهنگ‌های ساخته شده
+            </div>
             <div class="history-list" id="historyList"></div>
         </div>
     </div>
 
-    <!-- مودال حذف -->
-    <div class="modal-overlay" id="deleteModal">
-        <div class="modal-content">
-            <div class="modal-title">تایید حذف آهنگ</div>
-            <p class="modal-text">آیا از حذف این آهنگ از سابقه خود مطمئن هستید؟ این عمل غیرقابل بازگشت است.</p>
-            <div class="modal-buttons">
-                <button id="cancelDeleteBtn" class="modal-btn btn-cancel">انصراف</button>
-                <button id="confirmDeleteBtn" class="modal-btn btn-confirm">تایید حذف</button>
+    <!-- مودال تایید حذف -->
+    <div class="modal-overlay" id="deleteConfirmModal">
+        <div class="modal-box">
+            <div class="modal-icon-warn">
+                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>
+            </div>
+            <h3>آیا مطمئن هستید؟</h3>
+            <p>این آهنگ برای همیشه از سوابق شما حذف خواهد شد و قابل بازگشت نیست.</p>
+            <div class="modal-actions">
+                <button class="btn-modal btn-cancel" onclick="closeDeleteModal()">انصراف</button>
+                <button class="btn-modal btn-confirm" onclick="confirmDelete()">بله، حذف شود</button>
             </div>
         </div>
     </div>
 
     <script>
-        const ACE_SPACE_URL = "https://ace-step-ace-step-v1-5.hf-space/";
+        const ACE_SPACE_URL = "https://ace-step-ace-step-v1-5.hf.space/";
         let db;
-        let pressTimer;
-        let songToDeleteId = null;
+        let songToDeleteId = null; // برای نگهداری شناسه آهنگی که قرار است حذف شود
 
+        // المان‌ها
         const ideaInput = document.getElementById('ideaInput');
         const processBtn = document.getElementById('processBtn');
         const step1 = document.getElementById('step1');
@@ -236,9 +307,7 @@
         const mainDownloadLink = document.getElementById('mainDownloadLink');
         const historyList = document.getElementById('historyList');
         const historySection = document.getElementById('historySection');
-        const deleteModal = document.getElementById('deleteModal');
-        const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
-        const cancelDeleteBtn = document.getElementById('cancelDeleteBtn');
+        const deleteModal = document.getElementById('deleteConfirmModal');
 
         const getVal = (id) => document.getElementById(id).value;
         const getNum = (id) => Number(document.getElementById(id).value);
@@ -253,8 +322,33 @@
             });
         }
 
-        function initDB() { /* ... (بدون تغییر) ... */ }
-        async function saveToHistory(idea, lyrics, audioUrl) { /* ... (بدون تغییر) ... */ }
+        // --- مدیریت دیتابیس ---
+        function initDB() {
+            const request = indexedDB.open("alphaMusicDB", 1);
+            request.onerror = (event) => console.error("IndexedDB error:", event);
+            request.onsuccess = (event) => { db = event.target.result; loadHistory(); };
+            request.onupgradeneeded = (event) => { event.target.result.createObjectStore("songs", { keyPath: "id" }); };
+        }
+
+        async function saveToHistory(idea, lyrics, audioUrl) {
+            try {
+                const response = await fetch(audioUrl);
+                const audioBlob = await response.blob();
+                const newItem = {
+                    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);
+                
+                const countReq = store.count();
+                countReq.onsuccess = () => {
+                    if (countReq.result > 10) store.openCursor().onsuccess = (e) => { if(e.target.result) e.target.result.delete(); };
+                };
+                transaction.oncomplete = () => loadHistory();
+            } catch (error) { console.error("Error saving:", error); }
+        }
 
         function loadHistory() {
             if (!db) return;
@@ -277,32 +371,26 @@
                                 <span>${item.date}</span>
                             </div>
                         </div>
-                        <div class="h-delete-icon">🗑️</div>
+                        <div class="h-delete" onclick="askToDelete(event, ${item.id})">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>
+                        </div>
                     `;
-                    
-                    div.addEventListener('mousedown', () => {
-                        pressTimer = setTimeout(() => showDeleteConfirmation(item.id), 500);
-                    });
-                    div.addEventListener('mouseup', () => {
-                        clearTimeout(pressTimer);
-                    });
-                    div.addEventListener('click', (event) => {
-                        // اطمینان از اینکه کلیک کوتاه بوده
-                        if (!deleteModal.classList.contains('open')) {
-                           openHistoryItem(item);
+                    // کلیک روی خود کارت برای پخش
+                    div.onclick = (e) => {
+                        // اگر روی دکمه حذف کلیک نشده باشد
+                        if (!e.target.closest('.h-delete')) {
+                            openHistoryItem(item);
                         }
-                    });
-
+                    };
                     historyList.appendChild(div);
                 });
             };
         }
 
-        function openHistoryItem(item) { /* ... (بدون تغییر) ... */ }
-        
-        // --- مدیریت مودال حذف ---
-        function showDeleteConfirmation(itemId) {
-            songToDeleteId = itemId;
+        // --- توابع حذف ---
+        function askToDelete(event, id) {
+            event.stopPropagation(); // جلوگیری از باز شدن پلیر
+            songToDeleteId = id;
             deleteModal.classList.add('open');
         }
 
@@ -312,7 +400,7 @@
         }
 
         function confirmDelete() {
-            if (songToDeleteId) {
+            if (songToDeleteId && db) {
                 const transaction = db.transaction(["songs"], "readwrite");
                 const store = transaction.objectStore("songs");
                 store.delete(songToDeleteId);
@@ -322,17 +410,124 @@
                 };
             }
         }
-        
-        confirmDeleteBtn.addEventListener('click', confirmDelete);
-        cancelDeleteBtn.addEventListener('click', closeDeleteModal);
+
+        // بستن مودال با کلیک بیرون
         deleteModal.addEventListener('click', (e) => {
             if (e.target === deleteModal) closeDeleteModal();
         });
 
+        function openHistoryItem(item) {
+            step1.style.display = 'none';
+            historySection.style.display = 'none';
+            
+            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>`;
+            finalLyricsBox.innerHTML = formatLyrics(item.lyrics);
+            
+            finalResult.style.display = 'block';
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+        
         initDB();
 
-        processBtn.addEventListener('click', async () => { /* ... (بدون تغییر) ... */ });
-        function handleAudioOutput(data, lyrics, idea) { /* ... (بدون تغییر) ... */ }
+        // --- فرآیند اصلی ---
+        processBtn.addEventListener('click', async () => {
+            if (!ideaInput.value.trim()) return alert("لطفا موضوع آهنگ را بنویسید");
+            
+            processBtn.disabled = true;
+            step1.style.display = 'none';
+            historySection.style.display = 'none';
+            loader.style.display = 'block';
+            
+            try {
+                loaderText.innerText = "آلفا در حال نوشتن شعر و ملودی...";
+                const response = await fetch('/api/refine', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ idea: ideaInput.value }) });
+                const data = await response.json();
+                if (data.error) throw new Error(data.error);
+
+                const { lyrics, musicPrompt } = data;
+                loaderText.innerText = "در حال ضبط آهنگ در استودیو آلفا...";
+                
+                const payload = [
+                    getVal('model_select'), "custom", null, "unknown", musicPrompt, lyrics, 0, "", "", "unknown", 
+                    getNum('steps_input'), getNum('cfg_input'), true, getNum('seed_input'), null, -1, 
+                    getNum('batch_size'), null, null, 0, -1, "Fill the audio semantic mask based on the given conditions:", 
+                    1, "text2music", false, 0, 1, 3, "ode", "", "mp3", 0.85, 
+                    getChk('think_checkbox'), 2, 0, 0.9, "NO USER INPUT", true, true, true, null, false, true, false, false, 0.5, 8, null, [], false, null, null, null, null
+                ];
+
+                const session_hash = Math.random().toString(36).substring(2);
+                const joinResp = await fetch(`${ACE_SPACE_URL}gradio_api/queue/join`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ data: payload, fn_index: 77, session_hash }) });
+                if (!joinResp.ok) throw new Error('خطا در اتصال به سرور موزیک');
+
+                const eventSource = new EventSource(`${ACE_SPACE_URL}gradio_api/queue/data?session_hash=${session_hash}`);
+                eventSource.onmessage = (event) => {
+                    const msg = JSON.parse(event.data);
+                    if (msg.msg === 'process_starts') loaderText.innerText = "هوش مصنوعی در حال خواندن...";
+                    else if (msg.msg === 'process_completed') {
+                        eventSource.close();
+                        loader.style.display = 'none';
+                        handleAudioOutput(msg.output, lyrics, ideaInput.value);
+                    }
+                };
+                eventSource.onerror = () => { throw new Error('ارتباط با سرور قطع شد.'); };
+
+            } catch (e) {
+                alert("خطا: " + e.message);
+                loader.style.display = 'none';
+                step1.style.display = 'block';
+                historySection.style.display = 'block';
+                processBtn.disabled = false;
+            }
+        });
+
+        function handleAudioOutput(data, lyrics, idea) {
+            const processedUrls = new Set();
+            let hasResult = false;
+            
+            function addAudio(url) {
+                const fullUrl = url.startsWith('http') ? url : ACE_SPACE_URL.replace(/\/$/, '') + url;
+                if (processedUrls.has(fullUrl)) return;
+                processedUrls.add(fullUrl);
+                hasResult = true;
+
+                if (processedUrls.size === 1) {
+                    mainDownloadLink.href = fullUrl;
+                    mainDownloadLink.style.display = 'inline-block';
+                    saveToHistory(idea, lyrics, fullUrl);
+                }
+                playerWrapper.innerHTML += `<div class="audio-item"><audio controls autoplay src="${fullUrl}"></audio></div>`;
+            }
+
+            function traverse(obj) {
+                if (typeof obj === 'string' && obj.includes('/file=') && obj.endsWith('.mp3')) addAudio(obj);
+                else if (obj && typeof obj === 'object') {
+                    if (obj.url && obj.url.endsWith('.mp3')) addAudio(obj.url);
+                    Object.values(obj).forEach(traverse);
+                }
+            }
+            traverse(data);
+
+            if (hasResult) {
+                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(--success-color)';
+                finalResult.style.display = 'block';
+                finalLyricsBox.innerHTML = formatLyrics(lyrics);
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            } else {
+                alert("فایل صوتی یافت نشد!");
+                step1.style.display = 'block';
+                historySection.style.display = 'block';
+            }
+        }
+
         function formatLyrics(text) { return text.replace(/\[(.*?)\]/g, '<span class="lyrics-tag">[$1]</span>'); }
 
         const canvas = document.getElementById('music-canvas');
@@ -355,139 +550,6 @@
             requestAnimationFrame(anim);
         }
         anim();
-
-        // --- کد JS برای توابع بدون تغییر ---
-        (function() {
-            function initDB_impl() {
-                const request = indexedDB.open("alphaMusicDB", 1);
-                request.onerror = (event) => console.error("IndexedDB error:", event);
-                request.onsuccess = (event) => { db = event.target.result; loadHistory(); };
-                request.onupgradeneeded = (event) => {
-                    event.target.result.createObjectStore("songs", { keyPath: "id" });
-                };
-            }
-            async function saveToHistory_impl(idea, lyrics, audioUrl) {
-                try {
-                    const response = await fetch(audioUrl);
-                    const audioBlob = await response.blob();
-                    const newItem = {
-                        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);
-
-                    const countReq = store.count();
-                    countReq.onsuccess = () => {
-                        if (countReq.result > 10) {
-                            store.openCursor().onsuccess = (e) => {
-                                const cursor = e.target.result;
-                                if (cursor) cursor.delete();
-                            };
-                        }
-                    };
-                    transaction.oncomplete = () => loadHistory();
-                } catch (error) { console.error("Error saving song:", error); }
-            }
-            function openHistoryItem_impl(item) {
-                step1.style.display = 'none';
-                historySection.style.display = 'none';
-                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>`;
-                finalLyricsBox.innerHTML = formatLyrics(item.lyrics);
-                finalResult.style.display = 'block';
-                window.scrollTo({ top: 0, behavior: 'smooth' });
-            }
-            processBtn.onclick_original = async () => {
-                if (!ideaInput.value.trim()) return alert("لطفا موضوع آهنگ را بنویسید");
-                processBtn.disabled = true;
-                step1.style.display = 'none';
-                historySection.style.display = 'none';
-                loader.style.display = 'block';
-                try {
-                    loaderText.innerText = "آلفا در حال نوشتن شعر و ملودی...";
-                    const response = await fetch('/api/refine', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ idea: ideaInput.value }) });
-                    const data = await response.json();
-                    if (data.error) throw new Error(data.error);
-                    const { lyrics, musicPrompt } = data;
-                    loaderText.innerText = "در حال ضبط آهنگ در استودیو آلفا...";
-                    const payload = [
-                        getVal('model_select'), "custom", null, "unknown", musicPrompt, lyrics, 0, "", "", "unknown", 
-                        getNum('steps_input'), getNum('cfg_input'), true, getNum('seed_input'), null, -1, 
-                        getNum('batch_size'), null, null, 0, -1, "Fill the audio semantic mask based on the given conditions:", 
-                        1, "text2music", false, 0, 1, 3, "ode", "", "mp3", 0.85, 
-                        getChk('think_checkbox'), 2, 0, 0.9, "NO USER INPUT", true, true, true, null, false, true, false, false, 0.5, 8, null, [], false, null, null, null, null
-                    ];
-                    const session_hash = Math.random().toString(36).substring(2);
-                    const joinResp = await fetch(`${ACE_SPACE_URL}gradio_api/queue/join`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ data: payload, fn_index: 77, session_hash }) });
-                    if (!joinResp.ok) throw new Error('خطا در اتصال به سرور موزیک');
-                    const eventSource = new EventSource(`${ACE_SPACE_URL}gradio_api/queue/data?session_hash=${session_hash}`);
-                    eventSource.onmessage = (event) => {
-                        const msg = JSON.parse(event.data);
-                        if (msg.msg === 'process_starts') loaderText.innerText = "هوش مصنوعی در حال خواندن...";
-                        else if (msg.msg === 'process_completed') {
-                            eventSource.close();
-                            loader.style.display = 'none';
-                            handleAudioOutput(msg.output, lyrics, ideaInput.value);
-                        }
-                    };
-                    eventSource.onerror = () => { throw new Error('ارتباط با سرور قطع شد.'); };
-                } catch (e) {
-                    alert("خطا: " + e.message);
-                    loader.style.display = 'none';
-                    step1.style.display = 'block';
-                    historySection.style.display = 'block';
-                    processBtn.disabled = false;
-                }
-            };
-            function handleAudioOutput_impl(data, lyrics, idea) {
-                const processedUrls = new Set();
-                let hasResult = false;
-                function addAudio(url) {
-                    const fullUrl = url.startsWith('http') ? url : ACE_SPACE_URL.replace(/\/$/, '') + url;
-                    if (processedUrls.has(fullUrl)) return;
-                    processedUrls.add(fullUrl);
-                    hasResult = true;
-                    if (processedUrls.size === 1) {
-                        mainDownloadLink.href = fullUrl;
-                        mainDownloadLink.style.display = 'inline-block';
-                        saveToHistory(idea, lyrics, fullUrl);
-                    }
-                    playerWrapper.innerHTML += `<div class="audio-item"><audio controls autoplay src="${fullUrl}"></audio></div>`;
-                }
-                function traverse(obj) {
-                    if (typeof obj === 'string' && obj.includes('/file=') && obj.endsWith('.mp3')) addAudio(obj);
-                    else if (obj && typeof obj === 'object') {
-                        if (obj.url && obj.url.endsWith('.mp3')) addAudio(obj.url);
-                        Object.values(obj).forEach(traverse);
-                    }
-                }
-                traverse(data);
-                if (hasResult) {
-                    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(--success-color)';
-                    finalResult.style.display = 'block';
-                    finalLyricsBox.innerHTML = formatLyrics(lyrics);
-                    window.scrollTo({ top: 0, behavior: 'smooth' });
-                } else {
-                    alert("فایل صوتی یافت نشد!");
-                    step1.style.display = 'block';
-                    historySection.style.display = 'block';
-                }
-            }
-            if (typeof initDB !== 'function') var initDB = initDB_impl;
-            if (typeof saveToHistory !== 'function') var saveToHistory = saveToHistory_impl;
-            if (typeof openHistoryItem !== 'function') var openHistoryItem = openHistoryItem_impl;
-            if (typeof processBtn.onclick !== 'function') processBtn.onclick = processBtn.onclick_original;
-            if (typeof handleAudioOutput !== 'function') var handleAudioOutput = handleAudioOutput_impl;
-        })();
     </script>
 </body>  
 </html>