230 lines
20 KiB
Markdown
230 lines
20 KiB
Markdown
# Описание проекта и его структура
|
||
|
||
Данный проект представляет собой веб-траницы, демонстрирующую возможности продукта BlackBox и его сравнение с другими продуктами. Сайт и основной домен проект https://bbox.wtf
|
||
|
||
## Структура проекта
|
||
|
||
```
|
||
/Workspace
|
||
├── .htaccess
|
||
├── docker-compose.yml
|
||
├── favicon.ico
|
||
├── index.html
|
||
├── nginx.conf
|
||
├── project_description.md
|
||
├── README.md
|
||
├── css/
|
||
│ ├── all.min.css
|
||
│ ├── products.css
|
||
│ ├── style.css
|
||
│ └── tailwind.min.css
|
||
├── images/
|
||
│ ├── banner-image.webp
|
||
│ ├── bb_on_white-square.webp
|
||
│ ├── logo.webp
|
||
│ ├── scales.webp
|
||
│ └── wallet_ltc.webp
|
||
├── items/
|
||
│ ├── boxes/
|
||
│ │ ├── blackbox-privacy.html
|
||
│ │ ├── blackbox-vpn.html
|
||
│ │ ├── blackbox-4gb.html
|
||
│ │ ├── blackbox-ai.html
|
||
│ │ ├── blackbox-shop.html
|
||
│ │ ├── blackbox-workstation.html
|
||
│ │ └── template.html
|
||
│ └── services/
|
||
│ ├── data-protection.html
|
||
│ ├── anonymous-email.html
|
||
│ ├── cloud-storage.html
|
||
│ ├── crypto-wallet.html
|
||
│ ├── decentralized-hosting.html
|
||
│ ├── private-chat.html
|
||
│ └── template.html
|
||
├── js/
|
||
│ ├── all.min.js
|
||
│ ├── echarts.min.js
|
||
│ ├── fade-up.js
|
||
│ ├── features.js
|
||
│ ├── flipbook.js
|
||
│ ├── lang-detect-redirect.js
|
||
│ ├── language-switcher.js
|
||
│ └── products.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
|
||
└── products.html
|
||
```
|
||
|
||
- `/Workspace`: Корневая директория проекта.
|
||
- `.htaccess`: Файл конфигурации веб-сервера Apache для управления перенаправлениями URL для мультиязычности.
|
||
- `docker-compose.yml`: Файл конфигурации для Docker Compose, используемый для определения и запуска многоконтейнерных Docker-приложений.
|
||
- `favicon.ico`: Файл иконки сайта, отображаемой во вкладке браузера.
|
||
- `index.html`: Главный HTML-файл, содержащий структуру веб-страницы.
|
||
- `nginx.conf`: Файл конфигурации веб-сервера Nginx.
|
||
- `project_description.md`: Этот файл, содержащий описание проекта и его структуры.
|
||
- `README.md`: Файл с общим описанием проекта и инструкциями.
|
||
- `css/`: Директория для файлов стилей.
|
||
- `css/all.min.css`: Минимизированный файл CSS, возможно, содержащий объединенные стили.
|
||
- `css/products.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`: Изображение весов или сравнения.
|
||
- `images/wallet_ltc.webp`: Изображение кошелька Litecoin.
|
||
- `items/`: Директория, содержащая HTML-файлы с описанием отдельных продуктов и услуг.
|
||
- `items/boxes/`: Поддиректория для описания продуктов типа "коробки".
|
||
- `items/boxes/blackbox-privacy.html`: HTML-файл с описанием продукта BlackBox Privacy.
|
||
- `items/boxes/blackbox-vpn.html`: HTML-файл с описанием продукта BlackBox VPN.
|
||
- `items/boxes/blackbox-4gb.html`: HTML-файл с описанием продукта BlackBox 4GB.
|
||
- `items/boxes/blackbox-ai.html`: HTML-файл с описанием продукта BlackBox AI.
|
||
- `items/boxes/blackbox-shop.html`: HTML-файл с описанием продукта BlackBox Shop.
|
||
- `items/boxes/blackbox-workstation.html`: HTML-файл с описанием продукта BlackBox Workstation.
|
||
- `items/boxes/template.html`: Шаблон HTML-файла для описания продуктов типа "коробки".
|
||
- `items/services/`: Поддиректория для описания услуг.
|
||
- `items/services/data-protection.html`: HTML-файл с описанием услуги Data Protection.
|
||
- `items/services/anonymous-email.html`: HTML-файл с описанием услуги Anonymous Email.
|
||
- `items/services/cloud-storage.html`: HTML-файл с описанием услуги Cloud Storage.
|
||
- `items/services/crypto-wallet.html`: HTML-файл с описанием услуги Crypto Wallet.
|
||
- `items/services/decentralized-hosting.html`: HTML-файл с описанием услуги Decentralized Hosting.
|
||
- `items/services/private-chat.html`: HTML-файл с описанием услуги Private Chat.
|
||
- `items/services/template.html`: Шаблон HTML-файла для описания услуг.
|
||
- `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`: Добавляет на страницу плавающую кнопку-переключатель языка с выпадающим списком.
|
||
- `js/products.js`: Скрипт для страницы продуктов, возможно, управляющий отображением информации о продуктах из директории `items/`.
|
||
- `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.
|
||
- `pages/products.html`: HTML-файл с контентом страницы продуктов.
|
||
|
||
## Взаимодействие файлов
|
||
|
||
- `index.html` является центральным файлом, который связывает все остальные ресурсы.
|
||
- В HTML файлах подключены файлы стилей из директории `css/` (`style.css`, `all.min.css`, `tailwind.min.css`, `products.css`) для визуального оформления элементов страницы.
|
||
- В HTML файлах подключены скрипты из директории `js/` (`fade-up.js`, `features.js`, `flipbook.js`, `lang-detect-redirect.js`, `language-switcher.js`, `all.min.js`, `echarts.min.js`, `products.js`) для добавления интерактивности и динамического контента, а также для мультиязычности.
|
||
- Скрипты взаимодействуют с элементами в HTML через их ID или классы для изменения их поведения или внешнего вида.
|
||
- Изображения из директории `images/` (`banner-image.webp`, `bb_on_white-square.webp`, `logo.webp`, `scales.webp`, `wallet_ltc.webp`) используются в HTML (например, в теге `<img>` или как фон в CSS).
|
||
- JavaScript файлы `features.js` и `flipbook.js` загружают переводимый контент из JSON файлов, расположенных в директориях `lang/<lang>/json/`, в зависимости от текущего языка страницы.
|
||
- HTML-файлы в директории `items/` содержат контент для отдельных продуктов и услуг, который может быть динамически загружен и отображен на странице `pages/products.html` с помощью скрипта `js/products.js`.
|
||
|
||
## Стили (css/)
|
||
|
||
Директория `css/` содержит файлы стилей, определяющие внешний вид веб-страницы.
|
||
|
||
- **style.css**: Основной файл CSS, содержащий стили для:
|
||
- Общих элементов страницы (тело, заголовки, параграфы).
|
||
- Макетных элементов (использование Flexbox или Grid для расположения элементов).
|
||
- Оформления текста, цветов, фонов.
|
||
- Стилизации интерактивных элементов (кнопки, ссылки).
|
||
- Адаптивного дизайна (медиазапросы для различных размеров экрана).
|
||
- Стили, связанные с анимацией появления (`.fade-up`, `.animate-fadeUp`).
|
||
- Стили для флипбука и модального окна.
|
||
- Стили для переключателя языка.
|
||
- **products.css**: Файл CSS, содержащий стили, специфичные для страницы продуктов (`pages/products.html`).
|
||
- **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**: Добавляет на страницу плавающую кнопку-переключатель языка с выпадающим списком.
|
||
- **products.js**: Скрипт, предназначенный для страницы продуктов (`pages/products.html`), вероятно, отвечающий за загрузку и отображение контента из файлов в директории `items/`.
|
||
|
||
## Список используемых функций
|
||
|
||
Ниже приведен список функций и важных переменных, обнаруженных в неминифицированных 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', ...)`
|
||
|
||
- **js/products.js**:
|
||
- Анонимная функция в `document.addEventListener('DOMContentLoaded', ...)`
|
||
- `loadProductContent(productPath)`: Асинхронная функция для загрузки HTML-контента продукта.
|
||
- `renderProductPage(productContent)`: Функция для отображения загруженного контента продукта на странице.
|
||
|
||
*Примечание: Минифицированные файлы `all.min.js` и `echarts.min.js` также присутствуют в директории `js/`, но их содержимое не анализировалось для составления списка функций.* |