Hugging Face's logo

Spaces:
imbytegroup
/
nromal
Running

App Files Community
nromal / index.html
imbytegroup's picture
imbytegroup
Add 2 files
81a5272 verified
raw
history blame contribute delete
56 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Solutions Ecosystem</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #0A0A0A;
color: white;
margin: 0;
overflow-x: hidden;
}
.code-font {
font-family: 'Roboto Mono', monospace;
}
.neon-teal {
color: #00FEFE;
text-shadow: 0 0 8px rgba(0, 254, 254, 0.6);
}
.neon-pink {
color: #FF00FF;
text-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
}
.border-neon-teal {
border-color: #00FEFE;
box-shadow: 0 0 12px rgba(0, 254, 254, 0.4);
}
.border-neon-pink {
border-color: #FF00FF;
box-shadow: 0 0 12px rgba(255, 0, 255, 0.4);
}
.bg-dark {
background-color: #0A0A0A;
}
.bg-darker {
background-color: #050505;
}
#canvas-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0;
transition: opacity 2s;
}
.letter-animation {
display: inline-block;
opacity: 0;
transform: translateY(20px);
}
.service-planet {
transition: all 0.5s ease;
filter: drop-shadow(0 0 5px transparent);
}
.service-planet:hover {
transform: scale(1.1);
filter: drop-shadow(0 0 15px rgba(0, 254, 254, 0.7));
}
.progress-bar {
height: 4px;
background: linear-gradient(90deg, #00FEFE, #FF00FF);
width: 0%;
transition: width 1s;
}
.typing-cursor {
display: inline-block;
width: 8px;
height: 16px;
background: #00FEFE;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
</style>
</head>
<body class="bg-dark text-white">
<!-- 3D Canvas Container -->
<div id="canvas-container"></div>
<!-- Welcome Overlay (disappears after loading) -->
<div id="welcome-overlay" class="fixed inset-0 bg-black flex items-center justify-center z-50 transition-opacity duration-1000">
<div class="text-center">
<h1 class="text-5xl font-bold mb-6 neon-teal">DIGITAL SOLUTIONS ECOSYSTEM</h1>
<div class="animate-pulse">Loading interactive 3D environment...</div>
</div>
</div>
<!-- Hero Section -->
<section class="min-h-screen flex flex-col justify-center px-6 md:px-12 lg:px-24 relative overflow-hidden">
<div id="hero-content" class="opacity-0 transform -translate-y-10 transition-all duration-1000">
<h1 id="hero-title" class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 max-w-4xl">
<!-- Letters will be injected by JS -->
</h1>
<p class="text-xl md:text-2xl text-gray-300 mb-12 neon-pink">«От чат-бота до Web3 — реализуем под ключ за 14 дней»</p>
<button id="cta-button" class="px-8 py-4 rounded-lg bg-gradient-to-r from-teal-400 to-purple-500 hover:from-teal-500 hover:to-purple-600 text-lg font-bold transition-all transform hover:scale-105 hover:shadow-lg hover:shadow-teal-500/30 border-2 border-white/10 animate-pulse">
Начать проект
</button>
</div>
<div class="absolute bottom-10 left-0 right-0 flex justify-center">
<div class="animate-bounce w-8 h-8 border-b-2 border-white rounded-full"></div>
</div>
<!-- 3D Objects Stats -->
<div class="hidden md:flex space-x-8 absolute bottom-10 right-10">
<div class="bg-black/50 backdrop-blur-sm p-4 rounded-lg border-neon-teal">
<p class="text-xs text-gray-400">Телеграм боты</p>
<p class="text-xl neon-teal">+300% к конверсии</p>
</div>
<div class="bg-black/50 backdrop-blur-sm p-4 rounded-lg border-neon-pink">
<p class="text-xs text-gray-400">Mini-Apps</p>
<p class="text-xl neon-pink">+45% удержание</p>
</div>
</div>
</section>
<!-- Services 3D Gallery -->
<section class="min-h-screen py-20 px-6 md:px-12 lg:px-24">
<h2 class="text-3xl md:text-5xl font-bold mb-20 text-center neon-teal">Наши решения</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Chat Bots -->
<div class="service-planet group relative">
<div class="h-64 w-64 mx-auto rounded-full bg-gradient-to-br from-teal-500 to-teal-900 flex items-center justify-center border-2 border-teal-400 hover:border-teal-200 transition-all">
<div class="text-center p-6 transform group-hover:scale-110 transition-all">
<h3 class="text-2xl font-bold mb-2">Чат-боты</h3>
<p class="text-sm opacity-70 group-hover:opacity-100">Автоматизация с ИИ</p>
</div>
</div>
<button class="absolute top-0 right-0 -mt-3 -mr-3 bg-teal-500 w-8 h-8 rounded-full flex items-center justify-center text-black font-bold hover:bg-teal-300 transform hover:scale-110 transition-all">+</button>
</div>
<!-- Mini-Apps -->
<div class="service-planet group relative">
<div class="h-64 w-64 mx-auto rounded-full bg-gradient-to-br from-purple-500 to-purple-900 flex items-center justify-center border-2 border-purple-400 hover:border-purple-200 transition-all">
<div class="text-center p-6 transform group-hover:scale-110 transition-all">
<h3 class="text-2xl font-bold mb-2">Mini-Apps</h3>
<p class="text-sm opacity-70 group-hover:opacity-100">Игровые экономики</p>
</div>
</div>
<button class="absolute top-0 right-0 -mt-3 -mr-3 bg-purple-500 w-8 h-8 rounded-full flex items-center justify-center text-black font-bold hover:bg-purple-300 transform hover:scale-110 transition-all">+</button>
</div>
<!-- Web3 -->
<div class="service-planet group relative">
<div class="h-64 w-64 mx-auto rounded-full bg-gradient-to-br from-blue-500 to-blue-900 flex items-center justify-center border-2 border-blue-400 hover:border-blue-200 transition-all">
<div class="text-center p-6 transform group-hover:scale-110 transition-all">
<h3 class="text-2xl font-bold mb-2">Web3</h3>
<p class="text-sm opacity-70 group-hover:opacity-100">Блокчейн интеграции</p>
</div>
</div>
<button class="absolute top-0 right-0 -mt-3 -mr-3 bg-blue-500 w-8 h-8 rounded-full flex items-center justify-center text-black font-bold hover:bg-blue-300 transform hover:scale-110 transition-all">+</button>
</div>
<!-- AI -->
<div class="service-planet group relative">
<div class="h-64 w-64 mx-auto rounded-full bg-gradient-to-br from-pink-500 to-pink-900 flex items-center justify-center border-2 border-pink-400 hover:border-pink-200 transition-all">
<div class="text-center p-6 transform group-hover:scale-110 transition-all">
<h3 class="text-2xl font-bold mb-2">AI</h3>
<p class="text-sm opacity-70 group-hover:opacity-100">Генеративный интеллект</p>
</div>
</div>
<button class="absolute top-0 right-0 -mt-3 -mr-3 bg-pink-500 w-8 h-8 rounded-full flex items-center justify-center text-black font-bold hover:bg-pink-300 transform hover:scale-110 transition-all">+</button>
</div>
</div>
<div id="service-details" class="mt-20 bg-black/50 backdrop-blur-sm p-8 rounded-xl border-neon-teal hidden">
<div class="flex justify-between items-start">
<div>
<h3 id="detail-title" class="text-2xl font-bold mb-2 neon-pink">Чат-боты</h3>
<p id="detail-description" class="mb-4">Гибкие решения для автоматизации бизнес-процессов с помощью Telegram, WhatsApp и других мессенджеров.</p>
<ul id="detail-features" class="list-disc pl-5 space-y-2 text-sm">
<li>Интеграция с CRM и платежными системами</li>
<li>AI-ассистенты с NLP</li>
<li>Мультиязычная поддержка</li>
</ul>
</div>
<button id="close-details" class="text-gray-400 hover:text-white">&times;</button>
</div>
<div class="mt-6">
<div class="mb-4">
<p class="text-sm text-gray-400">Пример из практики:</p>
<p id="detail-case" class="font-bold">Бот для @crypto_storage: +$50K/month</p>
</div>
<button class="px-6 py-2 bg-teal-500 rounded-lg hover:bg-teal-600 font-medium">Заказать подобное решение</button>
</div>
</div>
</section>
<!-- AI Guide -->
<section class="min-h-screen py-20 px-6 md:px-12 lg:px-24 relative" id="ai-guide-section">
<div id="ai-guide" class="bg-black/50 backdrop-blur-sm p-8 rounded-xl border-neon-pink max-w-3xl mx-auto hidden transform transition-all duration-500 opacity-0 translate-y-10">
<div class="flex items-start space-x-4">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center text-xl font-bold">AI</div>
<div class="flex-1">
<div id="ai-message" class="mb-4">
<p class="typing-text">Привет! Я помогу подобрать решение под ваш бюджет. Ответьте на 3 вопроса и получите примерную стоимость.</p>
<span class="typing-cursor"></span>
</div>
<div id="ai-questions" class="space-y-4 hidden">
<div>
<p class="text-sm text-gray-400 mb-1">1/3 Какой тип решения вам нужен?</p>
<div class="flex flex-wrap gap-2">
<button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">Чат-бот</button>
<button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">Mini-App</button>
<button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">Web3 интеграция</button>
<button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">AI решение</button>
</div>
</div>
</div>
<div id="ai-result" class="hidden">
<p class="font-bold neon-teal mb-2">Примерная стоимость: ~$5,000 - $15,000</p>
<p class="text-sm mb-4">На основе выбранных параметров и нашего опыта</p>
<button class="px-6 py-2 bg-gradient-to-r from-teal-400 to-purple-500 rounded-lg hover:from-teal-500 hover:to-purple-600 font-medium">
Обсудить проект детально
</button>
</div>
</div>
</div>
</div>
<div id="guide-trigger" class="fixed bottom-8 right-8 w-16 h-16 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center text-xl font-bold cursor-pointer transform hover:scale-110 transition-all shadow-lg shadow-pink-500/30">
AI
</div>
</section>
<!-- Dynamic Form -->
<section class="py-20 px-6 md:px-12 lg:px-24 bg-darker">
<div class="max-w-3xl mx-auto">
<h2 class="text-3xl md:text-5xl font-bold mb-12 text-center neon-teal">Начните свой проект</h2>
<form id="project-form" class="space-y-6">
<div id="form-steps" class="flex justify-between mb-8">
<div class="step flex-1 flex flex-col items-center">
<div class="w-10 h-10 rounded-full border-2 border-teal-500 bg-black flex items-center justify-center mb-2">1</div>
<p class="text-xs text-center">Информация</p>
</div>
<div class="h-1 bg-gray-800 flex-1 mx-2 mt-5"></div>
<div class="step flex-1 flex flex-col items-center">
<div class="w-10 h-10 rounded-full border-2 border-gray-600 bg-black flex items-center justify-center mb-2">2</div>
<p class="text-xs text-center text-gray-500">Детали</p>
</div>
<div class="h-1 bg-gray-800 flex-1 mx-2 mt-5"></div>
<div class="step flex-1 flex flex-col items-center">
<div class="w-10 h-10 rounded-full border-2 border-gray-600 bg-black flex items-center justify-center mb-2">3</div>
<p class="text-xs text-center text-gray-500">Подтверждение</p>
</div>
</div>
<div id="step-1" class="space-y-6">
<div>
<label class="block text-sm font-medium mb-1 neon-teal">Ваше имя</label>
<input type="text" class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:border-teal-500" required>
</div>
<div>
<label class="block text-sm font-medium mb-1 neon-pink">Email или Telegram</label>
<input type="text" class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:border-pink-500" required>
</div>
<div>
<label class="block text-sm font-medium mb-1 neon-teal">Тип проекта</label>
<select class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:border-teal-500">
<option>Чат-бот</option>
<option>Mini-App</option>
<option>Web3 решение</option>
<option>AI интеграция</option>
<option>Комплексное решение</option>
</select>
</div>
<button type="button" onclick="nextStep(2)" class="w-full bg-gradient-to-r from-teal-500 to-purple-600 py-3 rounded-lg font-bold hover:from-teal-600 hover:to-purple-700 transition">
Продолжить
</button>
</div>
<div id="step-2" class="space-y-6 hidden" data-depends="step-1">
<div>
<label class="block text-sm font-medium mb-1 neon-pink">Коротко опишите ваш проект</label>
<textarea class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:border-pink-500 h-32"></textarea>
</div>
<div>
<label class="block text-sm font-medium mb-1 neon-teal">Бюджет проекта</label>
<select class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:border-teal-500">
<option>Менее $5,000</option>
<option>$5,000 - $10,000</option>
<option>$10,000 - $25,000</option>
<option>$25,000+</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-1 neon-pink">Желаемые сроки</label>
<input type="text" class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:border-pink-500" placeholder="Пример: 2-3 недели">
</div>
<div class="flex space-x-4">
<button type="button" onclick="prevStep(1)" class="flex-1 bg-gray-800 py-3 rounded-lg font-bold hover:bg-gray-700 transition">
Назад
</button>
<button type="button" onclick="nextStep(3)" class="flex-1 bg-gradient-to-r from-teal-500 to-purple-600 py-3 rounded-lg font-bold hover:from-teal-600 hover:to-purple-700 transition">
Продолжить
</button>
</div>
</div>
<div id="step-3" class="space-y-6 hidden" data-depends="step-2">
<div class="bg-black/30 p-6 rounded-xl border border-gray-800">
<h4 class="font-bold mb-3 neon-teal">Подтвердите информацию:</h4>
<p id="review-name" class="mb-1"><span class="text-gray-500">Имя:</span> <span class="font-medium">-</span></p>
<p id="review-contact" class="mb-1"><span class="text-gray-500">Контакт:</span> <span class="font-medium">-</span></p>
<p id="review-type" class="mb-1"><span class="text-gray-500">Тип:</span> <span class="font-medium">-</span></p>
<p id="review-budget" class="mb-1"><span class="text-gray-500">Бюджет:</span> <span class="font-medium">-</span></p>
</div>
<div class="bg-black/30 p-6 rounded-xl border border-gray-800">
<p class="font-bold mb-3 neon-pink">Дополнительные услуги:</p>
<div class="space-y-3">
<label class="flex items-center space-x-3">
<input type="checkbox" class="form-checkbox h-5 w-5 text-teal-500 rounded">
<span>Маркетинговая стратегия (+$2,000)</span>
</label>
<label class="flex items-center space-x-3">
<input type="checkbox" class="form-checkbox h-5 w-5 text-teal-500 rounded">
<span>Долгосрочная поддержка (+$500/мес)</span>
</label>
<label class="flex items-center space-x-3">
<input type="checkbox" class="form-checkbox h-5 w-5 text-teal-500 rounded">
<span>Персонализированный NFT (+$1,000)</span>
</label>
</div>
</div>
<div>
<textarea class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:border-teal-500 h-16" placeholder="Дополнительные комментарии..."></textarea>
</div>
<div class="flex space-x-4">
<button type="button" onclick="prevStep(2)" class="flex-1 bg-gray-800 py-3 rounded-lg font-bold hover:bg-gray-700 transition">
Назад
</button>
<button type="submit" class="flex-1 bg-gradient-to-r from-teal-500 to-purple-600 py-3 rounded-lg font-bold hover:from-teal-600 hover:to-purple-700 transition">
Отправить заявку
</button>
</div>
</div>
</form>
</div>
</section>
<!-- Cases Section -->
<section class="py-20 px-6 md:px-12 lg:px-24">
<h2 class="text-3xl md:text-5xl font-bold mb-20 text-center neon-pink">Наши кейсы</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Case 1 -->
<div class="bg-black/50 backdrop-blur-sm rounded-xl border-neon-teal overflow-hidden transition-transform hover:scale-105">
<div class="h-48 bg-gradient-to-br from-teal-500 to-teal-900 flex items-center justify-center">
<div class="text-center p-4">
<h3 class="text-xl font-bold mb-2">Crypto Storage Bot</h3>
<p class="text-sm opacity-80">Telegram бот для криптосервиса</p>
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-3">
<p class="text-xs text-gray-400">Результат:</p>
<p class="font-bold neon-teal">+$50K/мес</p>
</div>
<p class="text-sm mb-4">Автоматизированный сервис хранения криптовалют с опциями стекинга и защищёнными транзакциями.</p>
<button class="w-full px-4 py-2 bg-teal-500/10 border border-teal-500 rounded-lg hover:bg-teal-500/20 text-sm">
Смотреть демо
</button>
</div>
</div>
<!-- Case 2 -->
<div class="bg-black/50 backdrop-blur-sm rounded-xl border-neon-pink overflow-hidden transition-transform hover:scale-105">
<div class="h-48 bg-gradient-to-br from-purple-500 to-purple-900 flex items-center justify-center">
<div class="text-center p-4">
<h3 class="text-xl font-bold mb-2">NFT Game Mini-App</h3>
<p class="text-sm opacity-80">P2E игра в Telegram</p>
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-3">
<p class="text-xs text-gray-400">Результат:</p>
<p class="font-bold neon-pink">+132K users</p>
</div>
<p class="text-sm mb-4">Игровая экономика с NFT персонажами и токенизированными наградами, интегрированная с TON.</p>
<button class="w-full px-4 py-2 bg-purple-500/10 border border-purple-500 rounded-lg hover:bg-purple-500/20 text-sm">
Смотреть демо
</button>
</div>
</div>
<!-- Case 3 -->
<div class="bg-black/50 backdrop-blur-sm rounded-xl border-neon-teal overflow-hidden transition-transform hover:scale-105">
<div class="h-48 bg-gradient-to-br from-blue-500 to-blue-900 flex items-center justify-center">
<div class="text-center p-4">
<h3 class="text-xl font-bold mb-2">AI News Aggregator</h3>
<p class="text-sm opacity-80">Персонализированная лента</p>
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-3">
<p class="text-xs text-gray-400">Результат:</p>
<p class="font-bold neon-teal">+75% retention</p>
</div>
<p class="text-sm mb-4">Нейросеть анализирует предпочтения и составляет персонализированную ленту новостей и аналитики.</p>
<button class="w-full px-4 py-2 bg-blue-500/10 border border-blue-500 rounded-lg hover:bg-blue-500/20 text-sm">
Смотреть демо
</button>
</div>
</div>
</div>
<div class="text-center mt-16">
<button class="px-8 py-3 rounded-lg bg-gradient-to-r from-teal-400 to-purple-500 hover:from-teal-500 hover:to-purple-600 text-lg font-bold transition-all transform hover:scale-105 hover:shadow-lg hover:shadow-teal-500/30 border-2 border-white/10">
Все кейсы (12+ успешных проектов)
</button>
</div>
</section>
<!-- Success Modal -->
<div id="success-modal" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 hidden">
<div class="bg-black/60 backdrop-blur-sm rounded-xl border-2 border-teal-500 p-8 max-w-md w-full mx-4 relative">
<button id="close-success" class="absolute top-4 right-4 text-gray-400 hover:text-white">&times;</button>
<div class="text-center">
<div class="w-20 h-20 rounded-full bg-teal-500/20 flex items-center justify-center mx-auto mb-6">
<svg class="w-10 h-10 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<h3 class="text-2xl font-bold mb-2 neon-teal">Спасибо!</h3>
<p class="mb-6">Мы уже начали работу над вашим проектом</p>
<div class="mb-8">
<div class="progress-bar"></div>
</div>
<p class="text-sm text-gray-400">Наш бот уже отправил вам сообщение в Telegram с деталями. Проверьте чат!</p>
</div>
</div>
</div>
<!-- Console Command Easter Egg -->
<div id="console-egg" class="hidden fixed inset-0 bg-black/90 flex items-center justify-center z-50 backdrop-blur-sm">
<div class="bg-black/80 border border-teal-500 rounded-lg p-8 max-w-md w-full">
<div class="flex justify-between items-start mb-6">
<h3 class="text-xl font-bold neon-teal">Secret Command Activated</h3>
<button onclick="closeEasterEgg()" class="text-gray-400 hover:text-white">&times;</button>
</div>
<div class="bg-gray-900 p-4 rounded-lg font-mono text-sm mb-6 overflow-auto" style="max-height: 200px;">
<p class="text-green-400">> start bot --demo</p>
<p class="text-white">Initializing demo environment...</p>
<p class="text-white">Loading AI assistant...</p>
<p class="text-white">Connecting to Telegram API...</p>
<p class="text-green-400">> <span class="typing-text">Demo bot ready! You can now interact with a simplified version of our AI-powered Telegram bot directly in this window.</span></p>
<span class="typing-cursor"></span>
</div>
<div class="bg-gray-900/50 p-4 rounded-lg">
<p class="text-sm mb-3 neon-pink">Try these commands:</p>
<div class="grid grid-cols-2 gap-2">
<button class="console-cmd px-3 py-1 bg-gray-800 rounded text-xs hover:bg-gray-700">/start</button>
<button class="console-cmd px-3 py-1 bg-gray-800 rounded text-xs hover:bg-gray-700">/pricing</button>
<button class="console-cmd px-3 py-1 bg-gray-800 rounded text-xs hover:bg-gray-700">/features</button>
<button class="console-cmd px-3 py-1 bg-gray-800 rounded text-xs hover:bg-gray-700">/demo</button>
</div>
</div>
</div>
</div>
<script>
// Initialize page
document.addEventListener('DOMContentLoaded', function() {
// Hide welcome overlay after load
setTimeout(() => {
document.getElementById('welcome-overlay').style.opacity = '0';
setTimeout(() => {
document.getElementById('welcome-overlay').style.display = 'none';
// Show canvas
document.getElementById('canvas-container').style.opacity = '1';
initThreeJS();
}, 1000);
}, 1500);
// Animate hero title
const heroTitle = "Создаём цифровые решения, которые приносят прибыль";
const heroTitleElement = document.getElementById('hero-title');
heroTitle.split('').forEach((char, i) => {
const span = document.createElement('span');
span.className = 'letter-animation';
span.textContent = char === ' ' ? ' ' : char;
span.style.transitionDelay = `${i * 0.05}s`;
heroTitleElement.appendChild(span);
});
setTimeout(() => {
document.querySelectorAll('.letter-animation').forEach(el => {
el.style.opacity = '1';
el.style.transform = 'translateY(0)';
});
document.getElementById('hero-content').style.opacity = '1';
document.getElementById('hero-content').style.transform = 'translateY(0)';
}, 500);
// Show AI guide after 15 seconds
setTimeout(() => {
document.getElementById('ai-guide').classList.remove('hidden');
setTimeout(() => {
document.getElementById('ai-guide').style.opacity = '1';
document.getElementById('ai-guide').style.transform = 'translateY(0)';
// Type AI message
typeText("Привет! Я помогу подобрать решение под ваш бюджет. Ответьте на 3 вопроса и получите примерную стоимость.",
document.querySelector('.typing-text'), () => {
setTimeout(() => {
document.getElementById('ai-questions').classList.remove('hidden');
}, 500);
});
}, 100);
}, 15000);
// Service planets interaction
document.querySelectorAll('.service-planet button').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
const parent = this.parentElement;
const title = parent.querySelector('h3').textContent;
// Set details based on selection
setServiceDetails(title);
document.getElementById('service-details').classList.remove('hidden');
});
});
// Close service details
document.getElementById('close-details').addEventListener('click', function() {
document.getElementById('service-details').classList.add('hidden');
});
// AI Guide trigger
document.getElementById('guide-trigger').addEventListener('click', function() {
const guide = document.getElementById('ai-guide');
if (guide.classList.contains('hidden')) {
guide.classList.remove('hidden');
setTimeout(() => {
guide.style.opacity = '1';
guide.style.transform = 'translateY(0)';
}, 10);
} else {
guide.style.opacity = '0';
guide.style.transform = 'translateY(10px)';
setTimeout(() => {
guide.classList.add('hidden');
}, 500);
}
});
// AI questions
document.querySelectorAll('.ai-answer-btn').forEach(btn => {
btn.addEventListener('click', function() {
// Simple simulation of AI process
const questions = document.getElementById('ai-questions');
questions.innerHTML = `
<div>
<p class="text-sm text-gray-400 mb-1">2/3 Какой у вас бюджет?</p>
<div class="flex flex-wrap gap-2">
<button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">До $5K</button>
<button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">$5K-$15K</button>
<button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">$15K+</button>
</div>
</div>
`;
// Rebind events
document.querySelectorAll('.ai-answer-btn').forEach(newBtn => {
newBtn.addEventListener('click', function() {
questions.innerHTML = `
<div>
<p class="text-sm text-gray-400 mb-1">3/3 Когда нужно запустить?</p>
<div class="flex flex-wrap gap-2">
<button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">Срочно (до 2 недель)</button>
<button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">1-2 месяца</button>
<button class="ai-answer-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">Пока в планах</button>
</div>
</div>
`;
// Final answer
document.querySelectorAll('.ai-answer-btn').forEach(finalBtn => {
finalBtn.addEventListener('click', function() {
document.getElementById('ai-questions').classList.add('hidden');
document.getElementById('ai-result').classList.remove('hidden');
});
});
});
});
});
});
// Form submission
document.getElementById('project-form').addEventListener('submit', function(e) {
e.preventDefault();
// Update review section
const inputs = this.querySelectorAll('input[type="text"], input[type="email"], select');
inputs.forEach(input => {
if (input.type !== 'checkbox') {
const reviewElement = document.getElementById('review-' + input.name);
if (reviewElement) {
reviewElement.innerHTML = reviewElement.innerHTML.split(':')[0] + ': <span class="font-medium">' + input.value + '</span>';
}
}
});
// Show success modal
document.getElementById('success-modal').classList.remove('hidden');
// Animate progress bar
setTimeout(() => {
document.querySelector('.progress-bar').style.width = '100%';
}, 100);
});
// Close success modal
document.getElementById('close-success').addEventListener('click', function() {
document.getElementById('success-modal').classList.add('hidden');
});
// CTA button click
document.getElementById('cta-button').addEventListener('click', function() {
document.getElementById('project-form').scrollIntoView({ behavior: 'smooth' });
});
// Easter egg for console
console.log('%cДобро пожаловать в нашу цифровую экосистему!', 'color: #00FEFE; font-size: 14px;');
console.log('%cВведите "start bot" для доступа к демо-версии', 'color: #FF00FF; font-size: 12px;');
});
// Three.js initialization
function initThreeJS() {
const container = document.getElementById('canvas-container');
const width = container.clientWidth;
const height = container.clientHeight;
// Scene
const scene = new THREE.Scene();
// Camera
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
camera.position.z = 30;
// Renderer
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
// Lights
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0x00FEFE, 0.8);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
const directionalLight2 = new THREE.DirectionalLight(0xFF00FF, 0.8);
directionalLight2.position.set(-1, -1, -1);
scene.add(directionalLight2);
// Floating objects
const objects = [];
const geometry = new THREE.SphereGeometry(1, 16, 16);
// Create Telegram bot model (simplified with spheres)
const botMaterial = new THREE.MeshPhongMaterial({
color: 0x0088cc,
emissive: 0x006699,
specular: 0x00FEFE,
shininess: 30
});
const botCore = new THREE.Mesh(geometry, botMaterial);
scene.add(botCore);
objects.push(botCore);
// Create surrounding objects
for (let i = 0; i < 20; i++) {
const material = new THREE.MeshPhongMaterial({
color: Math.random() * 0xffffff,
emissive: 0x0,
specular: i % 2 === 0 ? 0x00FEFE : 0xFF00FF,
shininess: 10,
transparent: true,
opacity: 0.8
});
const obj = new THREE.Mesh(
geometry,
material
);
obj.position.x = Math.random() * 30 - 15;
obj.position.y = Math.random() * 30 - 15;
obj.position.z = Math.random() * 30 - 15;
obj.userData = {
speed: Math.random() * 0.02 + 0.01,
direction: new THREE.Vector3(
Math.random() * 0.2 - 0.1,
Math.random() * 0.2 - 0.1,
Math.random() * 0.2 - 0.1
).normalize()
};
scene.add(obj);
objects.push(obj);
}
// Handle window resize
window.addEventListener('resize', () => {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight);
});
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Rotate bot core
botCore.rotation.x += 0.005;
botCore.rotation.y += 0.01;
// Move surrounding objects
objects.forEach(obj => {
if (obj !== botCore) {
// Move in direction
obj.position.x += obj.userData.direction.x * obj.userData.speed;
obj.position.y += obj.userData.direction.y * obj.userData.speed;
obj.position.z += obj.userData.direction.z * obj.userData.speed;
// Bounce off invisible walls
if (Math.abs(obj.position.x) > 20) obj.userData.direction.x *= -1;
if (Math.abs(obj.position.y) > 20) obj.userData.direction.y *= -1;
if (Math.abs(obj.position.z) > 20) obj.userData.direction.z *= -1;
// Rotate
obj.rotation.x += 0.01;
obj.rotation.y += 0.01;
}
});
renderer.render(scene, camera);
}
animate();
}
// Form steps navigation
function nextStep(step) {
document.getElementById(`step-${step-1}`).classList.add('hidden');
document.getElementById(`step-${step}`).classList.remove('hidden');
// Update steps UI
document.querySelectorAll('.step').forEach((el, i) => {
if (i < step) {
el.querySelector('div').classList.remove('border-gray-600');
el.querySelector('div').classList.add('border-teal-500');
el.querySelector('p').classList.remove('text-gray-500');
} else {
el.querySelector('div').classList.add('border-gray-600');
el.querySelector('div').classList.remove('border-teal-500');
el.querySelector('p').classList.add('text-gray-500');
}
});
}
function prevStep(step) {
document.getElementById(`step-${step+1}`).classList.add('hidden');
document.getElementById(`step-${step}`).classList.remove('hidden');
// Update steps UI
document.querySelectorAll('.step').forEach((el, i) => {
if (i < step) {
el.querySelector('div').classList.remove('border-gray-600');
el.querySelector('div').classList.add('border-teal-500');
el.querySelector('p').classList.remove('text-gray-500');
} else {
el.querySelector('div').classList.add('border-gray-600');
el.querySelector('div').classList.remove('border-teal-500');
el.querySelector('p').classList.add('text-gray-500');
}
});
}
// Type text animation
function typeText(text, element, callback) {
let i = 0;
element.textContent = '';
const cursor = element.nextElementSibling;
cursor.style.display = 'inline-block';
const typing = setInterval(() => {
if (i < text.length) {
element.textContent += text.charAt(i);
i++;
} else {
clearInterval(typing);
cursor.style.display = 'none';
if (callback) callback();
}
}, 30);
}
// Set service details based on selection
function setServiceDetails(service) {
const details = {
"Чат-боты": {
title: "Чат-боты",
description: "Гибкие решения для автоматизации бизнес-процессов с помощью Telegram, WhatsApp и других мессенджеров.",
features: [
"Интеграция с CRM и платежными системами",
"AI-ассистенты с NLP",
"Мультиязычная поддержка",
"Гибкие сценарии диалогов"
],
case: "Бот для @crypto_storage: +$50K/month"
},
"Mini-Apps": {
title: "Mini-Apps",
description: "Полноценные приложения внутри Telegram с игровыми механиками и интеграцией крипто-экономик.",
features: [
"WebView и JS-приложения",
"Игровые движки",
"Встроенные кошельки",
"P2E механики"
],
case: "NFT Game Mini-App: +75% retention"
},
"Web3": {
title: "Web3 решения",
description: "Интеграция блокчейн технологий в ваши приложения и бизнес-процессы.",
features: [
"Смарт-контракты",
"NFT коллекции",
"Крипто-платежи",
"Децентрализованные приложения"
],
case: "TON Wallet Integration: 30K+ tx/month"
},
"AI": {
title: "AI интеграции",
description: "Искусственный интеллект для обработки данных, генерации контента и автоматизации решений.",
features: [
"NLP для чат-ботов",
"Генерация изображений",
"Анализ данных",
"Персонализированные рекомендации"
],
case: "AI News Aggregator: +75% retention"
}
};
if (details[service]) {
document.getElementById('detail-title').textContent = details[service].title;
document.getElementById('detail-description').textContent = details[service].description;
const featuresList = document.getElementById('detail-features');
featuresList.innerHTML = '';
details[service].features.forEach(feature => {
const li = document.createElement('li');
li.textContent = feature;
featuresList.appendChild(li);
});
document.getElementById('detail-case').textContent = details[service].case;
// Update the order button color based on service
const button = document.querySelector('#service-details button');
button.className = 'px-6 py-2 rounded-lg font-medium';
if (service === "Чат-боты") button.classList.add('bg-teal-500', 'hover:bg-teal-600');
else if (service === "Mini-Apps") button.classList.add('bg-purple-500', 'hover:bg-purple-600');
else if (service === "Web3") button.classList.add('bg-blue-500', 'hover:bg-blue-600');
else if (service === "AI") button.classList.add('bg-pink-500', 'hover:bg-pink-600');
}
}
// Easter egg for console command
window.addEventListener('keydown', function(e) {
// Check for Ctrl+Shift+I (dev tools)
if (e.ctrlKey && e.shiftKey && e.key === 'I') {
console.log('%cВведите "start bot" для доступа к демо-версии', 'color: #FF00FF; font-size: 14px;');
}
});
// Listen for console commands
const originalConsoleLog = console.log;
console.log = function(message) {
originalConsoleLog.apply(console, arguments);
if (typeof message === 'string' && message.toLowerCase().includes('start bot')) {
// Show the easter egg
document.getElementById('console-egg').classList.remove('hidden');
}
};
function closeEasterEgg() {
document.getElementById('console-egg').classList.add('hidden');
}
// Handle demo console commands
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.console-cmd').forEach(btn => {
btn.addEventListener('click', function() {
const consoleOutput = document.querySelector('#console-egg .bg-gray-900');
const currentText = consoleOutput.innerHTML;
let response = "";
switch(this.textContent) {
case '/start':
response = "🤖 Добро пожаловать в демо нашего Telegram бота!\n\nЭто упрощенная версия реального бота, который мы создаем для клиентов. Вы можете попробовать команды:\n\n/pricing - стоимость услуг\n/features - возможности\n/demo - демо-сценарий";
break;
case '/pricing':
response = "💰 Наши базовые цены:\n\nЧат-бот: от $3,000\nMini-App: от $8,000\nWeb3 решение: от $12,000\nПолный цикл: от $20,000\n\nЦены зависят от сложности и сроков.";
break;
case '/features':
response = "✨ Основные возможности:\n\n• AI-ассистенты\n• Интеграция платежей\n• Мультиязычность\n• Web3 кошельки\n• P2E механики\n• Автоматизированные процессы";
break;
case '/demo':
response = "🚀 Запускаем демо-сценарий...\n\n1. Клиент пишет '/start'\n2. Бот задает уточняющие вопросы\n3. Формируется предложение\n4. Подписывается контракт\n5. Реализация за 14 дней!";
break;
default:
response = "Неизвестная команда. Введите /start для списка команд.";
}
consoleOutput.innerHTML = currentText +
`\n<p class="text-green-400">> ${this.textContent}</p>` +
`\n<p class="text-white">${response.replace(/\n/g, '<br>')}</p>` +
`<p class="text-green-400">> <span class="typing-text"></span></p><span class="typing-cursor"></span>`;
// Scroll to bottom
consoleOutput.scrollTop = consoleOutput.scrollHeight;
// Type the response
const typingText = consoleOutput.querySelector('.typing-text');
const typingCursor = consoleOutput.querySelector('.typing-cursor');
typingCursor.style.display = 'inline-block';
let i = 0;
const typingInterval = setInterval(() => {
if (i < response.length) {
typingText.textContent += response.charAt(i);
i++;
} else {
clearInterval(typingInterval);
typingCursor.style.display = 'none';
}
consoleOutput.scrollTop = consoleOutput.scrollHeight;
}, 30);
});
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=imbytegroup/nromal" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>