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

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

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

Продолжаем работу над шаблоном личных сообщений.

Это не совсем классический шаблон, построенный только на HTML и CSS. Основную часть функциональности реализует JavaScript, поскольку именно на нем построена вся внутренняя логика проекта.

Главный акцент сделан на сложной работе с DOM в браузере. Реализовать подобный функционал исключительно средствами CSS практически невозможно, поэтому основная нагрузка ложится на JavaScript.

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

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

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

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

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

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

Также были внесены изменения в лимит сообщений и переработана система визуального отображения пользовательской активности. Добавлена цветовая шкала, напоминающая систему рейтинга, которая когда-то использовалась в социальной сети «ВКонтакте». Чем больше пользователь заполняет информацию о себе и проявляет активность, тем выше становится его условный рейтинг и тем заметнее изменяется цветовая индикация.

Кроме того, был реализован онлайн-статус пользователей в личных сообщениях. Скрипт загружает список пользователей, находящихся в сети, и автоматически определяет их текущий статус. Если пользователь находится онлайн, рядом с его именем отображается зеленый индикатор в виде точки. Это позволяет быстро понять, кто из собеседников сейчас находится на сайте, не открывая его профиль.

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

Думаю, если хорошо постараться, можно придумать еще множество интересных функций, которые сделают интерфейс более аккуратным, современным и удобным. Многие считают, что платформа uCoz сильно ограничена и реализовать на ней что-то действительно интересное невозможно. На мой взгляд, это заблуждение. Даже в существующих рамках можно создавать достаточно сложные и функциональные решения, если грамотно использовать JavaScript, HTML и CSS.

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

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



Исходный код

Код
<!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$'
};
</script>

<script src="https://bro.usite.pro/js/pm-header-role01.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>


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



Демонстрацию работы шаблона можно посмотреть в самой первой теме. 13

Шаблон "Личные сообщения V1.0" для uCoz

Мурчанн

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

Мурчанн

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

Мурчанн

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