Hugging Face's logo

Spaces:
Nasa1423
/
doctype-html-h
Running

App Files Community
Nasa1423 commited on
Commit
5087c33
·
verified ·
1 Parent(s): 0402ac2

Перенеси файл dashboard в index

Browse files
Files changed (1) hide show
  1. index.html +831 -18
index.html CHANGED
@@ -1,19 +1,832 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="ru" class="dark">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>VoiceFlow AI - Личный кабинет</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <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">
12
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
13
+ <script>
14
+ tailwind.config = {
15
+ darkMode: 'class',
16
+ theme: {
17
+ extend: {
18
+ colors: {
19
+ 'dark-bg': '#0a0a0a',
20
+ 'dark-card': '#1a1a1a',
21
+ 'dark-border': '#2a2a2a'
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ html {
29
+ scroll-behavior: smooth;
30
+ }
31
+ .gradient-text {
32
+ background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
33
+ -webkit-background-clip: text;
34
+ -webkit-text-fill-color: transparent;
35
+ background-clip: text;
36
+ }
37
+ .hover-scale {
38
+ transition: transform 0.3s ease;
39
+ }
40
+ .hover-scale:hover {
41
+ transform: scale(1.02);
42
+ }
43
+ .sidebar-item {
44
+ transition: all 0.3s ease;
45
+ }
46
+ .sidebar-item:hover {
47
+ background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, transparent 100%);
48
+ border-left: 3px solid #3b82f6;
49
+ padding-left: calc(1rem - 3px);
50
+ }
51
+ .sidebar-item.active {
52
+ background: linear-gradient(90deg, rgba(59, 130, 246, 0.2) 0%, transparent 100%);
53
+ border-left: 3px solid #3b82f6;
54
+ padding-left: calc(1rem - 3px);
55
+ }
56
+ .progress-bar {
57
+ background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
58
+ transition: width 0.5s ease;
59
+ }
60
+ .token-card {
61
+ background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
62
+ border: 1px solid #3b82f6;
63
+ transition: all 0.3s ease;
64
+ }
65
+ .token-card:hover {
66
+ box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
67
+ transform: translateY(-2px);
68
+ }
69
+ .playground-input {
70
+ background: #0f0f0f;
71
+ border: 1px solid #2a2a2a;
72
+ transition: all 0.3s ease;
73
+ }
74
+ .playground-input:focus {
75
+ border-color: #3b82f6;
76
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
77
+ }
78
+ .api-key {
79
+ font-family: 'Courier New', monospace;
80
+ letter-spacing: 2px;
81
+ }
82
+ .copy-btn {
83
+ transition: all 0.3s ease;
84
+ }
85
+ .copy-btn:hover {
86
+ background: rgba(59, 130, 246, 0.2);
87
+ }
88
+ .copy-btn.copied {
89
+ background: rgba(34, 197, 94, 0.2);
90
+ color: #22c55e;
91
+ }
92
+ .voice-wave {
93
+ animation: wave 2s ease-in-out infinite;
94
+ }
95
+ @keyframes wave {
96
+ 0%, 100% { transform: scaleY(1); }
97
+ 50% { transform: scaleY(1.5); }
98
+ }
99
+ .tab-content {
100
+ animation: fadeIn 0.3s ease;
101
+ }
102
+ @keyframes fadeIn {
103
+ from { opacity: 0; transform: translateY(10px); }
104
+ to { opacity: 1; transform: translateY(0); }
105
+ }
106
+ </style>
107
+ </head>
108
+ <body class="bg-dark-bg text-gray-100" style="font-family: 'Inter', sans-serif;">
109
+ <!-- Sidebar -->
110
+ <aside class="fixed left-0 top-0 h-full w-64 bg-dark-card border-r border-dark-border z-40">
111
+ <div class="p-6">
112
+ <div class="flex items-center space-x-2 mb-8">
113
+ <span class="text-2xl font-bold gradient-text">VoiceFlow AI</span>
114
+ </div>
115
+
116
+ <nav class="space-y-2">
117
+ <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')">
118
+ <i data-feather="home" class="w-5 h-5"></i>
119
+ <span>Дашборд</span>
120
+ </a>
121
+ <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')">
122
+ <i data-feather="play-circle" class="w-5 h-5"></i>
123
+ <span>Playground</span>
124
+ </a>
125
+ <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')">
126
+ <i data-feather="key" class="w-5 h-5"></i>
127
+ <span>Токены API</span>
128
+ </a>
129
+ <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')">
130
+ <i data-feather="settings" class="w-5 h-5"></i>
131
+ <span>Настройки</span>
132
+ </a>
133
+ </nav>
134
+
135
+ <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">
136
+ <div class="text-sm text-gray-400 mb-1">Текущий план</div>
137
+ <div class="text-lg font-bold">Стандарт</div>
138
+ <div class="text-xs text-gray-500 mt-2">100,000 символов/мес</div>
139
+ </div>
140
+ </div>
141
+
142
+ <div class="absolute bottom-0 left-0 right-0 p-6 border-t border-dark-border">
143
+ <div class="flex items-center space-x-3">
144
+ <img src="http://static.photos/people/40x40/1" alt="User" class="w-10 h-10 rounded-full">
145
+ <div>
146
+ <div class="font-semibold">Александр И.</div>
147
+ <div class="text-xs text-gray-400">alex@example.com</div>
148
+ </div>
149
+ </div>
150
+ <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">
151
+ <i data-feather="log-out" class="w-4 h-4"></i>
152
+ <span>Выйти</span>
153
+ </button>
154
+ </div>
155
+ </aside>
156
+
157
+ <!-- Main Content -->
158
+ <main class="ml-64 min-h-screen">
159
+ <!-- Header -->
160
+ <header class="bg-dark-card border-b border-dark-border px-8 py-4">
161
+ <div class="flex items-center justify-between">
162
+ <h1 class="text-2xl font-bold">Личный кабинет</h1>
163
+ <div class="flex items-center space-x-4">
164
+ <button class="relative p-2 text-gray-400 hover:text-white transition">
165
+ <i data-feather="bell" class="w-5 h-5"></i>
166
+ <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
167
+ </button>
168
+ <button class="p-2 text-gray-400 hover:text-white transition">
169
+ <i data-feather="help-circle" class="w-5 h-5"></i>
170
+ </button>
171
+ </div>
172
+ </div>
173
+ </header>
174
+
175
+ <!-- Dashboard Section -->
176
+ <section id="dashboard-section" class="p-8 tab-content">
177
+ <div class="mb-8">
178
+ <h2 class="text-3xl font-bold mb-2">Обзор потребления</h2>
179
+ <p class="text-gray-400">Мониторинг использования API и статистика</p>
180
+ </div>
181
+
182
+ <!-- Stats Cards -->
183
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
184
+ <div class="bg-dark-card p-6 rounded-xl border border-dark-border hover-scale">
185
+ <div class="flex items-center justify-between mb-4">
186
+ <i data-feather="trending-up" class="w-8 h-8 text-blue-500"></i>
187
+ <span class="text-xs text-green-500 bg-green-500/20 px-2 py-1 rounded">+12%</span>
188
+ </div>
189
+ <div class="text-2xl font-bold mb-1">45,231</div>
190
+ <div class="text-sm text-gray-400">Символов использовано</div>
191
+ </div>
192
+ <div class="bg-dark-card p-6 rounded-xl border border-dark-border hover-scale">
193
+ <div class="flex items-center justify-between mb-4">
194
+ <i data-feather="activity" class="w-8 h-8 text-purple-500"></i>
195
+ <span class="text-xs text-blue-500 bg-blue-500/20 px-2 py-1 rounded">Активно</span>
196
+ </div>
197
+ <div class="text-2xl font-bold mb-1">1,234</div>
198
+ <div class="text-sm text-gray-400">Запросов сегодня</div>
199
+ </div>
200
+ <div class="bg-dark-card p-6 rounded-xl border border-dark-border hover-scale">
201
+ <div class="flex items-center justify-between mb-4">
202
+ <i data-feather="clock" class="w-8 h-8 text-green-500"></i>
203
+ <span class="text-xs text-gray-500">Среднее</span>
204
+ </div>
205
+ <div class="text-2xl font-bold mb-1">0.8s</div>
206
+ <div class="text-sm text-gray-400">Время ответа</div>
207
+ </div>
208
+ <div class="bg-dark-card p-6 rounded-xl border border-dark-border hover-scale">
209
+ <div class="flex items-center justify-between mb-4">
210
+ <i data-feather="database" class="w-8 h-8 text-orange-500"></i>
211
+ <span class="text-xs text-orange-500 bg-orange-500/20 px-2 py-1 rounded">54%</span>
212
+ </div>
213
+ <div class="text-2xl font-bold mb-1">54,769</div>
214
+ <div class="text-sm text-gray-400">Осталось символов</div>
215
+ </div>
216
+ </div>
217
+ <!-- Usage Chart -->
218
+ <div class="bg-dark-card p-6 rounded-xl border border-dark-border mb-8">
219
+ <h3 class="text-xl font-bold mb-4">Потребление за последние 7 дней</h3>
220
+ <div class="h-48">
221
+ <canvas id="usageChart"></canvas>
222
+ </div>
223
+ </div>
224
+ <!-- Recent Activity -->
225
+ <div class="bg-dark-card p-6 rounded-xl border border-dark-border">
226
+ <h3 class="text-xl font-bold mb-4">Последняя активность</h3>
227
+ <div class="space-y-4">
228
+ <div class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
229
+ <div class="flex items-center space-x-3">
230
+ <div class="w-2 h-2 bg-green-500 rounded-full"></div>
231
+ <div>
232
+ <div class="font-semibold">TTS запрос</div>
233
+ <div class="text-sm text-gray-400">Голос: Анна, 1,234 символов</div>
234
+ </div>
235
+ </div>
236
+ <div class="text-sm text-gray-500">2 мин назад</div>
237
+ </div>
238
+ <div class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
239
+ <div class="flex items-center space-x-3">
240
+ <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
241
+ <div>
242
+ <div class="font-semibold">Voice Cloning</div>
243
+ <div class="text-sm text-gray-400">Создан новый голосовой профиль</div>
244
+ </div>
245
+ </div>
246
+ <div class="text-sm text-gray-500">15 мин назад</div>
247
+ </div>
248
+ <div class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
249
+ <div class="flex items-center space-x-3">
250
+ <div class="w-2 h-2 bg-purple-500 rounded-full"></div>
251
+ <div>
252
+ <div class="font-semibold">API запрос</div>
253
+ <div class="text-sm text-gray-400">Batch обработка, 5,000 символов</div>
254
+ </div>
255
+ </div>
256
+ <div class="text-sm text-gray-500">1 час назад</div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </section>
261
+
262
+ <!-- Playground Section -->
263
+ <section id="playground-section" class="p-8 tab-content hidden">
264
+ <div class="mb-8">
265
+ <h2 class="text-3xl font-bold mb-2">Playground</h2>
266
+ <p class="text-gray-400">Тестирование возможностей VoiceFlow AI</p>
267
+ </div>
268
+
269
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
270
+ <!-- Input Panel -->
271
+ <div class="bg-dark-card p-6 rounded-xl border border-dark-border">
272
+ <h3 class="text-xl font-bold mb-4">Настройки синтеза</h3>
273
+
274
+ <!-- Tabs -->
275
+ <div class="flex mb-6">
276
+ <button onclick="switchPlaygroundTab('tts')" id="playground-tts-tab" class="flex-1 py-2 px-4 bg-blue-600 rounded-l-lg font-semibold transition">
277
+ TTS
278
+ </button>
279
+ <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">
280
+ Voice Clone
281
+ </button>
282
+ </div>
283
+
284
+ <!-- TTS Tab -->
285
+ <div id="playground-tts-content" class="space-y-4">
286
+ <div>
287
+ <label class="block text-sm text-gray-400 mb-2">Текст для синтеза</label>
288
+ <textarea id="playground-text" class="playground-input w-full h-32 p-3 rounded-lg resize-none focus:outline-none" placeholder="Введите тек��т..."></textarea>
289
+ </div>
290
+
291
+ <div>
292
+ <label class="block text-sm text-gray-400 mb-2">Голос</label>
293
+ <select class="playground-input w-full p-3 rounded-lg focus:outline-none">
294
+ <option>Анна (женский, нейтральный)</option>
295
+ <option>Михаил (мужской, глубокий)</option>
296
+ <option>Елена (женский, мягкий)</option>
297
+ <option>Дмитрий (мужской, энергичный)</option>
298
+ </select>
299
+ </div>
300
+
301
+ <div>
302
+ <label class="block text-sm text-gray-400 mb-2">Скорость речи</label>
303
+ <input type="range" min="50" max="200" value="100" class="w-full" oninput="updateSpeedLabel(this.value)">
304
+ <div class="flex justify-between text-xs text-gray-500">
305
+ <span>Медленно</span>
306
+ <span id="speed-label">100%</span>
307
+ <span>Быстро</span>
308
+ </div>
309
+ </div>
310
+
311
+ <div>
312
+ <label class="block text-sm text-gray-400 mb-2">Эмоциональная окраска</label>
313
+ <div class="grid grid-cols-3 gap-2">
314
+ <button class="py-2 px-3 bg-gray-700 hover:bg-blue-600 rounded-lg text-sm transition">Нейтрально</button>
315
+ <button class="py-2 px-3 bg-gray-700 hover:bg-blue-600 rounded-lg text-sm transition">Радостно</button>
316
+ <button class="py-2 px-3 bg-gray-700 hover:bg-blue-600 rounded-lg text-sm transition">Спокойно</button>
317
+ <button class="py-2 px-3 bg-gray-700 hover:bg-blue-600 rounded-lg text-sm transition">Энергично</button>
318
+ <button class="py-2 px-3 bg-gray-700 hover:bg-blue-600 rounded-lg text-sm transition">Серьезно</button>
319
+ <button class="py-2 px-3 bg-gray-700 hover:bg-blue-600 rounded-lg text-sm transition">Мягко</button>
320
+ </div>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- Voice Clone Tab -->
325
+ <div id="playground-clone-content" class="space-y-4 hidden">
326
+ <div>
327
+ <label class="block text-sm text-gray-400 mb-2">Загрузите образец голоса</label>
328
+ <div class="border-2 border-dashed border-gray-600 rounded-lg p-6 text-center hover:border-blue-500 transition cursor-pointer">
329
+ <i data-feather="upload-cloud" class="w-12 h-12 mx-auto mb-3 text-gray-500"></i>
330
+ <p class="text-gray-400 text-sm">Нажмите для выбора файла</p>
331
+ <p class="text-xs text-gray-500 mt-1">MP3, WAV (макс. 10MB, мин. 30 сек)</p>
332
+ </div>
333
+ </div>
334
+
335
+ <div>
336
+ <label class="block text-sm text-gray-400 mb-2">Текст для синтеза</label>
337
+ <textarea class="playground-input w-full h-32 p-3 rounded-lg resize-none focus:outline-none" placeholder="Введите текст..."></textarea>
338
+ </div>
339
+
340
+ <div class="p-3 bg-blue-600/20 border border-blue-500/30 rounded-lg">
341
+ <p class="text-sm text-blue-400">
342
+ <i data-feather="info" class="w-4 h-4 inline mr-1"></i>
343
+ Клонирование голоса требует дополнительного времени обработки (1-2 минуты)
344
+ </p>
345
+ </div>
346
+ </div>
347
+
348
+ <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">
349
+ <i data-feather="play" class="w-5 h-5"></i>
350
+ <span>Сгенерировать</span>
351
+ </button>
352
+ </div>
353
+
354
+ <!-- Output Panel -->
355
+ <div class="bg-dark-card p-6 rounded-xl border border-dark-border">
356
+ <h3 class="text-xl font-bold mb-4">Результат</h3>
357
+
358
+ <div class="mb-6">
359
+ <div class="flex items-center justify-between mb-3">
360
+ <span class="text-sm text-gray-400">Аудиоплеер</span>
361
+ <div class="flex space-x-2">
362
+ <button class="p-1 text-gray-400 hover:text-white transition">
363
+ <i data-feather="download" class="w-4 h-4"></i>
364
+ </button>
365
+ <button class="p-1 text-gray-400 hover:text-white transition">
366
+ <i data-feather="share-2" class="w-4 h-4"></i>
367
+ </button>
368
+ </div>
369
+ </div>
370
+
371
+ <div class="bg-gray-800 rounded-lg p-4">
372
+ <div class="flex items-center space-x-4 mb-3">
373
+ <button class="p-3 bg-blue-600 hover:bg-blue-700 rounded-full transition">
374
+ <i data-feather="play" class="w-5 h-5"></i>
375
+ </button>
376
+ <div class="flex-1">
377
+ <div class="h-1 bg-gray-700 rounded-full overflow-hidden">
378
+ <div class="h-full w-1/3 bg-gradient-to-r from-blue-600 to-purple-600"></div>
379
+ </div>
380
+ </div>
381
+ <span class="text-sm text-gray-400">0:45 / 2:15</span>
382
+ </div>
383
+
384
+ <!-- Voice Visualization -->
385
+ <div class="flex items-center justify-center space-x-1 h-16">
386
+ <div class="w-1 bg-blue-500 voice-wave" style="animation-delay: 0s;"></div>
387
+ <div class="w-1 bg-purple-500 voice-wave" style="animation-delay: 0.1s;"></div>
388
+ <div class="w-1 bg-blue-500 voice-wave" style="animation-delay: 0.2s;"></div>
389
+ <div class="w-1 bg-purple-500 voice-wave" style="animation-delay: 0.3s;"></div>
390
+ <div class="w-1 bg-blue-500 voice-wave" style="animation-delay: 0.4s;"></div>
391
+ <div class="w-1 bg-purple-500 voice-wave" style="animation-delay: 0.5s;"></div>
392
+ <div class="w-1 bg-blue-500 voice-wave" style="animation-delay: 0.6s;"></div>
393
+ <div class="w-1 bg-purple-500 voice-wave" style="animation-delay: 0.7s;"></div>
394
+ <div class="w-1 bg-blue-500 voice-wave" style="animation-delay: 0.8s;"></div>
395
+ <div class="w-1 bg-purple-500 voice-wave" style="animation-delay: 0.9s;"></div>
396
+ <div class="w-1 bg-blue-500 voice-wave" style="animation-delay: 1s;"></div>
397
+ <div class="w-1 bg-purple-500 voice-wave" style="animation-delay: 1.1s;"></div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <div class="space-y-3">
403
+ <div class="flex justify-between py-2 border-b border-gray-700">
404
+ <span class="text-gray-400">Длительность</span>
405
+ <span>2:15</span>
406
+ </div>
407
+ <div class="flex justify-between py-2 border-b border-gray-700">
408
+ <span class="text-gray-400">Размер файла</span>
409
+ <span>1.3 MB</span>
410
+ </div>
411
+ <div class="flex justify-between py-2 border-b border-gray-700">
412
+ <span class="text-gray-400">Формат</span>
413
+ <span>MP3, 44.1kHz, Stereo</span>
414
+ </div>
415
+ <div class="flex justify-between py-2">
416
+ <span class="text-gray-400">Символов обработано</span>
417
+ <span>1,234</span>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="mt-6 p-3 bg-green-600/20 border border-green-500/30 rounded-lg">
422
+ <p class="text-sm text-green-400">
423
+ <i data-feather="check-circle" class="w-4 h-4 inline mr-1"></i>
424
+ Синтез выполнен успешно
425
+ </p>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </section>
430
+
431
+ <!-- Tokens Section -->
432
+ <section id="tokens-section" class="p-8 tab-content hidden">
433
+ <div class="mb-8">
434
+ <h2 class="text-3xl font-bold mb-2">Управление токенами API</h2>
435
+ <p class="text-gray-400">Создавайте и управляйте ключами доступа к API</p>
436
+ </div>
437
+
438
+ <!-- Create New Token -->
439
+ <div class="bg-dark-card p-6 rounded-xl border border-dark-border mb-8">
440
+ <h3 class="text-xl font-bold mb-4">Создать новый токен</h3>
441
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
442
+ <div>
443
+ <label class="block text-sm text-gray-400 mb-2">Название токена</label>
444
+ <input type="text" class="playground-input w-full p-3 rounded-lg focus:outline-none" placeholder="Например: Mobile App">
445
+ </div>
446
+ <div>
447
+ <label class="block text-sm text-gray-400 mb-2">Права доступа</label>
448
+ <select class="playground-input w-full p-3 rounded-lg focus:outline-none">
449
+ <option>Полный доступ</option>
450
+ <option>Только TTS</option>
451
+ <option>Только Voice Cloning</option>
452
+ <option>Только чтение</option>
453
+ </select>
454
+ </div>
455
+ </div>
456
+ <div class="flex items-center space-x-4">
457
+ <button class="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-semibold transition">
458
+ Создать токен
459
+ </button>
460
+ <label class="flex items-center space-x-2">
461
+ <input type="checkbox" class="rounded">
462
+ <span class="text-sm">Установить срок действия</span>
463
+ </label>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Active Tokens -->
468
+ <div class="bg-dark-card p-6 rounded-xl border border-dark-border">
469
+ <div class="flex items-center justify-between mb-6">
470
+ <h3 class="text-xl font-bold">Активные токены</h3>
471
+ <span class="text-sm text-gray-400">3 токена</span>
472
+ </div>
473
+
474
+ <div class="space-y-4">
475
+ <!-- Token 1 -->
476
+ <div class="token-card p-4 rounded-lg">
477
+ <div class="flex items-start justify-between mb-3">
478
+ <div>
479
+ <h4 class="font-semibold mb-1">Production API</h4>
480
+ <p class="text-sm text-gray-400">Создан: 15 янв 2024</p>
481
+ </div>
482
+ <span class="px-2 py-1 bg-green-600/20 text-green-400 text-xs rounded">Активен</span>
483
+ </div>
484
+ <div class="flex items-center space-x-3 mb-3">
485
+ <code class="api-key text-xs bg-gray-800 px-3 py-1 rounded flex-1">vf_sk_live_4k2j8h9g3f7d6s5a...</code>
486
+ <button onclick="copyToken(this)" class="copy-btn p-2 rounded transition">
487
+ <i data-feather="copy" class="w-4 h-4"></i>
488
+ </button>
489
+ </div>
490
+ <div class="flex items-center justify-between">
491
+ <div class="text-sm text-gray-400">
492
+ Использовано: <span class="text-white">23,451 / 100,000</span> запросов
493
+ </div>
494
+ <div class="flex space-x-2">
495
+ <button class="text-gray-400 hover:text-white transition">
496
+ <i data-feather="edit-2" class="w-4 h-4"></i>
497
+ </button>
498
+ <button class="text-gray-400 hover:text-red-500 transition">
499
+ <i data-feather="trash-2" class="w-4 h-4"></i>
500
+ </button>
501
+ </div>
502
+ </div>
503
+ </div>
504
+
505
+ <!-- Token 2 -->
506
+ <div class="token-card p-4 rounded-lg">
507
+ <div class="flex items-start justify-between mb-3">
508
+ <div>
509
+ <h4 class="font-semibold mb-1">Development</h4>
510
+ <p class="text-sm text-gray-400">Создан: 10 янв 2024</p>
511
+ </div>
512
+ <span class="px-2 py-1 bg-green-600/20 text-green-400 text-xs rounded">Активен</span>
513
+ </div>
514
+ <div class="flex items-center space-x-3 mb-3">
515
+ <code class="api-key text-xs bg-gray-800 px-3 py-1 rounded flex-1">vf_sk_test_8m5n1j2k9l8p7o6q...</code>
516
+ <button onclick="copyToken(this)" class="copy-btn p-2 rounded transition">
517
+ <i data-feather="copy" class="w-4 h-4"></i>
518
+ </button>
519
+ </div>
520
+ <div class="flex items-center justify-between">
521
+ <div class="text-sm text-gray-400">
522
+ Использовано: <span class="text-white">5,234 / 10,000</span> запросов
523
+ </div>
524
+ <div class="flex space-x-2">
525
+ <button class="text-gray-400 hover:text-white transition">
526
+ <i data-feather="edit-2" class="w-4 h-4"></i>
527
+ </button>
528
+ <button class="text-gray-400 hover:text-red-500 transition">
529
+ <i data-feather="trash-2" class="w-4 h-4"></i>
530
+ </button>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <!-- Token 3 -->
536
+ <div class="token-card p-4 rounded-lg">
537
+ <div class="flex items-start justify-between mb-3">
538
+ <div>
539
+ <h4 class="font-semibold mb-1">Mobile App v2</h4>
540
+ <p class="text-sm text-gray-400">Создан: 5 янв 2024</p>
541
+ </div>
542
+ <span class="px-2 py-1 bg-yellow-600/20 text-yellow-400 text-xs rounded">Истекает через 7 дней</span>
543
+ </div>
544
+ <div class="flex items-center space-x-3 mb-3">
545
+ <code class="api-key text-xs bg-gray-800 px-3 py-1 rounded flex-1">vf_sk_live_2x9c8v7b6n5m4k3j...</code>
546
+ <button onclick="copyToken(this)" class="copy-btn p-2 rounded transition">
547
+ <i data-feather="copy" class="w-4 h-4"></i>
548
+ </button>
549
+ </div>
550
+ <div class="flex items-center justify-between">
551
+ <div class="text-sm text-gray-400">
552
+ Использовано: <span class="text-white">8,912 / 50,000</span> запросов
553
+ </div>
554
+ <div class="flex space-x-2">
555
+ <button class="text-gray-400 hover:text-white transition">
556
+ <i data-feather="edit-2" class="w-4 h-4"></i>
557
+ </button>
558
+ <button class="text-gray-400 hover:text-red-500 transition">
559
+ <i data-feather="trash-2" class="w-4 h-4"></i>
560
+ </button>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </section>
567
+
568
+ <!-- Settings Section -->
569
+ <section id="settings-section" class="p-8 tab-content hidden">
570
+ <div class="mb-8">
571
+ <h2 class="text-3xl font-bold mb-2">Настройки</h2>
572
+ <p class="text-gray-400">Управление профилем и предпочтениями</p>
573
+ </div>
574
+
575
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
576
+ <!-- Profile Settings -->
577
+ <div class="lg:col-span-2 space-y-6">
578
+ <div class="bg-dark-card p-6 rounded-xl border border-dark-border">
579
+ <h3 class="text-xl font-bold mb-4">Профиль</h3>
580
+ <div class="space-y-4">
581
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
582
+ <div>
583
+ <label class="block text-sm text-gray-400 mb-2">Имя</label>
584
+ <input type="text" class="playground-input w-full p-3 rounded-lg focus:outline-none" value="Александр">
585
+ </div>
586
+ <div>
587
+ <label class="block text-sm text-gray-400 mb-2">Фамилия</label>
588
+ <input type="text" class="playground-input w-full p-3 rounded-lg focus:outline-none" value="Иванов">
589
+ </div>
590
+ </div>
591
+ <div>
592
+ <label class="block text-sm text-gray-400 mb-2">Email</label>
593
+ <input type="email" class="playground-input w-full p-3 rounded-lg focus:outline-none" value="alex@example.com">
594
+ </div>
595
+ <div>
596
+ <label class="block text-sm text-gray-400 mb-2">Компания</label>
597
+ <input type="text" class="playground-input w-full p-3 rounded-lg focus:outline-none" placeholder="Не указано">
598
+ </div>
599
+ <button class="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-semibold transition">
600
+ Сохранить изменения
601
+ </button>
602
+ </div>
603
+ </div>
604
+
605
+ <div class="bg-dark-card p-6 rounded-xl border border-dark-border">
606
+ <h3 class="text-xl font-bold mb-4">Уведомления</h3>
607
+ <div class="space-y-4">
608
+ <label class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg cursor-pointer">
609
+ <div>
610
+ <div class="font-semibold">Email уведомления</div>
611
+ <div class="text-sm text-gray-400">Получать уведомления о статусе аккаунта</div>
612
+ </div>
613
+ <input type="checkbox" checked class="w-5 h-5 rounded">
614
+ </label>
615
+ <label class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg cursor-pointer">
616
+ <div>
617
+ <div class="font-semibold">Оповещения об использовании</div>
618
+ <div class="text-sm text-gray-400">Уведомлять при достижении 80% лимита</div>
619
+ </div>
620
+ <input type="checkbox" checked class="w-5 h-5 rounded">
621
+ </label>
622
+ <label class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg cursor-pointer">
623
+ <div>
624
+ <div class="font-semibold">Новости и обновления</div>
625
+ <div class="text-sm text-gray-400">Информация о новых функциях и улучшениях</div>
626
+ </div>
627
+ <input type="checkbox" class="w-5 h-5 rounded">
628
+ </label>
629
+ </div>
630
+ </div>
631
+
632
+ <div class="bg-dark-card p-6 rounded-xl border border-dark-border">
633
+ <h3 class="text-xl font-bold mb-4">Безопасность</h3>
634
+ <div class="space-y-4">
635
+ <button class="w-full p-3 bg-gray-800/50 hover:bg-gray-700 rounded-lg text-left transition flex items-center justify-between">
636
+ <div>
637
+ <div class="font-semibold">Изменить пароль</div>
638
+ <div class="text-sm text-gray-400">Последнее изменение: 30 дней назад</div>
639
+ </div>
640
+ <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
641
+ </button>
642
+ <button class="w-full p-3 bg-gray-800/50 hover:bg-gray-700 rounded-lg text-left transition flex items-center justify-between">
643
+ <div>
644
+ <div class="font-semibold">Двухфакторная аутентификация</div>
645
+ <div class="text-sm text-gray-400">Не настроена</div>
646
+ </div>
647
+ <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
648
+ </button>
649
+ <button class="w-full p-3 bg-gray-800/50 hover:bg-gray-700 rounded-lg text-left transition flex items-center justify-between">
650
+ <div>
651
+ <div class="font-semibold">Активные сессии</div>
652
+ <div class="text-sm text-gray-400">3 активные сессии</div>
653
+ </div>
654
+ <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
655
+ </button>
656
+ </div>
657
+ </div>
658
+ </div>
659
+
660
+ <!-- Sidebar -->
661
+ <div class="space-y-6">
662
+ <div class="bg-dark-card p-6 rounded-xl border border-dark-border">
663
+ <h3 class="text-xl font-bold mb-4">Текущий план</h3>
664
+ <div class="text-center mb-4">
665
+ <div class="text-3xl font-bold gradient-text mb-2">Стандарт</div>
666
+ <div class="text-gray-400">₽2,990/мес</div>
667
+ </div>
668
+ <div class="space-y-3 mb-4">
669
+ <div class="flex justify-between text-sm">
670
+ <span class="text-gray-400">Символов в месяц</span>
671
+ <span>100,000</span>
672
+ </div>
673
+ <div class="flex justify-between text-sm">
674
+ <span class="text-gray-400">Голоса</span>
675
+ <span>Премиум</span>
676
+ </div>
677
+ <div class="flex justify-between text-sm">
678
+ <span class="text-gray-400">API доступ</span>
679
+ <span>✓</span>
680
+ </div>
681
+ </div>
682
+ <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">
683
+ Обновить план
684
+ </button>
685
+ </div>
686
+
687
+ <div class="bg-dark-card p-6 rounded-xl border border-dark-border">
688
+ <h3 class="text-xl font-bold mb-4">Быстрые действия</h3>
689
+ <div class="space-y-3">
690
+ <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">
691
+ <i data-feather="download" class="w-5 h-5 text-blue-500"></i>
692
+ <span>Скачать биллинг</span>
693
+ </button>
694
+ <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">
695
+ <i data-feather="file-text" class="w-5 h-5 text-purple-500"></i>
696
+ <span>API документация</span>
697
+ </button>
698
+ <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">
699
+ <i data-feather="message-circle" class="w-5 h-5 text-green-500"></i>
700
+ <span>Поддержка</span>
701
+ </button>
702
+ </div>
703
+ </div>
704
+ </div>
705
+ </div>
706
+ </section>
707
+ </main>
708
+
709
+ <script>
710
+ // Initialize Feather Icons
711
+ feather.replace();
712
+
713
+ // Section Navigation
714
+ function showSection(section) {
715
+ // Hide all sections
716
+ document.querySelectorAll('[id$="-section"]').forEach(sec => {
717
+ sec.classList.add('hidden');
718
+ });
719
+
720
+ // Show selected section
721
+ document.getElementById(section + '-section').classList.remove('hidden');
722
+
723
+ // Update sidebar active state
724
+ document.querySelectorAll('.sidebar-item').forEach(item => {
725
+ item.classList.remove('active');
726
+ });
727
+ event.target.closest('.sidebar-item').classList.add('active');
728
+ }
729
+
730
+ // Playground Tabs
731
+ function switchPlaygroundTab(tab) {
732
+ if (tab === 'tts') {
733
+ document.getElementById('playground-tts-content').classList.remove('hidden');
734
+ document.getElementById('playground-clone-content').classList.add('hidden');
735
+ document.getElementById('playground-tts-tab').classList.add('bg-blue-600');
736
+ document.getElementById('playground-tts-tab').classList.remove('bg-gray-700');
737
+ document.getElementById('playground-clone-tab').classList.remove('bg-blue-600');
738
+ document.getElementById('playground-clone-tab').classList.add('bg-gray-700');
739
+ } else {
740
+ document.getElementById('playground-tts-content').classList.add('hidden');
741
+ document.getElementById('playground-clone-content').classList.remove('hidden');
742
+ document.getElementById('playground-clone-tab').classList.add('bg-blue-600');
743
+ document.getElementById('playground-clone-tab').classList.remove('bg-gray-700');
744
+ document.getElementById('playground-tts-tab').classList.remove('bg-blue-600');
745
+ document.getElementById('playground-tts-tab').classList.add('bg-gray-700');
746
+ }
747
+ }
748
+
749
+ // Update Speed Label
750
+ function updateSpeedLabel(value) {
751
+ document.getElementById('speed-label').textContent = value + '%';
752
+ }
753
+
754
+ // Copy Token
755
+ function copyToken(button) {
756
+ const token = button.previousElementSibling.textContent;
757
+ navigator.clipboard.writeText(token);
758
+
759
+ button.classList.add('copied');
760
+ const originalIcon = button.innerHTML;
761
+ button.innerHTML = '<i data-feather="check" class="w-4 h-4"></i>';
762
+ feather.replace();
763
+
764
+ setTimeout(() => {
765
+ button.classList.remove('copied');
766
+ button.innerHTML = originalIcon;
767
+ feather.replace();
768
+ }, 2000);
769
+ }
770
+ // Initialize Chart
771
+ const ctx = document.getElementById('usageChart');
772
+ if (ctx) {
773
+ new Chart(ctx, {
774
+ type: 'line',
775
+ data: {
776
+ labels: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
777
+ datasets: [{
778
+ label: 'Использовано символов',
779
+ data: [12000, 15000, 8000, 18000, 22000, 16000, 14000],
780
+ borderColor: 'rgb(59, 130, 246)',
781
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
782
+ tension: 0.4
783
+ }]
784
+ },
785
+ options: {
786
+ responsive: true,
787
+ maintainAspectRatio: false,
788
+ plugins: {
789
+ legend: {
790
+ display: false
791
+ }
792
+ },
793
+ scales: {
794
+ y: {
795
+ beginAtZero: true,
796
+ grid: {
797
+ color: 'rgba(255, 255, 255, 0.1)'
798
+ },
799
+ ticks: {
800
+ color: 'rgba(255, 255, 255, 0.5)'
801
+ }
802
+ },
803
+ x: {
804
+ grid: {
805
+ color: 'rgba(255, 255, 255, 0.1)'
806
+ },
807
+ ticks: {
808
+ color: 'rgba(255, 255, 255, 0.5)'
809
+ }
810
+ }
811
+ }
812
+ }
813
+ });
814
+ }
815
+ // Initialize random text for playground
816
+ const randomTexts = [
817
+ "Искусственный интеллект меняет наш мир каждый день. Технологии синтеза речи становятся все более совершенными.",
818
+ "Будущее голосовых технологий уже здесь. С помощью нейронных сетей мы можем клонировать голоса.",
819
+ "Преобразование текста в речь - это не просто технология, это искусство.",
820
+ "Инновации в области AI позволяют нам создавать голоса, которые неотличимы от человеческих."
821
+ ];
822
+
823
+ // Set random text on load
824
+ window.addEventListener('load', () => {
825
+ const playgroundText = document.getElementById('playground-text');
826
+ if (playgroundText) {
827
+ playgroundText.value = randomTexts[Math.floor(Math.random() * randomTexts.length)];
828
+ }
829
+ });
830
+ </script>
831
+ </body>
832
  </html>