Spaces:
Running
Running
| <html lang="ru" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VoiceFlow AI - Личный кабинет</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Bebas+Neue&family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'dark-bg': '#0a0a0a', | |
| 'dark-card': '#1a1a1a', | |
| 'dark-border': '#2a2a2a' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hover-scale { | |
| transition: transform 0.3s ease; | |
| } | |
| .hover-scale:hover { | |
| transform: scale(1.02); | |
| } | |
| .sidebar-item { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-item:hover { | |
| background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, transparent 100%); | |
| border-left: 3px solid #3b82f6; | |
| padding-left: calc(1rem - 3px); | |
| } | |
| .sidebar-item.active { | |
| background: linear-gradient(90deg, rgba(59, 130, 246, 0.2) 0%, transparent 100%); | |
| border-left: 3px solid #3b82f6; | |
| padding-left: calc(1rem - 3px); | |
| } | |
| .progress-bar { | |
| background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%); | |
| transition: width 0.5s ease; | |
| } | |
| .token-card { | |
| background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); | |
| border: 1px solid #3b82f6; | |
| transition: all 0.3s ease; | |
| } | |
| .token-card:hover { | |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); | |
| transform: translateY(-2px); | |
| } | |
| .playground-input { | |
| background: #0f0f0f; | |
| border: 1px solid #2a2a2a; | |
| transition: all 0.3s ease; | |
| } | |
| .playground-input:focus { | |
| border-color: #3b82f6; | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| } | |
| .api-key { | |
| font-family: 'Courier New', monospace; | |
| letter-spacing: 2px; | |
| } | |
| .copy-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .copy-btn:hover { | |
| background: rgba(59, 130, 246, 0.2); | |
| } | |
| .copy-btn.copied { | |
| background: rgba(34, 197, 94, 0.2); | |
| color: #22c55e; | |
| } | |
| .voice-wave { | |
| animation: wave 2s ease-in-out infinite; | |
| } | |
| @keyframes wave { | |
| 0%, 100% { transform: scaleY(1); } | |
| 50% { transform: scaleY(1.5); } | |
| } | |
| .tab-content { | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark-bg text-gray-100" style="font-family: 'Inter', sans-serif;"> | |
| <!-- Sidebar --> | |
| <aside class="fixed left-0 top-0 h-full w-64 bg-dark-card border-r border-dark-border z-40"> | |
| <div class="p-6"> | |
| <div class="flex items-center space-x-2 mb-8"> | |
| <span class="text-2xl font-bold gradient-text">VoiceFlow AI</span> | |
| </div> | |
| <nav class="space-y-2"> | |
| <a href="#dashboard" class="sidebar-item active flex items-center space-x-3 p-3 rounded-lg text-gray-300 hover:text-white" onclick="showSection('dashboard')"> | |
| <i data-feather="home" class="w-5 h-5"></i> | |
| <span>Дашборд</span> | |
| </a> | |
| <a href="#playground" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg text-gray-300 hover:text-white" onclick="showSection('playground')"> | |
| <i data-feather="play-circle" class="w-5 h-5"></i> | |
| <span>Playground</span> | |
| </a> | |
| <a href="#tokens" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg text-gray-300 hover:text-white" onclick="showSection('tokens')"> | |
| <i data-feather="key" class="w-5 h-5"></i> | |
| <span>Токены API</span> | |
| </a> | |
| <a href="#settings" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg text-gray-300 hover:text-white" onclick="showSection('settings')"> | |
| <i data-feather="settings" class="w-5 h-5"></i> | |
| <span>Настройки</span> | |
| </a> | |
| </nav> | |
| <div class="mt-8 p-4 bg-gradient-to-r from-blue-600/20 to-purple-600/20 rounded-lg border border-blue-500/30"> | |
| <div class="text-sm text-gray-400 mb-1">Текущий план</div> | |
| <div class="text-lg font-bold">Стандарт</div> | |
| <div class="text-xs text-gray-500 mt-2">100,000 символов/мес</div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 border-t border-dark-border"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="http://static.photos/people/40x40/1" alt="User" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <div class="font-semibold">Александр И.</div> | |
| <div class="text-xs text-gray-400">[email protected]</div> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full py-2 px-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm transition flex items-center justify-center space-x-2"> | |
| <i data-feather="log-out" class="w-4 h-4"></i> | |
| <span>Выйти</span> | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="ml-64 min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-dark-card border-b border-dark-border px-8 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <h1 class="text-2xl font-bold">Личный кабинет</h1> | |
| <div class="flex items-center space-x-4"> | |
| <button class="relative p-2 text-gray-400 hover:text-white transition"> | |
| <i data-feather="bell" class="w-5 h-5"></i> | |
| <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-white transition"> | |
| <i data-feather="help-circle" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Section --> | |
| <section id="dashboard-section" class="p-8 tab-content"> | |
| <div class="mb-8"> | |
| <h2 class="text-3xl font-bold mb-2">Обзор потребления</h2> | |
| <p class="text-gray-400">Мониторинг использования API и статистика</p> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-dark-card p-6 rounded-xl border border-dark-border hover-scale"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <i data-feather="trending-up" class="w-8 h-8 text-blue-500"></i> | |
| <span class="text-xs text-green-500 bg-green-500/20 px-2 py-1 rounded">+12%</span> | |
| </div> | |
| <div class="text-2xl font-bold mb-1">45,231</div> | |
| <div class="text-sm text-gray-400">Символов использовано</div> | |
| </div> | |
| <div class="bg-dark-card p-6 rounded-xl border border-dark-border hover-scale"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <i data-feather="activity" class="w-8 h-8 text-purple-500"></i> | |
| <span class="text-xs text-blue-500 bg-blue-500/20 px-2 py-1 rounded">Активно</span> | |
| </div> | |
| <div class="text-2xl font-bold mb-1">1,234</div> | |
| <div class="text-sm text-gray-400">Запросов сегодня</div> | |
| </div> | |
| <div class="bg-dark-card p-6 rounded-xl border border-dark-border hover-scale"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <i data-feather="clock" class="w-8 h-8 text-green-500"></i> | |
| <span class="text-xs text-gray-500">Среднее</span> | |
| </div> | |
| <div class="text-2xl font-bold mb-1">0.8s</div> | |
| <div class="text-sm text-gray-400">Время ответа</div> | |
| </div> | |
| <div class="bg-dark-card p-6 rounded-xl border border-dark-border hover-scale"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <i data-feather="database" class="w-8 h-8 text-orange-500"></i> | |
| <span class="text-xs text-orange-500 bg-orange-500/20 px-2 py-1 rounded">54%</span> | |
| </div> | |
| <div class="text-2xl font-bold mb-1">54,769</div> | |
| <div class="text-sm text-gray-400">Осталось символов</div> | |
| </div> | |
| </div> | |
| <!-- Usage Chart --> | |
| <div class="bg-dark-card p-6 rounded-xl border border-dark-border mb-8"> | |
| <h3 class="text-xl font-bold mb-4">Потребление за последние 7 дней</h3> | |
| <div class="h-48"> | |
| <canvas id="usageChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-dark-card p-6 rounded-xl border border-dark-border"> | |
| <h3 class="text-xl font-bold mb-4">Последняя активность</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-2 h-2 bg-green-500 rounded-full"></div> | |
| <div> | |
| <div class="font-semibold">TTS запрос</div> | |
| <div class="text-sm text-gray-400">Голос: Анна, 1,234 символов</div> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-500">2 мин назад</div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-2 h-2 bg-blue-500 rounded-full"></div> | |
| <div> | |
| <div class="font-semibold">Voice Cloning</div> | |
| <div class="text-sm text-gray-400">Создан новый голосовой профиль</div> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-500">15 мин назад</div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-2 h-2 bg-purple-500 rounded-full"></div> | |
| <div> | |
| <div class="font-semibold">API запрос</div> | |
| <div class="text-sm text-gray-400">Batch обработка, 5,000 символов</div> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-500">1 час назад</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Playground Section --> | |
| <section id="playground-section" class="p-8 tab-content hidden"> | |
| <div class="mb-8"> | |
| <h2 class="text-3xl font-bold mb-2">Playground</h2> | |
| <p class="text-gray-400">Тестирование возможностей VoiceFlow AI</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Input Panel --> | |
| <div class="bg-dark-card p-6 rounded-xl border border-dark-border"> | |
| <h3 class="text-xl font-bold mb-4">Настройки синтеза</h3> | |
| <!-- Tabs --> | |
| <div class="flex mb-6"> | |
| <button onclick="switchPlaygroundTab('tts')" id="playground-tts-tab" class="flex-1 py-2 px-4 bg-blue-600 rounded-l-lg font-semibold transition"> | |
| TTS | |
| </button> | |
| <button onclick="switchPlaygroundTab('clone')" id="playground-clone-tab" class="flex-1 py-2 px-4 bg-gray-700 rounded-r-lg font-semibold transition hover:bg-gray-600"> | |
| Voice Clone | |
| </button> | |
| </div> | |
| <!-- TTS Tab --> | |
| <div id="playground-tts-content" class="space-y-4"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-2">Текст для синтеза</label> | |
| <textarea id="playground-text" class="playground-input w-full h-32 p-3 rounded-lg resize-none focus:outline-none" placeholder="Введите текст..."></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-2">Голос</label> | |
| <select class="playground-input w-full p-3 rounded-lg focus:outline-none"> | |
| <option>Анна (женский, нейтральный)</option> | |
| <option>Михаил (мужской, глубокий)</option> | |
| <option>Елена (женский, мягкий)</option> | |
| <option>Дмитрий (мужской, энергичный)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-2">Скорость речи</label> | |
| <input type="range" min="50" max="200" value="100" class="w-full" oninput="updateSpeedLabel(this.value)"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>Медленно</span> | |
| <span id="speed-label">100%</span> | |
| <span>Быстро</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-2">Эмоциональная окраска</label> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="py-2 px-3 bg-gray-700 hover:bg-blue-600 rounded-lg text-sm transition">Нейтрально</button> | |
| <button class="py-2 px-3 bg-gray-700 hover:bg-blue-600 rounded-lg text-sm transition">Радостно</button> | |
| <button class="py-2 px-3 bg-gray-700 hover:bg-blue-600 rounded-lg text-sm transition">Спокойно</button> | |
| <button class="py-2 px-3 bg-gray-700 hover:bg-blue-600 rounded-lg text-sm transition">Энергично</button> | |
| <button class="py-2 px-3 bg-gray-700 hover:bg-blue-600 rounded-lg text-sm transition">Серьезно</button> | |
| <button class="py-2 px-3 bg-gray-700 hover:bg-blue-600 rounded-lg text-sm transition">Мягко</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Voice Clone Tab --> | |
| <div id="playground-clone-content" class="space-y-4 hidden"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-2">Загрузите образец голоса</label> | |
| <div class="border-2 border-dashed border-gray-600 rounded-lg p-6 text-center hover:border-blue-500 transition cursor-pointer"> | |
| <i data-feather="upload-cloud" class="w-12 h-12 mx-auto mb-3 text-gray-500"></i> | |
| <p class="text-gray-400 text-sm">Нажмите для выбора файла</p> | |
| <p class="text-xs text-gray-500 mt-1">MP3, WAV (макс. 10MB, мин. 30 сек)</p> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-2">Текст для синтеза</label> | |
| <textarea class="playground-input w-full h-32 p-3 rounded-lg resize-none focus:outline-none" placeholder="Введите текст..."></textarea> | |
| </div> | |
| <div class="p-3 bg-blue-600/20 border border-blue-500/30 rounded-lg"> | |
| <p class="text-sm text-blue-400"> | |
| <i data-feather="info" class="w-4 h-4 inline mr-1"></i> | |
| Клонирование голоса требует дополнительного времени обработки (1-2 минуты) | |
| </p> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 rounded-lg font-bold transition flex items-center justify-center space-x-2"> | |
| <i data-feather="play" class="w-5 h-5"></i> | |
| <span>Сгенерировать</span> | |
| </button> | |
| </div> | |
| <!-- Output Panel --> | |
| <div class="bg-dark-card p-6 rounded-xl border border-dark-border"> | |
| <h3 class="text-xl font-bold mb-4">Результат</h3> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-sm text-gray-400">Аудиоплеер</span> | |
| <div class="flex space-x-2"> | |
| <button class="p-1 text-gray-400 hover:text-white transition"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-1 text-gray-400 hover:text-white transition"> | |
| <i data-feather="share-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4"> | |
| <div class="flex items-center space-x-4 mb-3"> | |
| <button class="p-3 bg-blue-600 hover:bg-blue-700 rounded-full transition"> | |
| <i data-feather="play" class="w-5 h-5"></i> | |
| </button> | |
| <div class="flex-1"> | |
| <div class="h-1 bg-gray-700 rounded-full overflow-hidden"> | |
| <div class="h-full w-1/3 bg-gradient-to-r from-blue-600 to-purple-600"></div> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-400">0:45 / 2:15</span> | |
| </div> | |
| <!-- Voice Visualization --> | |
| <div class="flex items-center justify-center space-x-1 h-16"> | |
| <div class="w-1 bg-blue-500 voice-wave" style="animation-delay: 0s;"></div> | |
| <div class="w-1 bg-purple-500 voice-wave" style="animation-delay: 0.1s;"></div> | |
| <div class="w-1 bg-blue-500 voice-wave" style="animation-delay: 0.2s;"></div> | |
| <div class="w-1 bg-purple-500 voice-wave" style="animation-delay: 0.3s;"></div> | |
| <div class="w-1 bg-blue-500 voice-wave" style="animation-delay: 0.4s;"></div> | |
| <div class="w-1 bg-purple-500 voice-wave" style="animation-delay: 0.5s;"></div> | |
| <div class="w-1 bg-blue-500 voice-wave" style="animation-delay: 0.6s;"></div> | |
| <div class="w-1 bg-purple-500 voice-wave" style="animation-delay: 0.7s;"></div> | |
| <div class="w-1 bg-blue-500 voice-wave" style="animation-delay: 0.8s;"></div> | |
| <div class="w-1 bg-purple-500 voice-wave" style="animation-delay: 0.9s;"></div> | |
| <div class="w-1 bg-blue-500 voice-wave" style="animation-delay: 1s;"></div> | |
| <div class="w-1 bg-purple-500 voice-wave" style="animation-delay: 1.1s;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between py-2 border-b border-gray-700"> | |
| <span class="text-gray-400">Длительность</span> | |
| <span>2:15</span> | |
| </div> | |
| <div class="flex justify-between py-2 border-b border-gray-700"> | |
| <span class="text-gray-400">Размер файла</span> | |
| <span>1.3 MB</span> | |
| </div> | |
| <div class="flex justify-between py-2 border-b border-gray-700"> | |
| <span class="text-gray-400">Формат</span> | |
| <span>MP3, 44.1kHz, Stereo</span> | |
| </div> | |
| <div class="flex justify-between py-2"> | |
| <span class="text-gray-400">Символов обработано</span> | |
| <span>1,234</span> | |
| </div> | |
| </div> | |
| <div class="mt-6 p-3 bg-green-600/20 border border-green-500/30 rounded-lg"> | |
| <p class="text-sm text-green-400"> | |
| <i data-feather="check-circle" class="w-4 h-4 inline mr-1"></i> | |
| Синтез выполнен успешно | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tokens Section --> | |
| <section id="tokens-section" class="p-8 tab-content hidden"> | |
| <div class="mb-8"> | |
| <h2 class="text-3xl font-bold mb-2">Управление токенами API</h2> | |
| <p class="text-gray-400">Создавайте и управляйте ключами доступа к API</p> | |
| </div> | |
| <!-- Create New Token --> | |
| <div class="bg-dark-card p-6 rounded-xl border border-dark-border mb-8"> | |
| <h3 class="text-xl font-bold mb-4">Создать новый токен</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-2">Название токена</label> | |
| <input type="text" class="playground-input w-full p-3 rounded-lg focus:outline-none" placeholder="Например: Mobile App"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-2">Права доступа</label> | |
| <select class="playground-input w-full p-3 rounded-lg focus:outline-none"> | |
| <option>Полный доступ</option> | |
| <option>Только TTS</option> | |
| <option>Только Voice Cloning</option> | |
| <option>Только чтение</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-semibold transition"> | |
| Создать токен | |
| </button> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded"> | |
| <span class="text-sm">Установить срок действия</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Active Tokens --> | |
| <div class="bg-dark-card p-6 rounded-xl border border-dark-border"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-xl font-bold">Активные токены</h3> | |
| <span class="text-sm text-gray-400">3 токена</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Token 1 --> | |
| <div class="token-card p-4 rounded-lg"> | |
| <div class="flex items-start justify-between mb-3"> | |
| <div> | |
| <h4 class="font-semibold mb-1">Production API</h4> | |
| <p class="text-sm text-gray-400">Создан: 15 янв 2024</p> | |
| </div> | |
| <span class="px-2 py-1 bg-green-600/20 text-green-400 text-xs rounded">Активен</span> | |
| </div> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <code class="api-key text-xs bg-gray-800 px-3 py-1 rounded flex-1">vf_sk_live_4k2j8h9g3f7d6s5a...</code> | |
| <button onclick="copyToken(this)" class="copy-btn p-2 rounded transition"> | |
| <i data-feather="copy" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="text-sm text-gray-400"> | |
| Использовано: <span class="text-white">23,451 / 100,000</span> запросов | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500 transition"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Token 2 --> | |
| <div class="token-card p-4 rounded-lg"> | |
| <div class="flex items-start justify-between mb-3"> | |
| <div> | |
| <h4 class="font-semibold mb-1">Development</h4> | |
| <p class="text-sm text-gray-400">Создан: 10 янв 2024</p> | |
| </div> | |
| <span class="px-2 py-1 bg-green-600/20 text-green-400 text-xs rounded">Активен</span> | |
| </div> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <code class="api-key text-xs bg-gray-800 px-3 py-1 rounded flex-1">vf_sk_test_8m5n1j2k9l8p7o6q...</code> | |
| <button onclick="copyToken(this)" class="copy-btn p-2 rounded transition"> | |
| <i data-feather="copy" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="text-sm text-gray-400"> | |
| Использовано: <span class="text-white">5,234 / 10,000</span> запросов | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500 transition"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Token 3 --> | |
| <div class="token-card p-4 rounded-lg"> | |
| <div class="flex items-start justify-between mb-3"> | |
| <div> | |
| <h4 class="font-semibold mb-1">Mobile App v2</h4> | |
| <p class="text-sm text-gray-400">Создан: 5 янв 2024</p> | |
| </div> | |
| <span class="px-2 py-1 bg-yellow-600/20 text-yellow-400 text-xs rounded">Истекает через 7 дней</span> | |
| </div> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <code class="api-key text-xs bg-gray-800 px-3 py-1 rounded flex-1">vf_sk_live_2x9c8v7b6n5m4k3j...</code> | |
| <button onclick="copyToken(this)" class="copy-btn p-2 rounded transition"> | |
| <i data-feather="copy" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="text-sm text-gray-400"> | |
| Использовано: <span class="text-white">8,912 / 50,000</span> запросов | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500 transition"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Settings Section --> | |
| <section id="settings-section" class="p-8 tab-content hidden"> | |
| <div class="mb-8"> | |
| <h2 class="text-3xl font-bold mb-2">Настройки</h2> | |
| <p class="text-gray-400">Управление профилем и предпочтениями</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Profile Settings --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <div class="bg-dark-card p-6 rounded-xl border border-dark-border"> | |
| <h3 class="text-xl font-bold mb-4">Профиль</h3> | |
| <div class="space-y-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-2">Имя</label> | |
| <input type="text" class="playground-input w-full p-3 rounded-lg focus:outline-none" value="Александр"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-2">Фамилия</label> | |
| <input type="text" class="playground-input w-full p-3 rounded-lg focus:outline-none" value="Иванов"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-2">Email</label> | |
| <input type="email" class="playground-input w-full p-3 rounded-lg focus:outline-none" value="[email protected]"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-2">Компания</label> | |
| <input type="text" class="playground-input w-full p-3 rounded-lg focus:outline-none" placeholder="Не указано"> | |
| </div> | |
| <button class="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-semibold transition"> | |
| Сохранить изменения | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-dark-card p-6 rounded-xl border border-dark-border"> | |
| <h3 class="text-xl font-bold mb-4">Уведомления</h3> | |
| <div class="space-y-4"> | |
| <label class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg cursor-pointer"> | |
| <div> | |
| <div class="font-semibold">Email уведомления</div> | |
| <div class="text-sm text-gray-400">Получать уведомления о статусе аккаунта</div> | |
| </div> | |
| <input type="checkbox" checked class="w-5 h-5 rounded"> | |
| </label> | |
| <label class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg cursor-pointer"> | |
| <div> | |
| <div class="font-semibold">Оповещения об использовании</div> | |
| <div class="text-sm text-gray-400">Уведомлять при достижении 80% лимита</div> | |
| </div> | |
| <input type="checkbox" checked class="w-5 h-5 rounded"> | |
| </label> | |
| <label class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg cursor-pointer"> | |
| <div> | |
| <div class="font-semibold">Новости и обновления</div> | |
| <div class="text-sm text-gray-400">Информация о новых функциях и улучшениях</div> | |
| </div> | |
| <input type="checkbox" class="w-5 h-5 rounded"> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="bg-dark-card p-6 rounded-xl border border-dark-border"> | |
| <h3 class="text-xl font-bold mb-4">Безопасность</h3> | |
| <div class="space-y-4"> | |
| <button class="w-full p-3 bg-gray-800/50 hover:bg-gray-700 rounded-lg text-left transition flex items-center justify-between"> | |
| <div> | |
| <div class="font-semibold">Изменить пароль</div> | |
| <div class="text-sm text-gray-400">Последнее изменение: 30 дней назад</div> | |
| </div> | |
| <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i> | |
| </button> | |
| <button class="w-full p-3 bg-gray-800/50 hover:bg-gray-700 rounded-lg text-left transition flex items-center justify-between"> | |
| <div> | |
| <div class="font-semibold">Двухфакторная аутентификация</div> | |
| <div class="text-sm text-gray-400">Не настроена</div> | |
| </div> | |
| <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i> | |
| </button> | |
| <button class="w-full p-3 bg-gray-800/50 hover:bg-gray-700 rounded-lg text-left transition flex items-center justify-between"> | |
| <div> | |
| <div class="font-semibold">Активные сессии</div> | |
| <div class="text-sm text-gray-400">3 активные сессии</div> | |
| </div> | |
| <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="space-y-6"> | |
| <div class="bg-dark-card p-6 rounded-xl border border-dark-border"> | |
| <h3 class="text-xl font-bold mb-4">Текущий план</h3> | |
| <div class="text-center mb-4"> | |
| <div class="text-3xl font-bold gradient-text mb-2">Стандарт</div> | |
| <div class="text-gray-400">₽2,990/мес</div> | |
| </div> | |
| <div class="space-y-3 mb-4"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Символов в месяц</span> | |
| <span>100,000</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Голоса</span> | |
| <span>Премиум</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">API доступ</span> | |
| <span>✓</span> | |
| </div> | |
| </div> | |
| <button class="w-full py-2 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 rounded-lg font-semibold transition"> | |
| Обновить план | |
| </button> | |
| </div> | |
| <div class="bg-dark-card p-6 rounded-xl border border-dark-border"> | |
| <h3 class="text-xl font-bold mb-4">Быстрые действия</h3> | |
| <div class="space-y-3"> | |
| <button class="w-full p-3 bg-gray-800/50 hover:bg-gray-700 rounded-lg text-left transition flex items-center space-x-3"> | |
| <i data-feather="download" class="w-5 h-5 text-blue-500"></i> | |
| <span>Скачать биллинг</span> | |
| </button> | |
| <button class="w-full p-3 bg-gray-800/50 hover:bg-gray-700 rounded-lg text-left transition flex items-center space-x-3"> | |
| <i data-feather="file-text" class="w-5 h-5 text-purple-500"></i> | |
| <span>API документация</span> | |
| </button> | |
| <button class="w-full p-3 bg-gray-800/50 hover:bg-gray-700 rounded-lg text-left transition flex items-center space-x-3"> | |
| <i data-feather="message-circle" class="w-5 h-5 text-green-500"></i> | |
| <span>Поддержка</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Section Navigation | |
| function showSection(section) { | |
| // Hide all sections | |
| document.querySelectorAll('[id$="-section"]').forEach(sec => { | |
| sec.classList.add('hidden'); | |
| }); | |
| // Show selected section | |
| document.getElementById(section + '-section').classList.remove('hidden'); | |
| // Update sidebar active state | |
| document.querySelectorAll('.sidebar-item').forEach(item => { | |
| item.classList.remove('active'); | |
| }); | |
| event.target.closest('.sidebar-item').classList.add('active'); | |
| } | |
| // Playground Tabs | |
| function switchPlaygroundTab(tab) { | |
| if (tab === 'tts') { | |
| document.getElementById('playground-tts-content').classList.remove('hidden'); | |
| document.getElementById('playground-clone-content').classList.add('hidden'); | |
| document.getElementById('playground-tts-tab').classList.add('bg-blue-600'); | |
| document.getElementById('playground-tts-tab').classList.remove('bg-gray-700'); | |
| document.getElementById('playground-clone-tab').classList.remove('bg-blue-600'); | |
| document.getElementById('playground-clone-tab').classList.add('bg-gray-700'); | |
| } else { | |
| document.getElementById('playground-tts-content').classList.add('hidden'); | |
| document.getElementById('playground-clone-content').classList.remove('hidden'); | |
| document.getElementById('playground-clone-tab').classList.add('bg-blue-600'); | |
| document.getElementById('playground-clone-tab').classList.remove('bg-gray-700'); | |
| document.getElementById('playground-tts-tab').classList.remove('bg-blue-600'); | |
| document.getElementById('playground-tts-tab').classList.add('bg-gray-700'); | |
| } | |
| } | |
| // Update Speed Label | |
| function updateSpeedLabel(value) { | |
| document.getElementById('speed-label').textContent = value + '%'; | |
| } | |
| // Copy Token | |
| function copyToken(button) { | |
| const token = button.previousElementSibling.textContent; | |
| navigator.clipboard.writeText(token); | |
| button.classList.add('copied'); | |
| const originalIcon = button.innerHTML; | |
| button.innerHTML = '<i data-feather="check" class="w-4 h-4"></i>'; | |
| feather.replace(); | |
| setTimeout(() => { | |
| button.classList.remove('copied'); | |
| button.innerHTML = originalIcon; | |
| feather.replace(); | |
| }, 2000); | |
| } | |
| // Initialize Chart | |
| const ctx = document.getElementById('usageChart'); | |
| if (ctx) { | |
| new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'], | |
| datasets: [{ | |
| label: 'Использовано символов', | |
| data: [12000, 15000, 8000, 18000, 22000, 16000, 14000], | |
| borderColor: 'rgb(59, 130, 246)', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| tension: 0.4 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(255, 255, 255, 0.1)' | |
| }, | |
| ticks: { | |
| color: 'rgba(255, 255, 255, 0.5)' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| color: 'rgba(255, 255, 255, 0.1)' | |
| }, | |
| ticks: { | |
| color: 'rgba(255, 255, 255, 0.5)' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| // Initialize random text for playground | |
| const randomTexts = [ | |
| "Искусственный интеллект меняет наш мир каждый день. Технологии синтеза речи становятся все более совершенными.", | |
| "Будущее голосовых технологий уже здесь. С помощью нейронных сетей мы можем клонировать голоса.", | |
| "Преобразование текста в речь - это не просто технология, это искусство.", | |
| "Инновации в области AI позволяют нам создавать голоса, которые неотличимы от человеческих." | |
| ]; | |
| // Set random text on load | |
| window.addEventListener('load', () => { | |
| const playgroundText = document.getElementById('playground-text'); | |
| if (playgroundText) { | |
| playgroundText.value = randomTexts[Math.floor(Math.random() * randomTexts.length)]; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |