Оформление Remake
Тема Remake
//Версия от 09.02.25 17:00
var layoutID = '00054';
//// Настройка видимости оформления Remake (customStyleVisibilityRule):
//// true - все
//// false - никто
//// window.userInfo.isAdmin - админы (не работает в чатиуме)
//// window.accountUserId == 216415659 - только пользователь с таким ID
//// window.userInfo.isAdmin && window.accountUserId != 348017492; — админы за исключением конкретного пользователя
//// window.userInfo.isAdmin || [216415659, 123456789, 987654321].indexOf(window.accountUserId) > -1; — админы и конкретные пользователи
/*
var customStyleVisibilityRule =
window.userInfo.isAdmin
|| [216415659, 123456789, 987654321].indexOf(window.accountUserId) > -1;
// админы и конкретные пользователи */
var customStyleVisibilityRule = true;
let remakeTopMenu = {
init: true,
links: [
{
name: "Scrieți suportului tehnic",
link: "javascript: m_custom_btn_click()",
icon: "https://remake-proxy.ru/themes/images/icons/chat-icon.svg",
},
]
}
// Компактное меню на всех страницах (раскомментируйте код ниже, чтобы включить)
// $(()=>{$('body').addClass('compact-menu compact-menu-by-default')});
function extraScriptsX() {
/****************************/
/* Extra Scripts */
/****************************/
/* ВСТАВЛЯЙТЕ ДОПОЛНИТЕЛЬНЫЙ КОД ЗДЕСЬ */
if(window.PageChecker.isPaymentsPage) {
$('.xdget-partialpay span[style="color: #186905"]').text('Disponibilă achitarea parțială a comenzii')
}
if(window.PageChecker.isWebinarPage) {
let webinalInter = setInterval(function(){
if ($('.broadcast-started').length) {
clearInterval(webinalInter)
$('.broadcast-started').text('Webinarul a început, fă click pe ecran')
}
},100)
}
/****************************/
/* END Extra Scripts */
/****************************/
////////////////////////////////////////////
// Дальше ничего трогать не нужно! //
////////////////////////////////////////////
// START Remake Support Block
if(window.userInfo.isAdmin && !$('meta[property="og:title"]').length) {
$(document).on('remake-left-menu-ready',function(){
let $styles = $(`
<style>
body #gcAccountUserMenu .custom-btns-wrapper {
margin-top: 0;
}
body #gcAccountUserMenu .remake-support-wrapper {
margin-top: 0;
}
body #gcAccountUserMenu .custom-btns-wrapper .menutoggle-btn {
margin-bottom: 0;
}
body #gcAccountUserMenu .custom-btns-wrapper .custom-btn.remake-support {
color: var(--color-3);
background: none!important;
padding-top: 5px;
padding-bottom: 5px;
}
body #gcAccountUserMenu .custom-btns-wrapper .custom-btn.remake-support:before {
transition: background 0.2s;
background: var(--color-3);
mask-image: url(https://remake-proxy.ru/themes/images/icons/headphones-support.svg);
-webkit-mask-image: url(https://remake-proxy.ru/themes/images/icons/headphones-support.svg);
}
body #gcAccountUserMenu .custom-btns-wrapper .custom-btn.remake-support:hover:before {
background: var(--color-3-1);
}
#gcAccountUserMenu .custom-btns-wrapper .custom-btn.remake-support span:before {
content:"Тех.поддержка Remake";
}
#chatra:not(.chatra--expanded) { visibility: hidden !important; opacity: 0 !important; pointer-events: none; transition: none; }
</style>
`);
let $remake_support_wrapper = $(`
<div class="custom-btns-wrapper remake-support-wrapper">
<a class="custom-btn remake-support" href="https://t.me/RemakeGetCourse_bot" target="_blank"><span></span></a>
</div>
`);
$('.custom-btns-wrapper').after($styles, $remake_support_wrapper);
$remake_support_wrapper.prepend($('#gcAccountUserMenu .custom-btns-wrapper .menutoggle-btn'));
});
}
// END Remake Support Block
}; // END extraScriptsX, эти скобки не трогать
$(()=>{
if(window.userInfo.isAdmin) {
$('body').css('opacity','1'); $('html').addClass('loaded');
}
});
$(document).on('remake-ready',()=>{
extraScriptsX();
})
let customStyleSheetLayoutID;
if ((customStyleSheetLayoutID = /\/layout\/js\?id=(\d+)/.exec(document.currentScript.src)) !== null ||
(customStyleSheetLayoutID = /\/layout\/js?.*&id=(\d+)/.exec(document.currentScript.src)) !== null ||
(customStyleSheetLayoutID = /\/pl\/layout\/(\d+)/.exec(document.currentScript.src)) !== null) customStyleSheetLayoutID = customStyleSheetLayoutID[1];
var customStyleSheetX = "/pl/cms/layout/css?hash&bundle=1&id="+customStyleSheetLayoutID;
var remakeProxyX = "https://remake-proxy.ru";
(function(){
let remakeToggler = (() => {
let matches = document.cookie.match(
new RegExp(
"(?:^|; )" +
"remake-toggler".replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') +
"=([^;]*)"
)
);
return matches ? parseInt(decodeURIComponent(matches[1])) : 1;
})();
if (window.userInfo.isAdmin && !$('#remake-toggler').length) {
if ($('#gcAccountUserMenu').length) remakeTogglerInit();
else
$(document).ajaxSend(function (event, xhr, settings) {
if (settings.url == "/cms/counters/menu") remakeTogglerInit();
});
function remakeTogglerInit() {
setTimeout(() => {
let $remakeToggler = $(`
<label for="remake-toggler">
<span>Switch Remake</span>
<style>
#gcAccountUserMenu .custom-btns-wrapper label[for="remake-toggler"] {
display: flex;
justify-content: center;
align-items: center;
background: var(--m-custom-btn-color);
padding: 14px;
text-align: center;
border-radius: 6px;
font-family: var(--font-family-2a);
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 120%;
color: var(--m-item-active);
margin-bottom: 10px;
text-decoration: none;
outline: none;
transition: background-color .2s, border-radius .3s;
color: var(--color-3,#222);
background: none !important;
padding-top: 5px;
padding-bottom: 5px;
cursor:pointer;
}
#gcAccountUserMenu label[for="remake-toggler"]:before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
margin-right: 5px;
background: var(--m-item-active);
mask-image: var(--paperplane-icon);
-webkit-mask-image: var(--paperplane-icon);
mask-size: contain;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;
mask-origin: content-box;
-webkit-mask-origin: content-box;
transition: background 0.2s;
background: var(--color-3);
mask-image: url(https://remake-proxy.ru/themes/images/icons/switch-remake-icon.svg);
-webkit-mask-image: url(https://remake-proxy.ru/themes/images/icons/switch-remake-icon.svg);
}
label[for="remake-toggler"] input {
display: none;
}
#gcAccountUserMenu label[for="remake-toggler"] span {
display: inline-block;
overflow: hidden;
max-width: 300px;
white-space: nowrap;
transition: max-width 0.3s;
}
@media(min-width:769px) {
body.compact-menu #gcAccountUserMenu label[for="remake-toggler"] span {
max-width:0
}
}
#gcAccountUserMenu:not(.menu-ready) label[for="remake-toggler"] {
height: fit-content;
margin-top: auto;
border-radius: 6px;
background: #3d556d;
padding: 10px 7px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
cursor:pointer;
}
#gcAccountUserMenu:not(.menu-ready) label[for="remake-toggler"]:before {
display:none
}
#gcAccountUserMenu:not(.menu-ready) .gc-account-leftbar {
display: flex;
flex-direction: column;
}
#gcAccountUserMenu:not(.menu-ready) label[for="remake-toggler"] span {
color:#fff;
white-space: pre-wrap;
}
</style>
</label>
`);
let $remakeTogglerRadio = $('<input id="remake-toggler" type="radio">');
$remakeTogglerRadio
.attr('checked', !!remakeToggler)
.on('change', (e) => {
e.preventDefault();
});
$remakeToggler
.prepend($remakeTogglerRadio)
.on('click', function (e) {
if (
window.confirm(
"Для переключения оформления Remake страница будет перезагружена. Продолжить?"
)
) {
let $r = $(this).find('input');
$r.prop('checked', !$r.is(':checked'));
window.gcSetCookie("remake-toggler", $r.is(':checked') ? 1 : 0, {
path: '/'
});
window.location.reload();
}
return false;
});
if (remakeToggler) {
$('#gcAccountUserMenu').on('menu-ready', () => {
$('#gcAccountUserMenu .custom-btns-wrapper').last().append($remakeToggler);
});
} else {
$('#gcAccountUserMenu .gc-account-leftbar').append($remakeToggler);
}
});
}
}
if (
!customStyleVisibilityRule ||
window.location.search.indexOf("originalview") > -1 ||
!remakeToggler
) {
$('#preloader-styles').remove();
return false;
}
if(typeof styleX_init != "undefined") return false;
var styleX_init = 1;
CSSinjection(customStyleSheetX);
setTimeout(()=>{
if($('#gcAccountUserMenu').length) launchLeftMenuScripts();
else $(document).ajaxSend(function(event, xhr, settings) {
if ( settings.url == "/cms/counters/menu" ) launchLeftMenuScripts();
});
function launchLeftMenuScripts() {
//js-cookie
!function(e){var n;if("function"==typeof define&&define.amd&&(define(e),n=!0),"object"==typeof exports&&(module.exports=e(),n=!0),!n){var t=window.Cookies,o=window.Cookies=e();o.noConflict=function(){return window.Cookies=t,o}}}(function(){function f(){for(var e=0,n={};e<arguments.length;e++){var t=arguments[e];for(var o in t)n[o]=t[o]}return n}function a(e){return e.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)}return function e(u){function c(){}function t(e,n,t){if("undefined"!=typeof document){"number"==typeof(t=f({path:"/"},c.defaults,t)).expires&&(t.expires=new Date(1*new Date+864e5*t.expires)),t.expires=t.expires?t.expires.toUTCString():"";try{var o=JSON.stringify(n);/^[\{\[]/.test(o)&&(n=o)}catch(e){}n=u.write?u.write(n,e):encodeURIComponent(String(n)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),e=encodeURIComponent(String(e)).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var r="";for(var i in t)t[i]&&(r+="; "+i,!0!==t[i]&&(r+="="+t[i].split(";")[0]));return document.cookie=e+"="+n+r}}function n(e,n){if("undefined"!=typeof document){for(var t={},o=document.cookie?document.cookie.split("; "):[],r=0;r<o.length;r++){var i=o[r].split("="),c=i.slice(1).join("=");n||'"'!==c.charAt(0)||(c=c.slice(1,-1));try{var f=a(i[0]);if(c=(u.read||u)(c,f)||a(c),n)try{c=JSON.parse(c)}catch(e){}if(t[f]=c,e===f)break}catch(e){}}return e?t[e]:t}}return c.set=t,c.get=function(e){return n(e,!1)},c.getJSON=function(e){return n(e,!0)},c.remove=function(e,n){t(e,"",f(n,{expires:-1}))},c.defaults={},c.withConverter=e,c}(function(){})});
if (Cookies.get('compact-menu') === "true") $('body').addClass('compact-menu');
let $menuStyleLink = $("<link>", {rel: "stylesheet", type: "text/css", href: remakeProxyX+"/pl/layout/"+layoutID+"/15/left-menu-styles.css", crossOrigin: "anonymous"});
$menuStyleLink.on('load', ()=>{
let wait_styles = setInterval(()=>{
if($('html').css('order') == 1) {
clearInterval(wait_styles);
JSinjection(remakeProxyX+"/pl/layout/"+layoutID+"/14/left-menu-scripts.js", ()=>{
$(()=>{setTimeout(()=>{
$('html').addClass('page-ready');
$('#gcAccountUserMenu .gc-account-leftbar').stickySidebar({minWidth: 768});
$('#gcAccountUserMenu').trigger('menu-ready');
})});
});
}
});
});
$('link[href*="/nassets/"]:last').after($menuStyleLink);
}
$(()=>{
if(
!$('.gc-account-leftbar .m-account-logo').length &&
(
$('body.chatium_body').length ||
window.navigator.userAgent.includes('ChatiumWebView') ||
$('script[src*="getcourse_webview"]').length ||
(window.location.pathname.indexOf('/pl/teach/control/lesson/webview') > -1)
)
) {
CSSinjection(remakeProxyX+"/pl/layout/"+layoutID+"/14/left-menu-styles.css", ()=>{
JSinjection(remakeProxyX+"/pl/layout/"+layoutID+"/14/left-menu-scripts.js", ()=>{
$(()=>{setTimeout(()=>{
$('html').addClass('page-ready');
})});
});
});
$('body').prepend(`
<div id="gcAccountUserMenu" class="menu-ready">
<div class="gc-account-leftbar">
<a href="javascript:void(0)" class="toggle-link without-icon"></a>
</div>
</div>
`);
$(window).on('load', makeRemakeMenu);
}
});
$(document).ajaxSuccess(function(event, xhr, settings) {
if (settings.url == "/cms/counters/menu") {
makeRemakeMenu(xhr.responseJSON || (typeof xhr.responseText === 'string' ? xhr.responseText : null))
}
});
});
function makeRemakeMenu(data = false) {
let checkMenuReady = setInterval(()=>{
if($('#gcAccountUserMenu').hasClass('menu-ready')) {
clearInterval(checkMenuReady);
let accountLogo = getComputedStyle($('html body').get(0)).getPropertyValue('--m-account-logo-mob')
|| getComputedStyle($('html').get(0)).getPropertyValue('--m-account-logo-mob');
accountLogo = accountLogo.replace(/\s*url\(([^)]*)\)/, "$1").replace(/["']/g, '');
$('#gcAccountUserMenu .gc-account-leftbar .toggle-link').off().html(`
<a class="m-account-logo" href="javascript:void(0)" onclick="location.href=getComputedStyle($('#gcAccountUserMenu')[0]).getPropertyValue('--m-account-logo-url').replace(/['"]/g,'')">
<img height="100%" src="${accountLogo}" alt="">
</a>
<a class="m-search" href="javascript:void(0)" onclick="showMobSearch(event)"></a>
<a class="m-notify" href="javascript:void(0)" onclick="showNotifications(event)">
<span class="m-notify-icon"></span>
<span class="notify-count"></span>
</a>
${!(
$('body.chatium_body').length ||
window.navigator.userAgent.includes('ChatiumWebView') ||
$('script[src*="getcourse_webview"]').length ||
(window.location.pathname.indexOf('/pl/teach/control/lesson/webview') > -1)
) ? '<a class="m-burger-btn" href="javascript:void(0)" onclick="showMobMenu(event)"></a>':''}
`);
let counters = {
"chatium-chatium_app": ".submenu-item-chatium_app",
"chatium_updates": ".submenu-item-chatium_updates",
"sales-my_deals": ".submenu-item-my_deals",
"teach-answers": ".submenu-item-answers",
"notifications-inbox": ".submenu-item-inbox",
}
if(data){
let json_counters;
if (typeof data === 'string') {
json_counters = JSON.parse(data).counters || [];
} else if (typeof data === 'object') {
json_counters = data.counters || [];
}
$.each(json_counters, (name,val)=>{
if(typeof counters[name] !== "undefined" && val!=0) {
$(counters[name]).find('.submenu-notify-count').html(val);
}
});
if(typeof json_counters.notifications_button_small !== "undefined" && json_counters.notifications_button_small!=0) {
$('#gcAccountUserMenu .gc-account-leftbar .toggle-link > .m-notify > .notify-count').html(json_counters.notifications_button_small);
}
}
}
},10);
}
JSinjection(remakeProxyX+"/pl/layout/"+layoutID+"/0/distributor.js", function(){
setTimeout(()=>{
if($.active) {
let q = 0;
$(document).ajaxStop(function() {
if(!q++) {
setTimeout(()=>{
$(document).trigger('remake-ready');
});
}
});
} else {
setTimeout(()=>{
$(document).trigger('remake-ready');
});
}
});
});
})();
function JSinjection(fileName, callback) {
var script = document.createElement( "script" )
script.type = "text/javascript";
if(typeof callback != "undefined") {
if(script.readyState) { // only required for IE <9
script.onreadystatechange = function() {
if ( script.readyState === "loaded" || script.readyState === "complete" ) {
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function() {
callback();
};
}
}
script.src = fileName;
script.crossOrigin = "anonymous";
document.getElementsByTagName( "head" )[0].appendChild( script );
}
function CSSinjection(fileName, callback) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.crossOrigin = "anonymous";
if(typeof callback != "undefined") {
link.onload = callback();
}
link.href = fileName;
document.head.appendChild(link);
}
Блок кода оформления 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>