<style>
/* =========================================================
STATUS BUTTON
========================================================= */
.tooltiplink {
display: inline-flex !important;
align-items: center;
gap: 4px;
position: relative;
margin-left: 5px;
padding: 4px 7px;
background: #fff;
border: 1px solid #dce2e8;
border-radius: 6px;
box-shadow: 0 1px 4px rgba(0,0,0,.06);
color: #252c35 !important;
font-size: 10px;
font-weight: 700;
line-height: 15px;
text-decoration: none !important;
cursor: pointer;
transition: .18s ease;
}
.tooltiplink:hover {
border-color: #ff9d9d;
box-shadow:
0 2px 6px rgba(0,0,0,.08),
0 2px 5px rgba(255,0,0,.06);
transform: translateY(-1px);
}
.tooltiplink i {
color: #222;
font-size: 10px;
}
/* =========================================================
RESULT
========================================================= */
#iuser {
display: inline-block;
position: relative;
margin-left: 7px;
vertical-align: middle;
}
#iuser:empty {
display: none !important;
}
/* =========================================================
COMPACT FUTURISTIC CARD
დაახლოებით შენი სქრინის ზომა
========================================================= */
.user-tech-card {
position: relative;
display: inline-flex;
align-items: center;
height: 34px;
box-sizing: border-box;
padding:
2px
30px
3px
5px;
background:
linear-gradient(
120deg,
#ffffff 0%,
#fafbfc 55%,
#fff9f9 100%
);
border: 1px solid #dce2e8;
border-radius: 7px;
box-shadow:
0 2px 6px rgba(0,0,0,.10),
0 2px 5px rgba(255,0,0,.05);
overflow: hidden;
white-space: nowrap;
animation: techStatusOpen .20s ease;
}
@keyframes techStatusOpen {
from {
opacity: 0;
transform: translateY(2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
BOTTOM TECH LINE
========================================================= */
.user-tech-card::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background:
linear-gradient(
90deg,
#ff1717 0%,
#ff1717 18%,
transparent 18%,
transparent 20%,
#ff1717 20%,
#ff1717 37%,
transparent 37%,
transparent 39%,
#ff1717 39%,
#ff1717 100%
);
box-shadow:
0 1px 3px rgba(255,0,0,.20);
}
/* =========================================================
USER
========================================================= */
.tech-user {
display: flex;
align-items: center;
position: relative;
padding: 1px 8px 1px 0;
}
/* =========================================================
AVATAR WRAP
========================================================= */
.tech-avatar-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 27px;
width: 27px;
height: 29px;
margin-right: 6px;
}
/* RED OUTER HEXAGON */
.tech-avatar-ring {
position: absolute;
inset: 0;
background:
linear-gradient(
145deg,
#ff3232,
#a9000d
);
clip-path: polygon(
50% 0%,
93% 23%,
93% 77%,
50% 100%,
7% 77%,
7% 23%
);
filter:
drop-shadow(
0 1px 2px rgba(255,0,0,.20)
);
}
/* =========================================================
AVATAR
========================================================= */
.tech-avatar {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 23px;
height: 25px;
background:
linear-gradient(
145deg,
#485968,
#17212c
);
clip-path: polygon(
50% 0%,
93% 23%,
93% 77%,
50% 100%,
7% 77%,
7% 23%
);
color: #fff;
font-size: 9px;
}
.tech-avatar i {
color: #fff;
}
/* პატარა ONLINE/OFFLINE წერტილი ავატარზე */
.tech-avatar-state {
position: absolute;
right: -1px;
bottom: 2px;
z-index: 5;
width: 6px;
height: 6px;
border: 2px solid #fff;
border-radius: 50%;
box-sizing: content-box;
}
.user-tech-card.is-online .tech-avatar-state {
background: #20ae4b;
box-shadow:
0 0 4px rgba(32,174,75,.45);
}
.user-tech-card.is-offline .tech-avatar-state {
background: #f21c26;
box-shadow:
0 0 4px rgba(242,28,38,.40);
}
/* =========================================================
USERNAME
========================================================= */
.tech-user-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.tech-user-label {
color: #a2aab4;
font-size: 5px;
font-weight: 900;
letter-spacing: 1.6px;
line-height: 6px;
}
.tech-username {
position: relative;
display: inline-block;
max-width: 95px;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 2px;
color: #152132;
font-size: 10px;
font-weight: 900;
line-height: 13px;
}
.tech-username::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background:
linear-gradient(
90deg,
#ff1717 0 35%,
#dce1e6 35% 100%
);
}
/* =========================================================
DIVIDER
========================================================= */
.tech-divider {
flex: 0 0 1px;
width: 1px;
height: 20px;
margin: 0 8px;
background:
linear-gradient(
to bottom,
transparent,
#c8ced5 20%,
#c8ced5 80%,
transparent
);
}
/* =========================================================
STATUS
========================================================= */
.tech-status {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 58px;
}
/* STATUS BADGE */
.tech-status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 49px;
box-sizing: border-box;
padding: 2px 6px;
border-radius: 10px;
font-size: 8px;
font-weight: 900;
line-height: 10px;
}
/* OFFLINE */
.tech-status-badge.offline {
color: #e81720;
background: #fff0f1;
border: 1px solid #ffd0d3;
}
.tech-status-badge.offline::before {
content: "";
width: 5px;
height: 5px;
margin-right: 4px;
background: #ef1822;
border-radius: 50%;
box-shadow:
0 0 0 2px rgba(239,24,34,.08);
}
/* ONLINE */
.tech-status-badge.online {
color: #16843a;
background: #effbf3;
border: 1px solid #ccebd5;
}
.tech-status-badge.online::before {
content: "";
width: 5px;
height: 5px;
margin-right: 4px;
background: #1daa49;
border-radius: 50%;
box-shadow:
0 0 0 2px rgba(29,170,73,.08);
}
/* პატარა ONLINE / OFFLINE */
.tech-status-small {
margin-top: 1px;
color: #a0a8b2;
font-size: 5px;
font-weight: 900;
letter-spacing: 1.5px;
line-height: 6px;
}
/* =========================================================
LAST SEEN
========================================================= */
.tech-lastseen {
display: flex;
align-items: center;
padding-right: 4px;
}
/* CLOCK */
.tech-clock {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 23px;
width: 23px;
height: 23px;
margin-right: 6px;
background:
linear-gradient(
145deg,
#fff5f5,
#ffe3e3
);
border: 1px solid #ffd0d0;
border-radius: 50%;
color: #ed1717;
font-size: 9px;
}
.tech-clock i {
color: #ed1717;
}
/* LAST SEEN TEXT */
.tech-lastseen-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.tech-lastseen-label {
color: #9aa2ac;
font-size: 7px;
font-weight: 700;
line-height: 9px;
}
.tech-lastseen-time {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
color: #142033;
font-size: 9px;
font-weight: 900;
line-height: 11px;
}
/* =========================================================
RIGHT RED TECH EDGE
========================================================= */
.tech-edge {
position: absolute;
right: -12px;
top: 0;
display: flex;
align-items: center;
justify-content: center;
width: 33px;
height: 100%;
background:
linear-gradient(
145deg,
#ff2525,
#8d0711
);
transform: skewX(-17deg);
box-shadow:
-3px 0 6px rgba(255,0,0,.10);
}
.tech-edge i {
margin-left: -5px;
color: rgba(255,255,255,.85);
font-size: 7px;
transform: skewX(17deg);
}
/* ONLINE-ზე მარჯვენა კიდეც მწვანე */
.user-tech-card.is-online .tech-edge {
background:
linear-gradient(
145deg,
#24b955,
#08732b
);
box-shadow:
-3px 0 6px rgba(20,160,65,.10);
}
/* ONLINE-ზე ქვედა ხაზი */
.user-tech-card.is-online::after {
background:
linear-gradient(
90deg,
#20aa4b 0%,
#20aa4b 18%,
transparent 18%,
transparent 20%,
#20aa4b 20%,
#20aa4b 37%,
transparent 37%,
transparent 39%,
#20aa4b 39%,
#20aa4b 100%
);
box-shadow:
0 1px 3px rgba(20,160,65,.18);
}
/* ONLINE AVATAR RING */
.user-tech-card.is-online .tech-avatar-ring {
background:
linear-gradient(
145deg,
#2ac15b,
#08762c
);
}
/* =========================================================
LOADING
========================================================= */
.tech-loading {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 8px;
background: #fff;
border: 1px solid #dfe4e9;
border-bottom: 2px solid #ff1717;
border-radius: 6px;
color: #777;
font-size: 9px;
box-shadow:
0 2px 5px rgba(0,0,0,.06);
}
.tech-loading i {
color: #ff1717;
}
/* =========================================================
ERROR
========================================================= */
.tech-error {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 8px;
background: #fff3f3;
border: 1px solid #ffd2d2;
border-radius: 6px;
color: #d91818;
font-size: 9px;
font-weight: 700;
}
/* =========================================================
TOOLTIP
========================================================= */
.tooltip {
position: absolute;
padding: 5px 8px;
background: #20242a;
border-radius: 5px;
color: #fff;
font-size: 9px;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 999999;
box-shadow:
0 3px 8px rgba(0,0,0,.20);
transition: .15s ease;
}
.tooltip.show {
opacity: 1;
visibility: visible;
}
.tooltip::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
margin-left: -4px;
border-width: 4px;
border-style: solid;
border-color:
#20242a
transparent
transparent
transparent;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
#iuser {
display: block;
margin-left: 0;
margin-top: 6px;
}
.user-tech-card {
max-width: 100%;
height: 34px;
}
.tech-lastseen-time {
max-width: 130px;
}
}
</style>
<script>
(function () {
'use strict';
/* =====================================================
INIT
===================================================== */
function initUserStatus() {
if (typeof window.jQuery === 'undefined') {
return false;
}
var $ = window.jQuery;
if (!$('#PMtoUser').length) {
return false;
}
if ($('#userStatusButton').length) {
return true;
}
/* BUTTON + RESULT */
$('#PMtoUser').after(
'<a href="javascript:void(0);" ' +
'id="userStatusButton" ' +
'class="tooltiplink" ' +
'data-tooltip="სტატუსის ნახვა">' +
'<i class="fa-solid fa-user-check"></i>' +
'<span>სტატუსის ნახვა</span>' +
'</a>' +
'<span id="iuser"></span>'
);
/* CLICK */
$(document)
.off(
'click.userStatus',
'#userStatusButton'
)
.on(
'click.userStatus',
'#userStatusButton',
function (e) {
e.preventDefault();
window.userin();
return false;
}
);
/* TOOLTIP */
if (!$('#userStatusTooltip').length) {
$('body').append(
'<div ' +
'id="userStatusTooltip" ' +
'class="tooltip">' +
'</div>'
);
}
$(document)
.off(
'mouseenter.userStatus',
'#userStatusButton'
)
.on(
'mouseenter.userStatus',
'#userStatusButton',
function () {
var tooltip =
$('#userStatusTooltip');
tooltip
.text(
$(this).attr('data-tooltip')
)
.addClass('show');
var offset =
$(this).offset();
var left =
offset.left +
($(this).outerWidth() / 2) -
(tooltip.outerWidth() / 2);
var top =
offset.top -
tooltip.outerHeight() -
7;
tooltip.css({
left: left + 'px',
top: top + 'px'
});
}
);
$(document)
.off(
'mouseleave.userStatus',
'#userStatusButton'
)
.on(
'mouseleave.userStatus',
'#userStatusButton',
function () {
$('#userStatusTooltip')
.removeClass('show');
}
);
return true;
}
/* =====================================================
USER STATUS
===================================================== */
window.userin = function () {
if (typeof window.jQuery === 'undefined') {
return;
}
var $ = window.jQuery;
var pmuser =
$.trim(
$('#PMtoUser').val() || ''
);
if (!pmuser) {
$('#iuser').html(
'<span class="tech-error">' +
'<i class="fa-solid fa-circle-exclamation"></i>' +
'მომხმარებელი მიუთითე' +
'</span>'
);
return;
}
/* LOADING */
$('#iuser').html(
'<span class="tech-loading">' +
'<i class="fa-solid fa-spinner fa-spin"></i>' +
'იტვირთება...' +
'</span>'
);
/* UCOZ PROFILE URL */
var profileUrl =
'/index/8-0-' + pmuser;
/* =================================================
AJAX
================================================= */
$.ajax({
url: profileUrl,
type: 'GET',
cache: false,
dataType: 'html',
success: function (data) {
/* =========================================
HTML
========================================= */
var page =
$('<div></div>').html(data);
var statusElement =
page.find('#ouser').first();
/* =========================================
FALLBACK PARSE
========================================= */
if (!statusElement.length) {
try {
var parsed =
$.parseHTML(
data,
document,
true
);
var parsedPage =
$('<div></div>')
.append(parsed);
statusElement =
parsedPage
.find('#ouser')
.first();
if (statusElement.length) {
page = parsedPage;
}
} catch (e) {}
}
/* =========================================
STATUS არ მოიძებნა
========================================= */
if (!statusElement.length) {
showStatusError();
return;
}
/* =========================================
STATUS TEXT / HTML
========================================= */
var statusText =
$.trim(
statusElement.text() || ''
).toLowerCase();
var statusHtml =
(
statusElement.html() || ''
).toLowerCase();
var statusOuterHtml =
$('<div></div>')
.append(
statusElement.clone()
)
.html()
.toLowerCase();
/* =========================================
LAST LOGIN
========================================= */
var lastlogin = '';
var lastLoginElement =
page
.find('#lastlogin')
.first();
if (lastLoginElement.length) {
lastlogin =
$.trim(
lastLoginElement.text() || ''
);
}
/* =========================================
ONLINE / OFFLINE
========================================= */
var isOnline = false;
var hasOffline =
statusText.indexOf('გასულია') !== -1 ||
statusText.indexOf('offline') !== -1 ||
statusText.indexOf('არ არის საიტზე') !== -1 ||
statusText.indexOf('не в сети') !== -1;
var hasOnlineText =
statusText.indexOf('საიტზეა') !== -1 ||
statusText.indexOf('online') !== -1 ||
statusText.indexOf('в сети') !== -1;
var hasOnlineHtml =
statusHtml.indexOf('online') !== -1 ||
statusOuterHtml.indexOf('online') !== -1 ||
statusOuterHtml.indexOf('საიტზეა') !== -1;
if (
!hasOffline &&
(
hasOnlineText ||
hasOnlineHtml
)
) {
isOnline = true;
}
/* =========================================
IMAGE STATUS CHECK
========================================= */
statusElement
.find('img')
.each(function () {
var img =
$(this);
var src =
(
img.attr('src') || ''
).toLowerCase();
var alt =
(
img.attr('alt') || ''
).toLowerCase();
var title =
(
img.attr('title') || ''
).toLowerCase();
/* OFFLINE */
if (
src.indexOf('offline') !== -1 ||
alt.indexOf('offline') !== -1 ||
title.indexOf('offline') !== -1 ||
alt.indexOf('გასულია') !== -1 ||
title.indexOf('გასულია') !== -1
) {
isOnline = false;
return false;
}
/* ONLINE */
if (
src.indexOf('online') !== -1 ||
alt.indexOf('online') !== -1 ||
title.indexOf('online') !== -1 ||
alt.indexOf('საიტზეა') !== -1 ||
title.indexOf('საიტზეა') !== -1
) {
isOnline = true;
}
});
/* =========================================
CARD
========================================= */
var html =
'<span class="user-tech-card ' +
(
isOnline
? 'is-online'
: 'is-offline'
) +
'">' +
/* =================================
AVATAR + USER
================================= */
'<span class="tech-user">' +
'<span class="tech-avatar-wrap">' +
'<span class="tech-avatar-ring"></span>' +
'<span class="tech-avatar">' +
'<i class="fa-solid fa-user"></i>' +
'</span>' +
'<span class="tech-avatar-state"></span>' +
'</span>' +
'<span class="tech-user-info">' +
'<span class="tech-user-label">' +
'USER' +
'</span>' +
'<span class="tech-username">' +
escapeUserStatusHtml(pmuser) +
'</span>' +
'</span>' +
'</span>' +
/* =================================
DIVIDER
================================= */
'<span class="tech-divider"></span>' +
/* =================================
STATUS
================================= */
'<span class="tech-status">' +
'<span class="tech-status-badge ' +
(
isOnline
? 'online'
: 'offline'
) +
'">' +
(
isOnline
? 'საიტზეა'
: 'გასულია'
) +
'</span>' +
'<span class="tech-status-small">' +
(
isOnline
? 'ONLINE'
: 'OFFLINE'
) +
'</span>' +
'</span>';
/* =========================================
OFFLINE = LAST LOGIN
========================================= */
if (!isOnline) {
html +=
'<span class="tech-divider"></span>' +
'<span class="tech-lastseen">' +
'<span class="tech-clock">' +
'<i class="fa-regular fa-clock"></i>' +
'</span>' +
'<span class="tech-lastseen-info">' +
'<span class="tech-lastseen-label">' +
'ბოლოს იყო საიტზე:' +
'</span>' +
'<span class="tech-lastseen-time">' +
(
lastlogin
? escapeUserStatusHtml(lastlogin)
: 'უცნობია'
) +
'</span>' +
'</span>' +
'</span>';
}
/* =========================================
RIGHT TECH EDGE
========================================= */
html +=
'<span class="tech-edge">' +
'<i class="fa-solid fa-chevron-right"></i>' +
'</span>' +
'</span>';
/* =========================================
OUTPUT
========================================= */
$('#iuser')
.stop(true, true)
.hide()
.html(html)
.fadeIn(150);
},
error: function () {
showStatusError();
}
});
};
/* =====================================================
ERROR
===================================================== */
window.showStatusError = function () {
if (typeof window.jQuery === 'undefined') {
return;
}
window.jQuery('#iuser').html(
'<span class="tech-error">' +
'<i class="fa-solid fa-circle-exclamation"></i>' +
'არ არის მონაცემები' +
'</span>'
);
};
/* =====================================================
ESCAPE HTML
===================================================== */
window.escapeUserStatusHtml = function (text) {
if (typeof window.jQuery === 'undefined') {
return text;
}
return window.jQuery('<div></div>')
.text(text)
.html();
};
/* =====================================================
START
===================================================== */
function startUserStatus() {
initUserStatus();
}
if (document.readyState === 'loading') {
document.addEventListener(
'DOMContentLoaded',
startUserStatus
);
} else {
startUserStatus();
}
/* WINDOW LOAD */
window.addEventListener(
'load',
function () {
initUserStatus();
}
);
/* =====================================================
RETRY — uCoz გვიან თუ ტვირთავს
===================================================== */
var statusTries = 0;
var statusTimer =
setInterval(function () {
statusTries++;
if (
initUserStatus() ||
statusTries >= 40
) {
clearInterval(
statusTimer
);
}
}, 250);
/* =====================================================
MUTATION OBSERVER
===================================================== */
function startObserver() {
if (
!window.MutationObserver ||
!document.body
) {
return;
}
var observer =
new MutationObserver(function () {
initUserStatus();
});
observer.observe(
document.body,
{
childList: true,
subtree: true
}
);
}
if (document.body) {
startObserver();
} else {
document.addEventListener(
'DOMContentLoaded',
startObserver
);
}
})();
</script>
