Оповещение о личных сообщениях со звуковым уведомлением, ucoz

<?if($USER_LOGGED_IN$ || $UNREAD_PM$>1)?>
<div id="hs-pm-toast-root"></div>

<script type="text/javascript">
(function () {
  var no_ava = 'https://htmlstart.ucoz.net/site/dleimages/noavatar.png';
  var this_mess_link = '';
  var rootId = 'hs-pm-toast-root';

  function ensureRootOnBody() {
  var root = document.getElementById(rootId);
  if (!root) return null;
  if (root.parentNode !== document.body) {
  document.body.appendChild(root);
  }
  return root;
  }

  function m_reload() {
  var $root = $('#' + rootId);
  if (!$root.length) return;
  if ($root.html() !== '') return;

  ensureRootOnBody();

  $.get('/index/14?' + Math.random(), function (data) {
  $('b.unread', data).each(function (i, index) {
  var getLink = $(index).parent().attr('href');
  this_mess_link = getLink;
  var getText = $(index).parent().text();
  var getAuthorName = $(index).parent().parent().children('a').eq(1).text();
  var getAuthorHref = $(index).parent().parent().children('a').eq(1).attr('href');

  $.ajax({
  type: 'GET',
  url: '/api/index/8-0-' + String(getAuthorName || '').replace('-', '\~'),
  dataType: 'xml',
  success: function (xml) {
  var urlAvatar = $(xml).find('struct:first member:contains("USER_AVATAR")').find('string').text();
  var userName = $(xml).find('struct:first member:contains("USER_NAME")').find('string').text();

  var html =
  '<div class="hs-pm-toast hs-pm-animated hs-pm-in">' +
  '<div class="hs-pm-toast-head">' +
  '<span class="hs-pm-toast-label">Новое сообщение</span>' +
  '<button type="button" class="hs-pm-toast-close" onclick="hsPmToastClose();" aria-label="Закрыть">×</button>' +
  '</div>' +
  '<div class="hs-pm-toast-body">' +
  '<a href="' + (getAuthorHref || '#') + '" class="hs-pm-toast-ava">' +
  '<img src="' + (urlAvatar || no_ava) + '" alt="">' +
  '</a>' +
  '<div class="hs-pm-toast-content">' +
  (userName
  ? '<a href="' + (getAuthorHref || '#') + '" class="hs-pm-toast-user">' + userName + '</a>'
  : '') +
  '<a href="' + (getLink || '#') + '" class="hs-pm-toast-text">' + (getText || '') + '</a>' +
  '</div>' +
  '</div>' +
  '<div class="hs-pm-toast-sound" aria-hidden="true">' +
  '<audio src="https://htmlstart.ucoz.net/gently.mp3" autoplay></audio>' +
  '</div>' +
  '</div>';

  ensureRootOnBody();
  $root.html(html).show();
  }
  });
  });
  });
  }

  window.hsPmToastClose = function () {
  var $root = $('#' + rootId);
  $root.fadeOut(300, function () {
  $root.html('').show();
  });
  if (this_mess_link) {
  $.get(this_mess_link);
  }
  };

  $(function () {
  ensureRootOnBody();
  m_reload();
  setInterval(m_reload, 15000);
  });
})();
</script>

<style type="text/css">
/* =========================================================
  Htmlstart — toast ЛС (уникальные классы hs-pm-*)
  ========================================================= */

#hs-pm-toast-root{
  position:fixed !important;
  right:24px !important;
  bottom:24px !important;
  left:auto !important;
  top:auto !important;
  z-index:99999 !important;
  width:340px;
  max-width:calc(100vw - 32px);
  margin:0 !important;
  padding:0 !important;
  pointer-events:none;
  font-family:var(--sans, 'Inter', system-ui, sans-serif);
  transform:none !important;
  inset:auto 24px 24px auto;
}

#hs-pm-toast-root:empty{
  display:none !important;
}

#hs-pm-toast-root .hs-pm-toast{
  pointer-events:auto;
  background:var(--panel, #11151F);
  border:1px solid var(--line, #242B3D);
  border-radius:var(--radius, 14px);
  box-shadow:
  0 24px 50px -18px rgba(0,0,0,.65),
  0 0 0 1px rgba(111,255,196,.06);
  overflow:hidden;
  color:var(--text, #E7ECF3);
}

html[data-theme="light"] #hs-pm-toast-root .hs-pm-toast{
  background:var(--panel, #FFFFFF);
  border-color:var(--line, #E1E3ED);
  box-shadow:
  0 20px 40px -16px rgba(0,0,0,.14),
  0 0 0 1px rgba(15,169,104,.08);
}

.hs-pm-toast-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  background:var(--panel-2, #161B29);
  border-bottom:1px solid var(--line, #242B3D);
}

html[data-theme="light"] .hs-pm-toast-head{
  background:var(--panel-2, #F1F2F8);
}

.hs-pm-toast-label{
  font-family:var(--mono, 'JetBrains Mono', monospace);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--mint, #6FFFC4);
}

html[data-theme="light"] .hs-pm-toast-label{
  color:var(--mint, #0FA968);
}

.hs-pm-toast-label::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:8px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 8px currentColor;
  vertical-align:middle;
}

.hs-pm-toast-close{
  width:26px;
  height:26px;
  margin:0;
  padding:0;
  border:1px solid var(--line, #242B3D);
  border-radius:6px;
  background:transparent;
  color:var(--muted, #8892A6);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}

.hs-pm-toast-close:hover{
  border-color:var(--pink, #FF7FB2);
  color:var(--pink, #FF7FB2);
  background:rgba(255,127,178,.08);
}

.hs-pm-toast-body{
  display:flex;
  gap:14px;
  align-items:center;
  padding:16px 14px 18px;
}

.hs-pm-toast-ava{
  flex-shrink:0;
  display:block;
  line-height:0;
  text-decoration:none;
}

.hs-pm-toast-ava img{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  border:1px solid var(--line, #242B3D);
  background:var(--panel-2, #161B29);
}

.hs-pm-toast-content{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow:hidden;
}

.hs-pm-toast-user{
  font-family:var(--mono, 'JetBrains Mono', monospace);
  font-size:13.5px;
  font-weight:700;
  color:var(--text, #E7ECF3);
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html[data-theme="light"] .hs-pm-toast-user{
  color:var(--text, #161922);
}

.hs-pm-toast-user:hover{
  color:var(--mint, #6FFFC4);
}

.hs-pm-toast-text{
  font-size:13px;
  line-height:1.4;
  color:var(--muted, #8892A6);
  text-decoration:none;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:normal;
}

.hs-pm-toast-text:hover{
  color:var(--violet, #B39BFF);
}

.hs-pm-toast-sound{
  display:none !important;
}

.hs-pm-animated{
  animation-duration:.4s;
  animation-fill-mode:both;
}

@keyframes hs-pm-in-kf{
  from{ opacity:0; transform:translate3d(24px, 10px, 0); }
  to{ opacity:1; transform:translate3d(0, 0, 0); }
}

.hs-pm-in{
  animation-name:hs-pm-in-kf;
}

/* выше кнопки ленты/чата */
body:has(.feed-toggle) #hs-pm-toast-root,
body:has(.chat-toggle) #hs-pm-toast-root{
  bottom:92px !important;
}

@media (max-width:480px){
  #hs-pm-toast-root{
  right:12px !important;
  left:12px !important;
  bottom:16px !important;
  width:auto;
  inset:auto 12px 16px 12px;
  }
  body:has(.feed-toggle) #hs-pm-toast-root,
  body:has(.chat-toggle) #hs-pm-toast-root{
  bottom:80px !important;
  }
}
</style>
<?endif?>