Музыкальная реклама окно для uCoz

Разумеется, эту функцию вы можете разместить в том месте вашего сайта, где хотите, чтобы она отображалась. Например, эта функция будет показываться в виде рекламы внизу экрана с правой стороны на 5 секунд, и при нажатии на неё пользователь будет перенаправлен на страницу песни, которую вы хотите рекламировать. Главное — не забыть заменить ссылки в коде на ссылки вашего собственного веб-сайта.

CSS

Код:

<style>
/* Общие стили всплывающего окна */
.ucoz-popup {
 position: fixed;
 bottom: 20px;
 left: 20px;
 background: rgba(0,0,0,0.6);
 backdrop-filter: blur(8px);
 color: white;
 border-radius: 20px;
 display: flex;
 align-items: center;
 padding: 12px;
 font-family: sans-serif;
 max-width: 360px;
 z-index: 9999;
 opacity: 0;
 transform: translateY(30px);
 transition: all 0.6s ease;
 box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* При отображении */
.ucoz-popup.show {
 opacity: 1;
 transform: translateY(0);
}

/* Изображение (аватар) */
.ucoz-popup img {
 width: 65px;
 height: 65px;
 border-radius: 50%;
 border: 3px solid magenta;
 object-fit: cover;
 margin-right: 12px;
 cursor: pointer;
 animation: pulse 1.5s infinite;
}

/* Анимация пульсации аватара */
@keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.05); }
 100% { transform: scale(1); }
}

/* Тексты */
.ucoz-popup-content {
 flex: 1;
}

.ucoz-popup-title {
 font-weight: bold;
 font-size: 17px;
 margin-bottom: 5px;
}

.ucoz-popup-text {
 font-size: 14px;
 opacity: 0.9;
 margin-bottom: 8px;
}

/* Контейнер кнопок */
.ucoz-popup-buttons {
 display: flex;
 gap: 10px;
}

/* Стиль кнопки */
.ucoz-btn {
 padding: 6px 12px;
 border-radius: 50px;
 font-size: 13px;
 cursor: pointer;
 border: none;
 color: white;
 display: flex;
 align-items: center;
 gap: 6px;
 box-shadow: 0 3px 8px rgba(0,0,0,0.4);
 transition: transform 0.2s ease, background 0.3s ease;
}

.ucoz-btn:hover {
 transform: scale(1.05);
}

.ucoz-btn-like {
 background: linear-gradient(135deg, #ff4d4d, #cc0000);
}

.ucoz-btn-download {
 background: linear-gradient(135deg, #28a745, #1e7e34);
}

/* Стиль иконки кнопки */
.ucoz-btn i {
 font-size: 16px;
}

/* Анимация ритма */
.ucoz-ritm {
 display: flex;
 align-items: flex-end;
 height: 30px;
 gap: 3px;
 margin-left: 10px;
}

.ucoz-ritm span {
 display: block;
 width: 4px;
 background: #ff0080;
 animation: bounce 1s infinite ease-in-out;
}

.ucoz-ritm span:nth-child(2) { animation-delay: 0.2s; }
.ucoz-ritm span:nth-child(3) { animation-delay: 0.4s; }
.ucoz-ritm span:nth-child(4) { animation-delay: 0.6s; }
.ucoz-ritm span:nth-child(5) { animation-delay: 0.8s; }

@keyframes bounce {
 0%, 100% { height: 5px; }
 50% { height: 25px; }
}
</style>

HTML

Код:

<div class="ucoz-popup" id="popupBox">
 <img src="$SCREEN_URL$" alt="User" onclick="window.location.href='https://bagsylar.com/load/aydymlar/rosh_sazz/2-1-0-1010'">
 <div class="ucoz-popup-content">
 <div class="ucoz-popup-title">$TITLE$</div>
 <div class="ucoz-popup-text">$OTHER1$</div>
 <div class="ucoz-popup-buttons">
 <button class="ucoz-btn ucoz-btn-like" onclick="window.location.href='https://bagsylar.com/load/aydymlar/rosh_sazz/2-1-0-1010'">
 <i>❤</i> LIKE
 </button>
 <button class="ucoz-btn ucoz-btn-download" onclick="window.location.href='https://bagsylar.com/load/aydymlar/rosh_sazz/2-1-0-1010'">
 <i>⬇</i> СКАЧАТЬ
 </button>
 <div class="ucoz-ritm">
 <span></span><span></span><span></span><span></span><span></span>
 </div>
 </div>
 </div>
</div>

jаvascript

Код:

<script>
// Выходит через 3 секунды
setTimeout(function() {
 document.getElementById('popupBox').classList.add('show');
}, 3000);

// Постепенно скрывается через 10 секунд
setTimeout(function() {
 document.getElementById('popupBox').classList.remove('show');
}, 13000);
</script>

• Prod By M.Rasulov

Привет, наша адмнистрация публикует только пушечный контент, поставь лайк под постом ниже и напишите самый топовый комментарий, мы готовим материал только для тебя, любимый asid.

Уважаемые пользователи, Просим вас помочь нам в развитии, Упоминать наш сайт на форумах и соц сетях.