# 🧪 TESTING GUIDE - Руководство по тестированию

## 📋 Быстрая проверка после Desktop Grid Fix

### ✅ Что должно работать

#### 1. **Desktop (1366px, 1920px) - Основное**
- [ ] **Hero Section** - 2 колонки в ряд (текст слева, картинка справа)
- [ ] **Features/USP** - 3 карточки в ряд
- [ ] **Stats** - 3-4 статистики в ряд
- [ ] **Comparison Table** - таблица во всю ширину
- [ ] **Footer** - 3-4 колонки в ряд

#### 2. **Tablet (768px - 991px)**
- [ ] **Hero Section** - может быть 1-2 колонки
- [ ] **Features** - 2 карточки в ряд или 1 столбиком
- [ ] **Footer** - 2 колонки

#### 3. **Mobile (<768px)**
- [ ] Всё в одну колонку (столбик)
- [ ] Меню сворачивается в бургер
- [ ] Кнопки на всю ширину

---

## 🖥️ Тестирование Desktop Grid

### Метод 1: Изменение размера окна браузера

1. **Откройте index.html в браузере**
2. **Нажмите F11** (полноэкранный режим)
3. **Проверьте:**
   - Есть ли несколько колонок в ряд?
   - Карточки рядом друг с другом или столбиком?

**Ожидаемое поведение:**
```
1920px экран:
┌────────┬────────┬────────┐
│ Карта 1│ Карта 2│ Карта 3│
└────────┴────────┴────────┘
✅ ТРИ КОЛОНКИ В РЯД
```

**НЕправильное (если баг не исправлен):**
```
1920px экран:
┌────────────────┐
│    Карта 1     │
├────────────────┤
│    Карта 2     │
├────────────────┤
│    Карта 3     │
└────────────────┘
❌ СТОЛБИК (как на мобилке)
```

### Метод 2: Chrome DevTools Responsive Mode

1. **Откройте index.html**
2. **Нажмите F12** (DevTools)
3. **Нажмите Ctrl+Shift+M** (Toggle Device Toolbar)
4. **Выберите разрешения:**

| Разрешение | Ожидаемое поведение |
|------------|---------------------|
| **1920x1080** | 3-4 колонки в ряд |
| **1366x768** | 2-3 колонки в ряд |
| **1024x768** | 2 колонки в ряд |
| **768x1024** | 1-2 колонки (планшет) |
| **375x667** | 1 колонка (мобилка) |

### Метод 3: Проверка в DevTools Inspector

1. **Откройте index.html**
2. **Нажмите F12**
3. **Выберите Elements tab**
4. **Найдите элемент `.row`**
5. **Проверьте Computed styles:**

**Должно быть:**
```css
display: flex;           /* ✅ НЕ block */
flex-wrap: wrap;         /* ✅ */
```

6. **Найдите элемент `.col-lg-6`**
7. **Проверьте Computed styles:**

**Должно быть (на 1920px экране):**
```css
flex: 0 0 50%;           /* ✅ 50% ширины */
max-width: 50%;          /* ✅ */
```

### Метод 4: Консольная проверка

Откройте Console (F12) и выполните:

```javascript
// Проверка что .row это flex
getComputedStyle(document.querySelector('.row')).display
// Должно вернуть: "flex"

// Проверка ширины колонки
getComputedStyle(document.querySelector('.col-lg-6')).flex
// Должно вернуть: "0 0 50%" или подобное

// Проверка что desktop-fix.css загружен
Array.from(document.styleSheets).find(s => s.href?.includes('desktop-fix'))
// Должно вернуть: CSSStyleSheet объект (НЕ undefined)
```

---

## 🔍 Детальное тестирование страниц

### 1. index.html - Главная страница

#### Hero Section
- [ ] **На 1920px:** Текст слева (50%), изображение/контент справа (50%)
- [ ] **На 768px:** Текст и изображение друг под другом
- [ ] **Margin-top:** Hero не перекрывается navbar (должен быть отступ 80px)

#### USP / Features Section
- [ ] **На 1920px:** 3 карточки в ряд (33% каждая)
- [ ] **На 1366px:** 3 карточки в ряд или 2+1
- [ ] **На 768px:** 2 карточки в ряд или 1 столбиком
- [ ] **Hover:** Карточки поднимаются и светятся

#### Architecture Diagram
- [ ] **На 1920px:** Все слои видны, диаграмма читаема
- [ ] **На 768px:** Слои адаптируются

#### Comparison Table
- [ ] **На 1920px:** Таблица во всю ширину контейнера
- [ ] **На 768px:** Горизонтальная прокрутка или адаптация

#### Stats Section
- [ ] **На 1920px:** 3-4 статистики в ряд
- [ ] **На 768px:** 2 статистики в ряд
- [ ] **На 375px:** 1 статистика на строку

#### Footer
- [ ] **На 1920px:** 3-4 колонки в ряд
- [ ] **На 768px:** 2 колонки
- [ ] **На 375px:** 1 колонка

### 2. docs.html - Документация

#### Sidebar + Content Layout
- [ ] **На 1920px:** Sidebar слева (25%), контент справа (75%)
- [ ] **На 768px:** Sidebar сверху, контент снизу
- [ ] **Sticky sidebar:** Работает на desktop, отключается на tablet/mobile

#### Documentation Cards
- [ ] **На 1920px:** 2-3 карточки в ряд
- [ ] **На 768px:** 1-2 карточки

### 3. download.html - Скачать

#### Installation Methods
- [ ] **На 1920px:** Docker, NPM, Binary в ряд (3 колонки)
- [ ] **На 768px:** По 1-2 метода в строку

#### Platform Cards
- [ ] **На 1920px:** Linux, macOS, Windows в ряд (3 карточки)
- [ ] **На 768px:** 1-2 карточки в строку

### 4. architecture.html - Архитектура

#### 5 Layers of Protection
- [ ] **На 1920px:** 2-3 слоя в ряд
- [ ] **На 768px:** 1 слой на строку

#### Code Examples
- [ ] **На всех разрешениях:** Блоки кода читаемы
- [ ] **Copy button:** Работает на всех устройствах

### 5. community.html - Сообщество

#### Community Channels
- [ ] **На 1920px:** 3 канала в ряд (GitHub, Discord, Forum)
- [ ] **На 768px:** 2 канала в ряд
- [ ] **На 375px:** 1 канал на строку

#### Contribution Cards
- [ ] **На 1920px:** 4 карточки в ряд
- [ ] **На 768px:** 2 карточки в ряд

### 6. about.html - О проекте

#### Mission, Vision, Values
- [ ] **На 1920px:** 3 блока в ряд
- [ ] **На 768px:** 1-2 блока в ряд

#### Timeline
- [ ] **На всех разрешениях:** Timeline читаем и корректно отображается

#### Team Cards
- [ ] **На 1920px:** 4 члена команды в ряд
- [ ] **На 768px:** 2 в ряд
- [ ] **На 375px:** 1 на строку

---

## 🌐 Тестирование кроссбраузерности

### Браузеры для тестирования

| Браузер | Версия | Ожидаемое поведение |
|---------|--------|---------------------|
| **Chrome** | 90+ | ✅ Полная поддержка |
| **Firefox** | 88+ | ✅ Полная поддержка |
| **Safari** | 14+ | ✅ Полная поддержка (с vendor prefixes) |
| **Edge** | 90+ | ✅ Полная поддержка |
| **IE 11** | 11 | ⚠️ Базовая поддержка (без glass эффектов) |

### Что проверять в каждом браузере:

#### 1. Chrome (Reference Browser)
- [ ] Grid работает на всех разрешениях
- [ ] Glassmorphism эффекты видны
- [ ] Transitions плавные
- [ ] Theme toggle работает

#### 2. Firefox
- [ ] Grid работает
- [ ] Backdrop-filter работает (glassmorphism)
- [ ] Все vendor prefixes применяются

#### 3. Safari
- [ ] Grid работает
- [ ] `-webkit-backdrop-filter` применяется
- [ ] Flexbox работает корректно
- [ ] Нет проблем с z-index

#### 4. Edge
- [ ] Grid работает
- [ ] Все современные CSS функции поддерживаются
- [ ] Transitions работают

#### 5. IE 11 (опционально)
- [ ] Базовый layout работает
- [ ] Grid может не работать идеально (ожидается)
- [ ] Glassmorphism не работает (ожидается)
- [ ] Контент остается читаемым

---

## 🎨 Визуальное тестирование

### Text Contrast (из visual-fixes.css)

- [ ] **Headings:** #ffffff (bright white) на всех фонах
- [ ] **Body text:** #e6e6ff (светло-лиловый) читаем
- [ ] **Muted text:** #b0b0d0 (НЕ слишком бледный)
- [ ] **Links:** #00f0ff (яркий cyan) всегда видны
- [ ] **Code:** #00f0ff на темном фоне

### Glassmorphism Effect

- [ ] **Glass cards:** полупрозрачны но читаемы (opacity 0.85)
- [ ] **Glass nav:** полупрозрачный но виден (opacity 0.9)
- [ ] **Borders:** видны (rgba 0.1)
- [ ] **Shadows:** создают глубину

### Z-Index Hierarchy

- [ ] **Navbar:** всегда сверху (z-index 1030)
- [ ] **Modals:** выше navbar (z-index 1050)
- [ ] **Sticky sidebar:** не перекрывает navbar
- [ ] **Cards:** не перекрывают друг друга
- [ ] **Hero section:** не перекрывается navbar (margin-top 80px)

### Spacing

- [ ] **Sections:** uniform padding 80px top/bottom
- [ ] **First section:** 120px top padding (navbar clearance)
- [ ] **Cards:** 30px margin-bottom (не касаются друг друга)
- [ ] **Card padding:** 2rem на desktop, 1.5rem на tablet, 1rem на mobile

---

## 🐛 Отладка проблем

### Проблема: Grid не работает на desktop

**Симптомы:**
- Всё в столбик на 1920px экране
- `.col-lg-6` занимает 100% ширины

**Решение:**
1. Проверьте что `desktop-fix.css` загружен:
   ```javascript
   Array.from(document.styleSheets).map(s => s.href)
   // Должен быть css/desktop-fix.css в списке
   ```

2. Проверьте порядок загрузки CSS:
   ```html
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="css/desktop-fix.css">  <!-- Должен быть ЗДЕСЬ -->
   <link rel="stylesheet" href="css/responsive.css">
   ```

3. Проверьте что нет кэша браузера:
   - Ctrl+Shift+R (hard reload)
   - Или очистите кэш в настройках

### Проблема: Текст не читается

**Симптомы:**
- Текст сливается с фоном
- Muted text почти не виден

**Решение:**
1. Проверьте что `visual-fixes.css` загружен
2. Проверьте computed color в DevTools:
   ```javascript
   getComputedStyle(document.querySelector('h1')).color
   // Должно быть: rgb(255, 255, 255) - белый
   ```

### Проблема: Блоки перекрываются

**Симптомы:**
- Navbar скрывается под контентом
- Sticky sidebar блокирует контент
- Cards наезжают друг на друга

**Решение:**
1. Проверьте z-index в DevTools
2. Проверьте margin-top первой секции:
   ```javascript
   getComputedStyle(document.querySelector('section:first-of-type')).marginTop
   // Должно быть: 80px или больше
   ```

### Проблема: Glassmorphism не работает

**Симптомы:**
- Карточки полностью непрозрачные или полностью прозрачные
- Нет blur эффекта

**Решение:**
1. Проверьте browser support для backdrop-filter:
   ```javascript
   CSS.supports('backdrop-filter', 'blur(20px)')
   // Должно вернуть: true
   ```

2. В Safari проверьте `-webkit-backdrop-filter`:
   ```css
   /* В DevTools Styles panel */
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
   ```

---

## ✅ Финальный Checklist

### Базовые проверки
- [ ] Все 6 страниц открываются без ошибок
- [ ] Нет console errors в DevTools
- [ ] Все CSS файлы загружаются (Network tab)
- [ ] Все JavaScript файлы работают

### Desktop Grid (1920px)
- [ ] Hero в 2 колонки
- [ ] Features в 3 колонки
- [ ] Stats в 3-4 колонки
- [ ] Footer в 3-4 колонки

### Responsive (768px)
- [ ] Menu сворачивается в burger
- [ ] Колонки адаптируются (1-2 в ряд)
- [ ] Карточки не слишком узкие

### Mobile (375px)
- [ ] Всё в 1 колонку
- [ ] Текст читаем
- [ ] Кнопки нажимаются
- [ ] Нет горизонтального скролла

### Visual Quality
- [ ] Текст читаем везде
- [ ] Нет перекрытий блоков
- [ ] Glassmorphism работает
- [ ] Animations плавные

### Cross-Browser
- [ ] Chrome ✅
- [ ] Firefox ✅
- [ ] Safari ✅
- [ ] Edge ✅

### Theme Toggle
- [ ] Dark theme по умолчанию
- [ ] Light theme переключается
- [ ] Theme сохраняется в localStorage
- [ ] Работает на всех страницах

---

## 📊 Performance Testing

### Lighthouse Audit (Chrome DevTools)

1. Откройте index.html
2. F12 → Lighthouse tab
3. Запустите audit для Desktop
4. Проверьте scores:

**Ожидаемые результаты:**
- **Performance:** 90-100
- **Accessibility:** 90-100
- **Best Practices:** 90-100
- **SEO:** 90-100

### Page Load Time

- [ ] **First Contentful Paint:** < 1.5s
- [ ] **Largest Contentful Paint:** < 2.5s
- [ ] **Time to Interactive:** < 3.5s
- [ ] **Total Page Size:** < 1 MB

---

## 🎉 Если всё работает

**Поздравляем!** 🎊

Ваш Phantom Protocol website работает корректно:
- ✅ Desktop grid исправлен
- ✅ Кроссбраузерность работает
- ✅ Визуальные проблемы решены
- ✅ Responsive design работает

**Готов к deployment!** 🚀

---

## 📚 Связанные документы

- [DESKTOP-FIX.md](DESKTOP-FIX.md) - Подробности Desktop Grid Fix
- [VISUAL-FIXES.md](VISUAL-FIXES.md) - Визуальные исправления
- [FIXES-SUMMARY.md](FIXES-SUMMARY.md) - Сводка всех исправлений
- [README.md](README.md) - Главная документация