пока происходит анимация ,должно уже зарендариться и быть под анимацией
// main.js
document.addEventListener('DOMContentLoaded', () => {
    const loader = document.getElementById('loader');
    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) {
        loaderTextTop.textContent = textTop || '';
        loaderTextBottom.textContent = textBottom || '';
        loader.style.display = 'flex';
    }

    // Функция для скрытия загрузочного экрана
    function hideLoader() {
        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);
            }
        }
    });
});