Блок кода оформления Remake в Header

Шрифты и стили уведомления

<!-- Подключение шрифта и стилей для уведомления -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800;900&display=swap');

.message-wrapper {
    width: 100%;
    position: fixed;
    left: 50%;
    bottom: 50px;
    background: #333;
    border-radius: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px 40px;
    z-index: 10000;
    max-width: 1000px;
    animation: fadeIn 0.3s linear 1 forwards 5s;
    transform: translate(-50%, 10px);
    opacity: 0;
}

.message-wrapper.fadeOut {
    animation: fadeOut 0.3s linear 1 forwards;
}

.message-text,
.message-btn {
    font-family: 'Golos', 'Manrope', Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #fff;
}

.message-text {
    padding-right: 20px;
}

.message-btn {
    border: none;
    cursor: pointer;
    background: #fff;
    border-radius: 30px;
    padding: 20px 89px;
    transition: 0.3s all;
    color: #333;
}

.message-btn:hover {
    opacity: 0.8;
}

.message-text a {
    border-bottom: 1px solid #fff;
    text-decoration: none;
    color: #fff !important;
}

@media (max-width: 991px) {
    .message-wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        border-radius: 20px;
    }
    .message-text {
        margin-bottom: 30px;
        margin-right: 0;
        padding-right: 0;
    }
}

@keyframes fadeIn {
    from {
        transform: translate(-50%, 10px);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    to {
        transform: translate(-50%, 10px);
        opacity: 0;
    }
}
</style>

Прелоадер для админа

<script>
if (window.userInfo.isAdmin) {
    document.write(`
        <style id="preloader-styles">
            body { opacity: 0; transition: opacity 0.3s; }
            html.loaded body { opacity: 1; }
            #gcAccountUserMenu { opacity: 0; }
            html.page-ready #gcAccountUserMenu { opacity: 1; }

            html:before {
                content: "";
                position: fixed;
                top: 50%;
                left: 50%;
                width: 40px;
                height: 40px;
                font-size: 10px;
                text-indent: -9999em;
                border: 5px solid transparent;
                border-bottom: 5px solid #333;
                border-left: 5px solid #333;
                transform: translate(-50%, -50%);
                border-radius: 100%;
                z-index: 10000;
                animation: remake-preloader 1s infinite linear;
            }

            html.loaded:before {
                opacity: 0;
            }

            @keyframes remake-preloader {
                0% { transform: translate(-50%, -50%) rotate(0deg); }
                100% { transform: translate(-50%, -50%) rotate(360deg); }
            }
        </style>
    `);
}
</script>

Уведомление о редизайне

<script>
(function() {
    $(() => {
        if ($('#gcAccountUserMenu').length && !localStorage.getItem("redesignPopupView")) {
            const $message = $(`
                <div class="message-wrapper">
                    <div class="message-text">
                        În curând, designul școlii va fi actualizat. Dacă ceva nu se afișează corect, reveniți peste 15 minute sau încercați să ștergeți memoria cache. 
                        <a href="https://support.google.com/accounts/answer/32050?hl=ro&co=GENIE.Platform%3DDesktop">Instrucțiuni pentru ștergerea memoriei cache</a>
                    </div>
                    <button class="message-btn">Închide</button>
                </div>
            `);

            $('body').append($message);

            $message.find(".message-btn").on("click", function () {
                localStorage.setItem("redesignPopupView", true);
                $message.addClass("fadeOut");
                setTimeout(() => $message.remove(), 1000);
            });
        }
    });
})();
</script>

Настройки прелоадера

<script>
const PRELOADER_REMAKE_READY_TIMEOUT = 1500;
const PRELOADER_FALLBACK_TIMEOUT = 7000;

const removePreloader = () => {
    $('body').css('opacity', '1');
    $('html').addClass('loaded page-ready');
};

$(document).on('remake-ready', () => {
    setTimeout(removePreloader, PRELOADER_REMAKE_READY_TIMEOUT);
});

setTimeout(removePreloader, PRELOADER_FALLBACK_TIMEOUT);
</script>

Подключение Remake и принудительная отрисовка

<!-- Подключение скрипта Remake -->
<script type="text/javascript" src="/pl/cms/layout/js?hash&bundle=0&id=52740"></script>

<!-- Резервное включение видимости после загрузки -->
<style>
    body {
        opacity: 0;
        transition: opacity 1ms linear;
    }
    #gcAccountUserMenu {
        opacity: 0;
    }
</style>

<script>
$(() => {
    setTimeout(() => {
        console.log("body loaded");
        $("body").css("opacity", "1");
        $("#gcAccountUserMenu").css("opacity", "1");
    }, 500);
});
</script>