Продолжаем совершенствовать форму публикации. В этот раз было добавлено несколько новых функций и улучшений, которые сделали интерфейс более современным, удобным и интерактивным.

Одним из главных нововведений стал тёмный режим. Теперь пользователи могут переключаться между светлой и тёмной темами оформления. Кнопка переключения визуально символизирует смену дня и ночи, делая взаимодействие с интерфейсом более наглядным.

Также были добавлены различные анимационные эффекты. Например, при клике на поле заголовка или комментария текст-подсказка плавно смещается вверх, что делает работу с формой более удобной и современной.

Появилась система индикации количества символов. Во время ввода сообщения специальная шкала заполняется и показывает примерный остаток рекомендуемого объёма текста. Дополнительно отображается текущее количество введённых символов. При этом ограничений на длину сообщения нет указанные значения носят исключительно рекомендательный характер.

Была расширена система смайлов. Теперь они распределены по тематическим разделам, таким как «Дружба», «Любовь» и «Позитив». Например, при нажатии на значок сердца открывается отдельный список соответствующих смайлов. Кроме того, система автоматически определяет активное текстовое поле и вставляет выбранный смайл именно в него.

Скрипты формы были дополнительно оптимизированы и частично переписаны. Интерфейс получил более приятное оформление как в светлых, так и в тёмных тонах, а также стал работать более плавно и стабильно.

Ещё одной полезной функцией стала визуальная индикация успешной отправки записи. После публикации комментария кнопка «Создать запись» меняет цвет на зелёный и отображает дополнительную нижнюю индикацию, подтверждающую успешное выполнение действия.

Также были добавлены новые эффекты появления элементов. Теперь форма плавно появляется на экране, словно всплывая из правого нижнего угла. Благодаря этому интерфейс выглядит более живым и современным.

Как видно, изменений было достаточно много. Форма становится всё более интерактивной, получает новые возможности и продолжает развиваться. В следующих обновлениях планируется добавление новых функций, а также возможное изменение цветовой схемы на более классический стиль, напоминающий оформление социальных сетей, таких как ВКонтакте или Facebook.

К сожалению, сайт развивается не так быстро, как хотелось бы, однако работа над ним продолжается, и каждое обновление приносит новые улучшения и делает проект более удобным

Глобальный блок

Исходный код

Код

<!-- Система интерактивное окно-->
<div id="siteWrapper" style="position: relative; max-width: 1200px; margin: 0 auto; background: #f5f5f5; min-height: 100vh;">
<link rel="stylesheet" href="https://bro.usite.pro/css/vk-pubmodal05.css" media="all">

<!-- Кнопка "Send Message" -->
<a href="javascript:void(0);" id="openArticleForm" style="
position: absolute;
right: -450px;
top: 50%;
background: #3b5998;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
padding: 11px 30px;
border-radius: 8px 0 0 8px;
text-decoration: none;
box-shadow: 0 6px 16px rgba(76,117,163,0.45);
transition: all 0.3s ease;
z-index: 20;
"
onmouseover="
this.style.background='#3f6691';
this.style.paddingRight='115px';
this.style.boxShadow='0 10px 24px rgba(76,117,163,0.55)';
"
onmouseout="
this.style.background='#3b5998';
this.style.paddingRight='30px';
this.style.boxShadow='0 6px 16px rgba(76,117,163,0.45)';
"
>
💬 Send Message
</a>

</div>

<?if($USER_ID$>0)?>

<div id="publOverlay">
<div id="publModal">

<!-- ============ HEADER ============ -->
<div class="publHeader">
<div class="headerLeft">
<div class="headerAvatar">💬</div>
<div class="headerInfo">
<div class="headerTitle">
Новая публикация
<div class="typingDots"><span></span><span></span><span></span></div>
</div>
<div class="headerSubtitle">Обычно отвечаем быстро</div>
</div>
</div>

<button class="themeToggle" title="Сменить тему">🌓</button>
<button id="closePubl">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M6 6l12 12M18 6L6 18"/>
</svg>
</button>
</div>

<div id="p_status"></div>

<!-- ============ BODY ============ -->
<div class="publBody">

<!-- ПОЛЕ: Заголовок -->
<div class="field">
<input type="text" id="p_title" placeholder=" " required>
<span class="fieldIcon">📝</span>
<label>Заголовок *</label>
</div>

<!-- ПОЛЕ: Категория -->
<div class="field">
<select id="p_cat">
<option value="1">Стена</option>
</select>
<span class="fieldIcon">📂</span>
</div>

<!-- OPTIONS -->
<div class="publOptions">
<div class="opt active" data-key="coms">💬 Комментарии</div>
<div class="opt" data-key="ontop">📌 Закрепить</div>
<div class="opt" data-key="hidden">
<span class="bigEye">👁</span> Скрыть
</div>
</div>

<!-- ============ BB РЕДАКТОР + EMOJI ============ -->
<div class="field bbField bb-side" id="bbWrap">
<div class="bbPanel">
<button data-tag="b" data-tip="Жирный"><b>B</b></button>
<button data-tag="i" data-tip="Курсив"><i>I</i></button>
<button data-tag="u" data-tip="Подчёркнутый"><u>U</u></button>
<button data-tag="url" data-tip="Ссылка">🔗</button>
<button data-tag="img" data-tip="Картинка">🖼</button>
<button data-tag="quote" data-tip="Цитата">❝</button>
<button data-tag="code" data-tip="Код">{ }</button>
<button data-tag="color" data-tip="Цвет">🎨</button>
<button data-tag="size" data-tip="Размер">🔠</button>
<button data-tag="spoiler" data-tip="Спойлер">👁</button>
</div>

<div class="bbEditor">
<textarea id="p_brief" placeholder=" " required></textarea>
<label>Краткое описание </label>
<div class="charProgress">
<div class="charProgressFill"></div>
</div>

<!-- EMOJI ВНУТРИ bbEditor (правый нижний угол) -->
<div class="emojiWrap">
<button type="button" id="emojiToggle">😀</button>
<div id="emojiPopup">
<div class="emojiCategories">
<button class="emojiCat active" data-cat="smiles">😀</button>
<button class="emojiCat" data-cat="hearts">❤️</button>
<button class="emojiCat" data-cat="gestures">👍</button>
<button class="emojiCat" data-cat="objects">🔥</button>
</div>
<div class="emojiGrid">
<span class="emojiItem">😀</span>
<span class="emojiItem">😂</span>
<span class="emojiItem">😎</span>
<span class="emojiItem">🔥</span>
<span class="emojiItem">❤️</span>
<span class="emojiItem">👍</span>
<span class="emojiItem">🎉</span>
<span class="emojiItem">🤖</span>
<span class="emojiItem">😏</span>
<span class="emojiItem">😭</span>
<span class="emojiItem">😍</span>
<span class="emojiItem">🥶</span>
<span class="emojiItem">🤔</span>
<span class="emojiItem">😴</span>
</div>
</div>
</div>
<!-- EMOJI ВНУТРИ bbEditor -->

</div>
</div>

<!-- Кнопка полного текста -->
<button type="button" id="toggleTextBtn" class="miniBtn">
<span class="btnText">Добавить полный текст</span>
</button>

<!-- ============ ПОЛНЫЙ ТЕКСТ + EMOJI ============ -->
<div id="textContainer" style="display:none;">
<div class="field">
<div class="bbEditor fullTextEditor">
<textarea id="p_text" placeholder=" "></textarea>
<label>Полный текст</label>

</div>
</div>
</div>

<!-- ДАТА -->
<div class="field dateWrap">
<input type="datetime-local" id="p_datetime" name="p_datetime" placeholder=" ">
<label>Дата публикации</label>
<span class="calendarIcon" id="openCalendar">📅</span>

<div class="calendarPopup">
<div class="calHeader">
<button class="calNav" id="calPrev">‹</button>
<span id="calMonth">Июнь 2026</span>
<button class="calNav" id="calNext">›</button>
</div>
<div class="calGrid" id="calGrid"></div>
</div>
</div>

<!-- ДЕЙСТВИЯ -->
<div class="publishActions">
<div class="opt notifyOpt" data-key="notify">
<span class="bell">🔔</span>
<span class="notifyText">Подписаться</span>
<input type="checkbox" id="sbsc" name="sbcr" value="1" hidden>
</div>

<button id="p_send">
<span>Создать запись</span>
<span class="sendIcon">➤</span>
<div class="sendProgress">
<div class="sendProgressFill"></div>
</div>
</button>
</div>

</div>
</div>
</div>

<!-- ОЛЬКО ОДИН iframe ! -->
<iframe id="ssidFrame" src="/publ/1-0-0-0-1" style="display:none;"></iframe>
<script src="https://bro.usite.pro/js/ssid_ucodes06.js"></script>

<?endif?>

Скрипт
CSS стили

Видео

Мурчанн

1