Hugging Face's logo

Spaces:
Nasa1423
/
doctype-html-h
Running

App Files Community
Nasa1423 commited on
Commit
8dccb36
·
verified ·
1 Parent(s): bd0dd79

Проанализируй проект

Browse files

<!DOCTYPE html>
<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>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
'dark-bg': '#0a0a0a',
'dark-card': '#1a1a1a',
'dark-border': '#2a2a2a'
}
}
}
}
</script>
<style>
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease;
}
.welcome-text {
font-size: 3rem;
font-weight: bold;
color: white;
opacity: 0;
animation: fadeIn 1s ease forwards;
}
.sub-text {
font-size: 2rem;
color: white;
opacity: 0;
animation: fadeIn 1s ease forwards;
}


@keyframes
 fadeIn {
to {
opacity: 1;
}
}
</style>
<style>
html {
scroll-behavior: smooth;
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 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.05);
}
.rotate-180 {
transform: rotate(180deg);
}
.demo-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
.floating-blob {
position: absolute;
border-radius: 50%;
filter: blur(40px);
opacity: 0.3;
}
.blob1 {
width: 300px;
height: 300px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
top: 10%;
left: 10%;
}

.blob2 {
width: 250px;
height: 250px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
top: 60%;
right: 10%;
}

.blob3 {
width: 200px;
height: 200px;
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
bottom: 10%;
left: 30%;
}

.blob4 {
width: 350px;
height: 350px;
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
top: 30%;
right: 30%;
}

.blob5 {
width: 280px;
height: 280px;
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
bottom: 20%;
right: 20%;
}
.header-gradient {
background: linear-gradient(135deg, #00d4ff 0%, #ff00ff 50%, #00ff88 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.8));
animation: glow 2s ease-in-out infinite alternate;
}


@keyframes
 glow {
from {
filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.8));
}
to {
filter: drop-shadow(0 0 40px rgba(255, 0, 255, 0.8));
}
}
.btn-glow {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.btn-glow::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-glow:hover::before {
left: 100%;
}
.btn-glow:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.5);
}
.faq-item {
position: relative;
}
.faq-answer {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 50;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
border: 2px solid #3b82f6;
border-radius: 0.75rem;
padding: 1rem;
margin-top: 0.5rem;
box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}
.faq-item:hover .faq-answer {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.faq-question {
cursor: pointer;
}
.faq-question svg {
display: none;
}
</style>
</head>
<body class="bg-dark-bg text-white" style="font-family: 'Inter', sans-serif;">
<!-- Loading Screen -->
<div id="loading-screen" class="loading-screen">
<div id="welcome" class="welcome-text" style="display: none;">Добро пожаловать</div>
<div id="subtext" class="sub-text" style="display: none;">в полный пиздец</div>
</div>
<!-- Header -->
<header class="fixed top-0 w-full bg-dark-bg/90 backdrop-blur-md border-b border-dark-border z-50">
<nav class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<span class="text-3xl font-bold header-gradient">VoiceFlow AI</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#demo" class="hover:text-blue-500 transition font-bold">Демо</a>
<a href="#features" class="hover:text-blue-500 transition font-bold">Возможности</a>
<a href="#pricing" class="hover:text-blue-500 transition font-bold">Тарифы</a>
<a href="#about" class="hover:text-blue-500 transition">О нас</a>
<a href="#contacts" class="hover:text-blue-500 transition">Контакты</a>
<a href="#faq" class="hover:text-blue-500 transition">FAQ</a>
<button class="btn-glow bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 hover:from-blue-700 hover:via-purple-700 hover:to-pink-700 px-8 py-3 rounded-lg font-semibold text-white shadow-lg">
Начать
</button>
</div>
<button id="mobile-menu-btn" class="md:hidden">
<i data-feather="menu" class="w-6 h-6"></i>
</button>
</div>
</nav>
</header>

<!-- Mobile Menu -->
<div id="mobile-menu" class="fixed inset-0 bg-dark-bg/95 z-40 hidden">
<div class="flex flex-col items-center justify-center h-full space-y-8">
<a href="#demo" class="text-2xl hover:text-blue-500 transition font-bold">Демо</a>
<a href="#features" class="text-2xl hover:text-blue-500 transition font-bold">Возможности</a>
<a href="#pricing" class="text-2xl hover:text-blue-500 transition font-bold">Тарифы</a>
<a href="#about" class="text-2xl hover:text-blue-500 transition">О нас</a>
<a href="#contacts" class="text-2xl hover:text-blue-500 transition">Контакты</a>
<a href="#faq" class="text-2xl hover:text-blue-500 transition">FAQ</a>
<button class="btn-glow bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 hover:from-blue-700 hover:via-purple-700 hover:to-pink-700 px-10 py-4 rounded-lg font-bold text-xl text-white shadow-xl">
Начать
</button>
</div>
</div>
<!-- Demo Section -->
<section id="demo" class="min-h-screen pt-32 pb-20 px-6 flex items-center relative">
<div class="demo-bg">
<div class="floating-blob blob1"></div>
<div class="floating-blob blob2"></div>
<div class="floating-blob blob3"></div>
<div class="floating-blob blob4"></div>
<div class="floating-blob blob5"></div>
</div>
<div class="container mx-auto">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h1 class="text-5xl md:text-6xl font-bold mb-6">
Преобразуйте текст в <span class="gradient-text">естественную речь</span>
</h1>
<p class="text-gray-300 text-lg mb-8">
Технология VoiceFlow AI обеспечивает сверхреалистичное преобразование текста в речь с использованием более 100 голосов и клонированием голоса. Технология использует передовые нейронные сети для передачи интонаци�

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