Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VoiceCraft Studio | Text-to-Speech Platform</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| transition: all 0.3s ease; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6b46c1 0%, #805ad5 100%); | |
| } | |
| .voice-option:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .dark .dark\:bg-gray-900 { | |
| background-color: #111827; | |
| } | |
| .dark .dark\:text-white { | |
| color: #f3f4f6; | |
| } | |
| .speech-preview { | |
| min-height: 150px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300"> | |
| <!-- Vanta.js Background --> | |
| <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div> | |
| <!-- Main Container --> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-12"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="mic" class="text-indigo-600 dark:text-indigo-400"></i> | |
| <h1 class="text-3xl font-bold text-gray-800 dark:text-white">VoiceCraft Studio</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200"> | |
| <i data-feather="moon" class="hidden dark:block"></i> | |
| <i data-feather="sun" class="block dark:hidden"></i> | |
| </button> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center space-x-2"> | |
| <i data-feather="user"></i> | |
| <span>Login</span> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Text Input Section --> | |
| <section class="mb-12"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Enter Your Text</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md text-sm"> | |
| Clear | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md text-sm"> | |
| Sample Text | |
| </button> | |
| </div> | |
| </div> | |
| <textarea | |
| id="text-input" | |
| class="w-full h-40 p-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white" | |
| placeholder="Type or paste your text here..."></textarea> | |
| <div class="flex justify-between items-center mt-4"> | |
| <span class="text-sm text-gray-500 dark:text-gray-400">Character count: <span id="char-count">0</span></span> | |
| <button id="speak-btn" class="px-6 py-3 gradient-bg text-white rounded-lg hover:opacity-90 transition flex items-center space-x-2"> | |
| <i data-feather="play"></i> | |
| <span>Speak</span> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Voice Settings --> | |
| <section class="mb-12"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-6">Voice Settings</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Voice Selection --> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-3">Voice</h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="voice-option p-4 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer transition"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center"> | |
| <i data-feather="user" class="text-indigo-600 dark:text-indigo-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800 dark:text-white">Emma</p> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">English (US)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="voice-option p-4 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer transition"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center"> | |
| <i data-feather="user" class="text-indigo-600 dark:text-indigo-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800 dark:text-white">David</p> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">English (UK)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="voice-option p-4 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer transition"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center"> | |
| <i data-feather="user" class="text-indigo-600 dark:text-indigo-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800 dark:text-white">Sophie</p> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">French</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="voice-option p-4 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer transition"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center"> | |
| <i data-feather="user" class="text-indigo-600 dark:text-indigo-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800 dark:text-white">Hans</p> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">German</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Voice Parameters --> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-3">Adjust Parameters</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="speed" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Speed</label> | |
| <input type="range" id="speed" min="0.5" max="2" step="0.1" value="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> | |
| <span>Slow</span> | |
| <span>Normal</span> | |
| <span>Fast</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="pitch" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Pitch</label> | |
| <input type="range" id="pitch" min="0.5" max="1.5" step="0.1" value="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> | |
| <span>Low</span> | |
| <span>Normal</span> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="volume" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Volume</label> | |
| <input type="range" id="volume" min="0" max="1" step="0.1" value="0.8" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> | |
| <span>Quiet</span> | |
| <span>Normal</span> | |
| <span>Loud</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Preview & Download --> | |
| <section class="mb-12"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-6">Preview & Download</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Audio Preview --> | |
| <div class="speech-preview bg-gray-50 dark:bg-gray-700 rounded-lg p-4 flex flex-col justify-center"> | |
| <div class="flex justify-center mb-4"> | |
| <i data-feather="headphones" class="text-indigo-600 dark:text-indigo-400 w-12 h-12"></i> | |
| </div> | |
| <p class="text-center text-gray-500 dark:text-gray-400">Your speech preview will appear here</p> | |
| <div class="flex justify-center mt-4"> | |
| <button class="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-white rounded-lg flex items-center space-x-2"> | |
| <i data-feather="play"></i> | |
| <span>Play Preview</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Download Options --> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-3">Download Options</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-3"> | |
| <input type="radio" id="mp3" name="format" value="mp3" checked class="text-indigo-600"> | |
| <label for="mp3" class="text-gray-700 dark:text-gray-300">MP3 (Standard Quality)</label> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <input type="radio" id="wav" name="format" value="wav" class="text-indigo-600"> | |
| <label for="wav" class="text-gray-700 dark:text-gray-300">WAV (High Quality)</label> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <input type="radio" id="ogg" name="format" value="ogg" class="text-indigo-600"> | |
| <label for="ogg" class="text-gray-700 dark:text-gray-300">OGG (Web Optimized)</label> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 px-6 py-3 gradient-bg text-white rounded-lg hover:opacity-90 transition flex items-center justify-center space-x-2"> | |
| <i data-feather="download"></i> | |
| <span>Download Audio</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="text-center text-gray-500 dark:text-gray-400 text-sm py-8"> | |
| <p>© 2023 VoiceCraft Studio. All rights reserved.</p> | |
| <div class="flex justify-center space-x-4 mt-2"> | |
| <a href="#" class="hover:text-indigo-600 dark:hover:text-indigo-400">Terms</a> | |
| <a href="#" class="hover:text-indigo-600 dark:hover:text-indigo-400">Privacy</a> | |
| <a href="#" class="hover:text-indigo-600 dark:hover:text-indigo-400">Contact</a> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x7c3aed, | |
| backgroundColor: 0xffffff, | |
| size: 0.8 | |
| }); | |
| // Theme toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const html = document.documentElement; | |
| themeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); | |
| }); | |
| // Check for saved theme preference | |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| } | |
| // Character count | |
| const textInput = document.getElementById('text-input'); | |
| const charCount = document.getElementById('char-count'); | |
| textInput.addEventListener('input', () => { | |
| charCount.textContent = textInput.value.length; | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Text-to-speech functionality would be implemented here | |
| // This is just a UI mockup | |
| document.getElementById('speak-btn').addEventListener('click', () => { | |
| alert('Text-to-speech functionality would be implemented here with the Web Speech API'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |