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

<?if($USER_LOGGED_IN$)?>  
  <div id="one_pm"></div>  

  <script type="text/javascript">  
  var no_ava = '/pm/nophoto.png';  
  var this_mess_link = '';  

  function m_reload() {  
if ($('#one_pm').html() === '') {  
$.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-' + 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="pm-notification animated bounceInRight">  
<div class="pm-header">  
<span>Новое сообщение</span>  
<button class="pm-close" onclick="h_del();">×</button>  
</div>  
<div class="pm-body">  
<a href="${getAuthorHref}" class="pm-avatar">  
<img src="${urlAvatar || no_ava}" alt="avatar">  
</a>  
<div class="pm-content">  
<a href="${getAuthorHref}" class="pm-user">${userName}</a>  
<a href="${getLink}" class="pm-text">${getText}</a>  
</div>  
</div>  
<div id="hnp_sound">  
<audio src="/pm/gently.mp3" autoplay></audio>  
</div>  
</div>`;  

$('#one_pm').html(html);  
}  
});  
});  
});  
}  
  }  

  function h_del() {  
$('#one_pm').fadeOut(300, function() {  
$(this).html('');  
});  
$.get(this_mess_link);  
  }  

  m_reload();  
  setInterval(m_reload, 15000);  
  </script>  

  <style type="text/css">  
  /* Основной контейнер */  
  #one_pm {  
position: fixed;  
bottom: 20px;  
right: 20px;  
z-index: 9999;  
width: 320px;  
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;  
  }  

  /* Карточка уведомления */  
  .pm-notification {  
background: rgba(255, 255, 255, 0.95);  
backdrop-filter: blur(10px);  
border: 1px solid rgba(0,0,0,0.1);  
border-radius: 16px;  
box-shadow: 0 10px 25px rgba(0,0,0,0.15);  
padding: 15px;  
overflow: hidden;  
  }  

  /* Шапка */  
  .pm-header {  
display: flex;  
justify-content: space-between;  
align-items: center;  
margin-bottom: 10px;  
  }  

  .pm-header span {  
font-size: 11px;  
text-transform: uppercase;  
letter-spacing: 1px;  
color: #888;  
font-weight: 700;  
  }  

  .pm-close {  
background: #f0f2f5;  
border: none;  
width: 24px;  
height: 24px;  
border-radius: 50%;  
cursor: pointer;  
line-height: 20px;  
color: #555;  
transition: 0.2s;  
  }  

  .pm-close:hover {  
background: #ff4d4d;  
color: #fff;  
  }  

  /* Тело сообщения */  
  .pm-body {  
display: flex;  
gap: 12px;  
align-items: center;  
  }  

  .pm-avatar img {  
width: 50px;  
height: 50px;  
border-radius: 50%;  
object-fit: cover;  
border: 2px solid #007bff;  
  }  

  .pm-content {  
flex: 1;  
display: flex;  
flex-direction: column;  
overflow: hidden;  
  }  

  .pm-user {  
font-weight: 700;  
color: #333;  
text-decoration: none;  
font-size: 14px;  
margin-bottom: 2px;  
  }  

  .pm-text {  
font-size: 13px;  
color: #666;  
text-decoration: none;  
white-space: nowrap;  
overflow: hidden;  
text-overflow: ellipsis;  
  }  

  .pm-text:hover { color: #007bff; }  

  /* Анимация появления */  
  .animated { animation-duration: 0.5s; fill-mode: both; }  

  @keyframes bounceInRight {  
from { opacity: 0; transform: translate3d(100%, 0, 0); }  
to { opacity: 1; transform: translate3d(0, 0, 0); }  
  }  
  .bounceInRight { animation-name: bounceInRight; }  

  #hnp_sound { display: none; }  
  </style>  
  <?endif?>