click me mf
сплаттерпанк | 21+

#барсук

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » #барсук » Расписание маршрутов » Общая информация перед регистрацией


Общая информация перед регистрацией

Сообщений 1 страница 4 из 4

1

[html]<div style="position: relative; width: 600px; margin: 80px auto 100px auto;">
 
  <div style="position: relative; width: 600px; margin: 0 auto;">
   
    <!-- ФОТО 1: СНИЗУ-СЛЕВА -->
    <div id="photo1" style="position: absolute; bottom: -55px; left: 20px; width: 110px; height: 110px; z-index: 15; cursor: pointer; transform: rotate(-14deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/8d/66/53/8d665375ab03d6aeca22131295f1fcea.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-a"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 2: СНИЗУ-ПО-ЦЕНТРУ -->
    <div id="photo2" style="position: absolute; bottom: -25px; left: 240px; width: 120px; height: 120px; z-index: 15; cursor: pointer; transform: rotate(6deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/a6/a5/2a/a6a52aa54bc1164eac7f48344a09ec0c.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-b"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 3: СВЕРХУ-СПРАВА -->
    <div id="photo3" style="position: absolute; top: -60px; right: 30px; width: 105px; height: 105px; z-index: 15; cursor: pointer; transform: rotate(18deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/88/65/26/886526bd4c21a74fb727c08e282894be.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-c"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 4: СВЕРХУ-СЛЕВА (ВОЗВРАЩАЕТ ИСХОДНУЮ КАРТИНКУ) -->
    <div id="photo4" style="position: absolute; top: -35px; left: 100px; width: 95px; height: 95px; z-index: 15; cursor: pointer; transform: rotate(-22deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/4c/70/46/4c7046ed8f1386f1b29a84a76af23430.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-d"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 5: СНИЗУ-СПРАВА -->
    <div id="photo5" style="position: absolute; bottom: -70px; right: 80px; width: 115px; height: 115px; z-index: 15; cursor: pointer; transform: rotate(25deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/a5/90/04/a5900470b3440c150893553603ca7d25.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-e"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 6: СВЕРХУ-ПО-ЦЕНТРУ -->
    <div id="photo6" style="position: absolute; top: -30px; left: 170px; width: 100px; height: 100px; z-index: 15; cursor: pointer; transform: rotate(-10deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/a2/ec/df/a2ecdf3845222ea6e3ed4538545ceead.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-f"></div>
        </div>
      </div>
    </div>

    <!-- ОСНОВНАЯ ФОТОГРАФИЯ -->
    <div id="mainWrapper" style="position: relative; z-index: 20; transform: rotate(1deg); transition: transform 0.8s ease-out; display: inline-block;">
      <div style="background: #9a8b7a; border-radius: 14px; padding: 4px; box-shadow: 0 0 0 1px #7a6b5a, inset 0 0 0 1px #b8a99a;">
        <div style="background: #c0c0c0; border-radius: 10px; padding: 1px; box-shadow: inset 0 0 0 1px #e8e8e8, inset 0 0 3px rgba(0,0,0,0.15);">
          <div style="position: relative; overflow: hidden; border-radius: 9px;">
            <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->
            <img id="mainPhoto" src="https://i.pinimg.com/1200x/4c/70/46/4c7046ed8f1386f1b29a84a76af23430.jpg" width="600" height="250" style="width: 600px; height: 250px; display: block; object-fit: cover; filter: sepia(0.5) contrast(1.18) brightness(0.92) saturate(0.9); transition: opacity 0.3s ease;">
            <div class="scratch-overlay-main"></div>
            <div class="stain-overlay-main"></div>
            <div class="grain-overlay"></div>
            <div id="mainBlood1" class="blood-main-a"></div>
            <div id="mainBlood2" class="blood-main-b" style="display: none;"></div>
            <div id="mainBlood3" class="blood-main-c" style="display: none;"></div>
            <div id="mainBlood4" class="blood-main-d" style="display: none;"></div>
            <div id="mainBlood5" class="blood-main-e" style="display: none;"></div>
            <div id="mainBlood6" class="blood-main-f" style="display: none;"></div>
          </div>
        </div>
      </div>
    </div>
   
  </div>
</div>

<style>
  #photo1, #photo2, #photo3, #photo4, #photo5, #photo6 { transition: transform 0.8s ease-out; }
  #photo1:hover, #photo2:hover, #photo3:hover, #photo4:hover, #photo5:hover, #photo6:hover { transform: rotate(0deg) scale(1.08) !important; z-index: 30 !important; }
  #mainWrapper { transition: transform 0.8s ease-out; }
  #mainWrapper:hover { transform: rotate(0deg) scale(1.05) !important; }
 
  .scratch-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 5px); border-radius: 8px; z-index: 2; }
  .scratch-overlay-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 5px), repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(80,60,40,0.06) 3px, rgba(80,60,40,0.06) 7px); border-radius: 9px; z-index: 2; }
 
  .stain-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(circle at 20% 30%, rgba(160,120,80,0.18) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(100,70,40,0.14) 0%, transparent 60%); border-radius: 8px; z-index: 2; }
  .stain-overlay-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(ellipse at 15% 25%, rgba(160,130,95,0.15) 0%, transparent 40%), radial-gradient(ellipse at 85% 70%, rgba(110,85,60,0.12) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(180,155,125,0.08) 0%, transparent 70%); border-radius: 9px; z-index: 2; }
 
  .blood-type-a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 65% 25%, rgba(220,40,20,0.55) 0%, rgba(200,35,15,0.4) 4%, transparent 7%), radial-gradient(circle at 30% 75%, rgba(210,35,18,0.45) 0%, rgba(190,30,12,0.3) 3%, transparent 6%), radial-gradient(circle at 85% 85%, rgba(230,45,22,0.35) 0%, transparent 5%); }
  .blood-type-b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(ellipse at 40% 50%, rgba(120,20,12,0.65) 0%, rgba(100,15,8,0.45) 6%, transparent 10%), radial-gradient(circle at 75% 35%, rgba(130,22,14,0.5) 0%, rgba(110,18,10,0.35) 4%, transparent 7%), radial-gradient(circle at 20% 80%, rgba(115,18,10,0.4) 0%, transparent 5%); }
  .blood-type-c { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(ellipse at 55% 60%, rgba(190,35,18,0.5) 0%, rgba(170,28,14,0.35) 8%, transparent 12%), radial-gradient(circle at 80% 20%, rgba(200,38,20,0.4) 0%, transparent 6%), radial-gradient(ellipse at 25% 40%, rgba(180,30,15,0.35) 0%, transparent 8%); }
  .blood-type-d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 70% 70%, rgba(80,15,8,0.55) 0%, rgba(60,10,5,0.4) 5%, transparent 9%), radial-gradient(circle at 30% 25%, rgba(90,18,10,0.45) 0%, rgba(70,12,6,0.3) 4%, transparent 7%); }
  .blood-type-e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 45% 35%, rgba(235,50,25,0.6) 0%, rgba(215,40,18,0.45) 5%, transparent 9%), radial-gradient(circle at 60% 80%, rgba(225,45,22,0.5) 0%, rgba(205,35,16,0.35) 4%, transparent 7%), radial-gradient(circle at 15% 55%, rgba(240,55,28,0.35) 0%, transparent 5%); }
  .blood-type-f { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 50% 45%, rgba(180,32,16,0.55) 0%, rgba(160,25,12,0.4) 6%, transparent 10%), radial-gradient(circle at 25% 70%, rgba(200,38,20,0.45) 0%, rgba(180,30,14,0.3) 3%, transparent 6%), radial-gradient(ellipse at 80% 30%, rgba(140,22,11,0.5) 0%, rgba(120,18,8,0.35) 5%, transparent 8%), radial-gradient(circle at 10% 15%, rgba(210,42,22,0.3) 0%, transparent 4%); }
 
  .blood-main-a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 35% 25%, rgba(220,40,20,0.55) 0%, rgba(200,35,15,0.4) 6%, transparent 10%), radial-gradient(circle at 70% 55%, rgba(210,38,18,0.45) 0%, rgba(190,32,14,0.35) 5%, transparent 8%), radial-gradient(circle at 25% 80%, rgba(230,45,22,0.4) 0%, rgba(210,38,16,0.3) 4%, transparent 7%); }
  .blood-main-b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(ellipse at 60% 30%, rgba(120,20,12,0.65) 0%, rgba(100,15,8,0.45) 7%, transparent 12%), radial-gradient(circle at 20% 65%, rgba(130,22,14,0.5) 0%, rgba(110,18,10,0.35) 4%, transparent 8%), radial-gradient(circle at 80% 80%, rgba(115,18,10,0.4) 0%, transparent 6%); }
  .blood-main-c { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(ellipse at 40% 50%, rgba(190,35,18,0.55) 0%, rgba(170,28,14,0.4) 8%, transparent 13%), radial-gradient(circle at 75% 25%, rgba(200,38,20,0.45) 0%, rgba(180,30,15,0.3) 5%, transparent 8%), radial-gradient(ellipse at 55% 80%, rgba(185,32,16,0.35) 0%, transparent 6%); }
  .blood-main-d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 25% 35%, rgba(80,15,8,0.6) 0%, rgba(60,10,5,0.45) 6%, transparent 11%), radial-gradient(circle at 85% 70%, rgba(90,18,10,0.5) 0%, rgba(70,12,6,0.35) 5%, transparent 9%), radial-gradient(ellipse at 50% 20%, rgba(75,14,7,0.4) 0%, transparent 7%); }
  .blood-main-e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 55% 40%, rgba(235,50,25,0.6) 0%, rgba(215,40,18,0.45) 7%, transparent 12%), radial-gradient(circle at 30% 70%, rgba(225,45,22,0.5) 0%, rgba(205,35,16,0.35) 5%, transparent 9%), radial-gradient(circle at 80% 20%, rgba(240,55,28,0.4) 0%, transparent 6%), radial-gradient(ellipse at 15% 50%, rgba(220,42,20,0.35) 0%, transparent 5%); }
  .blood-main-f { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 45% 35%, rgba(180,32,16,0.55) 0%, rgba(160,25,12,0.4) 6%, transparent 10%), radial-gradient(circle at 70% 75%, rgba(200,38,20,0.45) 0%, rgba(180,30,14,0.35) 4%, transparent 7%), radial-gradient(ellipse at 25% 60%, rgba(140,22,11,0.5) 0%, rgba(120,18,8,0.35) 5%, transparent 9%), radial-gradient(circle at 85% 15%, rgba(210,42,22,0.35) 0%, transparent 5%); }
 
  .grain-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.08"/></svg>'); background-repeat: repeat; background-size: 200px; border-radius: 9px; z-index: 4; mix-blend-mode: multiply; }
</style>

<!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->

<script>
  const originalSrc = "https://i.pinimg.com/1200x/4c/70/46/4c7046ed8f1386f1b29a84a76af23430.jpg";
  const mainPhoto = document.getElementById('mainPhoto');
 
  const photo1 = document.getElementById('photo1');
  const photo2 = document.getElementById('photo2');
  const photo3 = document.getElementById('photo3');
  const photo4 = document.getElementById('photo4');
  const photo5 = document.getElementById('photo5');
  const photo6 = document.getElementById('photo6');
 
  const mainBlood1 = document.getElementById('mainBlood1');
  const mainBlood2 = document.getElementById('mainBlood2');
  const mainBlood3 = document.getElementById('mainBlood3');
  const mainBlood4 = document.getElementById('mainBlood4');
  const mainBlood5 = document.getElementById('mainBlood5');
  const mainBlood6 = document.getElementById('mainBlood6');
 
  function changeImage(newSrc, bloodType) {
    if (mainPhoto.src === newSrc) return;
   
    mainBlood1.style.display = 'none';
    mainBlood2.style.display = 'none';
    mainBlood3.style.display = 'none';
    mainBlood4.style.display = 'none';
    mainBlood5.style.display = 'none';
    mainBlood6.style.display = 'none';
   
    if (bloodType === 1) mainBlood1.style.display = 'block';
    else if (bloodType === 2) mainBlood2.style.display = 'block';
    else if (bloodType === 3) mainBlood3.style.display = 'block';
    else if (bloodType === 4) mainBlood4.style.display = 'block';
    else if (bloodType === 5) mainBlood5.style.display = 'block';
    else if (bloodType === 6) mainBlood6.style.display = 'block';
   
    mainPhoto.style.opacity = '0.5';
    setTimeout(() => {
      mainPhoto.src = newSrc;
      mainPhoto.style.opacity = '1';
    }, 150);
  }
 
  if (photo1) photo1.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo1.querySelector('img').src, 1); });
  if (photo2) photo2.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo2.querySelector('img').src, 2); });
  if (photo3) photo3.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo3.querySelector('img').src, 3); });
  if (photo4) photo4.addEventListener('click', (e) => { e.stopPropagation(); changeImage(originalSrc, 4); });
  if (photo5) photo5.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo5.querySelector('img').src, 5); });
  if (photo6) photo6.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo6.querySelector('img').src, 6); });
</script>[/html]

[html]<div style="text-align: center;">
  <font face="ClickClack, Courier New, monospace" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
  const text = "ОБЩАЯ ИНФОРМАЦИЯ";
  const container = document.getElementById('typewriterText');
  let i = 0;
  let isDeleting = false;
 
  // Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
  let positions = [];
 
  function generatePositions(length) {
    const newPositions = [];
    for (let j = 0; j < length; j++) {
      // Очень маленькое смещение: -1, 0, или +1 (редко)
      const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
      newPositions.push(offset);
    }
    return newPositions;
  }
 
  function updateDisplay() {
    if (i === 0) {
      container.innerHTML = '';
      return;
    }
   
    const currentText = text.substring(0, i);
    let html = '';
    for (let j = 0; j < currentText.length; j++) {
      const char = currentText[j];
      // Для пробела не применяем смещение
      if (char === ' ') {
        html += `<span style="display: inline-block;">&nbsp;</span>`;
      } else {
        const offset = positions[j] || 0;
        // Очень мягкое смещение с плавным переходом
        html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
      }
    }
    container.innerHTML = html;
  }
 
  function typeWriterEffect() {
    if (!isDeleting && i < text.length) {
      // Печатаем новую букву — обновляем позиции для всех напечатанных букв
      if (i + 1 <= text.length) {
        positions = generatePositions(i + 1);
      }
      i++;
      updateDisplay();
      setTimeout(typeWriterEffect, 140);
    }
    else if (!isDeleting && i === text.length) {
      isDeleting = true;
      setTimeout(typeWriterEffect, 2000);
    }
    else if (isDeleting && i > 0) {
      i--;
      updateDisplay();
      setTimeout(typeWriterEffect, 80);
    }
    else if (isDeleting && i === 0) {
      isDeleting = false;
      positions = [];
      setTimeout(typeWriterEffect, 1500);
    }
  }
 
  // Запускаем анимацию
  typeWriterEffect();
</script>[/html]

Дата создания: 10 марта 2024 г.

Дата открытия: 1 апреля 2024 г.

Жанр: реализм, мистика, сплаттерпанк, постапокалиптика.

Рейтинг: 21+, требуется подтверждение возраста (обязательно).

Система игры: эпизодическая.

Вид игры с мастером: смешанный.

Сюжет: о жизни персонажей в заданных миром условиях. Мир вокруг — не декорация, а то, с чем можно и нужно взаимодействовать, то, что влияет на персонажа.

Почему #барсук?: потому что есть мем: «Если бы для вас делали бар, то это был бы бар для сук и конченых предателей». Из мема родился форум.

Это значит, что вы суки и предатели?: все мы для кого-то когда-то являлись и/или являемся суками и предателями. Это норма жизни. Нельзя всем нравиться и для всех быть хорошим. О том, какие мы на самом деле, можно узнать только из личного общения с нами. Будешь ты этим заморачиваться или нет — дело твоё. Фраза, приписанная Курту Кобейну, лучше всего нас характеризует: «Пусть уж меня ненавидят за то, кто я есть, чем любят за то, кем я не являюсь».

Куда я вообще попал? На текстовую ролевую, которая проходит на форуме платформы Mybb. Это значит, что вся информация о мире, событиях, персонажах и так далее — вымышленная и не имеет никакого отношения к реальному миру. Однако законы реального мира, в частности Российской Федерации, на территории которой мы проживаем, при оформлении тем и общении мы соблюдаем. Именно поэтому, в том числе, у нас есть обязательная проверка возраста перед получением доступа к контенту, имеющемуся на форуме. 

Каким персонажем я могу прийти?: ты можешь прийти авторским персонажем или персонажем любого фэндома, который ты переделаешь под мир #барсука.

Кем у вас можно играть? людьми, ведьмами/ведьмаками, существами (включая богов), волшебниками, чародеями, своей расой/другой, если она переделана под мир #барсука.

Плагиат и авторское право: плагиат — это умышленное присвоение авторства на чужое произведение (текст, изображение, музыку, код и т.д.), которое вы не создавали сами. Авторское право — это раздел права, который защищает результаты интеллектуального труда. Если совсем кратко и простыми словами: это ваше законное право на всё, что вы создали сами (текст, музыку, рисунок, фото, видео, программу), и запрет другим использовать это без вашего разрешения. Соответственно, если мы и используем на проекте готовый концепт, то мы его полностью переделываем под мир #барсука. Сам мир #барсука создавался на основе реального мира, в котором мы живём, ролевого мира, по которому Мастер Игры играл более 12 лет, — Гетто: Бойня Душ, логики, личного опыта и познаний, насмотренности и начитанности Маэстро и Мастера Игры. Все изображения, которые использованы при оформлении тем, тексты песен, книг и так далее, принадлежат их авторам. Мы не используем чужую интеллектуальную собственность с целью обогащения или присвоения себе. Нам это нужно исключительно для красоты и эстетики при оформлении наших сообщений, чтобы лучше передать атмосферу игры и погрузиться в неё.

Количество игроков: пять, включая администрацию.

Важно количество или качество?: качество. Мы ищем единомышленников и тех, с кем нам будет комфортно вместе изучать мир #барсука.

Количество мастеров: двое. Маэстро и Мастер Игры.

Темп игры: по договоренности и загруженности в реале.

Сроки отписи: не реже одного поста раз в 180 дней. В случае превышения срока — предупреждение через ЛС форума. На пост в эпизоде после предупреждения даётся 7 дней. Если без объективных и уважительных причин пост не написан, эпизод уходит в архив, события из него не засчитываются. Эпизод можно вернуть из архива, но написать в него необходимо в течение 3 дней. Затем срок вновь увеличивается до 180 дней.

Сроки отсутствия: полное отсутствие без уведомления мастера игры в течение 90 дней — удаление с форума после предупреждения через ЛС. На возвращение после предупреждения даётся 7 дней. Если игрок не вернулся, его аккаунт удаляется, все темы переносятся в архив. Игрок может вернуться на проект в любой момент. Если игрок уведомляет мастера об отсутствии по уважительным и объективным причинам (без подробностей, например: «завал в реале, проблемы со здоровьем») и сообщает, что ему важно сохранить персонажей и игры, то ни его персонажи, ни эпизоды в архив не переносятся.

Является ли «неписюн» уважительной и объективной причиной отсутствия?: нет. Садимся, перечитываем посты, перечитываем анкету персонажа и пишем в рамках логики персонажа и обстоятельств. Даже если пост получился маленьким, сухим, безэмоциональным — важно писать, а не ждать «музу». Сроки на проекте достаточно нетребовательные, поэтому если не получается написать даже в них, то велик шанс, что оно и не нужно. Следовательно, незачем тратить своё драгоценное время — лучше заняться тем, что действительно нравится, на что есть время, силы, желание. Уважайте себя и других!

Есть ли ограничения по количеству символов в посте?: нет. Важен не размер, а качество. Не забывайте: у нас не совместное написание книги, а игра, а игра подразумевает взаимодействие. Посты должны быть такими, чтобы и вам, и вашему соигроку всегда было на что реагировать и что делать. Тогда игра выходит живой. Скучно не будет, как и мыслей: «А что мне здесь писать?»

Ограничения по внешностям (рисованные/реальные): нет.

Ограничения по количеству персонажей: нет.

Приоритет квестов: личные; участие в глобальных (сюжетных) квестах исключительно добровольное.

Администрация оставляет за собой право вносить корректировки в информацию о мире, правилах поведения на форуме и другие огранизационные темы?: да.

Обязуется уведомлять об этом?: да.

Дата последнего обновления: 19 апреля 2026 г.

P.S. при наведение на "фотокарточку" в "шапке" темы, она чуть увеличивыается. При клике мышкой на мелкие "фотокарточки" - меняется на ту, по которой вы кликнули. Развлекайтесь с:

0

2

[html]<div style="position: relative; width: 600px; margin: 80px auto 100px auto;">
 
  <div style="position: relative; width: 600px; margin: 0 auto;">
   
    <!-- ФОТО 1: СНИЗУ-СЛЕВА -->
    <div id="photo1" style="position: absolute; bottom: -55px; left: 20px; width: 110px; height: 110px; z-index: 15; cursor: pointer; transform: rotate(-14deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/ad/62/e4/ad62e476f16df7a7b3068a460322c396.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-a"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 2: СНИЗУ-ПО-ЦЕНТРУ -->
    <div id="photo2" style="position: absolute; bottom: -25px; left: 240px; width: 120px; height: 120px; z-index: 15; cursor: pointer; transform: rotate(6deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/91/46/3d/91463d2fbac23ef4bae76750647c6db0.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-b"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 3: СВЕРХУ-СПРАВА -->
    <div id="photo3" style="position: absolute; top: -60px; right: 30px; width: 105px; height: 105px; z-index: 15; cursor: pointer; transform: rotate(18deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/7b/d3/77/7bd37757134e7f275c43a63f902a5bfa.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-c"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 4: СВЕРХУ-СЛЕВА (ВОЗВРАЩАЕТ ИСХОДНУЮ КАРТИНКУ) -->
    <div id="photo4" style="position: absolute; top: -35px; left: 100px; width: 95px; height: 95px; z-index: 15; cursor: pointer; transform: rotate(-22deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/49/f7/03/49f7037df92e5b5db8281eb28a375995.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-d"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 5: СНИЗУ-СПРАВА -->
    <div id="photo5" style="position: absolute; bottom: -70px; right: 80px; width: 115px; height: 115px; z-index: 15; cursor: pointer; transform: rotate(25deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/78/a1/12/78a112c7eb09e235bf38d760e56afcda.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-e"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 6: СВЕРХУ-ПО-ЦЕНТРУ -->
    <div id="photo6" style="position: absolute; top: -30px; left: 170px; width: 100px; height: 100px; z-index: 15; cursor: pointer; transform: rotate(-10deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/69/c2/d9/69c2d916551701f66924bbb6248c4774.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-f"></div>
        </div>
      </div>
    </div>

    <!-- ОСНОВНАЯ ФОТОГРАФИЯ -->
    <div id="mainWrapper" style="position: relative; z-index: 20; transform: rotate(1deg); transition: transform 0.8s ease-out; display: inline-block;">
      <div style="background: #9a8b7a; border-radius: 14px; padding: 4px; box-shadow: 0 0 0 1px #7a6b5a, inset 0 0 0 1px #b8a99a;">
        <div style="background: #c0c0c0; border-radius: 10px; padding: 1px; box-shadow: inset 0 0 0 1px #e8e8e8, inset 0 0 3px rgba(0,0,0,0.15);">
          <div style="position: relative; overflow: hidden; border-radius: 9px;">
            <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->
            <img id="mainPhoto" src="https://i.pinimg.com/736x/49/f7/03/49f7037df92e5b5db8281eb28a375995.jpg" width="600" height="250" style="width: 600px; height: 250px; display: block; object-fit: cover; filter: sepia(0.5) contrast(1.18) brightness(0.92) saturate(0.9); transition: opacity 0.3s ease;">
            <div class="scratch-overlay-main"></div>
            <div class="stain-overlay-main"></div>
            <div class="grain-overlay"></div>
            <div id="mainBlood1" class="blood-main-a"></div>
            <div id="mainBlood2" class="blood-main-b" style="display: none;"></div>
            <div id="mainBlood3" class="blood-main-c" style="display: none;"></div>
            <div id="mainBlood4" class="blood-main-d" style="display: none;"></div>
            <div id="mainBlood5" class="blood-main-e" style="display: none;"></div>
            <div id="mainBlood6" class="blood-main-f" style="display: none;"></div>
          </div>
        </div>
      </div>
    </div>
   
  </div>
</div>

<style>
  #photo1, #photo2, #photo3, #photo4, #photo5, #photo6 { transition: transform 0.8s ease-out; }
  #photo1:hover, #photo2:hover, #photo3:hover, #photo4:hover, #photo5:hover, #photo6:hover { transform: rotate(0deg) scale(1.08) !important; z-index: 30 !important; }
  #mainWrapper { transition: transform 0.8s ease-out; }
  #mainWrapper:hover { transform: rotate(0deg) scale(1.05) !important; }
 
  .scratch-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 5px); border-radius: 8px; z-index: 2; }
  .scratch-overlay-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 5px), repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(80,60,40,0.06) 3px, rgba(80,60,40,0.06) 7px); border-radius: 9px; z-index: 2; }
 
  .stain-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(circle at 20% 30%, rgba(160,120,80,0.18) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(100,70,40,0.14) 0%, transparent 60%); border-radius: 8px; z-index: 2; }
  .stain-overlay-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(ellipse at 15% 25%, rgba(160,130,95,0.15) 0%, transparent 40%), radial-gradient(ellipse at 85% 70%, rgba(110,85,60,0.12) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(180,155,125,0.08) 0%, transparent 70%); border-radius: 9px; z-index: 2; }
 
  .blood-type-a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 65% 25%, rgba(220,40,20,0.55) 0%, rgba(200,35,15,0.4) 4%, transparent 7%), radial-gradient(circle at 30% 75%, rgba(210,35,18,0.45) 0%, rgba(190,30,12,0.3) 3%, transparent 6%), radial-gradient(circle at 85% 85%, rgba(230,45,22,0.35) 0%, transparent 5%); }
  .blood-type-b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(ellipse at 40% 50%, rgba(120,20,12,0.65) 0%, rgba(100,15,8,0.45) 6%, transparent 10%), radial-gradient(circle at 75% 35%, rgba(130,22,14,0.5) 0%, rgba(110,18,10,0.35) 4%, transparent 7%), radial-gradient(circle at 20% 80%, rgba(115,18,10,0.4) 0%, transparent 5%); }
  .blood-type-c { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(ellipse at 55% 60%, rgba(190,35,18,0.5) 0%, rgba(170,28,14,0.35) 8%, transparent 12%), radial-gradient(circle at 80% 20%, rgba(200,38,20,0.4) 0%, transparent 6%), radial-gradient(ellipse at 25% 40%, rgba(180,30,15,0.35) 0%, transparent 8%); }
  .blood-type-d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 70% 70%, rgba(80,15,8,0.55) 0%, rgba(60,10,5,0.4) 5%, transparent 9%), radial-gradient(circle at 30% 25%, rgba(90,18,10,0.45) 0%, rgba(70,12,6,0.3) 4%, transparent 7%); }
  .blood-type-e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 45% 35%, rgba(235,50,25,0.6) 0%, rgba(215,40,18,0.45) 5%, transparent 9%), radial-gradient(circle at 60% 80%, rgba(225,45,22,0.5) 0%, rgba(205,35,16,0.35) 4%, transparent 7%), radial-gradient(circle at 15% 55%, rgba(240,55,28,0.35) 0%, transparent 5%); }
  .blood-type-f { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 50% 45%, rgba(180,32,16,0.55) 0%, rgba(160,25,12,0.4) 6%, transparent 10%), radial-gradient(circle at 25% 70%, rgba(200,38,20,0.45) 0%, rgba(180,30,14,0.3) 3%, transparent 6%), radial-gradient(ellipse at 80% 30%, rgba(140,22,11,0.5) 0%, rgba(120,18,8,0.35) 5%, transparent 8%), radial-gradient(circle at 10% 15%, rgba(210,42,22,0.3) 0%, transparent 4%); }
 
  .blood-main-a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 35% 25%, rgba(220,40,20,0.55) 0%, rgba(200,35,15,0.4) 6%, transparent 10%), radial-gradient(circle at 70% 55%, rgba(210,38,18,0.45) 0%, rgba(190,32,14,0.35) 5%, transparent 8%), radial-gradient(circle at 25% 80%, rgba(230,45,22,0.4) 0%, rgba(210,38,16,0.3) 4%, transparent 7%); }
  .blood-main-b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(ellipse at 60% 30%, rgba(120,20,12,0.65) 0%, rgba(100,15,8,0.45) 7%, transparent 12%), radial-gradient(circle at 20% 65%, rgba(130,22,14,0.5) 0%, rgba(110,18,10,0.35) 4%, transparent 8%), radial-gradient(circle at 80% 80%, rgba(115,18,10,0.4) 0%, transparent 6%); }
  .blood-main-c { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(ellipse at 40% 50%, rgba(190,35,18,0.55) 0%, rgba(170,28,14,0.4) 8%, transparent 13%), radial-gradient(circle at 75% 25%, rgba(200,38,20,0.45) 0%, rgba(180,30,15,0.3) 5%, transparent 8%), radial-gradient(ellipse at 55% 80%, rgba(185,32,16,0.35) 0%, transparent 6%); }
  .blood-main-d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 25% 35%, rgba(80,15,8,0.6) 0%, rgba(60,10,5,0.45) 6%, transparent 11%), radial-gradient(circle at 85% 70%, rgba(90,18,10,0.5) 0%, rgba(70,12,6,0.35) 5%, transparent 9%), radial-gradient(ellipse at 50% 20%, rgba(75,14,7,0.4) 0%, transparent 7%); }
  .blood-main-e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 55% 40%, rgba(235,50,25,0.6) 0%, rgba(215,40,18,0.45) 7%, transparent 12%), radial-gradient(circle at 30% 70%, rgba(225,45,22,0.5) 0%, rgba(205,35,16,0.35) 5%, transparent 9%), radial-gradient(circle at 80% 20%, rgba(240,55,28,0.4) 0%, transparent 6%), radial-gradient(ellipse at 15% 50%, rgba(220,42,20,0.35) 0%, transparent 5%); }
  .blood-main-f { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 45% 35%, rgba(180,32,16,0.55) 0%, rgba(160,25,12,0.4) 6%, transparent 10%), radial-gradient(circle at 70% 75%, rgba(200,38,20,0.45) 0%, rgba(180,30,14,0.35) 4%, transparent 7%), radial-gradient(ellipse at 25% 60%, rgba(140,22,11,0.5) 0%, rgba(120,18,8,0.35) 5%, transparent 9%), radial-gradient(circle at 85% 15%, rgba(210,42,22,0.35) 0%, transparent 5%); }
 
  .grain-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.08"/></svg>'); background-repeat: repeat; background-size: 200px; border-radius: 9px; z-index: 4; mix-blend-mode: multiply; }
</style>

<!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->

<script>
  const originalSrc = "https://i.pinimg.com/736x/49/f7/03/49f7037df92e5b5db8281eb28a375995.jpg";
  const mainPhoto = document.getElementById('mainPhoto');
 
  const photo1 = document.getElementById('photo1');
  const photo2 = document.getElementById('photo2');
  const photo3 = document.getElementById('photo3');
  const photo4 = document.getElementById('photo4');
  const photo5 = document.getElementById('photo5');
  const photo6 = document.getElementById('photo6');
 
  const mainBlood1 = document.getElementById('mainBlood1');
  const mainBlood2 = document.getElementById('mainBlood2');
  const mainBlood3 = document.getElementById('mainBlood3');
  const mainBlood4 = document.getElementById('mainBlood4');
  const mainBlood5 = document.getElementById('mainBlood5');
  const mainBlood6 = document.getElementById('mainBlood6');
 
  function changeImage(newSrc, bloodType) {
    if (mainPhoto.src === newSrc) return;
   
    mainBlood1.style.display = 'none';
    mainBlood2.style.display = 'none';
    mainBlood3.style.display = 'none';
    mainBlood4.style.display = 'none';
    mainBlood5.style.display = 'none';
    mainBlood6.style.display = 'none';
   
    if (bloodType === 1) mainBlood1.style.display = 'block';
    else if (bloodType === 2) mainBlood2.style.display = 'block';
    else if (bloodType === 3) mainBlood3.style.display = 'block';
    else if (bloodType === 4) mainBlood4.style.display = 'block';
    else if (bloodType === 5) mainBlood5.style.display = 'block';
    else if (bloodType === 6) mainBlood6.style.display = 'block';
   
    mainPhoto.style.opacity = '0.5';
    setTimeout(() => {
      mainPhoto.src = newSrc;
      mainPhoto.style.opacity = '1';
    }, 150);
  }
 
  if (photo1) photo1.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo1.querySelector('img').src, 1); });
  if (photo2) photo2.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo2.querySelector('img').src, 2); });
  if (photo3) photo3.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo3.querySelector('img').src, 3); });
  if (photo4) photo4.addEventListener('click', (e) => { e.stopPropagation(); changeImage(originalSrc, 4); });
  if (photo5) photo5.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo5.querySelector('img').src, 5); });
  if (photo6) photo6.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo6.querySelector('img').src, 6); });
</script>[/html]

[html]<div style="text-align: center;">
  <font face="ClickClack, Courier New, monospace" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
  const text = "ФОРУМНАЯ РОЛЕВАЯ ИГРА";
  const container = document.getElementById('typewriterText');
  let i = 0;
  let isDeleting = false;
 
  // Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
  let positions = [];
 
  function generatePositions(length) {
    const newPositions = [];
    for (let j = 0; j < length; j++) {
      // Очень маленькое смещение: -1, 0, или +1 (редко)
      const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
      newPositions.push(offset);
    }
    return newPositions;
  }
 
  function updateDisplay() {
    if (i === 0) {
      container.innerHTML = '';
      return;
    }
   
    const currentText = text.substring(0, i);
    let html = '';
    for (let j = 0; j < currentText.length; j++) {
      const char = currentText[j];
      // Для пробела не применяем смещение
      if (char === ' ') {
        html += `<span style="display: inline-block;">&nbsp;</span>`;
      } else {
        const offset = positions[j] || 0;
        // Очень мягкое смещение с плавным переходом
        html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
      }
    }
    container.innerHTML = html;
  }
 
  function typeWriterEffect() {
    if (!isDeleting && i < text.length) {
      // Печатаем новую букву — обновляем позиции для всех напечатанных букв
      if (i + 1 <= text.length) {
        positions = generatePositions(i + 1);
      }
      i++;
      updateDisplay();
      setTimeout(typeWriterEffect, 140);
    }
    else if (!isDeleting && i === text.length) {
      isDeleting = true;
      setTimeout(typeWriterEffect, 2000);
    }
    else if (isDeleting && i > 0) {
      i--;
      updateDisplay();
      setTimeout(typeWriterEffect, 80);
    }
    else if (isDeleting && i === 0) {
      isDeleting = false;
      positions = [];
      setTimeout(typeWriterEffect, 1500);
    }
  }
 
  // Запускаем анимацию
  typeWriterEffect();
</script>[/html]

Форумная ролевая игра (ФРПГ, англ. forum role playing game, FRPG) — разновидность текстовой ролевой игры (ТРПГ, «текстовка»), проводящаяся на веб-форумах и являющаяся одной из разновидностей совместного хобби.

Форумная ролевая игра является своего рода поджанром литературных ролевых игр, соответственно, все события и персонажи, используемые на ней вымышленные. Любые совпадения с реальными событиями или людьми - случайны.

Правила текстовых ролевых игр предусматривают прописывание игроками в отдельном сообщении (посте) действий, мыслей и фраз тех персонажей, роли которых они играют. Это значит, что без согласования другого игрока, действия его персонажа не прописываются.

Посты оформляются в свободном стиле. Главное правило: удобство чтения и восприятия информации. Можно писать от любого лица и использовать классическое оформление: действия — текст без выделений, речь другого персонажа — подчёркнутым, речь своего персонажа — жирным, мысли персонажа — "курсивом в кавычках". Мастер игры может вводить дополнительные маркеры в конкретных постах, если есть необходимость привлечь внимание игрока к какой-то конкретной информации, детали и т.д. 

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

Мэри Сью (англ. Mary Sue), или Марти (Гэри) Стью (мужской вариант) — тип персонажа, целью создания и существования которого является исключительно компенсация недостатков автора в игре.

Что метагейм, что Мэри/Марти Сью/Стью на форуме категорически не приветствуются. Игрок получит всего одно предупреждение, связанное с этими нарушениями, и если не исправит свое поведение, будет удален с форума. Мы играем для взаимного удовольствия, а не для самоутверждения одного игрока за счет других.

Как правило, принцип создания фанфиков и ролевой игры схож. За основу также берется определённый мир, придуманный одним или группой авторов, в том числе и простыми игроками. Задачей этих самых игроков является создание персонажа, которого они пытаются раскрыть, моделируя различные сюжетные перипетии. Однако в отличие от фанфикшна, сюжет пишет не один игрок, а несколько. Он создается пошагово, в течение довольно долгого промежутка времени и его развязка, порою, остается загадкой даже для самих игроков. 

[html]<div style="text-align: center;">
  <font face="ClickClack, Courier New, monospace" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
  const text = "ВИДЫ ИГРЫ С МАСТЕРОМ";
  const container = document.getElementById('typewriterText');
  let i = 0;
  let isDeleting = false;
 
  // Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
  let positions = [];
 
  function generatePositions(length) {
    const newPositions = [];
    for (let j = 0; j < length; j++) {
      // Очень маленькое смещение: -1, 0, или +1 (редко)
      const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
      newPositions.push(offset);
    }
    return newPositions;
  }
 
  function updateDisplay() {
    if (i === 0) {
      container.innerHTML = '';
      return;
    }
   
    const currentText = text.substring(0, i);
    let html = '';
    for (let j = 0; j < currentText.length; j++) {
      const char = currentText[j];
      // Для пробела не применяем смещение
      if (char === ' ') {
        html += `<span style="display: inline-block;">&nbsp;</span>`;
      } else {
        const offset = positions[j] || 0;
        // Очень мягкое смещение с плавным переходом
        html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
      }
    }
    container.innerHTML = html;
  }
 
  function typeWriterEffect() {
    if (!isDeleting && i < text.length) {
      // Печатаем новую букву — обновляем позиции для всех напечатанных букв
      if (i + 1 <= text.length) {
        positions = generatePositions(i + 1);
      }
      i++;
      updateDisplay();
      setTimeout(typeWriterEffect, 140);
    }
    else if (!isDeleting && i === text.length) {
      isDeleting = true;
      setTimeout(typeWriterEffect, 2000);
    }
    else if (isDeleting && i > 0) {
      i--;
      updateDisplay();
      setTimeout(typeWriterEffect, 80);
    }
    else if (isDeleting && i === 0) {
      isDeleting = false;
      positions = [];
      setTimeout(typeWriterEffect, 1500);
    }
  }
 
  // Запускаем анимацию
  typeWriterEffect();
</script>[/html]

Классификация по взаимодействию между игроками и контролю игрового процесса предусматривает разделение форумных ролевых игр на несколько групп. В привычном понимании это две группы — «мастерские» и «свободные» (большинство игр принадлежит к смешанному типу). Для «мастерской» ролевой игры все игровые ситуации, задания игрокам, условия игры прописываются мастером игры (администратором или модератором), в некоторых случаях игра ведется только в режиме «мастер-игрок». Данная группа ролевых игр требует от мастеров постоянного контроля за форумом, в связи с чем на «мастерских» ролевых, как правило, или ограничено количество игроков, или достаточно жесткие условия приема в игру.

«Свободные» ролевые игры ведутся, как правило, в режиме «игрок-игрок». Администрация так же создает игровых персонажей, однако они не всегда выполняют сюжетообразующую функцию. Для создания игровых ситуаций чаще всего используются NPC — персонаж, аккаунт которого доступен для использования всеми игроками (иногда — мастерский персонаж, позволяющий моделировать игровую ситуацию, вносить какие-либо изменения в сюжет).

Также, хоть и достаточно редко, встречаются «Виртуальные приключения». Данный вид RPG больше похож на коллективное написание фанфика, при этом мир и сюжет могут уходить от оригинала всё дальше, а градус событий — всё выше. Гейм-мастера отсутствуют как класс, сюжетные линии обсуждаются в частной переписке и чатах, некоторые форумные правила не действуют. Как правило, «игру» ведет не более десятка персонажей, обычно 3-5.

[html]<div style="text-align: center;">
  <font face="ClickClack, Courier New, monospace" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
  const text = "А КАК НА #БАРСУКЕ?";
  const container = document.getElementById('typewriterText');
  let i = 0;
  let isDeleting = false;
 
  // Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
  let positions = [];
 
  function generatePositions(length) {
    const newPositions = [];
    for (let j = 0; j < length; j++) {
      // Очень маленькое смещение: -1, 0, или +1 (редко)
      const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
      newPositions.push(offset);
    }
    return newPositions;
  }
 
  function updateDisplay() {
    if (i === 0) {
      container.innerHTML = '';
      return;
    }
   
    const currentText = text.substring(0, i);
    let html = '';
    for (let j = 0; j < currentText.length; j++) {
      const char = currentText[j];
      // Для пробела не применяем смещение
      if (char === ' ') {
        html += `<span style="display: inline-block;">&nbsp;</span>`;
      } else {
        const offset = positions[j] || 0;
        // Очень мягкое смещение с плавным переходом
        html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
      }
    }
    container.innerHTML = html;
  }
 
  function typeWriterEffect() {
    if (!isDeleting && i < text.length) {
      // Печатаем новую букву — обновляем позиции для всех напечатанных букв
      if (i + 1 <= text.length) {
        positions = generatePositions(i + 1);
      }
      i++;
      updateDisplay();
      setTimeout(typeWriterEffect, 140);
    }
    else if (!isDeleting && i === text.length) {
      isDeleting = true;
      setTimeout(typeWriterEffect, 2000);
    }
    else if (isDeleting && i > 0) {
      i--;
      updateDisplay();
      setTimeout(typeWriterEffect, 80);
    }
    else if (isDeleting && i === 0) {
      isDeleting = false;
      positions = [];
      setTimeout(typeWriterEffect, 1500);
    }
  }
 
  // Запускаем анимацию
  typeWriterEffect();
</script>[/html]

Взаимодействие с мастером на #барсуке может быть активным, пассивным смешанным. Рассмотрим все это поближе.

Пассивный — Мастер Игры просто есть на форуме. Он лежит где-то в админке (обосанной подворотне) и ждет, когда его позовут играть.

Активный — ты призываешь Мастера игры в нужный тебе эпизод, и вы играете вместе.

Смешанный — то заманиваешь мастера к себе в эпизод вкусняшками, то прогоняешь его мокрой тряпкой обратно в его подворотню. 

[html]<div style="text-align: center;">
  <font face="ClickClack, Courier New, monospace" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
  const text = "РЕЙТИНГ РОЛЕВЫХ ИГР";
  const container = document.getElementById('typewriterText');
  let i = 0;
  let isDeleting = false;
 
  // Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
  let positions = [];
 
  function generatePositions(length) {
    const newPositions = [];
    for (let j = 0; j < length; j++) {
      // Очень маленькое смещение: -1, 0, или +1 (редко)
      const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
      newPositions.push(offset);
    }
    return newPositions;
  }
 
  function updateDisplay() {
    if (i === 0) {
      container.innerHTML = '';
      return;
    }
   
    const currentText = text.substring(0, i);
    let html = '';
    for (let j = 0; j < currentText.length; j++) {
      const char = currentText[j];
      // Для пробела не применяем смещение
      if (char === ' ') {
        html += `<span style="display: inline-block;">&nbsp;</span>`;
      } else {
        const offset = positions[j] || 0;
        // Очень мягкое смещение с плавным переходом
        html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
      }
    }
    container.innerHTML = html;
  }
 
  function typeWriterEffect() {
    if (!isDeleting && i < text.length) {
      // Печатаем новую букву — обновляем позиции для всех напечатанных букв
      if (i + 1 <= text.length) {
        positions = generatePositions(i + 1);
      }
      i++;
      updateDisplay();
      setTimeout(typeWriterEffect, 140);
    }
    else if (!isDeleting && i === text.length) {
      isDeleting = true;
      setTimeout(typeWriterEffect, 2000);
    }
    else if (isDeleting && i > 0) {
      i--;
      updateDisplay();
      setTimeout(typeWriterEffect, 80);
    }
    else if (isDeleting && i === 0) {
      isDeleting = false;
      positions = [];
      setTimeout(typeWriterEffect, 1500);
    }
  }
 
  // Запускаем анимацию
  typeWriterEffect();
</script>[/html]

Ролевым играм, как правило, присваивается определённый возрастной рейтинг, в соответствии с характером игры:

G (General) — общая аудитория. Допускаются игроки любого возраста. Данный рейтинг показывает, что ролевая не содержит ничего, что большинство родителей могло бы посчитать неприемлемым для просмотра или прослушивания даже самыми маленькими детьми. Обнажение, сексуальные сцены и сцены приёма наркотиков отсутствуют; насилие минимально; отрывки диалога могут выйти за пределы вежливой беседы, но не выходят за пределы обычных ежедневных выражений.

PG — некоторый материал, возможно, не подходит для детей. Явные сексуальные сцены и сцены употребления наркотиков отсутствуют; нагота, если присутствует, то только очень ограниченно, ужас и насилие не превышают умеренного уровня.

PG-13 — некоторый материал может быть неподходящим для детей до 13 лет. Грубое или продолжительное насилие отсутствует; сексуальная ориентация на наготу отсутствует; некоторые сцены употребления наркотиков могут присутствовать; можно услышать единичные употребления грубой сексуальной лексики.

R (Restricted) — в игре присутствует нецензурная лексика, допускается отыгрыш насилия и секса.

NC-17 (No Children) и NC-21 — в игре не рекомендуется регистрироваться лицам, не достигшим 17 (21) лет.

#барсук имеет рейтинг NC-21 из-за своих жанровых особенностей. Соответственно, он не рекомендуется для регистрации лицам, не достигшим 21 года. Доступ к контенту форума предоставляется только тем игрокам, которые подтвердили свой возраст.

0

3

[html]<div style="position: relative; width: 600px; margin: 80px auto 100px auto;">
 
  <div style="position: relative; width: 600px; margin: 0 auto;">
   
    <!-- ФОТО 1: СНИЗУ-СЛЕВА -->
    <div id="photo1" style="position: absolute; bottom: -55px; left: 20px; width: 110px; height: 110px; z-index: 15; cursor: pointer; transform: rotate(-14deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/7f/d1/c9/7fd1c9850433450bf335b95ac6bfec75.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-a"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 2: СНИЗУ-ПО-ЦЕНТРУ -->
    <div id="photo2" style="position: absolute; bottom: -25px; left: 240px; width: 120px; height: 120px; z-index: 15; cursor: pointer; transform: rotate(6deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/a1/df/c8/a1dfc8b56844213a1ab8d9ea2b2fe688.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-b"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 3: СВЕРХУ-СПРАВА -->
    <div id="photo3" style="position: absolute; top: -60px; right: 30px; width: 105px; height: 105px; z-index: 15; cursor: pointer; transform: rotate(18deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/cb/b0/ec/cbb0ec2b9458a8c41a754063e5a8b9af.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-c"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 4: СВЕРХУ-СЛЕВА (ВОЗВРАЩАЕТ ИСХОДНУЮ КАРТИНКУ) -->
    <div id="photo4" style="position: absolute; top: -35px; left: 100px; width: 95px; height: 95px; z-index: 15; cursor: pointer; transform: rotate(-22deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/8e/77/f2/8e77f2c473c93c7157874110daff827f.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-d"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 5: СНИЗУ-СПРАВА -->
    <div id="photo5" style="position: absolute; bottom: -70px; right: 80px; width: 115px; height: 115px; z-index: 15; cursor: pointer; transform: rotate(25deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/a8/05/09/a805091da3be0cb33465826a87561dbb.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-e"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 6: СВЕРХУ-ПО-ЦЕНТРУ -->
    <div id="photo6" style="position: absolute; top: -30px; left: 170px; width: 100px; height: 100px; z-index: 15; cursor: pointer; transform: rotate(-10deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/f0/45/70/f045707569027c2baf74d1f88a729342.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-f"></div>
        </div>
      </div>
    </div>

    <!-- ОСНОВНАЯ ФОТОГРАФИЯ -->
    <div id="mainWrapper" style="position: relative; z-index: 20; transform: rotate(1deg); transition: transform 0.8s ease-out; display: inline-block;">
      <div style="background: #9a8b7a; border-radius: 14px; padding: 4px; box-shadow: 0 0 0 1px #7a6b5a, inset 0 0 0 1px #b8a99a;">
        <div style="background: #c0c0c0; border-radius: 10px; padding: 1px; box-shadow: inset 0 0 0 1px #e8e8e8, inset 0 0 3px rgba(0,0,0,0.15);">
          <div style="position: relative; overflow: hidden; border-radius: 9px;">
            <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->
            <img id="mainPhoto" src="https://i.pinimg.com/736x/8e/77/f2/8e77f2c473c93c7157874110daff827f.jpg" width="600" height="250" style="width: 600px; height: 250px; display: block; object-fit: cover; filter: sepia(0.5) contrast(1.18) brightness(0.92) saturate(0.9); transition: opacity 0.3s ease;">
            <div class="scratch-overlay-main"></div>
            <div class="stain-overlay-main"></div>
            <div class="grain-overlay"></div>
            <div id="mainBlood1" class="blood-main-a"></div>
            <div id="mainBlood2" class="blood-main-b" style="display: none;"></div>
            <div id="mainBlood3" class="blood-main-c" style="display: none;"></div>
            <div id="mainBlood4" class="blood-main-d" style="display: none;"></div>
            <div id="mainBlood5" class="blood-main-e" style="display: none;"></div>
            <div id="mainBlood6" class="blood-main-f" style="display: none;"></div>
          </div>
        </div>
      </div>
    </div>
   
  </div>
</div>

<style>
  #photo1, #photo2, #photo3, #photo4, #photo5, #photo6 { transition: transform 0.8s ease-out; }
  #photo1:hover, #photo2:hover, #photo3:hover, #photo4:hover, #photo5:hover, #photo6:hover { transform: rotate(0deg) scale(1.08) !important; z-index: 30 !important; }
  #mainWrapper { transition: transform 0.8s ease-out; }
  #mainWrapper:hover { transform: rotate(0deg) scale(1.05) !important; }
 
  .scratch-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 5px); border-radius: 8px; z-index: 2; }
  .scratch-overlay-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 5px), repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(80,60,40,0.06) 3px, rgba(80,60,40,0.06) 7px); border-radius: 9px; z-index: 2; }
 
  .stain-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(circle at 20% 30%, rgba(160,120,80,0.18) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(100,70,40,0.14) 0%, transparent 60%); border-radius: 8px; z-index: 2; }
  .stain-overlay-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(ellipse at 15% 25%, rgba(160,130,95,0.15) 0%, transparent 40%), radial-gradient(ellipse at 85% 70%, rgba(110,85,60,0.12) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(180,155,125,0.08) 0%, transparent 70%); border-radius: 9px; z-index: 2; }
 
  .blood-type-a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 65% 25%, rgba(220,40,20,0.55) 0%, rgba(200,35,15,0.4) 4%, transparent 7%), radial-gradient(circle at 30% 75%, rgba(210,35,18,0.45) 0%, rgba(190,30,12,0.3) 3%, transparent 6%), radial-gradient(circle at 85% 85%, rgba(230,45,22,0.35) 0%, transparent 5%); }
  .blood-type-b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(ellipse at 40% 50%, rgba(120,20,12,0.65) 0%, rgba(100,15,8,0.45) 6%, transparent 10%), radial-gradient(circle at 75% 35%, rgba(130,22,14,0.5) 0%, rgba(110,18,10,0.35) 4%, transparent 7%), radial-gradient(circle at 20% 80%, rgba(115,18,10,0.4) 0%, transparent 5%); }
  .blood-type-c { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(ellipse at 55% 60%, rgba(190,35,18,0.5) 0%, rgba(170,28,14,0.35) 8%, transparent 12%), radial-gradient(circle at 80% 20%, rgba(200,38,20,0.4) 0%, transparent 6%), radial-gradient(ellipse at 25% 40%, rgba(180,30,15,0.35) 0%, transparent 8%); }
  .blood-type-d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 70% 70%, rgba(80,15,8,0.55) 0%, rgba(60,10,5,0.4) 5%, transparent 9%), radial-gradient(circle at 30% 25%, rgba(90,18,10,0.45) 0%, rgba(70,12,6,0.3) 4%, transparent 7%); }
  .blood-type-e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 45% 35%, rgba(235,50,25,0.6) 0%, rgba(215,40,18,0.45) 5%, transparent 9%), radial-gradient(circle at 60% 80%, rgba(225,45,22,0.5) 0%, rgba(205,35,16,0.35) 4%, transparent 7%), radial-gradient(circle at 15% 55%, rgba(240,55,28,0.35) 0%, transparent 5%); }
  .blood-type-f { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 50% 45%, rgba(180,32,16,0.55) 0%, rgba(160,25,12,0.4) 6%, transparent 10%), radial-gradient(circle at 25% 70%, rgba(200,38,20,0.45) 0%, rgba(180,30,14,0.3) 3%, transparent 6%), radial-gradient(ellipse at 80% 30%, rgba(140,22,11,0.5) 0%, rgba(120,18,8,0.35) 5%, transparent 8%), radial-gradient(circle at 10% 15%, rgba(210,42,22,0.3) 0%, transparent 4%); }
 
  .blood-main-a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 35% 25%, rgba(220,40,20,0.55) 0%, rgba(200,35,15,0.4) 6%, transparent 10%), radial-gradient(circle at 70% 55%, rgba(210,38,18,0.45) 0%, rgba(190,32,14,0.35) 5%, transparent 8%), radial-gradient(circle at 25% 80%, rgba(230,45,22,0.4) 0%, rgba(210,38,16,0.3) 4%, transparent 7%); }
  .blood-main-b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(ellipse at 60% 30%, rgba(120,20,12,0.65) 0%, rgba(100,15,8,0.45) 7%, transparent 12%), radial-gradient(circle at 20% 65%, rgba(130,22,14,0.5) 0%, rgba(110,18,10,0.35) 4%, transparent 8%), radial-gradient(circle at 80% 80%, rgba(115,18,10,0.4) 0%, transparent 6%); }
  .blood-main-c { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(ellipse at 40% 50%, rgba(190,35,18,0.55) 0%, rgba(170,28,14,0.4) 8%, transparent 13%), radial-gradient(circle at 75% 25%, rgba(200,38,20,0.45) 0%, rgba(180,30,15,0.3) 5%, transparent 8%), radial-gradient(ellipse at 55% 80%, rgba(185,32,16,0.35) 0%, transparent 6%); }
  .blood-main-d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 25% 35%, rgba(80,15,8,0.6) 0%, rgba(60,10,5,0.45) 6%, transparent 11%), radial-gradient(circle at 85% 70%, rgba(90,18,10,0.5) 0%, rgba(70,12,6,0.35) 5%, transparent 9%), radial-gradient(ellipse at 50% 20%, rgba(75,14,7,0.4) 0%, transparent 7%); }
  .blood-main-e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 55% 40%, rgba(235,50,25,0.6) 0%, rgba(215,40,18,0.45) 7%, transparent 12%), radial-gradient(circle at 30% 70%, rgba(225,45,22,0.5) 0%, rgba(205,35,16,0.35) 5%, transparent 9%), radial-gradient(circle at 80% 20%, rgba(240,55,28,0.4) 0%, transparent 6%), radial-gradient(ellipse at 15% 50%, rgba(220,42,20,0.35) 0%, transparent 5%); }
  .blood-main-f { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 45% 35%, rgba(180,32,16,0.55) 0%, rgba(160,25,12,0.4) 6%, transparent 10%), radial-gradient(circle at 70% 75%, rgba(200,38,20,0.45) 0%, rgba(180,30,14,0.35) 4%, transparent 7%), radial-gradient(ellipse at 25% 60%, rgba(140,22,11,0.5) 0%, rgba(120,18,8,0.35) 5%, transparent 9%), radial-gradient(circle at 85% 15%, rgba(210,42,22,0.35) 0%, transparent 5%); }
 
  .grain-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.08"/></svg>'); background-repeat: repeat; background-size: 200px; border-radius: 9px; z-index: 4; mix-blend-mode: multiply; }
</style>

<script>
  const originalSrc = "https://i.pinimg.com/736x/8e/77/f2/8e77f2c473c93c7157874110daff827f.jpg";
  const mainPhoto = document.getElementById('mainPhoto');
 
  const photo1 = document.getElementById('photo1');
  const photo2 = document.getElementById('photo2');
  const photo3 = document.getElementById('photo3');
  const photo4 = document.getElementById('photo4');
  const photo5 = document.getElementById('photo5');
  const photo6 = document.getElementById('photo6');
 
  const mainBlood1 = document.getElementById('mainBlood1');
  const mainBlood2 = document.getElementById('mainBlood2');
  const mainBlood3 = document.getElementById('mainBlood3');
  const mainBlood4 = document.getElementById('mainBlood4');
  const mainBlood5 = document.getElementById('mainBlood5');
  const mainBlood6 = document.getElementById('mainBlood6');
 
  function changeImage(newSrc, bloodType) {
    if (mainPhoto.src === newSrc) return;
   
    mainBlood1.style.display = 'none';
    mainBlood2.style.display = 'none';
    mainBlood3.style.display = 'none';
    mainBlood4.style.display = 'none';
    mainBlood5.style.display = 'none';
    mainBlood6.style.display = 'none';
   
    if (bloodType === 1) mainBlood1.style.display = 'block';
    else if (bloodType === 2) mainBlood2.style.display = 'block';
    else if (bloodType === 3) mainBlood3.style.display = 'block';
    else if (bloodType === 4) mainBlood4.style.display = 'block';
    else if (bloodType === 5) mainBlood5.style.display = 'block';
    else if (bloodType === 6) mainBlood6.style.display = 'block';
   
    mainPhoto.style.opacity = '0.5';
    setTimeout(() => {
      mainPhoto.src = newSrc;
      mainPhoto.style.opacity = '1';
    }, 150);
  }
 
  if (photo1) photo1.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo1.querySelector('img').src, 1); });
  if (photo2) photo2.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo2.querySelector('img').src, 2); });
  if (photo3) photo3.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo3.querySelector('img').src, 3); });
  if (photo4) photo4.addEventListener('click', (e) => { e.stopPropagation(); changeImage(originalSrc, 4); });
  if (photo5) photo5.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo5.querySelector('img').src, 5); });
  if (photo6) photo6.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo6.querySelector('img').src, 6); });
</script>[/html]

[html]<div style="text-align: center;">
  <font face="ClickClack, Courier New, monospace" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
  const text = "ВОЗВРАСТНЫЕ ОГРАНИЧЕНИЯ И ДОСТУП К ФОРУМУ";
  const container = document.getElementById('typewriterText');
  let i = 0;
  let isDeleting = false;
 
  // Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
  let positions = [];
 
  function generatePositions(length) {
    const newPositions = [];
    for (let j = 0; j < length; j++) {
      // Очень маленькое смещение: -1, 0, или +1 (редко)
      const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
      newPositions.push(offset);
    }
    return newPositions;
  }
 
  function updateDisplay() {
    if (i === 0) {
      container.innerHTML = '';
      return;
    }
   
    const currentText = text.substring(0, i);
    let html = '';
    for (let j = 0; j < currentText.length; j++) {
      const char = currentText[j];
      // Для пробела не применяем смещение
      if (char === ' ') {
        html += `<span style="display: inline-block;">&nbsp;</span>`;
      } else {
        const offset = positions[j] || 0;
        // Очень мягкое смещение с плавным переходом
        html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
      }
    }
    container.innerHTML = html;
  }
 
  function typeWriterEffect() {
    if (!isDeleting && i < text.length) {
      // Печатаем новую букву — обновляем позиции для всех напечатанных букв
      if (i + 1 <= text.length) {
        positions = generatePositions(i + 1);
      }
      i++;
      updateDisplay();
      setTimeout(typeWriterEffect, 140);
    }
    else if (!isDeleting && i === text.length) {
      isDeleting = true;
      setTimeout(typeWriterEffect, 2000);
    }
    else if (isDeleting && i > 0) {
      i--;
      updateDisplay();
      setTimeout(typeWriterEffect, 80);
    }
    else if (isDeleting && i === 0) {
      isDeleting = false;
      positions = [];
      setTimeout(typeWriterEffect, 1500);
    }
  }
 
  // Запускаем анимацию
  typeWriterEffect();
</script>[/html]

Как уже было написано выше, #барсук имеет рейтинг NC-21 из-за своих жанровых особенностей. Соответственно, он не рекомендуется для регистрации лицам, не достигшим 21 года. Доступ к контенту форума предоставляется только тем игрокам, которые подтвердили свой возраст.

Да, на территории Российской Федерации максимальный рейтинг обозначен как 18+, однако мы сознательно повышаем планку до 21+ для комфорта и безопасности сообщества.

Сразу обозначу: мы не пропагандируем, не одобряем, не обосновываем употребление психотропных веществ, алкоголя, табака; антисоциальное и антиобщественное поведение; жестокие и насильственные действия в адрес людей и животных; унижение человеческого достоинства, прав и свободы; формирование нетрадиционных предпочтений; причинение вреда себе или окружающим; суицид; употребление нецензурной брани; отрицание семейных ценностей и неуважение к родителям и/или другим членам семьи; участие в азартных играх, занятие проституцией, бродяжничеством или попрошайничеством; педофилию; сексуальное насилие; смену пола.

Мы — за разумное, доброе, вечное. (с) Николай Алексеевич Некрасов

Очень важный момент, который сразу стоит пояснить, прежде чем ты перейдёшь к подробной инструкции (кликабельно) о том, как подтверждать возраст.

Во-первых, очень внимательно читаем, что именно от тебя требуется сделать. Понимаю, что написано довольно официальным и скучным языком, но это не просто так и не «от балды».

Во-вторых
, документ в законодательстве Российской Федерации — это информация, зафиксированная на любом материальном носителе с реквизитами, которые позволяют её однозначно идентифицировать. Пройдя процедуру обезличивания, документ перестаёт содержать персональные данные — идентифицировать конкретного человека по нему становится невозможно. Сам носитель информации при этом сохраняется, но юридически это уже не документ с персональными данными. От игрока, который хочет подтвердить свой возраст, требуется перед подтверждением возраста обезличить свои данные, и только после этого связываться с Мастером Игры.

В-третьих, это сугубо добровольное дело. Хочешь играть на нашем форуме — подтверждаешь возраст. Не хочешь — ищешь другую площадку.

А есть ли альтернативные способы подтвердить возраст? В целом, если ты до них додумаешься — почему бы и нет? Предлагай свои варианты, я их рассмотрю. Вполне может быть, что именно твоя идея нам подойдёт. Один из бывших игроков проекта приезжал к Мастеру Игры лично, чтобы показать документы. Если ты действительно хочешь у нас играть — способы найдутся. Но только не через постель. Через постель на форум и в состав администрации больше не попадают.

0

4

[html]<div style="position: relative; width: 600px; margin: 80px auto 100px auto;">
 
  <div style="position: relative; width: 600px; margin: 0 auto;">
   
    <!-- ФОТО 1: СНИЗУ-СЛЕВА -->
    <div id="photo1" style="position: absolute; bottom: -55px; left: 20px; width: 110px; height: 110px; z-index: 15; cursor: pointer; transform: rotate(-14deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/71/b9/f6/71b9f69df29605bfd15ad881969cbd45.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-a"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 2: СНИЗУ-ПО-ЦЕНТРУ -->
    <div id="photo2" style="position: absolute; bottom: -25px; left: 240px; width: 120px; height: 120px; z-index: 15; cursor: pointer; transform: rotate(6deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/b5/31/6d/b5316d4540b61405b41e6015f816ef06.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-b"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 3: СВЕРХУ-СПРАВА -->
    <div id="photo3" style="position: absolute; top: -60px; right: 30px; width: 105px; height: 105px; z-index: 15; cursor: pointer; transform: rotate(18deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/80/70/92/8070928cc994e5bc48716b2a4d2a275f.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-c"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 4: СВЕРХУ-СЛЕВА (ВОЗВРАЩАЕТ ИСХОДНУЮ КАРТИНКУ) -->
    <div id="photo4" style="position: absolute; top: -35px; left: 100px; width: 95px; height: 95px; z-index: 15; cursor: pointer; transform: rotate(-22deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/736x/38/7a/45/387a45dfad3390e9558684839fed1696.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-d"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 5: СНИЗУ-СПРАВА -->
    <div id="photo5" style="position: absolute; bottom: -70px; right: 80px; width: 115px; height: 115px; z-index: 15; cursor: pointer; transform: rotate(25deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/83/2f/46/832f46344f9f827fd6cb9ccadc8b32c1.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-e"></div>
        </div>
      </div>
    </div>

    <!-- ФОТО 6: СВЕРХУ-ПО-ЦЕНТРУ -->
    <div id="photo6" style="position: absolute; top: -30px; left: 170px; width: 100px; height: 100px; z-index: 15; cursor: pointer; transform: rotate(-10deg); transition: transform 0.8s ease-out;">
      <div style="position: relative; width: 100%; height: 100%; background: #c4b5a5; border-radius: 10px; padding: 2px;">
        <div style="position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;">
          <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ КАРТИНКУ ⬇️ -->
          <img src="https://i.pinimg.com/1200x/8e/33/61/8e33619f27c01ecc59a294bd452a7c3a.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) contrast(1.2) brightness(0.9) saturate(0.85); pointer-events: none;">
          <div class="scratch-overlay"></div>
          <div class="stain-overlay"></div>
          <div class="blood-type-f"></div>
        </div>
      </div>
    </div>

    <!-- ОСНОВНАЯ ФОТОГРАФИЯ -->
    <div id="mainWrapper" style="position: relative; z-index: 20; transform: rotate(1deg); transition: transform 0.8s ease-out; display: inline-block;">
      <div style="background: #9a8b7a; border-radius: 14px; padding: 4px; box-shadow: 0 0 0 1px #7a6b5a, inset 0 0 0 1px #b8a99a;">
        <div style="background: #c0c0c0; border-radius: 10px; padding: 1px; box-shadow: inset 0 0 0 1px #e8e8e8, inset 0 0 3px rgba(0,0,0,0.15);">
          <div style="position: relative; overflow: hidden; border-radius: 9px;">
            <!-- ⬇️ ЗАМЕНИ ССЫЛКУ НА СВОЮ ГЛАВНУЮ КАРТИНКУ ⬇️ -->
            <img id="mainPhoto" src="https://i.pinimg.com/736x/38/7a/45/387a45dfad3390e9558684839fed1696.jpg" width="600" height="250" style="width: 600px; height: 250px; display: block; object-fit: cover; filter: sepia(0.5) contrast(1.18) brightness(0.92) saturate(0.9); transition: opacity 0.3s ease;">
            <div class="scratch-overlay-main"></div>
            <div class="stain-overlay-main"></div>
            <div class="grain-overlay"></div>
            <div id="mainBlood1" class="blood-main-a"></div>
            <div id="mainBlood2" class="blood-main-b" style="display: none;"></div>
            <div id="mainBlood3" class="blood-main-c" style="display: none;"></div>
            <div id="mainBlood4" class="blood-main-d" style="display: none;"></div>
            <div id="mainBlood5" class="blood-main-e" style="display: none;"></div>
            <div id="mainBlood6" class="blood-main-f" style="display: none;"></div>
          </div>
        </div>
      </div>
    </div>
   
  </div>
</div>

<style>
  #photo1, #photo2, #photo3, #photo4, #photo5, #photo6 { transition: transform 0.8s ease-out; }
  #photo1:hover, #photo2:hover, #photo3:hover, #photo4:hover, #photo5:hover, #photo6:hover { transform: rotate(0deg) scale(1.08) !important; z-index: 30 !important; }
  #mainWrapper { transition: transform 0.8s ease-out; }
  #mainWrapper:hover { transform: rotate(0deg) scale(1.05) !important; }
 
  .scratch-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 5px); border-radius: 8px; z-index: 2; }
  .scratch-overlay-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 5px), repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(80,60,40,0.06) 3px, rgba(80,60,40,0.06) 7px); border-radius: 9px; z-index: 2; }
 
  .stain-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(circle at 20% 30%, rgba(160,120,80,0.18) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(100,70,40,0.14) 0%, transparent 60%); border-radius: 8px; z-index: 2; }
  .stain-overlay-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(ellipse at 15% 25%, rgba(160,130,95,0.15) 0%, transparent 40%), radial-gradient(ellipse at 85% 70%, rgba(110,85,60,0.12) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(180,155,125,0.08) 0%, transparent 70%); border-radius: 9px; z-index: 2; }
 
  .blood-type-a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 65% 25%, rgba(220,40,20,0.55) 0%, rgba(200,35,15,0.4) 4%, transparent 7%), radial-gradient(circle at 30% 75%, rgba(210,35,18,0.45) 0%, rgba(190,30,12,0.3) 3%, transparent 6%), radial-gradient(circle at 85% 85%, rgba(230,45,22,0.35) 0%, transparent 5%); }
  .blood-type-b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(ellipse at 40% 50%, rgba(120,20,12,0.65) 0%, rgba(100,15,8,0.45) 6%, transparent 10%), radial-gradient(circle at 75% 35%, rgba(130,22,14,0.5) 0%, rgba(110,18,10,0.35) 4%, transparent 7%), radial-gradient(circle at 20% 80%, rgba(115,18,10,0.4) 0%, transparent 5%); }
  .blood-type-c { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(ellipse at 55% 60%, rgba(190,35,18,0.5) 0%, rgba(170,28,14,0.35) 8%, transparent 12%), radial-gradient(circle at 80% 20%, rgba(200,38,20,0.4) 0%, transparent 6%), radial-gradient(ellipse at 25% 40%, rgba(180,30,15,0.35) 0%, transparent 8%); }
  .blood-type-d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 70% 70%, rgba(80,15,8,0.55) 0%, rgba(60,10,5,0.4) 5%, transparent 9%), radial-gradient(circle at 30% 25%, rgba(90,18,10,0.45) 0%, rgba(70,12,6,0.3) 4%, transparent 7%); }
  .blood-type-e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 45% 35%, rgba(235,50,25,0.6) 0%, rgba(215,40,18,0.45) 5%, transparent 9%), radial-gradient(circle at 60% 80%, rgba(225,45,22,0.5) 0%, rgba(205,35,16,0.35) 4%, transparent 7%), radial-gradient(circle at 15% 55%, rgba(240,55,28,0.35) 0%, transparent 5%); }
  .blood-type-f { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; z-index: 3; background: radial-gradient(circle at 50% 45%, rgba(180,32,16,0.55) 0%, rgba(160,25,12,0.4) 6%, transparent 10%), radial-gradient(circle at 25% 70%, rgba(200,38,20,0.45) 0%, rgba(180,30,14,0.3) 3%, transparent 6%), radial-gradient(ellipse at 80% 30%, rgba(140,22,11,0.5) 0%, rgba(120,18,8,0.35) 5%, transparent 8%), radial-gradient(circle at 10% 15%, rgba(210,42,22,0.3) 0%, transparent 4%); }
 
  .blood-main-a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 35% 25%, rgba(220,40,20,0.55) 0%, rgba(200,35,15,0.4) 6%, transparent 10%), radial-gradient(circle at 70% 55%, rgba(210,38,18,0.45) 0%, rgba(190,32,14,0.35) 5%, transparent 8%), radial-gradient(circle at 25% 80%, rgba(230,45,22,0.4) 0%, rgba(210,38,16,0.3) 4%, transparent 7%); }
  .blood-main-b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(ellipse at 60% 30%, rgba(120,20,12,0.65) 0%, rgba(100,15,8,0.45) 7%, transparent 12%), radial-gradient(circle at 20% 65%, rgba(130,22,14,0.5) 0%, rgba(110,18,10,0.35) 4%, transparent 8%), radial-gradient(circle at 80% 80%, rgba(115,18,10,0.4) 0%, transparent 6%); }
  .blood-main-c { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(ellipse at 40% 50%, rgba(190,35,18,0.55) 0%, rgba(170,28,14,0.4) 8%, transparent 13%), radial-gradient(circle at 75% 25%, rgba(200,38,20,0.45) 0%, rgba(180,30,15,0.3) 5%, transparent 8%), radial-gradient(ellipse at 55% 80%, rgba(185,32,16,0.35) 0%, transparent 6%); }
  .blood-main-d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 25% 35%, rgba(80,15,8,0.6) 0%, rgba(60,10,5,0.45) 6%, transparent 11%), radial-gradient(circle at 85% 70%, rgba(90,18,10,0.5) 0%, rgba(70,12,6,0.35) 5%, transparent 9%), radial-gradient(ellipse at 50% 20%, rgba(75,14,7,0.4) 0%, transparent 7%); }
  .blood-main-e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 55% 40%, rgba(235,50,25,0.6) 0%, rgba(215,40,18,0.45) 7%, transparent 12%), radial-gradient(circle at 30% 70%, rgba(225,45,22,0.5) 0%, rgba(205,35,16,0.35) 5%, transparent 9%), radial-gradient(circle at 80% 20%, rgba(240,55,28,0.4) 0%, transparent 6%), radial-gradient(ellipse at 15% 50%, rgba(220,42,20,0.35) 0%, transparent 5%); }
  .blood-main-f { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 3; background: radial-gradient(circle at 45% 35%, rgba(180,32,16,0.55) 0%, rgba(160,25,12,0.4) 6%, transparent 10%), radial-gradient(circle at 70% 75%, rgba(200,38,20,0.45) 0%, rgba(180,30,14,0.35) 4%, transparent 7%), radial-gradient(ellipse at 25% 60%, rgba(140,22,11,0.5) 0%, rgba(120,18,8,0.35) 5%, transparent 9%), radial-gradient(circle at 85% 15%, rgba(210,42,22,0.35) 0%, transparent 5%); }
 
  .grain-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.08"/></svg>'); background-repeat: repeat; background-size: 200px; border-radius: 9px; z-index: 4; mix-blend-mode: multiply; }
</style>

<script>
  const originalSrc = "https://i.pinimg.com/736x/38/7a/45/387a45dfad3390e9558684839fed1696.jpg";
  const mainPhoto = document.getElementById('mainPhoto');
 
  const photo1 = document.getElementById('photo1');
  const photo2 = document.getElementById('photo2');
  const photo3 = document.getElementById('photo3');
  const photo4 = document.getElementById('photo4');
  const photo5 = document.getElementById('photo5');
  const photo6 = document.getElementById('photo6');
 
  const mainBlood1 = document.getElementById('mainBlood1');
  const mainBlood2 = document.getElementById('mainBlood2');
  const mainBlood3 = document.getElementById('mainBlood3');
  const mainBlood4 = document.getElementById('mainBlood4');
  const mainBlood5 = document.getElementById('mainBlood5');
  const mainBlood6 = document.getElementById('mainBlood6');
 
  function changeImage(newSrc, bloodType) {
    if (mainPhoto.src === newSrc) return;
   
    mainBlood1.style.display = 'none';
    mainBlood2.style.display = 'none';
    mainBlood3.style.display = 'none';
    mainBlood4.style.display = 'none';
    mainBlood5.style.display = 'none';
    mainBlood6.style.display = 'none';
   
    if (bloodType === 1) mainBlood1.style.display = 'block';
    else if (bloodType === 2) mainBlood2.style.display = 'block';
    else if (bloodType === 3) mainBlood3.style.display = 'block';
    else if (bloodType === 4) mainBlood4.style.display = 'block';
    else if (bloodType === 5) mainBlood5.style.display = 'block';
    else if (bloodType === 6) mainBlood6.style.display = 'block';
   
    mainPhoto.style.opacity = '0.5';
    setTimeout(() => {
      mainPhoto.src = newSrc;
      mainPhoto.style.opacity = '1';
    }, 150);
  }
 
  if (photo1) photo1.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo1.querySelector('img').src, 1); });
  if (photo2) photo2.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo2.querySelector('img').src, 2); });
  if (photo3) photo3.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo3.querySelector('img').src, 3); });
  if (photo4) photo4.addEventListener('click', (e) => { e.stopPropagation(); changeImage(originalSrc, 4); });
  if (photo5) photo5.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo5.querySelector('img').src, 5); });
  if (photo6) photo6.addEventListener('click', (e) => { e.stopPropagation(); changeImage(photo6.querySelector('img').src, 6); });
</script>[/html]

[html]<div style="text-align: center;">
  <font face="ClickClack" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
  const text = "КАК У НАС ЗДЕСЬ ИГРАЮТ И ПРИНЯТО ВЗАИМОДЕЙСТВОВАТЬ ДРУГ С ДРУГОМ?";
  const container = document.getElementById('typewriterText');
  let i = 0;
  let isDeleting = false;
 
  // Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
  let positions = [];
 
  function generatePositions(length) {
    const newPositions = [];
    for (let j = 0; j < length; j++) {
      // Очень маленькое смещение: -1, 0, или +1 (редко)
      const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
      newPositions.push(offset);
    }
    return newPositions;
  }
 
  function updateDisplay() {
    if (i === 0) {
      container.innerHTML = '';
      return;
    }
   
    const currentText = text.substring(0, i);
    let html = '';
    for (let j = 0; j < currentText.length; j++) {
      const char = currentText[j];
      // Для пробела не применяем смещение
      if (char === ' ') {
        html += `<span style="display: inline-block;">&nbsp;</span>`;
      } else {
        const offset = positions[j] || 0;
        // Очень мягкое смещение с плавным переходом
        html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
      }
    }
    container.innerHTML = html;
  }
 
  function typeWriterEffect() {
    if (!isDeleting && i < text.length) {
      // Печатаем новую букву — обновляем позиции для всех напечатанных букв
      if (i + 1 <= text.length) {
        positions = generatePositions(i + 1);
      }
      i++;
      updateDisplay();
      setTimeout(typeWriterEffect, 140);
    }
    else if (!isDeleting && i === text.length) {
      isDeleting = true;
      setTimeout(typeWriterEffect, 2000);
    }
    else if (isDeleting && i > 0) {
      i--;
      updateDisplay();
      setTimeout(typeWriterEffect, 80);
    }
    else if (isDeleting && i === 0) {
      isDeleting = false;
      positions = [];
      setTimeout(typeWriterEffect, 1500);
    }
  }
 
  // Запускаем анимацию
  typeWriterEffect();
</script>[/html]

На форуме несколько систем ведения игры. Обо всех мы постепенно поговорим. Начнём с эпизодической системы. Несмотря на то, что у нас эпизодическая система игры, она переняла в себя правила локационной игры и настольных игр. Что это значит?

Во-первых, мир вокруг — живой. Он является не безжизненными декорациями на сцене, а действительно существует вокруг твоего персонажа, может меняться из-за его решений или действий, реагировать на них, а может влиять и на твоего персонажа. Если ты играешь с мастером, то более чётко это сможешь ощутить, но так как игра с мастером не обязательна, то ты просто должен это учитывать в голове. И если, например, на твоего персонажа посреди белого дня нападают в толпе, кто-то обязательно среагирует, и тебе нужно это учитывать. Безусловно, если брать реалии нашего мира, то, к большому сожалению, порой толпа бездействует при каких-либо происшествиях. Однако это тоже реакция мира, поэтому и её ты можешь описать. Тут уже решать тебе, что хочется для персонажа больше — помощь из толпы (в которой, кстати, может быть персонаж другого игрока) либо бездействие толпы (тоже, кстати, среди них может быть персонаж другого игрока).

Во-вторых, в ваш с соигроком эпизод могут прийти другие персонажи, если вы их пригласите. При этом если в двух эпизодах отыгрывается реакция на одно и то же событие, в одном и том же дне и в один и тот же час, то при встрече можно смело писать, что вы были на одной стороне улицы, а персонажи других игроков — на другой, и даже могли видеть друг друга, но по каким-то причинам не подошли. Или как раз-таки подошли, чтобы устроить более масштабное взаимодействие.

В-третьих, эпизоды являются не просто кусками из жизни персонажа, которые никак на него не влияют или не связаны друг с другом, а частями, из которых можно сложить единую картину. Это как с пазлом: кусок из другого пазла можно вставить, но общая картинка не получится. Можно переставить кусочек пазла в другое место, но там он будет смотреться неуместно. Поэтому не менее важна хронологическая последовательность эпизодов. Не торопись играть далёкое будущее, если в прошлом или настоящем у тебя есть события, которые могут кардинально перевернуть всё с ног на голову. Игра никуда не убежит, соигроки — тоже, а вернуть интерес к игре, если он вдруг пропал, можно очень разными способами. Главное, чтобы желание было, а всё остальное приложится.

В-четвёртых, смерть персонажа — это не конец игры. Конец игры — это когда автор оставляет своего персонажа и больше не играет им. Это же справедливо и для конфликтных ситуаций. Если у персонажей возник конфликт, то он возник ИСКЛЮЧИТЕЛЬНО у персонажей. Не переносите это на игроков. Игроки ни при чём. Конфликт — это не страшно. Любой конфликт — это развитие. А куда и в какую сторону — игра покажет. Доверяйте своим персонажам. Они живут в мире #барсука, им виднее. Мы тут, скорее, в роли наблюдателей и проводников, чем ведущих. Безусловно, неприятно, когда ожидания и действительность не сходятся, но не торопитесь с выводами. Нередко бывает так, что случившиеся изменения оказываются гораздо интереснее того, что ожидалось.

В-пятых, все конфликты между игроками решаются словами через рот, диалогом. Что-то беспокоит, не нравится, хочется обсудить — пишите соигроку и обсуждайте. Умалчивание и обсуждение за спиной до добра не доводят, проблему не решают, а усугубляют. Учимся верить человеку на слово: как сказал — так и есть. Сказал, что всё ок? Значит, ок. Даже если у нас иная информация, открылся седьмой глаз Будды во лбу и мы умеем читать мысли. Принимаем как есть, анализируем, делаем выводы и решаем: надо оно нам, не надо, готовы мы в этом разбираться или нет. Другой человек — это другой человек. У него своя правда, свой мир. Даже если кажется, что говорите об одном и том же, вы можете вкладывать разный смысл. Если не получается найти точек соприкосновения, понимания, общего языка и принять друг друга, то незачем друг друга принуждать и что-то доказывать. Вам не по пути. И это нормально. В крайнем случае, к решению конфликта можно привлечь администрацию форума, если вы понимаете, что сами не справляетесь и вам нужно стороннее незаинтересованное лицо, чтобы помочь разобраться в сложившейся ситуации.

В-шестых, если ты не обозначил свои потребности или проблемы — считаем, что их нет. Если у тебя есть потребность что-то обыграть или обсудить — приходишь к игроку и говоришь: «Мне н-нада». Игрок даёт тебе обратную связь: может он это дать, не может, в какие сроки и так далее. И дальше вы думаете, что со всем этим вы можете вместе сделать. К счастью, читать чужие мысли мы не умеем (и слава богу — мне там делать нечего, своих хватает), поэтому если тебе нужна какая-то игра для понимания или развития своего персонажа — обозначай это. Если тебе нужна игра непосредственно с Мастером Игры, то пиши по любому поводу и по любой игре, которая тебе нужна (даже если она тебе кажется дурацкой). Я здесь, в конце концов, исключительно ради этого и очень грущу, когда мне не с кем играть. Если тебе прям горит эта игра, ты всегда можешь это обозначить, и я найду время, чтобы хотя бы раз в день тебе отвечать. То же самое касается и проблем: есть проблема — говори. От того, что ты не расскажешь о своей проблеме, последствия всё равно будут, и не факт, что лучше, чем если бы ты эти проблемы обсудил и услышал точку зрения человека, с кем проблема есть.

В-седьмых, никогда, ни при каких обстоятельствах, не мешайте ролевое и личное. Не переносите отношения персонажей на отношения между игроками. Ничего хорошего из этого не выходит. Не обязательно быть близкими людьми (друзьями, любовниками, хорошо общаться и знать всё друг о друге), чтобы хорошо играть отношения между персонажами. Персонажи — это персонажи, и то, как они строят отношения по игре, происходит между ними. Вам, как игрокам, не обязательно быть близкими. Достаточно просто проявлять уважение друг к другу и, например, спрашивать, есть ли у человека сейчас силы, желание, время поговорить об игре. И не забывать, что подобное должно быть и в твой адрес. Не обижайтесь, если человек сейчас не в ресурсе разделить с тобой эмоции по поводу игры. Это нормально. Мы живём в очень интересные времена, поэтому своё безопасное место, где нас принимают со всеми достоинствами и недостатками, мы можем построить только сами. Уважайте себя, любите себя, цените, но не забывайте проявлять подобное и по отношению к тем, с кем вы заняты общим хобби.

В-восьмых, в поиске игры, связей между персонажами, обсуждении можно и нужно обсуждать все возникшие вопросы, писать о своих желаниях и так далее. В личном порядке это тоже можно делать. Можно задавать короткие вопросы друг другу и Мастеру Игры с целью понять, знает ваш персонаж ту или иную информацию или нет. То же самое справедливо и для глобальных эпизодов. Обсуждение эпизодов нужно в первую очередь для того, чтобы наладить коммуникацию между игроками, а также для лучшего понимания того, кто как ведёт и видит игру. Без обратной связи улучшить качество игры, а также сделать её комфортной для всех, попросту невозможно.

В-девятых, мастер игры играет с игроком, а не против игрока. Он не противопоставляет себя игроку и не ставит целью его победить. Противостояние возможно (и это круто) между персонажами, но с игроками для этого воевать и ссориться не нужно.

В-десятых, если тебе кажется, что всё сломалось и упало — это не так. Починить можно всегда и всё — было бы желание. К тому же «плохой» в моменте конец — это не всегда плохо, как и «хороший» в моменте по итогу не всегда хорошо. Держи это в уме и смело дерзай, пробуй, экспериментируй, ни в чём себе не отказывай, а что из этого получится — увидим вместе. Игра заканчивается только тогда, когда ты перестаёшь играть.

В-одиннадцатых, обращай внимание на то, что пишут игроки и Мастер Игры в своих постах. Со всем, что только угодно, ты можешь повзаимодействовать, изучить, потрогать, спросить у другого персонажа, что это такое. Изучай, исследуй и заставляй работать не только свой собственный мозг, но и мозг другого игрока. Вместе думать над тем, что там блеснуло под занавеской и к чему может привести, если это поднять, гораздо интереснее.

В-двенадцатых, я очень не люблю незавершённые истории. И не только я. Поэтому если ты решишь уйти, не описав, что именно станет с той или иной историей, или не вывел из истории своего персонажа, то именно твой авторский персонаж остаётся с тобой. Его использовать никто не будет. Однако если он важен для какого-то события или других персонажей, то будет создан персонаж по подобию и образу твоего. В силу того, что это будет творческое переосмысление (повторить и знать твой авторский уникальный стиль, а также нюансы, которые закладывал ты, никто не может), у нас выйдет другой персонаж с поклоном в твою сторону.

В-тринадцатых, вместо НПС у нас используется термин «массовка». Персонаж «массовки» является таким же полноценным персонажем, как и тот, на которого заведён отдельный аккаунт. Просто он используется под маской с основного аккаунта игрока.

[html]<div style="text-align: center;">
  <font face="ClickClack" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
  const text = "СИСТЕМА РЕТРОГРАДНОГО МЕРКУРИЯ";
  const container = document.getElementById('typewriterText');
  let i = 0;
  let isDeleting = false;
 
  // Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
  let positions = [];
 
  function generatePositions(length) {
    const newPositions = [];
    for (let j = 0; j < length; j++) {
      // Очень маленькое смещение: -1, 0, или +1 (редко)
      const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
      newPositions.push(offset);
    }
    return newPositions;
  }
 
  function updateDisplay() {
    if (i === 0) {
      container.innerHTML = '';
      return;
    }
   
    const currentText = text.substring(0, i);
    let html = '';
    for (let j = 0; j < currentText.length; j++) {
      const char = currentText[j];
      // Для пробела не применяем смещение
      if (char === ' ') {
        html += `<span style="display: inline-block;">&nbsp;</span>`;
      } else {
        const offset = positions[j] || 0;
        // Очень мягкое смещение с плавным переходом
        html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
      }
    }
    container.innerHTML = html;
  }
 
  function typeWriterEffect() {
    if (!isDeleting && i < text.length) {
      // Печатаем новую букву — обновляем позиции для всех напечатанных букв
      if (i + 1 <= text.length) {
        positions = generatePositions(i + 1);
      }
      i++;
      updateDisplay();
      setTimeout(typeWriterEffect, 140);
    }
    else if (!isDeleting && i === text.length) {
      isDeleting = true;
      setTimeout(typeWriterEffect, 2000);
    }
    else if (isDeleting && i > 0) {
      i--;
      updateDisplay();
      setTimeout(typeWriterEffect, 80);
    }
    else if (isDeleting && i === 0) {
      isDeleting = false;
      positions = [];
      setTimeout(typeWriterEffect, 1500);
    }
  }
 
  // Запускаем анимацию
  typeWriterEffect();
</script>[/html]

Ретроградный Меркурий обозначает возможность вмешательства Мастера Игры в твой эпизод с другим игроком. Нулевое значение ☿ означает, что мастер обходит стороной ваш эпизод, а 5 ☿☿☿☿☿ — что он очень активно мешается вам под ногами и всячески к вам пристаёт. В общем, чем больше Меркурий, тем навязчивее Мастер Игры. При создании эпизода по системе Ретроградного Меркурия обязательно скидывай его в поиск игры, связи между персонажами, обсуждение с упоминанием в теме Мастера Игры, чтобы мастер мог прийти к вам в игру. Заодно ты можешь указать момент, с которого он может вмешиваться, чтобы не мешать логике взаимодействия между вашими персонажами. Если тебе не нужно участие Мастера Игры в эпизоде, то просто удали из шаблона эпизода верхнюю часть (до кода, в который вставляется картинка).

[html]<div style="text-align: center;">
  <font face="ClickClack" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
  const text = "СТИЛЬ ВЕДЕНИЯ ИГРЫ";
  const container = document.getElementById('typewriterText');
  let i = 0;
  let isDeleting = false;
 
  // Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
  let positions = [];
 
  function generatePositions(length) {
    const newPositions = [];
    for (let j = 0; j < length; j++) {
      // Очень маленькое смещение: -1, 0, или +1 (редко)
      const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
      newPositions.push(offset);
    }
    return newPositions;
  }
 
  function updateDisplay() {
    if (i === 0) {
      container.innerHTML = '';
      return;
    }
   
    const currentText = text.substring(0, i);
    let html = '';
    for (let j = 0; j < currentText.length; j++) {
      const char = currentText[j];
      // Для пробела не применяем смещение
      if (char === ' ') {
        html += `<span style="display: inline-block;">&nbsp;</span>`;
      } else {
        const offset = positions[j] || 0;
        // Очень мягкое смещение с плавным переходом
        html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
      }
    }
    container.innerHTML = html;
  }
 
  function typeWriterEffect() {
    if (!isDeleting && i < text.length) {
      // Печатаем новую букву — обновляем позиции для всех напечатанных букв
      if (i + 1 <= text.length) {
        positions = generatePositions(i + 1);
      }
      i++;
      updateDisplay();
      setTimeout(typeWriterEffect, 140);
    }
    else if (!isDeleting && i === text.length) {
      isDeleting = true;
      setTimeout(typeWriterEffect, 2000);
    }
    else if (isDeleting && i > 0) {
      i--;
      updateDisplay();
      setTimeout(typeWriterEffect, 80);
    }
    else if (isDeleting && i === 0) {
      isDeleting = false;
      positions = [];
      setTimeout(typeWriterEffect, 1500);
    }
  }
 
  // Запускаем анимацию
  typeWriterEffect();
</script>[/html]

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

Линейный — если ты думаешь, что это самый простой способ для мастера вести игру, то ты ошибаешься. Во-первых, твой персонаж (и ты сам) можешь отказаться от того, что предлагает мастер. И это не будет нарушением с твоей стороны, потому что помни золотое правило: если твоего персонажа приняли в игру, то он подходит логике мира. Следовательно, единственная логика, которой тебе необходимо придерживаться, — это логика твоего персонажа. А о логике твоего персонажа и причинах его тех или иных поступков знать можешь только ты. И именно поэтому перед Мастером Игры стоит непростая задача: ему надо всеми правдами и неправдами привести твоего персонажа из точки А в точку Б. А когда ты хочешь, чтобы кто-то что-то сделал, как тебе надо, сделай так, чтобы он сам этого захотел. Вот пусть и ломает себе голову, а вы с персонажем развлекайтесь на полную и получайте удовольствие.

Выбор — это система, при которой персонажу в ходе игры даётся возможность сделать выбор в пользу чего-то. Такие выборы могут встречаться по пути к цели и у самой цели. Выборов может быть больше, чем один: два, три… много. Более того, если ты придумаешь какой-то свой интересный вариант из тех, которые можно выбрать, мастер выберет то, что предложил ты. Все персонажи разные, поэтому как твой персонаж может ничего не выбирать (и это тоже будет выбором), так и другие персонажи могут быть терпеливее и охотно ответят на все вопросы, а могут быть ужасно нетерпеливыми и отвечать ни на что не станут, откажутся от собственного же предложения и вообще уйдут. Это нормально. Не стоит из-за этого огорчаться, ведь если где-то закрылась одна дверь, то обязательно откроется другая. К тому же, если персонажам кровь из носу надо заполучить какие-то взаимодействия друг с другом, они найдут способы это взаимодействие получить. Поэтому не переживай. Всё так или иначе решится.

Кубики — у нас это не основная механика, которой мы пользуемся. Однако время от времени мы к ней прибегаем и получаются довольно забавные результаты, но системой мы не злоупотребляем, делая основной упор на то, что каждый персонаж добивается результата благодаря своим навыкам и характеристикам. Не в прямом смысле, а действиями, словами, поступками, наблюдательностью и вот этим всем.

[html]<div style="text-align: center;">
  <font face="ClickClack" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
  const text = "ЧАША ВЕСОВ";
  const container = document.getElementById('typewriterText');
  let i = 0;
  let isDeleting = false;
 
  // Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
  let positions = [];
 
  function generatePositions(length) {
    const newPositions = [];
    for (let j = 0; j < length; j++) {
      // Очень маленькое смещение: -1, 0, или +1 (редко)
      const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
      newPositions.push(offset);
    }
    return newPositions;
  }
 
  function updateDisplay() {
    if (i === 0) {
      container.innerHTML = '';
      return;
    }
   
    const currentText = text.substring(0, i);
    let html = '';
    for (let j = 0; j < currentText.length; j++) {
      const char = currentText[j];
      // Для пробела не применяем смещение
      if (char === ' ') {
        html += `<span style="display: inline-block;">&nbsp;</span>`;
      } else {
        const offset = positions[j] || 0;
        // Очень мягкое смещение с плавным переходом
        html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
      }
    }
    container.innerHTML = html;
  }
 
  function typeWriterEffect() {
    if (!isDeleting && i < text.length) {
      // Печатаем новую букву — обновляем позиции для всех напечатанных букв
      if (i + 1 <= text.length) {
        positions = generatePositions(i + 1);
      }
      i++;
      updateDisplay();
      setTimeout(typeWriterEffect, 140);
    }
    else if (!isDeleting && i === text.length) {
      isDeleting = true;
      setTimeout(typeWriterEffect, 2000);
    }
    else if (isDeleting && i > 0) {
      i--;
      updateDisplay();
      setTimeout(typeWriterEffect, 80);
    }
    else if (isDeleting && i === 0) {
      isDeleting = false;
      positions = [];
      setTimeout(typeWriterEffect, 1500);
    }
  }
 
  // Запускаем анимацию
  typeWriterEffect();
</script>[/html]

Прежде всего хочу сразу сказать: учитывать Чашу весов или нет — решать тебе. Да-да, как и с Меркурием. Ты сам решаешь, надо оно тебе или нет.

При старте игры Чаша весов находится в равновесии. Это значит, что на твою удачу и события в жизни ничего не влияет извне. Тебе либо везёт, либо нет, и насколько — решаешь исключительно сам.

Чаша весов существует с одной целью — разнообразить игру и ввести усложнения или облегчения для персонажа в его делах.

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

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

На уровень кармы влияют хорошие и плохие поступки. Если ты пнул котёнка — это понижает твой уровень кармы. Если подобрал его и нашёл ему хорошие руки или отправил в приют для животных — повышается.

Отыгрывать последствия перевеса Чаши весов ты будешь сам, в тот период жизни персонажа, когда тебе удобно. Есть вариант, при котором ты перекладываешь это на плечи Мастера Игры.

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

[html]<div style="text-align: center;">
  <font face="ClickClack" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
  const text = "СИСТЕМА ВИЗУАЛЬНЫХ ПОДСКАЗОК";
  const container = document.getElementById('typewriterText');
  let i = 0;
  let isDeleting = false;
 
  // Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
  let positions = [];
 
  function generatePositions(length) {
    const newPositions = [];
    for (let j = 0; j < length; j++) {
      // Очень маленькое смещение: -1, 0, или +1 (редко)
      const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
      newPositions.push(offset);
    }
    return newPositions;
  }
 
  function updateDisplay() {
    if (i === 0) {
      container.innerHTML = '';
      return;
    }
   
    const currentText = text.substring(0, i);
    let html = '';
    for (let j = 0; j < currentText.length; j++) {
      const char = currentText[j];
      // Для пробела не применяем смещение
      if (char === ' ') {
        html += `<span style="display: inline-block;">&nbsp;</span>`;
      } else {
        const offset = positions[j] || 0;
        // Очень мягкое смещение с плавным переходом
        html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
      }
    }
    container.innerHTML = html;
  }
 
  function typeWriterEffect() {
    if (!isDeleting && i < text.length) {
      // Печатаем новую букву — обновляем позиции для всех напечатанных букв
      if (i + 1 <= text.length) {
        positions = generatePositions(i + 1);
      }
      i++;
      updateDisplay();
      setTimeout(typeWriterEffect, 140);
    }
    else if (!isDeleting && i === text.length) {
      isDeleting = true;
      setTimeout(typeWriterEffect, 2000);
    }
    else if (isDeleting && i > 0) {
      i--;
      updateDisplay();
      setTimeout(typeWriterEffect, 80);
    }
    else if (isDeleting && i === 0) {
      isDeleting = false;
      positions = [];
      setTimeout(typeWriterEffect, 1500);
    }
  }
 
  // Запускаем анимацию
  typeWriterEffect();
</script>[/html]

Система визуальных подсказок — это интерактивная система, как в компьютерных играх, когда тебе в уголку экрана ненавязчиво всплывает подсказка. Это происходит не всегда и не везде, но иногда в игре с Мастером Игры ты можешь наткнуться на следующие опознавательные знаки:

  • 🔍 — в руки твоему персонажу попала важная улика.

  • 🧠 — твой персонаж додумался до какой-то ключевой информации.

  • 💭 — возможность разговорить персонажа.

  • 👁 — твой персонаж оказался достаточно внимательным, чтобы заметить что-то важное.

  • ⌛ — время на реакцию твоего персонажа ограничено.

  • 🔮 — твой персонаж ощущает мистическое воздействие.

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

[html]<div style="text-align: center;">
  <font face="ClickClack" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
  const text = "РАЗНИЦА МЕЖДУ ЛИЧНЫМИ И ГЛОБАЛЬНЫМИ (СЮЖЕТНЫМИ) ЭПИЗОДАМИ";
  const container = document.getElementById('typewriterText');
  let i = 0;
  let isDeleting = false;
 
  // Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
  let positions = [];
 
  function generatePositions(length) {
    const newPositions = [];
    for (let j = 0; j < length; j++) {
      // Очень маленькое смещение: -1, 0, или +1 (редко)
      const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
      newPositions.push(offset);
    }
    return newPositions;
  }
 
  function updateDisplay() {
    if (i === 0) {
      container.innerHTML = '';
      return;
    }
   
    const currentText = text.substring(0, i);
    let html = '';
    for (let j = 0; j < currentText.length; j++) {
      const char = currentText[j];
      // Для пробела не применяем смещение
      if (char === ' ') {
        html += `<span style="display: inline-block;">&nbsp;</span>`;
      } else {
        const offset = positions[j] || 0;
        // Очень мягкое смещение с плавным переходом
        html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
      }
    }
    container.innerHTML = html;
  }
 
  function typeWriterEffect() {
    if (!isDeleting && i < text.length) {
      // Печатаем новую букву — обновляем позиции для всех напечатанных букв
      if (i + 1 <= text.length) {
        positions = generatePositions(i + 1);
      }
      i++;
      updateDisplay();
      setTimeout(typeWriterEffect, 140);
    }
    else if (!isDeleting && i === text.length) {
      isDeleting = true;
      setTimeout(typeWriterEffect, 2000);
    }
    else if (isDeleting && i > 0) {
      i--;
      updateDisplay();
      setTimeout(typeWriterEffect, 80);
    }
    else if (isDeleting && i === 0) {
      isDeleting = false;
      positions = [];
      setTimeout(typeWriterEffect, 1500);
    }
  }
 
  // Запускаем анимацию
  typeWriterEffect();
</script>[/html]

Если мы обратимся к классике, то есть к литературе, то узнаем о таком дивном явлении, как конфликт. Конфликт — это столкновение противоположных взглядов действующих лиц в художественных произведениях. Он является движущей силой сюжета. Нам интересен этот термин с той точки зрения, что он двигает сюжет. Сюжет бывает глобальным (то, что происходит в мире и вокруг персонажа) и личным (то, что происходит с персонажем непосредственно или внутри него). Соответственно, участие в глобальных сюжетах необязательно, оно происходит по желанию.

Начиная с 19 января 2026 г., несмотря на то что участие в глобальных эпизодах — дело добровольное, если в течение 90 дней на ту или иную новость в глобальных квестах реакции со стороны игроков не было (то есть они не начали играть по этим событиям с мастером), событие развивается дальше в ту сторону, которая удобна мастеру. Данный порядок был введён для того, чтобы мир и окружение в нём были действительно живыми, а происходящие события учитывались персонажами, так как события могут происходить на соседней с ними улице и могут довольно сильно их впечатлить. Данное правило справедливо и для некоторых личных эпизодов, поэтому будьте внимательны не только к своим персонажам, но и к персонажам других игроков. Взаимное уважение всегда идёт только на пользу!

0


Вы здесь » #барсук » Расписание маршрутов » Общая информация перед регистрацией