оптемезируй и улучши
// main.js
document.addEventListener('DOMContentLoaded', () => {
  const loader = document.getElementById('loader');
  const loaderContent = document.querySelector('.loader-content');
  const loaderTextTop = document.getElementById('loader-text-top');
  const loaderTextBottom = document.getElementById('loader-text-bottom');
  const content = document.getElementById('content');

  let currentPageStyles = null; // Ссылка на текущий CSS файл

  // Функция для отображения загрузочного экрана с текстами
  function showLoader(textTop, textBottom) {
    // loaderContent.classList.add('loader-content_active');
    loaderTextTop.textContent = textTop || '';
    loaderTextBottom.textContent = textBottom || '';
    loader.style.display = 'flex';
  }

  // Функция для скрытия загрузочного экрана
  function hideLoader() {
    // loaderContent.classList.remove('loader-content_active');
    loader.style.display = 'none';
  }

  // Функция для динамической загрузки скрипта с возвратом Promise
  function loadScript(page) {
    return new Promise((resolve, reject) => {
      // Находим все скрипты с id 'page-script' и удаляем их
      const existingScripts = document.querySelectorAll('#page-script');
      existingScripts.forEach((script) => script.remove());

      // Создаем новый скрипт
      const script = document.createElement('script');
      script.src = `${page}.js`;
      script.id = 'page-script';

      // Обработчик загрузки скрипта
      script.onload = () => {
        resolve();
      };

      // Обработчик ошибок загрузки
      script.onerror = () => {
        reject(new Error(`Ошибка загрузки скрипта: ${page}.js`));
      };

      // Добавляем скрипт в документ
      document.body.appendChild(script);
    });
  }

  // Функция для динамической загрузки CSS файла
  function loadStylesheet(page) {
    return new Promise((resolve, reject) => {
      // Удаляем предыдущий CSS файл, если он существует
      if (currentPageStyles) {
        currentPageStyles.remove();
        currentPageStyles = null;
      }

      // Создаем новый link элемент для CSS
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = `${page}.css`;
      link.id = `${page}-css`;

      // Обработчик загрузки CSS
      link.onload = () => {
        resolve();
      };

      // Обработчик ошибок загрузки CSS
      link.onerror = () => {
        reject(new Error(`Ошибка загрузки CSS файла: ${page}.css`));
      };

      // Добавляем CSS в head
      document.head.appendChild(link);
      currentPageStyles = link;
    });
  }

  // Функция-обработчик клика
  async function handleElementClick(element) {
    const page = element.getAttribute('data-page');
    const loaderTop = element.getAttribute('data-loader-top');
    const loaderBottom = element.getAttribute('data-loader-bottom');

    if (!page) {
      console.warn('Элемент не имеет атрибута data-page');
      return;
    }

    try {
      // Отображаем загрузочный экран с переданными текстами
      showLoader(loaderTop, loaderBottom);
      // Загрузить CSS для страницы
      await loadStylesheet(page);
      // Загрузить JS для страницы
      await loadScript(page);

      // Предполагаем, что загруженный скрипт включает функцию для рендеринга
      if (typeof renderPage === 'function') {
        console.log('рендер');
        await renderPage(); // Ждём выполнения рендеринга
      } else {
        console.warn(`Функция renderPage не определена в ${page}.js`);
      }

      hideLoader();
    } catch (error) {
      hideLoader();
      content.innerHTML = `<p>${error.message}</p>`;
      console.error(error);
    }
  }

  // Обработчик событий клика с использованием делегирования
  document.addEventListener('click', (event) => {
    // Проверяем, содержит ли кликнутый элемент или его родитель нужный атрибут
    const target = event.target.closest('[data-page]');
    if (target) {
      event.preventDefault();
      handleElementClick(target);
    }
  });

  // Обработчик событий клавиатуры для доступности (Enter)
  document.addEventListener('keypress', (event) => {
    if (event.key === 'Enter') {
      const target = event.target.closest('[data-page]');
      if (target) {
        event.preventDefault();
        handleElementClick(target);
      }
    }
  });

  // Функция для автоматической загрузки страницы main_menu один раз
  function loadInitialPage() {
    // Создаём виртуальный элемент с необходимыми атрибутами
    const initialElement = document.createElement('button');
    initialElement.setAttribute('data-page', './bin/js_page/menu/main_menu');
    initialElement.setAttribute('data-loader-top', '');
    initialElement.setAttribute('data-loader-bottom', '');
    // Вызываем обработчик клика для этого элемента
    handleElementClick(initialElement);
  }

  window.onload = function () {
    // Более эффективный способ создания и применения стилей
    const styles = `#fullScreenVideo 
               {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    z-index: 9999;
                    transition: opacity 0.8s ease; /* Переход для плавности */
                }
            `;

    // Создаем стили и вставляем их в документ
    const styleSheet = document.createElement('style');
    styleSheet.type = 'text/css';
    styleSheet.innerText = styles;
    document.head.appendChild(styleSheet);

    // Создаем видео элемент
    const video = document.createElement('video');
    video.id = 'fullScreenVideo';
    video.src = './bin/js_page/menu/logo.mov'; // Укажите путь к вашему видео
    video.autoplay = true;
    video.muted = true;

    // Добавляем элемент видео в body
    document.body.appendChild(video);

    // Добавляем обработчик события для плавного исчезновения и удаления видео после его окончания
    video.onended = function () {
      video.style.opacity = 0; // Изменяем прозрачность на 0
      video.addEventListener('transitionend', () => {
        video.parentNode.removeChild(video);
      });
    };
  };
  // Вызываем функцию загрузки начальной страницы

  loadInitialPage();
});