mirror of
https://github.com/remsky/Kokoro-FastAPI.git
synced 2025-04-13 09:39:17 +00:00
Update Dockerfile for GPU compatibility, enhance button loading state, and improve responsive styles
This commit is contained in:
remsky
parent
444491defe
commit
212c8426e1
13 changed files with 980 additions and 698 deletions
|
|
@ -1,4 +1,4 @@
|
|||
FROM --platform=$BUILDPLATFORM nvidia/cuda:12.3.2-cudnn9-runtime-ubuntu22.04
|
||||
FROM --platform=$BUILDPLATFORM nvidia/cuda:12.1.0-runtime-ubuntu22.04
|
||||
# Set non-interactive frontend
|
||||
ENV DEBIAN_FRONTEND=noninteractive
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
<link rel="stylesheet" href="styles/player.css">
|
||||
<link rel="stylesheet" href="styles/responsive.css">
|
||||
<link rel="stylesheet" href="styles/badges.css">
|
||||
<link rel="stylesheet" href="styles/controls.css">
|
||||
<script src="https://unpkg.com/siriwave/dist/siriwave.umd.min.js"></script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</head>
|
||||
|
|
@ -28,36 +29,60 @@
|
|||
<a href="https://huggingface.co/hexgrad/Kokoro-82M" target="_blank" class="badge">
|
||||
<img src="https://img.shields.io/badge/Powered--by--HexGrad%2FKokoro--82M-black?logo=huggingface&logoColor=white&labelColor=black&style=for-the-badge" alt="HexGrad/Kokoro-82M on Hugging Face">
|
||||
</a>
|
||||
<div class="logo-container">
|
||||
<h1>FastKoko</h1>
|
||||
<div class="cup">
|
||||
<div class="handle"></div>
|
||||
<div class="steam"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="badge">
|
||||
<a class="github-button" href="https://github.com/remsky/Kokoro-FastAPI" data-color-scheme="dark" data-size="large" data-show-count="true" aria-label="Star remsky/Kokoro-FastAPI on GitHub">Kokoro-FastAPI</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="logo-container">
|
||||
<h1>FastKoko</h1>
|
||||
<div class="cup">
|
||||
<div class="handle"></div>
|
||||
<div class="steam"></div>
|
||||
<main>
|
||||
<div class="main-column">
|
||||
<div id="text-editor"></div>
|
||||
<div class="player-container">
|
||||
<div class="player-controls">
|
||||
<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">
|
||||
<div class="volume-control">
|
||||
<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"/>
|
||||
</svg>
|
||||
<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 class="download-placeholder"></div>
|
||||
<div id="download-btn" class="download-button">
|
||||
<div class="download-glow"></div>
|
||||
<div class="download-icon">
|
||||
<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>
|
||||
</div>
|
||||
<p class="subtitle">Kokoro-FastAPI TTS System</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div id="text-editor"></div>
|
||||
<div class="controls">
|
||||
<div class="voice-select-container">
|
||||
<input
|
||||
type="text"
|
||||
id="voice-search"
|
||||
class="voice-search"
|
||||
placeholder="Search voices..."
|
||||
autocomplete="off"
|
||||
>
|
||||
<div class="voice-dropdown" id="voice-dropdown">
|
||||
<div class="voice-options" id="voice-options">
|
||||
<!-- Voice options will be inserted here -->
|
||||
<div class="voice-search-wrapper">
|
||||
<input
|
||||
type="text"
|
||||
id="voice-search"
|
||||
class="voice-search"
|
||||
placeholder="Search voices..."
|
||||
autocomplete="off"
|
||||
>
|
||||
<div class="voice-dropdown" id="voice-dropdown">
|
||||
<div class="voice-options" id="voice-options">
|
||||
<!-- Voice options will be inserted here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selected-voices" id="selected-voices">
|
||||
|
|
@ -92,30 +117,6 @@
|
|||
</div>
|
||||
<div id="status" class="status"></div>
|
||||
</div>
|
||||
<div class="player-container">
|
||||
<div class="player-controls">
|
||||
<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">
|
||||
<div class="volume-control">
|
||||
<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"/>
|
||||
</svg>
|
||||
<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 class="download-placeholder"></div>
|
||||
<div id="download-btn" class="download-button">
|
||||
<div class="download-glow"></div>
|
||||
<div class="download-icon">
|
||||
<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>
|
||||
</main>
|
||||
</div>
|
||||
<script type="module" src="src/App.js"></script>
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ export class App {
|
|||
setGenerating(isGenerating) {
|
||||
this.playerState.setGenerating(isGenerating);
|
||||
this.elements.generateBtn.disabled = isGenerating;
|
||||
this.elements.generateBtn.className = isGenerating ? 'loading' : '';
|
||||
this.elements.generateBtn.classList.toggle('loading', isGenerating);
|
||||
this.elements.generateBtnLoader.style.display = isGenerating ? 'block' : 'none';
|
||||
this.elements.generateBtnText.style.visibility = isGenerating ? 'hidden' : 'visible';
|
||||
this.elements.cancelBtn.style.display = isGenerating ? 'block' : 'none';
|
||||
|
|
@ -227,4 +227,4 @@ export class App {
|
|||
// Initialize app when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new App();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,25 +12,45 @@ export class VoiceSelector {
|
|||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Voice search focus
|
||||
this.elements.voiceSearch.addEventListener('focus', () => {
|
||||
this.elements.voiceDropdown.classList.add('show');
|
||||
});
|
||||
|
||||
// Voice search
|
||||
this.elements.voiceSearch.addEventListener('input', (e) => {
|
||||
const filteredVoices = this.voiceService.filterVoices(e.target.value);
|
||||
this.renderVoiceOptions(filteredVoices);
|
||||
});
|
||||
|
||||
// Voice selection
|
||||
this.elements.voiceOptions.addEventListener('change', (e) => {
|
||||
if (e.target.type === 'checkbox') {
|
||||
if (e.target.checked) {
|
||||
this.voiceService.addVoice(e.target.value);
|
||||
} else {
|
||||
this.voiceService.removeVoice(e.target.value);
|
||||
}
|
||||
this.updateSelectedVoicesDisplay();
|
||||
// Voice selection - handle clicks on the entire voice option
|
||||
this.elements.voiceOptions.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault(); // Prevent blur on search input
|
||||
|
||||
const voiceOption = e.target.closest('.voice-option');
|
||||
if (!voiceOption) return;
|
||||
|
||||
const voice = voiceOption.dataset.voice;
|
||||
if (!voice) return;
|
||||
|
||||
const isSelected = voiceOption.classList.contains('selected');
|
||||
|
||||
if (!isSelected) {
|
||||
this.voiceService.addVoice(voice);
|
||||
} else {
|
||||
this.voiceService.removeVoice(voice);
|
||||
}
|
||||
|
||||
voiceOption.classList.toggle('selected');
|
||||
this.updateSelectedVoicesDisplay();
|
||||
|
||||
// Keep focus on search input
|
||||
requestAnimationFrame(() => {
|
||||
this.elements.voiceSearch.focus();
|
||||
});
|
||||
});
|
||||
|
||||
// Weight adjustment and voice removal
|
||||
// Weight adjustment
|
||||
this.elements.selectedVoices.addEventListener('input', (e) => {
|
||||
if (e.target.type === 'number') {
|
||||
const voice = e.target.dataset.voice;
|
||||
|
|
@ -47,24 +67,30 @@ export class VoiceSelector {
|
|||
// Remove selected voice
|
||||
this.elements.selectedVoices.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('remove-voice')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const voice = e.target.dataset.voice;
|
||||
this.voiceService.removeVoice(voice);
|
||||
this.updateVoiceCheckbox(voice, false);
|
||||
this.updateVoiceOptionState(voice, false);
|
||||
this.updateSelectedVoicesDisplay();
|
||||
}
|
||||
});
|
||||
|
||||
// Dropdown visibility
|
||||
this.elements.voiceSearch.addEventListener('focus', () => {
|
||||
this.elements.voiceDropdown.style.display = 'block';
|
||||
this.updateSearchPlaceholder();
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!this.elements.voiceSearch.contains(e.target) &&
|
||||
!this.elements.voiceDropdown.contains(e.target)) {
|
||||
this.elements.voiceDropdown.style.display = 'none';
|
||||
// Handle clicks outside to close dropdown
|
||||
document.addEventListener('mousedown', (e) => {
|
||||
// Don't handle clicks in selected voices area
|
||||
if (this.elements.selectedVoices.contains(e.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Don't close if clicking in search or dropdown
|
||||
if (this.elements.voiceSearch.contains(e.target) ||
|
||||
this.elements.voiceDropdown.contains(e.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.elements.voiceDropdown.classList.remove('show');
|
||||
this.elements.voiceSearch.blur();
|
||||
});
|
||||
|
||||
this.elements.voiceSearch.addEventListener('blur', () => {
|
||||
|
|
@ -77,11 +103,10 @@ export class VoiceSelector {
|
|||
renderVoiceOptions(voices) {
|
||||
this.elements.voiceOptions.innerHTML = voices
|
||||
.map(voice => `
|
||||
<label class="voice-option">
|
||||
<input type="checkbox" value="${voice}"
|
||||
${this.voiceService.getSelectedVoices().includes(voice) ? 'checked' : ''}>
|
||||
<div class="voice-option ${this.voiceService.getSelectedVoices().includes(voice) ? 'selected' : ''}"
|
||||
data-voice="${voice}">
|
||||
${voice}
|
||||
</label>
|
||||
</div>
|
||||
`)
|
||||
.join('');
|
||||
}
|
||||
|
|
@ -117,11 +142,11 @@ export class VoiceSelector {
|
|||
'Search and select voices...';
|
||||
}
|
||||
|
||||
updateVoiceCheckbox(voice, checked) {
|
||||
const checkbox = this.elements.voiceOptions
|
||||
.querySelector(`input[value="${voice}"]`);
|
||||
if (checkbox) {
|
||||
checkbox.checked = checked;
|
||||
updateVoiceOptionState(voice, selected) {
|
||||
const voiceOption = this.elements.voiceOptions
|
||||
.querySelector(`[data-voice="${voice}"]`);
|
||||
if (voiceOption) {
|
||||
voiceOption.classList.toggle('selected', selected);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,13 +31,11 @@ export class WaveVisualizer {
|
|||
|
||||
setupProgressBar() {
|
||||
this.progressBar = document.createElement('progress');
|
||||
this.progressBar.style.width = '100%';
|
||||
this.progressBar.max = 100;
|
||||
this.progressBar.value = 0;
|
||||
this.progressBar.className = 'generation-progress';
|
||||
// Insert inside player-container, after wave-container
|
||||
const playerContainer = this.container.closest('.player-container');
|
||||
playerContainer.insertBefore(this.progressBar, playerContainer.lastElementChild);
|
||||
// Insert inside wave-container at the bottom
|
||||
this.container.appendChild(this.progressBar);
|
||||
this.progressBar.style.display = 'none';
|
||||
}
|
||||
|
||||
|
|
@ -104,4 +102,4 @@ export class WaveVisualizer {
|
|||
}
|
||||
}
|
||||
|
||||
export default WaveVisualizer;
|
||||
export default WaveVisualizer;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,66 @@
|
|||
.badges-container {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: clamp(0.75rem, 1.5vh, 1rem) clamp(1rem, 2vw, 2rem);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
z-index: 2;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(99, 102, 241, 0.2);
|
||||
min-height: clamp(3.5rem, 6vh, 4.5rem);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.badge {
|
||||
height: 28px;
|
||||
height: clamp(24px, 3vh, 28px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: opacity 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: clamp(0.5rem, 1vw, 1rem);
|
||||
margin: 0 auto;
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.badges-container {
|
||||
padding: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
min-height: clamp(4rem, 8vh, 5rem);
|
||||
}
|
||||
|
||||
.badge {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.badge iframe {
|
||||
height: 24px !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
position: static;
|
||||
transform: none;
|
||||
margin: 0;
|
||||
order: -1;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.badge iframe {
|
||||
|
|
@ -27,4 +74,4 @@
|
|||
.badge img {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@
|
|||
--font-family: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -23,7 +29,10 @@ body {
|
|||
background: var(--bg-color);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
|
|
@ -56,15 +65,32 @@ body {
|
|||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
max-width: min(1400px, 98vw);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: calc(100vh - 2rem);
|
||||
box-sizing: border-box;
|
||||
padding: clamp(5rem, 8vh, 7rem) clamp(0.75rem, 2vw, 2rem) 2rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 1rem;
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding-top: clamp(6rem, 10vh, 8rem);
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(1rem, 2vh, 2rem);
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status {
|
||||
|
|
@ -93,4 +119,4 @@ header {
|
|||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
358
web/styles/controls.css
Normal file
358
web/styles/controls.css
Normal file
|
|
@ -0,0 +1,358 @@
|
|||
/* Controls Panel */
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.75rem;
|
||||
padding: clamp(0.75rem, 2vw, 1.25rem);
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
/* Voice Selection */
|
||||
.voice-select-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.voice-search-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.voice-search {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.voice-search:focus {
|
||||
outline: none;
|
||||
border-color: var(--fg-color);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.voice-search::placeholder {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.selected-voices {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.35rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.voice-dropdown {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: calc(100% + 0.25rem);
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
z-index: 999999;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
padding: 0.75rem;
|
||||
transition: all 0.2s ease;
|
||||
transform: translateY(-10px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.voice-dropdown.show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.voice-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
padding-right: 0.5rem;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
|
||||
}
|
||||
|
||||
.voice-options::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.voice-options::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.voice-options::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(99, 102, 241, 0.2);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.voice-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: var(--text);
|
||||
border-radius: 0.35rem;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border: 1px solid var(--border);
|
||||
font-size: 0.9375rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.voice-option:hover {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
border-color: var(--fg-color);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.voice-option.selected {
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
border-color: var(--fg-color);
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.voice-option.selected::before {
|
||||
content: "✓";
|
||||
margin-right: 0.5rem;
|
||||
color: var(--fg-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.selected-voice-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.35rem 0.5rem;
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||||
border-radius: 0.35rem;
|
||||
font-size: 0.8125rem;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.selected-voice-tag:hover {
|
||||
background: rgba(99, 102, 241, 0.3);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.selected-voice-tag input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0.25rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
text-align: left;
|
||||
border-radius: 0.25rem;
|
||||
transition: background-color 0.2s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.selected-voice-tag input:hover,
|
||||
.selected-voice-tag input:focus {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.remove-voice {
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s ease;
|
||||
font-size: 1.2em;
|
||||
padding: 0.25rem;
|
||||
margin-left: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.remove-voice:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Speed Control */
|
||||
.speed-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.speed-control label {
|
||||
color: var(--text-light);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.speed-control input[type="range"] {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
-webkit-appearance: none;
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.speed-control input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--fg-color);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.speed-control input[type="range"]::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.speed-control input[type="range"]::-moz-range-thumb {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--fg-color);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.speed-control input[type="range"]::-moz-range-thumb:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Generation Controls */
|
||||
.button-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
#generate-btn {
|
||||
background: var(--fg-color);
|
||||
color: var(--text);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
#generate-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.generation-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
}
|
||||
|
||||
.format-select {
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
font-family: var(--font-family);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.format-select:hover {
|
||||
border-color: var(--fg-color);
|
||||
}
|
||||
|
||||
.format-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--fg-color);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.format-select option {
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
@media (max-width: 768px) {
|
||||
.voice-options {
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.voice-option {
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.selected-voices {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.selected-voice-tag {
|
||||
padding: 0.375rem 0.625rem;
|
||||
}
|
||||
|
||||
.generation-options {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.format-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +1,22 @@
|
|||
/* Text Editor */
|
||||
.text-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
border-radius: 0.75rem;
|
||||
padding: clamp(0.75rem, 2vw, 1.25rem);
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.editor-view {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
|
|
@ -27,9 +30,13 @@
|
|||
color: var(--text);
|
||||
font-family: var(--font-family);
|
||||
font-size: 1rem;
|
||||
resize: none;
|
||||
resize: vertical;
|
||||
transition: border-color 0.2s ease;
|
||||
min-height: 300px;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.page-content:focus {
|
||||
|
|
@ -42,7 +49,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 0.5rem;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
|
|
@ -181,424 +188,45 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 300px;
|
||||
gap: 1.5rem;
|
||||
row-gap: 0;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Scrollbar Styles */
|
||||
.text-editor {
|
||||
grid-column: 1;
|
||||
min-height: 400px;
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
|
||||
height: fit-content;
|
||||
margin-bottom: 1rem;
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.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: 160px;
|
||||
max-height: 240px;
|
||||
flex-shrink: 0;
|
||||
margin: 0.5rem 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.selected-voices {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 4fr));
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
height: auto;
|
||||
min-height: 50px;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
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 {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
.text-editor::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.voice-search:focus {
|
||||
outline: none;
|
||||
border-color: var(--fg-color);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.voice-search::placeholder {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.voice-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
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,
|
||||
.voice-dropdown:hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.voice-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.875rem 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
color: var(--text);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.voice-option:hover {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.selected-voice-tag {
|
||||
.text-editor::-webkit-scrollbar-thumb {
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.75rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
min-width: 180px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.remove-voice {
|
||||
font-size: 1.2em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.selected-voice-tag input {
|
||||
width: 100%;
|
||||
padding: 0.25rem;
|
||||
min-height: 1.5em;
|
||||
.text-editor::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
text-align: center;
|
||||
border-radius: 0.25rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.selected-voice-tag input:hover,
|
||||
.selected-voice-tag input:focus {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
/* Responsive Styles */
|
||||
@media (max-width: 768px) {
|
||||
.editor-footer {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.remove-voice {
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.chars-per-page {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.remove-voice:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.file-controls {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.option-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.speed-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.speed-control label {
|
||||
color: var(--text-light);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.speed-control input[type="range"] {
|
||||
width: 150px;
|
||||
height: 4px;
|
||||
-webkit-appearance: none;
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.speed-control input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--fg-color);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.speed-control input[type="range"]::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.speed-control input[type="range"]::-moz-range-thumb {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--fg-color);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.speed-control input[type="range"]::-moz-range-thumb:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.options label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-light);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.format-select {
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
font-family: var(--font-family);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.format-select:hover {
|
||||
border-color: var(--fg-color);
|
||||
}
|
||||
|
||||
.format-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--fg-color);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.format-select option {
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 0.75rem 1rem 1rem 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.player-container {
|
||||
grid-column: 1 / -1;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
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);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.options {
|
||||
margin: 1rem 0;
|
||||
padding: 1rem 0;
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
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: auto;
|
||||
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 {
|
||||
background: var(--fg-color);
|
||||
color: var(--text);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: var(--error);
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid var(--text);
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading .loader {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.loading .btn-text {
|
||||
display: none;
|
||||
}
|
||||
.text-editor,
|
||||
.controls {
|
||||
height: 600px;
|
||||
.upload-btn,
|
||||
.clear-btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,69 +1,65 @@
|
|||
header {
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 0.25rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
line-height: 1.1;
|
||||
line-height: 1;
|
||||
background: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
|
||||
background-size: 10px 10px;
|
||||
background-size: 5px 5px;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: var(--text);
|
||||
text-shadow:
|
||||
-2px -2px 0 rgba(0,0,0,0.5),
|
||||
2px -2px 0 rgba(0,0,0,0.5),
|
||||
-2px 2px 0 rgba(0,0,0,0.5),
|
||||
2px 2px 0 rgba(0,0,0,0.5),
|
||||
3px 3px var(--fg-color);
|
||||
-1px -1px 0 rgba(0,0,0,0.5),
|
||||
1px -1px 0 rgba(0,0,0,0.5),
|
||||
-1px 1px 0 rgba(0,0,0,0.5),
|
||||
1px 1px 0 rgba(0,0,0,0.5),
|
||||
2px 2px var(--fg-color);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-light);
|
||||
font-size: 1.5rem;
|
||||
opacity: 0.9;
|
||||
margin-top: 0.5rem;
|
||||
@media (max-width: 768px) {
|
||||
.logo-container {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cup {
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
border: 3px solid var(--text);
|
||||
border-radius: 0 0 20px 20px;
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--text);
|
||||
border-radius: 0 0 8px 8px;
|
||||
position: relative;
|
||||
animation: float 3s ease-in-out 2;
|
||||
animation: float 3s ease-in-out;
|
||||
animation-iteration-count: 3;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.handle {
|
||||
width: 15px;
|
||||
height: 25px;
|
||||
border: 3px solid var(--text);
|
||||
border-radius: 0 10px 10px 0;
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
border: 2px solid var(--text);
|
||||
border-radius: 0 4px 4px 0;
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
top: 10px;
|
||||
right: -6px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.steam {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
height: 15px;
|
||||
top: -6px;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
height: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
@ -71,23 +67,27 @@ h1 {
|
|||
.steam::before,
|
||||
.steam::after {
|
||||
content: "";
|
||||
width: 10px;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: rgba(255,255,255,0.7);
|
||||
border-radius: 10px;
|
||||
animation: steam 2s 2;
|
||||
border-radius: 3px;
|
||||
animation: steam 2s;
|
||||
animation-iteration-count: 3;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes steam {
|
||||
to {
|
||||
transform: translateY(-10px) scale(1.5);
|
||||
transform: translateY(-6px) scale(1.3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,111 +1,94 @@
|
|||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Main Layout */
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 300px;
|
||||
grid-template-columns: 1fr 320px;
|
||||
gap: 1rem;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
min-width: 0;
|
||||
height: calc(100vh - 8rem);
|
||||
}
|
||||
|
||||
/* Main Column */
|
||||
.main-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
min-height: min-content;
|
||||
height: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Text Editor Container */
|
||||
.text-editor {
|
||||
min-height: 400px;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
/* Controls Panel */
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
height: calc(100vh - 6rem);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-section {
|
||||
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);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - 8rem);
|
||||
overflow: auto;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
|
||||
}
|
||||
|
||||
.controls {
|
||||
background: var(--surface);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
.controls::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.controls::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.controls::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(99, 102, 241, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Controls Sections */
|
||||
.voice-select-container,
|
||||
.speed-control,
|
||||
.button-group {
|
||||
width: 100%;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
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);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - 8rem);
|
||||
overflow: auto;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
/* Player Container */
|
||||
.player-container {
|
||||
background: var(--surface);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
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;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
#upload-btn {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
/* Responsive Layout */
|
||||
@media (max-width: 768px) {
|
||||
main {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem;
|
||||
width: 95%;
|
||||
height: auto;
|
||||
min-height: calc(100vh - 6rem);
|
||||
}
|
||||
|
||||
.input-section,
|
||||
.controls {
|
||||
width: 100%;
|
||||
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;
|
||||
.text-editor {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
main {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.input-section,
|
||||
.controls,
|
||||
.player-container {
|
||||
max-width: 100%;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +1,78 @@
|
|||
.player-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr auto;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: auto auto;
|
||||
gap: 0.75rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: clamp(0.75rem, 1.5vw, 1.25rem);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.75rem;
|
||||
margin-top: clamp(1rem, 2vh, 2rem);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.player-container {
|
||||
padding: 0.75rem;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.player-controls {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(100px, 1fr) 160px 70px 32px;
|
||||
grid-template-columns: auto minmax(100px, 1fr) auto auto auto;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: clamp(0.5rem, 1vw, 1rem);
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
height: 44px;
|
||||
padding: 0.5rem 0.5rem;
|
||||
border-radius: 0.75rem;
|
||||
background: rgba(15, 23, 42, 0.2);
|
||||
min-width: 0;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.player-controls {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
height: auto;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.volume-control {
|
||||
grid-column: 2;
|
||||
justify-self: end;
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
grid-column: 3;
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
min-width: 55px;
|
||||
}
|
||||
|
||||
.seek-slider {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.player-btn {
|
||||
padding: 0.25rem 0.5rem;
|
||||
min-width: 45px;
|
||||
height: 26px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.seek-slider,
|
||||
|
|
@ -77,6 +133,25 @@
|
|||
gap: 0.5rem;
|
||||
padding-left: 0.75rem;
|
||||
border-left: 1px solid rgba(99, 102, 241, 0.2);
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.volume-control {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.volume-slider {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.player-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
min-width: 50px;
|
||||
height: 28px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.volume-icon {
|
||||
|
|
@ -114,7 +189,7 @@
|
|||
|
||||
.wave-container {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
height: 60px;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
|
|
@ -122,6 +197,127 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.wave-container {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.wave-container canvas {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.download-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.download-placeholder {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.generation-progress {
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Generation Controls Responsive Fixes */
|
||||
@media (max-width: 768px) {
|
||||
.button-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.generation-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.format-select {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
#generate-btn {
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure all controls stay within bounds */
|
||||
#text-editor {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.voice-select-container {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.options {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.generation-progress {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
margin: 0;
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.generation-progress::-webkit-progress-bar {
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.generation-progress::-webkit-progress-value {
|
||||
background: var(--fg-color);
|
||||
border-radius: 2px;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.generation-progress::-moz-progress-bar {
|
||||
background: var(--fg-color);
|
||||
border-radius: 2px;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
|
|
@ -131,6 +327,15 @@
|
|||
font-variant-numeric: tabular-nums;
|
||||
padding-left: 0.75rem;
|
||||
border-left: 1px solid rgba(99, 102, 241, 0.2);
|
||||
min-width: 70px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.time-display {
|
||||
font-size: 0.75rem;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -211,4 +416,4 @@
|
|||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,50 +1,54 @@
|
|||
@media (max-width: 1023px) {
|
||||
@media (max-width: 1200px) {
|
||||
.container {
|
||||
padding: 2rem 1rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.text-editor,
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.2rem;
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
}
|
||||
|
||||
.cup {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
width: clamp(20px, 3vw, 30px);
|
||||
height: clamp(25px, 4vw, 40px);
|
||||
}
|
||||
|
||||
.handle {
|
||||
width: 12px;
|
||||
height: 20px;
|
||||
right: -12px;
|
||||
top: 8px;
|
||||
width: clamp(8px, 1.5vw, 12px);
|
||||
height: clamp(15px, 2.5vw, 20px);
|
||||
right: clamp(-8px, -1.5vw, -12px);
|
||||
top: clamp(6px, 1vw, 8px);
|
||||
}
|
||||
|
||||
.steam {
|
||||
top: -12px;
|
||||
top: clamp(-8px, -1.5vw, -12px);
|
||||
}
|
||||
|
||||
.steam::before,
|
||||
.steam::after {
|
||||
width: 6px;
|
||||
width: clamp(4px, 0.75vw, 6px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.input-section,
|
||||
.controls,
|
||||
.player-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-section {
|
||||
padding: 1.5rem;
|
||||
.text-editor,
|
||||
.controls {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.voice-select-container {
|
||||
|
|
@ -54,39 +58,34 @@
|
|||
|
||||
.options {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.generation-options {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.format-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.player-container {
|
||||
min-height: 180px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.player-controls {
|
||||
grid-template-columns: auto 1fr auto !important;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
.seek-slider {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
padding: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.volume-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.volume-slider {
|
||||
|
|
@ -94,6 +93,18 @@
|
|||
}
|
||||
|
||||
.wave-container {
|
||||
height: 60px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.download-button {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.download-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue