Refactor responsive styles, enhance layout structure, and integrate text editor functionality

web/index.html

@@ -45,32 +45,18 @@
         </header>
         
         <main>
-            <div class="input-section">
+            <div class="help-icon" title="Tips">
-                <div class="help-icon" title="Tips">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm2-1.645A3.502 3.502 0 0012 6.5a3.501 3.501 0 00-3.433 2.813l1.962.393A1.5 1.5 0 1112 11.5a1 1 0 00-1 1V14h2v-.645z" fill="currentColor"/>
-                        <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm2-1.645A3.502 3.502 0 0012 6.5a3.501 3.501 0 00-3.433 2.813l1.962.393A1.5 1.5 0 1112 11.5a1 1 0 00-1 1V14h2v-.645z" fill="currentColor"/>
+                </svg>
-                    </svg>
+                <div class="tooltip-content">
-                    <div class="tooltip-content">
+                    <h4>Tips</h4>
-                        <h4>Tips</h4>
+                    <ul>
-                        <ul>
+                        <li>Use <code><<>></code> to add an intentional break between chunks</li>
-                            <li>Use <code><<>></code> to add an intentional break between chunks</li>
+                    </ul>
-                        </ul>
-                    </div>
-                </div>
-                <textarea
-                    id="text-input"
-                    placeholder="Enter text to convert to speech..."
-                ></textarea>
-                <div class="text-controls">
-                    <input type="file" id="file-input" accept=".txt" style="display: none;">
-                    <button id="upload-btn" class="clear-btn">
-                        Upload Text
-                    </button>
-                    <button id="clear-btn" class="clear-btn">
-                        Clear Text
-                    </button>
                 </div>
             </div>
+            <div id="text-editor"></div>
             <div class="controls">
                 <div class="voice-select-container">
                     <input 
@@ -90,17 +76,6 @@
                     </div>
                 </div>
                 <div class="options">
-                    <div class="option-group">
-                        <label>
-                            <input type="checkbox" id="autoplay-toggle" checked>
-                            Auto-play
-                        </label>
-                        <select id="format-select" class="format-select">
-                            <option value="mp3">MP3</option>
-                            <option value="wav">WAV</option>
-                            <option value="pcm">PCM</option>
-                        </select>
-                    </div>
                     <div class="speed-control">
                         <label for="speed-slider">Speed: <span id="speed-value">1.0</span>x</label>
                         <input type="range" id="speed-slider" min="0.1" max="4" step="0.1" value="1.0">
@@ -111,34 +86,44 @@
                         <span class="btn-text">Generate Speech</span>
                         <span class="loader"></span>
                     </button>
+                    <div class="generation-options">
+                        <label>
+                            <input type="checkbox" id="autoplay-toggle" checked>
+                            Auto-play
+                        </label>
+                        <select id="format-select" class="format-select">
+                            <option value="mp3">MP3</option>
+                            <option value="wav">WAV</option>
+                            <option value="pcm">PCM</option>
+                        </select>
+                    </div>
                     <button id="cancel-btn" class="cancel-btn" style="display: none;">
                         Cancel
                     </button>
                 </div>
                 <div id="status" class="status"></div>
-                <div class="audio-controls">
+            </div>
-                    <div class="player-container">
+            <div class="player-container">
-                        <div class="player-controls">
+                <div class="player-controls">
-                            <button id="play-pause-btn" class="player-btn">Play</button>
+                    <button id="play-pause-btn" class="player-btn">Play</button>
-                            <input type="range" id="seek-slider" class="seek-slider" min="0" max="100" value="0">
+                    <input type="range" id="seek-slider" class="seek-slider" min="0" max="100" value="0">
-                            <div class="volume-control">
+                    <div class="volume-control">
-                                <svg class="volume-icon" viewBox="0 0 24 24" width="20" height="20">
+                        <svg class="volume-icon" viewBox="0 0 24 24" width="20" height="20">
-                                    <path fill="currentColor" d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"/>
+                            <path fill="currentColor" d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"/>
-                                </svg>
+                        </svg>
-                                <input type="range" id="volume-slider" class="volume-slider" min="0" max="100" value="100">
+                        <input type="range" id="volume-slider" class="volume-slider" min="0" max="100" value="100">
-                            </div>
-                            <span id="time-display" class="time-display">0:00</span>
-                        </div>
-                        <div id="wave-container" class="wave-container"></div>
                     </div>
-                    <div id="download-btn" class="download-button" style="display: none;">
+                    <span id="time-display" class="time-display">0:00</span>
-                        <div class="download-glow"></div>
+                </div>
-                        <div class="download-icon">
+                <div id="wave-container" class="wave-container"></div>
-                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <div class="download-placeholder"></div>
-                                <path d="M8 11L4 7h8l-4 4z" fill="currentColor"/>
+                <div id="download-btn" class="download-button">
-                                <path d="M8 3v8M4 14h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    <div class="download-glow"></div>
-                            </svg>
+                    <div class="download-icon">
-                        </div>
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                            <path d="M8 11L4 7h8l-4 4z" fill="currentColor"/>
+                            <path d="M8 3v8M4 14h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                        </svg>
                     </div>
                 </div>
             </div>

web/src/App.js

@@ -4,22 +4,19 @@ import PlayerState from './state/PlayerState.js';
 import PlayerControls from './components/PlayerControls.js';
 import VoiceSelector from './components/VoiceSelector.js';
 import WaveVisualizer from './components/WaveVisualizer.js';
+import TextEditor from './components/TextEditor.js';
 
 export class App {
     constructor() {
         this.elements = {
-            textInput: document.getElementById('text-input'),
             generateBtn: document.getElementById('generate-btn'),
             generateBtnText: document.querySelector('#generate-btn .btn-text'),
             generateBtnLoader: document.querySelector('#generate-btn .loader'),
             downloadBtn: document.getElementById('download-btn'),
-            fileInput: document.getElementById('file-input'),
-            uploadBtn: document.getElementById('upload-btn'),
             autoplayToggle: document.getElementById('autoplay-toggle'),
             formatSelect: document.getElementById('format-select'),
             status: document.getElementById('status'),
-            cancelBtn: document.getElementById('cancel-btn'),
+            cancelBtn: document.getElementById('cancel-btn')
-            clearBtn: document.getElementById('clear-btn')
         };
 
         this.initialize();
@@ -35,6 +32,16 @@ export class App {
         this.playerControls = new PlayerControls(this.audioService, this.playerState);
         this.voiceSelector = new VoiceSelector(this.voiceService);
         this.waveVisualizer = new WaveVisualizer(this.playerState);
+        
+        // Initialize text editor
+        const editorContainer = document.getElementById('text-editor');
+        this.textEditor = new TextEditor(editorContainer, {
+            linesPerPage: 20,
+            onTextChange: (text) => {
+                // Optional: Handle text changes here if needed
+                console.log('Text changed:', text);
+            }
+        });
 
         // Initialize voice selector
         const voicesLoaded = await this.voiceSelector.initialize();
@@ -59,44 +66,10 @@ export class App {
         this.elements.cancelBtn.addEventListener('click', () => {
             this.audioService.cancel();
             this.setGenerating(false);
-            this.elements.downloadBtn.style.display = 'none';
+            this.elements.downloadBtn.classList.remove('ready');
             this.showStatus('Generation cancelled', 'info');
         });
 
-        // Clear text button
-        this.elements.clearBtn.addEventListener('click', () => {
-            this.elements.textInput.value = '';
-            this.elements.textInput.focus();
-        });
-
-        // Upload button
-        this.elements.uploadBtn.addEventListener('click', () => {
-            this.elements.fileInput.click();
-        });
-
-        // File input change
-        this.elements.fileInput.addEventListener('change', async (event) => {
-            const file = event.target.files[0];
-            if (!file) return;
-
-            if (file.size > 1024 * 1024) { // 1MB limit
-                this.showStatus('File too large. Please choose a file under 1MB', 'error');
-                return;
-            }
-
-            try {
-                const text = await file.text();
-                this.elements.textInput.value = text;
-                this.showStatus('File loaded successfully', 'success');
-            } catch (error) {
-                console.error('Error reading file:', error);
-                this.showStatus('Error reading file', 'error');
-            }
-
-            // Clear the input so the same file can be loaded again
-            this.elements.fileInput.value = '';
-        });
-
         // Handle page unload
         window.addEventListener('beforeunload', () => {
             this.audioService.cleanup();
@@ -108,7 +81,7 @@ export class App {
     setupAudioEvents() {
         // Handle download button visibility
         this.audioService.addEventListener('downloadReady', () => {
-            this.elements.downloadBtn.style.display = 'flex';
+            this.elements.downloadBtn.classList.add('ready');
         });
 
         // Handle buffer errors
@@ -172,7 +145,7 @@ export class App {
     }
 
     validateInput() {
-        const text = this.elements.textInput.value.trim();
+        const text = this.textEditor.getText().trim();
         if (!text) {
             this.showStatus('Please enter some text', 'error');
             return false;
@@ -192,12 +165,12 @@ export class App {
             return;
         }
 
-        const text = this.elements.textInput.value.trim();
+        const text = this.textEditor.getText().trim();
         const voice = this.voiceService.getSelectedVoiceString();
         const speed = this.playerState.getState().speed;
 
         this.setGenerating(true);
-        this.elements.downloadBtn.style.display = 'none';
+        this.elements.downloadBtn.classList.remove('ready');
 
         // Just reset progress bar, don't do full cleanup
         this.waveVisualizer.updateProgress(0, 1);

web/src/components/TextEditor.js

@@ -0,0 +1,250 @@
+export default class TextEditor {
+    constructor(container, options = {}) {
+        this.options = {
+            charsPerPage: 500,  // Default to 500 chars per page
+            onTextChange: null,
+            ...options
+        };
+        
+        this.container = container;
+        this.currentPage = 1;
+        this.pages = [''];
+        this.charCount = 0;
+        this.fullText = '';
+        this.isTyping = false;
+        
+        this.setupDOM();
+        this.bindEvents();
+    }
+
+    setupDOM() {
+        this.container.innerHTML = `
+            <div class="text-editor">
+                <div class="editor-view">
+                    <div class="page-navigation">
+                        <div class="pagination">
+                            <button class="prev-btn">← Previous</button>
+                            <span class="page-info">Page 1 of 1</span>
+                            <button class="next-btn">Next →</button>
+                        </div>
+                    </div>
+                    <textarea
+                        class="page-content"
+                        placeholder="Enter text to convert to speech..."
+                    ></textarea>
+                    <div class="editor-footer">
+                        <div class="file-controls">
+                            <input type="file" class="file-input" accept=".txt" style="display: none;">
+                            <button class="upload-btn">Upload Text</button>
+                            <button class="clear-btn">Clear Text</button>
+                        </div>
+                        <div class="chars-per-page">
+                            <input
+                                type="number"
+                                class="chars-input"
+                                value="500"
+                                min="100"
+                                max="2000"
+                                title="Characters per page"
+                            >
+                            <span class="chars-label">chars/page</span>
+                            <button class="format-btn">Format Pages</button>
+                        </div>
+                        <div class="char-count">0 characters</div>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        // Cache DOM elements
+        this.elements = {
+            pageContent: this.container.querySelector('.page-content'),
+            prevBtn: this.container.querySelector('.prev-btn'),
+            nextBtn: this.container.querySelector('.next-btn'),
+            pageInfo: this.container.querySelector('.page-info'),
+            fileInput: this.container.querySelector('.file-input'),
+            uploadBtn: this.container.querySelector('.upload-btn'),
+            clearBtn: this.container.querySelector('.clear-btn'),
+            charCount: this.container.querySelector('.char-count'),
+            charsPerPage: this.container.querySelector('.chars-input'),
+            formatBtn: this.container.querySelector('.format-btn')
+        };
+
+        // Set initial chars per page value
+        this.elements.charsPerPage.value = this.options.charsPerPage;
+    }
+
+    bindEvents() {
+        // Handle page content changes
+        this.elements.pageContent.addEventListener('input', (e) => {
+            const newContent = e.target.value;
+            this.pages[this.currentPage - 1] = newContent;
+            
+            // Only handle empty pages, otherwise just update the text
+            if (!newContent.trim() && this.pages.length > 1) {
+                // Remove the empty page and adjust
+                this.pages.splice(this.currentPage - 1, 1);
+                this.currentPage = Math.min(this.currentPage, this.pages.length);
+                this.updatePageDisplay();
+            }
+            
+            // Update full text and char count
+            this.fullText = this.pages.join('\n');
+            this.updateCharCount();
+            
+            if (this.options.onTextChange) {
+                this.options.onTextChange(this.fullText);
+            }
+        });
+
+        // Navigation
+        this.elements.prevBtn.addEventListener('click', () => {
+            if (this.currentPage > 1) {
+                this.currentPage--;
+                this.updatePageDisplay();
+            }
+        });
+
+        this.elements.nextBtn.addEventListener('click', () => {
+            if (this.currentPage < this.pages.length) {
+                this.currentPage++;
+                this.updatePageDisplay();
+            }
+        });
+
+        // File upload
+        this.elements.uploadBtn.addEventListener('click', () => {
+            this.elements.fileInput.click();
+        });
+        
+        this.elements.fileInput.addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    this.setText(e.target.result);
+                    if (this.options.onTextChange) {
+                        this.options.onTextChange(this.getText());
+                    }
+                };
+                reader.readAsText(file);
+            }
+        });
+
+        // Clear text
+        this.elements.clearBtn.addEventListener('click', () => {
+            this.clear();
+            if (this.options.onTextChange) {
+                this.options.onTextChange('');
+            }
+        });
+
+        // Cache format button
+        this.elements.formatBtn = this.container.querySelector('.format-btn');
+
+        // Characters per page control - just update the value
+        this.elements.charsPerPage.addEventListener('change', (e) => {
+            const value = parseInt(e.target.value);
+            if (value >= 100 && value <= 2000) {
+                this.options.charsPerPage = value;
+            }
+        });
+
+        // Format pages button - trigger the split
+        this.elements.formatBtn.addEventListener('click', () => {
+            const value = parseInt(this.elements.charsPerPage.value);
+            if (value >= 100 && value <= 2000) {
+                this.options.charsPerPage = value;
+                this.splitIntoPages(this.fullText);
+            }
+        });
+    }
+
+    splitIntoPages(text) {
+        if (!text || !text.trim()) {
+            this.pages = [''];
+            this.fullText = '';
+            this.currentPage = 1;
+            this.updatePageDisplay();
+            this.updateCharCount();
+            return;
+        }
+
+        this.fullText = text;
+        const words = text.split(/\s+/);
+        this.pages = [];
+        let currentPage = '';
+        
+        for (let i = 0; i < words.length; i++) {
+            const word = words[i];
+            const potentialPage = currentPage + (currentPage ? ' ' : '') + word;
+            
+            if (potentialPage.length >= this.options.charsPerPage && currentPage) {
+                this.pages.push(currentPage);
+                currentPage = word;
+            } else {
+                currentPage = potentialPage;
+            }
+        }
+        
+        if (currentPage) {
+            this.pages.push(currentPage);
+        }
+        
+        if (this.pages.length === 0) {
+            this.pages = [''];
+            this.currentPage = 1;
+        } else {
+            // Keep current page in bounds
+            this.currentPage = Math.min(this.currentPage, this.pages.length);
+        }
+        
+        this.updatePageDisplay();
+        this.updateCharCount();
+    }
+
+    setText(text) {
+        // Just set the text without splitting into pages
+        this.fullText = text;
+        this.pages = [text];
+        this.currentPage = 1;
+        this.updatePageDisplay();
+        this.updateCharCount();
+    }
+
+    updatePageDisplay() {
+        this.elements.pageContent.value = this.pages[this.currentPage - 1] || '';
+        this.elements.pageInfo.textContent = `Page ${this.currentPage} of ${this.pages.length}`;
+        
+        // Update button states
+        this.elements.prevBtn.disabled = this.currentPage === 1;
+        this.elements.nextBtn.disabled = this.currentPage === this.pages.length;
+    }
+
+    updateCharCount() {
+        const totalChars = this.fullText.length;
+        this.elements.charCount.textContent = `${totalChars} characters`;
+    }
+
+    prevPage() {
+        if (this.currentPage > 1) {
+            this.currentPage--;
+            this.updatePageDisplay();
+        }
+    }
+
+    nextPage() {
+        if (this.currentPage < this.pages.length) {
+            this.currentPage++;
+            this.updatePageDisplay();
+        }
+    }
+
+    getText() {
+        return this.fullText;
+    }
+
+    clear() {
+        this.setText('');
+    }
+}

web/styles/forms.css

@@ -1,7 +1,184 @@
-.textarea-container {
+.text-editor {
-    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    overflow: hidden;
+}
+
+.editor-view {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-height: 0;
+}
+
+.page-content {
+    flex: 1;
     width: 100%;
-    height: 100%;
+    padding: 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    background: rgba(15, 23, 42, 0.3);
+    color: var(--text);
+    font-family: var(--font-family);
+    font-size: 1rem;
+    resize: none;
+    transition: border-color 0.2s ease;
+    min-height: 300px;
+}
+
+.page-content:focus {
+    outline: none;
+    border-color: var(--fg-color);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+}
+
+.page-navigation {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.25rem;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 0.5rem;
+    background: rgba(15, 23, 42, 0.3);
+    border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.page-navigation .pagination {
+    transform: scale(0.9);
+}
+
+.page-navigation .pagination button {
+    padding: 0.25rem 0.75rem;
+}
+
+.editor-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem 0;
+}
+
+.chars-per-page {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.format-btn {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-light);
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    width: auto;
+    font-size: 0.875rem;
+}
+
+.format-btn:hover {
+    background: rgba(99, 102, 241, 0.1);
+    border-color: var(--fg-color);
+    transform: none;
+    box-shadow: none;
+}
+
+.chars-input {
+    width: 70px;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--border);
+    border-radius: 0.25rem;
+    background: rgba(15, 23, 42, 0.3);
+    color: var(--text);
+    font-size: 0.875rem;
+    text-align: center;
+}
+
+.chars-input:focus {
+    outline: none;
+    border-color: var(--fg-color);
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+
+.chars-label {
+    color: var(--text-light);
+    font-size: 0.875rem;
+}
+
+.pagination {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.pagination button {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text);
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    width: auto;
+}
+
+.pagination button:hover:not(:disabled) {
+    background: rgba(99, 102, 241, 0.1);
+    border-color: var(--fg-color);
+    transform: none;
+    box-shadow: none;
+}
+
+.pagination button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.page-info {
+    color: var(--text-light);
+    font-size: 0.875rem;
+    min-width: 100px;
+    text-align: center;
+}
+
+.char-count {
+    color: var(--text-light);
+    font-size: 0.875rem;
+    min-width: 100px;
+    text-align: right;
+}
+
+.file-controls {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.upload-btn,
+.clear-btn {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-light);
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    width: auto;
+    font-size: 0.875rem;
+}
+
+.upload-btn:hover,
+.clear-btn:hover {
+    background: rgba(99, 102, 241, 0.1);
+    border-color: var(--fg-color);
+    transform: none;
+    box-shadow: none;
 }
 
 .help-icon {
@@ -33,6 +210,7 @@
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     z-index: 1000;
+    transition: visibility 0s linear 0.3s, opacity 0.3s ease;
 }
 
 .help-icon:hover .tooltip-content {
@@ -41,10 +219,6 @@
     transition: visibility 0s linear 0.2s, opacity 0.3s ease 0.2s;
 }
 
-.tooltip-content {
-    transition: visibility 0s linear 0.3s, opacity 0.3s ease;
-}
-
 .tooltip-content h4 {
     margin: 0 0 0.5rem 0;
     color: var(--text);
@@ -63,47 +237,137 @@
     font-family: monospace;
 }
 
-textarea {
+main {
+    display: grid;
+    grid-template-columns: 1fr 300px;
+    grid-template-rows: 1fr auto;
+    gap: 1.25rem;
+    height: auto;
+    min-height: calc(100vh - 3rem);
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem 1rem 2rem 1rem;
+    align-items: start;
+}
+
+.text-editor,
+.controls,
+.player-container {
+    margin-bottom: 0.5rem;
+}
+
+.generation-progress {
     width: 100%;
-    height: calc(100% - 50px);
+    height: 4px;
-    padding: 1rem;
+    background: rgba(99, 102, 241, 0.1);
+    border-radius: 2px;
+    margin: 0.75rem 0;
+    overflow: hidden;
+    position: relative;
+}
+
+.generation-progress::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 30%;
+    background: var(--fg-color);
+    border-radius: 2px;
+    animation: progress 1.5s ease-in-out infinite;
+}
+
+@keyframes progress {
+    0% {
+        left: -30%;
+    }
+    100% {
+        left: 100%;
+    }
+}
+
+/* Custom scrollbar styles */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(99, 102, 241, 0.2);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(99, 102, 241, 0.3);
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.text-editor {
+    grid-column: 1;
+    grid-row: 1;
+    min-height: 0;
+    height: calc(100vh - 14rem);
+    overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
+    margin: 0;
+}
+
+.controls {
+    grid-column: 2;
+    grid-row: 1;
+    min-height: 0;
+    height: calc(100vh - 14rem);
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 0.5rem;
-    background: rgba(15, 23, 42, 0.3);
+    padding: 1.25rem;
-    color: var(--text);
+    overflow-y: auto;
-    font-size: 1rem;
+    overflow-x: hidden;
-    transition: border-color 0.2s ease;
+    scrollbar-width: thin;
-    font-family: var(--font-family);
+    scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
-    resize: none;
+    margin: 0;
-    margin-bottom: 0.75rem;
+    position: relative;
-}
-
-textarea:focus {
-    outline: none;
-    border-color: var(--fg-color);
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
-}
-
-textarea::placeholder {
-    color: var(--text-light);
-}
-
-.text-controls {
-    display: flex;
-    gap: 0.75rem;
-    margin-top: auto;
-}
-
-.text-controls button {
-    flex: 1;
 }
 
 .voice-select-container {
     position: relative;
     display: flex;
     flex-direction: column;
+    gap: 0.75rem;
+    background: rgba(15, 23, 42, 0.3);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    height: auto;
+    min-height: 120px;
+    max-height: 200px;
+    flex-shrink: 0;
+    margin: 0.5rem 0;
+    overflow: visible;
+}
+
+.selected-voices {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
     gap: 0.5rem;
-    z-index: 1001;
+    margin-top: 0.25rem;
+    height: auto;
+    min-height: 60px;
+    max-height: none;
+    overflow-y: visible;
+    padding: 0.75rem;
+    background: rgba(15, 23, 42, 0.3);
+    border-radius: 0.25rem;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
 }
 
 .voice-search {
@@ -136,12 +400,15 @@ textarea::placeholder {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 0.5rem;
-    margin-top: 0.5rem;
+    max-height: 400px;
-    max-height: 200px;
     overflow-y: auto;
-    z-index: 1000;
+    z-index: 1002;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    scrollbar-width: thin;
+    scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
+    padding: 0.25rem;
+    margin-top: 0.5rem;
 }
 
 .voice-select-container:focus-within .voice-dropdown,
@@ -152,39 +419,34 @@ textarea::placeholder {
 .voice-option {
     display: flex;
     align-items: center;
-    padding: 0.5rem;
+    padding: 0.875rem 1rem;
     cursor: pointer;
-    border-radius: 0.25rem;
     transition: background-color 0.2s ease;
     color: var(--text);
+    border-radius: 0.25rem;
 }
 
 .voice-option:hover {
     background: rgba(99, 102, 241, 0.1);
 }
 
-.selected-voices {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.25rem;
-    margin-top: 0.5rem;
-}
-
 .selected-voice-tag {
     background: rgba(99, 102, 241, 0.2);
-    padding: 0.25rem 0.4rem;
+    padding: 0.375rem 0.75rem;
     border-radius: 1rem;
-    font-size: 0.875rem;
+    font-size: 0.75rem;
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    gap: 0.25rem;
+    gap: 0.375rem;
     border: 1px solid rgba(99, 102, 241, 0.3);
+    white-space: nowrap;
+    flex-shrink: 0;
 }
 
 .selected-voice-tag input {
-    width: 3em;
+    width: 2.5em;
-    padding: 0.1rem 0.2rem;
+    padding: 0.1rem;
-    min-height: 1.5em;
+    min-height: 1.25em;
     background: transparent;
     border: none;
     color: inherit;
@@ -303,8 +565,72 @@ textarea::placeholder {
     color: var(--text);
 }
 
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    padding: 0.75rem 1.25rem 1.5rem 1.25rem;
+    gap: 1rem;
+}
+
+.player-container {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    padding: 1.25rem 1.5rem;
+    height: auto;
+    min-height: 90px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+                0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    margin: 1rem 0;
+    align-self: start;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+}
+
+.options {
+    margin: 1rem 0;
+    padding: 1rem 0;
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+}
+
 .button-group {
-    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.generation-options {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem 0;
+    margin-top: 0.5rem;
+    border-top: 1px solid var(--border);
+}
+
+.generation-options label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-light);
+    cursor: pointer;
+    font-size: 0.875rem;
+}
+
+.button-group {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    padding: 1rem;
 }
 
 button {
@@ -360,17 +686,4 @@ button:disabled {
 
 .loading .btn-text {
     display: none;
-}
-
-.clear-btn {
-    background: transparent !important;
-    border: 1px solid var(--border) !important;
-    color: var(--text-light) !important;
-    padding: 0.5rem 1rem !important;
-}
-
-.clear-btn:hover {
-    background: rgba(99, 102, 241, 0.1) !important;
-    transform: none !important;
-    box-shadow: none !important;
 }

web/styles/layout.css

@@ -7,11 +7,14 @@
 }
 
 main {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 300px;
     gap: 1rem;
     width: 100%;
-    max-width: 900px;
+    max-width: 1200px;
     margin: 0 auto;
+    height: calc(100vh - 6rem);
+    position: relative;
 }
 
 .input-section {
@@ -24,8 +27,9 @@ main {
                 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     display: flex;
     flex-direction: column;
-    width: 400px;
+    height: 100%;
-    height: 400px;
+    max-height: calc(100vh - 8rem);
+    overflow: auto;
 }
 
 .controls {
@@ -36,10 +40,25 @@ main {
     backdrop-filter: blur(12px);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    width: 400px;
-    height: 400px;
     display: flex;
     flex-direction: column;
+    gap: 1rem;
+    height: 100%;
+    max-height: calc(100vh - 8rem);
+    overflow: auto;
+}
+
+.player-container {
+    background: var(--surface);
+    padding: 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--border);
+    backdrop-filter: blur(12px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+                0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    grid-column: 1 / -1;
+    margin-top: 1rem;
+    height: 120px;
 }
 
 #upload-btn {
@@ -48,13 +67,45 @@ main {
 
 @media (max-width: 850px) {
     main {
-        flex-direction: column;
+        grid-template-columns: 1fr;
-        align-items: center;
+        height: auto;
+        min-height: calc(100vh - 6rem);
     }
     
     .input-section,
     .controls {
         width: 100%;
-        max-width: 400px;
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+        height: auto;
+        min-height: 400px;
+        max-height: none;
+    }
+
+    .player-container {
+        width: 100%;
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+        position: sticky;
+        bottom: 1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding: 1rem;
+    }
+
+    main {
+        gap: 0.75rem;
+    }
+
+    .input-section,
+    .controls,
+    .player-container {
+        max-width: 100%;
+        padding: 0.75rem;
     }
 }

web/styles/player.css

@@ -1,34 +1,22 @@
-.audio-controls {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    margin-top: 1rem;
-    flex: 1;
-}
-
 .player-container {
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-columns: 1fr;
-    gap: 0.75rem;
+    grid-template-rows: 1fr auto;
-    gap: 0.75rem;
+    gap: 0.5rem;
-    width: 100%;
-    background: rgba(15, 23, 42, 0.3);
-    padding: 0.75rem;
-    border-radius: 0.5rem;
-    border: 1px solid var(--border);
-    flex: 1;
     position: relative;
-    min-height: 140px;
+    overflow: hidden;
 }
 
 .player-controls {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto minmax(100px, 1fr) 160px 70px 32px;
     align-items: center;
-    gap: 0.75rem;
+    gap: 1rem;
     width: 100%;
-    padding: 0.5rem;
-    border-radius: 0.5rem;
     height: 40px;
+    padding: 0 0.75rem;
+    border-radius: 0.5rem;
+    background: rgba(15, 23, 42, 0.2);
 }
 
 .seek-slider,
@@ -43,7 +31,8 @@
 }
 
 .seek-slider {
-    flex: 1;
+    width: 100%;
+    min-width: 0;
 }
 
 .volume-slider {
@@ -85,15 +74,17 @@
 .volume-control {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 0.5rem;
     padding-left: 0.75rem;
-    border-left: 1px solid var(--border);
+    border-left: 1px solid rgba(99, 102, 241, 0.2);
 }
 
 .volume-icon {
     color: var(--fg-color);
     opacity: 0.8;
     transition: opacity 0.2s ease;
+    display: flex;
+    align-items: center;
 }
 
 .volume-icon:hover {
@@ -109,9 +100,11 @@
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease;
-    flex: 0 0 auto;
-    min-width: 60px;
     height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 60px;
 }
 
 .player-btn:hover {
@@ -121,23 +114,25 @@
 
 .wave-container {
     width: 100%;
+    height: 40px;
     background: rgba(15, 23, 42, 0.3);
     border-radius: 0.5rem;
     overflow: hidden;
     position: relative;
-    flex: 1;
+    display: flex;
-    min-height: 60px;
+    align-items: center;
+    justify-content: center;
 }
 
 .time-display {
-    min-width: 80px;
     font-size: 0.875rem;
     color: var(--text-light);
     text-align: right;
     font-variant-numeric: tabular-nums;
+    padding-left: 0.75rem;
+    border-left: 1px solid rgba(99, 102, 241, 0.2);
 }
 
-/* Progress bar styles */
 .generation-progress {
     -webkit-appearance: none;
     appearance: none;
@@ -146,7 +141,7 @@
     border: none;
     background: rgba(99, 102, 241, 0.1);
     border-radius: 3px;
-    margin: 1rem 0;
+    margin: 0.5rem 0;
     display: block;
 }
 
@@ -178,15 +173,23 @@
 
 .wave-container canvas {
     position: absolute;
-    top: 0;
+    top: 50%;
     left: 0;
     width: 100%;
-    height: 100%;
+    height: 200%;
+    transform: translateY(-50%) scale(0.5);
+}
+
+.download-placeholder {
+    width: 32px;
+    height: 32px;
+    margin: 0.75rem;
+    visibility: hidden;
 }
 
 .download-button {
     position: absolute;
-    bottom: 0.75rem;
+    top: 0.75rem;
     right: 0.75rem;
     width: 32px;
     height: 32px;
@@ -195,6 +198,13 @@
     align-items: center;
     justify-content: center;
     transition: transform 0.2s ease;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.download-button.ready {
+    opacity: 1;
+    pointer-events: auto;
 }
 
 .download-glow {

web/styles/responsive.css

@@ -32,7 +32,18 @@
         width: 6px;
     }
 
-    .input-section, .player-section {
+    main {
+        grid-template-columns: 1fr;
+        max-width: 400px;
+    }
+
+    .input-section,
+    .controls,
+    .player-container {
+        width: 100%;
+    }
+
+    .input-section {
         padding: 1.5rem;
     }
 
@@ -58,38 +69,31 @@
     }
 
     .player-container {
-        flex-direction: column;
+        min-height: 180px;
-        align-items: stretch;
-        gap: 0.75rem;
     }
 
     .player-controls {
-        flex-direction: column;
+        grid-template-columns: auto 1fr auto !important;
-        gap: 0.75rem;
+        grid-template-rows: auto auto;
+        gap: 0.5rem !important;
     }
 
-    .player-btn {
+    .seek-slider {
-        width: 100%;
+        grid-column: 1 / -1;
+        grid-row: 2;
     }
 
     .volume-control {
-        border-left: none;
+        display: flex;
-        border-top: 1px solid var(--border);
+        align-items: center;
-        padding-left: 0;
+        gap: 0.5rem;
-        padding-top: 0.75rem;
-        width: 100%;
     }
 
     .volume-slider {
-        flex: 1;
+        width: 60px;
-        width: auto;
     }
 
     .wave-container {
-        height: 80px;
+        height: 60px;
-    }
-
-    .time-display {
-        text-align: center;
     }
 }