diff --git a/mirzaev/site/rules/system/public/css/main.css b/mirzaev/site/rules/system/public/css/main.css index f4942f7..3eb5463 100755 --- a/mirzaev/site/rules/system/public/css/main.css +++ b/mirzaev/site/rules/system/public/css/main.css @@ -5,24 +5,6 @@ font-style: normal; } -@keyframes koshka_dancing { - 100% { - bottom: -20px; - } -} - -@keyframes hand_dancing { - 100% { - bottom: -20px; - } -} - -@keyframes knife_dancing { - 100% { - bottom: calc(-273px + 88px + 20px); - } -} - :root { --button-light-red-active: #eee4e4; @@ -58,7 +40,6 @@ -moz-user-select : none; -ms-user-select : none; user-select : none; - pointer-events : none; } a:hover { @@ -103,52 +84,54 @@ aside { div#wrap { margin-top: -394px; margin-left: 50vw; - height: 394px; position: absolute; - display: flex; } -div#wrap>img#masha { - z-index: 1500; - bottom: 0px; +div#wrap>a>img#masha { + z-index: 800; + left: 0; + bottom: 0; width: 333px; height: 394px; position: relative; - animation-duration : 1s; - animation-direction: alternate; + cursor: pointer; + animation-direction : alternate; animation-name : koshka_dancing; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.65,.05,.36,1); } -div#wrap>img#hand{ +:is(div#wrap>a>img#masha, div#wrap>a>#masha_hand):hover { + animation-play-state: paused; +} + +div#wrap>a>#masha_hand { + left: 0; + bottom: 0; + position: absolute; + cursor: pointer; + animation-direction : alternate; + animation-name : hand_dancing; + animation-iteration-count: infinite; + animation-timing-function: cubic-bezier(.65,.05,.36,1); +} + +div#wrap>a>#masha_hand>img#hand{ z-index: 500; left: -30px; bottom: -5px; width: 70px; height: 88px; position: absolute; - display: flex; - animation-duration : .8s; - animation-direction: alternate; - animation-name : hand_dancing; - animation-iteration-count: infinite; - animation-timing-function: cubic-bezier(.65,.05,.36,1); } -div#wrap>img#knife { +div#wrap>a>#masha_hand>img#knife { z-index: 100500; left: calc(-112px + 70px - 40px); bottom: calc(-273px + 88px + 35px); width: 112px; height: 273px; position: absolute; - animation-duration : .8s; - animation-direction: alternate; - animation-name : knife_dancing; - animation-iteration-count: infinite; - animation-timing-function: cubic-bezier(.65,.05,.36,1); - } header { diff --git a/mirzaev/site/rules/system/public/js/troller.js b/mirzaev/site/rules/system/public/js/troller.js index 0b531b1..798aac4 100755 --- a/mirzaev/site/rules/system/public/js/troller.js +++ b/mirzaev/site/rules/system/public/js/troller.js @@ -1,65 +1,108 @@ "use strict"; class troller { - static what = { - enable() { - document.body.onmouseleave = function () { - // if (Math.random() > 0.90) { - // 10% + constructor() { + this.what = { + // HTML-элемент с изображением + sound: document.getElementById("troller_sound_what"), - troller.what.start(); - // } - }; - - document.body.onmouseenter = function () { - troller.what.end(); - }; - }, - disable() { - document.body.onmouseleave = document.body.onmouseenter = undefined; - }, - start() { - // Отображение изображения - document.getElementById("troller_image_what").classList.add("active"); - - // Проигрывание звука - troller.what.play(); - }, - end() { - // Сокрытие изображения - document.getElementById("troller_image_what").classList.remove("active"); - - // Остановка звука - document.getElementById("troller_sound_what").pause(); - }, - single(event = "onmouseleave") { - if (typeof event === "string") { - // Получены обязательные входные параметры + // HTML-элемент со звуком + image: document.getElementById("troller_image_what"), + enable() { + document.body.onmouseleave = () => this.start(); + document.body.onmouseenter = () => this.end(); + }, + disable() { + document.body.onmouseleave = document.body.onmouseenter = undefined; + }, + start() { // Отображение изображения - document.getElementById("troller_image_what").classList.add("active"); + this.image.classList.add("active"); // Проигрывание звука - troller.what.play(); + this.play(); - document.body[event] = function () { - troller.what.end(); + // Остановка воспроизведения инстасамки + if (this.core.instasamka.initialized) this.core.instasamka.pause(); + }, + end() { + // Сокрытие изображения + this.image.classList.remove("active"); - document.body[event] = undefined; - }; + // Возобновление воспроизведения инстасамки + if (this.core.instasamka.initialized) this.core.instasamka.play(); + + // Остановка звука + this.sound.pause(); + }, + single(event = "onmouseleave") { + if (typeof event === "string") { + // Получены обязательные входные параметры + + // Отображение изображения + this.image.classList.add("active"); + + // Проигрывание звука + this.play(); + + document.body[event] = function () { + this.end(); + + document.body[event] = undefined; + }; + } + }, + play() { + // Воспроизведение звука + this.sound.currentTime = 0; + this.sound.play(); } - }, - play() { - // Инициализация элемента со звуком - const what_sound = document.getElementById("troller_sound_what"); + }; - // Воспроизведение звука - what_sound.currentTime = 0; - what_sound.play(); - } - }; + this.instasamka = { + // HTML-элемент с аудиозаписью + sound: document.getElementById("troller_sound_instasamka"), - static vk() { + initialized: false, + + play(time) { + if (this.sound instanceof HTMLElement) { + // Найден звук + + // Инициализация инстасамки + if (!this.initialized) this.initialized = true; + + // Инициализация временной метки для воспроизведения + if (typeof time === 'number') this.sound.currentTime = time; + + // Воспроизведение звука + this.sound.play(); + } else { + // Не найден звук (подразумевается) + + console.log('[mirzaev] [troller] Не удалось найти песню инстасамки'); + } + }, + pause() { + if (this.sound instanceof HTMLElement) { + // Найден звук + + // Остановка воспроизведения звука + this.sound.pause(); + } else { + // Не найден звук (подразумевается) + + console.log('[mirzaev] [troller] Не удалось найти песню инстасамки'); + } + }, + }; + + // Инициализация ссылок на ядро + this.what.core = this.instasamka.core = this; + } + + vk() { setInterval(function () { const sound = document.getElementById("troller_sound_vk"); @@ -73,7 +116,7 @@ class troller { }, 85000); } - static whatsapp() { + whatsapp() { setInterval(function () { const sound = document.getElementById("troller_sound_whatsup"); @@ -87,7 +130,7 @@ class troller { }, 125000); } - static iphone() { + iphone() { setInterval(function () { const sound = document.getElementById("troller_sound_iphone"); @@ -100,25 +143,6 @@ class troller { } }, 265000); } - - static instasamka = { - play(time) { - // Инициализация элемента со звуком - const sound = document.getElementById("troller_sound_instasamka"); - - if (sound instanceof HTMLElement) { - // Найден звук - - // Воспроизведение звука - sound.currentTime = time ?? Math.random() * 100; - sound.play(); - } else { - // Не найден звук (подразумевается) - - console.log('[mirzaev] [troller] Не удалось найти песню инстасамки'); - } - }, - }; } document.dispatchEvent( diff --git a/mirzaev/site/rules/system/views/header.html b/mirzaev/site/rules/system/views/header.html index e9bb793..4beac18 100755 --- a/mirzaev/site/rules/system/views/header.html +++ b/mirzaev/site/rules/system/views/header.html @@ -3,9 +3,28 @@ {% block body %}