Продолжаем совершенствовать форму отправки. Возможно, это будет её последняя версия.

В оригинальной форме публикации есть поля «источник» и «автор», но я не стал их выносить и встраивать в текущую форму.

На этот раз я добавил панель BB-кодов: реализовал соответствующую функцию, встроил её в скрипт, добавил настройки в HTML-форму и подключил стили в CSS. Также вернул прежний «белоснежный» дизайн, убрав серый оттенок.

Думаю, дальше там уже особо нечего улучшать.

Единственное, что хотелось бы добавить , возможность добавления постов без перезагрузки страницы. Не уверен, как это реализовать и возможно ли это на uCoz.

Исходник

Код

<!-- система интерактивное окно-->
<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-pubmodal04.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: 9999;
"
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">
<span>📝 Новая публикация</span>
<span id="closePubl">✕</span>
</div>

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

<div class="publBody">

<div class="field">
<input type="text" id="p_title" required>
<label>Заголовок *</label>
</div>

<div class="field">
<select id="p_cat">
<option value="1">Стена</option>
</select>
</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>

<div class="field bbField bb-side" id="bbWrap">

  <!-- BB панель -->
  <div class="bbPanel">

    <button data-tag="b"><b>B</b></button>
    <button data-tag="i"><i>I</i></button>
    <button data-tag="u"><u>U</u></button>
    <button data-tag="url">🔗</button>
    <button data-tag="img">🖼</button>
    <button data-tag="quote">❝</button>
    <button data-tag="code">{ }</button>
    <button data-tag="color">🎨</button>
    <button data-tag="size">🔠</button>
    <button data-tag="spoiler">👁</button>

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

  </div>

<div class="emojiWrap">

<button type="button" id="emojiToggle">
<img src="https://bro.usite.pro/img/yksmile.webp" alt="">
</button>

<div id="emojiPopup">

<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>

<script>
document.addEventListener('DOMContentLoaded', function () {

const btn = document.getElementById('emojiToggle');
const popup = document.getElementById('emojiPopup');
const textarea = document.getElementById('p_brief');

if (!btn || !popup || !textarea) return;

btn.onclick = function (e) {
e.stopPropagation();
popup.classList.toggle('active');
};

document.querySelectorAll('.emojiItem').forEach(function (el) {
el.onclick = function () {
const emoji = this.textContent;

const start = textarea.selectionStart;
const end = textarea.selectionEnd;

textarea.value =
textarea.value.substring(0, start) +
emoji +
textarea.value.substring(end);

textarea.focus();
textarea.selectionStart = textarea.selectionEnd = start + emoji.length;
};
});

document.addEventListener('click', function () {
popup.classList.remove('active');
});

});
</script>

<button type="button" id="toggleTextBtn" class="miniBtn">
➕ Добавить полный текст
</button>

<div id="textContainer" style="display:none;">
<div class="field">
<textarea id="p_text"></textarea>
<label>Полный текст</label>
</div>
</div>

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

<span class="calendarIcon" id="openCalendar">
<img src="https://img.icons8.com/?size=100&id=A2ME5jtXkheX&format=png&color=000000" alt="calendar">
</span>
</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>

<!-- зелёный индикатор -->
<span class="notifyDot"></span>
</div>

<!-- КНОПКА ОТПРАВКИ -->
<button id="p_send">Создать запись</button>

</div>

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

<iframe id="ssidFrame" src="/publ/1-0-0-0-1" style="display:none;"></iframe>
<script src="https://bro.usite.pro/js/ssid_ucodes05.js"></script>

<?endif?>

Мурчанн

1