feat: Add animated particles background and interactive server map

- Added ParticlesBackground component with Canvas-based animation
- Created ServerMap with 25+ global server locations
- Added interactive hover tooltips for server details
- Implemented real-time stats display (users, latency)
- Fixed hydration mismatch error in ServerMap
- Increased particle visibility (opacity 0.6, 150 particles)
- Added Docker support with docker-compose.yml
- Created comprehensive documentation (SETUP.md, DEBUG.md, FEATURES.md)
- Added translations for new sections (EN/RU/ZH)
- Configured proper port mapping (5173)

New features:
- Animated particles with dynamic connections
- Global network infrastructure visualization
- 25 server locations across 6 continents
- Hover interactions with server statistics
- Responsive design for all screen sizes
This commit is contained in:
Gekon Dev
2026-04-21 02:05:09 +03:00
commit c1c139de32
87 changed files with 8355 additions and 0 deletions
+111
View File
@@ -0,0 +1,111 @@
# 🚀 Gekon - Быстрый старт
## За 3 минуты до запуска
### 1. Установка (1 мин)
```bash
cd gekon-speed-boost-3ba17197-main
npm install
```
### 2. Запуск (30 сек)
```bash
npm run dev
```
### 3. Открыть (30 сек)
```
http://localhost:5173
```
## ✅ Что добавлено
### Анимированный фон с частицами
- Файл: `src/components/ParticlesBackground.tsx`
- Плавная анимация на Canvas
- Цвета бренда Gekon
### Интерактивная карта серверов
- Файл: `src/components/ServerMap.tsx`
- 25+ локаций по всему миру
- Hover для деталей сервера
- Статистика в реальном времени
## 🎨 Быстрая настройка
### Добавить свой сервер на карту
```typescript
// src/components/ServerMap.tsx, строка ~15
{
id: "moscow",
country: "Russia",
city: "Moscow",
x: 55, // % слева (0-100)
y: 30, // % сверху (0-100)
users: 2500, // количество пользователей
latency: 5, // задержка в мс
status: "online"
}
```
### Изменить количество частиц
```typescript
// src/components/ParticlesBackground.tsx, строка ~35
const particleCount = Math.min(100, ...);
// Измените 100 на нужное число
```
### Подключить к Sub-Bridge
```typescript
// Создайте: src/config/subscription.ts
export const SUBSCRIPTION_CONFIG = {
baseUrl: 'https://subb.ydns.eu',
supportUrl: 'https://subb.ydns.eu/',
};
// В компонентах замените:
<Button onClick={() => window.location.href = SUBSCRIPTION_CONFIG.baseUrl}>
```
## 🌍 Языки
Переключатель в навигации (правый верхний угол):
- 🇬🇧 English
- 🇷🇺 Русский
- 🇨🇳 中文
## 📦 Сборка
```bash
npm run build
npm run preview
```
## 🎯 Что дальше?
1. Добавьте реальные ссылки на подписку
2. Интегрируйте Telegram бот
3. Настройте аналитику
4. Оптимизируйте SEO
5. Добавьте Cookie Consent
## 📚 Документация
- `SETUP.md` - Полная инструкция
- `README.ru.md` - Подробное описание на русском
- Исходный код хорошо документирован
## 🐛 Проблемы?
```bash
# Переустановите зависимости
rm -rf node_modules package-lock.json
npm install
# Очистите кэш
npm run build -- --force
```
---
**Готово!** Лендинг запущен и готов к кастомизации 🎉