Список пользователей

1
Админ
Постов: 288
2
VIP
Постов: 75
3
Элита
Постов: 62
4
Проверенные
Постов: 46
5
Проверенные
Постов: 45
6
Проверенные
Постов: 39
7
VIP
Постов: 36
8
VIP
Постов: 35

  • Страница 1 из 1
  • 1
Шаблон "Личные сообщения V2.2" для uCoz Флаг страны
Дата: Четверг, 02.07.2026, 08:24 | Сообщение # 1 | | Написал: Известный
Автор темы
Мурчанн не в сети
        Сообщений:288
         Регистрация:20.10.2016
За уважение окружающих За уважение окружающих За хорошее поведение За преданность форуму За любовь народа

Версия: 2.2 (модификация)

Добавлено

Индикатор страны пользователя , визуальный элемент в виде флага государства, отображаемый рядом с аватаркой в карточке пользователя (блок "Лимит сообщений").

Техническая сторона

Определение страны происходит через системную переменную uCoz
Код
$USER_COUNTRY$
, которая возвращает ISO-код государства на основе IP-адреса посетителя (геолокация на стороне сервера).

Данные передаются в глобальный объект window.USER_DATA.country и используются JS-скриптом для динамической отрисовки.
Для отображения используется внешний CDN flagcdn.com (формат PNG, размер w80).

Флаг позиционируется абсолютно (position: absolute) относительно контейнера аватарки с помощью inline-стилей.

Ограничения

Функция носит декоративный характер и видна только самому пользователю в его карточке.
Значение
Код
$USER_COUNTRY$
определяется системой автоматически по IP и не зависит от страны, указанной пользователем в анкете профиля.
На текущий момент индикатор выводится только в шапке личных сообщений.

В дальнейшем планируется расширение функционала

Вывод флага в сообщениях на форуме (рядом с аватарками авторов постов).

Реализация потребует полной переработки форума на JavaScript с применением динамического рендеринга (аналогично подходу ВКонтакте).
Стандартными средствами CSS/шаблонов uCoz решить задачу невозможно требуется программная модификация DOM через JS для подмены стандартной вёрстки форума.

uCoz имеет архитектурные ограничения шаблонизатор не позволяет гибко модифицировать вёрстку форума через CSS. Поэтому для кастомизации (аватарки, флаги, бейджи ролей) применяется подход с JS-интерцепцией перехватом и перестроением DOM-дерева после загрузки страницы. Это единственный способ достичь уровня кастомизации, сопоставимого с современными соцсетями.



Исходный код

Код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BRO Chat |Твои диалоги</title>

<script>
// Передаём переменные uCoz в глобальные переменные
window.USER_DATA = {
avatar: '$USER_AVATAR_URL$',
username: '$USERNAME$',
group: '$USER_GROUP$',
country: '$USER_COUNTRY$'
};
</script>

<script src="https://bro.usite.pro/js/pm-header-role02.js"></script>
<link rel="stylesheet" href="/.s/src/base.min.css" />
<link rel="stylesheet" href="/.s/src/layer7.min.css" />
<link rel="stylesheet" href="https://bro.usite.pro/css/bro-message01.css?v=3" media="all">

</head>
<body>

<!-- МЕНЮ -->
<div class="header">
<div class="header-inner">

<a href="/" class="logo">DOM <span class="logo-box">LinkUp</span></a>

<form class="vk-search" action="/search" method="get">
<span class="vk-search-icon"></span>
<input type="text" name="q" placeholder="Поиск" />
</form>

$GLOBAL_GLOCKE$

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

</div>

</div>
</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?>

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

</div>
</div>

<!-- КОНТЕНТ -->
<div class="container">
<!-- Левая колонка -->
<aside class="left-col">
$GLOBAL_MENU$
</aside>


<!-- Центральная колонка -->
<main class="center-col">
<div class="center-content" id="ajaxBody">
$BODY$
</div>
</main>

<!-- Правая колонка -->
<aside class="right-col">
<div class="right-block">
<div class="right-block-header">Действия</div>
<div class="right-block-content">
<!-- Сюда JavaScript добавит кнопки меню -->
</div>
</div>

<!-- Блок информации -->
<div class="right-block">
<div class="right-block-header">Информация</div>
<div class="right-block-content">
<!-- Сюда можно добавить информацию о пользователе -->

<div class="info-widget">

<!-- Статистика профиля -->
<div class="iw-stats">
<div class="iw-stat-row">
<div class="iw-stat-icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 2V3.5M13.5 2V3.5M3 7.5H17M4 4.5C4 3.67157 4.67157 3 5.5 3H14.5C15.3284 3 16 3.67157 16 4.5V15.5C16 16.3284 15.3284 17 14.5 17H5.5C4.67157 17 4 16.3284 4 15.5V4.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 10.5H13M7 13H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<span class="iw-stat-label">На сайте</span>
<span class="iw-stat-value">$USER_REG_DAYS$ дн.</span>
</div>

<div class="iw-stat-row">
<div class="iw-stat-icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 10H17M10 3C12.5 5.5 12.5 14.5 10 17C7.5 14.5 7.5 5.5 10 3Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<span class="iw-stat-label">Страна</span>
<span class="iw-stat-value">$USER_COUNTRY$</span>
</div>
<!-- Блок информации -->

</div>

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

<script src="https://bro.usite.pro/js/hide-old-pm-form.js"></script>

<script>
// Передаём переменные uCoz в глобальные переменные
window.USER_DATA = {
avatar: '$USER_AVATAR_URL$',
username: '$USERNAME$',
group: '$USER_GROUP$'
};
</script>

<script src="https://bro.usite.pro/js/pm-message06.js?v=3"></script>

</body>
</html>

Мурчанн

Признаюсь, не знаю почему, но глядя на звезды мне всегда хочется мечтать.
Дата: Пятница, 03.07.2026, 06:28 | Сообщение # 2 | | Написал: Известный
Автор темы
Мурчанн не в сети
        Сообщений:288
         Регистрация:20.10.2016
За уважение окружающих За уважение окружающих За хорошее поведение За преданность форуму За любовь народа

Скрипт почистил: убрал дубли, которые вызывали конфликты.
Эта версия шаблона более продвинутая.

Да, просто вставляем в шаблон личных сообщений и всё.

Код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BRO Chat |Твои диалоги</title>

<script>
// Передаём переменные uCoz в глобальные переменные
window.USER_DATA = {
avatar: '$USER_AVATAR_URL$',
username: '$USERNAME$',
group: '$USER_GROUP$',
country: '$USER_COUNTRY$'
};
</script>

<script src="https://bro.usite.pro/js/pm-header-role02.js"></script>
<link rel="stylesheet" href="/.s/src/base.min.css" />
<link rel="stylesheet" href="/.s/src/layer7.min.css" />
<link rel="stylesheet" href="https://bro.usite.pro/css/bro-message01.css?v=2" media="all">

</head>

<body>

<!-- МЕНЮ -->
<div class="header">
<div class="header-inner">

<a href="/" class="logo">DOM <span class="logo-box">LinkUp</span></a>

<form class="vk-search" action="/search" method="get">
<span class="vk-search-icon"></span>
<input type="text" name="q" placeholder="Поиск" />
</form>

$GLOBAL_GLOCKE$

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

</div>

</div>
</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?>

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

</div>
</div>

<!-- КОНТЕНТ -->
<div class="container">
<!-- Левая колонка -->
<aside class="left-col">
$GLOBAL_MENU$
</aside>


<!-- Центральная колонка -->
<main class="center-col">
<div class="center-content" id="ajaxBody">
$BODY$
</div>
</main>

<!-- Правая колонка -->
<aside class="right-col">
<div class="right-block">
<div class="right-block-header">Действия</div>
<div class="right-block-content">
<!-- Сюда JavaScript добавит кнопки меню -->
</div>
</div>

<!-- Блок информации -->
<div class="right-block">
<div class="right-block-header">Информация</div>
<div class="right-block-content">
<!-- Сюда можно добавить информацию о пользователе -->

<div class="info-widget">

<!-- Статистика профиля -->
<div class="iw-stats">
<div class="iw-stat-row">
<div class="iw-stat-icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 2V3.5M13.5 2V3.5M3 7.5H17M4 4.5C4 3.67157 4.67157 3 5.5 3H14.5C15.3284 3 16 3.67157 16 4.5V15.5C16 16.3284 15.3284 17 14.5 17H5.5C4.67157 17 4 16.3284 4 15.5V4.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 10.5H13M7 13H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<span class="iw-stat-label">На сайте</span>
<span class="iw-stat-value">$USER_REG_DAYS$ дн.</span>
</div>

<div class="iw-stat-row">
<div class="iw-stat-icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 10H17M10 3C12.5 5.5 12.5 14.5 10 17C7.5 14.5 7.5 5.5 10 3Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<span class="iw-stat-label">Страна</span>
<span class="iw-stat-value">$USER_COUNTRY$</span>
</div>
<!-- Блок информации -->

</div>

</div>
</div>
</aside>
</div>
<script src="https://bro.usite.pro/js/hide-old-pm-form.js"></script>
<script src="https://bro.usite.pro/js/pm-message06.js?v=3"></script>

</body>
</html>


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

Да вот, сижу, делаю страницу со списком пользователей и обнаружил ошибку.
А ведь думал, что этот модуль уже работает нормально.
Но, как оказалось, и такое бывает.



Да, это, скорее всего, будет наш будущий форум, только он будет сильно переработан и адаптирован под uCoz. 13

Мурчанн

Признаюсь, не знаю почему, но глядя на звезды мне всегда хочется мечтать.
  • Страница 1 из 1
  • 1
Поиск: