правила сайта + инстасамка 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

@@ -1,127 +1,145 @@
 "use strict";
 
 class troller {
-    static what = {
+  static what = {
-        enable() {
+    enable() {
-            document.body.onmouseleave = function () {
+      document.body.onmouseleave = function () {
-                // if (Math.random() > 0.90) {
+        // if (Math.random() > 0.90) {
-                // 10%
+        // 10%
 
-                troller.what.start();
+        troller.what.start();
-                // }
+        // }
-            };
+      };
 
-            document.body.onmouseenter = function () {
+      document.body.onmouseenter = function () {
-                troller.what.end();
+        troller.what.end();
-            };
+      };
-        },
+    },
-        disable() {
+    disable() {
-            document.body.onmouseleave = document.body.onmouseenter = undefined;
+      document.body.onmouseleave = document.body.onmouseenter = undefined;
-        },
+    },
-        start() {
+    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(); 
+    },
+    end() {
+      // Сокрытие изображения
+      document.getElementById("what_image").classList.remove("active");
 
-            // Воспроизведение звука
+      // Остановка звука
-            what_sound.currentTime = 0;
+      document.getElementById("what_sound").pause();
-            what_sound.play();
+    },
-        },
+    single(event = "onmouseleave") {
-        end() {
+      if (typeof event === "string") {
-            // Сокрытие изображения
+        // Получены обязательные входные параметры
-            document.getElementById('what_image').classList.remove('active');
 
-            // Остановка звука
+        // Отображение изображения
-            document.getElementById('what_sound').pause();
+        document.getElementById("what_image").classList.add("active");
-        },
-        single(event = 'onmouseleave') {
-            if (typeof event === 'string') {
-                // Получены обязательные входные параметры
-                // Отображение изображения
-                document.getElementById('what_image').classList.add('active');
 
-                // Инициализация элемента со звуком
+        // Проигрывание звука
-                const what_sound = document.getElementById('what_sound');
+        troller.what.play(); 
 
-                // Воспроизведение звука
+        document.body[event] = function () {
-                what_sound.currentTime = 0;
+          troller.what.end();
-                what_sound.play();
 
-                document.body[event] = function () {
+          document.body[event] = undefined;
-                    troller.what.end();
+        };
+      }
+    },
+    play() {
+      // Инициализация элемента со звуком
+      const what_sound = document.getElementById("what_sound");
 
-                    document.body[event] = undefined;
+      // Воспроизведение звука
-                };
+      what_sound.currentTime = 0;
-            }
+      what_sound.play();
-        }
     }
+  };
 
-    static vk() {
+  static vk() {
-        setInterval(function () {
+    setInterval(function () {
-            const sound = document.getElementById('sound_vk');
+      const sound = document.getElementById("sound_vk");
 
-            if (Math.random() > 0.95) {
+      if (Math.random() > 0.95) {
-                // 5%
+        // 5%
 
-                // Воспроизведение звука
+        // Воспроизведение звука
-                sound.currentTime = 0;
+        sound.currentTime = 0;
-                sound.play();
+        sound.play();
-            }
+      }
-        }, 85000);
+    }, 85000);
-    }
+  }
 
-    static whatsapp() {
+  static whatsapp() {
-        setInterval(function () {
+    setInterval(function () {
-            const sound = document.getElementById('sound_whatsup');
+      const sound = document.getElementById("sound_whatsup");
 
-            if (Math.random() > 0.97) {
+      if (Math.random() > 0.97) {
-                // 3%
+        // 3%
 
-                // Воспроизведение звука
+        // Воспроизведение звука
-                sound.currentTime = 0;
+        sound.currentTime = 0;
-                sound.play();
+        sound.play();
-            }
+      }
-        }, 125000);
+    }, 125000);
-    }
+  }
 
-    static iphone() {
+  static iphone() {
-        setInterval(function () {
+    setInterval(function () {
-            const sound = document.getElementById('sound_iphone');
+      const sound = document.getElementById("sound_iphone");
 
-            if (Math.random() > 0.98) {
+      if (Math.random() > 0.98) {
-                // 2%
+        // 2%
 
-                // Воспроизведение звука
+        // Воспроизведение звука
-                sound.currentTime = 0;
+        sound.currentTime = 0;
-                sound.play();
+        sound.play();
-            }
+      }
-        }, 265000);
+    }, 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) {
+troller.what.enable();
-    // 10%
 
-    troller.what.enable();
+if (Math.random() > 0.60) {
+  // 40%
+
+  troller.vk();
 }
 
-if (Math.random() > 0.90) {
+if (Math.random() > 0.60) {
-    // 10%
+  // 40%
 
-    troller.vk();
+  troller.whatsapp();
 }
 
+if (Math.random() > 0.60) {
+  // 40%
 
-if (Math.random() > 0.90) {
+  troller.iphone();
-    // 10%
-
-    troller.whatsapp();
-}
-
-if (Math.random() > 0.90) {
-    // 10%
-
-    troller.iphone();
 }

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>
+  <noscript>К сожалению мой сайт ещё пока не готов для работы без javascript</noscript>
-	{% block main %}
+  {% block main %}
   {% include 'rules.html' %}
-	{% endblock %}
+  {% endblock %}
 </main>
 
 {# {% include 'footer.html' %} #}

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