Update index.html

index.html

@@ -19,7 +19,7 @@
         .new-proj-btn { background: #333; color: #ccc; border: 1px solid #444; padding: 8px 15px; border-radius: 12px; font-size: 0.9rem; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 8px; font-family: inherit; }
         .new-proj-btn:hover { background: #444; color: #fff; border-color: #666; }
 
-        /* --- مدال تایید خروج (انیمیشن دار) --- */
+        /* --- مدال تایید خروج --- */
         .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: 3000; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
         .modal-overlay.show { opacity: 1; }
         
@@ -64,13 +64,12 @@
         .tool-section.active-section { display: block; }
         @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
 
-        /* --- لیست زیرنویس (بخش متن) --- */
+        /* --- لیست زیرنویس --- */
         #subtitleListArea { width: 100%; }
         .sub-card { background: #222; border-right: 4px solid #444; border-radius: 8px; margin-bottom: 10px; padding: 15px; display: flex; flex-direction: column; gap: 10px; transition: 0.2s; cursor: pointer; position: relative; overflow: hidden; }
         .sub-card-header { display: flex; align-items: center; justify-content: space-between; width: 100%; }
         .sub-card:hover { background: #2a2a2a; }
         .sub-card.active { background: #2b2535; border-right-color: var(--primary); box-shadow: 0 4px 15px rgba(0,0,0,0.3); transform: scale(1.01); }
-        .sub-card.is-hidden-seg { opacity: 0.5; background: #2a1a1a; border-right-color: #d32f2f; }
         
         .sub-time { font-size: 0.75rem; color: #666; margin-left: 10px; min-width: 50px; text-align: left; font-family: monospace; }
         .sub-text-content { flex: 1; font-size: 1rem; color: #ddd; line-height: 1.6; }
@@ -80,7 +79,7 @@
         .sub-card:hover .card-actions, .sub-card.active .card-actions { opacity: 1; }
         .mini-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
         .mini-btn:hover { background: var(--primary); }
-        .mini-btn.eye-btn.off { background: #522; color: #f88; }
+        .mini-btn.play-btn:hover { background: #00C853; }
 
         /* استایل ویرایشگر درجا */
         .inline-editor-container { width: 100%; display: flex; flex-direction: column; gap: 8px; animation: fadeIn 0.2s; margin-top: 5px; cursor: default; }
@@ -93,7 +92,6 @@
         .btn-exp { background: var(--primary); color: #fff; border: none; padding: 10px 25px; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; font-family: inherit; }
         .btn-exp:active { transform: scale(0.95); }
         
-        /* استایل‌های پنل‌ها */
         .row { margin-bottom: 20px; }
         label { display: block; margin-bottom: 8px; color: #ccc; font-size: 0.9rem; }
         input[type=range] { width: 100%; accent-color: var(--primary); height: 6px; cursor: pointer; border-radius:3px; }
@@ -292,31 +290,23 @@
         const btnId = 'btn-' + toolName;
         const section = document.getElementById(sectionId);
         
-        // منطق باز و بسته شدن
-        // اگر پنل باز است و کاربر دوباره روی همان دکمه کلیک کرد -> بستن
-        // اگر پنل بسته است -> باز کردن
-        // اگر پنل باز است و کاربر روی دکمه دیگری کلیک کرد -> سوییچ کردن
-        
         const isAlreadyOpen = toolsContainer.classList.contains('open') && section.style.display === 'block';
 
         if (isAlreadyOpen) {
             toolsContainer.classList.remove('open');
             setTimeout(() => { section.style.display = 'none'; }, 200);
         } else {
-            // مخفی کردن قبلی‌ها
             document.querySelectorAll('.tool-section').forEach(s => s.style.display = 'none');
             
-            // فعال کردن جدید
             document.getElementById(btnId).classList.add('active-tool');
             section.style.display = 'block';
             section.classList.add('active-section');
             
-            // اگر لیست متن است، کانتینر باید کامل باز شود (بدون محدودیت ارتفاع)
             if(toolName === 'text') {
                 toolsContainer.style.maxHeight = 'none';
                 toolsContainer.classList.add('open');
             } else {
-                toolsContainer.style.maxHeight = ''; // ریست به CSS
+                toolsContainer.style.maxHeight = ''; 
                 toolsContainer.classList.add('open');
             }
         }
@@ -392,10 +382,18 @@
                 const actionsDiv = document.createElement('div');
                 actionsDiv.className = 'card-actions';
                 
-                const eyeBtn = document.createElement('button');
-                eyeBtn.className = 'mini-btn eye-btn' + (s.isHidden ? ' off' : '');
-                eyeBtn.innerHTML = s.isHidden ? '<i class="fa-solid fa-eye-slash"></i>' : '<i class="fa-solid fa-eye"></i>';
-                eyeBtn.onclick = (e) => { e.stopPropagation(); toggleVisibility(i, eyeBtn, card); };
+                // دکمه Play به جای Eye
+                const playBtn = document.createElement('button');
+                playBtn.className = 'mini-btn play-btn';
+                playBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
+                playBtn.onclick = (e) => { 
+                    e.stopPropagation(); 
+                    manualOverride = true; 
+                    selectSegment(i); 
+                    v.currentTime = s.start + 0.01;
+                    v.play(); 
+                    togglePlayIcon(true);
+                };
                 
                 const editBtn = document.createElement('button');
                 editBtn.className = 'mini-btn';
@@ -405,7 +403,7 @@
                     startInlineEdit(i);
                 };
 
-                actionsDiv.appendChild(eyeBtn);
+                actionsDiv.appendChild(playBtn);
                 actionsDiv.appendChild(editBtn);
                 
                 header.appendChild(timeDiv);
@@ -475,15 +473,6 @@
         curSeg = i; 
     }
 
-    function toggleVisibility(index, btn, card) { 
-        state.segs[index].isHidden = !state.segs[index].isHidden; 
-        const isH = state.segs[index].isHidden; 
-        btn.innerHTML = isH ? '<i class="fa-solid fa-eye-slash"></i>' : '<i class="fa-solid fa-eye"></i>'; 
-        btn.className = 'mini-btn eye-btn' + (isH ? ' off' : ''); 
-        if(isH) card.classList.add('is-hidden-seg'); else card.classList.remove('is-hidden-seg'); 
-        if(curSeg === index) showTextOverlay(curSeg); 
-    }
-
     function showTextOverlay(index) { 
         if(index === -1) { tEl.style.opacity = 0; return; } 
         const seg = state.segs[index];