Update index.html

index.html

@@ -364,7 +364,10 @@
         .audio-player-wrap {
             background: white; border: 1.5px solid var(--border); border-radius: 16px;
             padding: 10px 14px; box-shadow: 0 4px 16px rgba(0,0,0,0.04);
-            display: flex; align-items: center; gap: 8px;
+            display: flex; flex-direction: column; gap: 10px;
+        }
+        .audio-player-row {
+            display: flex; align-items: center; gap: 8px; width: 100%;
         }
         .audio-label {
             display: flex; align-items: center; gap: 5px;
@@ -375,6 +378,7 @@
 
         /* ===== DOWNLOAD BUTTON ===== */
         .download-btn {
+            align-self: flex-start;
             flex-shrink: 0;
             display: flex; align-items: center; gap: 6px;
             padding: 8px 14px; border-radius: 12px; border: none;
@@ -592,13 +596,15 @@
                 </button>
             </div>
             <div class="audio-player-wrap">
-                <div class="audio-label">
-                    <i class="fa-solid fa-volume-high"></i>
-                    صدا
+                <div class="audio-player-row">
+                    <div class="audio-label">
+                        <i class="fa-solid fa-volume-high"></i>
+                        صدا
+                    </div>
+                    <audio id="audioPlayer" controls controlsList="nodownload">
+                        مرورگر شما از پخش صدا پشتیبانی نمی‌کند.
+                    </audio>
                 </div>
-                <audio id="audioPlayer" controls controlsList="nodownload">
-                    مرورگر شما از پخش صدا پشتیبانی نمی‌کند.
-                </audio>
                 <button class="download-btn" id="downloadBtn" title="دانلود صدا">
                     <div class="dl-icon"><i class="fa-solid fa-arrow-down"></i></div>
                     دانلود صدا
@@ -679,8 +685,28 @@
         const rtl = isRTL(langName) || langName === 'شناسایی خودکار';
         inputText.dir = rtl ? 'rtl' : 'ltr';
         inputText.style.textAlign = rtl ? 'right' : 'left';
+        if (langName === 'شناسایی خودکار') {
+            checkDynamicDirection();
+        }
     }
 
+    function checkDynamicDirection() {
+        if (sourceLang.value !== 'شناسایی خودکار') return;
+        const val = inputText.value;
+        const firstCharMatch = val.match(/\S/);
+        if (firstCharMatch) {
+            const rtlRegex = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/;
+            const isRtl = rtlRegex.test(firstCharMatch[0]);
+            inputText.dir = isRtl ? 'rtl' : 'ltr';
+            inputText.style.textAlign = isRtl ? 'right' : 'left';
+        } else {
+            inputText.dir = 'rtl';
+            inputText.style.textAlign = 'right';
+        }
+    }
+
+    inputText.addEventListener('input', checkDynamicDirection);
+
     function applyOutputDir(langName) {
         const rtl = isRTL(langName);
         outputText.dir = rtl ? 'rtl' : 'ltr';
@@ -733,6 +759,7 @@
     clearBtn.addEventListener('click', () => {
         inputText.value = '';
         inputText.focus();
+        checkDynamicDirection();
         outputSection.classList.remove('visible');
         setTimeout(() => { outputSection.style.display = 'none'; }, 450);
     });
@@ -797,10 +824,10 @@
 
                 if (result.audio_url) {
                     audioPlayer.src = result.audio_url + '?t=' + Date.now();
-                    audioPlayer.parentElement.style.display = 'flex';
+                    audioPlayer.parentElement.parentElement.style.display = 'flex';
                     audioPlayer.play().catch(() => {});
                 } else {
-                    audioPlayer.parentElement.style.display = 'none';
+                    audioPlayer.parentElement.parentElement.style.display = 'none';
                 }
 
                 outputSection.style.display = 'flex';