Update index.html

index.html

@@ -464,25 +464,22 @@
             align-items: center;
             justify-content: center;
             flex-direction: column;
-            gap: 1.5rem;
-            min-height: 200px; /* Default height for empty/loading state */
+            min-height: 200px;
             position: relative;
             box-sizing: border-box;
-            padding: 2rem; /* Default padding for status/loading */
-            background-color: var(--input-bg); /* Default background for empty/loading */
+            padding: 2rem;
+            background-color: var(--input-bg);
             border-radius: var(--radius-card);
             border: 2px dashed var(--panel-border);
             box-shadow: var(--shadow-subtle) inset;
-            transition: var(--transition-smooth), border-color 0.5s, box-shadow 0.5s;
+            transition: var(--transition-smooth);
         }
-        /* When output section has content (the player), remove its own styling and apply new */
         #output-section.has-content {
-            background-color: var(--panel-bg); /* Solid white background like the image */
-            border-style: solid; /* Solid border for active state */
-            border-color: var(--panel-border); /* Standard border */
-            box-shadow: var(--shadow-medium); /* Nicer shadow for active state */
-            padding: 0; /* No padding on the main output-section, inner div handles it */
-            min-height: auto; /* Shrink to fit player content */
+            background-color: var(--panel-bg);
+            border: 1px solid var(--panel-border);
+            box-shadow: var(--shadow-medium);
+            padding: 0;
+            min-height: auto;
         }
         #output-section.has-content #status-message,
         #output-section.has-content #loading-animation-wrapper {
@@ -500,7 +497,6 @@
             justify-content: center;
             gap: 1.8rem;
             width: 100%;
-            min-height: 150px;
         }
         .orbital-loader {
             width: 110px;
@@ -556,50 +552,25 @@
 
         /* --- Custom Audio Player Styles --- */
         #audio-player-content {
-            display: none; /* Controlled by JS */
+            display: none;
             width: 100%;
-            padding: 1.5rem; /* Padding applied here, inside the output-section card */
+            padding: 1.5rem;
             box-sizing: border-box;
             flex-direction: column;
             gap: 1.2rem;
         }
 
-        .audio-player-header-simple {
-            display: flex;
-            align-items: center;
-            justify-content: flex-end; /* Align to right for RTL */
-            gap: 0.5rem;
-            padding-bottom: 0.8rem; /* No border-bottom as in image */
-            margin-right: auto; /* Push content to left */
-            width: 100%; /* Take full width */
-            color: var(--text-secondary); /* Grey color for header text */
-            font-size: 0.95em; /* Slightly smaller text */
-            font-weight: 500;
-        }
-        .audio-player-header-simple span {
-            order: -1; /* Puts text first in RTL order */
-            margin-left: 0.5rem; /* Space between text and icon */
-        }
-        .audio-player-header-simple .icon {
-            width: 18px; /* Smaller icons */
-            height: 18px;
-            fill: currentColor;
-            stroke: currentColor;
-            stroke-width: 2;
-            vertical-align: middle;
-        }
-
         .audio-waveform-container {
             display: flex;
             align-items: center;
-            gap: 0.8rem;
+            gap: 1rem;
             width: 100%;
-            margin-bottom: 1rem; /* Space between waveform and controls */
+            margin-bottom: 1rem;
         }
         .audio-time {
             font-size: 0.9em;
             color: var(--text-secondary);
-            min-width: 40px; /* Ensure consistent width */
+            min-width: 40px;
             text-align: center;
             font-variant-numeric: tabular-nums;
         }
@@ -607,13 +578,10 @@
         /* Waveform Display */
         .audio-waveform {
             flex-grow: 1;
-            height: 60px; /* Fixed height for the waveform area */
+            height: 60px;
             position: relative;
-            overflow: hidden; /* To clip bars */
-            border-radius: 4px; /* Slight radius on the waveform area */
-            background-color: transparent; /* No background color here */
+            overflow: hidden;
         }
-
         .audio-waveform-bars-wrapper {
             position: absolute;
             top: 0;
@@ -621,140 +589,130 @@
             width: 100%;
             height: 100%;
             display: flex;
-            justify-content: space-between; /* Distribute bars */
-            align-items: center; /* Center bars vertically */
-            z-index: 0; /* Under the dashed line */
+            justify-content: space-between;
+            align-items: center;
+            z-index: 0;
         }
-
         .waveform-bar {
-            width: 4px; /* Width of each bar */
-            min-width: 2px; /* Ensure small bars are still visible */
-            background-color: var(--waveform-color-inactive); /* Default grey color */
-            border-radius: 2px; /* Rounded ends for bars */
-            transition: background-color 0.1s linear; /* Smooth color change */
-            flex-shrink: 0; /* Don't shrink bars */
-            margin: 0 1px; /* Small gap between bars */
-            transform-origin: center; /* For scaling/positioning */
+            width: 3px;
+            background-color: var(--waveform-color-inactive);
+            border-radius: 2px;
+            flex-shrink: 0;
+            margin: 0 1px;
         }
-
         .audio-waveform-dashed-line {
             position: absolute;
             top: 50%;
             left: 0;
             width: 100%;
-            height: 1px; /* Height of the dashed line itself */
+            height: 1px;
             background-image: linear-gradient(to right, var(--waveform-dashed-line-color) 33%, transparent 0%);
             background-position: center;
-            background-size: 10px 1px; /* Dash length + gap */
+            background-size: 10px 1px;
             transform: translateY(-50%);
-            z-index: 1; /* Above the bars */
+            z-index: 1;
         }
 
         /* Audio Controls */
         .audio-controls-group {
             display: flex;
-            justify-content: center; /* Center the main controls */
+            justify-content: center;
             align-items: center;
-            gap: 1.5rem; /* Space between buttons */
-            margin-bottom: 1rem; /* Space between main controls and bottom controls */
+            gap: 1.5rem;
+            margin-bottom: 1rem;
         }
-
-        .audio-skip-btn {
+        .audio-skip-btn, .audio-play-pause-btn-large, .audio-volume-btn, .audio-speed-btn {
             background: none;
             border: none;
             cursor: pointer;
             padding: 8px;
-            color: var(--text-secondary); /* Grey color */
-            transition: transform 0.2s;
+            transition: transform 0.2s, opacity 0.2s;
         }
-        .audio-skip-btn svg {
-            width: 24px;
-            height: 24px;
-            fill: currentColor;
+        .audio-skip-btn, .audio-play-pause-btn-large, .audio-volume-btn {
+            color: var(--text-secondary);
         }
-        .audio-skip-btn:hover {
-            transform: scale(1.1);
+        .audio-skip-btn:hover, .audio-play-pause-btn-large:hover, .audio-volume-btn:hover {
+            opacity: 0.8;
         }
-        .audio-skip-btn:active {
+        .audio-skip-btn:active, .audio-play-pause-btn-large:active, .audio-volume-btn:active {
             transform: scale(0.9);
         }
-
-        .audio-play-pause-btn-large {
-            background: none;
-            border: none;
-            cursor: pointer;
-            padding: 0; /* No padding inside for icon sizing */
-            width: 60px; /* Larger circular area */
-            height: 60px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--text-secondary); /* Grey color */
-            transition: transform 0.2s;
-            /* No background effect on hover as per image */
-        }
-        .audio-play-pause-btn-large:hover {
-            transform: scale(1.05);
+        .audio-skip-btn svg {
+            width: 28px;
+            height: 28px;
+            fill: currentColor;
         }
-        .audio-play-pause-btn-large:active {
-            transform: scale(0.95);
+        .audio-play-pause-btn-large {
+            padding: 0;
+            width: 50px;
+            height: 50px;
         }
         .audio-play-pause-btn-large svg {
-            width: 36px; /* Icon size */
-            height: 36px;
+            width: 38px;
+            height: 38px;
             fill: currentColor;
         }
 
-        .audio-bottom-controls {
+        .audio-utility-controls {
             display: flex;
             align-items: center;
-            justify-content: flex-start; /* Volume/Speed on the left, nothing on the right */
+            justify-content: space-between;
             width: 100%;
-            gap: 1rem; /* Space between volume and speed button */
-        }
-
-        .audio-volume-btn {
-            background: none;
-            border: none;
-            cursor: pointer;
-            padding: 8px;
-            color: var(--text-secondary);
-            transition: transform 0.2s;
         }
         .audio-volume-btn svg {
             width: 24px;
             height: 24px;
             fill: currentColor;
         }
-        .audio-volume-btn:hover {
-            transform: scale(1.1);
-        }
-        .audio-volume-btn:active {
-            transform: scale(0.9);
-        }
-
         .audio-speed-btn {
             font-family: var(--app-font);
             font-size: 0.9em;
             font-weight: 600;
-            background-color: var(--panel-bg); /* Match the image's "1x" button background */
-            border: 1px solid var(--panel-border); /* Match the image's border */
-            padding: 6px 12px;
+            background-color: var(--panel-bg);
+            border: 1px solid var(--panel-border);
             border-radius: 8px;
             min-width: 40px;
             text-align: center;
             color: var(--text-primary);
-            cursor: pointer;
-            transition: background-color 0.2s, border-color 0.2s;
-            box-shadow: var(--shadow-subtle); /* Add subtle shadow */
+            box-shadow: var(--shadow-subtle);
         }
         .audio-speed-btn:hover {
-            background-color: var(--input-bg); /* Slightly darker on hover */
+            background-color: var(--input-bg);
         }
-
+        
         /* Hide the default audio player */
         #hidden-audio-player { display: none !important; }
+
+        /* Responsive adjustments for mobile */
+        @media (max-width: 600px) {
+            .container {
+                width: 95%;
+            }
+            .main-content {
+                padding: 1.5rem;
+            }
+            .app-header h1 {
+                font-size: 1.8em;
+            }
+            #audio-player-content {
+                padding: 1rem;
+            }
+            .audio-controls-group {
+                gap: 1rem; /* Reduce gap between play/skip */
+            }
+            .audio-skip-btn svg {
+                width: 24px;
+                height: 24px;
+            }
+            .audio-play-pause-btn-large {
+                width: 44px;
+                height: 44px;
+            }
+            .audio-play-pause-btn-large svg {
+                width: 32px;
+                height: 32px;
+            }
+        }
     </style>
 </head>
 <body>
@@ -825,12 +783,6 @@
 
                 <!-- Custom Audio Player Structure -->
                 <div id="audio-player-content">
-                    <div class="audio-player-header-simple">
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path></svg>
-                        <span>فایل صوتی</span>
-                    </div>
-
                     <div class="audio-waveform-container">
                         <span class="audio-time audio-current-time">0:00</span>
                         <div class="audio-waveform">
@@ -853,7 +805,7 @@
                         </button>
                     </div>
 
-                    <div class="audio-bottom-controls">
+                    <div class="audio-utility-controls">
                         <button class="audio-volume-btn">
                             <svg viewBox="0 0 24 24" class="volume-high-icon"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></svg>
                             <svg viewBox="0 0 24 24" class="volume-mute-icon" style="display:none;"><path d="M7 9v6h4l5 5V4L11 9H7zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zM19 12c0 .94-.23 1.82-.68 2.6L19 14.88c.45-.88.7-1.88.7-2.88 0-4.01-2.99-7.14-7-8.05v2.06c2.89.86 5 3.54 5 6.71zM4.55 4L2 6.55 9.45 14H7v6h4l5 5V14.55l4.05 4.05L22 18 12 8 4.55 4z"></path></svg>
@@ -965,7 +917,7 @@
 
             // --- Custom Audio Player Elements ---
             const hiddenAudioPlayer = document.getElementById('hidden-audio-player');
-            const audioPlayerContent = document.getElementById('audio-player-content'); // Main player content wrapper
+            const audioPlayerContent = document.getElementById('audio-player-content');
             const audioCurrentTimeSpan = audioPlayerContent.querySelector('.audio-current-time');
             const audioTotalTimeSpan = audioPlayerContent.querySelector('.audio-total-time');
             const audioWaveformBarsWrapper = audioPlayerContent.querySelector('.audio-waveform-bars-wrapper');
@@ -980,8 +932,7 @@
             const speedBtn = audioPlayerContent.querySelector('.audio-speed-btn');
 
             let currentPlaybackSpeedIndex = 0;
-            const playbackSpeeds = [1.0, 1.25, 1.5, 1.75, 2.0, 0.75, 0.5]; // Common speeds
-            const NUM_WAVEFORM_BARS = 60; // Number of bars to display for the waveform
+            const playbackSpeeds = [1.0, 1.25, 1.5, 0.75];
 
             // Character Counter
             const charCountSpan = document.getElementById('char-count');
@@ -1006,7 +957,6 @@
 
             function getImageUrl(speaker, index, size = 'thumb') {
                 const gender = speaker.name.includes('(مرد)') ? 'men' : 'women';
-                // A more deterministic way to get images while still being "random-like" for examples
                 const imageSeed = speaker.id.charCodeAt(0) + speaker.id.length + index;
                 const imageIndex = (imageSeed * 7 + 5) % 100;
                 let portraitSizePath = 'thumb/';
@@ -1114,22 +1064,27 @@
 
             // --- Custom Audio Player Functionality ---
 
-            // Function to generate waveform bars
+            // Function to generate waveform bars dynamically based on container width
             function generateWaveformBars() {
-                audioWaveformBarsWrapper.innerHTML = ''; // Clear existing bars
-                const maxBarHeight = 100; // Percentage of total waveform height
-                const minBarHeight = 10;
-                for (let i = 0; i < NUM_WAVEFORM_BARS; i++) {
+                audioWaveformBarsWrapper.innerHTML = '';
+                const containerWidth = audioWaveformBarsWrapper.offsetWidth;
+                if(containerWidth === 0) return; // Don't generate if not visible
+
+                const barWidth = 3; // From CSS
+                const barMargin = 1; // From CSS
+                const totalBarWidth = barWidth + (barMargin * 2);
+                const numBars = Math.floor(containerWidth / totalBarWidth);
+
+                for (let i = 0; i < numBars; i++) {
                     const bar = document.createElement('div');
                     bar.classList.add('waveform-bar');
                     // Simple randomized heights for visual variety
-                    const height = Math.random() * (maxBarHeight - minBarHeight) + minBarHeight;
+                    const height = Math.random() * 90 + 10; // Height between 10% and 100%
                     bar.style.height = `${height}%`;
                     audioWaveformBarsWrapper.appendChild(bar);
                 }
             }
 
-            // Helper function to format time (e.g., 0:06)
             function formatTime(seconds) {
                 if (isNaN(seconds) || seconds < 0) return '0:00';
                 const minutes = Math.floor(seconds / 60);
@@ -1137,7 +1092,7 @@
                 return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
             }
 
-            // Update custom player UI (play/pause icon, time, progress)
+            // Update custom player UI
             function updatePlayerUI() {
                 if (hiddenAudioPlayer.paused || hiddenAudioPlayer.ended) {
                     playIcon.style.display = 'block';
@@ -1149,16 +1104,16 @@
 
                 const currentTime = hiddenAudioPlayer.currentTime;
                 const duration = hiddenAudioPlayer.duration;
-
                 audioCurrentTimeSpan.textContent = formatTime(currentTime);
 
                 if (isFinite(duration) && duration > 0) {
                     audioTotalTimeSpan.textContent = formatTime(duration);
                     const progressRatio = currentTime / duration;
-                    const barsToColor = Math.floor(progressRatio * NUM_WAVEFORM_BARS);
-
                     const bars = audioWaveformBarsWrapper.children;
-                    for (let i = 0; i < bars.length; i++) {
+                    const numBars = bars.length;
+                    const barsToColor = Math.floor(progressRatio * numBars);
+
+                    for (let i = 0; i < numBars; i++) {
                         if (i < barsToColor) {
                             bars[i].style.backgroundColor = 'var(--waveform-color-active)';
                         } else {
@@ -1167,7 +1122,6 @@
                     }
                 } else {
                     audioTotalTimeSpan.textContent = '0:00';
-                    // Reset all bars to inactive color
                     const bars = audioWaveformBarsWrapper.children;
                     for (let i = 0; i < bars.length; i++) {
                         bars[i].style.backgroundColor = 'var(--waveform-color-inactive)';
@@ -1175,7 +1129,6 @@
                 }
             }
 
-            // Event Listeners for Custom Player Controls
             playPauseBtn.addEventListener('click', () => {
                 if (hiddenAudioPlayer.paused) {
                     hiddenAudioPlayer.play();
@@ -1183,27 +1136,17 @@
                     hiddenAudioPlayer.pause();
                 }
             });
-
             skipBackwardBtn.addEventListener('click', () => {
-                hiddenAudioPlayer.currentTime = Math.max(0, hiddenAudioPlayer.currentTime - 10); // Skip 10 seconds back
+                hiddenAudioPlayer.currentTime = Math.max(0, hiddenAudioPlayer.currentTime - 5); // Skip 5 seconds back
             });
-
             skipForwardBtn.addEventListener('click', () => {
-                hiddenAudioPlayer.currentTime = Math.min(hiddenAudioPlayer.duration, hiddenAudioPlayer.currentTime + 10); // Skip 10 seconds forward
+                hiddenAudioPlayer.currentTime = Math.min(hiddenAudioPlayer.duration, hiddenAudioPlayer.currentTime + 5); // Skip 5 seconds forward
             });
-
             volumeBtn.addEventListener('click', () => {
-                if (hiddenAudioPlayer.muted) {
-                    hiddenAudioPlayer.muted = false;
-                    volumeHighIcon.style.display = 'block';
-                    volumeMuteIcon.style.display = 'none';
-                } else {
-                    hiddenAudioPlayer.muted = true;
-                    volumeHighIcon.style.display = 'none';
-                    volumeMuteIcon.style.display = 'block';
-                }
+                hiddenAudioPlayer.muted = !hiddenAudioPlayer.muted;
+                volumeHighIcon.style.display = hiddenAudioPlayer.muted ? 'none' : 'block';
+                volumeMuteIcon.style.display = hiddenAudioPlayer.muted ? 'block' : 'none';
             });
-
             speedBtn.addEventListener('click', () => {
                 currentPlaybackSpeedIndex = (currentPlaybackSpeedIndex + 1) % playbackSpeeds.length;
                 const newSpeed = playbackSpeeds[currentPlaybackSpeedIndex];
@@ -1211,24 +1154,35 @@
                 speedBtn.textContent = `${newSpeed}x`;
             });
 
-            // Listen to hidden audio player events to update UI
             hiddenAudioPlayer.addEventListener('timeupdate', updatePlayerUI);
             hiddenAudioPlayer.addEventListener('loadedmetadata', () => {
-                generateWaveformBars(); // Generate bars once metadata is loaded
-                updatePlayerUI(); // Update UI with total duration and initial state
+                generateWaveformBars();
+                updatePlayerUI();
             });
             hiddenAudioPlayer.addEventListener('play', updatePlayerUI);
             hiddenAudioPlayer.addEventListener('pause', updatePlayerUI);
             hiddenAudioPlayer.addEventListener('ended', () => {
-                hiddenAudioPlayer.currentTime = 0; // Reset to start
+                hiddenAudioPlayer.currentTime = 0;
                 updatePlayerUI();
             });
 
+            let resizeTimeout;
+            window.addEventListener('resize', () => {
+                clearTimeout(resizeTimeout);
+                resizeTimeout = setTimeout(() => {
+                    if (outputSection.classList.contains('has-content')) {
+                        generateWaveformBars();
+                        updatePlayerUI();
+                    }
+                }, 250);
+            });
+
+
             // --- State Management Functions ---
             function showLoadingState() {
-                audioPlayerContent.style.display = 'none'; // Hide custom player
-                outputSection.classList.remove('has-content'); // Remove has-content class to revert output-section styling
-                statusMessage.style.display = 'none';
+                audioPlayerContent.style.display = 'none';
+                outputSection.classList.remove('has-content');
+                statusMessage.style.display = 'block'; // Show status temporarily if needed
                 loadingAnimationWrapper.style.display = 'flex';
                 generateBtn.disabled = true;
                 generateBtn.innerHTML = `
@@ -1244,18 +1198,16 @@
                 loadingAnimationWrapper.style.display = 'none';
                 if (isSuccess) {
                     statusMessage.style.display = 'none';
-                    audioPlayerContent.style.display = 'flex'; // Show custom player content
-                    outputSection.classList.add('has-content'); // Add class to output section parent
-
-                    updatePlayerUI(); // Update UI with initial playback state (paused, time 0)
-                    hiddenAudioPlayer.play(); // Auto-play the audio
+                    audioPlayerContent.style.display = 'flex';
+                    outputSection.classList.add('has-content');
+                    hiddenAudioPlayer.play();
                 } else {
                     statusMessage.textContent = message || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.';
                     statusMessage.style.display = 'block';
-                    audioPlayerContent.style.display = 'none'; // Hide custom player content
-                    outputSection.classList.remove('has-content'); // Remove class to revert output-section styling
-                    hiddenAudioPlayer.pause(); // Stop any potential audio
-                    hiddenAudioPlayer.src = ''; // Clear audio source
+                    audioPlayerContent.style.display = 'none';
+                    outputSection.classList.remove('has-content');
+                    hiddenAudioPlayer.pause();
+                    hiddenAudioPlayer.src = '';
                 }
                 generateBtn.disabled = false;
                 generateBtn.innerHTML = '✨ تولید صدا با آلفا';
@@ -1359,12 +1311,10 @@
             // Initial setup
             updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value || speakers[0].id);
             form.addEventListener('submit', generateAudio);
-
-            // Hide custom audio player and show status message on load
-            audioPlayerContent.style.display = 'none';
             statusMessage.style.display = 'block';
             loadingAnimationWrapper.style.display = 'none';
-            outputSection.classList.remove('has-content'); // Ensure initial state is clean
+            audioPlayerContent.style.display = 'none';
+            outputSection.classList.remove('has-content');
         });
     </script>
 </body>