Сегодня я хочу поделиться с вами небольшим, но очень эффективным решением для тех, кто администрирует сайты на платформе uCoz. Это простое улучшение, которое не только «оживляет» интерфейс, но и работает на самое главное — на доверие вашей аудитории.
Часто посетители задаются вопросом: «А есть ли кто живой на этом сайте?».
Мы решим эту проблему с помощью автоматического индикатора статуса.
Когда вы (или назначенный модератор) находитесь на сайте, в углу экрана появляется стильное, анимированное уведомление. Это создает эффект присутствия и показывает, что ресурс активен и готов к взаимодействию.
Я подготовил для вас готовую сборку из HTML, CSS и чистого JavaScript (используя jQuery, который уже есть на uCoz). Вам нужно только скопировать код и сделать минимальные настройки.
💡 Преимущества этого скрипта:
Автоматическая проверка: Скрипт сам запрашивает статус указанного пользователя и решает, что показать.
Приятный UX/UI: Уведомление плавно вылетает сверху, а онлайн-статус имеет красивую пульсирующую анимацию, привлекая внимание, но не раздражая.
Современный CSS3 дизайн: Градиенты, тени, закругленные углы и модный эффект backdrop-filter (размытие фона).
«Легкий» вес: Код оптимизирован и не замедлит загрузку вашего сайта.
🔥 Инструкция по установке
Весь процесс займет у вас не более 5 минут.
Шаг 1. Размещение кода в шаблоне
Вам необходимо вставить этот блок кода в шаблон вашего сайта, желательно перед закрывающим тегом </body>. Это гарантирует, что индикатор будет отображаться на всех страницах.
Код
<div class="admin-status-indicator">
<div class="status-badge status-online">Администратор онлайн</div>
<div class="status-badge status-offline">Администратор офлайн</div>
</div>
<style>
/* Стили индикатора (CSS) */
.admin-status-indicator {
position: fixed;
top: 20px; /* Отступ сверху */
left: 20px; /* Отступ слева */
z-index: 9999; /* Чтобы быть поверх всего */
}
.status-badge {
padding: 12px 24px;
border-radius: 25px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
font-size: 14px;
text-align: center;
color: white;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transform: translateY(-100px); /* Начальное состояние - скрыто за экраном */
opacity: 0;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
display: none; /* Изначально скрыт */
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Стили для Онлайн */
.status-online {
background: linear-gradient(135deg, #4CAF50, #2E7D32);
box-shadow: 0 4px 20px rgba(76, 175, 80, 0.4);
}
/* Стили для Офлайн */
.status-offline {
background: linear-gradient(135deg, #E53935, #B71C1C);
box-shadow: 0 4px 20px rgba(229, 57, 53, 0.4);
}
/* Класс активации */
.status-badge.visible {
transform: translateY(0);
opacity: 1;
display: block;
}
/* Анимация пульсации для онлайн-статуса */
.status-online.pulsing::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid #4CAF50;
border-radius: 27px;
animation: pulse_status 2s infinite;
}
@keyframes pulse_status {
0% {
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
}
}
</style>
<script type="text/javascript">
/* Логика проверки статуса (JavaScript/jQuery) */
$(document).ready(function() {
// --- НАСТРОЙКИ ---
const adminName = 'jaguar37rus'; // Укажите здесь НИК администратора uCoz
const hideTimeout = 8000; // Время отображения в миллисекундах (0 - не скрывать)
// -----------------
$.get('/api/index/8-0-' + adminName, function(response) {
// Защита от самопроверки (если код просматривает сам админ)
if (adminName === '$USERNAME$') {
return;
}
const status = $(response).find('member:contains("USER_STATUS") string').text();
const isOnline = status === 'Online';
const badge = isOnline
? document.querySelector('.status-online')
: document.querySelector('.status-offline');
// Включаем нужный бейдж
badge.classList.add('visible');
if (isOnline) {
badge.classList.add('pulsing');
}
// Если установлено время скрытия, запускаем таймер
if (hideTimeout > 0) {
setTimeout(() => {
badge.classList.remove('visible', 'pulsing');
}, hideTimeout);
}
});
});
</script>
<div class="status-badge status-online">Администратор онлайн</div>
<div class="status-badge status-offline">Администратор офлайн</div>
</div>
<style>
/* Стили индикатора (CSS) */
.admin-status-indicator {
position: fixed;
top: 20px; /* Отступ сверху */
left: 20px; /* Отступ слева */
z-index: 9999; /* Чтобы быть поверх всего */
}
.status-badge {
padding: 12px 24px;
border-radius: 25px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
font-size: 14px;
text-align: center;
color: white;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transform: translateY(-100px); /* Начальное состояние - скрыто за экраном */
opacity: 0;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
display: none; /* Изначально скрыт */
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Стили для Онлайн */
.status-online {
background: linear-gradient(135deg, #4CAF50, #2E7D32);
box-shadow: 0 4px 20px rgba(76, 175, 80, 0.4);
}
/* Стили для Офлайн */
.status-offline {
background: linear-gradient(135deg, #E53935, #B71C1C);
box-shadow: 0 4px 20px rgba(229, 57, 53, 0.4);
}
/* Класс активации */
.status-badge.visible {
transform: translateY(0);
opacity: 1;
display: block;
}
/* Анимация пульсации для онлайн-статуса */
.status-online.pulsing::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid #4CAF50;
border-radius: 27px;
animation: pulse_status 2s infinite;
}
@keyframes pulse_status {
0% {
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
}
}
</style>
<script type="text/javascript">
/* Логика проверки статуса (JavaScript/jQuery) */
$(document).ready(function() {
// --- НАСТРОЙКИ ---
const adminName = 'jaguar37rus'; // Укажите здесь НИК администратора uCoz
const hideTimeout = 8000; // Время отображения в миллисекундах (0 - не скрывать)
// -----------------
$.get('/api/index/8-0-' + adminName, function(response) {
// Защита от самопроверки (если код просматривает сам админ)
if (adminName === '$USERNAME$') {
return;
}
const status = $(response).find('member:contains("USER_STATUS") string').text();
const isOnline = status === 'Online';
const badge = isOnline
? document.querySelector('.status-online')
: document.querySelector('.status-offline');
// Включаем нужный бейдж
badge.classList.add('visible');
if (isOnline) {
badge.classList.add('pulsing');
}
// Если установлено время скрытия, запускаем таймер
if (hideTimeout > 0) {
setTimeout(() => {
badge.classList.remove('visible', 'pulsing');
}, hideTimeout);
}
});
});
</script>
Шаг 2. Персонализация
Самый важный шаг. Найдите в коде JavaScript (в самом конце) строку:
const adminName = 'jaguar37rus'; // Укажите здесь НИК администратора uCoz
И замените 'jaguar37rus' на ваш точный логин администратора на сайте uCoz, статус которого вы хотите отслеживать. Оставьте кавычки!
По желанию вы можете изменить время, через которое уведомление исчезнет, поменяв значение 8000 (8 секунд) в переменной hideTimeout. Если вы установите 0, уведомление будет висеть постоянно.
На этом всё! Теперь у вас есть полностью рабочий, современный и анимированный индикатор, который точно оценит ваша аудитория. Пишите в комментариях, если у вас возникли вопросы по установке!
