# 🎮 ServerSeek — шаблон браузера игровых серверов

**Современный адаптивный HTML-шаблон для платформ-браузеров игровых серверов**

---

## 📋 Обзор

ServerSeek — это премиум-шаблон HTML, разработанный для браузеров игровых серверов и платформ отслеживания. Он отличается современной тёмной темой с яркими фиолетово-голубыми градиентами, плавной анимацией и полностью адаптивной версткой, оптимизированной для всех устройств.

**Идеально подходит для:**

- Сайты со списками игровых серверов
- Платформы для отслеживания серверов
- Порталы игрового сообщества
- Услуги по аренде серверов и хостингу

---

## ✨ Особенности

### 🎨 Дизайн

- **Современная тёмная тема** — лаконичная тёмно-сине-серая цветовая гамма
- **Яркие градиенты** — фиолетовый, голубой и розовый в качестве акцентных цветов
- **Эффекты Glassmorphism** — размытый фон и прозрачные элементы
- **Плавные анимации** — эффекты при наведении курсора, переходы и микроинтеракции
- **VIP/Премиум-оформление** — золотые акценты для VIP-серверов и контента

### 📱 Адаптивный

- **Дизайн с приоритетом мобильных устройств** — оптимизирован для экранов любого размера
- **Адаптивная навигация** — сворачиваемое мобильное меню
- **Адаптивные макеты** — сетки, подстраивающиеся под ширину экрана
- **Оптимизировано для сенсорного управления** — большие элементы для нажатия, удобные для пользователей мобильных устройств

### 🔧 Функциональные возможности

- **Поиск серверов и фильтры** — Расширенные параметры фильтрации
- **Статистика сервера** — количество игроков и пинг в режиме реального времени
- **Интерактивные диаграммы** — интеграция с Chart.js для визуализации данных
- **Выделение VIP-серверов** — особое оформление премиум-объявлений
- **Аутентификация пользователей** — страницы входа в систему и регистрации

### 🔍 Оптимизировано для SEO

- **Мета-теги** — полный набор SEO-мета-тегов на всех страницах
- **Open Graph** — оптимизация публикаций в социальных сетях
- **Twitter Cards** — расширенные превью в Twitter
- **Семантический HTML** — правильная структура HTML5
- **Канонические URL-адреса** — предотвращают проблемы с дублированием контента

---

## 📄 Страницы

| Страница | Описание |
| ----------------- | ---------------------------------------------------------------------------------------- |
| `index.html` | Главная страница с главным блоком, описанием функций, тарифными планами, статистикой и списком поддерживаемых игр |
| `servers.html` | Браузер серверов с функцией поиска, фильтрами, VIP-серверами, популярными серверами и полной таблицей серверов |
| `serverinfo.html` | Страница с подробной информацией о сервере, содержащая графики, статистику и сведения о сервере |
| `contact.html` | Контактная форма с контактными данными, ссылками на социальные сети и разделом «Часто задаваемые вопросы» |
| `login.html` | Страница входа в систему с возможностью входа через социальные сети (Discord, Steam) |
| `register.html` | Страница регистрации пользователя с проверкой данных формы |
| `docs.html` | Страница с документацией, содержащая структуру проекта и руководства по использованию |

---

## 🛠 Технологии

### Ядро

- **HTML5** — семантическая разметка
- **CSS3** — пользовательские свойства, flexbox, grid
- **JavaScript** — Vanilla JS для взаимодействия с пользователем

### Фреймворки и библиотеки

- **TailwindCSS** — CSS-фреймворк, ориентированный на утилитарные компоненты (через CDN)
- **Иконки Bootstrap** — библиотека иконок
- **Chart.js** — интерактивные диаграммы и графики
- **Google Fonts** — семейство шрифтов Rajdhani

### Палитра цветов

```
Primary: #7e22ce (Purple)
Secondary: #06b6d4 (Cyan)
Tertiary: #db2777 (Pink)
VIP Gold: #fbbf24 (Gold)

Dark 900: #0f172a (Main background)
Dark 800: #1e293b (Secondary background)
Dark 700: #334155 (Card backgrounds)

Light 100: #f1f5f9 (Primary text)
Light 200: #cbd5e1 (Secondary text)
Light 300: #94a3b8 (Muted text)
```

---

## 📦 Установка

### Вариант 1: Прямая загрузка

1. Скачайте или клонируйте этот репозиторий
2. Открыть `index.html`в браузере
3. Вот и всё! Никакого процесса сборки не требуется

### Вариант 2: Локальный сервер

Для разработки используйте локальный сервер:

```bash
# Using Python
python -m http.server 8000

# Using Node.js (http-server)
npx http-server

# Using PHP
php -S localhost:8000
```

Затем откройте страницу в`http://localhost:8000` браузере.

---

## 🎨 Настройка

### Смена цветов

Отредактируйте пользовательские свойства CSS в разделе`assets/css/style.css`:

```css
:root {
--color-primary: #7e22ce; /* Change main purple */
--color-secondary: #06b6d4; /* Change cyan accent */
--color-tertiary: #db2777; /* Change pink accent */
}
```

### Добавление новых страниц

1. Скопировать существующий HTML-файл в качестве шаблона
2. Обновите заголовок и мета-теги
3. Измените текст по необходимости
4. Обновить навигационные ссылки на всех страницах

### Изменение навигации

Навигационное меню расположено в верхней части каждого HTML-файла. При добавлении новых ссылок обновляйте разделы меню как для настольных компьютеров, так и для мобильных устройств.

### Настройка диаграмм

Для построения диаграмм используется библиотека Chart.js. Настройки находятся в разделе скриптов файла `serverinfo.html`.

---

## 📁 Структура проекта

```
ServerSeek/
├── assets/
│ ├── css/
│ │ └── style.css # Main stylesheet
│ ├── js/
│ │ └── main.js # JavaScript functionality
│ └── images/
│ ├── games/ # Game icons
│ ├── maps/ # Map images
│ ├── seo/ # OG images
│ ├── favicon.png # Favicon
│ └── hero.webp # Hero background
├── index.html # Homepage
├── servers.html # Server browser
├── serverinfo.html # Server details
├── contact.html # Contact page
├── login.html # Login page
├── register.html # Registration page
├── docs.html # Documentation
└── README.md # This file
```

---

## 🎮 Поддерживаемые игры (демо-версии)

Шаблон содержит демонстрационные значки для:

- Counter-Strike 2 (CS2)
- Counter-Strike 1.6
- Minecraft
- Ржавчина
- ARK: Выживание и эволюция
- FiveM (GTA V)

Добавьте больше игр, разместив значки в `assets/images/games/`.

---

## 📱 Поддержка браузеров

| Браузер | Поддержка |
| ------- | ---------------- |
| Chrome | ✅ Полный |
| Firefox | ✅ Полный |
| Сафари | ✅ Полный |
| Край | ✅ Полный |
| Опера | ✅ Полный |
| IE 11 | ❌ Не поддерживается |

---

## 🔧 Основные компоненты

### Панель навигации

- Неподвижное положение с эффектом размытия
- Уменьшается при прокрутке
- Анимированная рамка с градиентом
- Адаптивное мобильное меню
- Кнопки «Войти»/«Зарегистрироваться»

### Карты сервера

- Значок игры и название сервера
- Количество игроков с индикатором прогресса
- Ping и информация о местоположении
- Индикатор состояния «Онлайн/Офлайн»
- VIP-бейдж для премиум-серверов

### Карточки с ценами

- Трехуровневая система ценообразования (еженедельная, ежемесячная, ежегодная)
- Выделенный вариант «Лучшее соотношение цены и качества»
- Списки функций с галочками
- Анимированные кнопки CTA

---

## 📊 Раздел «Статистика»

Раздел «Статистика» содержит анимированные счетчики:

- Общее количество пользователей
- Последний зарегистрированный пользователь
- Общее количество серверов
- VIP-серверы
- Поддерживаемые игры
- Страны
- Общее количество игроков
- Процент безотказной работы

---

## 🤝 Благодарности

- **Дизайн и разработка**: illusion @ CodeStrike.STORE
- **Значки**: Значки Bootstrap
- **CSS-фреймворк**: TailwindCSS
- **Диаграммы**: Chart.js
- **Шрифты**: Google Fonts — Rajdhani

---

## 📄 Лицензия

Данный шаблон предоставляется для личного и коммерческого использования. Указание авторства приветствуется, но не является обязательным.

---

## 🆘 Поддержка

По вопросам, проблемам или запросам на настройку:

- 🌐 Сайт: codestrike.store
- 💬 Discord: Присоединяйтесь к нашему серверу сообщества

---

Создано с любовью ❤️ компанией CodeStrike.STORE

© 2025 ServerSeek. Все права защищены.