feat: redesign landing sections and interactions
Refresh visual design across hero, map, features, FAQ, and performance sections with tighter spacing, richer animations, updated branding assets, and localization/content tweaks.
This commit is contained in:
Gekon Dev
@@ -1,187 +1,187 @@
|
||||
# 🐛 Отладка Gekon
|
||||
|
||||
## Проблема: Не видно частицы
|
||||
|
||||
### Возможные причины:
|
||||
|
||||
1. **Canvas не поддерживается браузером**
|
||||
- Откройте консоль браузера (F12)
|
||||
- Проверьте ошибки JavaScript
|
||||
|
||||
2. **Частицы за другими элементами**
|
||||
- Проверьте z-index
|
||||
- Убедитесь, что ParticlesBackground рендерится
|
||||
|
||||
3. **Opacity слишком низкая**
|
||||
- Частицы имеют opacity: 0.4
|
||||
- На светлом фоне могут быть не видны
|
||||
|
||||
### Быстрая проверка:
|
||||
|
||||
1. Откройте http://localhost:5173 (или 8080)
|
||||
2. Нажмите F12 (DevTools)
|
||||
3. Перейдите в Console
|
||||
4. Проверьте ошибки
|
||||
|
||||
### Типичные ошибки:
|
||||
|
||||
#### Ошибка: "Cannot read property 'getContext' of null"
|
||||
**Решение:** Canvas ref не инициализирован
|
||||
```typescript
|
||||
// Проверьте, что canvas монтируется
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) {
|
||||
console.error('Canvas not found!');
|
||||
return;
|
||||
}
|
||||
// ...
|
||||
}, []);
|
||||
```
|
||||
|
||||
#### Ошибка: "ResizeObserver loop limit exceeded"
|
||||
**Решение:** Это предупреждение, можно игнорировать
|
||||
|
||||
#### Частицы не видны
|
||||
**Решение 1:** Увеличьте opacity
|
||||
```typescript
|
||||
// В ParticlesBackground.tsx, строка ~60
|
||||
ctx.fillStyle = `rgba(16, 185, 129, ${particle.opacity * 2})`; // Увеличили в 2 раза
|
||||
```
|
||||
|
||||
**Решение 2:** Увеличьте размер частиц
|
||||
```typescript
|
||||
// В ParticlesBackground.tsx, строка ~40
|
||||
size: Math.random() * 4 + 2, // Было: * 2 + 1
|
||||
```
|
||||
|
||||
**Решение 3:** Увеличьте количество
|
||||
```typescript
|
||||
// В ParticlesBackground.tsx, строка ~35
|
||||
const particleCount = Math.min(200, ...); // Было: 100
|
||||
```
|
||||
|
||||
### Проверка рендеринга:
|
||||
|
||||
Добавьте console.log в ParticlesBackground:
|
||||
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
console.log('ParticlesBackground mounted!');
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) {
|
||||
console.error('Canvas not found!');
|
||||
return;
|
||||
}
|
||||
console.log('Canvas found:', canvas.width, 'x', canvas.height);
|
||||
console.log('Particles count:', particlesRef.current.length);
|
||||
// ...
|
||||
}, []);
|
||||
```
|
||||
|
||||
### Проверка в браузере:
|
||||
|
||||
1. Откройте DevTools (F12)
|
||||
2. Elements tab
|
||||
3. Найдите `<canvas>` элемент
|
||||
4. Проверьте стили:
|
||||
- `position: absolute`
|
||||
- `inset: 0`
|
||||
- `opacity: 0.4`
|
||||
- `z-index` не перекрыт
|
||||
|
||||
### Временное решение (для теста):
|
||||
|
||||
Сделайте частицы очень заметными:
|
||||
|
||||
```typescript
|
||||
// В ParticlesBackground.tsx
|
||||
// Строка ~60 - увеличьте opacity
|
||||
ctx.fillStyle = `rgba(16, 185, 129, 1)`; // Полная непрозрачность
|
||||
|
||||
// Строка ~40 - увеличьте размер
|
||||
size: Math.random() * 10 + 5, // Большие частицы
|
||||
|
||||
// Строка ~35 - больше частиц
|
||||
const particleCount = 200;
|
||||
```
|
||||
|
||||
### Проверка карты серверов:
|
||||
|
||||
Если карта не работает:
|
||||
|
||||
1. Откройте консоль (F12)
|
||||
2. Проверьте ошибки в ServerMap
|
||||
3. Убедитесь, что hover работает
|
||||
|
||||
**Типичная проблема:** Tooltips не показываются
|
||||
```typescript
|
||||
// Проверьте z-index в ServerMap.tsx
|
||||
// Tooltip должен иметь z-10
|
||||
className="... z-10 ..."
|
||||
```
|
||||
|
||||
### Перезапуск с чистого листа:
|
||||
|
||||
```bash
|
||||
# Остановите Docker
|
||||
wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose down"
|
||||
|
||||
# Удалите volumes
|
||||
wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose down -v"
|
||||
|
||||
# Пересоберите
|
||||
wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose up --build"
|
||||
```
|
||||
|
||||
### Проверка портов:
|
||||
|
||||
Текущий порт может быть 8080 вместо 5173:
|
||||
- Попробуйте http://localhost:8080
|
||||
- Или http://localhost:5173
|
||||
|
||||
### Логи Docker:
|
||||
|
||||
```bash
|
||||
# Смотрите логи в реальном времени
|
||||
wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose logs -f"
|
||||
```
|
||||
|
||||
### Если ничего не помогает:
|
||||
|
||||
1. Откройте http://localhost:8080 (или 5173)
|
||||
2. Нажмите F12
|
||||
3. Скопируйте все ошибки из Console
|
||||
4. Проверьте Network tab - все ли файлы загружаются
|
||||
|
||||
---
|
||||
|
||||
## Быстрый тест частиц:
|
||||
|
||||
Добавьте в консоль браузера:
|
||||
|
||||
```javascript
|
||||
// Проверка Canvas API
|
||||
const canvas = document.querySelector('canvas');
|
||||
if (canvas) {
|
||||
console.log('Canvas found!', canvas.width, canvas.height);
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.fillRect(100, 100, 200, 200); // Красный квадрат для теста
|
||||
} else {
|
||||
console.error('Canvas NOT found!');
|
||||
}
|
||||
```
|
||||
|
||||
Если увидите красный квадрат - Canvas работает, проблема в коде частиц.
|
||||
Если нет - Canvas не рендерится.
|
||||
|
||||
---
|
||||
|
||||
**Текущий статус:**
|
||||
- ✅ Docker запущен
|
||||
- ✅ Vite работает
|
||||
- ❓ Частицы - нужна проверка
|
||||
- ❓ Карта - нужна проверка
|
||||
|
||||
**Порт:** http://localhost:8080 или http://localhost:5173
|
||||
# 🐛 Отладка Gekon
|
||||
|
||||
## Проблема: Не видно частицы
|
||||
|
||||
### Возможные причины:
|
||||
|
||||
1. **Canvas не поддерживается браузером**
|
||||
- Откройте консоль браузера (F12)
|
||||
- Проверьте ошибки JavaScript
|
||||
|
||||
2. **Частицы за другими элементами**
|
||||
- Проверьте z-index
|
||||
- Убедитесь, что ParticlesBackground рендерится
|
||||
|
||||
3. **Opacity слишком низкая**
|
||||
- Частицы имеют opacity: 0.4
|
||||
- На светлом фоне могут быть не видны
|
||||
|
||||
### Быстрая проверка:
|
||||
|
||||
1. Откройте http://localhost:5173 (или 8080)
|
||||
2. Нажмите F12 (DevTools)
|
||||
3. Перейдите в Console
|
||||
4. Проверьте ошибки
|
||||
|
||||
### Типичные ошибки:
|
||||
|
||||
#### Ошибка: "Cannot read property 'getContext' of null"
|
||||
**Решение:** Canvas ref не инициализирован
|
||||
```typescript
|
||||
// Проверьте, что canvas монтируется
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) {
|
||||
console.error('Canvas not found!');
|
||||
return;
|
||||
}
|
||||
// ...
|
||||
}, []);
|
||||
```
|
||||
|
||||
#### Ошибка: "ResizeObserver loop limit exceeded"
|
||||
**Решение:** Это предупреждение, можно игнорировать
|
||||
|
||||
#### Частицы не видны
|
||||
**Решение 1:** Увеличьте opacity
|
||||
```typescript
|
||||
// В ParticlesBackground.tsx, строка ~60
|
||||
ctx.fillStyle = `rgba(16, 185, 129, ${particle.opacity * 2})`; // Увеличили в 2 раза
|
||||
```
|
||||
|
||||
**Решение 2:** Увеличьте размер частиц
|
||||
```typescript
|
||||
// В ParticlesBackground.tsx, строка ~40
|
||||
size: Math.random() * 4 + 2, // Было: * 2 + 1
|
||||
```
|
||||
|
||||
**Решение 3:** Увеличьте количество
|
||||
```typescript
|
||||
// В ParticlesBackground.tsx, строка ~35
|
||||
const particleCount = Math.min(200, ...); // Было: 100
|
||||
```
|
||||
|
||||
### Проверка рендеринга:
|
||||
|
||||
Добавьте console.log в ParticlesBackground:
|
||||
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
console.log('ParticlesBackground mounted!');
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) {
|
||||
console.error('Canvas not found!');
|
||||
return;
|
||||
}
|
||||
console.log('Canvas found:', canvas.width, 'x', canvas.height);
|
||||
console.log('Particles count:', particlesRef.current.length);
|
||||
// ...
|
||||
}, []);
|
||||
```
|
||||
|
||||
### Проверка в браузере:
|
||||
|
||||
1. Откройте DevTools (F12)
|
||||
2. Elements tab
|
||||
3. Найдите `<canvas>` элемент
|
||||
4. Проверьте стили:
|
||||
- `position: absolute`
|
||||
- `inset: 0`
|
||||
- `opacity: 0.4`
|
||||
- `z-index` не перекрыт
|
||||
|
||||
### Временное решение (для теста):
|
||||
|
||||
Сделайте частицы очень заметными:
|
||||
|
||||
```typescript
|
||||
// В ParticlesBackground.tsx
|
||||
// Строка ~60 - увеличьте opacity
|
||||
ctx.fillStyle = `rgba(16, 185, 129, 1)`; // Полная непрозрачность
|
||||
|
||||
// Строка ~40 - увеличьте размер
|
||||
size: Math.random() * 10 + 5, // Большие частицы
|
||||
|
||||
// Строка ~35 - больше частиц
|
||||
const particleCount = 200;
|
||||
```
|
||||
|
||||
### Проверка карты серверов:
|
||||
|
||||
Если карта не работает:
|
||||
|
||||
1. Откройте консоль (F12)
|
||||
2. Проверьте ошибки в ServerMap
|
||||
3. Убедитесь, что hover работает
|
||||
|
||||
**Типичная проблема:** Tooltips не показываются
|
||||
```typescript
|
||||
// Проверьте z-index в ServerMap.tsx
|
||||
// Tooltip должен иметь z-10
|
||||
className="... z-10 ..."
|
||||
```
|
||||
|
||||
### Перезапуск с чистого листа:
|
||||
|
||||
```bash
|
||||
# Остановите Docker
|
||||
wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose down"
|
||||
|
||||
# Удалите volumes
|
||||
wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose down -v"
|
||||
|
||||
# Пересоберите
|
||||
wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose up --build"
|
||||
```
|
||||
|
||||
### Проверка портов:
|
||||
|
||||
Текущий порт может быть 8080 вместо 5173:
|
||||
- Попробуйте http://localhost:8080
|
||||
- Или http://localhost:5173
|
||||
|
||||
### Логи Docker:
|
||||
|
||||
```bash
|
||||
# Смотрите логи в реальном времени
|
||||
wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose logs -f"
|
||||
```
|
||||
|
||||
### Если ничего не помогает:
|
||||
|
||||
1. Откройте http://localhost:8080 (или 5173)
|
||||
2. Нажмите F12
|
||||
3. Скопируйте все ошибки из Console
|
||||
4. Проверьте Network tab - все ли файлы загружаются
|
||||
|
||||
---
|
||||
|
||||
## Быстрый тест частиц:
|
||||
|
||||
Добавьте в консоль браузера:
|
||||
|
||||
```javascript
|
||||
// Проверка Canvas API
|
||||
const canvas = document.querySelector('canvas');
|
||||
if (canvas) {
|
||||
console.log('Canvas found!', canvas.width, canvas.height);
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.fillRect(100, 100, 200, 200); // Красный квадрат для теста
|
||||
} else {
|
||||
console.error('Canvas NOT found!');
|
||||
}
|
||||
```
|
||||
|
||||
Если увидите красный квадрат - Canvas работает, проблема в коде частиц.
|
||||
Если нет - Canvas не рендерится.
|
||||
|
||||
---
|
||||
|
||||
**Текущий статус:**
|
||||
- ✅ Docker запущен
|
||||
- ✅ Vite работает
|
||||
- ❓ Частицы - нужна проверка
|
||||
- ❓ Карта - нужна проверка
|
||||
|
||||
**Порт:** http://localhost:8080 или http://localhost:5173
|
||||
|
||||
Reference in New Issue
Block a user