Верстка вебинарной комнаты на Bizon365 без знания кода.

Уверен, что хоть раз вы встречали красиво оформленный Bizon, но даже не пытались разобраться как это так они сделали.

— Какая-то специальная подписка? — Нет! — Надо искать специалиста который может так сделать? — Нет!

С появлением ChatGPT грех переплачивать за такое 😂

Рассказываю по шагам, а вы применяете в своих школах и берете за это деньгУ...

И получаете вот такую картинку 👇🏻

Ваша задача — немного поиграться и адаптировать этот код под себя.

Вот сам код 👇🏻 Копируем его и идем в Bizon365

<style>

body {
    /* Устанавливаем фоновое изображение для всей страницы */
    background-image: url('https://files.salebot.pro/uploads/message_files/cb2738fe-0e6e-4bbf-b1a8-960f9e6a3f61.png');
    /* Задаем размер фона, чтобы он покрывал весь экран */
    background-size: cover;
    /* Отключаем повторение фона */
    background-repeat: no-repeat;
    /* Центрируем фоновое изображение */
    background-position: center;
    /* Задаем черный цвет фона для случая, когда изображение не загрузится */
    background-color: #000;
}

#webinarContent #presentation {
    /* Закругляем углы обложки видео */
    border-radius: 10px;
}

/* Шрифт и стиль заголовка */
h1, h2, h3 {
    font-family: 'Benzin Bold', sans-serif; /* Измените шрифт */
    color: #000000; /* Измените цвет текста */
    font-weight: bold; /* Жирность текста */
}

/* Фон за обложкой видео */
#contentHolder {
    /* Устанавливаем темно-серый цвет фона */
    background-color: #6f979e;
    /* Добавляем тень */
    box-shadow: 0px 0px 64px rgba(0, 0, 0, 0.25);
    /* Закругляем углы */
    border-radius: 10px;
}

/* Стили для обратного отсчета */
.eventCountdown {
    /* Центрируем текст */
    text-align: center;
    /* Устанавливаем размер шрифта */
    font-size: 18px;
    /* Добавляем отступы снизу */
    padding-bottom: 10px;
    /* Добавляем отступы сверху */
    margin-top: 10px;
    /* Устанавливаем белый цвет текста */
    color: #fff;
}

.eventCountdown span {
    /* Устанавливаем белый цвет текста для вложенных элементов */
    color: #fff;
}

/* Кастомизация области чата вебинарной комнаты */
/* Задаем фон области чата */
#room_panel {
    /* Устанавливаем цвет фона */
    background-color: #6f979e;
}

/* Кастомизация поля ввода сообщения */
#inputmsg {
    /* Устанавливаем рамку с цветом */
    border: 1px solid #94c9d1;
    /* Устанавливаем белый цвет фона */
    background-color: #FFFFFF;
    /* Задаем стиль рамки */
    border-style: solid;
    /* Добавляем внутренние отступы */
    padding: 10px;
    /* Устанавливаем высоту поля ввода */
    height: 50px;
}

/* Кастомизация кнопок */
button, .btn {
    background-color: #6f979e; /* Цвет фона кнопок */
    color: #ffffff; /* Цвет текста кнопок */
    border: none; /* Убрать рамку */
    border-radius: 7px; /* Скругленные углы */
    padding: 10px 20px; /* Отступы внутри кнопки */
    font-size: 14px; /* Размер шрифта кнопок */
    cursor: pointer; /* Курсор при наведении */
}

/* Стили для кнопок скачивания при наведении */
#files .btndownload:hover {
    /* Устанавливаем цвет фона кнопки при наведении */
    background-color: #94c9d1;
}

/* Кастомизация обратного отсчета в баннере */
.banner .countdown,
.banner .countdown span {
    /* Задаем градиентный фон для текста */
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 146.71%), #FFFFFF;
    /* Настройки для поддержки текста с градиентом в разных браузерах */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* Кастомизация кнопки "Отправить" */
.input-group-addon.btn-addon {
    /* Добавляем внутренние отступы */
    padding: 10px;
    /* Устанавливаем высоту кнопки */
    height: 50px;
    /* Устанавливаем рамку с цветом */
    border: 1px solid #94c9d1;
    /* Устанавливаем цвет фона */
    background: #94c9d1;
    /* Устанавливаем цвет текста */
    color: #fff;
}

#room .form1 button[type=submit] {
    /* Устанавливаем размер шрифта */
    font-size: 14px;
    /* Устанавливаем цвет фона */
    background: #94c9d1;
    /* Устанавливаем цвет текста */
    color: #ffffff;
}

/* Кастомизация кнопки "Помощь" */
#btnExpressHelp {
    /* Устанавливаем размер шрифта */
    font-size: 14px;
    /* Устанавливаем цвет фона */
    background-color: #000;
    /* Устанавливаем цвет текста */
    color: #ffffff;
    /* Добавляем отступы сверху */
    margin-top: 1px;
    /* Добавляем отступы слева */
    margin-left: 19px;
    /* Убираем рамку */
    border: none;
}

.toolbtns.pull-right {
    /* Задаем стиль рамки */
    border-style: solid;
    /* Устанавливаем высоту кнопки */
    height: 30px;
    /* Убираем рамку */
    border: none;
    /* Закругляем углы */
    border-radius: 15px;
    /* Устанавливаем цвет текста */
    color: #ffffff;
    /* Задаем позиционирование */
    position: relative;
}

/* Кастомизация сообщений в чате */
/* Кастомизация сообщений от пользователя */
.chatul li.msg.myMsg span.msgbody {
    /* Устанавливаем цвет фона */
    background-color: #94c9d1;
    /* Убираем рамку */
    border: none;
}

/* Кастомизация сообщений от модератора */
.chatul li.msg.superadmin span.msgbody,
.chatul li.msg.admin span.msgbody {
    /* Устанавливаем цвет фона */
    background-color: #ffc73a;
    /* Убираем рамку */
    border: none;
}

/* Кастомизация сообщений от других участников вебинара */
li.msg span.msgbody {
    /* Устанавливаем цвет фона */
    background-color: #94c9d1;
    /* Устанавливаем черную рамку */
    border: 1px solid #000000;
}

/* Кастомизация плашек пользователей */
#userlistframe span {
    /* Закругляем углы */
    border-radius: 2px;
}

/* Плашка администратора */
#userlistframe .label-danger {
    /* Устанавливаем цвет фона */
    background-color: #e41e3d;
    /* Устанавливаем цвет текста */
    color: #fff;
}

/* Плашка пользователя */
#userlistframe .label-success {
    /* Устанавливаем цвет фона */
    background-color: #FF7A00;
    /* Устанавливаем цвет текста */
    color: #fff;
}

/* Кастомизация поля ввода сообщения */
#inputmsg {
    /* Устанавливаем рамку с цветом */
    border: 1px solid #94c9d1;
}
</style>

Переходим в раздел -> Больше настроек -> Разное

Дальше заходим в раздел HTML

И в поле Постоянный HTML/JS-код вставляем наш шаблон кода.

Можно поставить и на время трансляции, но тогда до того пока не начнется веб, будет стоять стандартное оформление. Нам это не надо

Всё готово, сохраняем и пользуемся...