правила сайта + инстасамка 11 композиций

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;
+  --button-light-red-active: #eee4e4;
-  --background-light-2: #322d2d;
+  --button-light-red-hover: #ddcbcb;
-  --background-light-1: #2b2525;
+  --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 {

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;
+}

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;

mirzaev/site/rules/system/public/js/trolling.js

@@ -20,34 +20,27 @@ class troller {
     },
     start() {
       // Отображение изображения
-            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();
     },
     end() {
       // Сокрытие изображения
-            document.getElementById('what_image').classList.remove('active');
+      document.getElementById("what_image").classList.remove("active");
 
       // Остановка звука
-            document.getElementById('what_sound').pause();
+      document.getElementById("what_sound").pause();
     },
-        single(event = 'onmouseleave') {
+    single(event = "onmouseleave") {
-            if (typeof event === 'string') {
+      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();
@@ -55,12 +48,20 @@ class troller {
           document.body[event] = undefined;
         };
       }
+    },
+    play() {
+      // Инициализация элемента со звуком
+      const what_sound = document.getElementById("what_sound");
+
+      // Воспроизведение звука
+      what_sound.currentTime = 0;
+      what_sound.play();
     }
-    }
+  };
 
   static vk() {
     setInterval(function () {
-            const sound = document.getElementById('sound_vk');
+      const sound = document.getElementById("sound_vk");
 
       if (Math.random() > 0.95) {
         // 5%
@@ -74,7 +75,7 @@ class troller {
 
   static whatsapp() {
     setInterval(function () {
-            const sound = document.getElementById('sound_whatsup');
+      const sound = document.getElementById("sound_whatsup");
 
       if (Math.random() > 0.97) {
         // 3%
@@ -88,7 +89,7 @@ class troller {
 
   static iphone() {
     setInterval(function () {
-            const sound = document.getElementById('sound_iphone');
+      const sound = document.getElementById("sound_iphone");
 
       if (Math.random() > 0.98) {
         // 2%
@@ -99,29 +100,46 @@ class troller {
       }
     }, 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;
       }
 
-if (Math.random() > 0.90) {
+      console.log('[mirzaev] [troller] Не удалось найти песню инстасамки под идентификатором ' + track);
-    // 10%
+
+      // Не найден звук (подразумевается)
+      troller.instasamka.play(1, time);
+    },
+  };
+}
 
 troller.what.enable();
-}
 
-if (Math.random() > 0.90) {
+if (Math.random() > 0.60) {
-    // 10%
+  // 40%
 
   troller.vk();
 }
 
-
+if (Math.random() > 0.60) {
-if (Math.random() > 0.90) {
+  // 40%
-    // 10%
 
   troller.whatsapp();
 }
 
-if (Math.random() > 0.90) {
+if (Math.random() > 0.60) {
-    // 10%
+  // 40%
 
   troller.iphone();
 }

mirzaev/site/rules/system/views/index.html

@@ -2,17 +2,20 @@
 
 {% 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>

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 %}

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>

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 %}