|
|
<!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;"> |
|
|
|
|
|
<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 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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<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 голосов и клонированием голоса. Технология использует передовые нейронные сети для передачи интонаций и эмоций, максимально приближенных к человеческим. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="check-circle" class="w-5 h-5 text-green-500"></i> |
|
|
<span>100+ голосов</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="check-circle" class="w-5 h-5 text-green-500"></i> |
|
|
<span>Клонирование голоса</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="check-circle" class="w-5 h-5 text-green-500"></i> |
|
|
<span>AI технологии</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-dark-card rounded-2xl p-8 border-2 border-blue-500/50 shadow-xl shadow-blue-500/20"> |
|
|
<div class="flex mb-6"> |
|
|
<button id="tts-tab" class="btn-glow flex-1 py-3 px-4 bg-gradient-to-r from-blue-600 to-purple-600 rounded-l-lg font-semibold transition"> |
|
|
TTS |
|
|
</button> |
|
|
<button id="voice-clone-tab" class="btn-glow flex-1 py-3 px-4 bg-dark-bg rounded-r-lg font-semibold transition hover:bg-gradient-to-r hover:from-gray-700 hover:to-gray-800"> |
|
|
Voice Cloning |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="tts-mode" class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-2">Текст для озвучивания</label> |
|
|
<textarea id="tts-text" class="w-full h-32 p-4 bg-dark-bg border border-dark-border rounded-lg focus:border-blue-500 focus:outline-none resize-none" placeholder="Введите текст..."></textarea> |
|
|
</div> |
|
|
<button id="random-text-tts" class="text-blue-500 hover:text-blue-400 transition flex items-center space-x-2"> |
|
|
<i data-feather="shuffle" class="w-4 h-4"></i> |
|
|
<span>Случайный текст</span> |
|
|
</button> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-2">Выбор голоса</label> |
|
|
<select class="w-full p-3 bg-dark-bg border border-dark-border rounded-lg focus:border-blue-500 focus:outline-none"> |
|
|
<option>Анна (женский)</option> |
|
|
<option>Михаил (мужской)</option> |
|
|
<option>Елена (женский)</option> |
|
|
<option>Дмитрий (мужской)</option> |
|
|
<option>Ольга (женский)</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="voice-clone-mode" class="space-y-4 hidden"> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-2">Загрузите образец голоса</label> |
|
|
<div class="border-2 border-dashed border-dark-border rounded-lg p-8 text-center hover:border-blue-500 transition cursor-pointer"> |
|
|
<i data-feather="upload" class="w-12 h-12 mx-auto mb-4 text-gray-500"></i> |
|
|
<p class="text-gray-400">Перетащите файл сюда или нажмите для выбора</p> |
|
|
<p class="text-sm text-gray-500 mt-2">MP3, WAV (макс. 10MB)</p> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-2">Текст для озвучивания</label> |
|
|
<textarea id="clone-text" class="w-full h-32 p-4 bg-dark-bg border border-dark-border rounded-lg focus:border-blue-500 focus:outline-none resize-none" placeholder="Введите текст..."></textarea> |
|
|
</div> |
|
|
<button id="random-text-clone" class="text-blue-500 hover:text-blue-400 transition flex items-center space-x-2"> |
|
|
<i data-feather="shuffle" class="w-4 h-4"></i> |
|
|
<span>Случайный текст</span> |
|
|
</button> |
|
|
</div> |
|
|
<button class="btn-glow w-full mt-6 bg-gradient-to-r from-cyan-500 via-blue-600 to-purple-600 hover:from-cyan-600 hover:via-blue-700 hover:to-purple-700 py-4 rounded-lg font-bold text-lg shadow-xl transform transition-all duration-300 hover:scale-105"> |
|
|
<span class="relative z-10">✨ Сгенерировать звук ✨</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="features" class="py-20 px-6 bg-dark-card"> |
|
|
<div class="container mx-auto"> |
|
|
<h2 class="text-4xl font-bold text-center mb-12">Возможности</h2> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-dark-bg p-8 rounded-xl border-2 border-dark-border hover:border-blue-500 hover:shadow-lg hover:shadow-blue-500/20 transition hover-scale"> |
|
|
<i data-feather="cpu" class="w-12 h-12 text-blue-500 mb-4"></i> |
|
|
<h3 class="text-xl font-bold mb-3">Нейронные сети</h3> |
|
|
<p class="text-gray-400">Используем передовые deep learning модели для создания максимально естественного звучания</p> |
|
|
</div> |
|
|
<div class="bg-dark-bg p-8 rounded-xl border-2 border-dark-border hover:border-blue-500 hover:shadow-lg hover:shadow-blue-500/20 transition hover-scale"> |
|
|
<i data-feather="globe" class="w-12 h-12 text-blue-500 mb-4"></i> |
|
|
<h3 class="text-xl font-bold mb-3">Мультиязычность</h3> |
|
|
<p class="text-gray-400">Поддержка более 30 языков с сохранением акцента и интонаций оригинала</p> |
|
|
</div> |
|
|
<div class="bg-dark-bg p-8 rounded-xl border-2 border-dark-border hover:border-blue-500 hover:shadow-lg hover:shadow-blue-500/20 transition hover-scale"> |
|
|
<i data-feather="zap" class="w-12 h-12 text-blue-500 mb-4"></i> |
|
|
<h3 class="text-xl font-bold mb-3">Мгновенная генерация</h3> |
|
|
<p class="text-gray-400">Создавайте аудио в реальном времени с минимальной задержкой</p> |
|
|
</div> |
|
|
<div class="bg-dark-bg p-8 rounded-xl border-2 border-dark-border hover:border-blue-500 hover:shadow-lg hover:shadow-blue-500/20 transition hover-scale"> |
|
|
<i data-feather="users" class="w-12 h-12 text-blue-500 mb-4"></i> |
|
|
<h3 class="text-xl font-bold mb-3">Персонализация</h3> |
|
|
<p class="text-gray-400">Адаптируйте скорость, тон и эмоциональную окраску голоса под ваши задачи</p> |
|
|
</div> |
|
|
<div class="bg-dark-bg p-8 rounded-xl border-2 border-dark-border hover:border-blue-500 hover:shadow-lg hover:shadow-blue-500/20 transition hover-scale"> |
|
|
<i data-feather="cloud" class="w-12 h-12 text-blue-500 mb-4"></i> |
|
|
<h3 class="text-xl font-bold mb-3">API интеграция</h3> |
|
|
<p class="text-gray-400">Легко интегрируйте наши технологии в ваши приложения через RESTful API</p> |
|
|
</div> |
|
|
<div class="bg-dark-bg p-8 rounded-xl border-2 border-dark-border hover:border-blue-500 hover:shadow-lg hover:shadow-blue-500/20 transition hover-scale"> |
|
|
<i data-feather="shield" class="w-12 h-12 text-blue-500 mb-4"></i> |
|
|
<h3 class="text-xl font-bold mb-3">Безопасность</h3> |
|
|
<p class="text-gray-400">Ваши данные защищены шифрованием и соответствуют стандартам GDPR</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="pricing" class="py-20 px-6"> |
|
|
<div class="container mx-auto"> |
|
|
<h2 class="text-4xl font-bold text-center mb-12">Тарифы</h2> |
|
|
<div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto"> |
|
|
<div class="bg-dark-card p-10 rounded-xl border border-dark-border hover:border-blue-500 transition transform"> |
|
|
<h3 class="text-3xl font-bold mb-4">Базовый</h3> |
|
|
<div class="text-5xl font-bold mb-6"> |
|
|
₽990<span class="text-xl text-gray-400">/мес</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500"></i> |
|
|
<span>10,000 символов</span> |
|
|
</li> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500"></i> |
|
|
<span>Базовые голоса</span> |
|
|
</li> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500"></i> |
|
|
<span>MP3 экспорт</span> |
|
|
</li> |
|
|
<li class="flex items-center space-x-2 text-gray-500"> |
|
|
<i data-feather="x" class="w-5 h-5"></i> |
|
|
<span>Клонирование голоса</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="btn-glow w-full py-3 border-2 border-blue-500 rounded-lg hover:bg-gradient-to-r hover:from-blue-500 hover:to-purple-500 hover:text-white font-semibold transition-all duration-300"> |
|
|
Выбрать план |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-gradient-to-b from-blue-600/20 to-transparent p-10 rounded-xl border-2 border-blue-500 relative hover-scale transform"> |
|
|
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-blue-600 px-4 py-1 rounded-full text-sm"> |
|
|
Популярный |
|
|
</div> |
|
|
<h3 class="text-3xl font-bold mb-4">Стандарт</h3> |
|
|
<div class="text-5xl font-bold mb-6"> |
|
|
₽2,990<span class="text-xl text-gray-400">/мес</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500"></i> |
|
|
<span>100,000 символов</span> |
|
|
</li> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500"></i> |
|
|
<span>Премиум голоса</span> |
|
|
</li> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500"></i> |
|
|
<span>Все форматы</span> |
|
|
</li> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500"></i> |
|
|
<span>Клонирование голоса</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="btn-glow w-full py-3 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 rounded-lg font-bold text-white shadow-lg transition-all duration-300"> |
|
|
Выбрать план |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-dark-card p-10 rounded-xl border border-dark-border hover:border-blue-500 transition transform"> |
|
|
<h3 class="text-3xl font-bold mb-4">Максимум</h3> |
|
|
<div class="text-5xl font-bold mb-6"> |
|
|
₽9,990<span class="text-xl text-gray-400">/мес</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500"></i> |
|
|
<span>500,000 символов</span> |
|
|
</li> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500"></i> |
|
|
<span>Все голоса</span> |
|
|
</li> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500"></i> |
|
|
<span>API доступ</span> |
|
|
</li> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500"></i> |
|
|
<span>Клонирование голоса</span> |
|
|
</li> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500"></i> |
|
|
<span>Приоритетная поддержка</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="btn-glow w-full py-3 border-2 border-blue-500 rounded-lg hover:bg-gradient-to-r hover:from-blue-500 hover:to-purple-500 hover:text-white font-semibold transition-all duration-300"> |
|
|
Выбрать план |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="about" class="py-20 px-6 bg-dark-card"> |
|
|
<div class="container mx-auto"> |
|
|
<h2 class="text-4xl font-bold text-center mb-12">О нас</h2> |
|
|
<div class="grid md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto mb-16"> |
|
|
<div class="order-2 md:order-1"> |
|
|
<p class="text-gray-300 text-lg mb-6"> |
|
|
VoiceFlow AI - это команда энтузиастов и экспертов в области искусственного интеллекта, объединивших усилия для создания революционной технологии синтеза речи. |
|
|
</p> |
|
|
<p class="text-gray-300 text-lg mb-6"> |
|
|
Наша миссия - сделать технологии голосового синтеза доступными для всех, от индивидуальных создателей контента до крупных корпораций. Мы верим, что голос - это будущее взаимодействия человека с технологиями. |
|
|
</p> |
|
|
</div> |
|
|
<div class="order-1 md:order-2"> |
|
|
<div class="grid grid-cols-2 gap-6"> |
|
|
<div class="text-center"> |
|
|
<div class="text-4xl font-bold text-blue-500 mb-2">50K+</div> |
|
|
<div class="text-gray-400">Активных пользователей</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-4xl font-bold text-blue-500 mb-2">100+</div> |
|
|
<div class="text-gray-400">Голосовых моделей</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-4xl font-bold text-blue-500 mb-2">30+</div> |
|
|
<div class="text-gray-400">Поддерживаемых языков</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-4xl font-bold text-blue-500 mb-2">99.9%</div> |
|
|
<div class="text-gray-400">Время работы</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<h3 class="text-2xl font-bold text-center mb-8">Наша команда</h3> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="text-center"> |
|
|
<img src="http://static.photos/people/200x200/1" alt="Team member" class="w-32 h-32 rounded-full mx-auto mb-4"> |
|
|
<h4 class="font-semibold mb-1">Александр Иванов</h4> |
|
|
<p class="text-gray-400 text-sm">CEO & Founder</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<img src="http://static.photos/people/200x200/2" alt="Team member" class="w-32 h-32 rounded-full mx-auto mb-4"> |
|
|
<h4 class="font-semibold mb-1">Мария Петрова</h4> |
|
|
<p class="text-gray-400 text-sm">CTO</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<img src="http://static.photos/people/200x200/3" alt="Team member" class="w-32 h-32 rounded-full mx-auto mb-4"> |
|
|
<h4 class="font-semibold mb-1">Дмитрий Сидоров</h4> |
|
|
<p class="text-gray-400 text-sm">Lead AI Engineer</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="contacts" class="py-20 px-6"> |
|
|
<div class="container mx-auto max-w-6xl"> |
|
|
<h2 class="text-4xl font-bold text-center mb-12">Контакты</h2> |
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
<div class="space-y-6"> |
|
|
<div class="bg-dark-card p-6 rounded-xl border border-dark-border"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<i data-feather="mail" class="w-8 h-8 text-blue-500"></i> |
|
|
<div> |
|
|
<div class="text-sm text-gray-400">Email</div> |
|
|
<div class="text-lg">[email protected]</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-dark-card p-6 rounded-xl border border-dark-border"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<i data-feather="phone" class="w-8 h-8 text-blue-500"></i> |
|
|
<div> |
|
|
<div class="text-sm text-gray-400">Телефон</div> |
|
|
<div class="text-lg">+7 (495) 123-45-67</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-dark-card p-6 rounded-xl border border-dark-border"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<i data-feather="map-pin" class="w-8 h-8 text-blue-500"></i> |
|
|
<div> |
|
|
<div class="text-sm text-gray-400">Адрес</div> |
|
|
<div class="text-lg">Москва, ул. Технологическая, 42</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-dark-card p-8 rounded-xl border border-dark-border"> |
|
|
<h3 class="text-2xl font-bold mb-6">Обратная связь</h3> |
|
|
<form class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-2">Имя</label> |
|
|
<input type="text" class="w-full p-3 bg-dark-bg border border-dark-border rounded-lg focus:border-blue-500 focus:outline-none" placeholder="Ваше имя"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-2">Email</label> |
|
|
<input type="email" class="w-full p-3 bg-dark-bg border border-dark-border rounded-lg focus:border-blue-500 focus:outline-none" placeholder="[email protected]"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-2">Тема</label> |
|
|
<input type="text" class="w-full p-3 bg-dark-bg border border-dark-border rounded-lg focus:border-blue-500 focus:outline-none" placeholder="Тема сообщения"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-2">Сообщение</label> |
|
|
<textarea class="w-full h-32 p-3 bg-dark-bg border border-dark-border rounded-lg focus:border-blue-500 focus:outline-none resize-none" placeholder="Ваш сообщение..."></textarea> |
|
|
</div> |
|
|
<button type="submit" class="btn-glow w-full 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 py-3 rounded-lg font-bold text-white shadow-lg transition-all duration-300"> |
|
|
📧 Отправить сообщение |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="faq" class="py-20 px-6 bg-dark-card"> |
|
|
<div class="container mx-auto max-w-6xl"> |
|
|
<h2 class="text-4xl font-bold text-center mb-12">FAQ</h2> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20"> |
|
|
<div class="faq-question"> |
|
|
<span class="font-semibold text-lg">Как работает технология клонирования голоса?</span> |
|
|
</div> |
|
|
<div class="faq-answer text-gray-300 text-sm"> |
|
|
Наша технология анализирует аудиообразец длительностью от 30 секунд, выделяет уникальные характеристики голоса и создает цифровую модель. Затем эта модель используется для синтеза новой речи с сохранением интонаций и тембра оригинала. |
|
|
</div> |
|
|
</div> |
|
|
<div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20"> |
|
|
<div class="faq-question"> |
|
|
<span class="font-semibold text-lg">Какие форматы файлов поддерживаются?</span> |
|
|
</div> |
|
|
<div class="faq-answer text-gray-300 text-sm"> |
|
|
Мы поддерживаем импорт аудио в форматах MP3, WAV, M4A, FLAC. Экспорт генерированной речи доступен в MP3, WAV, OGG. Максимальный размер файла для загрузки - 50MB. |
|
|
</div> |
|
|
</div> |
|
|
<div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20"> |
|
|
<div class="faq-question"> |
|
|
<span class="font-semibold text-lg">Можно ли использовать сгенерированный голос в коммерческих целях?</span> |
|
|
</div> |
|
|
<div class="faq-answer text-gray-300 text-sm"> |
|
|
Да, все тарифные планы включают коммерческую лицензию на использование сгенерированного аудио. Вы можете использовать его в подкастах, видео, рекламных материалах и других коммерческих проектах. |
|
|
</div> |
|
|
</div> |
|
|
<div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20"> |
|
|
<div class="faq-question"> |
|
|
<span class="font-semibold text-lg">Как быстро генерируется аудио?</span> |
|
|
</div> |
|
|
<div class="faq-answer text-gray-300 text-sm"> |
|
|
Стандартный TTS синтез занимает в среднем 2-3 секунды на 1000 символов. Клонирование голоса требует дополнительного времени на обработку образца (обычно 1-2 минуты), после чего синтез происходит с той же скоростью. |
|
|
</div> |
|
|
</div> |
|
|
<div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20"> |
|
|
<div class="faq-question"> |
|
|
<span class="font-semibold text-lg">Какое качество аудио я получу?</span> |
|
|
</div> |
|
|
<div class="faq-answer text-gray-300 text-sm"> |
|
|
Мы генерируем аудио в высоком качестве 44.1kHz, 16-bit стерео. При клонировании голоса качество зависит от исходного аудиообразца - чем лучше качество исходника, тем точнее будет результат. |
|
|
</div> |
|
|
</div> |
|
|
<div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20"> |
|
|
<div class="faq-question"> |
|
|
<span class="font-semibold text-lg">Можно ли отменить подписку?</span> |
|
|
</div> |
|
|
<div class="faq-answer text-gray-300 text-sm"> |
|
|
Да, вы можете отменить подписку в любой момент в личном кабинете. Доступ к платным функциям сохранится до конца оплаченного периода. |
|
|
</div> |
|
|
</div> |
|
|
<div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20"> |
|
|
<div class="faq-question"> |
|
|
<span class="font-semibold text-lg">Есть ли API для разработчиков?</span> |
|
|
</div> |
|
|
<div class="faq-answer text-gray-300 text-sm"> |
|
|
Да, мы предоставляем RESTful API с подробной документацией. API доступен в тарифах "Стандарт" и "Максимум". Вы можете интегрировать наши возможности в ваши приложения, сайты или сервисы. |
|
|
</div> |
|
|
</div> |
|
|
<div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20"> |
|
|
<div class="faq-question"> |
|
|
<span class="font-semibold text-lg">Как обеспечить конфиденциальность данных?</span> |
|
|
</div> |
|
|
<div class="faq-answer text-gray-300 text-sm"> |
|
|
Все данные передаются по зашифрованному протоколу HTTPS. Мы не храним ваши тексты и аудиофайлы дольше необходимого для обработки. Ваша информация никогда не передается третьим лицам. |
|
|
</div> |
|
|
</div> |
|
|
<div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20"> |
|
|
<div class="faq-question"> |
|
|
<span class="font-semibold text-lg">Можно ли настроить эмоциональную окраску голоса?</span> |
|
|
</div> |
|
|
<div class="faq-answer text-gray-300 text-sm"> |
|
|
Да, в расширенных настройках вы можете выбрать эмоциональную окраску: нейтральный, радостный, грустный, энергичный, спокойный. Также можно调节 скорость речи и высоту тона. |
|
|
</div> |
|
|
</div> |
|
|
<div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20"> |
|
|
<div class="faq-question"> |
|
|
<span class="font-semibold text-lg">Что делать, если результат меня не устраивает?</span> |
|
|
</div> |
|
|
<div class="faq-answer text-gray-300 text-sm"> |
|
|
Вы можете перегенерировать аудио с другими настройками или выбрать другой голос. Если проблема сохраняется, наша техподдержка поможет найти оптимальное решение для вашей задачи. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-dark-bg border-t border-dark-border py-8 px-6"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="flex flex-col md:flex-row items-center justify-between"> |
|
|
<div class="flex items-center space-x-2 mb-4 md:mb-0"> |
|
|
<span class="text-xl font-bold">VoiceFlow AI</span> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="hover:text-blue-500 transition">Политика конфиденциальности</a> |
|
|
<a href="#" class="hover:text-blue-500 transition">Условия использования</a> |
|
|
<a href="#" class="hover:text-blue-500 transition">Лицензия</a> |
|
|
</div> |
|
|
<div class="flex space-x-4 mt-4 md:mt-0"> |
|
|
<a href="#" class="hover:text-blue-500 transition"><i data-feather="twitter" class="w-5 h-5"></i></a> |
|
|
<a href="#" class="hover:text-blue-500 transition"><i data-feather="github" class="w-5 h-5"></i></a> |
|
|
<a href="#" class="hover:text-blue-500 transition"><i data-feather="linkedin" class="w-5 h-5"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center text-gray-500 mt-6"> |
|
|
© 2024 VoiceFlow AI. Все права защищены. |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
<script> |
|
|
|
|
|
if (!sessionStorage.getItem('visited')) { |
|
|
sessionStorage.setItem('visited', 'true'); |
|
|
|
|
|
|
|
|
const loadingScreen = document.getElementById('loading-screen'); |
|
|
const welcome = document.getElementById('welcome'); |
|
|
const subtext = document.getElementById('subtext'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
welcome.style.display = 'block'; |
|
|
welcome.style.animationDelay = '0s'; |
|
|
}, 2000); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
subtext.style.display = 'block'; |
|
|
subtext.style.animationDelay = '0s'; |
|
|
}, 3000); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
loadingScreen.style.opacity = '0'; |
|
|
setTimeout(() => { |
|
|
loadingScreen.style.display = 'none'; |
|
|
}, 500); |
|
|
}, 4500); |
|
|
} else { |
|
|
|
|
|
document.getElementById('loading-screen').style.display = 'none'; |
|
|
} |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuBtn.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
mobileMenu.querySelectorAll('a').forEach(link => { |
|
|
link.addEventListener('click', () => { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const ttsTab = document.getElementById('tts-tab'); |
|
|
const voiceCloneTab = document.getElementById('voice-clone-tab'); |
|
|
const ttsMode = document.getElementById('tts-mode'); |
|
|
const voiceCloneMode = document.getElementById('voice-clone-mode'); |
|
|
ttsTab.addEventListener('click', () => { |
|
|
ttsMode.classList.remove('hidden'); |
|
|
voiceCloneMode.classList.add('hidden'); |
|
|
ttsTab.classList.add('bg-gradient-to-r', 'from-blue-600', 'to-purple-600'); |
|
|
ttsTab.classList.remove('bg-dark-bg'); |
|
|
voiceCloneTab.classList.remove('bg-gradient-to-r', 'from-blue-600', 'to-purple-600'); |
|
|
voiceCloneTab.classList.add('bg-dark-bg'); |
|
|
}); |
|
|
|
|
|
voiceCloneTab.addEventListener('click', () => { |
|
|
ttsMode.classList.add('hidden'); |
|
|
voiceCloneMode.classList.remove('hidden'); |
|
|
voiceCloneTab.classList.add('bg-gradient-to-r', 'from-blue-600', 'to-purple-600'); |
|
|
voiceCloneTab.classList.remove('bg-dark-bg'); |
|
|
ttsTab.classList.remove('bg-gradient-to-r', 'from-blue-600', 'to-purple-600'); |
|
|
ttsTab.classList.add('bg-dark-bg'); |
|
|
}); |
|
|
|
|
|
const randomTexts = [ |
|
|
"Искусственный интеллект меняет наш мир каждый день. Технологии синтеза речи становятся все более совершенными, позволяя создавать естественные и выразительные голоса.", |
|
|
"Будущее голосовых технологий уже здесь. С помощью нейронных сетей мы можем клонировать голоса и создавать уникальные аудио контент.", |
|
|
"Голосовой синтез открывает новые возможности для создателей контента, разработчиков и бизнеса. Создавайте аудио любого объема и качества.", |
|
|
"Преобразование текста в речь - это не просто технология, это искусство. Каждый голос имеет свою уникальную историю и характер.", |
|
|
"Инновации в области AI позволяют нам создавать голоса, которые неотличимы от человеческих. Добро пожаловать в будущее аудио технологий." |
|
|
]; |
|
|
|
|
|
document.getElementById('random-text-tts').addEventListener('click', () => { |
|
|
const randomText = randomTexts[Math.floor(Math.random() * randomTexts.length)]; |
|
|
document.getElementById('tts-text').value = randomText; |
|
|
}); |
|
|
|
|
|
document.getElementById('random-text-clone').addEventListener('click', () => { |
|
|
const randomText = randomTexts[Math.floor(Math.random() * randomTexts.length)]; |
|
|
document.getElementById('clone-text').value = randomText; |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
const target = document.querySelector(this.getAttribute('href')); |
|
|
if (target) { |
|
|
target.scrollIntoView({ |
|
|
behavior: 'smooth', |
|
|
block: 'start' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('form').forEach(form => { |
|
|
form.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
alert('Спасибо за ваше сообщение! Мы свяжемся с вами в ближайшее время.'); |
|
|
form.reset(); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
