diff --git a/shine-UI/js/pages/network-view.js b/shine-UI/js/pages/network-view.js
index 8b840bc..822687c 100644
--- a/shine-UI/js/pages/network-view.js
+++ b/shine-UI/js/pages/network-view.js
@@ -92,7 +92,14 @@ function spread(count, start, end) {
function buildNodeElement({ login, kind = 'friend', isCenter = false, mark = null }) {
const node = document.createElement('button');
node.type = 'button';
- node.className = `node ${isCenter ? 'center' : ''} ${kind === 'relative' ? 'is-relative' : 'is-friend'}`.trim();
+ const classes = [
+ 'node',
+ isCenter ? 'center' : '',
+ kind === 'relative' ? 'is-relative' : 'is-friend',
+ mark?.shine ? 'is-shine' : '',
+ mark?.official ? 'is-official' : '',
+ ].filter(Boolean);
+ node.className = classes.join(' ');
node.dataset.nodeLogin = login;
const metaParts = [];
@@ -101,7 +108,9 @@ function buildNodeElement({ login, kind = 'friend', isCenter = false, mark = nul
const metaText = metaParts.join(', ');
node.title = metaText ? `${login}\n${metaText}` : login;
+ const officialBadge = mark?.official ? 'ОФ' : '';
node.innerHTML = `
+ ${officialBadge}
${(login[0] || '?').toUpperCase()}
${login}
`;
diff --git a/shine-UI/styles/components.css b/shine-UI/styles/components.css
index a6f4254..380c46b 100644
--- a/shine-UI/styles/components.css
+++ b/shine-UI/styles/components.css
@@ -951,9 +951,11 @@ textarea.input {
text-align: center;
color: inherit;
cursor: pointer;
+ z-index: 1;
}
.node-dot {
+ position: relative;
width: 52px;
height: 52px;
margin: 0 auto 4px;
@@ -966,6 +968,41 @@ textarea.input {
box-shadow: 0 8px 16px rgba(4, 8, 15, 0.35);
}
+.node-badge-official {
+ position: absolute;
+ left: 50%;
+ top: -8px;
+ transform: translateX(-50%);
+ min-width: 26px;
+ height: 18px;
+ padding: 0 6px;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 214, 130, 0.95);
+ background: linear-gradient(180deg, rgba(255, 219, 145, 0.98), rgba(232, 165, 64, 0.98));
+ color: #3a2003;
+ font-size: 10px;
+ line-height: 16px;
+ font-weight: 800;
+ letter-spacing: 0.3px;
+ text-transform: uppercase;
+ box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
+ z-index: 2;
+}
+
+.node.is-shine .node-dot::before {
+ content: '';
+ position: absolute;
+ inset: -7px;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(130, 235, 255, 0.45) 0%, rgba(130, 235, 255, 0.18) 45%, rgba(130, 235, 255, 0) 72%);
+ filter: blur(1px);
+ z-index: -1;
+}
+
+.node.is-shine .node-dot {
+ box-shadow: 0 0 0 2px rgba(143, 231, 255, 0.38), 0 0 16px rgba(102, 220, 255, 0.38), 0 8px 16px rgba(4, 8, 15, 0.35);
+}
+
.node.is-friend .node-dot {
background: linear-gradient(165deg, #2f4f80, #2a3f62);
}