Bbox.wtf/landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
93e4c9297d
landing/project_description.md
olilovedani 93e4c9297d update v1.1.2
2025-05-04 11:19:14 +00:00

20 KiB
Raw Blame History

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

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

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

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