diff --git a/mirzaev/site/rules/system/public/css/main.css b/mirzaev/site/rules/system/public/css/main.css index b75bb1d..54ab2e5 100755 --- a/mirzaev/site/rules/system/public/css/main.css +++ b/mirzaev/site/rules/system/public/css/main.css @@ -1,9 +1,28 @@ @import url('/fonts/comissioner.ttf'); +@keyframes koshka_dancing { + 100% { + bottom: -20px; + } +} + +@keyframes hand_dancing { + 100% { + bottom: -20px; + } +} + +@keyframes knife_dancing { + 100% { + bottom: calc(-273px + 88px + 20px); + } +} + + :root { - --background-light-3: #403939; - --background-light-2: #322d2d; - --background-light-1: #2b2525; + --button-light-red-active: #eee4e4; + --button-light-red-hover: #ddcbcb; + --button-light-red: #eadada; --background-light : #fff; --background : #f00; --background-dark : #000; @@ -44,9 +63,27 @@ a:active { color: var(--text-active); } +button { + cursor: pointer; + background-color: var(--button-light-red); +} + +button:hover { + background-color: var(--button-light-red-hover); +} + +button:active { + background-color: var(--button-light-red-active); +} + +button[disabled]:is(:hover, :active) { + cursor: unset; + background-color: var(--button-light-red); +} + body { margin : 0; - padding-top: 20vh; + padding-top: calc(20vh + 394px); padding-bottom: 10vh; display: flex; flex-direction: column; @@ -58,34 +95,54 @@ aside { } div#wrap { + margin-top: -394px; margin-left: 50vw; - position: relative; + height: 394px; + position: absolute; display: flex; } div#wrap>img#masha { z-index: 1500; + bottom: 0px; width: 333px; height: 394px; + position: relative; + animation-duration : 1s; + animation-direction: alternate; + animation-name : koshka_dancing; + animation-iteration-count: infinite; + animation-timing-function: cubic-bezier(.65,.05,.36,1); } div#wrap>img#hand{ z-index: 500; left: -30px; - bottom: -10px; + 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 { z-index: 100500; left: calc(-112px + 70px - 40px); - bottom: calc(-273px + 88px + 30px); + 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/css/popup.css b/mirzaev/site/rules/system/public/css/popup.css new file mode 100755 index 0000000..2ff3587 --- /dev/null +++ b/mirzaev/site/rules/system/public/css/popup.css @@ -0,0 +1,62 @@ +section.popup { + z-index: 999999; + left: 0; + top: 0; + position: fixed; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: #000000DD; +} + +section.popup>div.wrap { + width: 320px; + padding: 30px 25px; + display: flex; + flex-direction: column; + gap: 20px; + border-radius: 2px; + background-color: var(--background-light); +} + +section.popup>div.wrap>h4 { + margin: auto; + padding-top: 10px; + font-size: 1.6rem; +} + +section.popup>div.wrap>ol { + width: 220px; + margin: auto; + padding: unset; + list-style: cjk-earthly-branch; +} + +section.popup>div.wrap>div.row { + width: 100%; + display: flex; + gap: 12px; +} + +section.popup>div.wrap>div.row.separated:last-child { + margin-top: 10px; +} + +section.popup>div.wrap>div.row>button { + padding: 6px 20px; + border-radius: 2px; +} + +section.popup>div.wrap>div.row>button:first-child { + margin-left: auto; +} + +section.popup>div.wrap>div.row>button:last-child{ + margin-right: auto; +} + +section.popup>div.wrap>div.row>button[disabled]:is(:hover, :active) { + cursor: none; +} diff --git a/mirzaev/site/rules/system/public/css/trolling.css b/mirzaev/site/rules/system/public/css/trolling.css index 7ecc1c1..f8eb3b9 100755 --- a/mirzaev/site/rules/system/public/css/trolling.css +++ b/mirzaev/site/rules/system/public/css/trolling.css @@ -1,6 +1,8 @@ #what_image { z-index: 9999999; - position: absolute; + left: 0; + top: 0; + position: fixed; width: 100vw; height: 100vh; display: none; diff --git a/mirzaev/site/rules/system/public/js/trolling.js b/mirzaev/site/rules/system/public/js/trolling.js index b7fda59..102dcd6 100755 --- a/mirzaev/site/rules/system/public/js/trolling.js +++ b/mirzaev/site/rules/system/public/js/trolling.js @@ -1,127 +1,145 @@ "use strict"; class troller { - static what = { - enable() { - document.body.onmouseleave = function () { - // if (Math.random() > 0.90) { - // 10% + static what = { + enable() { + document.body.onmouseleave = function () { + // if (Math.random() > 0.90) { + // 10% - troller.what.start(); - // } - }; + troller.what.start(); + // } + }; - document.body.onmouseenter = function () { - troller.what.end(); - }; - }, - disable() { - document.body.onmouseleave = document.body.onmouseenter = undefined; - }, - start() { - // Отображение изображения - document.getElementById('what_image').classList.add('active'); + document.body.onmouseenter = function () { + troller.what.end(); + }; + }, + disable() { + document.body.onmouseleave = document.body.onmouseenter = undefined; + }, + start() { + // Отображение изображения + document.getElementById("what_image").classList.add("active"); - // Инициализация элемента со звуком - const what_sound = document.getElementById('what_sound'); + // Проигрывание звука + troller.what.play(); + }, + end() { + // Сокрытие изображения + document.getElementById("what_image").classList.remove("active"); - // Воспроизведение звука - what_sound.currentTime = 0; - what_sound.play(); - }, - end() { - // Сокрытие изображения - document.getElementById('what_image').classList.remove('active'); + // Остановка звука + document.getElementById("what_sound").pause(); + }, + single(event = "onmouseleave") { + if (typeof event === "string") { + // Получены обязательные входные параметры - // Остановка звука - document.getElementById('what_sound').pause(); - }, - single(event = 'onmouseleave') { - if (typeof event === 'string') { - // Получены обязательные входные параметры - // Отображение изображения - document.getElementById('what_image').classList.add('active'); + // Отображение изображения + document.getElementById("what_image").classList.add("active"); - // Инициализация элемента со звуком - const what_sound = document.getElementById('what_sound'); + // Проигрывание звука + troller.what.play(); - // Воспроизведение звука - what_sound.currentTime = 0; - what_sound.play(); + document.body[event] = function () { + troller.what.end(); - document.body[event] = function () { - troller.what.end(); + document.body[event] = undefined; + }; + } + }, + play() { + // Инициализация элемента со звуком + const what_sound = document.getElementById("what_sound"); - document.body[event] = undefined; - }; - } - } + // Воспроизведение звука + what_sound.currentTime = 0; + what_sound.play(); } + }; - static vk() { - setInterval(function () { - const sound = document.getElementById('sound_vk'); + static vk() { + setInterval(function () { + const sound = document.getElementById("sound_vk"); - if (Math.random() > 0.95) { - // 5% + if (Math.random() > 0.95) { + // 5% - // Воспроизведение звука - sound.currentTime = 0; - sound.play(); - } - }, 85000); - } + // Воспроизведение звука + sound.currentTime = 0; + sound.play(); + } + }, 85000); + } - static whatsapp() { - setInterval(function () { - const sound = document.getElementById('sound_whatsup'); + static whatsapp() { + setInterval(function () { + const sound = document.getElementById("sound_whatsup"); - if (Math.random() > 0.97) { - // 3% + if (Math.random() > 0.97) { + // 3% - // Воспроизведение звука - sound.currentTime = 0; - sound.play(); - } - }, 125000); - } + // Воспроизведение звука + sound.currentTime = 0; + sound.play(); + } + }, 125000); + } - static iphone() { - setInterval(function () { - const sound = document.getElementById('sound_iphone'); + static iphone() { + setInterval(function () { + const sound = document.getElementById("sound_iphone"); - if (Math.random() > 0.98) { - // 2% + if (Math.random() > 0.98) { + // 2% - // Воспроизведение звука - sound.currentTime = 0; - sound.play(); - } - }, 265000); - } + // Воспроизведение звука + sound.currentTime = 0; + sound.play(); + } + }, 265000); + } + + static instasamka = { + play(track, time) { + // Инициализация элемента со звуком + const sound = document.querySelectorAll('[data-instasamka]')[track]; + + if (sound instanceof HTMLElement) { + // Найден звук + + // Воспроизведение звука + sound.currentTime = time ?? Math.random() * 100; + sound.play(); + + return; + } + + console.log('[mirzaev] [troller] Не удалось найти песню инстасамки под идентификатором ' + track); + + // Не найден звук (подразумевается) + troller.instasamka.play(1, time); + }, + }; } -if (Math.random() > 0.90) { - // 10% +troller.what.enable(); - troller.what.enable(); +if (Math.random() > 0.60) { + // 40% + + troller.vk(); } -if (Math.random() > 0.90) { - // 10% +if (Math.random() > 0.60) { + // 40% - troller.vk(); + troller.whatsapp(); } +if (Math.random() > 0.60) { + // 40% -if (Math.random() > 0.90) { - // 10% - - troller.whatsapp(); -} - -if (Math.random() > 0.90) { - // 10% - - troller.iphone(); + troller.iphone(); } diff --git a/mirzaev/site/rules/system/views/index.html b/mirzaev/site/rules/system/views/index.html index 502bc5b..d0cbc77 100755 --- a/mirzaev/site/rules/system/views/index.html +++ b/mirzaev/site/rules/system/views/index.html @@ -2,24 +2,27 @@ {% use "core.html" with css as core_css, body as core_body, js as core_js, js_init as core_js_init %} {% use "trolling.html" with css as trolling_css, body as trolling_body, js as trolling_js %} +{% use "popups/rules.html" with css as popup_rules_css, body as popup_rules_body %} {% use "header.html" with css as header_css, body as header_body, js as header_js, js_init as header_js_init %} {% block css %} {{ block('core_css') }} {{ block('trolling_css') }} +{{ block('popup_rules_css') }} {{ block('header_css') }} {% endblock %} {% block body %} {{ block('core_body') }} {{ block('trolling_body') }} +{{ block('popup_rules_body') }} {{ block('header_body') }} <main> - <noscript>К сожалению мой сайт ещё пока не готов для работы без javascript</noscript> - {% block main %} + <noscript>К сожалению мой сайт ещё пока не готов для работы без javascript</noscript> + {% block main %} {% include 'rules.html' %} - {% endblock %} + {% endblock %} </main> {# {% include 'footer.html' %} #} diff --git a/mirzaev/site/rules/system/views/popups/rules.html b/mirzaev/site/rules/system/views/popups/rules.html new file mode 100644 index 0000000..368b710 --- /dev/null +++ b/mirzaev/site/rules/system/views/popups/rules.html @@ -0,0 +1,22 @@ +{% block css %} +<link type="text/css" rel="stylesheet" href="/css/popup.css"> +{% endblock %} + +{% block body %} +<section class="popup"> + <div class="wrap"> + <h4>Правила сайта</h4> + <ol> + <li>Читать правила сайта</li> + <li>Читать правила беседы</li> + <li>Ознакомиться с правилами</li> + <li>Принимая кнопку ниже вы соглашаетесь с правилами</li> + </ol> + <div class="row separated"> + <button + onclick="troller.instasamka.play(Math.round(Math.random() * 10)); troller.what.play(); this.parentElement.parentElement.parentElement.remove();">Прочитал</button> + <button onclick="troller.what.play(); alert('ты идиот?'); this.disabled = true">Не прочитал</button> + </div> + </div> +</section> +{% endblock %} diff --git a/mirzaev/site/rules/system/views/rules.html b/mirzaev/site/rules/system/views/rules.html index c1ccc76..b4ebb30 100644 --- a/mirzaev/site/rules/system/views/rules.html +++ b/mirzaev/site/rules/system/views/rules.html @@ -1,4 +1,6 @@ <ol> + <li value="0">под ножом нет красной точки</li> + <br> <li>чоколад запрещено</li> <li>пажилой запрещено</li> <li>запрещено бдабдабаб</li> @@ -91,7 +93,8 @@ <li>Не оскорблять отель Хасбин</li> <li>Даркью Пельмень запрещен</li> <li>Андрей Останин запрещен</li> - <li>НЕ СПОЙЛЕРИТЬ КОШКУ ЕЩЁ РАЗ ГОВОРЮ В ГРУППЕ КОШКА И НАХУЙ ПУБЛИКОВАТЬ ЕСЛИ ЕЁ ВСЕ ВИДЕЛИ. КТО СПОЙЛЕРИТ ВЕЧНЫЙ БАН. БЫЛ ТУТ ОДИН....</li> + <li>НЕ СПОЙЛЕРИТЬ КОШКУ ЕЩЁ РАЗ ГОВОРЮ В ГРУППЕ КОШКА И НАХУЙ ПУБЛИКОВАТЬ ЕСЛИ ЕЁ ВСЕ ВИДЕЛИ. КТО СПОЙЛЕРИТ ВЕЧНЫЙ + БАН. БЫЛ ТУТ ОДИН....</li> <li>хамуд запрещён</li> <li>нуждики разрешены (общим голосованием)</li> <li>хамуд теперь разрешён чтобы не было червячков</li> @@ -148,13 +151,16 @@ <li>мнемотехника охуенна</li> <li>главное — БУДЬТЕ БЛЯДЬ ЛЮДЬМИ, серьёзно.</li> <li>играть в аллоды онлайн на сервере приют</li> - <li>какого хуя вы не общаетесь весь день и как только я начинаю что-то рассказывать перебиваете меня и рассказываете свою тупую хуйню?</li> + <li>какого хуя вы не общаетесь весь день и как только я начинаю что-то рассказывать перебиваете меня и рассказываете + свою тупую хуйню?</li> <li>мясо запрещено</li> - <li>В БЕСЕДЕ ПРАВИЛ НЕТ</li> <br> + <li>В БЕСЕДЕ ПРАВИЛ НЕТ</li> <li>обсуждение и показ трупов запрещены</li> <li>знать все серии пони ОБЯЗАТЕЛЬНО</li> <li>подисаться на мой ютуб канал</li> <li>сдать тест на знание песен инстасамки</li> <li>шарить за бебру</li> + <li>правило номер 129 (связано с 131) было хакировано альянсом злодеев и мы прилагаем все усилия для его + восстановления</li> </ol> diff --git a/mirzaev/site/rules/system/views/trolling.html b/mirzaev/site/rules/system/views/trolling.html index b2a5cb3..36485de 100755 --- a/mirzaev/site/rules/system/views/trolling.html +++ b/mirzaev/site/rules/system/views/trolling.html @@ -8,6 +8,17 @@ <audio id="sound_vk" class="hide" src="/sounds/vk.mp3" controls></audio> <audio id="sound_whatsup" class="hide" src="/sounds/whatsup.mp3" controls></audio> <audio id="sound_iphone" class="hide" src="/sounds/iphone.mp3" controls></audio> +<audio data-instasamka class="hide" src="/sounds/instasamka/1.mp3" controls></audio> +<audio data-instasamka class="hide" src="/sounds/instasamka/2.mp3" controls></audio> +<audio data-instasamka class="hide" src="/sounds/instasamka/3.mp3" controls></audio> +<audio data-instasamka class="hide" src="/sounds/instasamka/4.mp3" controls></audio> +<audio data-instasamka class="hide" src="/sounds/instasamka/5.mp3" controls></audio> +<audio data-instasamka class="hide" src="/sounds/instasamka/6.mp3" controls></audio> +<audio data-instasamka class="hide" src="/sounds/instasamka/7.mp3" controls></audio> +<audio data-instasamka class="hide" src="/sounds/instasamka/8.mp3" controls></audio> +<audio data-instasamka class="hide" src="/sounds/instasamka/9.mp3" controls></audio> +<audio data-instasamka class="hide" src="/sounds/instasamka/10.mp3" controls></audio> +<audio data-instasamka class="hide" src="/sounds/instasamka/11.mp3" controls></audio> {% endblock %} {% block js %}