Hugging Face's logo

Spaces:
Nasa1423
/
voicefl
Running

App Files Community
voicefl / index.html
Nasa1423's picture
Nasa1423
Promote version 890fa9a to main
0faa507 verified
raw
history blame contribute delete
49.3 kB
<!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 голосов и клонированием голоса. Технология использует передовые нейронные сети для передачи интонаций и эмоций, максимально приближенных к человеческим.
 </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>
<!-- TTS Mode -->
 <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>
<!-- Voice Cloning Mode -->
 <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>
<!-- Features 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>
 <!-- Pricing 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>
 <!-- About 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>
 <!-- Contacts 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">info@voiceflow.ai</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="your@email.com">
 </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>
 <!-- FAQ 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 -->
 <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>
// Check if first visit
 if (!sessionStorage.getItem('visited')) {
 sessionStorage.setItem('visited', 'true');
// Show loading screen
 const loadingScreen = document.getElementById('loading-screen');
 const welcome = document.getElementById('welcome');
 const subtext = document.getElementById('subtext');
// Show welcome text after 2 seconds
 setTimeout(() => {
 welcome.style.display = 'block';
 welcome.style.animationDelay = '0s';
 }, 2000);
// Show subtext after 3 seconds (1 second after welcome)
 setTimeout(() => {
 subtext.style.display = 'block';
 subtext.style.animationDelay = '0s';
 }, 3000);
// Hide loading screen after 4.5 seconds
 setTimeout(() => {
 loadingScreen.style.opacity = '0';
 setTimeout(() => {
 loadingScreen.style.display = 'none';
 }, 500);
 }, 4500);
 } else {
 // Hide loading screen immediately if not first visit
 document.getElementById('loading-screen').style.display = 'none';
 }
// Initialize Feather Icons
 feather.replace();
 // Mobile Menu Toggle
 const mobileMenuBtn = document.getElementById('mobile-menu-btn');
 const mobileMenu = document.getElementById('mobile-menu');
 mobileMenuBtn.addEventListener('click', () => {
 mobileMenu.classList.toggle('hidden');
 });
 // Close mobile menu when clicking on links
 mobileMenu.querySelectorAll('a').forEach(link => {
 link.addEventListener('click', () => {
 mobileMenu.classList.add('hidden');
 });
 });
 // Tabs functionality
 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');
 });
// Random text generator
 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;
 });
// Smooth scroll for navigation links
 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'
 });
 }
 });
 });
 // Form submission handler
 document.querySelectorAll('form').forEach(form => {
 form.addEventListener('submit', (e) => {
 e.preventDefault();
 alert('Спасибо за ваше сообщение! Мы свяжемся с вами в ближайшее время.');
 form.reset();
 });
 });
</script>
</body>
</html>