landing/project_description.md

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

Данный проект представляет собой веб-страницу, демонстрирующую возможности продукта 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/, но их содержимое не анализировалось для составления списка функций.