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

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

На Юкозе такое реализовать возможно.

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

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

Моя логика заключается в создании модулей и скриптов, которые не нагружают сервер. Почти вся информация кэшируется в браузере через Local Storage, а скрипты просто заходят туда, куда нужно, берут необходимые данные и выводят их в нужные места. Такой подход экономит ресурсы и при этом сайт остаётся очень быстрым.

И главное, друзья!

Всё это делается исключительно ради популяризации платформы Юкоз.

Исходник

Код

<!-- ЛЕНТА НОВОСТЕЙ -->
<style>
.vk-modern-feed{
background:#f1f2f6;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* POST */
.vk-modern-post{
background:#fff;
border-radius:12px;
box-shadow:0 1px 3px rgba(0,0,0,.08);
margin-bottom:14px;
padding:12px;
}

/* HEADER */
.vk-modern-header{
display:flex;
align-items:center;
position:relative;
}

.vk-modern-avatar img{
width:42px;
height:42px;
border-radius:50%;
display:block;
}

.vk-modern-author{
margin-left:10px;
}

.vk-modern-name a{
color:#2a5885;
font-weight:600;
text-decoration:none;
}
.vk-modern-name a:hover{
text-decoration:underline;
}

.vk-modern-time{
font-size:12px;
color:#818c99;
}

/* MODER PANEL */
.entry-moder-container{
position:absolute;
top:0;
right:0;
}

/* TEXT */
.vk-modern-text{
margin:10px 0;
line-height:1.45;
font-size:14px;
}

/* IMAGE */
.vk-modern-attach img{
width:100%;
height:auto;
display:block;
border-radius:10px;
}

/* ACTIONS */
.vk-modern-actions{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:10px;
border-top:1px solid #e5e7eb;
padding-top:8px;
}

.vk-actions-left{
display:flex;
gap:18px;
font-size:14px;
}

.vk-action{
display:flex;
align-items:center;
gap:6px;
cursor:pointer;
color:#626d7a;
}

.vk-action svg{
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:2;
}

.vk-action:hover{
color:#2a5885;
}

.vk-actions-right{
color:#626d7a;
cursor:pointer;
text-decoration:none;
}

.vk-modern-text img,
.vk-modern-attach img{
max-width:100% !important;
width:100% !important;
height:auto !important;
float:none !important;
display:block !important;
margin:8px 0 !important;
}

.vk-actions-right {
font-size: 18px;
color: #626d7a;
text-decoration: none;
padding: 4px 8px;
border-radius: 6px;
transition: background .2s, color .2s;
}

.vk-actions-right:hover {
background: #f1f2f6;
color: #2a5885;
}

/* Убираем подчёркивание у ссылок vk-action */
.vk-action {
text-decoration: none;
}

.vk-modern-time {
display: flex;
align-items: center;
gap: 6px; /* расстояние между иконкой и датой */
font-size: 13px;
color: #6b7280;
}

.vk-modern-time img {
display: block;
opacity: 0.8; /* можно убрать, если не нужно */
}

.vk-modern-time img {
margin-top: 1px;
}

</style>

<div class="vk-modern-feed">
<div class="vk-modern-post">

<!-- HEADER -->
<div class="vk-modern-header">
<div class="vk-modern-avatar">
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$" alt="$USERNAME$"><?else?><img src="/.s/img/avatar.png"><?endif?>
</div>

<div class="vk-modern-author">
<div class="vk-modern-name"><a href="$PROFILE_URL$">$USERNAME$</a></div>
<div class="vk-modern-time" title="$TIME$">
<img src="https://bro.usite.pro/icon/clock-icon.png" alt="Дата публикации" height="22">
<span>$DATE$</span>
</div>
</div>

<?if($MODER_PANEL$)?><div class="entry-moder-container">$MODER_PANEL$</div><?endif?>

<style>
/* Скрываем стандартный toggle и шестерёнку */
.u-mpanel-toggle {
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  position: relative;
}

.custom-edit-btn {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  color: #888; /* серый цвет, как в ВК */
  user-select: none;
  position: relative;
  padding: 2px 6px;
  transition: color 0.2s;
}

.custom-edit-btn:hover {
  color: #555; /* чуть темнее при наведении */
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.u-mpanel').forEach(panel => {
    // Проверяем, есть ли уже кнопка
    if(panel.querySelector('.custom-edit-btn')) return;

    // Создаём кнопку с тремя точками
    const btn = document.createElement('div');
    btn.className = 'custom-edit-btn';
    btn.textContent = '•••';
    panel.prepend(btn); // вставляем сверху панели

    // Клик по кнопке: вызываем стандартный toggle панели
    btn.addEventListener('click', e => {
      e.stopPropagation();
      const toggle = panel.querySelector('.u-mpanel-toggle');
      if(toggle) toggle.click(); // вызывает оригинальный модер панель
    });
  });
});
</script>

</div>

<!-- TEXT -->
<?if($MESSAGE$)?><div class="vk-modern-text">
<div class="post" data-id="$ID$">$MESSAGE$</div>
</div><?endif?>

<!-- IMAGE -->
<?if($COVER_IMAGE$)?><div class="vk-modern-attach">
<picture>
<source srcset="$COVER_SMALL_URL$" media="(min-width:769px)">
<img src="$COVER_URL$" alt="$TITLE$" loading="lazy">
</picture>
</div><?endif?>

<!-- ACTIONS -->
<div class="vk-modern-actions">

<div class="vk-actions-left">

<div class="vk-like" data-entryid="$ID$">
<span class="likeHeart" title="Поставить лайк"></span>
<span class="uLikeCount">$RATED$</span>
</div>

<style>
/* Контейнер лайка */
.vk-like {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: Arial, sans-serif;
}

/* Сердечко ВК с обводкой */
.likeHeart {
cursor: pointer;
font-size: 26px;
transition: transform 0.2s ease;
user-select: none;
}

.likeHeart::before {
content: "❤";
color: #fff; /* белое сердечко */
text-shadow:
0 0 1px #999, /* лёгкая серая обводка */
0 0 2px #999, /* увеличиваем толщину */
0 0 3px #999; /* ещё толще */
transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover эффект */
.likeHeart:hover::before {
color: #ff4d4d; /* красное при наведении */
text-shadow: 0 0 2px #ff9999, 0 0 3px #ff9999, 0 0 4px #ff9999;
transform: scale(1.2);
}

/* Состояние "лайк поставлен" */
.likeHeart.liked::before {
color: #ff0000; /* красное сердечко */
text-shadow: none; /* без обводки */
transform: scale(1.1);
}

/* Счётчик лайков */
.uLikeCount {
font-size: 14px;
color: #626d7a;
user-select: none;
}
</style>

<script>
(function() {
const likeBlocks = document.querySelectorAll('.vk-like');
let votedPosts = JSON.parse(localStorage.getItem('votedPosts') || '[]');

likeBlocks.forEach(block => {
const entryID = parseInt(block.dataset.entryid);
const heart = block.querySelector('.likeHeart');
const likeCount = block.querySelector('.uLikeCount');

if (votedPosts.includes(entryID)) {
heart.classList.add('liked');
}

heart.addEventListener('click', function() {
if (heart.classList.contains('liked')) return;

heart.classList.add('liked');
votedPosts.push(entryID);
localStorage.setItem('votedPosts', JSON.stringify(votedPosts));

if (likeCount) {
likeCount.textContent = parseInt(likeCount.textContent || '0') + 1;
}

_uPostForm('', {
type: 'POST',
url: '/publ',
data: {
a: 65,
id: entryID,
mark: 5,
mod: 'publ',
ajax: '2'
}
});
});
});
})();
</script>

<!-- COMMENTS -->
<?if($COMMENTS_URL$)?>
<a class="vk-action" href="$COMMENTS_URL$">
<svg viewBox="0 0 24 24">
<path d="M21 6h-18v10h4v4l4-4h10z"/>
</svg>
<span>$COMMENTS_NUM$</span>
</a>
<?endif?>

<!-- READS -->
<div class="vk-action">

<button class="vkShareBtn" onclick="vkShare(event)" aria-label="Поделиться" title="Поделиться">
<span class="vkShareRipple"></span>

<svg viewBox="0 0 24 24" class="vkShareIcon">
<path d="M11.996 3.725A2.15 2.15 0 0 0 10 5.87l-.001 2.117-.02.005a9.904 9.904 0 0 0-7.827 10.721c.083.811 1.116 1.103 1.611.455l.187-.237a9.08 9.08 0 0 1 5.836-3.265l.213-.026.001 2.494a2.15 2.15 0 0 0 3.476 1.692l7.824-6.132a2.15 2.15 0 0 0 0-3.384l-7.824-6.132a2.15 2.15 0 0 0-1.326-.458z"
fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>

<script>
function vkShare(e){
const btn = e.currentTarget;
const url = location.href;

// ripple
const rect = btn.getBoundingClientRect();
const ripple = btn.querySelector('.vkShareRipple');
ripple.style.left = (e.clientX - rect.left) + 'px';
ripple.style.top = (e.clientY - rect.top) + 'px';
ripple.classList.remove('show');
void ripple.offsetWidth;
ripple.classList.add('show');

// share
if (navigator.share) {
navigator.share({ url });
} else {
window.open('https://vk.com/share.php?url=' + encodeURIComponent(url),'_blank');
}
}
</script>

<style>
.vkShareBtn{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
padding:0;
border:none;
background:none;
cursor:pointer;
color:#666666; /* обычный серый */
-webkit-tap-highlight-color: transparent;
outline:none;
transition:color .15s ease, transform .12s ease;
--vkShareOffsetX: 0px; /* смещение по умолчанию */
}

.vkShareIcon{
width:20px;
height:20px;
display:block;
pointer-events:none;
transform: translateX(var(--vkShareOffsetX));
}

/* hover: делаем обводку темнее */
.vkShareBtn:hover{
color:#222222; /* насыщенный тёмный для контраста */
}

/* active (нажатие) */
.vkShareBtn:active{
transform:scale(0.92);
}

/* focus */
.vkShareBtn:focus-visible{
box-shadow:0 0 0 2px rgba(71,132,255,.35);
border-radius:6px;
}

/* ripple */
.vkShareRipple{
position:absolute;
width:6px;
height:6px;
background:rgba(0,0,0,.15); /* более мягкий ripple */
border-radius:50%;
transform:translate(-50%,-50%) scale(0);
pointer-events:none;
}
.vkShareRipple.show{
animation:vkRipple .45s ease-out;
}
@keyframes vkRipple{
to{
transform:translate(-50%,-50%) scale(8);
opacity:0;
}
}

</style>

</div>
</div>

<!-- Контейнер для просмотров -->
<a class="vkViewBtn" href="$ENTRY_URL$" title="Перейти к новости">

<!-- Иконка глаза -->
<svg viewBox="0 0 24 24" class="vkViewIcon" width="20" height="20">
<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="12" r="3" fill="currentColor"/>
</svg>

<!-- Количество просмотров -->
<span class="vkViewCount"> $READS$ </span>

</a>

<style>
.vkViewBtn{
display:inline-flex;
align-items:center;
gap:5px; /* расстояние между глазиком и числом */
color:#666666; /* цвет иконки и текста */
text-decoration:none;
font-size:14px;
cursor:pointer;
transition:color .15s ease, transform .12s ease;
--vkViewOffsetX: -4px; /* смещение по умолчанию */
transform: translateX(var(--vkViewOffsetX));
}

.vkViewBtn:hover{
color:#222222; /* при наведении цвет темнее */
}

.vkViewIcon{
display:block;
width:20px;
height:20px;
stroke:currentColor;
fill:currentColor;
}

</style>

</div>

<!-- Форма комментариев свернутая -->
<div class="vk-add-form">
<div class="collapsed">Что у Вас нового?</div>
<div class="expanded" style="display:none;">
<textarea class="vk-textarea" placeholder="Напишите комментарий..."></textarea>
<div class="submit-row">
<button class="vkSendBtn">Отправить</button>
<span class="vkStatus"></span>
</div>
</div>
</div>

</div>

</div>

<!-- Скрытый iframe для отправки -->
<iframe id="commentFrame" style="width:0;height:0;border:0;position:absolute;left:-9999px;"></iframe>

<div id="vkSuccessMsg">Комментарий успешно отправлен! 💙</div>

<style>
/* Старая ВК форма */
.vk-add-form {
margin-top:10px;
padding:6px;
background:#f0f2f5;
border:0px solid #ccd0d5;
border-radius:6px;
}
.vk-add-form .collapsed {
padding:2px;
cursor:text;
color:#65676b;
}
.vk-add-form .expanded textarea.vk-textarea {
width:100%;
min-height:50px;
border:0px solid #ccd0d5;
border-radius:6px;
padding:6px;
resize:none;
outline:none;
}
.vk-add-form .vkSendBtn {
margin-top:4px;
padding:4px 10px;
border-radius:4px;
background:#4c75a3;
color:#fff;
border:none;
cursor:pointer;
}
.vk-add-form .vkStatus {
margin-left:10px;
color:green;
font-size:11px;
}
#vkSuccessMsg {
position: fixed;
top: 80px;
right: 20px;
background: linear-gradient(135deg, #4a76a8, #5b8bd5);
color: #fff;
padding: 12px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
z-index: 9999;
opacity:0;
transition: all 0.5s ease;
}
#vkSuccessMsg.show {opacity:1;}
</style>

<script>
// Лайки
(function(){
const likeBlocks = document.querySelectorAll('.vk-like');
let votedPosts = JSON.parse(localStorage.getItem('votedPosts') || '[]');

likeBlocks.forEach(block => {
const entryID = parseInt(block.dataset.entryid);
const heart = block.querySelector('.likeHeart');
const likeCount = block.querySelector('.uLikeCount');

if(votedPosts.includes(entryID)) heart.classList.add('liked');

heart.addEventListener('click', () => {
if(heart.classList.contains('liked')) return;
heart.classList.add('liked');
votedPosts.push(entryID);
localStorage.setItem('votedPosts', JSON.stringify(votedPosts));
if(likeCount) likeCount.textContent = parseInt(likeCount.textContent||'0')+1;

_uPostForm('', {type:'POST',url:'/publ',data:{a:65,id:entryID,mark:5,mod:'publ',ajax:'2'}});
});
});
})();

// Комментарии с разворачиванием
document.querySelectorAll('.vk-modern-post').forEach(post => {
const collapsed = post.querySelector('.vk-add-form .collapsed');
const expanded = post.querySelector('.vk-add-form .expanded');
const textarea = expanded.querySelector('.vk-textarea');
const sendBtn = expanded.querySelector('.vkSendBtn');
const status = expanded.querySelector('.vkStatus');
const iframe = document.getElementById('commentFrame');

collapsed.addEventListener('click', () => {
collapsed.style.display = 'none';
expanded.style.display = 'block';
textarea.focus();
});

document.addEventListener('click', (e)=>{
if(!post.contains(e.target)){
collapsed.style.display = 'block';
expanded.style.display = 'none';
}
});

sendBtn.addEventListener('click', () => {
const msg = textarea.value.trim();
if(!msg) return;

const postId = post.querySelector('.post').dataset.id;
iframe.src = `/publ/1-1-0-${postId}`;
iframe.onload = () => {
try {
const doc = iframe.contentDocument;
const w = iframe.contentWindow;
const formFrame = doc.getElementById('acform');
if(!formFrame) return;

formFrame.querySelector('textarea[name="message"]').value = msg;
if(typeof w.addcom === 'function') w.addcom(formFrame); else formFrame.submit();

status.textContent = 'Комментарий отправлен!';
textarea.value = '';
collapsed.style.display = 'block';
expanded.style.display = 'none';

const successMsg = document.getElementById('vkSuccessMsg');
successMsg.classList.add('show');
setTimeout(()=>successMsg.classList.remove('show'),3000);
} catch(e){
console.error(e);
status.textContent='Ошибка отправки';
}
}
});
});
</script>

Мурчанн

1