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

Решено пока приостановить дальнейшие шаги и сосредоточиться на доработке деталей. Как только внешний вид достигнет приемлемого уровня, работа возобновится с обновлённой энергией и новыми идеями.

Блок друзей

Код

<style>
/* ===== БАЗОВЫЙ КОНТЕЙНЕР ===== */
.vk-old-block {
background: #fff;
border: 1px solid #d1d5da;
font-family: Tahoma, Arial, sans-serif;
font-size: 13px;
color: #000;
width: 100%;
max-width: 600px;
}
.vk-old-header {
background: #f0f2f5;
padding: 6px 8px;
border-bottom: 1px solid #d1d5da;
color: #45688e;
font-weight: bold;
}
.vk-old-content {
padding: 10px 8px;
}
.vk-old-footer {
background: #f7f7f7;
border-top: 1px solid #d1d5da;
padding: 5px 8px;
color: #666;
font-size: 13px;
}

/* ===== СПИСОК ДРУЗЕЙ ===== */
.vk-friends {
display: flex;
flex-wrap: wrap;
gap: 10px 15px;
}
.vk-friend {
width: 88px;
text-align: center;
cursor: pointer;
position: relative;
}
.vk-friend img {
width: 78px;
height: 78px;
border-radius: 50%;
object-fit: cover;
display: block;
margin: 0 auto;
transition: 0.3s ease;
}

.vk-friend span {
display: block;
margin-top: 4px;
color: #45688e;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vk-friend:hover::after {
content: '';
position: absolute;
top:0; left:0;
width:100%; height:88%;
border-radius:50%;
background: rgba(0,0,0,.3);
}

/* ===== POPUP ===== */
.vk-friends-overlay {
position: fixed;
inset:0;
background: rgba(0,0,0,.35);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.vk-friends-popup {
width: 420px;
max-height: 520px;
background: #fff;
border-radius: 6px;
display: flex;
flex-direction: column;
overflow: hidden;
font-family: Tahoma, Arial, sans-serif;
box-shadow: 0 8px 30px rgba(0,0,0,.25);
animation: vkPop .18s ease-out;
}
@keyframes vkPop { from {transform: scale(.96);opacity:0;} to {transform: scale(1);opacity:1;} }
.vk-friends-popup-header {
background: #f0f2f5;
padding: 8px 12px;
font-weight: bold;
color: #45688e;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom:1px solid #d1d5da;
}

.vk-friends-popup-close {
cursor:pointer;
font-size:18px;
color:#FFF;
}

.vk-friends-popup-close:hover {color:#000;}
.vk-friends-popup-list {
flex:1;
overflow-y:auto;
padding:6px 0;
}

/* POPUP СТИЛИ */
.vk-friends-overlay {
position: fixed;
top:0; left:0;
width:100%; height:100%;
background: rgba(0,0,0,0.5);
z-index: 9999;
}

.vk-friends-popup {
background:#fff;
max-width:400px;
width:90%;
margin:50px auto;
border-radius:8px;
overflow:hidden;
font-family:Arial, sans-serif;
}

.vk-friends-popup-header {
padding:10px;
background:#5181b8;
color:#fff;
font-weight:bold;
display:flex;
justify-content:space-between;
align-items:center;
}

.vk-friends-popup-close {
cursor:pointer;
font-size:18px;
}

.vk-friends-popup-list {
max-height:800px;
overflow-y:auto;
}

.vk-friends-row {
display:flex;
align-items:center;
padding:5px 10px;
cursor:pointer;
transition: background 0.2s;
}

.vk-friends-row:hover {
background: #f0f0f0; /* только фон */
}

.vk-friends-row-name {
font-weight:bold;
}

/* ===== ДРУЖЕСКИЕ СТРОКИ ===== */
.vk-friends-row {
display:flex;
align-items:center;
gap:12px;
padding:8px 12px;
border-bottom:1px solid #edf1f5;
cursor:pointer;
transition: background .15s ease, padding-left .15s ease;
}

.vk-friends-row:last-child {border-bottom:none;}

/* ================= POPUP ================= */

/* overlay — ОБЯЗАТЕЛЕН */
.vk-friends-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}

/* окно */
.vk-friends-popup {
width: 420px;
max-height: 720px;
background: #fff;
border-radius: 8px;
display: flex;
flex-direction: column;
overflow: hidden;
font-family: Tahoma, Arial, sans-serif;
box-shadow: 0 16px 50px rgba(0,0,0,.35);
animation: vkPopupShow .18s ease-out;
}

@keyframes vkPopupShow {
from { transform: scale(.96); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}

/* header */
.vk-friends-popup-header {
background: linear-gradient(#5b87c7, #4a76a8);
color: #fff;
padding: 10px 14px;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}

/* кнопка закрытия */
.vk-friends-popup-close {
cursor: pointer;
font-size: 18px;
opacity: .8;
}
.vk-friends-popup-close:hover {
opacity: 1;
}

/* список */
.vk-friends-popup-list {
flex: 1;
overflow-y: auto;
background: #f9fafc;
}

/* ================= СТРОКА ДРУГА ================= */

.vk-friends-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: #fff;
border-bottom: 1px solid #edf1f5;
cursor: pointer;
transition: background .15s ease;
}

.vk-friends-row:hover {
background: #f1f5f9;
}

/* ===== КАЛЕНДАРИК СЛЕВА ===== */
.vk-friend-date {
width: 42px;
text-align: center;
user-select: none;
}

.vk-friend-date .day {
font-size: 18px;
font-weight: bold;
color: #2a5885;
line-height: 1;
}

.vk-friend-date .month {
font-size: 10px;
text-transform: uppercase;
color: #8a9db2;
margin-top: 2px;
}

/* ===== АВАТАР ===== */
.vk-friends-row img {
width: 70px;
height: 70px;
border-radius: 15%;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}

/* ===== ИНФО ===== */
.vk-friends-row-info {
display: flex;
flex-direction: column;
gap: 2px;
}

.vk-friends-row-name {
font-weight: bold;
color: #2a5885;
}

.vk-friends-row-group {
font-size: 12px;
color: #777;
}

/* ===== ИКОНКИ ===== */
.vk-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 11px;
font-weight: bold;
margin-left: 6px;
color: #fff;
}

/* ===== НУМЕРАЦИЯ СЛЕВА ===== */
.vk-friend-num {
width: 34px;
height: 34px;
min-width: 34px;
border: 1px solid #c9d6e4;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
color: #2a5885;
background: linear-gradient(#ffffff, #f2f5f9);
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
user-select: none;
}

/* ===== БОЛЬШОЙ СТАТУС (ПОСЛЕ НУМЕРАЦИИ) ===== */
.vk-icon-big {
width: 30px;
height: 30px;
min-width: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: bold;
color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
user-select: none;
margin-left: -15px; /* приближает к нумерации */
}

.vk-icon.friend { background:#4a76a8; } /* друг */
.vk-icon.family { background:#6b9e3f; } /* семья */
.vk-icon.work { background:#d27d2d; } /* коллега */
.vk-icon.idol { background:#c84b4b; } /* кумир */
.vk-icon.acquaintance { background:#8a8a8a; } /* знакомый */

.vk-friends-row {
  position: relative;
  overflow: hidden;
}

.vk-friends-row::before,
.vk-friends-row::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 1px; /* супер тонкая полоска */
  width: 0;
  border-radius: 0.5px;
  transition: width 2.5s ease; /* очень медленно расходится */
}

/* Цвета по статусу */
.vk-friends-row.friend::before,
.vk-friends-row.friend::after { background-color: #4a76a8; }
.vk-friends-row.idol::before,
.vk-friends-row.idol::after { background-color: #c84b4b; }
.vk-friends-row.acquaintance::before,
.vk-friends-row.acquaintance::after { background-color: #8a8a8a; }
.vk-friends-row.family::before,
.vk-friends-row.family::after { background-color: #6b9e3f; }
.vk-friends-row.work::before,
.vk-friends-row.work::after { background-color: #d27d2d; }

/* Расходятся от центра */
.vk-friends-row::before { left: 50%; transform: translateX(0%); }
.vk-friends-row::after { right: 50%; transform: translateX(0%); }

/* При наведении расширяются в стороны */
.vk-friends-row:hover::before,
.vk-friends-row:hover::after { width: 50%; }

/* ===== СТАТУС-КНОПКА (по центру текста) ===== */
.vk-friends-row .vk-friends-row-group {
  display: inline-flex;          /* flex вместо inline-block */
  align-items: center;           /* вертикальное выравнивание */
  justify-content: center;       /* горизонтальное выравнивание */
  padding: 2px 10px;             /* отступы сверху/снизу и слева/справа */
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  border: 2px solid transparent;
  transition: background 0.2s, border 0.2s;
  cursor: default;
  min-width: 50px;               /* опционально, чтобы кнопка не была слишком узкой */
  text-align: center;            /* на всякий случай ахаха*/
}

/* Цвет по статусу */
.vk-friends-row.friend .vk-friends-row-group {
  background-color: #4a76a8;
  border-color: #4a76a8;
}
.vk-friends-row.idol .vk-friends-row-group {
  background-color: #c84b4b;
  border-color: #c84b4b;
}
.vk-friends-row.acquaintance .vk-friends-row-group {
  background-color: #8a8a8a;
  border-color: #8a8a8a;
}
.vk-friends-row.family .vk-friends-row-group {
  background-color: #6b9e3f;
  border-color: #6b9e3f;
}
.vk-friends-row.work .vk-friends-row-group {
  background-color: #d27d2d;
  border-color: #d27d2d;
}

</style>

<div class="vk-old-block">
<div class="vk-old-header">Друзья</div>
<div class="vk-old-footer" id="friends-count">0 друзей</div>
<div class="vk-old-content">
<div class="vk-friends"></div>
</div>
</div>

<script>
$(function(){

<?if(!$USER_LOGGED_IN$)?>
$('#friends-count').text('Друзей нет');
$('.vk-friends').empty();
return;
<?else?>

const USER_ID = '$_USER_ID$';
const CACHE_KEY = 'friends_' + USER_ID;
const CACHE_TIME_KEY = CACHE_KEY + '_time';
const CACHE_TTL = 24 * 60 * 60 * 1000;

const $container = $('.vk-friends');
const $counter = $('#friends-count');
const DEFAULT_AVA = '/.s/src/profile/img/profile_photo_thumbnail.png';

let allFriends = [];

/* ===== МИНИ-БЛОК (главная страница) ===== */
function renderMini(friends){
  $container.empty();

  friends.slice(0,6).forEach((f, i) => {
    const card = $(`
      <div class="vk-friend" title="${f.nick}">
        <img src="${f.ava}">
        <span>${f.nick}</span>
      </div>
    `);
    card.on('click', () => location.href = f.profile);
    $container.append(card);
  });

  $counter.text(friends.length + ' друзей');
}

/* ===== POPUP ===== */
function showPopup(){
  if(!allFriends.length) return;

  const overlay = $('<div class="vk-friends-overlay"></div>');
  const popup = $(`
    <div class="vk-friends-popup">
      <div class="vk-friends-popup-header">
        Друзья (${allFriends.length})
        <span class="vk-friends-popup-close">×</span>
      </div>
      <div class="vk-friends-popup-list"></div>
    </div>
  `);

  popup.find('.vk-friends-popup-close').on('click', () => overlay.remove());
  overlay.on('click', e => { if(e.target === overlay[0]) overlay.remove(); });

  const list = popup.find('.vk-friends-popup-list');

  allFriends.forEach((f, i) => {
    let iconClass = 'friend';
    let iconLetter = 'Д';
    const g = f.group.toLowerCase();

    if(g.includes('сем')) { iconClass = 'family'; iconLetter = 'С'; }
    else if(g.includes('коллег')){ iconClass = 'work'; iconLetter = 'К'; }
    else if(g.includes('кумир')) { iconClass = 'idol'; iconLetter = 'К'; }
    else if(g.includes('знаком')){ iconClass = 'acquaintance'; iconLetter = 'З'; }

const row = $(`
  <div class="vk-friends-row ${iconClass}">
    <div class="vk-friend-date">
      <div class="day">${i + 1}</div>
      <div class="month">№</div>
    </div>

    <span class="vk-icon vk-icon-big ${iconClass}">${iconLetter}</span>

    <img src="${f.ava}">

    <div class="vk-friends-row-info">
      <div class="vk-friends-row-name">${f.nick}</div>
      <div class="vk-friends-row-group">${f.group}</div>
    </div>
  </div>
`);

    row.on('click', () => location.href = f.profile);
    list.append(row);
  });

  overlay.append(popup);
  $('body').append(overlay);
}

/* ===== ЗАГРУЗКА ===== */
function fetchFriends(){
  const cached = localStorage.getItem(CACHE_KEY);
  const time = localStorage.getItem(CACHE_TIME_KEY);

  if(cached && time && Date.now() - time < CACHE_TTL){
    allFriends = JSON.parse(cached);
    renderMini(allFriends);
  }

  $.get('/blog/0-0-1-0-17-' + USER_ID, html => {
    const $tmp = $('<div>').html(html);
    const $items = $tmp.find('.friend');

    allFriends = [];

    $items.each(function(){
      const $el = $(this);
      allFriends.push({
        nick: $el.find('.nick').text().trim(),
        ava: $el.find('.ava').text().trim() || DEFAULT_AVA,
        profile: $el.find('.url').text().trim(),
        group: $el.find('.gr').text().trim() || 'Без статуса'
      });
    });

    localStorage.setItem(CACHE_KEY, JSON.stringify(allFriends));
    localStorage.setItem(CACHE_TIME_KEY, Date.now());

    renderMini(allFriends);
  });
}

/* ===== INIT ===== */
$counter.css('cursor','pointer').attr('title','Показать всех друзей').on('click', showPopup);
fetchFriends();

/* ===== CSS полоски для popup (миниатюрная, медленно расходится) ===== */
$('<style>').text(`
.vk-friends-row {
  position: relative;
  overflow: hidden;
}
.vk-friends-row::before,
.vk-friends-row::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 2px; /* очень тонкая полоска */
  width: 0;
  border-radius: 1px;
  transition: width 1.2s ease; /* медленно расходится */
}

/* Цвета по статусу */
.vk-friends-row.friend::before,
.vk-friends-row.friend::after { background-color: #4a76a8; }       /* друг */
.vk-friends-row.idol::before,
.vk-friends-row.idol::after { background-color: #c84b4b; }         /* кумир */
.vk-friends-row.acquaintance::before,
.vk-friends-row.acquaintance::after { background-color: #8a8a8a; } /* знакомый */
.vk-friends-row.family::before,
.vk-friends-row.family::after { background-color: #6b9e3f; }       /* семья */
.vk-friends-row.work::before,
.vk-friends-row.work::after { background-color: #d27d2d; }         /* коллега */

/* Расходятся от центра */
.vk-friends-row::before { left: 50%; transform: translateX(0%); }
.vk-friends-row::after { right: 50%; transform: translateX(0%); }

/* При наведении расширяются в стороны */
.vk-friends-row:hover::before,
.vk-friends-row:hover::after { width: 50%; }
`).appendTo('head');

<?endif?>

});
</script>

Мурчанн

1