Update index.html

index.html

@@ -38,6 +38,14 @@
             from { opacity: 0; transform: translateY(20px); }
             to { opacity: 1; transform: translateY(0); }
         }
+        @keyframes modalZoomIn {
+            from { opacity: 0; transform: scale(0.8) translateY(20px); }
+            to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+        @keyframes modalZoomOut {
+            from { opacity: 1; transform: scale(1) translateY(0); }
+            to { opacity: 0; transform: scale(0.8) translateY(20px); }
+        }
 
 
         body {
@@ -55,7 +63,7 @@
             display: flex;
             justify-content: center;
             align-items: flex-start;
-            overflow-x: hidden; /* Prevent horizontal scrollbar from animations */
+            overflow-x: hidden;
         }
 
         .container {
@@ -65,27 +73,27 @@
         }
 
         .app-header {
-            padding: 0.5rem 0 2.5rem 0; /* Reduced bottom padding */
+            padding: 0.5rem 0 2.5rem 0;
             text-align: center;
-            margin-bottom: 1.5rem; /* Reduced bottom margin */
+            margin-bottom: 1.5rem;
             animation: fadeInDown 0.8s 0.1s ease-out backwards;
         }
         .app-header h1 {
-            font-size: 2.1em; /* باز هم کوچکتر شد */
+            font-size: 2.1em;
             font-weight: 900;
-            margin:0 0 0.6rem 0; /* Reduced bottom margin */
+            margin:0 0 0.6rem 0;
             background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            letter-spacing: -0.5px; /* Adjusted spacing */
+            letter-spacing: -0.5px;
         }
         .app-header p {
-            font-size: 1em; /* باز هم کوچکتر شد */
+            font-size: 1em;
             color: var(--text-secondary);
             margin-top:0;
-            opacity: 0.85; /* Slightly more subtle */
+            opacity: 0.85;
             font-weight: 400;
-            line-height: 1.6; /* Adjusted line height */
+            line-height: 1.6;
         }
 
         .main-content {
@@ -109,7 +117,7 @@
              margin-bottom: 0;
         }
 
-        .info-tooltip-icon {
+        .info-icon { /* Renamed from info-tooltip-icon for clarity */
             display: inline-flex;
             align-items: center;
             justify-content: center;
@@ -126,49 +134,14 @@
             transition: var(--transition-smooth);
             user-select: none;
         }
-        .info-tooltip-icon:hover, .info-tooltip-icon:focus {
+        .info-icon:hover, .info-icon:focus {
             background-color: var(--accent-primary);
             color: white;
             border-color: var(--accent-primary);
             transform: scale(1.1);
             outline: none;
         }
-        .tooltip-text {
-            visibility: hidden;
-            width: 280px;
-            background-color: var(--text-primary);
-            color: #fff;
-            text-align: right;
-            border-radius: var(--radius-input);
-            padding: 10px 15px;
-            position: absolute;
-            z-index: 10;
-            bottom: 140%;
-            left: 50%;
-            transform: translateX(-50%) translateY(10px);
-            opacity: 0;
-            transition: opacity 0.3s, visibility 0.3s, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-            font-size: 0.88em;
-            font-weight: 400;
-            line-height: 1.6;
-            box-shadow: var(--shadow-medium);
-        }
-        .tooltip-text::after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            margin-left: -5px;
-            border-width: 5px;
-            border-style: solid;
-            border-color: var(--text-primary) transparent transparent transparent;
-        }
-        .info-tooltip-icon.active .tooltip-text {
-            visibility: visible;
-            opacity: 1;
-            transform: translateX(-50%) translateY(0);
-        }
-
+        /* Removed .tooltip-text and .info-tooltip-icon.active as it's now a modal */
 
         label {
             display: block;
@@ -273,34 +246,48 @@
         }
 
 
-        /* --- مودال گالری گویندگان --- */
-        #speaker-modal {
+        /* --- مودال عمومی --- */
+        .modal-overlay {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background-color: rgba(18, 24, 38, 0.7);
+            background-color: rgba(18, 24, 38, 0.6);
             backdrop-filter: blur(8px) saturate(150%);
-            display: none; align-items: center; justify-content: center;
+            display: none; /* Hidden by default */
+            align-items: center; justify-content: center;
             z-index: 1000; opacity: 0;
             transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
-        #speaker-modal.visible { display: flex; opacity: 1; }
-        .modal-content {
+        .modal-overlay.visible { display: flex; opacity: 1; }
+
+        .modal-dialog {
             background: var(--panel-bg);
             padding: 2rem;
             border-radius: var(--radius-card);
-            width: 90%; max-width: 700px;
-            max-height: 85vh; overflow-y: auto;
-            transform: scale(0.95) translateY(20px);
-            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s;
-            border: 1px solid var(--panel-border);
+            width: 90%;
             box-shadow: var(--shadow-strong);
-            opacity: 0;
+            border: 1px solid var(--panel-border);
+            opacity: 0; /* For animation */
+            animation-duration: 0.35s;
+            animation-fill-mode: forwards;
         }
-        #speaker-modal.visible .modal-content { transform: scale(1) translateY(0); opacity: 1;}
-        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--panel-border); }
+        .modal-overlay.visible .modal-dialog {
+            animation-name: modalZoomIn;
+        }
+        .modal-overlay.hiding .modal-dialog {
+            animation-name: modalZoomOut;
+        }
+
+
+        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--panel-border); }
         .modal-header h2 { margin: 0; font-size: 1.6em; font-weight: 800; color: var(--accent-primary);}
         .close-modal-btn { background: none; border: none; font-size: 2.5rem; cursor: pointer; color: var(--text-secondary); transition: var(--transition-smooth); line-height: 1; }
         .close-modal-btn:hover { color: var(--accent-primary); transform: rotate(90deg) scale(1.1); }
 
+
+        /* --- مودال گالری گویندگان (اختصاصی) --- */
+        #speaker-modal .modal-dialog { /* Target specific modal dialog */
+            max-width: 700px;
+            max-height: 85vh; overflow-y: auto;
+        }
         #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.2rem; }
         @media (min-width: 640px) { #speaker-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
         .speaker-card { cursor: pointer; transition: var(--transition-smooth); text-align: center; position: relative;}
@@ -317,7 +304,7 @@
         .speaker-card:hover .speaker-visual {
             transform: translateY(-5px) scale(1.06);
             box-shadow: var(--shadow-medium);
-            border-color: rgba(var(--accent-secondary-rgb), 0.3);
+            /* border-color: rgba(var(--accent-secondary-rgb), 0.3); */ /* Requires CSS var for RGB components */
         }
         .speaker-card input[type="radio"] { display: none; }
         .speaker-card img {
@@ -344,6 +331,30 @@
             font-weight: 700;
         }
 
+        /* --- مودال اطلاعات (اختصاصی) --- */
+        #info-modal .modal-dialog {
+            max-width: 480px; /* Smaller width for info */
+        }
+        #info-modal-content p {
+            font-size: 1em;
+            line-height: 1.7;
+            color: var(--text-secondary);
+            margin-bottom: 0.5rem;
+        }
+        #info-modal-content p strong {
+            color: var(--text-primary);
+            font-weight: 600;
+        }
+        #info-modal-content .range-info {
+            font-size: 0.9em;
+            color: var(--accent-primary);
+            font-weight: 500;
+            margin-top: 1rem;
+            display: block;
+            text-align: center;
+        }
+
+
         /* --- Slider & Button & Output --- */
         .slider-container { display: flex; align-items: center; gap: 1.2rem; }
         input[type="range"] {
@@ -582,8 +593,8 @@
                 <div class="form-group">
                     <div class="label-with-info">
                         <label for="temperature-slider">🌡️ میزان خلاقیت و نوآوری صدا</label>
-                        <div class="info-tooltip-icon" id="temp-info-icon" role="button" tabindex="0" aria-label="اطلاعات بیشتر">!
-                            <span class="tooltip-text" id="temp-tooltip-text">مقادیر بالاتر منجر به صدایی متنوع‌تر و گاهی غیرمنتظره‌تر می‌شود، در حالی که مقادیر پایین‌تر صدایی پایدارتر و قابل پیش‌بینی‌تر تولید می‌کنند. (محدوده: 0.1 تا 1.5)</span>
+                        <div class="info-icon" id="temp-info-icon" role="button" tabindex="0" aria-label="اطلاعات بیشتر">!
+                            <!-- Tooltip text removed, will be shown in modal -->
                         </div>
                     </div>
                     <div class="slider-container">
@@ -610,11 +621,12 @@
         </main>
     </div>
 
-    <div id="speaker-modal">
-        <div class="modal-content">
+    <!-- مودال گالری گویندگان -->
+    <div id="speaker-modal" class="modal-overlay">
+        <div class="modal-dialog">
             <div class="modal-header">
                 <h2>گالری گویندگان آلفا نوا</h2>
-                <button type="button" class="close-modal-btn" aria-label="بستن مودال">×</button>
+                <button type="button" class="close-modal-btn" data-modal-id="speaker-modal" aria-label="بستن مودال">×</button>
             </div>
             <div id="speaker-grid">
                 <!-- Speaker cards will be generated here by JS -->
@@ -622,6 +634,23 @@
         </div>
     </div>
 
+    <!-- مودال اطلاعات خلاقیت صدا -->
+    <div id="info-modal" class="modal-overlay">
+        <div class="modal-dialog">
+            <div class="modal-header">
+                <h2>🌡️ خلاقیت و نوآوری صدا</h2>
+                <button type="button" class="close-modal-btn" data-modal-id="info-modal" aria-label="بستن توضیحات">×</button>
+            </div>
+            <div id="info-modal-content">
+                <p>این تنظیم مشخص می‌کند که هوش مصنوعی تا چه حد در تولید صدا <strong>خلاقیت</strong> به خرج دهد.</p>
+                <p><strong>مقادیر بالاتر:</strong> منجر به صدایی متنوع‌تر، پویاتر و گاهی اوقات غیرمنتظره‌تر می‌شود. مناسب برای زمانی که به دنبال لحنی خاص و منحصربه‌فرد هستید.</p>
+                <p><strong>مقادیر پایین‌تر:</strong> صدایی پایدارتر، قابل پیش‌بینی‌تر و نزدیک‌تر به صدای استاندارد گوینده تولید می‌کند. مناسب برای خوانش متون رسمی یا زمانی که ثبات لحن اهمیت دارد.</p>
+                <span class="range-info">محدوده پیشنهادی: ۰.۱ (پایدار) تا ۱.۵ (بسیار خلاق)</span>
+            </div>
+        </div>
+    </div>
+
+
     <input type="hidden" id="selected_speaker_id_storage" value="Charon">
 
     <script>
@@ -678,27 +707,30 @@
             const loadingAnimationWrapper = document.getElementById('loading-animation-wrapper');
 
             const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage');
-            const speakerModal = document.getElementById('speaker-modal');
             const changeSpeakerBtn = document.getElementById('change-speaker-btn');
             const selectedSpeakerCard = document.getElementById('selected-speaker-card');
-            const closeModalBtn = document.querySelector('.close-modal-btn');
             const speakerGridInModal = document.getElementById('speaker-grid');
             const selectedSpeakerImgDisplay = document.getElementById('selected-speaker-img');
             const selectedSpeakerNameDisplay = document.getElementById('selected-speaker-name');
             const selectedSpeakerDescDisplay = document.getElementById('selected-speaker-desc');
+
+            // Modal Elements
+            const speakerModal = document.getElementById('speaker-modal');
+            const infoModal = document.getElementById('info-modal');
             const tempInfoIcon = document.getElementById('temp-info-icon');
 
+
             // Character Counter
             const charCountSpan = document.getElementById('char-count');
             const charMaxSpan = document.getElementById('char-max');
-            const MAX_CHARS = 50000; // تغییر به ۵۰,۰۰۰
-            charMaxSpan.textContent = MAX_CHARS.toLocaleString('fa-IR'); // نمایش عدد با جداکننده فارسی
+            const MAX_CHARS = 50000;
+            charMaxSpan.textContent = MAX_CHARS.toLocaleString('fa-IR');
 
             textInput.addEventListener('input', () => {
                 const currentLength = textInput.value.length;
                 charCountSpan.textContent = currentLength.toLocaleString('fa-IR');
                 if (currentLength > MAX_CHARS) {
-                    charCountSpan.style.color = 'var(--accent-secondary-hover)'; // یا رنگ هشدار
+                    charCountSpan.style.color = 'var(--accent-secondary-hover)';
                 } else {
                     charCountSpan.style.color = 'var(--accent-primary)';
                 }
@@ -714,7 +746,6 @@
                 const imageIndex = (index * 7 + speaker.id.length * 3 + 5) % 100;
                 let portraitSizePath = 'thumb/';
                 if (size === 'large') portraitSizePath = '';
-
                 return `https://randomuser.me/api/portraits/${portraitSizePath}${gender}/${imageIndex}.jpg`;
             }
 
@@ -735,7 +766,6 @@
                     cardLabel.className = 'speaker-card';
                     cardLabel.setAttribute('for', `modal-speaker-${speaker.id}`);
                     const isChecked = speaker.id === selectedSpeakerIdStorage.value ? 'checked' : '';
-
                     cardLabel.innerHTML = `
                         <input type="radio" name="modal_speaker_selection" value="${speaker.id}" id="modal-speaker-${speaker.id}" ${isChecked}>
                         <div class="speaker-visual">
@@ -743,64 +773,81 @@
                             <div class="speaker-name">${speaker.name}</div>
                         </div>
                     `;
-
                     cardLabel.addEventListener('click', (e) => {
                         if (e.target.name !== "modal_speaker_selection") {
                              const radio = cardLabel.querySelector('input[type="radio"]');
                              if(radio) radio.checked = true;
                         }
                         updateSelectedSpeakerDisplay(speaker.id);
-                        setTimeout(() => speakerModal.classList.remove('visible'), 200);
+                        hideModal(speakerModal);
                     });
-
                     speakerGridInModal.appendChild(cardLabel);
                 });
             }
 
-            function openSpeakerModal() {
-                createSpeakerCardsInModal();
-                speakerModal.classList.add('visible');
+            // --- Modal Management ---
+            function showModal(modalElement) {
+                modalElement.classList.add('visible');
+                // Focus first focusable element in modal
                 setTimeout(() => {
-                    const firstFocusable = speakerModal.querySelector('input[type="radio"]:checked, input[type="radio"], .close-modal-btn');
-                    if (firstFocusable) firstFocusable.focus();
-                    else closeModalBtn.focus();
-                }, 50);
+                     const firstFocusable = modalElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                     if (firstFocusable) firstFocusable.focus();
+                }, 50); // Allow transition to start
             }
 
-            changeSpeakerBtn.addEventListener('click', openSpeakerModal);
-            selectedSpeakerCard.addEventListener('click', openSpeakerModal);
+            function hideModal(modalElement) {
+                modalElement.classList.add('hiding'); // Add class for exit animation
+                modalElement.addEventListener('animationend', () => {
+                    modalElement.classList.remove('visible', 'hiding');
+                }, { once: true });
+            }
 
-            closeModalBtn.addEventListener('click', () => speakerModal.classList.remove('visible'));
-            speakerModal.addEventListener('click', (e) => {
-                if (e.target === speakerModal) {
-                    speakerModal.classList.remove('visible');
-                }
+            // Speaker Modal Listeners
+            changeSpeakerBtn.addEventListener('click', () => {
+                createSpeakerCardsInModal();
+                showModal(speakerModal);
             });
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape' && speakerModal.classList.contains('visible')) {
-                    speakerModal.classList.remove('visible');
-                }
+            selectedSpeakerCard.addEventListener('click', () => {
+                createSpeakerCardsInModal();
+                showModal(speakerModal);
             });
 
-            tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
-
-            tempInfoIcon.addEventListener('click', (e) => {
-                e.stopPropagation();
-                tempInfoIcon.classList.toggle('active');
-            });
-             tempInfoIcon.addEventListener('keydown', (e) => {
+            // Info Modal Listener
+            tempInfoIcon.addEventListener('click', () => showModal(infoModal));
+            tempInfoIcon.addEventListener('keydown', (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
-                    tempInfoIcon.classList.toggle('active');
+                    showModal(infoModal);
                 }
             });
-            document.addEventListener('click', (e) => {
-                if (!tempInfoIcon.contains(e.target) && tempInfoIcon.classList.contains('active')) {
-                    tempInfoIcon.classList.remove('active');
+
+
+            // General Modal Close Listeners (for all modals)
+            document.querySelectorAll('.modal-overlay').forEach(overlay => {
+                overlay.addEventListener('click', (e) => {
+                    if (e.target === overlay) { // Click on backdrop
+                        hideModal(overlay);
+                    }
+                });
+            });
+            document.querySelectorAll('.close-modal-btn').forEach(button => {
+                button.addEventListener('click', () => {
+                    const modalId = button.dataset.modalId;
+                    if (modalId) {
+                        hideModal(document.getElementById(modalId));
+                    }
+                });
+            });
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') {
+                    document.querySelectorAll('.modal-overlay.visible').forEach(hideModal);
                 }
             });
 
 
+            tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
+
+
             function showLoadingState() {
                 outputSection.classList.remove('has-content');
                 statusMessage.style.display = 'none';
@@ -874,7 +921,7 @@
 
                     let finalFilePath = null;
                     const startTime = Date.now();
-                    const timeoutDuration = 90000; // 90 ثانیه
+                    const timeoutDuration = 90000;
 
                     while (Date.now() - startTime < timeoutDuration) {
                         const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${sessionHash}`);