<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BRO Account</title>
<style>
.top-user-menu,
.user-box {
display: inline-flex !important;
align-items: center !important;
height: 39px !important; /* подогнано под иконку */
position: relative; /* чтобы можно было двигать */
}
/* Сдвиг настроек */
.top-user-menu {
display: flex;
align-items: center;
gap: 10px;
/* Поменяй эти значения для сдвига */
top: 0px; /* вверх/вниз: положительное вниз, отрицательное вверх */
left: -100px; /* влево/вправо: положительное вправо, отрицательное влево */
}
/* ================================
НАСТРОЙКА ПОЛОЖЕНИЯ СТРЕЛКИ
================================ */
:root {
--arrow-offset-y: 4px; /* ↓ ниже (+) / выше (-) */
}
/* ================================
АВАТАР + СТРЕЛКА КАК В ВК
================================ */
.user-box {
position: relative;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
/* Индивидуальный сдвиг */
top: 0px;
left: -10px;
}
/* Стрелка справа от аватарки */
.user-box::after {
content: "";
position: relative;
top: calc(var(--arrow-offset-y) + 10px);
width: 0;
height: 0;
margin-left: 26px;
border-left: 8px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #FFF;
transition: transform 0.15s ease, opacity 0.15s ease;
opacity: 0.9;
}
/* При открытом меню — стрелка вверх */
.user-box.active::after {
transform: rotate(180deg);
}
.user-avatar {
width: var(--user-avatar-size, 40px);
height: var(--user-avatar-size, 40px);
border-radius: 50%;
object-fit: cover;
position: relative;
top: var(--user-avatar-top, -10px);
left: var(--user-avatar-left, 33px);
border: 3px solid #fff;
outline: 1px solid #3f7cff;
outline-offset: -1px;
box-shadow: 0 4px 8px rgba(0,0,0,0.25);
/* затемнение + анимации */
transition:
transform .25s,
box-shadow .45s,
outline-color .25s,
top .25s,
left .25s,
filter .25s;
}
/* затемнение при наведении */
.user-avatar:hover {
box-shadow: 0 16px 14px rgba(0,0,0,0.45);
filter: brightness(0.97);
outline-color: #1f5cff;
transform: translateY(0px);
}
/* ================================
НАСТРОЙКИ ПОЗИЦИИ МЕНЮ
================================ */
:root {
--menu-offset-x: -157px; /* ← влево (-) / вправо (+) */
--menu-offset-y: -5px; /* ↑ вверх (-) / вниз (+) */
--menu-arrow-x: 182px; /* отступ стрелки от правого края */
}
/* ================================
КОНТЕЙНЕР АВАТАРА
================================ */
.user-box {
position: relative;
cursor: pointer;
}
/* ================================
ВЫПАДАЮЩЕЕ МЕНЮ
================================ */
.user-dropdown {
position: absolute;
top: calc(50px + var(--menu-offset-y));
right: calc(0px + var(--menu-offset-x));
width: 220px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
display: none;
z-index: 9999;
overflow: hidden;
font-family: Arial, sans-serif;
opacity: 0;
transform: translateY(-6px);
transition: opacity .15s ease, transform .15s ease;
}
/* Стрелка (как у цитаты / ВК) */
.user-dropdown::before {
content: "";
position: absolute;
top: -8px;
right: var(--menu-arrow-x);
width: 16px;
height: 16px;
background: #ffffff;
transform: rotate(45deg);
box-shadow: -3px -3px 6px rgba(0, 0, 0, 0.05);
}
/* Активное состояние */
.user-box.active .user-dropdown {
display: block;
opacity: 1;
transform: translateY(0);
}
/* ================================
ЗАГОЛОВОК
================================ */
.user-dropdown-header {
padding: 12px;
background: #f5f6f8;
font-weight: bold;
font-size: 14px;
color: #222;
}
/* ================================
ПУНКТЫ МЕНЮ
================================ */
.dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
font-size: 14px;
color: #222;
text-decoration: none;
transition: background 0.15s ease;
}
/* Иконка (через CSS) */
.dropdown-item::before {
content: "";
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
/* Наведение */
.dropdown-item:hover {
background: #f0f2f5;
}
/* ================================
РАЗДЕЛИТЕЛЬ
================================ */
.dropdown-separator {
height: 1px;
background: #e5e7eb;
margin: 6px 0;
}
/* ================================
ВЫХОД
================================ */
.dropdown-item.logout {
color: #d93025;
}
.dropdown-item::before {
content: "";
width: 22px;
height: 26px;
display: inline-block; /* ОБЯЗАТЕЛЬНО */
flex-shrink: 0; /* чтобы не схлопывалось */
background-color: #6d7885; /* цвет иконки */
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
/* Шестерёнка */
.icon-settings::before {
content: "⚙️";
}
.icon-messages::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v11H7l-3 3V4z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v11H7l-3 3V4z'/%3E%3C/svg%3E");
}
.icon-profile::before {
background-color: #1877f2;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z'/%3E%3C/svg%3E");
}
.icon-logout::before {
background-color: #d93025;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 13v-2H7V8l-5 4 5 4v-3zM20 3H9v4h2V5h7v14h-7v-2H9v4h11z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 13v-2H7V8l-5 4 5 4v-3zM20 3H9v4h2V5h7v14h-7v-2H9v4h11z'/%3E%3C/svg%3E");
}
.icon-users::before {
background-color: #d93025; /* синий, как у ВК для активных элементов */
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 2.01 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 2.01 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}
/* ---------- Общие настройки ---------- */
* { box-sizing: border-box; }
body {
margin: 0;
background: #e9ebee;
font-family: Arial, sans-serif;
-webkit-font-smoothing: antialiased;
padding-top: 65px; /* отступ под фиксированную шапку */
}
/* ---------- Верхнее меню ---------- */
.header {
width: 100%;
background: #3b5998;
height: 65px;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.header-inner {
width: 1035px;
max-width: calc(100% - 40px);
margin: 0 auto;
height: 100%;
position: relative;
top: 10px;
}
.logo {
position: absolute;
top: 12px;
left: 0;
color: #fff;
font-weight: bold;
font-size: 22px;
text-decoration: none;
margin-left: -49px;
}
.logo-box {
background: #fff;
color: #0a66c2;
padding: 2px 6px;
margin-left: 2px;
border-radius: 2px;
}
.nav-cta-wrapper {
position: absolute;
bottom: 25px;
right: 0;
display: flex;
gap: 15px;
}
.nav-cta {
width: 25px;
height: 25px;
border-radius: 50%;
}
/* ---------- Сетка (контент) ---------- */
.container {
width: 1135px;
max-width: calc(100% - 40px);
margin: 15px auto;
display: grid;
grid-template-columns: 210px 1fr; /* левая колонка фикс, центральная гибкая */
grid-gap: 10px; /* уменьшено на 5px */
align-items: start;
}
.block {
background: #fff; /* все блоки белые */
padding: 15px;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
/* Левая колонка */
.left-col {
grid-row: span 2;
padding-top: 10px;
}
.left-col h3 { margin: 0 0 6px 0; padding-left: 8px; letter-spacing: 3px;}
.left-col p { margin: 0 0 12px 0; color:#666; }
.left-col ul { padding-left: 18px; margin: 0; color:#333; }
.left-col ul li { margin: 6px 0; }
/* Центральная колонка */
.center-col {
display: flex;
flex-direction: column;
}
/* Большая обложка */
.cover {
width: 100%;
height: 300px;
margin-bottom: 10px; /* уменьшено на 5px */
overflow: hidden;
border-radius: 2px;
}
.cover img {
width: 100%;
height: 100%;
object-fit: cover;
display:block;
}
/* Маленький центральный блок — уже */
.center-small {
margin-top: -10px;
height: 40px;
display: flex;
align-items: center;
justify-content: left;
padding-left: 10px;
text-align: center;
background: #fff; /* белый фон */
border-top: 0px solid #bfc1c4;
border-left: none;
border-right: none;
border-bottom: none;
border-radius: 0 !important;
margin-bottom: 10px; /* уменьшено на 5px */
}
/* ---------- Нижний ряд ---------- */
.bottom-row {
grid-column: 2;
display: grid;
grid-template-columns: 1fr 320px;
grid-template-rows: auto auto;
gap: 10px;
margin-top: 2px;
align-items: start; /* ВАЖНО */
}
/* Левый блок внизу */
.bottom-left {
grid-column: 1 / 2;
grid-row: 1 / span 2;
min-height: 150px;
background: #fff;
border-radius: 0;
border: 1px solid #d8dce1;
padding: 10px;
}
.right-small {
display: flex;
align-items: center;
justify-content: left;
min-height: 60px;
width: 100%;
background: #fff;
border-radius: 0;
border: 1px solid #d8dce1;
padding: 10px;
position: sticky; /* главное */
top: 75px; /* ниже фиксированной шапки */
margin-bottom: 1px; /* добавляем отступ снизу */
}
/* Размещение правых блоков */
.bottom-row > .right-small:nth-of-type(1) { grid-column: 2; grid-row: 1; }
.bottom-row > .right-small:nth-of-type(2) { grid-column: 2; grid-row: 2; }
.bottom-row > .right-small:nth-of-type(3) { grid-column: 2; grid-row: 3; }
/* Визуальные улучшения одинаковых блоков */
.bottom-left,
.right-small,
.center-small {
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* Мелкая адаптивность */
@media (max-width: 900px) {
.container { grid-template-columns: 1fr; width: calc(100% - 30px); }
.left-col { grid-row: auto; padding-top: 12px; }
.bottom-row { grid-column: 1; grid-template-columns: 1fr; grid-template-rows: auto; }
.bottom-left, .right-small { grid-column: 1; grid-row: auto; }
.cover { height: 220px; }
}
/* ---------- Поиск в шапке ---------- */
.vk-search {
position: absolute;
left: 170px;
top: 10px;
}
.vk-search input {
width: 220px;
height: 32px;
padding: 0 10px 0 34px; /* место под лупу */
border-radius: 8px;
border: 1px solid #2f477a;
background: #fff;
font-size: 14px;
outline: none;
}
.vk-search input::placeholder {
color: #888;
}
.vk-search input:focus {
border-color: #1d3f72;
}
/* ---------- Лупа ---------- */
.vk-search-icon {
position: absolute;
left: 10px;
top: 50%;
width: 17px;
height: 17px;
transform: translateY(-50%);
pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M10 2a8 8 0 105.293 14.293l4.707 4.707 1.414-1.414-4.707-4.707A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E") no-repeat center;
background-size: contain;
}
.blockbro {
display: flex;
flex-direction: column;
gap: 10px; /* расстояние между блоками */
position: sticky; /* липкая колонка */
top: 85px; /* ниже фиксированной шапки */
align-self: start; /* обязательно для sticky */
}
/* нижняя плашка */
#bottomInfoBar,
#unverifiedEmail,
.bottom-info-wrapper,
.bottom-info-block {
display: none !important;
visibility: hidden !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
}
div[id^="wp"],
div[id^="wprdv"] {
display: none !important;
visibility: hidden !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
}
iframe[style*="position:fixed"][style*="top:0"] {
display: none !important;
}
/* ====== НАСТРОЙКИ ПОЗИЦИИ (МЕНЯЕШЬ ТОЛЬКО ТУТ) ====== */
:root {
--vk-auth-top: 2px; /* смещение сверху */
--vk-auth-right: -100px; /* смещение справа */
--vk-auth-left: auto; /* auto или значение */
--vk-auth-bottom: auto; /* auto или значение */
}
/* Контейнер кнопок */
.vk-auth-buttons {
position: absolute; /* можно сменить на fixed */
top: var(--vk-auth-top);
right: var(--vk-auth-right);
left: var(--vk-auth-left);
bottom: var(--vk-auth-bottom);
display: flex;
gap: 8px;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
z-index: 1000;
}
/* ====== КНОПКИ ====== */
.vk-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 24px;
padding: 0 12px;
font-size: 11px;
font-weight: 500;
border-radius: 50px;
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, box-shadow .15s ease;
user-select: none;
}
/* Войти */
.vk-login {
background: #4a76a8;
color: #fff;
}
.vk-login:hover {
background: #3d6898;
}
/* Регистрация */
.vk-register {
background: #FFF;
color: #2a5885;
}
.vk-register:hover {
background: #dce3ea;
}
/* Нажатие */
.vk-btn:active {
box-shadow: inset 0 2px 3px rgba(0,0,0,.15);
}
/* ===== НАСТРОЙКИ ПОЗИЦИИ ===== */
:root {
--vk-login-top: 12px;
--vk-login-right: 80px;
}
/* Контейнер формы */
.vk-top-login {
position: absolute;
top: var(--vk-login-top);
right: var(--vk-login-right);
z-index: 1000;
}
/* Форма */
.vk-top-login form {
display: flex;
align-items: center;
gap: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Поля ввода */
.vk-login-input {
height: 26px;
width: 120px;
padding: 0 8px;
font-size: 13px;
border-radius: 3px;
border: 1px solid #c3cbd4;
background: #fff;
outline: none;
}
.vk-login-input:focus {
border-color: #4a76a8;
}
/* Кнопка входа */
.vk-login-btn {
height: 26px;
padding: 0 12px;
font-size: 13px;
border-radius: 3px;
border: none;
background: #4a76a8;
color: #fff;
cursor: pointer;
}
.vk-login-btn:hover {
background: #3d6898;
}
/* Регистрация */
.vk-register-link {
margin-left: 6px;
font-size: 12px;
color: #2a5885;
text-decoration: none;
}
.vk-register-link:hover {
text-decoration: underline;
}
:root {
/* ───── НАСТРОЙКИ ───── */
/* движение кнопки */
--btn-x: 80px; /* влево - / вправо + */
--btn-y: -35px; /* вверх - / вниз + */
/* движение формы входа */
--auth-x: -220px; /* влево - / вправо + */
--auth-y: -61px; /* вверх - / вниз + */
}
/* ───── КОНТЕЙНЕР КНОПОК ───── */
.buttons-row {
position: relative;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
width: 100% !important;
padding-top: 10px !important;
padding-right: 35px !important;
}
/* ───── КНОПКА ───── */
.btn-add {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
min-height: 36px;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
color: #0a66c2;
background-color: #fff;
border: 1px solid #0a66c2;
border-radius: 999px;
text-decoration: none !important;
cursor: pointer;
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.15s ease,
box-shadow 0.15s ease;
/* старт + позиционирование */
opacity: 0;
transform:
translate(
var(--btn-x),
calc(var(--btn-y) + 6px)
)
scale(0.96);
animation: btnAppear 0.3s ease forwards;
}
/* hover */
.btn-add:hover {
background-color: #0a66c2;
color: #fff;
box-shadow: 0 4px 12px rgba(10, 102, 194, 0.25);
}
/* active */
.btn-add:active {
transform:
translate(var(--btn-x), var(--btn-y))
scale(0.97);
}
/* убираем влияние user-agent */
a.btn-add {
text-decoration: none !important;
color: inherit;
}
/* анимация кнопки */
@keyframes btnAppear {
from {
opacity: 0;
transform:
translate(
var(--btn-x),
calc(var(--btn-y) + 6px)
)
scale(0.96);
}
to {
opacity: 1;
transform:
translate(var(--btn-x), var(--btn-y))
scale(1);
}
}
/* ───── ФОРМА АВТОРИЗАЦИИ ───── */
.vk-top-login {
position: absolute;
top: 100%;
right: 0;
margin-top: 12px;
opacity: 0;
pointer-events: none;
transform:
translate(
var(--auth-x),
calc(var(--auth-y) + 10px)
)
scale(0.97);
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
/* активное состояние формы */
.vk-top-login.active {
opacity: 1;
pointer-events: auto;
transform:
translate(var(--auth-x), var(--auth-y))
scale(1);
}
</style>
</head>
<body>
<!-- МЕНЮ -->
<div class="header">
<div class="header-inner">
<a href="/" class="logo"> Bro <span class="logo-box">usite.pro</span></a>
<form class="vk-search" action="/search" method="get">
<span class="vk-search-icon"></span>
<input type="text" name="q" placeholder="Поиск" />
</form>
<!-- Колокольчик -->
<div id="vk_notifyIcon" style="position:relative; display:inline-block; cursor:pointer; top:12px; right:-410px; ">
<img src="https://bro.usite.pro/icon/bell.png" alt="Колокольчик" style="width:30px; height:30px;">
<span id="vk_notifyCount" style="
position:absolute;
top:-7px;
right:-2px;
background:red;
color:white;
border-radius:50%;
width:18px;
height:18px;
line-height:18px;
text-align:center;
font-weight:bold;
font-size:11px;
">0</span>
</div>
<script>
window.friends = window.friends || {};
(function($, friends){
const DEFAULT_AVA = "/files/person.png";
const CHECK_DELAY = 20000;
async function fetchAvatar(profileUrl){
if(!profileUrl) return DEFAULT_AVA;
try{
const html = await $.get(profileUrl + (profileUrl.includes('?')?'&':'?') + 'r='+Math.random());
const bg = $(html).find(".profile-photo").first().css("background-image") || "";
const m = bg.match(/url\(['"]?(.*?)['"]?\)/i);
return m ? m[1] : DEFAULT_AVA;
}catch(e){ return DEFAULT_AVA; }
}
function showNotification({avatar, sender, title, description, date, href}){
const popup = document.createElement('div');
popup.style.position = 'fixed';
popup.style.bottom = '-150px';
popup.style.right = '20px';
popup.style.width = '320px';
popup.style.background = '#fff';
popup.style.border = '2px solid #0a9fff';
popup.style.borderRadius = '12px';
popup.style.padding = '12px';
popup.style.boxShadow = '0 8px 20px rgba(0,0,0,0.25)';
popup.style.display = 'flex';
popup.style.alignItems = 'flex-start';
popup.style.gap = '12px';
popup.style.zIndex = 99999;
popup.style.opacity = '0';
popup.style.transition = 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
popup.innerHTML = `
<div style="flex-shrink:0; display:flex; flex-direction:column; align-items:center;">
<div style="
width:100px;
height:100px;
border-radius:50%;
background-image:url('${avatar}');
background-size:cover;
background-position:center;
border: 3px solid #fff;
outline:2px solid #0a66c2;
box-shadow:0 4px 12px rgba(0,0,0,0.25);
transform:scale(0.8);
transition: transform 0.5s;
"></div>
</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:space-between; position:relative; padding-left:-6px;">
<div style="position:absolute; top:0; right:0; font-size:11px; color:#888; opacity:0; transform:translateY(-10px); transition: all 0.5s;">${date}</div>
<div>
<div style="font-weight:700; font-size:16px; color:#0a66c2; margin-bottom:2px;">${sender}</div>
<div style="font-weight:600; font-size:13px; color:#0a66c2; margin-bottom:4px;">${title}</div>
<div style="font-size:12px; color:#555; line-height:1.3;">${description}</div>
</div>
<a href="${href}" style="margin-top:6px; font-size:13px; color:#0a66c2; font-weight:500; text-decoration:none;">Открыть сообщение</a>
</div>
`;
document.body.appendChild(popup);
requestAnimationFrame(()=>{
popup.style.bottom='20px';
popup.style.opacity='1';
const avatarDiv = popup.querySelector('div > div');
avatarDiv.style.transform='scale(1)';
const senderDiv = popup.querySelector('div:nth-child(2) > div > div:first-child');
senderDiv.style.opacity='1';
senderDiv.style.transform='translateY(0)';
const dateDiv = popup.querySelector('div:nth-child(2) > div:nth-child(1)');
if(dateDiv){ dateDiv.style.opacity='1'; dateDiv.style.transform='translateY(0)'; }
});
setTimeout(()=>{
popup.style.opacity='0';
popup.style.bottom='-150px';
const avatarDiv = popup.querySelector('div > div');
avatarDiv.style.transform='scale(0.8)';
const senderDiv = popup.querySelector('div:nth-child(2) > div > div:first-child');
senderDiv.style.opacity='0';
senderDiv.style.transform='translateY(10px)';
const dateDiv = popup.querySelector('div:nth-child(2) > div:nth-child(1)');
if(dateDiv){ dateDiv.style.opacity='0'; dateDiv.style.transform='translateY(-10px)'; }
setTimeout(()=> popup.remove(), 500);
}, 9000);
}
friends.checkPm = async function(){
$.get("/index/14?" + Math.random()).done(async html=>{
const $h = $('<div>').append($.parseHTML(html));
const $u = $h.find("b.unread");
const count = $u.length;
document.getElementById("vk_notifyCount").innerText = count>0 ? count : '0';
if(count===0) return;
const $first = $u.first();
const title = $first.text().trim();
let href = $first.parent().attr("href") || "#";
const $td = $first.closest("td");
const $nickLink = $td.find("a[href*='/index/8-0-']").last();
let sender = $nickLink.text().trim() || "Пользователь";
let profLink = $nickLink.attr("href") || "";
if(profLink.startsWith('/')) profLink = location.origin + profLink;
let avatar = await fetchAvatar(profLink);
let dateText = "";
try { dateText = $first.closest("tr,div,li").find(".message-date, time").first().text().trim(); } catch(e){}
showNotification({
avatar,
sender,
title,
description: "Новое сообщение пришло. Вы можете прочитать его позже.",
date: dateText,
href
});
}).fail(()=> console.warn("ЛС не удалось загрузить"));
setTimeout(friends.checkPm, CHECK_DELAY);
};
friends.checkPm();
$(document).on("click","#vk_notifyIcon", ()=> location.href="/index/14");
})(jQuery, window.friends);
</script>
<?if($USER_LOGGED_IN$)?>
<div class="nav-cta-wrapper">
<div class="nav-cta">
<!-- Аватар + меню -->
<div class="user-box" id="userMenu">
<!-- Пользовательский аватар -->
<img src="$USER_AVATAR_URL$"
alt="$USERNAME$"
class="user-avatar real-avatar"
onerror="this.style.display='none';
this.nextElementSibling.style.display='block';">
<!-- Дефолтный аватар -->
<img src="/.s/src/profile/img/profile_photo_thumbnail.png"
alt="default"
class="user-avatar default-avatar"
style="display:none;">
<!-- Выпадающее меню -->
<div class="user-dropdown" id="userMenu">
<div class="user-dropdown-header">
<span class="username">$USERNAME$</span>
</div>
<a href="/index/14" class="dropdown-item icon-messages">Личные сообщения</a>
<a href="/index/11" class="dropdown-item icon-settings">Настройки</a>
<a href="/index/8" class="dropdown-item icon-profile">Моя страница</a>
<a href="/index/15" class="dropdown-item icon-users">Пользователи</a>
<div class="dropdown-separator"></div>
<a href="$LOGOUT_LINK$" class="dropdown-item icon-logout logout">Выход</a>
</div>
<script>
document.addEventListener("click", function (e) {
const userBox = document.getElementById("userMenu");
if (!userBox) return;
if (userBox.contains(e.target)) {
userBox.classList.toggle("active");
} else {
userBox.classList.remove("active");
}
});
</script>
<?endif?>
<!-- КНОПКА ПРИСОЕДИНИТЬСЯ -->
<?if(!$USER_LOGGED_IN$)?>
<div class="buttons-row">
<a href="javascript:;" class="btn-add" id="joinBtn">Присоединиться</a>
</div>
<?endif?>
<?if(!$USER_LOGGED_IN$)?>
<div class="vk-top-login" id="authMenu">
<form action="/index/sub/" method="post">
<input type="hidden" name="a" value="2">
<input
type="text"
name="user"
class="vk-login-input"
placeholder="Логин"
autocomplete="username"
>
<input
type="password"
name="password"
class="vk-login-input"
placeholder="Пароль"
autocomplete="current-password"
>
<button type="submit" class="vk-login-btn">Войти</button>
</form>
<?endif?>
<?if($USER_LOGGED_IN$)?>
<!-- меню пользователя -->
<?else?>
<div class="vk-auth-buttons">
<a href="$REGISTER_LINK$" class="vk-btn vk-register">Регистрация</a>
</div>
<?endif?>
<script>
document.addEventListener('DOMContentLoaded', () => {
const joinBtn = document.getElementById('joinBtn');
const authMenu = document.getElementById('authMenu');
if (!joinBtn || !authMenu) return;
joinBtn.addEventListener('click', () => {
authMenu.classList.toggle('active');
});
// закрытие при клике вне меню
document.addEventListener('click', (e) => {
if (!authMenu.contains(e.target) && !joinBtn.contains(e.target)) {
authMenu.classList.remove('active');
}
});
});
</script>
</div>
</div>
</div>
</div>
</div>
<!-- КОНТЕНТ -->
<div class="container">
<!-- Левая колонка -->
<div class="left-col block">
$GLOBAL_MENU$
</div>
<!-- Центральная колонка -->
<div class="center-col">
<div class="cover block">
<img src="https://bro.usite.pro/img/photo01.jpg" alt="cover">
</div>
<div class="center-small block">
Маленький блок под центральным$POWERED_BY$
</div>
<div class="bottom-row">
<!-- Лента новостей -->
$BODY$
<!-- Правая колонка (липкая) -->
<div class="right-col blockbro">
<div class="">
$GLOBAL_BRO$
</div>
$GLOBAL_TODAY$
<div class="right-small block">
Нижний блок справа 1
</div>
<div class="right-small block">
Нижний блок справа 2
</div>
<div class="right-small block">
Нижний блок справа 3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
