# Описание проекта и его структура

Данный проект представляет собой веб-страницу, демонстрирующую возможности продукта BlackBox и его сравнение с другими продуктами.

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

```
/Workspace
├── .htaccess
├── docker-compose.yml
├── index.html
├── nginx.conf
├── project_description.md
├── css/
│   ├── all.min.css
│   ├── style.css
│   └── tailwind.min.css
├── images/
│   ├── banner-image.webp
│   ├── bb_on_white-square.webp
│   ├── logo.webp
│   └── scales.webp
├── js/
│   ├── all.min.js
│   ├── echarts.min.js
│   ├── fade-up.js
│   ├── features.js
│   ├── flipbook.js
│   ├── lang-detect-redirect.js
│   └── language-switcher.js
├── lang/
│   ├── en/
│   │   ├── index.html
│   │   ├── json/
│   │   │   └── en.json
│   │   └── pages/
│   │       └── faq.html
│   ├── es/
│   │   ├── index.html
│   │   ├── json/
│   │   │   └── es.json
│   │   └── pages/
│   │       └── faq.html
│   └── ru/
│       ├── index.html
│       ├── json/
│       │   └── ru.json
│       └── pages/
│           └── faq.html
└── pages/
    └── faq.html
```

- `/Workspace`: Корневая директория проекта.
- `docker-compose.yml`: Файл конфигурации для Docker Compose, используемый для определения и запуска многоконтейнерных Docker-приложений.
- `index.html`: Главный HTML-file, содержащий структуру веб-страницы.
- `.htaccess`: Файл конфигурации веб-сервера Apache для управления перенаправлениями URL для мультиязычности.
- `.htaccess`: Файл конфигурации веб-сервера Apache для управления перенаправлениями URL для мультиязычности.
- `docker-compose.yml`: Файл конфигурации для Docker Compose, используемый для определения и запуска многоконтейнерных Docker-приложений.
- `index.html`: Главный HTML-файл, содержащий структуру веб-страницы.
- `nginx.conf`: Файл конфигурации веб-сервера Nginx.
- `project_description.md`: Этот файл, содержащий описание проекта и его структуры.
- `css/`: Директория для файлов стилей.
- `css/all.min.css`: Минимизированный файл CSS, возможно, содержащий объединенные стили.
- `css/style.css`: Основной файл CSS, содержащий стили для оформления веб-страницы.
- `css/tailwind.min.css`: Минимизированный файл CSS, возможно, содержащий стили Tailwind CSS.
- `images/`: Директория для изображений.
- `images/banner-image.webp`: Изображение баннера в формате WebP.
- `images/bb_on_white-square.webp`: Изображение продукта "BlackBox" на белом фоне.
- `images/logo.webp`: Файл логотипа в формате WebP.
- `images/scales.webp`: Изображение весов или сравнения.
- `js/`: Директория для файлов JavaScript.
- `js/all.min.js`: Минимизированный файл JavaScript, возможно, содержащий объединенные скрипты.
- `js/echarts.min.js`: Минимизированный файл JavaScript, возможно, содержащий библиотеку ECharts для построения графиков.
- `js/fade-up.js`: Скрипт для анимации появления элементов при прокрутке.
- `js/features.js`: Скрипт для отображения таблицы сравнения функций продуктов. Загружает переводы из соответствующего JSON файла.
- `js/flipbook.js`: Скрипт для реализации функционала "флипбука" и модального окна с деталями продукта. Загружает переводы для деталей продукта и текста кнопок из соответствующего JSON файла.
- `js/lang-detect-redirect.js`: Определяет язык браузера пользователя и перенаправляет на соответствующую языковую версию страницы при первом посещении.
- `js/language-switcher.js`: Добавляет на страницу плавающую кнопку-переключатель языка с выпадающим списком.
- `lang/`: Директория, содержащая поддиректории для каждого поддерживаемого языка.
- `lang/en/`: Директория для английской версии сайта.
- `lang/en/index.html`: HTML-файл с контентом на английском языке.
- `lang/en/json/`: Директория, содержащая JSON файл с английскими переводами.
- `lang/en/json/en.json`: JSON файл с английскими переводами.
- `lang/en/pages/`: Директория, содержащая страницы для английской версии сайта.
- `lang/en/pages/faq.html`: HTML-файл с контентом FAQ на английском языке.
- `lang/es/`: Директория для испанской версии сайта.
- `lang/es/index.html`: HTML-файл с контентом на испанском языке.
- `lang/es/json/`: Директория, содержащая JSON файл с испанскими переводами.
- `lang/es/json/es.json`: JSON файл с испанскими переводами.
- `lang/es/pages/`: Директория, содержащая страницы для испанской версии сайта.
- `lang/es/pages/faq.html`: HTML-файл с контентом FAQ на испанском языке.
- `lang/ru/`: Директория для русской версии сайта.
- `lang/ru/index.html`: HTML-файл с контентом на русском языке.
- `lang/ru/json/`: Директория, содержащая JSON файл с русскими переводами.
- `lang/ru/json/ru.json`: JSON файл с русскими переводами.
- `lang/ru/pages/`: Директория, содержащая страницы для русской версии сайта.
- `lang/ru/pages/faq.html`: HTML-файл с контентом FAQ на русском языке.
- `pages/`: Директория, содержащая общие страницы.
- `pages/faq.html`: HTML-файл с общим контентом FAQ.

## Взаимодействие файлов

- `index.html` является центральным файлом, который связывает все остальные ресурсы.
- В HTML файлах подключены файлы стилей из директории `css/` (`style.css`, `all.min.css`, `tailwind.min.css`) для визуального оформления элементов страницы.
- В HTML файлах подключены скрипты из директории `js/` (`fade-up.js`, `features.js`, `flipbook.js`, `lang-detect-redirect.js`, `language-switcher.js`, `all.min.js`, `echarts.min.js`) для добавления интерактивности и динамического контента, а также для мультиязычности.
- Скрипты взаимодействуют с элементами в HTML через их ID или классы для изменения их поведения или внешнего вида.
- Изображения из директории `images/` (`banner-image.webp`, `bb_on_white-square.webp`, `logo.webp`, `scales.webp`) используются в HTML (например, в теге `<img>` или как фон в CSS).
- JavaScript файлы `features.js` и `flipbook.js` загружают переводимый контент из JSON файлов, расположенных в директориях `lang/<lang>/json/`, в зависимости от текущего языка страницы.

## Стили (css/)

Директория `css/` содержит файлы стилей, определяющие внешний вид веб-страницы.

- **style.css**: Основной файл CSS, содержащий стили для:
    - Общих элементов страницы (тело, заголовки, параграфы).
    - Макетных элементов (использование Flexbox или Grid для расположения элементов).
    - Оформления текста, цветов, фонов.
    - Стилизации интерактивных элементов (кнопки, ссылки).
    - Адаптивного дизайна (медиазапросы для различных размеров экрана).
    - Стили, связанные с анимацией появления (`.fade-up`, `.animate-fadeUp`).
    - Стили для флипбука и модального окна.
    - Стили для переключателя языка.
- **all.min.css**: Минимизированный файл CSS, возможно, содержащий объединенные стили из различных источников.
- **tailwind.min.css**: Минимизированный файл CSS, возможно, содержащий стили из фреймворка Tailwind CSS.

## Скрипты (js/)

Директория `js/` содержит файлы скриптов:

- **all.min.js**: Минимизированный файл JavaScript, возможно, содержащий объединенные скрипты.
- **echarts.min.js**: Минимизированный файл JavaScript, содержащий библиотеку ECharts для построения графиков.
- **fade-up.js**: Реализует анимацию постепенного появления элементов с классом `.fade-up` при загрузке страницы. Использует `setTimeout` для задержки анимации каждого элемента.
- **features.js**: Управляет отображением таблицы сравнения функций продуктов. Загружает переводы названий функций и подсказок из соответствующего JSON файла. Динамически создает строки таблицы и добавляет эффекты при наведении для отображения подсказок.
- **flipbook.js**: Реализует интерактивный компонент "флипбук" и функционал модального окна с деталями продукта. Загружает переводы для деталей продукта и текста кнопок из соответствующего JSON файла.
- **lang-detect-redirect.js**: Определяет язык браузера пользователя и перенаправляет на соответствующую языковую версию страницы при первом посещении.
- **language-switcher.js**: Добавляет на страницу плавающую кнопку-переключатель языка с выпадающим списком.

## Список используемых функций

Ниже приведен список функций и важных переменных, обнаруженных в неминифицированных JavaScript файлах:

- **js/fade-up.js**:
    - Анонимная функция в `document.querySelectorAll('.fade-up').forEach`
    - Анонимная функция в `setTimeout`

- **js/features.js**:
    - `originalFeaturesData`: Массив объектов с исходными данными функций.
    - `originalProductsData`: Массив объектов с исходными данными продуктов.
    - `fetchLanguageData(lang)`: Асинхронная функция для загрузки JSON файла с переводами.
    - `renderFeatures(data)`: Функция для динамического создания и отображения списка функций с использованием переведенных данных.
    - `setupHoverEffects(data)`: Функция для настройки эффектов при наведении на строки функций с использованием переведенных подсказок.
    - Анонимная асинхронная функция в `document.addEventListener('DOMContentLoaded', ...)`

- **js/flipbook.js**:
    - `updatePages()`: Функция для обновления отображения страниц флипбука.
    - `initProductDetails()`: Функция для инициализации функционала модального окна деталей продукта.
    - `showProductDetails(pageNum)`: Функция для отображения модального окна с деталями продукта, используя переведенные данные из JSON.
    - `hideProductDetails()`: Функция для скрытия модального окна с деталями продукта.
    - `updateButtonTexts(data)`: Функция для обновления текста кнопок "Купить" и "Подробнее" с использованием переведенных данных из JSON.
    - Анонимная функция в `pages.forEach(...).addEventListener('click', ...)`
    - Анонимная функция в `pages.forEach(...).addEventListener('mouseenter', ...)`
    - Анонимная функция в `setTimeout` внутри `mouseenter` обработчика
    - Анонимная функция в `pages.forEach(...).addEventListener('mouseleave', ...)`
    - Анонимная функция в `window.addEventListener('resize', ...)`
    - Анонимная функция в `document.getElementById('productModal').addEventListener('click', ...)`
    - Анонимная асинхронная функция в `document.addEventListener('DOMContentLoaded', ...)`

- **js/lang-detect-redirect.js**:
    - Анонимная функция в `document.addEventListener('DOMContentLoaded', ...)`

- **js/language-switcher.js**:
    - `supportedLanguages`: Объект, содержащий поддерживаемые языки и их коды.
    - Анонимная функция в `document.addEventListener('DOMContentLoaded', ...)`
    - Анонимная функция в `languageIcon.addEventListener('click', ...)`
    - Анонимная функция в `document.addEventListener('click', ...)`
    - Анонимная функция в `languageDropdown.querySelectorAll('li').forEach(...).addEventListener('click', ...)`

*Примечание: Минифицированные файлы `all.min.js` и `echarts.min.js` также присутствуют в директории `js/`, но их содержимое не анализировалось для составления списка функций.*