<style>
/* ===== Кнопка открытия формы ===== */
#openPublForm {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 99999;
padding: 10px 20px; /* чуть меньше */
background: linear-gradient(135deg,#4c75a3,#3b5998);
color: #fff;
font-size: 14px; /* меньше шрифт кнопки */
font-weight: 600;
border: none;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 6px 16px rgba(0,0,0,.35);
transition: all 0.3s ease;
}
#openPublForm:hover {
transform: scale(1.05);
box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
/* ===== Overlay (фон) ===== */
#publOverlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
display: none; /* скрыт по умолчанию */
z-index: 999998;
}
/* ===== Модальное окно ===== */
#publModal {
position: fixed;
right: 20px;
bottom: 20px;
width: 280px;
background: #fff;
border-radius: 12px;
box-shadow: 0 12px 30px rgba(0,0,0,0.35);
transform: translateY(100%); /* остаёмся на Y */
transition: transform 0.4s ease;
overflow: hidden;
display: flex;
flex-direction: column;
z-index: 999999;
}
/* ===== Header ===== */
.publHeader {
background: linear-gradient(135deg,#4c75a3,#3b5998);
color: #fff;
padding: 12px; /* чуть меньше */
display: flex;
justify-content: space-between;
font-size: 14px; /* меньше шрифт заголовка */
font-weight: 600;
}
.publHeader span {
cursor: pointer;
transition: transform 0.2s ease;
}
.publHeader span:hover {
transform: rotate(90deg);
}
/* ===== Body ===== */
.publBody {
padding: 15px; /* уменьшено padding */
display: flex;
flex-direction: column;
gap: 10px; /* меньше отступ между полями */
align-items: flex-start;
text-align: left;
font-size: 13px; /* общий шрифт для текста формы */
}
/* Labels */
.publBody label {
font-weight: 500;
margin-bottom: 3px;
width: 100%;
text-align: left;
}
/* Inputs, selects, textarea */
.publBody input,
.publBody select,
.publBody textarea {
width: 100%;
padding: 8px; /* меньше padding */
border-radius: 6px;
border: 1px solid #dce1e6;
outline: none;
transition: all 0.3s ease;
font-size: 13px; /* уменьшен шрифт текста в полях */
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
text-align: left;
}
.publBody input:focus,
.publBody select:focus,
.publBody textarea:focus {
border-color: #4c75a3;
box-shadow: 0 0 8px rgba(76,117,163,0.3);
}
/* ===== Button отправки ===== */
#p_send {
width: 100%;
padding: 20px 0; /* чуть ниже и не слишком высоко */
margin-top: 5px; /* отступ от полей */
background: linear-gradient(135deg,#4c75a3,#3b5998);
color: #fff;
font-size: 13px;
font-weight: 600;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 14px rgba(76,117,163,0.35);
}
#p_send:hover {
transform: scale(1.00);
box-shadow: 0 9px 24px rgba(76,117,163,0.45);
}
/* ===== Статус сообщения ===== */
#p_status {
margin-top: 8px;
font-size: 16px; /* больше шрифт */
font-weight: 600; /* более жирный */
min-height: 20px;
text-align: center;
transition: all 0.3s ease;
}
/* Цвета для статуса */
#p_status.error {
color: #e74c3c; /* красный */
animation: pulse 0.6s ease-in-out;
}
#p_status.success {
color: #2ecc71; /* зелёный */
animation: pulse 0.6s ease-in-out;
}
/* Пульс для внимания */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* ===== Анимация показа ===== */
#publOverlay.active {
display: block;
}
#publModal.active {
transform: translateY(0);
}
</style>
<!-- ОБЕРТКА ВСЕГО САЙТА -->
<div id="siteWrapper" style="position: relative; max-width: 1200px; margin: 0 auto; background: #f5f5f5; min-height: 100vh;">
<!-- Кнопка "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)?>
<!-- POPUP Overlay -->
<div id="publOverlay" style="
position: fixed;
inset: 0;
background: rgba(0,0,0,.6);
display: none;
align-items: center;
justify-content: center;
z-index: 999999;
">
<div id="publModal" style="
width: 500px;
background: #fff;
border-radius: 5px;
transform: translateX(100%);
transition: transform 0.3s ease;
">
<div class="publHeader" style="
background: #4c75a3;
color: #fff;
padding: 14px;
display: flex;
justify-content: space-between;
">
Закрепить пост на стене
<span id="closePubl" style="cursor:pointer;">✖</span>
</div>
<!-- СТАТУС СООБЩЕНИЯ ВВЕРХУ -->
<div id="p_status"></div>
<div class="publBody" style="padding:14px;">
<label>Заголовок *</label>
<input type="text" id="p_title">
<label>Категория *</label>
<select id="p_cat">
<option value="1">Стена</option>
</select>
<style>
/* ===== Форма в стиле ВКонтакте ===== */
#publModal {
width: 520px; /* чуть шире */
background: #fff;
border-radius: 50px;
overflow: hidden; /* чтобы внутренние блоки не выступали за края */
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
transform: translateY(100%);
transition: transform 0.3s ease;
overflow: hidden;
font-family: 'Segoe UI', Tahoma, sans-serif;
}
.publHeader {
border-bottom: 1px solid rgba(0,0,0,0.1);
border-radius: 0; /* скругление убрали, родитель скругляет */
}
/* ===== Заголовок ===== */
.publHeader {
background: linear-gradient(135deg, #4c75a3, #3b5998);
color: #fff;
padding: 14px 16px;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.publHeader span {
cursor: pointer;
transition: transform 0.2s ease;
}
.publHeader span:hover {
transform: rotate(90deg);
}
/* ===== Body формы ===== */
.publBody {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 14px;
}
.publBody label {
font-weight: 500;
margin-bottom: 4px;
}
.publBody input,
.publBody select,
.publBody textarea {
width: 100%;
padding: 10px 12px; /* увеличенные внутренние отступы */
border-radius: 8px;
border: 1px solid #d0d3d8;
outline: none;
font-size: 14px;
transition: all 0.3s ease;
}
.publBody input:focus,
.publBody select:focus,
.publBody textarea:focus {
border-color: #4c75a3;
box-shadow: 0 0 8px rgba(76,117,163,0.2);
}
/* ===== Кнопка отправки ===== */
#p_send {
background: linear-gradient(135deg, #4c75a3, #3b5998);
color: #fff;
font-weight: 600;
font-size: 15px;
border: none;
border-radius: 6px;
padding: 12px 0;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
#p_send:hover {
background: linear-gradient(135deg, #5a84b2, #4c75a3);
transform: scale(1.00);
}
/* ===== Статус сообщения ===== */
#p_status {
font-weight: 600;
font-size: 15px;
min-height: 20px;
text-align: center;
transition: all 0.3s ease;
}
#p_status.error {
color: #e74c3c;
}
#p_status.success {
color: #2ecc71;
}
/* ===== Панель BB-кодов ВКонтакте стиль (прокачанная) ===== */
.ucoz-editor-bbpanel {
display: flex;
flex-wrap: nowrap;
gap: 6px;
margin-bottom: 12px;
padding: 6px 8px;
overflow-x: auto;
background: #f0f2f5;
border: 1px solid #d0d3d8;
border-radius: 8px;
}
/* ===== Кнопки BB-кодов ===== */
.ucoz-editor-bbpanel input {
cursor: pointer;
width: 42px; /* чуть шире */
height: 42px; /* чуть выше */
padding: 0 4px; /* внутренние отступы */
font-size: 10px;
font-weight: 600;
text-align: center;
line-height: 42px; /* вертикальное центрирование */
border-radius: 6px;
border: 1px solid #c3c6ca;
background: #fff;
color: #3b5998; /* синие, как в ВК */
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
transition: all 0.2s ease;
white-space: nowrap; /* чтобы текст не обрезался */
}
.ucoz-editor-bbpanel input:hover {
background: #e6eaf0;
border-color: #a8b0c1;
transform: translateY(-1px) scale(1.03);
}
.ucoz-editor-bbpanel input.active {
background: #3b5998;
color: #fff;
border-color: #2d4373;
}
/* ===== Скролл для панели ===== */
.ucoz-editor-bbpanel::-webkit-scrollbar {
height: 6px;
}
.ucoz-editor-bbpanel::-webkit-scrollbar-track {
background: #f0f2f5;
border-radius: 3px;
}
.ucoz-editor-bbpanel::-webkit-scrollbar-thumb {
background: #c3c6ca;
border-radius: 3px;
}
</style>
<!-- ===== Краткое описание с кнопкой смайлов ===== -->
<div class="publBody" style="padding:0px; position: relative; margin-bottom:10px;">
<script type="text/javascript" src="https://bro.usite.pro/js/bbcodes.js"></script>
<!-- Панель BB-кодов -->
<div class="ucoz-editor-bbpanel" style="margin-bottom:5px;">
<!-- Основные стили -->
<input type="button" value="B" title="Bold" onclick="simpletag('b','','','p_brief','')" />
<input type="button" value="I" title="Italic" onclick="simpletag('i','','','p_brief','')" />
<input type="button" value="U" title="Underline" onclick="simpletag('u','','','p_brief','')" />
<input type="button" value="URL" title="URL" onclick="tag_url('p_brief','')" />
<input type="button" value="IMG" title="Image" onclick="tag_image('p_brief','')" />
<input type="button" value="List" title="List" onclick="tag_list('p_brief','')" />
<input type="button" value="Hide" title="Hide from Guest" onclick="simpletag('hide','','','p_brief','')" />
<!-- Выравнивание текста -->
<input type="button" value="Left" title="Влево" onclick="simpletag('l','','','p_brief','')" />
<input type="button" value="Center" title="По центру" onclick="simpletag('c','','','p_brief','')" />
<input type="button" value="Right" title="Вправо" onclick="simpletag('r','','','p_brief','')" />
</div>
<label>Краткое описание *</label>
<textarea id="p_brief" style="height:100px; width:475px; padding-right:5px;"></textarea>
<!-- Кнопка смайлов -->
<button type="button" id="emojiBtnBrief" style="
position: absolute;
right: 15px;
top: 220px; /* позиция кнопки по высоте textarea */
width: 28px;
height: 28px;
background: #f5f5f5;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
">😊</button>
<!-- Панель смайлов -->
<div id="emojiPanelBrief" style="
position: absolute;
right: 0;
top: 10px;
width: 220px;
max-height: 250px;
overflow-y: auto;
background: #fff;
border: 1px solid #ccc;
border-radius: 6px;
display: none;
padding: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
z-index: 10000;
display: flex;
flex-wrap: wrap;
gap: 4px;
">
<!-- Сюда скрипт вставит все смайлы -->
</div>
</div>
<script>
$(document).ready(function(){
const textareaBrief = $('#p_brief');
const emojiBtnBrief = $('#emojiBtnBrief');
const emojiPanelBrief = $('#emojiPanelBrief');
// массив смайлов (юкоЗовские стандартные)
const emojis = [
'😀','😁','😂','🤣','😃','😄','😅','😆','😉','😊','😋','😎','😍','😘',
'😗','😙','😚','🙂','🤗','🤩','🤔','🤨','😐','😑','😶','🙄','😏','😣',
'😥','😮','🤐','😯','😪','😫','🥱','😴','😌','😛','😜','😝','🤤','😒',
'😓','😔','😕','🙃','🤑','😲','☹️','🙁','😖','😞','😟','😤','😢','😭',
'😦','😧','😨','😩','🤯','😬','😰','😱','🥵','🥶','😳','🤪','😵','🥴','😠','😡'
];
// добавляем смайлы в панель
emojis.forEach(e=>{
emojiPanelBrief.append(`<span class="emojiItem" style="cursor:pointer; font-size:16px;">${e}</span>`);
});
// показать/скрыть панель
emojiBtnBrief.on('click', function(e){
e.stopPropagation();
emojiPanelBrief.toggle();
});
// клик по смайлу — вставка
emojiPanelBrief.on('click', '.emojiItem', function(){
const emoji = $(this).text();
const start = textareaBrief[0].selectionStart;
const end = textareaBrief[0].selectionEnd;
const text = textareaBrief.val();
textareaBrief.val(text.substring(0,start) + emoji + text.substring(end));
textareaBrief[0].selectionStart = textareaBrief[0].selectionEnd = start + emoji.length;
textareaBrief.focus();
});
// закрываем панель, если клик вне
$(document).on('click', function(e){
if(!$(e.target).closest('#emojiPanelBrief, #emojiBtnBrief').length){
emojiPanelBrief.hide();
}
});
});
</script>
<!-- ===== Кнопка для показа текстовой статьи ===== -->
<div class="publBody" style="padding:0px; position: relative; margin-bottom:10px;">
<button type="button" id="toggleTextBtn" style="
background: #4c75a3;
color: #fff;
border: none;
border-radius: 60px;
padding: 10px 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
">Добавить текст статьи</button>
<!-- Поле текст статьи (скрыто по умолчанию) -->
<div id="textContainer" style="display:none; position: relative; margin-top:10px;">
<label>Текст статьи</label>
<textarea id="p_text" style="height:100px; width:475px; padding-right:5px;"></textarea>
<!-- Кнопка смайлов -->
<button type="button" id="emojiBtn" style="
position: absolute;
right: 5px;
top: 95px;
width: 28px;
height: 28px;
background: #f5f5f5;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
">😊</button>
<!-- Панель смайлов -->
<div id="emojiPanel" style="
position: absolute;
right: 0;
top: 10px;
width: 220px;
max-height: 250px;
overflow-y: auto;
background: #fff;
border: 1px solid #ccc;
border-radius: 6px;
display: none;
padding: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
z-index: 10000;
display: flex;
flex-wrap: wrap;
gap: 4px;
">
<!-- Сюда скрипт вставит все смайлы -->
</div>
</div>
</div>
<script>
$(document).ready(function(){
const textContainer = $('#textContainer');
const toggleTextBtn = $('#toggleTextBtn');
// Показать/скрыть поле текст статьи
toggleTextBtn.on('click', function(){
textContainer.toggle();
if(textContainer.is(':visible')){
$(this).text('Скрыть текст статьи');
} else {
$(this).text('Добавить текст статьи');
}
});
const textarea = $('#p_text');
const emojiBtn = $('#emojiBtn');
const emojiPanel = $('#emojiPanel');
// массив смайлов (юкоЗовские стандартные)
const emojis = [
'😀','😁','😂','🤣','😃','😄','😅','😆','😉','😊','😋','😎','😍','😘',
'😗','😙','😚','🙂','🤗','🤩','🤔','🤨','😐','😑','😶','🙄','😏','😣',
'😥','😮','🤐','😯','😪','😫','🥱','😴','😌','😛','😜','😝','🤤','😒',
'😓','😔','😕','🙃','🤑','😲','☹️','🙁','😖','😞','😟','😤','😢','😭',
'😦','😧','😨','😩','🤯','😬','😰','😱','🥵','🥶','😳','🤪','😵','🥴','😠','😡'
];
// добавляем смайлы в панель
emojis.forEach(e=>{
emojiPanel.append(`<span class="emojiItem" style="cursor:pointer; font-size:16px;">${e}</span>`);
});
// показать/скрыть панель смайлов
emojiBtn.on('click', function(e){
e.stopPropagation();
emojiPanel.toggle();
});
// клик по смайлу — вставка
emojiPanel.on('click', '.emojiItem', function(){
const emoji = $(this).text();
const start = textarea[0].selectionStart;
const end = textarea[0].selectionEnd;
const text = textarea.val();
textarea.val(text.substring(0,start) + emoji + text.substring(end));
textarea[0].selectionStart = textarea[0].selectionEnd = start + emoji.length;
textarea.focus();
});
// закрываем панель, если клик вне
$(document).on('click', function(e){
if(!$(e.target).closest('#emojiPanel, #emojiBtn').length){
emojiPanel.hide();
}
});
});
</script>
<button id="p_send">Создать запись</button>
</div>
</div>
</div>
<?endif?>
<!-- для перехвата ssid -->
<iframe id="ssidFrame" src="/publ/1-0-0-0-1" style="display:none;"></iframe>
<script src="https://bro.usite.pro/js/ssid_ucodes.js"></script>
